/*
    dashboard.css
    Estilos del sistema de Dashboard / Widgets de Aunara.
    
    REGLA: Solo colores y efectos visuales aquí.
    Estructura, grid, spacing, tamaños → en los .razor.
    Todos los colores referencian variables de alma-theme.css.
*/

/* ─────────────────────────────────────────────────────────────
   WIDGET CONTAINER — base card
   ───────────────────────────────────────────────────────────── */
.widget-card {
    background: var(--alma-bg-card);
    border: 1px solid var(--alma-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.widget-card:hover {
    border-color: var(--alma-border-2);
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.widget-header {
    border-bottom: 1px solid var(--alma-border);
}

.widget-title {
    color: var(--alma-text);
}

.widget-subtitle {
    color: var(--alma-text-sub);
}

.widget-footer {
    border-top: 1px solid var(--alma-border);
    background: var(--alma-bg-2);
}

/* Botones de acción del header (refresh, settings) */
.widget-action-btn {
    color: var(--alma-text-sub);
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.widget-action-btn:hover {
    background: var(--alma-bg-hover);
    color: var(--alma-accent);
}

/* Estados: loading, error, empty */
.widget-state-text {
    color: var(--alma-text-sub);
}
.widget-error-icon {
    color: var(--widget-danger);
}
.widget-empty-icon {
    color: var(--alma-text-muted);
}

/* Footer link */
.widget-footer-link {
    color: var(--alma-accent);
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.15s ease;
    text-decoration: none;
}
.widget-footer-link:hover {
    color: var(--alma-accent-light);
}

/* ─────────────────────────────────────────────────────────────
   ICON BACKGROUNDS — por tipo semántico
   ───────────────────────────────────────────────────────────── */
.widget-icon-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* Cada widget define su color semántico */
.widget-icon-appointments { background: linear-gradient(135deg, #7c3aed, #db2777); }
.widget-icon-stats        { background: linear-gradient(135deg, #059669, #10b981); }
.widget-icon-revenue      { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.widget-icon-services     { background: linear-gradient(135deg, #d97706, #ea580c); }
.widget-icon-actions      { background: linear-gradient(135deg, #f97316, #ec4899); }
.widget-icon-alerts       { background: linear-gradient(135deg, #d97706, #f97316); }
.widget-icon-sales        { background: linear-gradient(135deg, #059669, #10b981); }
.widget-icon-stock        { background: linear-gradient(135deg, #d97706, #ea580c); }
.widget-icon-accent       { background: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2)); }

/* ─────────────────────────────────────────────────────────────
   COLORES SEMÁNTICOS DEL DASHBOARD
   (independientes del modo, siempre consistentes)
   ───────────────────────────────────────────────────────────── */
:root,
[data-mode="dark"] {
    /* Fondo de página del dashboard */
    --dash-bg: var(--alma-bg);

    /* Filas de items dentro de widgets */
    --widget-row-bg:        rgba(255,255,255,0.04);
    --widget-row-bg-hover:  rgba(255,255,255,0.07);
    --widget-row-border:    rgba(148,163,184,0.10);
    --widget-row-border-hover: rgba(29,184,138,0.25);

    /* Barra de progreso base */
    --widget-bar-track: rgba(255,255,255,0.08);

    /* Stats cards */
    --stat-green-bg:    rgba(5,150,105,0.12);
    --stat-green-border:rgba(5,150,105,0.25);
    --stat-green-text:  #34d399;
    --stat-green-label: #6ee7b7;

    --stat-red-bg:      rgba(220,38,38,0.12);
    --stat-red-border:  rgba(220,38,38,0.25);
    --stat-red-text:    #f87171;
    --stat-red-label:   #fca5a5;

    --stat-purple-bg:   rgba(124,58,237,0.12);
    --stat-purple-border:rgba(124,58,237,0.25);
    --stat-purple-text: #c4b5fd;
    --stat-purple-label:#ddd6fe;

    --stat-blue-bg:     rgba(37,99,235,0.12);
    --stat-blue-border: rgba(37,99,235,0.25);
    --stat-blue-text:   #60a5fa;
    --stat-blue-label:  #93c5fd;

    /* Turnos mini-stats */
    --mini-stat-bg:     rgba(255,255,255,0.05);
    --mini-stat-border: rgba(148,163,184,0.12);
    --mini-cyan-text:   #22d3ee;
    --mini-green-text:  #4ade80;
    --mini-amber-text:  #fbbf24;

    /* Revenue chart */
    --chart-border:     rgba(148,163,184,0.08);
    --chart-tooltip-bg: rgba(15,20,35,0.95);
    --chart-legend-text:var(--alma-text-sub);

    /* Appointment status gradients */
    --appt-completed:   linear-gradient(90deg, rgba(5,150,105,0.55), rgba(16,185,129,0.55));
    --appt-confirmed:   linear-gradient(90deg, rgba(37,99,235,0.55), rgba(6,182,212,0.55));
    --appt-cancelled:   linear-gradient(90deg, rgba(220,38,38,0.55), rgba(234,88,12,0.55));
    --appt-scheduled:   linear-gradient(90deg, rgba(124,58,237,0.55), rgba(219,39,119,0.55));
    --appt-text:        rgba(255,255,255,0.85);
    --appt-text-sub:    rgba(255,255,255,0.6);
    --appt-divider:     rgba(255,255,255,0.18);
    --appt-badge-bg:    rgba(255,255,255,0.18);

    /* Quick actions buttons */
    --action-cyan-bg:   linear-gradient(90deg, rgba(6,182,212,0.75), rgba(37,99,235,0.75));
    --action-cyan-hover:linear-gradient(90deg, rgba(6,182,212,1),    rgba(37,99,235,1));
    --action-green-bg:  linear-gradient(90deg, rgba(34,197,94,0.75), rgba(16,185,129,0.75));
    --action-green-hover:linear-gradient(90deg,rgba(34,197,94,1),    rgba(16,185,129,1));
    --action-purple-bg: linear-gradient(90deg, rgba(168,85,247,0.75),rgba(236,72,153,0.75));
    --action-purple-hover:linear-gradient(90deg,rgba(168,85,247,1),  rgba(236,72,153,1));
    --action-red-bg:    linear-gradient(90deg, rgba(239,68,68,0.75), rgba(234,88,12,0.75));
    --action-red-hover: linear-gradient(90deg, rgba(239,68,68,1),    rgba(234,88,12,1));
    --action-indigo-bg: linear-gradient(90deg, rgba(99,102,241,0.75),rgba(168,85,247,0.75));
    --action-indigo-hover:linear-gradient(90deg,rgba(99,102,241,1),  rgba(168,85,247,1));
    --action-teal-bg:   linear-gradient(90deg, rgba(20,184,166,0.75),rgba(6,182,212,0.75));
    --action-teal-hover:linear-gradient(90deg, rgba(20,184,166,1),   rgba(6,182,212,1));

    /* Alerts */
    --alert-warning-bg:  linear-gradient(90deg, #d97706, #ea580c);
    --alert-info-bg:     linear-gradient(90deg, #2563eb, #0891b2);
    --alert-task-bg:     linear-gradient(90deg, #7c3aed, #2563eb);
    --alert-badge-bg:    rgba(255,255,255,0.18);
    --alert-mark-btn-bg: rgba(255,255,255,0.18);
    --alert-mark-btn-hover: rgba(255,255,255,0.28);

    /* Stock widget */
    --stock-out-row-bg:    rgba(220,38,38,0.10);
    --stock-out-border:    rgba(220,38,38,0.25);
    --stock-out-badge:     rgba(220,38,38,0.20);
    --stock-out-text:      #f87171;
    --stock-low-row-bg:    rgba(217,119,6,0.08);
    --stock-low-border:    rgba(217,119,6,0.20);
    --stock-low-badge:     rgba(217,119,6,0.18);
    --stock-low-text:      #fbbf24;
    --stock-bar-track:     rgba(255,255,255,0.08);
    --stock-bar-out:       #ef4444;
    --stock-bar-low:       #f59e0b;

    /* Sales widget */
    --sale-row-bg:         rgba(255,255,255,0.04);
    --sale-row-hover:      rgba(255,255,255,0.07);
    --sale-row-border:     rgba(148,163,184,0.10);
    --sale-row-border-hover: rgba(34,197,94,0.25);
    --sale-icon-bg:        rgba(34,197,94,0.12);
    --sale-amount-text:    #4ade80;
    --sale-paid-text:      #4ade80;
    --sale-pending-text:   #fbbf24;
    --sale-partial-text:   #60a5fa;
    --sale-cancelled-text: #f87171;

    /* Top services rank colors */
    --rank-1-bg: linear-gradient(135deg, #eab308, #ca8a04);
    --rank-2-bg: linear-gradient(135deg, #94a3b8, #64748b);
    --rank-3-bg: linear-gradient(135deg, #ea580c, #c2410c);
    --rank-n-bg: linear-gradient(135deg, #475569, #334155);
    --rank-1-bar: linear-gradient(90deg, #eab308, #ca8a04);
    --rank-2-bar: linear-gradient(90deg, #94a3b8, #64748b);
    --rank-3-bar: linear-gradient(90deg, #ea580c, #c2410c);
    --rank-n-bar: linear-gradient(90deg, #3b82f6, #06b6d4);
    --service-row-bg:    rgba(255,255,255,0.04);
    --service-row-hover: rgba(255,255,255,0.07);
    --service-row-border:rgba(148,163,184,0.10);
    --service-revenue-text: #4ade80;
    --service-meta-text:    var(--alma-text-sub);
    --service-bar-track:    rgba(255,255,255,0.08);

    /* Dashboard page header */
    --dash-header-title: var(--alma-text);
    --dash-header-sub:   var(--alma-text-sub);

    /* Danger genérico */
    --widget-danger: #f87171;

    /* Period selector */
    --period-btn-bg:        var(--alma-bg-2);
    --period-btn-border:    var(--alma-border);
    --period-btn-text:      var(--alma-text-sub);
    --period-btn-hover-bg:  var(--alma-bg-hover);
    --period-btn-active-bg: var(--alma-accent-soft);
    --period-btn-active-border: var(--alma-accent-border);
    --period-btn-active-text:   var(--alma-accent);

    /* DashboardGrid empty state */
    --dash-empty-icon: var(--alma-text-muted);
    --dash-empty-text: var(--alma-text-sub);

    /* WidgetSettings modal */
    --modal-bg:       var(--alma-bg-2);
    --modal-border:   var(--alma-border);
    --modal-title:    var(--alma-text);
    --modal-sub:      var(--alma-text-sub);
    --modal-item-bg:  var(--alma-bg-card);
    --modal-item-border: var(--alma-border);
    --modal-item-dim-bg: var(--alma-bg);
    --modal-item-dim-border: var(--alma-border);
    --modal-toggle-on:  var(--alma-accent);
    --modal-toggle-off: var(--alma-border-2);
    --modal-select-bg:  var(--alma-bg-input);
    --modal-select-border: var(--alma-border-2);
    --modal-btn-secondary-bg: var(--alma-bg-card);
    --modal-btn-secondary-hover: var(--alma-bg-hover);
    --modal-btn-primary-bg: linear-gradient(90deg, var(--alma-accent), var(--alma-accent-2));
}

[data-mode="light"] {
    --dash-bg: var(--alma-bg);

    --widget-row-bg:        rgba(0,0,0,0.03);
    --widget-row-bg-hover:  rgba(0,0,0,0.05);
    --widget-row-border:    rgba(0,0,0,0.07);
    --widget-row-border-hover: rgba(15,155,114,0.30);

    --widget-bar-track: rgba(0,0,0,0.08);

    --stat-green-bg:    rgba(5,150,105,0.08);
    --stat-green-border:rgba(5,150,105,0.20);
    --stat-green-text:  #047857;
    --stat-green-label: #059669;

    --stat-red-bg:      rgba(220,38,38,0.07);
    --stat-red-border:  rgba(220,38,38,0.18);
    --stat-red-text:    #b91c1c;
    --stat-red-label:   #dc2626;

    --stat-purple-bg:   rgba(124,58,237,0.07);
    --stat-purple-border:rgba(124,58,237,0.18);
    --stat-purple-text: #6d28d9;
    --stat-purple-label:#7c3aed;

    --stat-blue-bg:     rgba(37,99,235,0.07);
    --stat-blue-border: rgba(37,99,235,0.18);
    --stat-blue-text:   #1d4ed8;
    --stat-blue-label:  #2563eb;

    --mini-stat-bg:     rgba(0,0,0,0.04);
    --mini-stat-border: rgba(0,0,0,0.08);
    --mini-cyan-text:   #0e7490;
    --mini-green-text:  #15803d;
    --mini-amber-text:  #b45309;

    --chart-border:     rgba(0,0,0,0.07);
    --chart-tooltip-bg: rgba(255,255,255,0.97);
    --chart-legend-text:var(--alma-text-sub);

    --appt-text:        rgba(255,255,255,0.95);
    --appt-text-sub:    rgba(255,255,255,0.75);
    --appt-divider:     rgba(255,255,255,0.25);
    --appt-badge-bg:    rgba(255,255,255,0.25);

    --stock-bar-track:  rgba(0,0,0,0.10);
    --stock-out-text:   #b91c1c;
    --stock-low-text:   #b45309;

    --sale-row-bg:      rgba(0,0,0,0.03);
    --sale-row-hover:   rgba(0,0,0,0.05);
    --sale-row-border:  rgba(0,0,0,0.07);
    --sale-row-border-hover: rgba(15,155,114,0.30);
    --sale-icon-bg:     rgba(5,150,105,0.10);
    --sale-amount-text: #047857;
    --sale-paid-text:   #047857;
    --sale-pending-text:#b45309;
    --sale-partial-text:#1d4ed8;
    --sale-cancelled-text:#b91c1c;

    --service-row-bg:    rgba(0,0,0,0.03);
    --service-row-hover: rgba(0,0,0,0.05);
    --service-row-border:rgba(0,0,0,0.07);
    --service-revenue-text: #047857;
    --service-meta-text:    var(--alma-text-sub);
    --service-bar-track:    rgba(0,0,0,0.08);

    --dash-header-title: var(--alma-text);
    --dash-header-sub:   var(--alma-text-sub);

    --widget-danger: #b91c1c;

    --period-btn-bg:         var(--alma-bg-card);
    --period-btn-border:     var(--alma-border);
    --period-btn-text:       var(--alma-text-sub);
    --period-btn-hover-bg:   var(--alma-bg-hover);
    --period-btn-active-bg:  var(--alma-accent-soft);
    --period-btn-active-border: var(--alma-accent-border);
    --period-btn-active-text:   var(--alma-accent);

    --dash-empty-icon: var(--alma-text-muted);
    --dash-empty-text: var(--alma-text-sub);

    --modal-bg:          #ffffff;
    --modal-border:      var(--alma-border);
    --modal-title:       var(--alma-text);
    --modal-sub:         var(--alma-text-sub);
    --modal-item-bg:     var(--alma-bg);
    --modal-item-border: var(--alma-border);
    --modal-item-dim-bg: var(--alma-bg-2);
    --modal-item-dim-border: var(--alma-border);
    --modal-toggle-on:   var(--alma-accent);
    --modal-toggle-off:  var(--alma-border-2);
    --modal-select-bg:   var(--alma-bg-input);
    --modal-select-border: var(--alma-border-2);
    --modal-btn-secondary-bg:    var(--alma-bg-2);
    --modal-btn-secondary-hover: var(--alma-bg-hover);
    --modal-btn-primary-bg: linear-gradient(90deg, var(--alma-accent), var(--alma-accent-2));
}

/* ─────────────────────────────────────────────────────────────
   QUICK ACTIONS — botones de acceso rápido
   ───────────────────────────────────────────────────────────── */
.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: filter 0.15s ease, transform 0.1s ease;
    color: #fff;
}
.action-btn:hover  { filter: brightness(1.12); }
.action-btn:active { transform: scale(0.97); }
.action-btn-label  { font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-btn-cyan   { background: var(--action-cyan-bg); }
.action-btn-green  { background: var(--action-green-bg); }
.action-btn-purple { background: var(--action-purple-bg); }
.action-btn-red    { background: var(--action-red-bg); }
.action-btn-indigo { background: var(--action-indigo-bg); }
.action-btn-teal   { background: var(--action-teal-bg); }

/* ─────────────────────────────────────────────────────────────
   APPOINTMENT ROWS
   ───────────────────────────────────────────────────────────── */
.appt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: filter 0.15s ease;
    color: var(--appt-text);
}
.appt-row:hover { filter: brightness(1.10); }
.appt-row-completed { background: var(--appt-completed); }
.appt-row-confirmed { background: var(--appt-confirmed); }
.appt-row-cancelled { background: var(--appt-cancelled); }
.appt-row-scheduled { background: var(--appt-scheduled); }
.appt-time    { font-size: 0.75rem; font-weight: 700; color: var(--appt-text); line-height: 1.2; }
.appt-dur     { font-size: 0.625rem; color: var(--appt-text-sub); }
.appt-divider { width: 1px; height: 28px; background: var(--appt-divider); flex-shrink: 0; }
.appt-name    { font-size: 0.75rem; font-weight: 600; color: var(--appt-text); }
.appt-service { font-size: 0.625rem; color: var(--appt-text-sub); }
.appt-prof    { font-size: 0.625rem; color: var(--appt-text-sub); }
.appt-badge   { padding: 2px 6px; border-radius: 20px; background: var(--appt-badge-bg); font-size: 0.625rem; font-weight: 500; color: var(--appt-text); white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────
   STAT CARDS (QuickStatsWidget)
   ───────────────────────────────────────────────────────────── */
.stat-card {
    border-radius: 10px;
    padding: 10px;
    transition: border-color 0.15s ease;
}
.stat-card-green  { background: var(--stat-green-bg);  border: 1px solid var(--stat-green-border); }
.stat-card-red    { background: var(--stat-red-bg);    border: 1px solid var(--stat-red-border); }
.stat-card-purple { background: var(--stat-purple-bg); border: 1px solid var(--stat-purple-border); }
.stat-card-blue   { background: var(--stat-blue-bg);   border: 1px solid var(--stat-blue-border); }

.stat-icon-green  { color: var(--stat-green-text); }
.stat-icon-red    { color: var(--stat-red-text); }
.stat-icon-purple { color: var(--stat-purple-text); }
.stat-icon-blue   { color: var(--stat-blue-text); }

.stat-label-green  { color: var(--stat-green-label); }
.stat-label-red    { color: var(--stat-red-label); }
.stat-label-purple { color: var(--stat-purple-label); }
.stat-label-blue   { color: var(--stat-blue-label); }

.stat-value { font-size: 1.2rem; font-weight: 700; color: var(--alma-text); line-height: 1.2; }
.stat-meta  { font-size: 0.6875rem; margin-top: 2px; }

/* Mini turnos stats (fila abajo de las cards) */
.mini-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--mini-stat-bg);
    border: 1px solid var(--mini-stat-border);
}
.mini-stat-label { font-size: 0.75rem; color: var(--alma-text-sub); }
.mini-stat-value { font-size: 0.875rem; font-weight: 700; color: var(--alma-text); margin-left: auto; }
.mini-stat-icon-cyan   { color: var(--mini-cyan-text); }
.mini-stat-icon-green  { color: var(--mini-green-text); }
.mini-stat-icon-amber  { color: var(--mini-amber-text); }

/* ─────────────────────────────────────────────────────────────
   REVENUE CHART
   ───────────────────────────────────────────────────────────── */
.chart-summary-card {
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
}
.chart-summary-green  { background: var(--stat-green-bg);  border: 1px solid var(--stat-green-border); }
.chart-summary-red    { background: var(--stat-red-bg);    border: 1px solid var(--stat-red-border); }
.chart-summary-blue   { background: var(--stat-blue-bg);   border: 1px solid var(--stat-blue-border); }
.chart-summary-label  { font-size: 0.625rem; color: var(--alma-text-sub); }
.chart-summary-green-val { font-size: 0.8125rem; font-weight: 700; color: var(--stat-green-text); }
.chart-summary-red-val   { font-size: 0.8125rem; font-weight: 700; color: var(--stat-red-text); }
.chart-summary-blue-val  { font-size: 0.8125rem; font-weight: 700; color: var(--stat-blue-text); }
.chart-legend-sep { border-top: 1px solid var(--chart-border); }
.chart-legend-dot-green { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.chart-legend-dot-red   { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }
.chart-legend-label { font-size: 0.625rem; color: var(--chart-legend-text); }
.chart-bar-sales    { background: linear-gradient(to top,  #22c55e, #10b981); transition: filter 0.15s ease; }
.chart-bar-expenses { background: linear-gradient(to bottom, #ef4444, #f97316); transition: filter 0.15s ease; }
.chart-bar-sales:hover    { filter: brightness(1.15); }
.chart-bar-expenses:hover { filter: brightness(1.15); }
.chart-bar-label { font-size: 0.625rem; color: var(--alma-text-sub); }
.chart-tooltip {
    background: var(--chart-tooltip-bg);
    border: 1px solid var(--alma-border-2);
    color: var(--alma-text);
    font-size: 0.625rem;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ─────────────────────────────────────────────────────────────
   TOP SERVICES
   ───────────────────────────────────────────────────────────── */
.service-row {
    padding: 8px;
    border-radius: 10px;
    background: var(--service-row-bg);
    border: 1px solid var(--service-row-border);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.service-row:hover {
    background: var(--service-row-hover);
    border-color: var(--widget-row-border-hover);
}
.service-name    { font-size: 0.75rem; font-weight: 500; color: var(--alma-text); }
.service-revenue { font-size: 0.75rem; font-weight: 700; color: var(--service-revenue-text); }
.service-meta    { font-size: 0.625rem; color: var(--service-meta-text); }
.service-bar-track { background: var(--service-bar-track); border-radius: 4px; height: 4px; overflow: hidden; }

.rank-badge { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.625rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.rank-1 { background: var(--rank-1-bg); }
.rank-2 { background: var(--rank-2-bg); }
.rank-3 { background: var(--rank-3-bg); }
.rank-n { background: var(--rank-n-bg); }
.rank-bar-1 { background: var(--rank-1-bar); height: 100%; border-radius: 4px; }
.rank-bar-2 { background: var(--rank-2-bar); height: 100%; border-radius: 4px; }
.rank-bar-3 { background: var(--rank-3-bar); height: 100%; border-radius: 4px; }
.rank-bar-n { background: var(--rank-n-bar); height: 100%; border-radius: 4px; }

/* ─────────────────────────────────────────────────────────────
   ALERTS WIDGET
   ───────────────────────────────────────────────────────────── */
.alert-row { border-radius: 10px; padding: 10px 12px; transition: filter 0.15s ease; cursor: pointer; }
.alert-row:hover { filter: brightness(1.08); }
.alert-warning { background: var(--alert-warning-bg); }
.alert-info    { background: var(--alert-info-bg); }
.alert-task    { background: var(--alert-task-bg); }
.alert-title   { font-size: 0.8125rem; font-weight: 500; color: #fff; }
.alert-desc    { font-size: 0.75rem; color: rgba(255,255,255,0.80); margin-top: 2px; }
.alert-time    { font-size: 0.6875rem; color: rgba(255,255,255,0.65); }
.alert-urgent-badge { padding: 2px 8px; border-radius: 20px; background: var(--alert-badge-bg); font-size: 0.6875rem; font-weight: 500; color: #fff; }
.alert-mark-btn {
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--alert-mark-btn-bg);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.alert-mark-btn:hover { background: var(--alert-mark-btn-hover); }

/* ─────────────────────────────────────────────────────────────
   STOCK WIDGET
   ───────────────────────────────────────────────────────────── */
.stock-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.15s ease;
}
.stock-row-out { background: var(--stock-out-row-bg); border: 1px solid var(--stock-out-border); }
.stock-row-low { background: var(--stock-low-row-bg); border: 1px solid var(--stock-low-border); }
.stock-badge { padding: 2px 4px; border-radius: 4px; font-size: 0.625rem; font-weight: 700; width: 60px; text-align: center; flex-shrink: 0; }
.stock-badge-out { background: var(--stock-out-badge); color: var(--stock-out-text); }
.stock-badge-low { background: var(--stock-low-badge); color: var(--stock-low-text); }
.stock-name   { font-size: 0.75rem; color: var(--alma-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-bar-track { width: 48px; background: var(--stock-bar-track); border-radius: 4px; height: 6px; overflow: hidden; flex-shrink: 0; }
.stock-bar-fill-out { background: var(--stock-bar-out); height: 100%; border-radius: 4px; }
.stock-bar-fill-low { background: var(--stock-bar-low); height: 100%; border-radius: 4px; }
.stock-qty { font-size: 0.625rem; font-weight: 700; flex-shrink: 0; width: 48px; text-align: right; }
.stock-qty-out { color: var(--stock-out-text); }
.stock-qty-low { color: var(--stock-low-text); }

/* ─────────────────────────────────────────────────────────────
   RECENT SALES
   ───────────────────────────────────────────────────────────── */
.sale-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--sale-row-bg);
    border: 1px solid var(--sale-row-border);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sale-row:hover {
    background: var(--sale-row-hover);
    border-color: var(--sale-row-border-hover);
}
.sale-icon-wrap { width: 28px; height: 28px; border-radius: 8px; background: var(--sale-icon-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sale-customer  { font-size: 0.75rem; font-weight: 500; color: var(--alma-text); }
.sale-meta      { font-size: 0.625rem; color: var(--alma-text-sub); }
.sale-amount    { font-size: 0.875rem; font-weight: 700; color: var(--sale-amount-text); }
.sale-status-paid      { font-size: 0.625rem; color: var(--sale-paid-text); }
.sale-status-pending   { font-size: 0.625rem; color: var(--sale-pending-text); }
.sale-status-partial   { font-size: 0.625rem; color: var(--sale-partial-text); }
.sale-status-cancelled { font-size: 0.625rem; color: var(--sale-cancelled-text); }
.sale-status-default   { font-size: 0.625rem; color: var(--alma-text-sub); }

/* ─────────────────────────────────────────────────────────────
   PERIOD SELECTOR
   ───────────────────────────────────────────────────────────── */
.period-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--period-btn-border);
    background: var(--period-btn-bg);
    color: var(--period-btn-text);
    cursor: pointer;
    transition: all 0.15s ease;
}
.period-btn:hover { background: var(--period-btn-hover-bg); color: var(--alma-accent); border-color: var(--alma-accent-border); }
.period-btn.active {
    background: var(--period-btn-active-bg);
    border-color: var(--period-btn-active-border);
    color: var(--period-btn-active-text);
}

/* ─────────────────────────────────────────────────────────────
   MODAL SETTINGS
   ───────────────────────────────────────────────────────────── */
.modal-overlay { background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); }
.modal-box {
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.40);
}
.modal-title { color: var(--modal-title); }
.modal-sub   { color: var(--modal-sub); }
.modal-item-visible { background: var(--modal-item-bg);     border: 1px solid var(--modal-item-border); }
.modal-item-hidden  { background: var(--modal-item-dim-bg); border: 1px solid var(--modal-item-dim-border); opacity: 0.55; }
.modal-widget-name  { color: var(--modal-title); }
.modal-widget-desc  { color: var(--modal-sub); }
.modal-toggle-track {
    display: inline-flex; align-items: center;
    width: 44px; height: 24px;
    border-radius: 12px; padding: 2px;
    border: none; cursor: pointer;
    transition: background 0.2s ease;
}
.modal-toggle-track-on  { background: var(--modal-toggle-on); }
.modal-toggle-track-off { background: var(--modal-toggle-off); }
.modal-toggle-thumb {
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
}
.modal-toggle-thumb-on  { transform: translateX(20px); }
.modal-toggle-thumb-off { transform: translateX(0); }
.modal-select {
    padding: 6px 10px;
    background: var(--modal-select-bg);
    border: 1px solid var(--modal-select-border);
    border-radius: 8px;
    color: var(--alma-text);
    font-size: 0.8125rem;
}
.modal-select:focus { outline: none; box-shadow: 0 0 0 2px var(--alma-accent-border); }
.modal-btn-secondary {
    padding: 8px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 500;
    background: var(--modal-btn-secondary-bg); color: var(--alma-text);
    border: 1px solid var(--modal-border); cursor: pointer;
    transition: background 0.15s ease;
}
.modal-btn-secondary:hover { background: var(--modal-btn-secondary-hover); }
.modal-btn-primary {
    padding: 8px 24px; border-radius: 8px; font-size: 0.8125rem; font-weight: 500;
    background: var(--modal-btn-primary-bg); color: #fff;
    border: none; cursor: pointer;
    transition: filter 0.15s ease;
}
.modal-btn-primary:hover { filter: brightness(1.10); }

/* ─────────────────────────────────────────────────────────────
   SPINNER / LOADING
   ───────────────────────────────────────────────────────────── */
.widget-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--alma-border-2);
    border-top-color: var(--alma-accent);
    border-radius: 50%;
    animation: widget-spin 0.75s linear infinite;
}
@keyframes widget-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────
   "MÁS" — overflow counter
   ───────────────────────────────────────────────────────────── */
.widget-more-text { font-size: 0.75rem; color: var(--alma-text-sub); text-align: center; padding-top: 4px; }

/* ─────────────────────────────────────────────────────────────
   COMING SOON banner (para widgets hardcodeados)
   ───────────────────────────────────────────────────────────── */
.widget-coming-soon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--alma-accent-soft);
    border: 1px solid var(--alma-accent-border);
    color: var(--alma-accent-light);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   APPOINTMENTS MODULE
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   VARIABLES SEMÁNTICAS — Módulo de Turnos
   ───────────────────────────────────────────────────────────── */
:root,
[data-mode="dark"] {
    /* Backgrounds de página y paneles */
    --appt-page-bg: var(--alma-bg);
    --appt-panel-bg: rgba(255,255,255,0.03);
    --appt-panel-border: var(--alma-border);
    --appt-panel-bg-2: rgba(255,255,255,0.04);
    /* Header stats chips */
    --appt-chip-bg: rgba(255,255,255,0.05);
    --appt-chip-border: var(--alma-border);
    /* Vista selector */
    --appt-view-wrap-bg: rgba(255,255,255,0.04);
    --appt-view-wrap-border: var(--alma-border);
    --appt-view-active-bg: var(--alma-accent);
    --appt-view-active-text: #ffffff;
    --appt-view-idle-text: var(--alma-text-sub);
    --appt-view-idle-hover: var(--alma-bg-hover);
    /* Filtros */
    --appt-filter-bg: rgba(255,255,255,0.03);
    --appt-filter-border: var(--alma-border);
    --appt-input-bg: rgba(255,255,255,0.06);
    --appt-input-border: var(--alma-border-2);
    --appt-input-text: var(--alma-text);
    --appt-input-placeholder: var(--alma-text-muted);
    /* Timeline */
    --appt-timeline-header-bg: rgba(255,255,255,0.04);
    --appt-timeline-line: rgba(148,163,184,0.10);
    --appt-timeline-line-half: rgba(148,163,184,0.05);
    --appt-hour-label: var(--alma-text-muted);
    /* Timeline cards — por estado */
    --appt-card-scheduled-bg: rgba(37,99,235,0.25);
    --appt-card-scheduled-border: rgba(59,130,246,0.40);
    --appt-card-confirmed-bg: rgba(5,150,105,0.25);
    --appt-card-confirmed-border: rgba(16,185,129,0.40);
    --appt-card-inprogress-bg: rgba(202,138,4,0.25);
    --appt-card-inprogress-border: rgba(234,179,8,0.40);
    --appt-card-completed-bg: rgba(79,70,229,0.25);
    --appt-card-completed-border: rgba(99,102,241,0.40);
    --appt-card-cancelled-bg: rgba(220,38,38,0.15);
    --appt-card-cancelled-border: rgba(239,68,68,0.30);
    --appt-card-default-bg: rgba(255,255,255,0.05);
    --appt-card-default-border: var(--alma-border);
    /* Status text colors */
    --appt-status-scheduled: #60a5fa;
    --appt-status-confirmed: #34d399;
    --appt-status-inprogress: #fbbf24;
    --appt-status-completed: #a5b4fc;
    --appt-status-cancelled: #f87171;
    --appt-status-noshow: #fb923c;
    --appt-status-default: var(--alma-text-sub);
    /* Status badges */
    --badge-scheduled-bg: rgba(59,130,246,0.15);
    --badge-scheduled-text: #60a5fa;
    --badge-scheduled-border: rgba(59,130,246,0.30);
    --badge-confirmed-bg: rgba(16,185,129,0.15);
    --badge-confirmed-text: #34d399;
    --badge-confirmed-border: rgba(16,185,129,0.30);
    --badge-inprogress-bg: rgba(234,179,8,0.15);
    --badge-inprogress-text: #fbbf24;
    --badge-inprogress-border: rgba(234,179,8,0.30);
    --badge-completed-bg: rgba(99,102,241,0.15);
    --badge-completed-text: #a5b4fc;
    --badge-completed-border: rgba(99,102,241,0.30);
    --badge-cancelled-bg: rgba(239,68,68,0.15);
    --badge-cancelled-text: #f87171;
    --badge-cancelled-border: rgba(239,68,68,0.30);
    --badge-noshow-bg: rgba(251,146,60,0.15);
    --badge-noshow-text: #fb923c;
    --badge-noshow-border: rgba(251,146,60,0.30);
    /* Grid view cards */
    --appt-grid-card-bg: rgba(255,255,255,0.04);
    --appt-grid-card-border: var(--alma-border);
    --appt-grid-card-hover: rgba(29,184,138,0.20);
    /* Lista rows */
    --appt-list-header-bg: rgba(255,255,255,0.04);
    --appt-list-row-hover: rgba(255,255,255,0.04);
    --appt-list-border: var(--alma-border);
    /* Modales */
    --appt-modal-bg: var(--alma-bg-2);
    --appt-modal-border: var(--alma-border);
    --appt-modal-header-bg: rgba(255,255,255,0.03);
    /* Detalle modal info blocks */
    --appt-detail-block-bg: rgba(255,255,255,0.05);
    --appt-detail-notes-bg: rgba(217,119,6,0.08);
    --appt-detail-notes-border: rgba(217,119,6,0.20);
    --appt-detail-notes-title: #fbbf24;
    /* Acciones del modal detalle — botones de estado */
    --action-confirm-bg: rgba(5,150,105,0.12);
    --action-confirm-hover: rgba(5,150,105,0.25);
    --action-confirm-text: #34d399;
    --action-confirm-border: rgba(5,150,105,0.30);
    --action-start-bg: rgba(202,138,4,0.12);
    --action-start-hover: rgba(202,138,4,0.25);
    --action-start-text: #fbbf24;
    --action-start-border: rgba(202,138,4,0.30);
    --action-complete-bg: rgba(79,70,229,0.12);
    --action-complete-hover: rgba(79,70,229,0.25);
    --action-complete-text: #a5b4fc;
    --action-complete-border: rgba(79,70,229,0.30);
    --action-noshow-bg: rgba(234,88,12,0.12);
    --action-noshow-hover: rgba(234,88,12,0.25);
    --action-noshow-text: #fb923c;
    --action-noshow-border: rgba(234,88,12,0.30);
    --action-cancel-bg: rgba(220,38,38,0.12);
    --action-cancel-hover: rgba(220,38,38,0.25);
    --action-cancel-text: #f87171;
    --action-cancel-border: rgba(220,38,38,0.30);
    --action-edit-bg: rgba(255,255,255,0.06);
    --action-edit-hover: rgba(255,255,255,0.10);
    --action-edit-text: var(--alma-text);
    --action-edit-border: var(--alma-border-2);
    /* Slot picker (AppointmentForm) */
    --slot-free-bg: rgba(255,255,255,0.05);
    --slot-free-border: var(--alma-border);
    --slot-free-text: var(--alma-text-sub);
    --slot-selected-bg: var(--alma-accent);
    --slot-selected-border: var(--alma-accent);
    --slot-selected-text: #ffffff;
    --slot-taken-bg: rgba(239,68,68,0.07);
    --slot-taken-border: rgba(239,68,68,0.22);
    --slot-taken-text: rgba(239,68,68,0.35);
    --slot-overlap-bg: rgba(245,158,11,0.07);
    --slot-overlap-border: rgba(245,158,11,0.20);
    --slot-overlap-title: #fbbf24;
    --slot-overlap-text: rgba(251,191,36,0.80);
    /* ScheduleEditor */
    --schedule-tab-active-bg: var(--alma-accent);
    --schedule-tab-active-text: #ffffff;
    --schedule-tab-idle-text: var(--alma-text-sub);
    --schedule-tab-idle-hover: var(--alma-bg-hover);
    --schedule-rule-bg: rgba(255,255,255,0.04);
    --schedule-rule-border: var(--alma-border);
    --schedule-rule-header-bg: rgba(255,255,255,0.05);
    --schedule-rule-dot: #4ade80;
    --schedule-form-bg: rgba(255,255,255,0.04);
    --schedule-form-border: var(--alma-border);
    --schedule-exc-blocked-border: rgba(239,68,68,0.20);
    --schedule-exc-extra-border: rgba(34,197,94,0.20);
    --schedule-exc-blocked-dot: #f87171;
    --schedule-exc-extra-dot: #4ade80;
    --schedule-exc-blocked-text: #f87171;
    --schedule-exc-extra-text: #4ade80;
    --schedule-btn-add-bg: rgba(29,184,138,0.10);
    --schedule-btn-add-hover: rgba(29,184,138,0.20);
    --schedule-btn-add-text: var(--alma-accent);
    --schedule-btn-add-border: var(--alma-accent-border);
    --schedule-btn-exc-bg: rgba(217,119,6,0.10);
    --schedule-btn-exc-hover: rgba(217,119,6,0.20);
    --schedule-btn-exc-text: #fbbf24;
    --schedule-btn-exc-border: rgba(217,119,6,0.25);
    --schedule-save-bg: var(--alma-accent);
    --schedule-save-hover: var(--alma-accent-2);
    --schedule-save-exc-bg: #d97706;
    --schedule-save-exc-hover: #b45309;
    --schedule-exc-type-active-block-bg: rgba(239,68,68,0.20);
    --schedule-exc-type-active-block-border: rgba(239,68,68,0.40);
    --schedule-exc-type-active-block-text: #fca5a5;
    --schedule-exc-type-active-extra-bg: rgba(34,197,94,0.20);
    --schedule-exc-type-active-extra-border: rgba(34,197,94,0.40);
    --schedule-exc-type-active-extra-text: #86efac;
    --schedule-exc-type-idle-bg: rgba(255,255,255,0.04);
    --schedule-exc-type-idle-border: var(--alma-border-2);
    --schedule-exc-type-idle-text: var(--alma-text-sub);
    --schedule-alcance-active-bg: rgba(255,255,255,0.08);
    --schedule-alcance-active-border: var(--alma-border-2);
    --schedule-alcance-active-text: var(--alma-text);
    --schedule-alcance-idle-bg: rgba(255,255,255,0.03);
    --schedule-alcance-idle-border: var(--alma-border);
    --schedule-alcance-idle-text: var(--alma-text-sub);
}

[data-mode="light"] {
    --appt-page-bg: var(--alma-bg);
    --appt-panel-bg: rgba(0,0,0,0.025);
    --appt-panel-border: var(--alma-border);
    --appt-panel-bg-2: rgba(0,0,0,0.03);
    --appt-chip-bg: rgba(0,0,0,0.04);
    --appt-chip-border: var(--alma-border);
    --appt-view-wrap-bg: rgba(0,0,0,0.04);
    --appt-view-wrap-border: var(--alma-border);
    --appt-view-active-bg: var(--alma-accent);
    --appt-view-active-text: #ffffff;
    --appt-view-idle-text: var(--alma-text-sub);
    --appt-view-idle-hover: var(--alma-bg-hover);
    --appt-filter-bg: rgba(0,0,0,0.025);
    --appt-filter-border: var(--alma-border);
    --appt-input-bg: var(--alma-bg-input);
    --appt-input-border: var(--alma-border-2);
    --appt-input-text: var(--alma-text);
    --appt-input-placeholder: var(--alma-text-muted);
    --appt-timeline-header-bg: rgba(0,0,0,0.03);
    --appt-timeline-line: rgba(0,0,0,0.07);
    --appt-timeline-line-half: rgba(0,0,0,0.04);
    --appt-hour-label: var(--alma-text-muted);
    --appt-card-scheduled-bg: rgba(37,99,235,0.10);
    --appt-card-scheduled-border: rgba(37,99,235,0.25);
    --appt-card-confirmed-bg: rgba(5,150,105,0.10);
    --appt-card-confirmed-border: rgba(5,150,105,0.25);
    --appt-card-inprogress-bg: rgba(202,138,4,0.10);
    --appt-card-inprogress-border: rgba(202,138,4,0.25);
    --appt-card-completed-bg: rgba(79,70,229,0.10);
    --appt-card-completed-border: rgba(79,70,229,0.25);
    --appt-card-cancelled-bg: rgba(220,38,38,0.07);
    --appt-card-cancelled-border: rgba(220,38,38,0.20);
    --appt-card-default-bg: rgba(0,0,0,0.03);
    --appt-card-default-border: var(--alma-border);
    --appt-status-scheduled: #1d4ed8;
    --appt-status-confirmed: #047857;
    --appt-status-inprogress: #b45309;
    --appt-status-completed: #4338ca;
    --appt-status-cancelled: #b91c1c;
    --appt-status-noshow: #c2410c;
    --appt-status-default: var(--alma-text-sub);
    --badge-scheduled-bg: rgba(37,99,235,0.08);
    --badge-scheduled-text: #1d4ed8;
    --badge-scheduled-border: rgba(37,99,235,0.20);
    --badge-confirmed-bg: rgba(5,150,105,0.08);
    --badge-confirmed-text: #047857;
    --badge-confirmed-border: rgba(5,150,105,0.20);
    --badge-inprogress-bg: rgba(202,138,4,0.08);
    --badge-inprogress-text: #b45309;
    --badge-inprogress-border: rgba(202,138,4,0.20);
    --badge-completed-bg: rgba(79,70,229,0.08);
    --badge-completed-text: #4338ca;
    --badge-completed-border: rgba(79,70,229,0.20);
    --badge-cancelled-bg: rgba(220,38,38,0.07);
    --badge-cancelled-text: #b91c1c;
    --badge-cancelled-border: rgba(220,38,38,0.18);
    --badge-noshow-bg: rgba(234,88,12,0.07);
    --badge-noshow-text: #c2410c;
    --badge-noshow-border: rgba(234,88,12,0.18);
    --appt-grid-card-bg: var(--alma-bg-card);
    --appt-grid-card-border: var(--alma-border);
    --appt-grid-card-hover: rgba(15,155,114,0.20);
    --appt-list-header-bg: rgba(0,0,0,0.03);
    --appt-list-row-hover: rgba(0,0,0,0.03);
    --appt-list-border: var(--alma-border);
    --appt-modal-bg: #ffffff;
    --appt-modal-border: var(--alma-border);
    --appt-modal-header-bg: rgba(0,0,0,0.02);
    --appt-detail-block-bg: rgba(0,0,0,0.03);
    --appt-detail-notes-bg: rgba(217,119,6,0.06);
    --appt-detail-notes-border: rgba(217,119,6,0.15);
    --appt-detail-notes-title: #b45309;
    --action-confirm-bg: rgba(5,150,105,0.08);
    --action-confirm-hover: rgba(5,150,105,0.15);
    --action-confirm-text: #047857;
    --action-confirm-border: rgba(5,150,105,0.20);
    --action-start-bg: rgba(202,138,4,0.08);
    --action-start-hover: rgba(202,138,4,0.15);
    --action-start-text: #b45309;
    --action-start-border: rgba(202,138,4,0.20);
    --action-complete-bg: rgba(79,70,229,0.08);
    --action-complete-hover: rgba(79,70,229,0.15);
    --action-complete-text: #4338ca;
    --action-complete-border: rgba(79,70,229,0.20);
    --action-noshow-bg: rgba(234,88,12,0.08);
    --action-noshow-hover: rgba(234,88,12,0.15);
    --action-noshow-text: #c2410c;
    --action-noshow-border: rgba(234,88,12,0.20);
    --action-cancel-bg: rgba(220,38,38,0.07);
    --action-cancel-hover: rgba(220,38,38,0.14);
    --action-cancel-text: #b91c1c;
    --action-cancel-border: rgba(220,38,38,0.18);
    --action-edit-bg: rgba(0,0,0,0.04);
    --action-edit-hover: rgba(0,0,0,0.07);
    --action-edit-text: var(--alma-text);
    --action-edit-border: var(--alma-border-2);
    --slot-free-bg: var(--alma-bg-input);
    --slot-free-border: var(--alma-border-2);
    --slot-free-text: var(--alma-text-sub);
    --slot-selected-bg: var(--alma-accent);
    --slot-selected-border: var(--alma-accent);
    --slot-selected-text: #ffffff;
    --slot-taken-bg: rgba(220,38,38,0.05);
    --slot-taken-border: rgba(220,38,38,0.15);
    --slot-taken-text: rgba(185,28,28,0.40);
    --slot-overlap-bg: rgba(217,119,6,0.06);
    --slot-overlap-border: rgba(217,119,6,0.15);
    --slot-overlap-title: #b45309;
    --slot-overlap-text: rgba(180,83,9,0.80);
    --schedule-tab-active-bg: var(--alma-accent);
    --schedule-tab-active-text: #ffffff;
    --schedule-tab-idle-text: var(--alma-text-sub);
    --schedule-tab-idle-hover: var(--alma-bg-hover);
    --schedule-rule-bg: var(--alma-bg-card);
    --schedule-rule-border: var(--alma-border);
    --schedule-rule-header-bg: rgba(0,0,0,0.03);
    --schedule-rule-dot: #059669;
    --schedule-form-bg: rgba(0,0,0,0.025);
    --schedule-form-border: var(--alma-border);
    --schedule-exc-blocked-border: rgba(220,38,38,0.15);
    --schedule-exc-extra-border: rgba(34,197,94,0.15);
    --schedule-exc-blocked-dot: #dc2626;
    --schedule-exc-extra-dot: #16a34a;
    --schedule-exc-blocked-text: #b91c1c;
    --schedule-exc-extra-text: #15803d;
    --schedule-btn-add-bg: var(--alma-accent-soft);
    --schedule-btn-add-hover: rgba(15,155,114,0.15);
    --schedule-btn-add-text: var(--alma-accent);
    --schedule-btn-add-border: var(--alma-accent-border);
    --schedule-btn-exc-bg: rgba(217,119,6,0.08);
    --schedule-btn-exc-hover: rgba(217,119,6,0.15);
    --schedule-btn-exc-text: #b45309;
    --schedule-btn-exc-border: rgba(217,119,6,0.20);
    --schedule-save-bg: var(--alma-accent);
    --schedule-save-hover: var(--alma-accent-2);
    --schedule-save-exc-bg: #d97706;
    --schedule-save-exc-hover: #b45309;
    --schedule-exc-type-active-block-bg: rgba(220,38,38,0.10);
    --schedule-exc-type-active-block-border: rgba(220,38,38,0.25);
    --schedule-exc-type-active-block-text: #b91c1c;
    --schedule-exc-type-active-extra-bg: rgba(34,197,94,0.10);
    --schedule-exc-type-active-extra-border: rgba(34,197,94,0.25);
    --schedule-exc-type-active-extra-text: #15803d;
    --schedule-exc-type-idle-bg: rgba(0,0,0,0.04);
    --schedule-exc-type-idle-border: var(--alma-border-2);
    --schedule-exc-type-idle-text: var(--alma-text-sub);
    --schedule-alcance-active-bg: rgba(0,0,0,0.07);
    --schedule-alcance-active-border: var(--alma-border-2);
    --schedule-alcance-active-text: var(--alma-text);
    --schedule-alcance-idle-bg: rgba(0,0,0,0.025);
    --schedule-alcance-idle-border: var(--alma-border);
    --schedule-alcance-idle-text: var(--alma-text-sub);
}

/* ─────────────────────────────────────────────────────────────
   CLASES — Appointments Page
   ───────────────────────────────────────────────────────────── */

/* Panel / contenedor base */
.appt-panel {
    background: var(--appt-panel-bg);
    border: 1px solid var(--appt-panel-border);
    border-radius: 12px;
    /* Panel / contenedor base */
}

/* Header stats chips */
.appt-stat-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}

.appt-stat-chip-dot-total {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--alma-accent);
}

.appt-stat-chip-dot-confirmed {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--appt-status-confirmed);
}

.appt-stat-chip-dot-scheduled {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--appt-status-scheduled);
}

.appt-stat-chip-dot-completed {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--appt-status-completed);
}

.appt-stat-label {
    color: var(--alma-text-sub);
}

.appt-stat-value {
    color: var(--alma-text);
    font-weight: 600;
}

/* Vista selector */
.appt-view-wrap {
    display: flex;
    background: var(--appt-view-wrap-bg);
    border: 1px solid var(--appt-view-wrap-border);
    border-radius: 10px;
    padding: 3px;
}

.appt-view-btn {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    color: var(--appt-view-idle-text);
    background: transparent;
}

    .appt-view-btn:hover {
        background: var(--appt-view-idle-hover);
    }

    .appt-view-btn.active {
        background: var(--appt-view-active-bg);
        color: var(--appt-view-active-text);
        font-weight: 600;
    }

/* Filtros */
.appt-filter-bar {
    background: var(--appt-filter-bg);
    border: 1px solid var(--appt-filter-border);
    border-radius: 10px;
    padding: 8px;
    backdrop-filter: blur(8px);
}

.appt-input {
    width: 100%;
    padding: 5px 8px;
    background: var(--appt-input-bg);
    border: 1px solid var(--appt-input-border);
    border-radius: 6px;
    color: var(--appt-input-text);
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.15s ease;
}

    .appt-input:focus {
        border-color: var(--alma-accent-border);
    }

    .appt-input::placeholder {
        color: var(--appt-input-placeholder);
    }

.appt-nav-btn {
    padding: 4px 8px;
    background: var(--appt-input-bg);
    border: 1px solid var(--appt-input-border);
    border-radius: 6px;
    color: var(--alma-text-sub);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .appt-nav-btn:hover {
        background: var(--alma-bg-hover);
        color: var(--alma-accent);
    }

/* Timeline */
.appt-timeline-wrap {
    background: var(--appt-panel-bg);
    border: 1px solid var(--appt-panel-border);
    border-radius: 12px;
    overflow: hidden;
}

.appt-timeline-header {
    background: var(--appt-timeline-header-bg);
    border-bottom: 1px solid var(--appt-panel-border);
}

.appt-timeline-hour-col {
    border-right: 1px solid var(--appt-panel-border);
}

.appt-timeline-line-full {
    border-top: 1px solid var(--appt-timeline-line);
}

.appt-timeline-line-half {
    border-top: 1px dashed var(--appt-timeline-line-half);
}

.appt-hour-label {
    font-size: 0.6875rem;
    font-family: monospace;
    color: var(--appt-hour-label);
}

/* Timeline appointment cards */
.appt-tl-card {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: filter 0.15s ease, z-index 0s;
    border: 1px solid transparent;
    position: absolute;
}

    .appt-tl-card:hover {
        filter: brightness(1.12);
        z-index: 10;
    }

.appt-tl-scheduled {
    background: var(--appt-card-scheduled-bg);
    border-color: var(--appt-card-scheduled-border);
}

.appt-tl-confirmed {
    background: var(--appt-card-confirmed-bg);
    border-color: var(--appt-card-confirmed-border);
}

.appt-tl-inprogress {
    background: var(--appt-card-inprogress-bg);
    border-color: var(--appt-card-inprogress-border);
}

.appt-tl-completed {
    background: var(--appt-card-completed-bg);
    border-color: var(--appt-card-completed-border);
}

.appt-tl-cancelled {
    background: var(--appt-card-cancelled-bg);
    border-color: var(--appt-card-cancelled-border);
    opacity: 0.6;
}

.appt-tl-default {
    background: var(--appt-card-default-bg);
    border-color: var(--appt-card-default-border);
}

/* Status colors (text) */
.appt-color-scheduled {
    color: var(--appt-status-scheduled);
}

.appt-color-confirmed {
    color: var(--appt-status-confirmed);
}

.appt-color-inprogress {
    color: var(--appt-status-inprogress);
}

.appt-color-completed {
    color: var(--appt-status-completed);
}

.appt-color-cancelled {
    color: var(--appt-status-cancelled);
}

.appt-color-noshow {
    color: var(--appt-status-noshow);
}

.appt-color-default {
    color: var(--appt-status-default);
}

/* Status badges */
.appt-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.appt-badge-scheduled {
    background: var(--badge-scheduled-bg);
    color: var(--badge-scheduled-text);
    border-color: var(--badge-scheduled-border);
}

.appt-badge-confirmed {
    background: var(--badge-confirmed-bg);
    color: var(--badge-confirmed-text);
    border-color: var(--badge-confirmed-border);
}

.appt-badge-inprogress {
    background: var(--badge-inprogress-bg);
    color: var(--badge-inprogress-text);
    border-color: var(--badge-inprogress-border);
}

.appt-badge-completed {
    background: var(--badge-completed-bg);
    color: var(--badge-completed-text);
    border-color: var(--badge-completed-border);
}

.appt-badge-cancelled {
    background: var(--badge-cancelled-bg);
    color: var(--badge-cancelled-text);
    border-color: var(--badge-cancelled-border);
}

.appt-badge-noshow {
    background: var(--badge-noshow-bg);
    color: var(--badge-noshow-text);
    border-color: var(--badge-noshow-border);
}

/* Grid view cards */
.appt-grid-card {
    background: var(--appt-grid-card-bg);
    border: 1px solid var(--appt-grid-card-border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .appt-grid-card:hover {
        border-color: var(--appt-grid-card-hover);
        box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    }

/* Lista */
.appt-list-header {
    background: var(--appt-list-header-bg);
    border-bottom: 1px solid var(--appt-list-border);
}

.appt-list-row {
    border-bottom: 1px solid var(--appt-list-border);
    cursor: pointer;
    transition: background 0.12s ease;
}

    .appt-list-row:hover {
        background: var(--appt-list-row-hover);
    }

.appt-list-chevron {
    color: var(--alma-text-muted);
    font-size: 1.1rem;
}

.appt-list-row:hover .appt-list-chevron {
    color: var(--alma-accent);
}

/* Modal base */
.appt-modal-box {
    background: var(--appt-modal-bg);
    border: 1px solid var(--appt-modal-border);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}

.appt-modal-header {
    border-bottom: 1px solid var(--appt-modal-border);
    background: var(--appt-modal-header-bg);
}

.appt-modal-footer {
    border-top: 1px solid var(--appt-modal-border);
}

/* Detalle info blocks */
.appt-detail-block {
    background: var(--appt-detail-block-bg);
    border-radius: 10px;
    padding: 12px;
}

.appt-detail-notes {
    background: var(--appt-detail-notes-bg);
    border: 1px solid var(--appt-detail-notes-border);
    border-radius: 10px;
    padding: 12px;
}

.appt-detail-notes-title {
    color: var(--appt-detail-notes-title);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Acciones del modal detalle */
.appt-action-btn {
    flex: 1;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

.appt-action-btn-icon {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

.appt-action-confirm {
    background: var(--action-confirm-bg);
    color: var(--action-confirm-text);
    border-color: var(--action-confirm-border);
}

    .appt-action-confirm:hover {
        background: var(--action-confirm-hover);
    }

.appt-action-start {
    background: var(--action-start-bg);
    color: var(--action-start-text);
    border-color: var(--action-start-border);
}

    .appt-action-start:hover {
        background: var(--action-start-hover);
    }

.appt-action-complete {
    background: var(--action-complete-bg);
    color: var(--action-complete-text);
    border-color: var(--action-complete-border);
}

    .appt-action-complete:hover {
        background: var(--action-complete-hover);
    }

.appt-action-noshow {
    background: var(--action-noshow-bg);
    color: var(--action-noshow-text);
    border-color: var(--action-noshow-border);
}

    .appt-action-noshow:hover {
        background: var(--action-noshow-hover);
    }

.appt-action-cancel {
    background: var(--action-cancel-bg);
    color: var(--action-cancel-text);
    border-color: var(--action-cancel-border);
}

    .appt-action-cancel:hover {
        background: var(--action-cancel-hover);
    }

.appt-action-edit {
    width: 100%;
    background: var(--action-edit-bg);
    color: var(--action-edit-text);
    border: 1px solid var(--action-edit-border);
}

    .appt-action-edit:hover {
        background: var(--action-edit-hover);
    }

/* ─────────────────────────────────────────────────────────────
   APPOINTMENT FORM — slot picker
   ───────────────────────────────────────────────────────────── */
.slot-btn {
    padding: 7px 4px;
    border-radius: 8px;
    font-size: 0.75rem;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
}

.slot-free {
    background: var(--slot-free-bg);
    border-color: var(--slot-free-border);
    color: var(--slot-free-text);
}

    .slot-free:hover {
        background: var(--alma-bg-hover);
        border-color: var(--alma-accent-border);
        color: var(--alma-accent);
    }

.slot-selected {
    background: var(--slot-selected-bg);
    border-color: var(--slot-selected-border);
    color: var(--slot-selected-text);
    font-weight: 600;
}

.slot-taken {
    background: var(--slot-taken-bg);
    border-color: var(--slot-taken-border);
    color: var(--slot-taken-text);
    cursor: not-allowed;
}

    .slot-taken span {
        text-decoration: line-through;
        opacity: 0.5;
    }

.slot-overlap-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--slot-overlap-bg);
    border: 1px solid var(--slot-overlap-border);
    border-radius: 8px;
    margin-top: 8px;
}

.slot-overlap-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slot-overlap-title);
}

.slot-overlap-text {
    font-size: 0.6875rem;
    color: var(--slot-overlap-text);
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────
   SCHEDULE EDITOR
   ───────────────────────────────────────────────────────────── */
.schedule-tab-wrap {
    display: flex;
    background: var(--appt-view-wrap-bg);
    border: 1px solid var(--appt-view-wrap-border);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
}

.schedule-tab-btn {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    background: transparent;
    color: var(--schedule-tab-idle-text);
}

    .schedule-tab-btn:hover {
        background: var(--schedule-tab-idle-hover);
    }

    .schedule-tab-btn.active {
        background: var(--schedule-tab-active-bg);
        color: var(--schedule-tab-active-text);
        font-weight: 600;
    }

.schedule-btn-add {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    background: var(--schedule-btn-add-bg);
    border: 1px solid var(--schedule-btn-add-border);
    color: var(--schedule-btn-add-text);
}

    .schedule-btn-add:hover {
        background: var(--schedule-btn-add-hover);
    }

.schedule-btn-exc {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    background: var(--schedule-btn-exc-bg);
    border: 1px solid var(--schedule-btn-exc-border);
    color: var(--schedule-btn-exc-text);
}

    .schedule-btn-exc:hover {
        background: var(--schedule-btn-exc-hover);
    }

.schedule-form-box {
    background: var(--schedule-form-bg);
    border: 1px solid var(--schedule-form-border);
    border-radius: 10px;
    padding: 12px;
}

.schedule-rule-group {
    background: var(--schedule-rule-bg);
    border: 1px solid var(--schedule-rule-border);
    border-radius: 10px;
    overflow: hidden;
}

.schedule-rule-group-header {
    padding: 7px 12px;
    background: var(--schedule-rule-header-bg);
    border-bottom: 1px solid var(--schedule-rule-border);
}

.schedule-rule-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--schedule-rule-dot);
    flex-shrink: 0;
}

.schedule-rule-row {
    border-top: 1px solid rgba(148,163,184,0.06);
}

.schedule-exc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.schedule-exc-blocked {
    border-color: var(--schedule-exc-blocked-border);
}

.schedule-exc-extra {
    border-color: var(--schedule-exc-extra-border);
}

.schedule-exc-dot-blocked {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--schedule-exc-blocked-dot);
    flex-shrink: 0;
}

.schedule-exc-dot-extra {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--schedule-exc-extra-dot);
    flex-shrink: 0;
}

.schedule-exc-text-blocked {
    font-size: 0.75rem;
    color: var(--schedule-exc-blocked-text);
}

.schedule-exc-text-extra {
    font-size: 0.75rem;
    color: var(--schedule-exc-extra-text);
}

.schedule-save-btn {
    width: 100%;
    padding: 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
    background: var(--schedule-save-bg);
}

    .schedule-save-btn:hover {
        filter: brightness(1.10);
    }

    .schedule-save-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.schedule-save-exc-btn {
    width: 100%;
    padding: 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
    background: var(--schedule-save-exc-bg);
}

    .schedule-save-exc-btn:hover {
        filter: brightness(1.10);
    }

    .schedule-save-exc-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Tipo excepción selector */
.exc-type-btn {
    flex: 1;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
}

.exc-type-block-active {
    background: var(--schedule-exc-type-active-block-bg);
    border-color: var(--schedule-exc-type-active-block-border);
    color: var(--schedule-exc-type-active-block-text);
}

.exc-type-extra-active {
    background: var(--schedule-exc-type-active-extra-bg);
    border-color: var(--schedule-exc-type-active-extra-border);
    color: var(--schedule-exc-type-active-extra-text);
}

.exc-type-idle {
    background: var(--schedule-exc-type-idle-bg);
    border-color: var(--schedule-exc-type-idle-border);
    color: var(--schedule-exc-type-idle-text);
}

    .exc-type-idle:hover {
        background: var(--alma-bg-hover);
    }

.exc-alcance-btn {
    flex: 1;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
}

.exc-alcance-active {
    background: var(--schedule-alcance-active-bg);
    border-color: var(--schedule-alcance-active-border);
    color: var(--schedule-alcance-active-text);
}

.exc-alcance-idle {
    background: var(--schedule-alcance-idle-bg);
    border-color: var(--schedule-alcance-idle-border);
    color: var(--schedule-alcance-idle-text);
}

    .exc-alcance-idle:hover {
        background: var(--alma-bg-hover);
    }

/* Delete button (universal dentro del módulo) */
.schedule-delete-btn {
    padding: 2px 6px;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--alma-text-muted);
    font-size: 0.75rem;
    transition: color 0.12s ease, background 0.12s ease;
}

    .schedule-delete-btn:hover {
        color: var(--action-cancel-text);
        background: var(--action-cancel-bg);
    }

/* Empty states inline */
.schedule-empty {
    text-align: center;
    padding: 24px 16px;
    background: var(--appt-panel-bg);
    border: 1px solid var(--appt-panel-border);
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   ATTENTION MODULE
   Agregar al final de dashboard.css / appointments-additions.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Stats cards del panel */
    --attn-stat-bg: rgba(255,255,255,0.04);
    --attn-stat-border: var(--alma-border);
    --attn-stat-total: var(--alma-text);
    --attn-stat-pending: #fbbf24;
    --attn-stat-inprogress: #60a5fa;
    --attn-stat-completed: #4ade80;
    --attn-stat-cancelled: #f87171;
    /* Filter pills */
    --attn-pill-idle-bg: rgba(255,255,255,0.05);
    --attn-pill-idle-border: var(--alma-border-2);
    --attn-pill-idle-text: var(--alma-text-sub);
    --attn-pill-all-active-bg: rgba(255,255,255,0.10);
    --attn-pill-all-active-border: var(--alma-border-2);
    --attn-pill-all-active-text: var(--alma-text);
    --attn-pill-pending-active-bg: rgba(202,138,4,0.18);
    --attn-pill-pending-active-border: rgba(234,179,8,0.35);
    --attn-pill-pending-active-text: #fbbf24;
    --attn-pill-inprog-active-bg: rgba(37,99,235,0.18);
    --attn-pill-inprog-active-border: rgba(59,130,246,0.35);
    --attn-pill-inprog-active-text: #60a5fa;
    --attn-pill-done-active-bg: rgba(5,150,105,0.18);
    --attn-pill-done-active-border: rgba(16,185,129,0.35);
    --attn-pill-done-active-text: #4ade80;
    --attn-pill-cancel-active-bg: rgba(220,38,38,0.15);
    --attn-pill-cancel-active-border: rgba(239,68,68,0.30);
    --attn-pill-cancel-active-text: #f87171;
    /* Appointment cards */
    --attn-card-bg: rgba(255,255,255,0.04);
    --attn-card-border-default: var(--alma-border);
    --attn-card-border-inprog: rgba(59,130,246,0.45);
    --attn-card-border-done: rgba(16,185,129,0.30);
    --attn-card-border-cancelled: rgba(239,68,68,0.25);
    --attn-card-border-noshow: rgba(251,146,60,0.25);
    /* Status bar (franja top de la card) */
    --attn-bar-scheduled: rgba(100,116,139,0.70);
    --attn-bar-confirmed: rgba(234,179,8,0.80);
    --attn-bar-inprogress: rgba(59,130,246,0.90);
    --attn-bar-completed: rgba(16,185,129,0.90);
    --attn-bar-cancelled: rgba(239,68,68,0.80);
    --attn-bar-noshow: rgba(249,115,22,0.80);
    --attn-bar-default: rgba(71,85,105,0.50);
    /* Time block dentro de la card */
    --attn-time-block-bg: rgba(255,255,255,0.06);
    --attn-time-start: var(--alma-text);
    --attn-time-end: var(--alma-text-muted);
    /* Card action buttons */
    --attn-btn-start-bg: rgba(20,184,166,0.12);
    --attn-btn-start-hover: rgba(20,184,166,0.25);
    --attn-btn-start-border: rgba(20,184,166,0.30);
    --attn-btn-start-text: #2dd4bf;
    --attn-btn-view-bg: rgba(37,99,235,0.12);
    --attn-btn-view-hover: rgba(37,99,235,0.25);
    --attn-btn-view-border: rgba(59,130,246,0.30);
    --attn-btn-view-text: #60a5fa;
    --attn-btn-done-bg: rgba(5,150,105,0.12);
    --attn-btn-done-hover: rgba(5,150,105,0.25);
    --attn-btn-done-border: rgba(16,185,129,0.30);
    --attn-btn-done-text: #4ade80;
    --attn-btn-noshow-bg: rgba(255,255,255,0.05);
    --attn-btn-noshow-border: var(--alma-border-2);
    --attn-btn-noshow-text: var(--alma-text-muted);
    --attn-btn-noshow-hover-bg: rgba(239,68,68,0.12);
    --attn-btn-noshow-hover-border: rgba(239,68,68,0.25);
    --attn-btn-noshow-hover-text: #f87171;
    /* Actualizar button del header */
    --attn-refresh-bg: rgba(255,255,255,0.05);
    --attn-refresh-border: var(--alma-border-2);
    --attn-refresh-text: var(--alma-text-sub);
    --attn-refresh-hover-bg: rgba(255,255,255,0.08);
    --attn-refresh-hover-text: var(--alma-text);
    /* ── AppointmentAttention modal ── */
    /* Modal tabs */
    --modal-tab-active-text: var(--alma-accent);
    --modal-tab-active-bar: var(--alma-accent);
    --modal-tab-idle-text: var(--alma-text-muted);
    --modal-tab-idle-hover: var(--alma-text-sub);
    /* Status dot (pulsing) */
    --attn-dot-inprog: #60a5fa;
    --attn-dot-completed: #4ade80;
    --attn-dot-cancelled: #f87171;
    --attn-dot-confirmed: #fbbf24;
    --attn-dot-default: var(--alma-text-muted);
    /* Info blocks dentro del modal */
    --attn-block-bg: rgba(255,255,255,0.05);
    --attn-block-border: var(--alma-border);
    --attn-block-label: var(--alma-text-muted);
    --attn-block-value: var(--alma-text);
    /* Avatar initials */
    --attn-avatar-bg: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2));
    /* Notes block */
    --attn-note-bg: rgba(255,255,255,0.04);
    --attn-note-border: var(--alma-border);
    --attn-note-tag-bg: rgba(255,255,255,0.07);
    --attn-note-tag-text: var(--alma-text-sub);
    --attn-note-type-badge-bg: var(--alma-accent-soft);
    --attn-note-type-badge-text: var(--alma-accent);
    /* Observaciones del turno (amarillo) */
    --attn-obs-bg: rgba(202,138,4,0.07);
    --attn-obs-border: rgba(202,138,4,0.18);
    --attn-obs-title: #fbbf24;
    --attn-obs-text: rgba(253,230,138,0.80);
    /* Note type selectors */
    --nt-clinical-active-bg: rgba(20,184,166,0.15);
    --nt-clinical-active-border: rgba(45,212,191,0.35);
    --nt-clinical-active-text: #2dd4bf;
    --nt-obs-active-bg: rgba(37,99,235,0.15);
    --nt-obs-active-border: rgba(96,165,250,0.35);
    --nt-obs-active-text: #60a5fa;
    --nt-followup-active-bg: rgba(124,58,237,0.15);
    --nt-followup-active-border: rgba(167,139,250,0.35);
    --nt-followup-active-text: #a78bfa;
    --nt-warning-active-bg: rgba(220,38,38,0.15);
    --nt-warning-active-border: rgba(248,113,113,0.35);
    --nt-warning-active-text: #f87171;
    --nt-admin-active-bg: rgba(71,85,105,0.20);
    --nt-admin-active-border: rgba(148,163,184,0.30);
    --nt-admin-active-text: var(--alma-text-sub);
    --nt-idle-bg: rgba(255,255,255,0.04);
    --nt-idle-border: var(--alma-border-2);
    --nt-idle-text: var(--alma-text-sub);
    /* Form inputs dentro del modal */
    --attn-input-bg: rgba(255,255,255,0.06);
    --attn-input-border: var(--alma-border-2);
    --attn-input-text: var(--alma-text);
    --attn-input-placeholder: var(--alma-text-muted);
    --attn-input-focus: var(--alma-accent-border);
    /* Note feedback */
    --attn-note-error-bg: rgba(220,38,38,0.08);
    --attn-note-error-border: rgba(220,38,38,0.22);
    --attn-note-error-text: #f87171;
    --attn-note-ok-bg: rgba(5,150,105,0.08);
    --attn-note-ok-border: rgba(16,185,129,0.22);
    --attn-note-ok-text: #4ade80;
    /* Photo block */
    --attn-photo-drop-bg: rgba(255,255,255,0.03);
    --attn-photo-drop-border: var(--alma-border-2);
    --attn-photo-thumb-bg: rgba(255,255,255,0.04);
    --attn-photo-thumb-border: var(--alma-border);
    /* Footer buttons del modal */
    --attn-footer-close-bg: rgba(255,255,255,0.06);
    --attn-footer-close-hover: rgba(255,255,255,0.09);
    --attn-footer-close-text: var(--alma-text-sub);
    --attn-footer-cancel-bg: rgba(255,255,255,0.05);
    --attn-footer-cancel-hover-bg: rgba(220,38,38,0.10);
    --attn-footer-cancel-hover-border: rgba(220,38,38,0.25);
    --attn-footer-cancel-hover-text: #f87171;
    --attn-footer-cancel-border: var(--alma-border-2);
    --attn-footer-cancel-text: var(--alma-text-sub);
    --attn-footer-start-bg: rgba(37,99,235,0.12);
    --attn-footer-start-hover: rgba(37,99,235,0.22);
    --attn-footer-start-border: rgba(59,130,246,0.30);
    --attn-footer-start-text: #60a5fa;
    --attn-footer-finalize-bg: linear-gradient(135deg, #059669, var(--alma-accent));
    --attn-footer-save-note-bg: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2));
}

[data-mode="light"] {
    --attn-stat-bg: var(--alma-bg-card);
    --attn-stat-border: var(--alma-border);
    --attn-stat-total: var(--alma-text);
    --attn-stat-pending: #b45309;
    --attn-stat-inprogress: #1d4ed8;
    --attn-stat-completed: #047857;
    --attn-stat-cancelled: #b91c1c;
    --attn-pill-idle-bg: var(--alma-bg-card);
    --attn-pill-idle-border: var(--alma-border);
    --attn-pill-idle-text: var(--alma-text-sub);
    --attn-pill-all-active-bg: rgba(0,0,0,0.08);
    --attn-pill-all-active-border: var(--alma-border-2);
    --attn-pill-all-active-text: var(--alma-text);
    --attn-pill-pending-active-bg: rgba(202,138,4,0.10);
    --attn-pill-pending-active-border: rgba(202,138,4,0.25);
    --attn-pill-pending-active-text: #b45309;
    --attn-pill-inprog-active-bg: rgba(37,99,235,0.10);
    --attn-pill-inprog-active-border: rgba(37,99,235,0.25);
    --attn-pill-inprog-active-text: #1d4ed8;
    --attn-pill-done-active-bg: rgba(5,150,105,0.10);
    --attn-pill-done-active-border: rgba(5,150,105,0.25);
    --attn-pill-done-active-text: #047857;
    --attn-pill-cancel-active-bg: rgba(220,38,38,0.08);
    --attn-pill-cancel-active-border: rgba(220,38,38,0.20);
    --attn-pill-cancel-active-text: #b91c1c;
    --attn-card-bg: var(--alma-bg-card);
    --attn-card-border-default: var(--alma-border);
    --attn-card-border-inprog: rgba(37,99,235,0.30);
    --attn-card-border-done: rgba(5,150,105,0.25);
    --attn-card-border-cancelled: rgba(220,38,38,0.18);
    --attn-card-border-noshow: rgba(234,88,12,0.18);
    --attn-time-block-bg: rgba(0,0,0,0.05);
    --attn-time-start: var(--alma-text);
    --attn-time-end: var(--alma-text-muted);
    --attn-btn-start-bg: rgba(15,155,114,0.08);
    --attn-btn-start-hover: rgba(15,155,114,0.15);
    --attn-btn-start-border: rgba(15,155,114,0.22);
    --attn-btn-start-text: var(--alma-accent-2);
    --attn-btn-view-bg: rgba(37,99,235,0.08);
    --attn-btn-view-hover: rgba(37,99,235,0.15);
    --attn-btn-view-border: rgba(37,99,235,0.22);
    --attn-btn-view-text: #1d4ed8;
    --attn-btn-done-bg: rgba(5,150,105,0.08);
    --attn-btn-done-hover: rgba(5,150,105,0.15);
    --attn-btn-done-border: rgba(5,150,105,0.22);
    --attn-btn-done-text: #047857;
    --attn-btn-noshow-bg: rgba(0,0,0,0.04);
    --attn-btn-noshow-border: var(--alma-border);
    --attn-btn-noshow-text: var(--alma-text-muted);
    --attn-btn-noshow-hover-bg: rgba(220,38,38,0.07);
    --attn-btn-noshow-hover-border: rgba(220,38,38,0.18);
    --attn-btn-noshow-hover-text: #b91c1c;
    --attn-refresh-bg: var(--alma-bg-card);
    --attn-refresh-border: var(--alma-border);
    --attn-refresh-text: var(--alma-text-sub);
    --attn-refresh-hover-bg: var(--alma-bg-hover);
    --attn-refresh-hover-text: var(--alma-accent);
    --modal-tab-active-text: var(--alma-accent);
    --modal-tab-active-bar: var(--alma-accent);
    --modal-tab-idle-text: var(--alma-text-muted);
    --modal-tab-idle-hover: var(--alma-text-sub);
    --attn-dot-inprog: #1d4ed8;
    --attn-dot-completed: #047857;
    --attn-dot-cancelled: #b91c1c;
    --attn-dot-confirmed: #b45309;
    --attn-dot-default: var(--alma-text-muted);
    --attn-block-bg: rgba(0,0,0,0.03);
    --attn-block-border: var(--alma-border);
    --attn-block-label: var(--alma-text-muted);
    --attn-block-value: var(--alma-text);
    --attn-avatar-bg: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2));
    --attn-note-bg: var(--alma-bg-card);
    --attn-note-border: var(--alma-border);
    --attn-note-tag-bg: rgba(0,0,0,0.05);
    --attn-note-tag-text: var(--alma-text-sub);
    --attn-note-type-badge-bg: var(--alma-accent-soft);
    --attn-note-type-badge-text: var(--alma-accent);
    --attn-obs-bg: rgba(202,138,4,0.06);
    --attn-obs-border: rgba(202,138,4,0.15);
    --attn-obs-title: #b45309;
    --attn-obs-text: rgba(120,80,0,0.85);
    --nt-clinical-active-bg: #d1fae5;
    --nt-clinical-active-border: #6ee7b7;
    --nt-clinical-active-text: #047857;
    --nt-obs-active-bg: #dbeafe;
    --nt-obs-active-border: #93c5fd;
    --nt-obs-active-text: #1d4ed8;
    --nt-followup-active-bg: #ede9fe;
    --nt-followup-active-border: #c4b5fd;
    --nt-followup-active-text: #6d28d9;
    --nt-warning-active-bg: #fee2e2;
    --nt-warning-active-border: #fca5a5;
    --nt-warning-active-text: #b91c1c;
    --nt-admin-active-bg: #f1f5f9;
    --nt-admin-active-border: #cbd5e1;
    --nt-admin-active-text: var(--alma-text-sub);
    --nt-idle-bg: var(--alma-bg-card);
    --nt-idle-border: var(--alma-border);
    --nt-idle-text: var(--alma-text-sub);
    --attn-input-bg: var(--alma-bg-input);
    --attn-input-border: var(--alma-border-2);
    --attn-input-text: var(--alma-text);
    --attn-input-placeholder: var(--alma-text-muted);
    --attn-input-focus: var(--alma-accent-border);
    --attn-note-error-bg: rgba(220,38,38,0.06);
    --attn-note-error-border: rgba(220,38,38,0.15);
    --attn-note-error-text: #b91c1c;
    --attn-note-ok-bg: rgba(5,150,105,0.06);
    --attn-note-ok-border: rgba(5,150,105,0.15);
    --attn-note-ok-text: #047857;
    --attn-photo-drop-bg: var(--alma-bg);
    --attn-photo-drop-border: var(--alma-border-2);
    --attn-photo-thumb-bg: var(--alma-bg-card);
    --attn-photo-thumb-border: var(--alma-border);
    --attn-footer-close-bg: rgba(0,0,0,0.04);
    --attn-footer-close-hover: rgba(0,0,0,0.07);
    --attn-footer-close-text: var(--alma-text-sub);
    --attn-footer-cancel-bg: rgba(0,0,0,0.04);
    --attn-footer-cancel-border: var(--alma-border);
    --attn-footer-cancel-text: var(--alma-text-sub);
    --attn-footer-cancel-hover-bg: rgba(220,38,38,0.06);
    --attn-footer-cancel-hover-border: rgba(220,38,38,0.18);
    --attn-footer-cancel-hover-text: #b91c1c;
    --attn-footer-start-bg: rgba(37,99,235,0.08);
    --attn-footer-start-hover: rgba(37,99,235,0.14);
    --attn-footer-start-border: rgba(37,99,235,0.20);
    --attn-footer-start-text: #1d4ed8;
    --attn-footer-finalize-bg: linear-gradient(135deg, #059669, var(--alma-accent));
    --attn-footer-save-note-bg: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2));
}

/* ─────────────────────────────────────────────────────────────
   CLASES — AttentionPanel page
   ───────────────────────────────────────────────────────────── */

/* Stat cards */
.attn-stat-card {
    background: var(--attn-stat-bg);
    border: 1px solid var(--attn-stat-border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.attn-stat-total {
    color: var(--attn-stat-total);
}

.attn-stat-pending {
    color: var(--attn-stat-pending);
}

.attn-stat-inprog {
    color: var(--attn-stat-inprogress);
}

.attn-stat-done {
    color: var(--attn-stat-completed);
}

.attn-stat-cancel {
    color: var(--attn-stat-cancelled);
}

.attn-stat-label {
    font-size: 0.6875rem;
    color: var(--alma-text-sub);
    margin-top: 2px;
}

.attn-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Filter pills */
.attn-pill {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--attn-pill-idle-bg);
    border-color: var(--attn-pill-idle-border);
    color: var(--attn-pill-idle-text);
}

    .attn-pill:hover {
        color: var(--alma-text);
        border-color: var(--alma-border-2);
    }

.attn-pill-all-active {
    background: var(--attn-pill-all-active-bg);
    border-color: var(--attn-pill-all-active-border);
    color: var(--attn-pill-all-active-text);
}

.attn-pill-pending-active {
    background: var(--attn-pill-pending-active-bg);
    border-color: var(--attn-pill-pending-active-border);
    color: var(--attn-pill-pending-active-text);
}

.attn-pill-inprog-active {
    background: var(--attn-pill-inprog-active-bg);
    border-color: var(--attn-pill-inprog-active-border);
    color: var(--attn-pill-inprog-active-text);
}

.attn-pill-done-active {
    background: var(--attn-pill-done-active-bg);
    border-color: var(--attn-pill-done-active-border);
    color: var(--attn-pill-done-active-text);
}

.attn-pill-cancel-active {
    background: var(--attn-pill-cancel-active-bg);
    border-color: var(--attn-pill-cancel-active-border);
    color: var(--attn-pill-cancel-active-text);
}

.attn-pill-count {
    margin-left: 6px;
    opacity: 0.75;
}

/* Appointment cards */
.attn-appt-card {
    background: var(--attn-card-bg);
    border: 1px solid var(--attn-card-border-default);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .attn-appt-card:hover {
        box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    }

.attn-card-border-inprog {
    border-color: var(--attn-card-border-inprog);
}

.attn-card-border-done {
    border-color: var(--attn-card-border-done);
}

.attn-card-border-cancelled {
    border-color: var(--attn-card-border-cancelled);
}

.attn-card-border-noshow {
    border-color: var(--attn-card-border-noshow);
}

/* Status bar (1px franja top) */
.attn-status-bar {
    height: 3px;
}

.attn-bar-scheduled {
    background: var(--attn-bar-scheduled);
}

.attn-bar-confirmed {
    background: var(--attn-bar-confirmed);
}

.attn-bar-inprogress {
    background: var(--attn-bar-inprogress);
}

.attn-bar-completed {
    background: var(--attn-bar-completed);
}

.attn-bar-cancelled {
    background: var(--attn-bar-cancelled);
}

.attn-bar-noshow {
    background: var(--attn-bar-noshow);
}

.attn-bar-default {
    background: var(--attn-bar-default);
}

/* Time block */
.attn-time-block {
    background: var(--attn-time-block-bg);
    border-radius: 8px;
    padding: 5px 10px;
    text-align: center;
    min-width: 60px;
    flex-shrink: 0;
}

.attn-time-start {
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--attn-time-start);
}

.attn-time-end {
    font-size: 0.6875rem;
    font-family: monospace;
    color: var(--attn-time-end);
}

/* Card action buttons */
.attn-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

.attn-card-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.attn-btn-start {
    background: var(--attn-btn-start-bg);
    border-color: var(--attn-btn-start-border);
    color: var(--attn-btn-start-text);
}

    .attn-btn-start:hover {
        background: var(--attn-btn-start-hover);
    }

.attn-btn-view {
    background: var(--attn-btn-view-bg);
    border-color: var(--attn-btn-view-border);
    color: var(--attn-btn-view-text);
}

    .attn-btn-view:hover {
        background: var(--attn-btn-view-hover);
    }

.attn-btn-done {
    background: var(--attn-btn-done-bg);
    border-color: var(--attn-btn-done-border);
    color: var(--attn-btn-done-text);
}

    .attn-btn-done:hover {
        background: var(--attn-btn-done-hover);
    }

.attn-btn-noshow {
    background: var(--attn-btn-noshow-bg);
    border-color: var(--attn-btn-noshow-border);
    color: var(--attn-btn-noshow-text);
}

    .attn-btn-noshow:hover {
        background: var(--attn-btn-noshow-hover-bg);
        border-color: var(--attn-btn-noshow-hover-border);
        color: var(--attn-btn-noshow-hover-text);
    }

/* Refresh button */
.attn-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    border: 1px solid var(--attn-refresh-border);
    background: var(--attn-refresh-bg);
    color: var(--attn-refresh-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .attn-refresh-btn:hover {
        background: var(--attn-refresh-hover-bg);
        color: var(--attn-refresh-hover-text);
    }

/* ─────────────────────────────────────────────────────────────
   CLASES — AppointmentAttention modal
   ───────────────────────────────────────────────────────────── */

/* Status dot */
.attn-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attn-dot-inprog {
    background: var(--attn-dot-inprog);
}

.attn-dot-completed {
    background: var(--attn-dot-completed);
}

.attn-dot-cancelled {
    background: var(--attn-dot-cancelled);
}

.attn-dot-confirmed {
    background: var(--attn-dot-confirmed);
}

.attn-dot-default {
    background: var(--attn-dot-default);
}

/* Modal tabs */
.attn-tab-btn {
    padding: 10px 16px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
    color: var(--modal-tab-idle-text);
}

    .attn-tab-btn:hover {
        color: var(--modal-tab-idle-hover);
    }

    .attn-tab-btn.active {
        color: var(--modal-tab-active-text);
    }

.attn-tab-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--modal-tab-active-bar);
    border-radius: 2px 2px 0 0;
}

/* Info blocks */
.attn-info-block {
    background: var(--attn-block-bg);
    border: 1px solid var(--attn-block-border);
    border-radius: 10px;
    padding: 14px;
}

.attn-info-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--attn-block-label);
    margin-bottom: 10px;
}

.attn-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.attn-info-key {
    font-size: 0.75rem;
    color: var(--attn-block-label);
}

.attn-info-value {
    font-size: 0.75rem;
    color: var(--attn-block-value);
    font-weight: 500;
}

.attn-info-price {
    font-size: 0.75rem;
    color: var(--attn-stat-completed);
    font-weight: 700;
}

.attn-info-mono {
    font-family: monospace;
}

/* Avatar */
.attn-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--attn-avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Observaciones del turno */
.attn-obs-block {
    background: var(--attn-obs-bg);
    border: 1px solid var(--attn-obs-border);
    border-radius: 10px;
    padding: 12px;
}

.attn-obs-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--attn-obs-title);
    margin-bottom: 4px;
}

.attn-obs-text {
    font-size: 0.875rem;
    color: var(--attn-obs-text);
}

/* Note cards */
.attn-note-card {
    background: var(--attn-note-bg);
    border: 1px solid var(--attn-note-border);
    border-radius: 8px;
    padding: 10px 12px;
}

.attn-note-type-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6875rem;
    background: var(--attn-note-type-badge-bg);
    color: var(--attn-note-type-badge-text);
}

.attn-note-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6875rem;
    background: var(--attn-note-tag-bg);
    color: var(--attn-note-tag-text);
}

.attn-note-content {
    font-size: 0.75rem;
    color: var(--alma-text-sub);
    white-space: pre-wrap;
}

/* Note type selectors */
.nt-btn {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
}

.nt-idle {
    background: var(--nt-idle-bg);
    border-color: var(--nt-idle-border);
    color: var(--nt-idle-text);
}

    .nt-idle:hover {
        border-color: var(--alma-border-2);
        color: var(--alma-text);
    }

.nt-clinical {
    background: var(--nt-clinical-active-bg);
    border-color: var(--nt-clinical-active-border);
    color: var(--nt-clinical-active-text);
}

.nt-obs {
    background: var(--nt-obs-active-bg);
    border-color: var(--nt-obs-active-border);
    color: var(--nt-obs-active-text);
}

.nt-followup {
    background: var(--nt-followup-active-bg);
    border-color: var(--nt-followup-active-border);
    color: var(--nt-followup-active-text);
}

.nt-warning {
    background: var(--nt-warning-active-bg);
    border-color: var(--nt-warning-active-border);
    color: var(--nt-warning-active-text);
}

.nt-admin {
    background: var(--nt-admin-active-bg);
    border-color: var(--nt-admin-active-border);
    color: var(--nt-admin-active-text);
}

/* Form inputs del modal */
.attn-input {
    width: 100%;
    padding: 7px 12px;
    background: var(--attn-input-bg);
    border: 1px solid var(--attn-input-border);
    border-radius: 8px;
    color: var(--attn-input-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

    .attn-input:focus {
        border-color: var(--attn-input-focus);
    }

    .attn-input::placeholder {
        color: var(--attn-input-placeholder);
    }

.attn-textarea {
    resize: none;
}

/* Feedback note */
.attn-feedback-error {
    background: var(--attn-note-error-bg);
    border: 1px solid var(--attn-note-error-border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--attn-note-error-text);
    font-size: 0.75rem;
}

.attn-feedback-ok {
    background: var(--attn-note-ok-bg);
    border: 1px solid var(--attn-note-ok-border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--attn-note-ok-text);
    font-size: 0.75rem;
}

/* Photo drop zone */
.attn-photo-drop {
    background: var(--attn-photo-drop-bg);
    border: 1px dashed var(--attn-photo-drop-border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.attn-photo-thumb {
    background: var(--attn-photo-thumb-bg);
    border: 1px solid var(--attn-photo-thumb-border);
    border-radius: 10px;
    overflow: hidden;
}

/* Footer buttons del modal */
.attn-btn-close {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--attn-footer-close-bg);
    color: var(--attn-footer-close-text);
    border: 1px solid var(--alma-border);
    cursor: pointer;
    transition: background 0.15s ease;
}

    .attn-btn-close:hover {
        background: var(--attn-footer-close-hover);
    }

.attn-btn-cancel-appt {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--attn-footer-cancel-bg);
    border: 1px solid var(--attn-footer-cancel-border);
    color: var(--attn-footer-cancel-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .attn-btn-cancel-appt:hover {
        background: var(--attn-footer-cancel-hover-bg);
        border-color: var(--attn-footer-cancel-hover-border);
        color: var(--attn-footer-cancel-hover-text);
    }

.attn-btn-start-modal {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--attn-footer-start-bg);
    border: 1px solid var(--attn-footer-start-border);
    color: var(--attn-footer-start-text);
    cursor: pointer;
    transition: background 0.15s ease;
}

    .attn-btn-start-modal:hover {
        background: var(--attn-footer-start-hover);
    }

    .attn-btn-start-modal:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.attn-btn-finalize {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--attn-footer-finalize-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .attn-btn-finalize:hover {
        filter: brightness(1.10);
    }

    .attn-btn-finalize:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.attn-btn-save-note {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--attn-footer-save-note-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .attn-btn-save-note:hover {
        filter: brightness(1.10);
    }

    .attn-btn-save-note:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.attn-btn-save-photo {
    padding: 7px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--alma-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .attn-btn-save-photo:hover {
        filter: brightness(1.10);
    }

    .attn-btn-save-photo:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ═══════════════════════════════════════════════════════════════
   CUSTOMERS MODULE
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Stats chips del listado */
    --cust-stat-found: var(--alma-accent-light);
    --cust-stat-active: var(--attn-stat-completed);
    --cust-stat-inactive: var(--attn-stat-cancelled);
    --cust-stat-total: var(--attn-stat-inprogress);
    /* Cards del listado */
    --cust-card-bg: rgba(255,255,255,0.04);
    --cust-card-border: var(--alma-border);
    --cust-card-hover: var(--alma-accent-border);
    --cust-card-footer-bg: rgba(255,255,255,0.04);
    /* Avatar */
    --cust-avatar-bg: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2));
    /* Status text en listado */
    --cust-active-text: var(--attn-stat-completed);
    --cust-inactive-text: var(--attn-stat-cancelled);
    /* Botones de card */
    --cust-btn-view-bg: rgba(37,99,235,0.12);
    --cust-btn-view-hover: rgba(37,99,235,0.22);
    --cust-btn-view-text: #60a5fa;
    --cust-btn-edit-bg: var(--alma-accent-soft);
    --cust-btn-edit-hover: rgba(29,184,138,0.18);
    --cust-btn-edit-text: var(--alma-accent);
    --cust-btn-deact-bg: rgba(202,138,4,0.12);
    --cust-btn-deact-hover: rgba(202,138,4,0.22);
    --cust-btn-deact-text: #fbbf24;
    --cust-btn-act-bg: rgba(5,150,105,0.12);
    --cust-btn-act-hover: rgba(5,150,105,0.22);
    --cust-btn-act-text: #4ade80;
    --cust-btn-hist-bg: rgba(20,184,166,0.12);
    --cust-btn-hist-hover: rgba(20,184,166,0.22);
    --cust-btn-hist-text: #2dd4bf;
    /* Panel de filtros / paneles internos */
    --cust-panel-bg: rgba(255,255,255,0.03);
    --cust-panel-border: var(--alma-border);
    /* Inputs del módulo (search, select, etc.) */
    --cust-input-bg: rgba(255,255,255,0.06);
    --cust-input-border: var(--alma-border-2);
    --cust-input-text: var(--alma-text);
    --cust-input-placeholder: var(--alma-text-muted);
    --cust-input-focus: var(--alma-accent-border);
    /* Error / warning states */
    --cust-error-bg: rgba(220,38,38,0.08);
    --cust-error-border: rgba(220,38,38,0.22);
    --cust-error-text: #f87171;
    --cust-warn-bg: rgba(202,138,4,0.08);
    --cust-warn-border: rgba(202,138,4,0.22);
    --cust-warn-text: #fbbf24;
    /* Tabs del detalle */
    --cust-tab-active-bg: var(--alma-accent);
    --cust-tab-active-text: #ffffff;
    --cust-tab-idle-text: var(--alma-text-sub);
    --cust-tab-idle-hover-bg: rgba(255,255,255,0.04);
    --cust-tab-idle-hover-text: var(--alma-text);
    --cust-tab-bar-bg: var(--alma-bg-2);
    /* Info blocks del detalle (grid de 4 cards) */
    --cust-detail-block-bg: rgba(255,255,255,0.04);
    --cust-detail-block-border: var(--alma-border);
    --cust-detail-label: var(--alma-text-muted);
    --cust-detail-value: var(--alma-text);
    --cust-detail-spent: var(--attn-stat-completed);
    /* Historial de citas rows */
    --cust-appt-row-bg: rgba(255,255,255,0.03);
    --cust-appt-row-border: var(--alma-border);
    --cust-appt-row-hover: rgba(255,255,255,0.05);
    /* Tratamiento progress bar */
    --cust-progress-track: rgba(255,255,255,0.08);
    --cust-progress-fill: var(--alma-accent);
    /* Notas textarea preview */
    --cust-note-bg: rgba(255,255,255,0.03);
    --cust-note-border: var(--alma-border);
    /* Address preview */
    --cust-addr-preview-bg: rgba(255,255,255,0.04);
    --cust-addr-preview-border: var(--alma-border);
    /* Back button */
    --cust-back-bg: rgba(255,255,255,0.04);
    --cust-back-border: var(--alma-border);
    --cust-back-hover: rgba(255,255,255,0.08);
    /* Barra separadora interna de filtros */
    --cust-sep: var(--alma-border);
}

[data-mode="light"] {
    --cust-stat-found: var(--alma-accent);
    --cust-stat-active: #047857;
    --cust-stat-inactive: #b91c1c;
    --cust-stat-total: #1d4ed8;
    --cust-card-bg: var(--alma-bg-card);
    --cust-card-border: var(--alma-border);
    --cust-card-hover: var(--alma-accent-border);
    --cust-card-footer-bg: rgba(0,0,0,0.03);
    --cust-avatar-bg: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2));
    --cust-active-text: #047857;
    --cust-inactive-text: #b91c1c;
    --cust-btn-view-bg: rgba(37,99,235,0.07);
    --cust-btn-view-hover: rgba(37,99,235,0.14);
    --cust-btn-view-text: #1d4ed8;
    --cust-btn-edit-bg: var(--alma-accent-soft);
    --cust-btn-edit-hover: rgba(15,155,114,0.14);
    --cust-btn-edit-text: var(--alma-accent);
    --cust-btn-deact-bg: rgba(202,138,4,0.08);
    --cust-btn-deact-hover: rgba(202,138,4,0.15);
    --cust-btn-deact-text: #b45309;
    --cust-btn-act-bg: rgba(5,150,105,0.08);
    --cust-btn-act-hover: rgba(5,150,105,0.15);
    --cust-btn-act-text: #047857;
    --cust-btn-hist-bg: rgba(15,155,114,0.08);
    --cust-btn-hist-hover: rgba(15,155,114,0.15);
    --cust-btn-hist-text: var(--alma-accent-2);
    --cust-panel-bg: var(--alma-bg-card);
    --cust-panel-border: var(--alma-border);
    --cust-input-bg: var(--alma-bg-input);
    --cust-input-border: var(--alma-border-2);
    --cust-input-text: var(--alma-text);
    --cust-input-placeholder: var(--alma-text-muted);
    --cust-input-focus: var(--alma-accent-border);
    --cust-error-bg: rgba(220,38,38,0.06);
    --cust-error-border: rgba(220,38,38,0.16);
    --cust-error-text: #b91c1c;
    --cust-warn-bg: rgba(202,138,4,0.06);
    --cust-warn-border: rgba(202,138,4,0.15);
    --cust-warn-text: #b45309;
    --cust-tab-active-bg: var(--alma-accent);
    --cust-tab-active-text: #ffffff;
    --cust-tab-idle-text: var(--alma-text-sub);
    --cust-tab-idle-hover-bg: rgba(0,0,0,0.04);
    --cust-tab-idle-hover-text: var(--alma-text);
    --cust-tab-bar-bg: var(--alma-bg-2);
    --cust-detail-block-bg: var(--alma-bg-card);
    --cust-detail-block-border: var(--alma-border);
    --cust-detail-label: var(--alma-text-muted);
    --cust-detail-value: var(--alma-text);
    --cust-detail-spent: #047857;
    --cust-appt-row-bg: rgba(0,0,0,0.02);
    --cust-appt-row-border: var(--alma-border);
    --cust-appt-row-hover: rgba(0,0,0,0.04);
    --cust-progress-track: rgba(0,0,0,0.08);
    --cust-progress-fill: var(--alma-accent);
    --cust-note-bg: var(--alma-bg-card);
    --cust-note-border: var(--alma-border);
    --cust-addr-preview-bg: rgba(0,0,0,0.03);
    --cust-addr-preview-border: var(--alma-border);
    --cust-back-bg: rgba(0,0,0,0.04);
    --cust-back-border: var(--alma-border);
    --cust-back-hover: rgba(0,0,0,0.07);
    --cust-sep: var(--alma-border);
}

/* ─────────────────────────────────────────────────────────────
   CLASES — CustomerList
   ───────────────────────────────────────────────────────────── */

/* Panel de filtros */
.cust-panel {
    background: var(--cust-panel-bg);
    border: 1px solid var(--cust-panel-border);
    border-radius: 12px;
    padding: 12px;
    backdrop-filter: blur(8px);
}

.cust-sep {
    border-top: 1px solid var(--cust-sep);
}

/* Inputs del módulo */
.cust-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--cust-input-bg);
    border: 1px solid var(--cust-input-border);
    border-radius: 8px;
    color: var(--cust-input-text);
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

    .cust-input:focus {
        border-color: var(--cust-input-focus);
    }

    .cust-input::placeholder {
        color: var(--cust-input-placeholder);
    }

.cust-input-search {
    padding-left: 36px;
}

/* Stats rápidas */
.cust-stat-num-found {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cust-stat-found);
}

.cust-stat-num-active {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cust-stat-active);
}

.cust-stat-num-inactive {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cust-stat-inactive);
}

.cust-stat-num-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cust-stat-total);
}

.cust-stat-label {
    font-size: 0.6875rem;
    color: var(--alma-text-muted);
    margin-top: 2px;
}

/* Customer card */
.cust-card {
    background: var(--cust-card-bg);
    border: 1px solid var(--cust-card-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .cust-card:hover {
        border-color: var(--cust-card-hover);
        box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    }

.cust-card-body {
    padding: 12px;
    flex: 1;
}

.cust-card-footer {
    padding: 8px;
    background: var(--cust-card-footer-bg);
    display: flex;
    gap: 6px;
}

/* Avatar */
.cust-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cust-avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.cust-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

/* Status text */
.cust-status-active {
    font-size: 0.75rem;
    color: var(--cust-active-text);
}

.cust-status-inactive {
    font-size: 0.75rem;
    color: var(--cust-inactive-text);
}

/* Card action buttons */
.cust-card-btn {
    flex: 1;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.12s ease;
}

.cust-btn-view {
    background: var(--cust-btn-view-bg);
    color: var(--cust-btn-view-text);
}

    .cust-btn-view:hover {
        background: var(--cust-btn-view-hover);
    }

.cust-btn-edit {
    background: var(--cust-btn-edit-bg);
    color: var(--cust-btn-edit-text);
}

    .cust-btn-edit:hover {
        background: var(--cust-btn-edit-hover);
    }

.cust-btn-deact {
    background: var(--cust-btn-deact-bg);
    color: var(--cust-btn-deact-text);
}

    .cust-btn-deact:hover {
        background: var(--cust-btn-deact-hover);
    }

.cust-btn-act {
    background: var(--cust-btn-act-bg);
    color: var(--cust-btn-act-text);
}

    .cust-btn-act:hover {
        background: var(--cust-btn-act-hover);
    }

.cust-btn-hist {
    background: var(--cust-btn-hist-bg);
    color: var(--cust-btn-hist-text);
}

    .cust-btn-hist:hover {
        background: var(--cust-btn-hist-hover);
    }

/* Error / warning banners */
.cust-error-box {
    background: var(--cust-error-bg);
    border: 1px solid var(--cust-error-border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.cust-warn-box {
    background: var(--cust-warn-bg);
    border: 1px solid var(--cust-warn-border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.cust-error-title {
    color: var(--cust-error-text);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.cust-warn-title {
    color: var(--cust-warn-text);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.cust-box-sub {
    font-size: 0.875rem;
    color: var(--alma-text-sub);
    margin-bottom: 14px;
}

/* Back button */
.cust-back-btn {
    padding: 6px;
    background: var(--cust-back-bg);
    border: 1px solid var(--cust-back-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: var(--alma-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cust-back-btn:hover {
        background: var(--cust-back-hover);
    }

/* ─────────────────────────────────────────────────────────────
   CLASES — CustomerDetail
   ───────────────────────────────────────────────────────────── */

/* Info blocks (grid 4 cols) */
.cust-detail-block {
    background: var(--cust-detail-block-bg);
    border: 1px solid var(--cust-detail-block-border);
    border-radius: 10px;
    padding: 12px;
}

.cust-detail-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cust-detail-label);
    margin-bottom: 8px;
}

.cust-detail-label {
    font-size: 0.75rem;
    color: var(--cust-detail-label);
}

.cust-detail-value {
    font-size: 0.75rem;
    color: var(--cust-detail-value);
}

.cust-detail-spent {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cust-detail-spent);
}

.cust-detail-big {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--alma-text);
}

/* Tabs */
.cust-tab-bar {
    background: var(--cust-tab-bar-bg);
    border-bottom: 1px solid var(--cust-panel-border);
}

.cust-tab-btn {
    padding: 7px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--cust-tab-idle-text);
}

    .cust-tab-btn:hover {
        background: var(--cust-tab-idle-hover-bg);
        color: var(--cust-tab-idle-hover-text);
    }

    .cust-tab-btn.active {
        background: var(--cust-tab-active-bg);
        color: var(--cust-tab-active-text);
    }

/* Appointment history rows */
.cust-appt-row {
    background: var(--cust-appt-row-bg);
    border: 1px solid var(--cust-appt-row-border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: background 0.12s ease;
}

    .cust-appt-row:hover {
        background: var(--cust-appt-row-hover);
    }

/* Treatment progress */
.cust-progress-track {
    background: var(--cust-progress-track);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}

.cust-progress-fill {
    background: var(--cust-progress-fill);
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Notes block */
.cust-note-block {
    background: var(--cust-note-bg);
    border: 1px solid var(--cust-note-border);
    border-radius: 8px;
    padding: 12px;
}

/* ─────────────────────────────────────────────────────────────
   CLASES — CustomerForm
   ───────────────────────────────────────────────────────────── */

/* Form section cards */
.cust-form-section {
    background: var(--cust-panel-bg);
    border: 1px solid var(--cust-panel-border);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(8px);
}

.cust-form-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--alma-text-muted);
    margin-bottom: 12px;
}

/* Field label */
.cust-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--alma-text-sub);
    margin-bottom: 4px;
}

.cust-required {
    color: var(--cust-error-text);
}

/* Form validation feedback */
.cust-field-error {
    font-size: 0.75rem;
    color: var(--cust-error-text);
    margin-top: 4px;
}

/* Error banner en form */
.cust-form-error {
    background: var(--cust-error-bg);
    border: 1px solid var(--cust-error-border);
    border-radius: 8px;
    padding: 10px 12px;
}

.cust-form-error-title {
    color: var(--cust-error-text);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.cust-form-error-text {
    color: var(--cust-error-text);
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Address preview */
.cust-addr-preview {
    background: var(--cust-addr-preview-bg);
    border: 1px solid var(--cust-addr-preview-border);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
}

.cust-addr-preview-label {
    font-size: 0.75rem;
    color: var(--alma-text-muted);
    margin-bottom: 2px;
}

.cust-addr-preview-text {
    font-size: 0.875rem;
    color: var(--alma-text);
}

/* IsActive note */
.cust-active-hint {
    font-size: 0.75rem;
    color: var(--cust-active-text);
}

.cust-inactive-hint {
    font-size: 0.75rem;
    color: var(--cust-inactive-text);
}

/* Hint text */
.cust-hint {
    font-size: 0.6875rem;
    color: var(--alma-text-muted);
    margin-top: 6px;
}
/* ═══════════════════════════════════════════════════════════════
   SALES / POS MODULE
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Stats cards */
    --sales-stat-bg: rgba(255,255,255,0.04);
    --sales-stat-border: var(--alma-border);
    --sales-stat-total: #4ade80;
    --sales-stat-count: #60a5fa;
    --sales-stat-avg: var(--alma-accent-light);
    /* Historial panel */
    --sales-panel-bg: rgba(255,255,255,0.03);
    --sales-panel-border: var(--alma-border);
    --sales-table-divider: var(--alma-border);
    --sales-row-hover: rgba(255,255,255,0.03);
    --sales-number-text: #4ade80;
    --sales-amount-text: #4ade80;
    --sales-meta-text: var(--alma-text-sub);
    /* Sale status badges */
    --badge-paid-bg: rgba(5,150,105,0.12);
    --badge-paid-text: #4ade80;
    --badge-paid-border: rgba(16,185,129,0.25);
    --badge-pending-bg: rgba(202,138,4,0.12);
    --badge-pending-text: #fbbf24;
    --badge-pending-border: rgba(234,179,8,0.25);
    --badge-partial-bg: rgba(37,99,235,0.12);
    --badge-partial-text: #60a5fa;
    --badge-partial-border: rgba(59,130,246,0.25);
    --badge-cancelled-sale-bg: rgba(220,38,38,0.12);
    --badge-cancelled-sale-text: #f87171;
    --badge-cancelled-sale-border: rgba(239,68,68,0.25);
    /* POS layout */
    --pos-left-bg: rgba(255,255,255,0.03);
    --pos-left-border: var(--alma-border);
    --pos-ticket-bg: rgba(255,255,255,0.03);
    --pos-ticket-border: var(--alma-border);
    --pos-ticket-head-border: var(--alma-border);
    /* POS inputs / selects */
    --pos-input-bg: rgba(255,255,255,0.06);
    --pos-input-border: var(--alma-border-2);
    --pos-input-focus: var(--alma-accent-border);
    --pos-input-text: var(--alma-text);
    --pos-input-placeholder: var(--alma-text-muted);
    /* Búsqueda de productos */
    --pos-search-icon: var(--alma-text-muted);
    --pos-result-bg: rgba(255,255,255,0.04);
    --pos-result-border: var(--alma-border);
    --pos-result-hover-bg: rgba(29,184,138,0.08);
    --pos-result-hover-border: var(--alma-accent-border);
    --pos-result-name: var(--alma-text);
    --pos-result-name-hover: var(--alma-accent-light);
    --pos-result-meta: var(--alma-text-muted);
    --pos-result-price-bg: var(--alma-accent-soft);
    --pos-result-price-text: var(--alma-accent-light);
    --pos-stock-warn: #fbbf24;
    /* Ticket items */
    --ticket-item-bg: rgba(255,255,255,0.05);
    --ticket-meta-text: var(--alma-text-sub);
    --ticket-price-text: #4ade80;
    --ticket-delete-text: var(--alma-text-muted);
    --ticket-delete-hover: var(--action-cancel-text);
    --ticket-qty-btn-bg: rgba(255,255,255,0.08);
    --ticket-qty-btn-hover: rgba(255,255,255,0.14);
    /* Totales del ticket */
    --ticket-sep: var(--alma-border);
    --ticket-label-text: var(--alma-text-sub);
    --ticket-total-text: #4ade80;
    --ticket-discount-input-bg: rgba(255,255,255,0.06);
    --ticket-discount-input-border: var(--alma-border-2);
    /* Ticket empty state */
    --ticket-empty-text: var(--alma-text-muted);
    /* POS error */
    --pos-error-bg: var(--attn-note-error-bg);
    --pos-error-border: var(--attn-note-error-border);
    --pos-error-text: var(--attn-note-error-text);
    /* Botones POS */
    --pos-btn-primary-bg: linear-gradient(135deg, #16a34a, var(--alma-accent));
    --pos-btn-cancel-border: rgba(239,68,68,0.35);
    --pos-btn-cancel-text: #f87171;
    --pos-btn-cancel-hover: rgba(239,68,68,0.08);
    --pos-btn-new-bg: linear-gradient(135deg, #16a34a, var(--alma-accent));
}

[data-mode="light"] {
    --sales-stat-bg: var(--alma-bg-card);
    --sales-stat-border: var(--alma-border);
    --sales-stat-total: #047857;
    --sales-stat-count: #1d4ed8;
    --sales-stat-avg: var(--alma-accent);
    --sales-panel-bg: var(--alma-bg-card);
    --sales-panel-border: var(--alma-border);
    --sales-table-divider: var(--alma-border);
    --sales-row-hover: rgba(0,0,0,0.03);
    --sales-number-text: var(--alma-accent-2);
    --sales-amount-text: #047857;
    --sales-meta-text: var(--alma-text-sub);
    --badge-paid-bg: rgba(5,150,105,0.08);
    --badge-paid-text: #047857;
    --badge-paid-border: rgba(5,150,105,0.20);
    --badge-pending-bg: rgba(202,138,4,0.08);
    --badge-pending-text: #b45309;
    --badge-pending-border: rgba(202,138,4,0.20);
    --badge-partial-bg: rgba(37,99,235,0.08);
    --badge-partial-text: #1d4ed8;
    --badge-partial-border: rgba(37,99,235,0.20);
    --badge-cancelled-sale-bg: rgba(220,38,38,0.07);
    --badge-cancelled-sale-text: #b91c1c;
    --badge-cancelled-sale-border: rgba(220,38,38,0.18);
    --pos-left-bg: var(--alma-bg-card);
    --pos-left-border: var(--alma-border);
    --pos-ticket-bg: var(--alma-bg-card);
    --pos-ticket-border: var(--alma-border);
    --pos-ticket-head-border: var(--alma-border);
    --pos-input-bg: var(--alma-bg-input);
    --pos-input-border: var(--alma-border-2);
    --pos-input-focus: var(--alma-accent-border);
    --pos-input-text: var(--alma-text);
    --pos-input-placeholder: var(--alma-text-muted);
    --pos-search-icon: var(--alma-text-muted);
    --pos-result-bg: var(--alma-bg-card);
    --pos-result-border: var(--alma-border);
    --pos-result-hover-bg: var(--alma-bg-hover);
    --pos-result-hover-border: var(--alma-accent-border);
    --pos-result-name: var(--alma-text);
    --pos-result-name-hover: var(--alma-accent);
    --pos-result-meta: var(--alma-text-muted);
    --pos-result-price-bg: var(--alma-accent-soft);
    --pos-result-price-text: var(--alma-accent-2);
    --pos-stock-warn: #b45309;
    --ticket-item-bg: rgba(0,0,0,0.04);
    --ticket-meta-text: var(--alma-text-sub);
    --ticket-price-text: #047857;
    --ticket-delete-text: var(--alma-text-muted);
    --ticket-delete-hover: #b91c1c;
    --ticket-qty-btn-bg: rgba(0,0,0,0.07);
    --ticket-qty-btn-hover: rgba(0,0,0,0.12);
    --ticket-sep: var(--alma-border);
    --ticket-label-text: var(--alma-text-sub);
    --ticket-total-text: #047857;
    --ticket-discount-input-bg: var(--alma-bg-input);
    --ticket-discount-input-border: var(--alma-border-2);
    --ticket-empty-text: var(--alma-text-muted);
    --pos-error-bg: var(--attn-note-error-bg);
    --pos-error-border: var(--attn-note-error-border);
    --pos-error-text: var(--attn-note-error-text);
    --pos-btn-primary-bg: linear-gradient(135deg, #16a34a, var(--alma-accent));
    --pos-btn-cancel-border: rgba(220,38,38,0.25);
    --pos-btn-cancel-text: #b91c1c;
    --pos-btn-cancel-hover: rgba(220,38,38,0.06);
    --pos-btn-new-bg: linear-gradient(135deg, #16a34a, var(--alma-accent));
}

/* ─────────────────────────────────────────────────────────────
   CLASES — SalesList (historial)
   ───────────────────────────────────────────────────────────── */

/* Stats cards */
.sales-stat-card {
    background: var(--sales-stat-bg);
    border: 1px solid var(--sales-stat-border);
    border-radius: 10px;
    padding: 12px;
}

.sales-stat-label {
    font-size: 0.6875rem;
    color: var(--alma-text-muted);
    margin-bottom: 4px;
}

.sales-stat-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sales-stat-total);
}

.sales-stat-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sales-stat-count);
}

.sales-stat-avg {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sales-stat-avg);
}

/* Historial panel */
.sales-panel {
    background: var(--sales-panel-bg);
    border: 1px solid var(--sales-panel-border);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.sales-panel-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--sales-panel-border);
}

/* Tabla */
.sales-table {
    width: 100%;
}

.sales-table-head th {
    padding: 8px 16px;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--alma-text-muted);
    border-bottom: 1px solid var(--sales-table-divider);
}

.sales-table-body tr {
    border-bottom: 1px solid var(--sales-table-divider);
}

    .sales-table-body tr:last-child {
        border-bottom: none;
    }

    .sales-table-body tr:hover {
        background: var(--sales-row-hover);
    }

.sales-table-body td {
    padding: 10px 16px;
}

.sales-sale-number {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--sales-number-text);
}

.sales-amount {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sales-amount-text);
}

.sales-meta {
    font-size: 0.75rem;
    color: var(--sales-meta-text);
}

/* Sale status badges */
.sale-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.sale-badge-paid {
    background: var(--badge-paid-bg);
    color: var(--badge-paid-text);
    border-color: var(--badge-paid-border);
}

.sale-badge-pending {
    background: var(--badge-pending-bg);
    color: var(--badge-pending-text);
    border-color: var(--badge-pending-border);
}

.sale-badge-partial {
    background: var(--badge-partial-bg);
    color: var(--badge-partial-text);
    border-color: var(--badge-partial-border);
}

.sale-badge-cancelled {
    background: var(--badge-cancelled-sale-bg);
    color: var(--badge-cancelled-sale-text);
    border-color: var(--badge-cancelled-sale-border);
}

/* New sale button */
.pos-btn-new {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--pos-btn-new-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .pos-btn-new:hover {
        filter: brightness(1.10);
    }

/* ─────────────────────────────────────────────────────────────
   CLASES — SalePOS (punto de venta)
   ───────────────────────────────────────────────────────────── */

/* Panel izquierdo (búsqueda) */
.pos-left {
    background: var(--pos-left-bg);
    border: 1px solid var(--pos-left-border);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(8px);
}

/* Panel derecho (ticket) */
.pos-ticket {
    background: var(--pos-ticket-bg);
    border: 1px solid var(--pos-ticket-border);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.pos-ticket-head {
    padding: 10px 16px;
    border-bottom: 1px solid var(--pos-ticket-head-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-ticket-label {
    font-size: 0.75rem;
    color: var(--sales-number-text);
    font-family: monospace;
}

.pos-ticket-body {
    padding: 16px;
}

/* Inputs del POS */
.pos-input {
    width: 100%;
    padding: 7px 10px;
    background: var(--pos-input-bg);
    border: 1px solid var(--pos-input-border);
    border-radius: 8px;
    color: var(--pos-input-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

    .pos-input:focus {
        border-color: var(--pos-input-focus);
    }

    .pos-input::placeholder {
        color: var(--pos-input-placeholder);
    }

/* Search input */
.pos-search-wrap {
    position: relative;
}

.pos-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--pos-search-icon);
    pointer-events: none;
}

.pos-search-input {
    padding-left: 34px;
}

/* Resultados de búsqueda */
.pos-result-btn {
    width: 100%;
    padding: 10px 12px;
    background: var(--pos-result-bg);
    border: 1px solid var(--pos-result-border);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .pos-result-btn:hover {
        background: var(--pos-result-hover-bg);
        border-color: var(--pos-result-hover-border);
    }

.pos-result-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pos-result-name);
}

.pos-result-btn:hover .pos-result-name {
    color: var(--pos-result-name-hover);
}

.pos-result-meta {
    font-size: 0.75rem;
    color: var(--pos-result-meta);
}

.pos-result-stock-warn {
    font-size: 0.75rem;
    color: var(--pos-stock-warn);
}

.pos-result-price {
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--pos-result-price-bg);
    color: var(--pos-result-price-text);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Ticket info header (fecha, cliente) */
.pos-ticket-info {
    font-size: 0.75rem;
    color: var(--ticket-meta-text);
}

.pos-ticket-info-label {
    color: var(--alma-text-muted);
}

.pos-ticket-info-value {
    color: var(--alma-text-sub);
}

/* Ticket items */
.ticket-item {
    padding: 10px;
    background: var(--ticket-item-bg);
    border-radius: 8px;
}

.ticket-item-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--alma-text);
    flex: 1;
}

.ticket-item-price {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ticket-price-text);
}

.ticket-item-meta {
    font-size: 0.75rem;
    color: var(--ticket-meta-text);
}

.ticket-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ticket-delete-text);
    padding: 2px;
    transition: color 0.12s ease;
}

    .ticket-delete-btn:hover {
        color: var(--ticket-delete-hover);
    }

.ticket-qty-btn {
    width: 20px;
    height: 20px;
    background: var(--ticket-qty-btn-bg);
    border: none;
    border-radius: 4px;
    color: var(--alma-text);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s ease;
}

    .ticket-qty-btn:hover {
        background: var(--ticket-qty-btn-hover);
    }

.ticket-qty-num {
    font-size: 0.75rem;
    color: var(--alma-text);
    width: 20px;
    text-align: center;
}

/* Totales */
.ticket-sep {
    border-top: 1px solid var(--ticket-sep);
}

.ticket-label {
    font-size: 0.75rem;
    color: var(--ticket-label-text);
}

.ticket-total-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--alma-text);
}

.ticket-total-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ticket-total-text);
}

/* Descuento input */
.ticket-discount-input {
    width: 48px;
    padding: 3px 6px;
    background: var(--ticket-discount-input-bg);
    border: 1px solid var(--ticket-discount-input-border);
    border-radius: 6px;
    color: var(--alma-text);
    font-size: 0.75rem;
    text-align: center;
    outline: none;
}

    .ticket-discount-input:focus {
        border-color: var(--pos-input-focus);
    }

/* Empty state del ticket */
.ticket-empty {
    text-align: center;
    padding: 32px 0;
}

.ticket-empty-text {
    font-size: 0.75rem;
    color: var(--ticket-empty-text);
}

/* Error del POS */
.pos-error {
    padding: 8px 12px;
    background: var(--pos-error-bg);
    border: 1px solid var(--pos-error-border);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--pos-error-text);
}

/* Botones del POS */
.pos-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--pos-btn-primary-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .pos-btn-primary:hover {
        filter: brightness(1.10);
    }

    .pos-btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.pos-btn-cancel {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--pos-btn-cancel-border);
    color: var(--pos-btn-cancel-text);
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease;
}

    .pos-btn-cancel:hover {
        background: var(--pos-btn-cancel-hover);
    }

    .pos-btn-cancel:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ═══════════════════════════════════════════════════════════════
   PRODUCTS / INVENTORY MODULE
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Stats del panel filtros */
    --prod-stat-found: var(--alma-accent-light);
    --prod-stat-active: #60a5fa;
    --prod-stat-ok: #4ade80;
    --prod-stat-low: #fbbf24;
    --prod-stat-out: #f87171;
    /* Cards de producto */
    --prod-card-bg: rgba(255,255,255,0.04);
    --prod-card-border: var(--alma-border);
    --prod-card-hover: var(--alma-accent-border);
    --prod-card-footer-bg: rgba(255,255,255,0.04);
    --prod-card-sep: var(--alma-border);
    /* Type badges */
    --prod-type-product-bg: rgba(37,99,235,0.12);
    --prod-type-product-text: #60a5fa;
    --prod-type-service-bg: var(--alma-accent-soft);
    --prod-type-service-text: var(--alma-accent-light);
    /* Status text en card */
    --prod-active-text: #4ade80;
    --prod-inactive-text: #f87171;
    /* Stock colors (semánticos) */
    --prod-stock-ok-text: #4ade80;
    --prod-stock-low-text: #fbbf24;
    --prod-stock-out-text: #f87171;
    /* Card action buttons */
    --prod-btn-stock-bg: rgba(37,99,235,0.12);
    --prod-btn-stock-hover: rgba(37,99,235,0.22);
    --prod-btn-stock-text: #60a5fa;
    --prod-btn-edit-bg: var(--alma-accent-soft);
    --prod-btn-edit-hover: rgba(29,184,138,0.18);
    --prod-btn-edit-text: var(--alma-accent);
    --prod-btn-deact-bg: rgba(202,138,4,0.12);
    --prod-btn-deact-hover: rgba(202,138,4,0.22);
    --prod-btn-deact-text: #fbbf24;
    --prod-btn-act-bg: rgba(5,150,105,0.12);
    --prod-btn-act-hover: rgba(5,150,105,0.22);
    --prod-btn-act-text: #4ade80;
    /* Inputs del módulo */
    --prod-input-bg: rgba(255,255,255,0.06);
    --prod-input-border: var(--alma-border-2);
    --prod-input-focus: var(--alma-accent-border);
    --prod-input-text: var(--alma-text);
    --prod-input-placeholder: var(--alma-text-muted);
    /* Stock modal — bloque de inventario */
    --prod-stock-block-bg: rgba(37,99,235,0.07);
    --prod-stock-block-border: rgba(37,99,235,0.18);
    --prod-stock-block-title: #60a5fa;
    /* Stock modal — operación add/subtract */
    --prod-op-idle-bg: rgba(255,255,255,0.04);
    --prod-op-idle-border: var(--alma-border-2);
    --prod-op-idle-text: var(--alma-text-sub);
    --prod-op-add-bg: rgba(5,150,105,0.80);
    --prod-op-add-border: #16a34a;
    --prod-op-add-text: #ffffff;
    --prod-op-sub-bg: rgba(220,38,38,0.80);
    --prod-op-sub-border: #dc2626;
    --prod-op-sub-text: #ffffff;
    /* Stock preview */
    --prod-preview-ok-bg: rgba(5,150,105,0.08);
    --prod-preview-ok-border: rgba(5,150,105,0.22);
    --prod-preview-ok-text: #4ade80;
    --prod-preview-low-bg: rgba(202,138,4,0.08);
    --prod-preview-low-border: rgba(202,138,4,0.22);
    --prod-preview-low-text: #fbbf24;
    --prod-preview-neg-bg: rgba(220,38,38,0.08);
    --prod-preview-neg-border: rgba(220,38,38,0.22);
    --prod-preview-neg-text: #f87171;
    /* Botón primary del módulo */
    --prod-btn-primary-bg: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2));
}

[data-mode="light"] {
    --prod-stat-found: var(--alma-accent);
    --prod-stat-active: #1d4ed8;
    --prod-stat-ok: #047857;
    --prod-stat-low: #b45309;
    --prod-stat-out: #b91c1c;
    --prod-card-bg: var(--alma-bg-card);
    --prod-card-border: var(--alma-border);
    --prod-card-hover: var(--alma-accent-border);
    --prod-card-footer-bg: rgba(0,0,0,0.03);
    --prod-card-sep: var(--alma-border);
    --prod-type-product-bg: rgba(37,99,235,0.08);
    --prod-type-product-text: #1d4ed8;
    --prod-type-service-bg: var(--alma-accent-soft);
    --prod-type-service-text: var(--alma-accent-2);
    --prod-active-text: #047857;
    --prod-inactive-text: #b91c1c;
    --prod-stock-ok-text: #047857;
    --prod-stock-low-text: #b45309;
    --prod-stock-out-text: #b91c1c;
    --prod-btn-stock-bg: rgba(37,99,235,0.07);
    --prod-btn-stock-hover: rgba(37,99,235,0.14);
    --prod-btn-stock-text: #1d4ed8;
    --prod-btn-edit-bg: var(--alma-accent-soft);
    --prod-btn-edit-hover: rgba(15,155,114,0.14);
    --prod-btn-edit-text: var(--alma-accent);
    --prod-btn-deact-bg: rgba(202,138,4,0.08);
    --prod-btn-deact-hover: rgba(202,138,4,0.15);
    --prod-btn-deact-text: #b45309;
    --prod-btn-act-bg: rgba(5,150,105,0.08);
    --prod-btn-act-hover: rgba(5,150,105,0.15);
    --prod-btn-act-text: #047857;
    --prod-input-bg: var(--alma-bg-input);
    --prod-input-border: var(--alma-border-2);
    --prod-input-focus: var(--alma-accent-border);
    --prod-input-text: var(--alma-text);
    --prod-input-placeholder: var(--alma-text-muted);
    --prod-stock-block-bg: rgba(37,99,235,0.05);
    --prod-stock-block-border: rgba(37,99,235,0.14);
    --prod-stock-block-title: #1d4ed8;
    --prod-op-idle-bg: var(--alma-bg-card);
    --prod-op-idle-border: var(--alma-border);
    --prod-op-idle-text: var(--alma-text-sub);
    --prod-op-add-bg: rgba(5,150,105,0.85);
    --prod-op-add-border: #059669;
    --prod-op-add-text: #fff;
    --prod-op-sub-bg: rgba(185,28,28,0.85);
    --prod-op-sub-border: #dc2626;
    --prod-op-sub-text: #fff;
    --prod-preview-ok-bg: rgba(5,150,105,0.06);
    --prod-preview-ok-border: rgba(5,150,105,0.18);
    --prod-preview-ok-text: #047857;
    --prod-preview-low-bg: rgba(202,138,4,0.06);
    --prod-preview-low-border: rgba(202,138,4,0.18);
    --prod-preview-low-text: #b45309;
    --prod-preview-neg-bg: rgba(220,38,38,0.06);
    --prod-preview-neg-border: rgba(220,38,38,0.18);
    --prod-preview-neg-text: #b91c1c;
    --prod-btn-primary-bg: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2));
}

/* ─────────────────────────────────────────────────────────────
   CLASES — ProductList
   ───────────────────────────────────────────────────────────── */

/* Stats rápidas */
.prod-stat-found {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--prod-stat-found);
}

.prod-stat-active {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--prod-stat-active);
}

.prod-stat-ok {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--prod-stat-ok);
}

.prod-stat-low {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--prod-stat-low);
}

.prod-stat-out {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--prod-stat-out);
}

.prod-stat-label {
    font-size: 0.6875rem;
    color: var(--alma-text-muted);
    margin-top: 2px;
}

/* Inputs */
.prod-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--prod-input-bg);
    border: 1px solid var(--prod-input-border);
    border-radius: 8px;
    color: var(--prod-input-text);
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

    .prod-input:focus {
        border-color: var(--prod-input-focus);
    }

    .prod-input::placeholder {
        color: var(--prod-input-placeholder);
    }

/* Producto card */
.prod-card {
    background: var(--prod-card-bg);
    border: 1px solid var(--prod-card-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .prod-card:hover {
        border-color: var(--prod-card-hover);
        box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    }

.prod-card-body {
    padding: 12px;
    flex: 1;
    border-bottom: 1px solid var(--prod-card-sep);
}

.prod-card-footer {
    padding: 8px;
    background: var(--prod-card-footer-bg);
    display: flex;
    gap: 6px;
}

/* Type badges */
.prod-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.prod-type-product {
    background: var(--prod-type-product-bg);
    color: var(--prod-type-product-text);
}

.prod-type-service {
    background: var(--prod-type-service-bg);
    color: var(--prod-type-service-text);
}

/* Status text */
.prod-status-active {
    font-size: 0.75rem;
    color: var(--prod-active-text);
}

.prod-status-inactive {
    font-size: 0.75rem;
    color: var(--prod-inactive-text);
}

/* Stock text colors */
.prod-stock-ok {
    color: var(--prod-stock-ok-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.prod-stock-low {
    color: var(--prod-stock-low-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.prod-stock-out {
    color: var(--prod-stock-out-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.prod-stock-warn-low {
    font-size: 0.75rem;
    color: var(--prod-stock-low-text);
}

.prod-stock-warn-out {
    font-size: 0.75rem;
    color: var(--prod-stock-out-text);
}

/* Card action buttons */
.prod-card-btn {
    flex: 1;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.12s ease;
}

.prod-btn-stock {
    background: var(--prod-btn-stock-bg);
    color: var(--prod-btn-stock-text);
}

    .prod-btn-stock:hover {
        background: var(--prod-btn-stock-hover);
    }

.prod-btn-edit {
    background: var(--prod-btn-edit-bg);
    color: var(--prod-btn-edit-text);
}

    .prod-btn-edit:hover {
        background: var(--prod-btn-edit-hover);
    }

.prod-btn-deact {
    background: var(--prod-btn-deact-bg);
    color: var(--prod-btn-deact-text);
}

    .prod-btn-deact:hover {
        background: var(--prod-btn-deact-hover);
    }

.prod-btn-act {
    background: var(--prod-btn-act-bg);
    color: var(--prod-btn-act-text);
}

    .prod-btn-act:hover {
        background: var(--prod-btn-act-hover);
    }

/* Primary button */
.prod-btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--prod-btn-primary-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .prod-btn-primary:hover {
        filter: brightness(1.10);
    }

    .prod-btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ─────────────────────────────────────────────────────────────
   CLASES — ProductForm
   ───────────────────────────────────────────────────────────── */

/* Stock block (inventario) */
.prod-stock-block {
    padding: 12px;
    background: var(--prod-stock-block-bg);
    border: 1px solid var(--prod-stock-block-border);
    border-radius: 10px;
}

.prod-stock-block-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--prod-stock-block-title);
    margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────
   CLASES — StockAdjustModal
   ───────────────────────────────────────────────────────────── */

/* Operación Agregar / Quitar */
.stock-op-btn {
    padding: 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--prod-op-idle-border);
    background: var(--prod-op-idle-bg);
    color: var(--prod-op-idle-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .stock-op-btn:not(.active):hover {
        border-color: var(--alma-accent-border);
        color: var(--alma-accent);
    }

.stock-op-add.active {
    background: var(--prod-op-add-bg);
    border-color: var(--prod-op-add-border);
    color: var(--prod-op-add-text);
}

.stock-op-sub.active {
    background: var(--prod-op-sub-bg);
    border-color: var(--prod-op-sub-border);
    color: var(--prod-op-sub-text);
}

/* Preview resultado */
.stock-preview {
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid transparent;
}

.stock-preview-ok {
    background: var(--prod-preview-ok-bg);
    border-color: var(--prod-preview-ok-border);
}

.stock-preview-low {
    background: var(--prod-preview-low-bg);
    border-color: var(--prod-preview-low-border);
}

.stock-preview-neg {
    background: var(--prod-preview-neg-bg);
    border-color: var(--prod-preview-neg-border);
}

.stock-preview-label {
    font-size: 0.75rem;
    color: var(--alma-text-muted);
    margin-bottom: 2px;
}

.stock-preview-val-ok {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--prod-preview-ok-text);
}

.stock-preview-val-low {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--prod-preview-low-text);
}

.stock-preview-val-neg {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--prod-preview-neg-text);
}

.stock-preview-warn {
    font-size: 0.75rem;
    margin-top: 4px;
}

.stock-preview-warn-low {
    color: var(--prod-preview-low-text);
}

.stock-preview-warn-neg {
    color: var(--prod-preview-neg-text);
}

/* ═══════════════════════════════════════════════════════════════
   SEARCHABLE SELECT COMPONENT
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Trigger */
    --ss-trigger-bg: rgba(255,255,255,0.06);
    --ss-trigger-border: var(--alma-border-2);
    --ss-trigger-hover-border: var(--alma-border-2);
    --ss-trigger-open-border: var(--alma-accent);
    --ss-trigger-open-ring: var(--alma-accent-border);
    --ss-trigger-text: var(--alma-text);
    --ss-trigger-placeholder: var(--alma-text-muted);
    --ss-trigger-icon: var(--alma-text-muted);
    /* Dropdown */
    --ss-dropdown-bg: var(--alma-bg-2);
    --ss-dropdown-border: var(--alma-border-2);
    --ss-dropdown-shadow: rgba(0,0,0,0.45);
    /* Search box dentro del dropdown */
    --ss-search-bg: rgba(255,255,255,0.06);
    --ss-search-border: var(--alma-border-2);
    --ss-search-focus: var(--alma-accent-border);
    --ss-search-text: var(--alma-text);
    --ss-search-placeholder: var(--alma-text-muted);
    --ss-search-icon: var(--alma-text-muted);
    --ss-search-sep: var(--alma-border);
    /* Items */
    --ss-item-text: var(--alma-text-sub);
    --ss-item-hover-bg: var(--alma-bg-hover);
    --ss-item-hover-text: var(--alma-accent);
    --ss-item-selected-bg: var(--alma-accent-soft);
    --ss-item-selected-text: var(--alma-accent-light);
    --ss-item-check-color: var(--alma-accent);
    --ss-item-empty-text: var(--alma-text-muted);
    --ss-item-placeholder-text: var(--alma-text-muted);
}

[data-mode="light"] {
    --ss-trigger-bg: var(--alma-bg-input);
    --ss-trigger-border: var(--alma-border-2);
    --ss-trigger-hover-border: var(--alma-border-2);
    --ss-trigger-open-border: var(--alma-accent);
    --ss-trigger-open-ring: var(--alma-accent-border);
    --ss-trigger-text: var(--alma-text);
    --ss-trigger-placeholder: var(--alma-text-muted);
    --ss-trigger-icon: var(--alma-text-muted);
    --ss-dropdown-bg: #ffffff;
    --ss-dropdown-border: var(--alma-border-2);
    --ss-dropdown-shadow: rgba(0,0,0,0.12);
    --ss-search-bg: var(--alma-bg);
    --ss-search-border: var(--alma-border-2);
    --ss-search-focus: var(--alma-accent-border);
    --ss-search-text: var(--alma-text);
    --ss-search-placeholder: var(--alma-text-muted);
    --ss-search-icon: var(--alma-text-muted);
    --ss-search-sep: var(--alma-border);
    --ss-item-text: var(--alma-text-sub);
    --ss-item-hover-bg: var(--alma-bg-hover);
    --ss-item-hover-text: var(--alma-accent);
    --ss-item-selected-bg: var(--alma-accent-soft);
    --ss-item-selected-text: var(--alma-accent-2);
    --ss-item-check-color: var(--alma-accent);
    --ss-item-empty-text: var(--alma-text-muted);
    --ss-item-placeholder-text: var(--alma-text-muted);
}

/* ── Trigger ──────────────────────────────────────────────── */
.ss-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--ss-trigger-bg);
    border: 1px solid var(--ss-trigger-border);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

    .ss-trigger:hover:not(:disabled) {
        border-color: var(--ss-trigger-hover-border);
    }

    .ss-trigger.open {
        border-color: var(--ss-trigger-open-border);
        box-shadow: 0 0 0 3px var(--ss-trigger-open-ring);
    }

    .ss-trigger:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ss-trigger-text {
    color: var(--ss-trigger-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-trigger-placeholder {
    color: var(--ss-trigger-placeholder);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-trigger-icon {
    color: var(--ss-trigger-icon);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

    .ss-trigger-icon.open {
        transform: rotate(180deg);
    }

/* ── Dropdown ─────────────────────────────────────────────── */
.ss-dropdown {
    position: absolute;
    z-index: 50;
    width: 100%;
    min-width: 100%;
    margin-top: 4px;
    background: var(--ss-dropdown-bg);
    border: 1px solid var(--ss-dropdown-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px var(--ss-dropdown-shadow);
    overflow: hidden;
}

/* ── Search box ───────────────────────────────────────────── */
.ss-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--ss-search-sep);
}

.ss-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--ss-search-bg);
    border: 1px solid var(--ss-search-border);
    transition: border-color 0.15s ease;
}

    .ss-search-box:focus-within {
        border-color: var(--ss-search-focus);
    }

.ss-search-icon {
    color: var(--ss-search-icon);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ss-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.75rem;
    color: var(--ss-search-text);
}

    .ss-search-input::placeholder {
        color: var(--ss-search-placeholder);
    }

.ss-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
    color: var(--ss-search-icon);
    transition: color 0.12s ease;
}

    .ss-search-clear:hover {
        color: var(--ss-item-text);
    }

/* ── Lista de items ───────────────────────────────────────── */
.ss-list {
    overflow-y: auto;
    max-height: 220px;
    scrollbar-width: none;
}

    .ss-list::-webkit-scrollbar {
        display: none;
    }

.ss-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    font-size: 0.8125rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ss-item-text);
    transition: background 0.12s ease, color 0.12s ease;
}

    .ss-item:hover {
        background: var(--ss-item-hover-bg);
        color: var(--ss-item-hover-text);
    }

    .ss-item.selected {
        background: var(--ss-item-selected-bg);
        color: var(--ss-item-selected-text);
    }

.ss-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-item-check {
    color: var(--ss-item-check-color);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ss-item-placeholder {
    color: var(--ss-item-placeholder-text);
}

.ss-item-empty {
    padding: 14px 12px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--ss-item-empty-text);
}

/* ═══════════════════════════════════════════════════════════════
   EXPENSES MODULE
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Stats */
    --exp-stat-total: #f87171;
    --exp-stat-fixed: #fbbf24;
    --exp-stat-count: #60a5fa;
    --exp-stat-avg: var(--alma-accent-light);
    /* Tabla */
    --exp-panel-bg: rgba(255,255,255,0.03);
    --exp-panel-border: var(--alma-border);
    --exp-table-div: var(--alma-border);
    --exp-row-hover: rgba(255,255,255,0.03);
    --exp-amount-text: #f87171;
    --exp-meta-text: var(--alma-text-sub);
    --exp-recur-text: var(--alma-text-muted);
    /* Action buttons en fila */
    --exp-edit-hover-text: #fbbf24;
    --exp-del-hover-text: #f87171;
    --exp-icon-btn-hover-bg: rgba(255,255,255,0.07);
    /* Tfoot total */
    --exp-total-text: #f87171;
    /* Sidebar categorías */
    --exp-bar-track: rgba(255,255,255,0.07);
    /* Category badge colors */
    --cat-alquiler-bg: rgba(37,99,235,0.12);
    --cat-alquiler-text: #60a5fa;
    --cat-servicios-bg: rgba(8,145,178,0.12);
    --cat-servicios-text: #22d3ee;
    --cat-sueldos-bg: rgba(5,150,105,0.12);
    --cat-sueldos-text: #4ade80;
    --cat-insumos-bg: rgba(202,138,4,0.12);
    --cat-insumos-text: #fbbf24;
    --cat-marketing-bg: rgba(220,38,38,0.12);
    --cat-marketing-text: #f87171;
    --cat-mant-bg: rgba(71,85,105,0.15);
    --cat-mant-text: var(--alma-text-sub);
    --cat-impuestos-bg: var(--alma-accent-soft);
    --cat-impuestos-text: var(--alma-accent-light);
    --cat-otros-bg: rgba(71,85,105,0.12);
    --cat-otros-text: var(--alma-text-muted);
    /* Category bar colors (barras del sidebar) */
    --bar-alquiler: linear-gradient(90deg,#3b82f6,#60a5fa);
    --bar-servicios: linear-gradient(90deg,#0891b2,#22d3ee);
    --bar-sueldos: linear-gradient(90deg,#16a34a,#4ade80);
    --bar-insumos: linear-gradient(90deg,#d97706,#fbbf24);
    --bar-marketing: linear-gradient(90deg,#dc2626,#f87171);
    --bar-mant: linear-gradient(90deg,#475569,#94a3b8);
    --bar-impuestos: linear-gradient(90deg,var(--alma-accent-2),var(--alma-accent));
    --bar-otros: linear-gradient(90deg,#475569,#64748b);
    /* Modal */
    --exp-modal-bg: var(--alma-bg-2);
    --exp-modal-border: var(--alma-border);
    /* Botón primario gastos */
    --exp-btn-primary-bg: linear-gradient(135deg,#dc2626,#ea580c);
    /* Input */
    --exp-input-bg: rgba(255,255,255,0.06);
    --exp-input-border: var(--alma-border-2);
    --exp-input-focus: rgba(239,68,68,0.40);
    --exp-input-text: var(--alma-text);
    --exp-input-placeholder: var(--alma-text-muted);
}

[data-mode="light"] {
    --exp-stat-total: #b91c1c;
    --exp-stat-fixed: #b45309;
    --exp-stat-count: #1d4ed8;
    --exp-stat-avg: var(--alma-accent);
    --exp-panel-bg: var(--alma-bg-card);
    --exp-panel-border: var(--alma-border);
    --exp-table-div: var(--alma-border);
    --exp-row-hover: rgba(0,0,0,0.025);
    --exp-amount-text: #b91c1c;
    --exp-meta-text: var(--alma-text-sub);
    --exp-recur-text: var(--alma-text-muted);
    --exp-edit-hover-text: #b45309;
    --exp-del-hover-text: #b91c1c;
    --exp-icon-btn-hover-bg: rgba(0,0,0,0.06);
    --exp-total-text: #b91c1c;
    --exp-bar-track: rgba(0,0,0,0.08);
    --cat-alquiler-bg: rgba(37,99,235,0.08);
    --cat-alquiler-text: #1d4ed8;
    --cat-servicios-bg: rgba(8,145,178,0.08);
    --cat-servicios-text: #0e7490;
    --cat-sueldos-bg: rgba(5,150,105,0.08);
    --cat-sueldos-text: #047857;
    --cat-insumos-bg: rgba(202,138,4,0.08);
    --cat-insumos-text: #b45309;
    --cat-marketing-bg: rgba(220,38,38,0.07);
    --cat-marketing-text: #b91c1c;
    --cat-mant-bg: rgba(71,85,105,0.08);
    --cat-mant-text: var(--alma-text-sub);
    --cat-impuestos-bg: var(--alma-accent-soft);
    --cat-impuestos-text: var(--alma-accent-2);
    --cat-otros-bg: rgba(71,85,105,0.07);
    --cat-otros-text: var(--alma-text-muted);
    --bar-alquiler: linear-gradient(90deg,#2563eb,#3b82f6);
    --bar-servicios: linear-gradient(90deg,#0369a1,#0891b2);
    --bar-sueldos: linear-gradient(90deg,#15803d,#16a34a);
    --bar-insumos: linear-gradient(90deg,#b45309,#d97706);
    --bar-marketing: linear-gradient(90deg,#b91c1c,#dc2626);
    --bar-mant: linear-gradient(90deg,#334155,#475569);
    --bar-impuestos: linear-gradient(90deg,var(--alma-accent-2),var(--alma-accent));
    --bar-otros: linear-gradient(90deg,#334155,#475569);
    --exp-modal-bg: #ffffff;
    --exp-modal-border: var(--alma-border);
    --exp-btn-primary-bg: linear-gradient(135deg,#dc2626,#ea580c);
    --exp-input-bg: var(--alma-bg-input);
    --exp-input-border: var(--alma-border-2);
    --exp-input-focus: rgba(220,38,38,0.25);
    --exp-input-text: var(--alma-text);
    --exp-input-placeholder: var(--alma-text-muted);
}

/* ─────────────────────────────────────────────────────────────
   CLASES
   ───────────────────────────────────────────────────────────── */

/* Stats */
.exp-stat-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--exp-stat-total);
}

.exp-stat-fixed {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--exp-stat-fixed);
}

.exp-stat-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--exp-stat-count);
}

.exp-stat-avg {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--exp-stat-avg);
}

/* Panel / tabla */
.exp-panel {
    background: var(--exp-panel-bg);
    border: 1px solid var(--exp-panel-border);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.exp-panel-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--exp-panel-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.exp-table {
    width: 100%;
}

    .exp-table thead th {
        padding: 8px 16px;
        text-align: left;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--alma-text-muted);
        border-bottom: 1px solid var(--exp-table-div);
    }

    .exp-table tbody tr {
        border-bottom: 1px solid var(--exp-table-div);
        transition: background 0.12s ease;
    }

        .exp-table tbody tr:last-child {
            border-bottom: none;
        }

        .exp-table tbody tr:hover {
            background: var(--exp-row-hover);
        }

    .exp-table td {
        padding: 10px 16px;
    }

    .exp-table tfoot tr {
        border-top: 1px solid var(--exp-panel-border);
    }

.exp-amount {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--exp-amount-text);
}

.exp-meta {
    font-size: 0.75rem;
    color: var(--exp-meta-text);
}

.exp-recur {
    font-size: 0.75rem;
    color: var(--exp-recur-text);
}

.exp-total-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--alma-text-muted);
    text-align: right;
}

.exp-total-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--exp-total-text);
}

/* Row action buttons */
.exp-icon-btn {
    padding: 4px;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
    color: var(--alma-text-muted);
}

    .exp-icon-btn:hover {
        background: var(--exp-icon-btn-hover-bg);
    }

.exp-icon-btn-edit:hover {
    color: var(--exp-edit-hover-text);
}

.exp-icon-btn-del:hover {
    color: var(--exp-del-hover-text);
}

/* Category badges */
.exp-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.exp-cat-alquiler {
    background: var(--cat-alquiler-bg);
    color: var(--cat-alquiler-text);
}

.exp-cat-servicios {
    background: var(--cat-servicios-bg);
    color: var(--cat-servicios-text);
}

.exp-cat-sueldos {
    background: var(--cat-sueldos-bg);
    color: var(--cat-sueldos-text);
}

.exp-cat-insumos {
    background: var(--cat-insumos-bg);
    color: var(--cat-insumos-text);
}

.exp-cat-marketing {
    background: var(--cat-marketing-bg);
    color: var(--cat-marketing-text);
}

.exp-cat-mant {
    background: var(--cat-mant-bg);
    color: var(--cat-mant-text);
}

.exp-cat-impuestos {
    background: var(--cat-impuestos-bg);
    color: var(--cat-impuestos-text);
}

.exp-cat-otros {
    background: var(--cat-otros-bg);
    color: var(--cat-otros-text);
}

/* Sidebar barras */
.exp-bar-track {
    background: var(--exp-bar-track);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}

.exp-bar-alquiler {
    background: var(--bar-alquiler);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.exp-bar-servicios {
    background: var(--bar-servicios);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.exp-bar-sueldos {
    background: var(--bar-sueldos);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.exp-bar-insumos {
    background: var(--bar-insumos);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.exp-bar-marketing {
    background: var(--bar-marketing);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.exp-bar-mant {
    background: var(--bar-mant);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.exp-bar-impuestos {
    background: var(--bar-impuestos);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.exp-bar-otros {
    background: var(--bar-otros);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Form inputs */
.exp-input {
    width: 100%;
    padding: 7px 10px;
    background: var(--exp-input-bg);
    border: 1px solid var(--exp-input-border);
    border-radius: 8px;
    color: var(--exp-input-text);
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

    .exp-input:focus {
        border-color: var(--exp-input-focus);
        box-shadow: 0 0 0 3px var(--exp-input-focus);
    }

    .exp-input::placeholder {
        color: var(--exp-input-placeholder);
    }

/* Primary button */
.exp-btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--exp-btn-primary-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .exp-btn-primary:hover {
        filter: brightness(1.10);
    }

/* ═══════════════════════════════════════════════════════════════
   BILLING MODULE
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Stats */
    --bill-stat-total: #4ade80;
    --bill-stat-draft: #fbbf24;
    --bill-stat-tax: #60a5fa;
    --bill-stat-voided: #f87171;
    /* Alerta de límites */
    --bill-alert-bg: rgba(202,138,4,0.10);
    --bill-alert-border: rgba(202,138,4,0.30);
    --bill-alert-text: #fbbf24;
    --bill-alert-icon: #fbbf24;
    /* Barras de límite */
    --bill-bar-track: rgba(255,255,255,0.07);
    --bill-bar-ok: #22c55e;
    --bill-bar-warn: #f59e0b;
    --bill-bar-danger: #ef4444;
    /* Panel / tabla */
    --bill-panel-bg: rgba(255,255,255,0.03);
    --bill-panel-border: var(--alma-border);
    --bill-table-div: var(--alma-border);
    --bill-row-hover: rgba(255,255,255,0.03);
    --bill-row-selected: rgba(99,60,180,0.12);
    /* Badges estado */
    --badge-issued-bg: rgba(5,150,105,0.12);
    --badge-issued-text: #4ade80;
    --badge-issued-border: rgba(16,185,129,0.25);
    --badge-draft-bg: rgba(202,138,4,0.12);
    --badge-draft-text: #fbbf24;
    --badge-draft-border: rgba(234,179,8,0.25);
    --badge-voided-bg: rgba(220,38,38,0.12);
    --badge-voided-text: #f87171;
    --badge-voided-border: rgba(239,68,68,0.25);
    --badge-creditnote-bg: rgba(234,88,12,0.12);
    --badge-creditnote-text: #fb923c;
    --badge-creditnote-border: rgba(249,115,22,0.25);
    /* Badges tipo */
    --badge-fa-bg: rgba(37,99,235,0.12);
    --badge-fa-text: #60a5fa;
    --badge-fb-bg: var(--alma-accent-soft);
    --badge-fb-text: var(--alma-accent-light);
    --badge-fc-bg: rgba(13,148,136,0.12);
    --badge-fc-text: #2dd4bf;
    --badge-tkt-bg: rgba(71,85,105,0.15);
    --badge-tkt-text: var(--alma-text-sub);
    --badge-nc-bg: rgba(234,88,12,0.12);
    --badge-nc-text: #fb923c;
    /* CAE block */
    --bill-cae-bg: rgba(13,148,136,0.08);
    --bill-cae-border: rgba(13,148,136,0.22);
    --bill-cae-text: #2dd4bf;
    /* Batch selection bar */
    --bill-batch-bg: rgba(99,60,180,0.12);
    --bill-batch-border: rgba(139,92,246,0.30);
    --bill-batch-text: var(--alma-accent-light);
    /* Action icon buttons en tabla */
    --bill-icon-hover-bg: rgba(255,255,255,0.07);
    --bill-icon-view-hover: #60a5fa;
    --bill-icon-issue-hover: #4ade80;
    --bill-icon-credit-hover: #fbbf24;
    /* Invoice number mono */
    --bill-num-text: var(--alma-accent-light);
    /* ARCA badge */
    --bill-arca-on-bg: rgba(13,148,136,0.10);
    --bill-arca-on-border: rgba(13,148,136,0.28);
    --bill-arca-on-text: #2dd4bf;
    --bill-arca-on-badge-bg: rgba(13,148,136,0.15);
    --bill-arca-on-badge-text: #2dd4bf;
    --bill-arca-off-bg: rgba(255,255,255,0.03);
    --bill-arca-off-border: var(--alma-border);
    --bill-arca-off-text: var(--alma-text-sub);
    /* FiscalConfig — secciones */
    --bill-section-bg: rgba(255,255,255,0.03);
    --bill-section-border: var(--alma-border);
    /* Tipos comprobante toggle (FiscalConfig) */
    --bill-type-on-bg: rgba(37,99,235,0.10);
    --bill-type-on-border: rgba(37,99,235,0.35);
    --bill-type-on-text: #60a5fa;
    --bill-type-off-bg: rgba(255,255,255,0.04);
    --bill-type-off-border: var(--alma-border-2);
    --bill-type-off-text: var(--alma-text-sub);
    --bill-type-check-on: #3b82f6;
    --bill-type-check-off: var(--alma-border-2);
    /* NewInvoice — selector de tipo de comprobante */
    --bill-inv-type-on-bg: var(--alma-accent-soft);
    --bill-inv-type-on-border: var(--alma-accent-border);
    --bill-inv-type-on-text: var(--alma-accent-light);
    --bill-inv-type-off-bg: rgba(255,255,255,0.04);
    --bill-inv-type-off-border: var(--alma-border-2);
    --bill-inv-type-off-text: var(--alma-text-sub);
    /* Pending items */
    --bill-item-on-bg: rgba(99,60,180,0.10);
    --bill-item-on-border: rgba(139,92,246,0.30);
    --bill-item-on-check: var(--alma-accent);
    --bill-item-off-bg: rgba(255,255,255,0.04);
    --bill-item-off-border: var(--alma-border-2);
    /* Resumen emisor block */
    --bill-emitter-bg: rgba(255,255,255,0.05);
    /* Total block */
    --bill-total-text: #4ade80;
    /* Warning sin config */
    --bill-noconfig-bg: rgba(202,138,4,0.08);
    --bill-noconfig-border: rgba(202,138,4,0.25);
    --bill-noconfig-text: #fbbf24;
    /* Input del módulo */
    --bill-input-bg: rgba(255,255,255,0.06);
    --bill-input-border: var(--alma-border-2);
    --bill-input-focus: var(--alma-accent-border);
    --bill-input-text: var(--alma-text);
    --bill-input-placeholder: var(--alma-text-muted);
    --bill-input-error-border: rgba(239,68,68,0.50);
    /* Btn primary */
    --bill-btn-primary-bg: linear-gradient(135deg, var(--alma-accent), var(--alma-accent-2));
    /* Btn secondary (config, back) */
    --bill-btn-sec-bg: rgba(255,255,255,0.06);
    --bill-btn-sec-hover: rgba(255,255,255,0.10);
    --bill-btn-sec-text: var(--alma-text-sub);
    /* Credit note modal */
    --bill-credit-btn-bg: rgba(202,138,4,0.85);
    --bill-credit-btn-hover: rgba(202,138,4,1);
}

[data-mode="light"] {
    --bill-stat-total: #047857;
    --bill-stat-draft: #b45309;
    --bill-stat-tax: #1d4ed8;
    --bill-stat-voided: #b91c1c;
    --bill-alert-bg: rgba(202,138,4,0.07);
    --bill-alert-border: rgba(202,138,4,0.22);
    --bill-alert-text: #b45309;
    --bill-alert-icon: #b45309;
    --bill-bar-track: rgba(0,0,0,0.08);
    --bill-bar-ok: #16a34a;
    --bill-bar-warn: #d97706;
    --bill-bar-danger: #dc2626;
    --bill-panel-bg: var(--alma-bg-card);
    --bill-panel-border: var(--alma-border);
    --bill-table-div: var(--alma-border);
    --bill-row-hover: rgba(0,0,0,0.025);
    --bill-row-selected: rgba(99,60,180,0.06);
    --badge-issued-bg: rgba(5,150,105,0.07);
    --badge-issued-text: #047857;
    --badge-issued-border: rgba(5,150,105,0.18);
    --badge-draft-bg: rgba(202,138,4,0.07);
    --badge-draft-text: #b45309;
    --badge-draft-border: rgba(202,138,4,0.18);
    --badge-voided-bg: rgba(220,38,38,0.07);
    --badge-voided-text: #b91c1c;
    --badge-voided-border: rgba(220,38,38,0.18);
    --badge-creditnote-bg: rgba(234,88,12,0.07);
    --badge-creditnote-text: #c2410c;
    --badge-creditnote-border: rgba(234,88,12,0.18);
    --badge-fa-bg: rgba(37,99,235,0.08);
    --badge-fa-text: #1d4ed8;
    --badge-fb-bg: var(--alma-accent-soft);
    --badge-fb-text: var(--alma-accent-2);
    --badge-fc-bg: rgba(13,148,136,0.08);
    --badge-fc-text: #0f766e;
    --badge-tkt-bg: rgba(71,85,105,0.08);
    --badge-tkt-text: var(--alma-text-sub);
    --badge-nc-bg: rgba(234,88,12,0.08);
    --badge-nc-text: #c2410c;
    --bill-cae-bg: rgba(13,148,136,0.06);
    --bill-cae-border: rgba(13,148,136,0.18);
    --bill-cae-text: #0f766e;
    --bill-batch-bg: rgba(99,60,180,0.07);
    --bill-batch-border: rgba(139,92,246,0.20);
    --bill-batch-text: var(--alma-accent);
    --bill-icon-hover-bg: rgba(0,0,0,0.05);
    --bill-icon-view-hover: #1d4ed8;
    --bill-icon-issue-hover: #047857;
    --bill-icon-credit-hover: #b45309;
    --bill-num-text: var(--alma-accent-2);
    --bill-arca-on-bg: rgba(13,148,136,0.07);
    --bill-arca-on-border: rgba(13,148,136,0.20);
    --bill-arca-on-text: #0f766e;
    --bill-arca-on-badge-bg: rgba(13,148,136,0.10);
    --bill-arca-on-badge-text: #0f766e;
    --bill-arca-off-bg: var(--alma-bg-card);
    --bill-arca-off-border: var(--alma-border);
    --bill-arca-off-text: var(--alma-text-sub);
    --bill-section-bg: var(--alma-bg-card);
    --bill-section-border: var(--alma-border);
    --bill-type-on-bg: rgba(37,99,235,0.07);
    --bill-type-on-border: rgba(37,99,235,0.25);
    --bill-type-on-text: #1d4ed8;
    --bill-type-off-bg: var(--alma-bg-card);
    --bill-type-off-border: var(--alma-border);
    --bill-type-off-text: var(--alma-text-sub);
    --bill-type-check-on: #2563eb;
    --bill-type-check-off: var(--alma-border);
    --bill-inv-type-on-bg: var(--alma-accent-soft);
    --bill-inv-type-on-border: var(--alma-accent-border);
    --bill-inv-type-on-text: var(--alma-accent-2);
    --bill-inv-type-off-bg: var(--alma-bg-card);
    --bill-inv-type-off-border: var(--alma-border);
    --bill-inv-type-off-text: var(--alma-text-sub);
    --bill-item-on-bg: rgba(99,60,180,0.07);
    --bill-item-on-border: rgba(139,92,246,0.22);
    --bill-item-on-check: var(--alma-accent);
    --bill-item-off-bg: var(--alma-bg-card);
    --bill-item-off-border: var(--alma-border);
    --bill-emitter-bg: rgba(0,0,0,0.04);
    --bill-total-text: #047857;
    --bill-noconfig-bg: rgba(202,138,4,0.06);
    --bill-noconfig-border: rgba(202,138,4,0.18);
    --bill-noconfig-text: #b45309;
    --bill-input-bg: var(--alma-bg-input);
    --bill-input-border: var(--alma-border-2);
    --bill-input-focus: var(--alma-accent-border);
    --bill-input-text: var(--alma-text);
    --bill-input-placeholder: var(--alma-text-muted);
    --bill-input-error-border: rgba(220,38,38,0.40);
    --bill-btn-primary-bg: linear-gradient(135deg,var(--alma-accent),var(--alma-accent-2));
    --bill-btn-sec-bg: rgba(0,0,0,0.05);
    --bill-btn-sec-hover: rgba(0,0,0,0.09);
    --bill-btn-sec-text: var(--alma-text-sub);
    --bill-credit-btn-bg: rgba(202,138,4,0.85);
    --bill-credit-btn-hover: rgba(202,138,4,1);
}

/* ── Stats ───────────────────────────────────────── */
.bill-stat-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bill-stat-total);
}

.bill-stat-draft {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bill-stat-draft);
}

.bill-stat-tax {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bill-stat-tax);
}

.bill-stat-voided {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bill-stat-voided);
}

/* ── Alerta límites ──────────────────────────────── */
.bill-alert {
    padding: 10px 14px;
    background: var(--bill-alert-bg);
    border: 1px solid var(--bill-alert-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bill-alert-text);
}

/* ── Barra de límite ─────────────────────────────── */
.bill-limit-track {
    background: var(--bill-bar-track);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.bill-bar-ok {
    background: var(--bill-bar-ok);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.bill-bar-warn {
    background: var(--bill-bar-warn);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.bill-bar-danger {
    background: var(--bill-bar-danger);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* ── Panel / tabla ───────────────────────────────── */
.bill-panel {
    background: var(--bill-panel-bg);
    border: 1px solid var(--bill-panel-border);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.bill-panel-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--bill-panel-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bill-table {
    width: 100%;
}

    .bill-table thead th {
        padding: 8px 12px;
        text-align: left;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--alma-text-muted);
        border-bottom: 1px solid var(--bill-table-div);
    }

    .bill-table tbody tr {
        border-bottom: 1px solid var(--bill-table-div);
        transition: background 0.12s ease;
    }

        .bill-table tbody tr:last-child {
            border-bottom: none;
        }

        .bill-table tbody tr:hover {
            background: var(--bill-row-hover);
        }

        .bill-table tbody tr.selected {
            background: var(--bill-row-selected);
        }

    .bill-table td {
        padding: 9px 12px;
    }

.bill-invoice-num {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--bill-num-text);
}

.bill-amount {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--bill-stat-total);
}

.bill-cae-num {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--bill-cae-text);
}

/* ── Badges estado ───────────────────────────────── */
.bill-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.bill-badge-issued {
    background: var(--badge-issued-bg);
    color: var(--badge-issued-text);
    border-color: var(--badge-issued-border);
}

.bill-badge-draft {
    background: var(--badge-draft-bg);
    color: var(--badge-draft-text);
    border-color: var(--badge-draft-border);
}

.bill-badge-voided {
    background: var(--badge-voided-bg);
    color: var(--badge-voided-text);
    border-color: var(--badge-voided-border);
}

.bill-badge-creditnote {
    background: var(--badge-creditnote-bg);
    color: var(--badge-creditnote-text);
    border-color: var(--badge-creditnote-border);
}

/* ── Badges tipo ─────────────────────────────────── */
.bill-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.bill-type-fa {
    background: var(--badge-fa-bg);
    color: var(--badge-fa-text);
}

.bill-type-fb {
    background: var(--badge-fb-bg);
    color: var(--badge-fb-text);
}

.bill-type-fc {
    background: var(--badge-fc-bg);
    color: var(--badge-fc-text);
}

.bill-type-tkt {
    background: var(--badge-tkt-bg);
    color: var(--badge-tkt-text);
}

.bill-type-nc {
    background: var(--badge-nc-bg);
    color: var(--badge-nc-text);
}

/* ── CAE block ───────────────────────────────────── */
.bill-cae-block {
    padding: 10px 12px;
    background: var(--bill-cae-bg);
    border: 1px solid var(--bill-cae-border);
    border-radius: 8px;
}

/* ── Batch bar ───────────────────────────────────── */
.bill-batch-bar {
    padding: 10px 14px;
    background: var(--bill-batch-bg);
    border: 1px solid var(--bill-batch-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bill-batch-text {
    font-size: 0.875rem;
    color: var(--bill-batch-text);
}

/* ── Icon action buttons en tabla ────────────────── */
.bill-icon-btn {
    padding: 6px;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--alma-text-muted);
    transition: background 0.12s ease, color 0.12s ease;
}

    .bill-icon-btn:hover {
        background: var(--bill-icon-hover-bg);
    }

.bill-icon-btn-view:hover {
    color: var(--bill-icon-view-hover);
}

.bill-icon-btn-issue:hover {
    color: var(--bill-icon-issue-hover);
}

.bill-icon-btn-credit:hover {
    color: var(--bill-icon-credit-hover);
}

/* ── ARCA badge ──────────────────────────────────── */
.bill-arca-on {
    background: var(--bill-arca-on-bg);
    border: 1px solid var(--bill-arca-on-border);
}

.bill-arca-off {
    background: var(--bill-arca-off-bg);
    border: 1px solid var(--bill-arca-off-border);
}

.bill-arca-badge {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: var(--bill-arca-on-badge-bg);
    color: var(--bill-arca-on-badge-text);
}

/* ── FiscalConfig sections ───────────────────────── */
.bill-section {
    background: var(--bill-section-bg);
    border: 1px solid var(--bill-section-border);
    border-radius: 12px;
    padding: 20px;
}

/* Tipos comprobante toggle */
.bill-type-toggle {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .bill-type-toggle.on {
        background: var(--bill-type-on-bg);
        border-color: var(--bill-type-on-border);
        color: var(--bill-type-on-text);
    }

    .bill-type-toggle.off {
        background: var(--bill-type-off-bg);
        border-color: var(--bill-type-off-border);
        color: var(--bill-type-off-text);
    }

        .bill-type-toggle.off:hover {
            border-color: var(--bill-type-on-border);
            color: var(--bill-type-on-text);
        }

.bill-type-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .bill-type-check.on {
        background: var(--bill-type-check-on);
        border-color: var(--bill-type-check-on);
    }

    .bill-type-check.off {
        background: transparent;
        border-color: var(--bill-type-check-off);
    }

/* ── NewInvoice — selector tipo ──────────────────── */
.bill-inv-type-btn {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid;
    text-align: center;
    cursor: pointer;
    transition: all 0.12s ease;
}

    .bill-inv-type-btn.on {
        background: var(--bill-inv-type-on-bg);
        border-color: var(--bill-inv-type-on-border);
        color: var(--bill-inv-type-on-text);
    }

    .bill-inv-type-btn.off {
        background: var(--bill-inv-type-off-bg);
        border-color: var(--bill-inv-type-off-border);
        color: var(--bill-inv-type-off-text);
    }

        .bill-inv-type-btn.off:hover {
            border-color: var(--bill-inv-type-on-border);
        }

/* ── NewInvoice — pending items ──────────────────── */
.bill-pending-item {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .bill-pending-item.on {
        background: var(--bill-item-on-bg);
        border-color: var(--bill-item-on-border);
    }

    .bill-pending-item.off {
        background: var(--bill-item-off-bg);
        border-color: var(--bill-item-off-border);
    }

.bill-pending-check {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .bill-pending-check.on {
        background: var(--bill-item-on-check);
        border-color: var(--bill-item-on-check);
    }

    .bill-pending-check.off {
        background: transparent;
        border-color: var(--bill-type-check-off);
    }

/* ── Resumen emisor ──────────────────────────────── */
.bill-emitter-block {
    padding: 10px 12px;
    background: var(--bill-emitter-bg);
    border-radius: 8px;
}

/* ── Total block ─────────────────────────────────── */
.bill-total-val {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bill-total-text);
}

/* ── Sin config ──────────────────────────────────── */
.bill-noconfig {
    padding: 16px 20px;
    background: var(--bill-noconfig-bg);
    border: 1px solid var(--bill-noconfig-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.bill-noconfig-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bill-noconfig-text);
}

/* ── Input ───────────────────────────────────────── */
.bill-input {
    width: 100%;
    padding: 7px 10px;
    background: var(--bill-input-bg);
    border: 1px solid var(--bill-input-border);
    border-radius: 8px;
    color: var(--bill-input-text);
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

    .bill-input:focus {
        border-color: var(--bill-input-focus);
    }

    .bill-input::placeholder {
        color: var(--bill-input-placeholder);
    }

    .bill-input.error {
        border-color: var(--bill-input-error-border);
    }

.bill-input-prefix-wrap {
    position: relative;
}

.bill-input-prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--alma-text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

.bill-input-with-prefix {
    padding-left: 24px;
}

/* ── Botones ─────────────────────────────────────── */
.bill-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--bill-btn-primary-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .bill-btn-primary:hover {
        filter: brightness(1.10);
    }

    .bill-btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.bill-btn-secondary {
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 400;
    background: var(--bill-btn-sec-bg);
    color: var(--bill-btn-sec-text);
    border: none;
    cursor: pointer;
    transition: background 0.12s ease;
}

    .bill-btn-secondary:hover {
        background: var(--bill-btn-sec-hover);
    }

    .bill-btn-secondary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.bill-btn-credit {
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--bill-credit-btn-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.12s ease;
}

    .bill-btn-credit:hover {
        background: var(--bill-credit-btn-hover);
    }

    .bill-btn-credit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.bill-btn-issue {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(5,150,105,0.85);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.12s ease;
}

    .bill-btn-issue:hover {
        background: rgba(5,150,105,1);
    }

    .bill-btn-issue:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ═══════════════════════════════════════════════════════════════
   SERVICES MODULE
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Stats */
    --svc-stat-found: var(--alma-accent-light);
    --svc-stat-active: #4ade80;
    --svc-stat-inactive: #f87171;
    --svc-stat-avg: #60a5fa;
    /* Cards */
    --svc-card-bg: rgba(255,255,255,0.04);
    --svc-card-border: var(--alma-border);
    --svc-card-hover: var(--alma-accent-border);
    --svc-card-sep: var(--alma-border);
    --svc-card-footer-bg: rgba(255,255,255,0.04);
    /* Icono avatar */
    --svc-icon-bg: linear-gradient(135deg,var(--alma-accent),var(--alma-accent-2));
    /* Status en card */
    --svc-active-text: #4ade80;
    --svc-inactive-text: #f87171;
    /* Precio */
    --svc-price-text: var(--alma-accent-light);
    /* Botones de card */
    --svc-btn-edit-bg: var(--alma-accent-soft);
    --svc-btn-edit-hover: rgba(29,184,138,0.18);
    --svc-btn-edit-text: var(--alma-accent);
    --svc-btn-deact-bg: rgba(202,138,4,0.12);
    --svc-btn-deact-hover: rgba(202,138,4,0.22);
    --svc-btn-deact-text: #fbbf24;
    --svc-btn-act-bg: rgba(5,150,105,0.12);
    --svc-btn-act-hover: rgba(5,150,105,0.22);
    --svc-btn-act-text: #4ade80;
    /* Input */
    --svc-input-bg: rgba(255,255,255,0.06);
    --svc-input-border: var(--alma-border-2);
    --svc-input-focus: var(--alma-accent-border);
    --svc-input-text: var(--alma-text);
    --svc-input-placeholder: var(--alma-text-muted);
    /* Btn primary */
    --svc-btn-primary-bg: linear-gradient(135deg,var(--alma-accent),var(--alma-accent-2));
}

[data-mode="light"] {
    --svc-stat-found: var(--alma-accent);
    --svc-stat-active: #047857;
    --svc-stat-inactive: #b91c1c;
    --svc-stat-avg: #1d4ed8;
    --svc-card-bg: var(--alma-bg-card);
    --svc-card-border: var(--alma-border);
    --svc-card-hover: var(--alma-accent-border);
    --svc-card-sep: var(--alma-border);
    --svc-card-footer-bg: rgba(0,0,0,0.03);
    --svc-icon-bg: linear-gradient(135deg,var(--alma-accent),var(--alma-accent-2));
    --svc-active-text: #047857;
    --svc-inactive-text: #b91c1c;
    --svc-price-text: var(--alma-accent-2);
    --svc-btn-edit-bg: var(--alma-accent-soft);
    --svc-btn-edit-hover: rgba(15,155,114,0.14);
    --svc-btn-edit-text: var(--alma-accent);
    --svc-btn-deact-bg: rgba(202,138,4,0.08);
    --svc-btn-deact-hover: rgba(202,138,4,0.15);
    --svc-btn-deact-text: #b45309;
    --svc-btn-act-bg: rgba(5,150,105,0.08);
    --svc-btn-act-hover: rgba(5,150,105,0.15);
    --svc-btn-act-text: #047857;
    --svc-input-bg: var(--alma-bg-input);
    --svc-input-border: var(--alma-border-2);
    --svc-input-focus: var(--alma-accent-border);
    --svc-input-text: var(--alma-text);
    --svc-input-placeholder: var(--alma-text-muted);
    --svc-btn-primary-bg: linear-gradient(135deg,var(--alma-accent),var(--alma-accent-2));
}

/* ── Stats ───────────────────────────────────────── */
.svc-stat-found {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--svc-stat-found);
}

.svc-stat-active {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--svc-stat-active);
}

.svc-stat-inactive {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--svc-stat-inactive);
}

.svc-stat-avg {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--svc-stat-avg);
}

.svc-stat-label {
    font-size: 0.6875rem;
    color: var(--alma-text-muted);
    margin-top: 2px;
}

/* ── Input ───────────────────────────────────────── */
.svc-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--svc-input-bg);
    border: 1px solid var(--svc-input-border);
    border-radius: 8px;
    color: var(--svc-input-text);
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

    .svc-input:focus {
        border-color: var(--svc-input-focus);
    }

    .svc-input::placeholder {
        color: var(--svc-input-placeholder);
    }

.svc-input-prefix-wrap {
    position: relative;
}

.svc-input-prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--alma-text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

.svc-input-with-prefix {
    padding-left: 24px;
}

/* ── Card ────────────────────────────────────────── */
.svc-card {
    background: var(--svc-card-bg);
    border: 1px solid var(--svc-card-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .svc-card:hover {
        border-color: var(--svc-card-hover);
        box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    }

.svc-card-body {
    padding: 12px;
    flex: 1;
    border-bottom: 1px solid var(--svc-card-sep);
}

.svc-card-footer {
    padding: 8px;
    background: var(--svc-card-footer-bg);
    display: flex;
    gap: 6px;
}

/* Icono */
.svc-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--svc-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Status */
.svc-status-active {
    font-size: 0.75rem;
    color: var(--svc-active-text);
}

.svc-status-inactive {
    font-size: 0.75rem;
    color: var(--svc-inactive-text);
}

/* Precio */
.svc-price {
    font-weight: 700;
    color: var(--svc-price-text);
}

/* Card buttons */
.svc-card-btn {
    flex: 1;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.12s ease;
}

.svc-btn-edit {
    background: var(--svc-btn-edit-bg);
    color: var(--svc-btn-edit-text);
}

    .svc-btn-edit:hover {
        background: var(--svc-btn-edit-hover);
    }

.svc-btn-deact {
    background: var(--svc-btn-deact-bg);
    color: var(--svc-btn-deact-text);
}

    .svc-btn-deact:hover {
        background: var(--svc-btn-deact-hover);
    }

.svc-btn-act {
    background: var(--svc-btn-act-bg);
    color: var(--svc-btn-act-text);
}

    .svc-btn-act:hover {
        background: var(--svc-btn-act-hover);
    }

/* Primary btn */
.svc-btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--svc-btn-primary-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .svc-btn-primary:hover {
        filter: brightness(1.10);
    }

    .svc-btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ═══════════════════════════════════════════════════════════════
   PROFESSIONALS MODULE
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Stats cards */
    --prof-stat-bg: rgba(255,255,255,0.04);
    --prof-stat-border: var(--alma-border);
    --prof-stat-total-icon-bg: rgba(37,99,235,0.12);
    --prof-stat-total-icon-border: rgba(37,99,235,0.22);
    --prof-stat-total-val: var(--alma-text);
    --prof-stat-active-icon-bg: rgba(5,150,105,0.12);
    --prof-stat-active-icon-border: rgba(5,150,105,0.22);
    --prof-stat-active-val: #4ade80;
    --prof-stat-inactive-icon-bg: rgba(71,85,105,0.15);
    --prof-stat-inactive-icon-border: rgba(71,85,105,0.30);
    --prof-stat-inactive-val: var(--alma-text-sub);
    --prof-stat-spec-icon-bg: var(--alma-accent-soft);
    --prof-stat-spec-icon-border: var(--alma-accent-border);
    --prof-stat-spec-val: var(--alma-accent-light);
    /* Avatar */
    --prof-avatar-bg: linear-gradient(135deg,var(--alma-accent-2),var(--alma-accent));
    --prof-avatar-text: #ffffff;
    /* Header icon */
    --prof-header-icon-bg: rgba(37,99,235,0.12);
    --prof-header-icon-border: rgba(37,99,235,0.22);
    /* Input */
    --prof-input-bg: rgba(255,255,255,0.06);
    --prof-input-border: var(--alma-border-2);
    --prof-input-focus: rgba(37,99,235,0.40);
    --prof-input-text: var(--alma-text);
    --prof-input-placeholder: var(--alma-text-muted);
    --prof-input-error-border: rgba(239,68,68,0.50);
    /* Tabla */
    --prof-table-bg: rgba(255,255,255,0.03);
    --prof-table-border: var(--alma-border);
    --prof-table-head-bg: rgba(0,0,0,0.20);
    --prof-table-row-even: transparent;
    --prof-table-row-odd: rgba(255,255,255,0.015);
    --prof-table-row-hover: rgba(255,255,255,0.04);
    /* Badge especialidad */
    --prof-spec-badge-bg: rgba(99,60,180,0.15);
    --prof-spec-badge-border: rgba(139,92,246,0.25);
    --prof-spec-badge-text: var(--alma-accent-light);
    /* Badge activo/inactivo */
    --prof-badge-on-bg: rgba(5,150,105,0.12);
    --prof-badge-on-border: rgba(16,185,129,0.25);
    --prof-badge-on-text: #4ade80;
    --prof-badge-on-dot: #4ade80;
    --prof-badge-off-bg: rgba(71,85,105,0.12);
    --prof-badge-off-border: rgba(71,85,105,0.25);
    --prof-badge-off-text: var(--alma-text-muted);
    --prof-badge-off-dot: var(--alma-text-muted);
    /* Action buttons en tabla */
    --prof-action-group-bg: rgba(255,255,255,0.04);
    --prof-action-group-border: var(--alma-border-2);
    --prof-action-group-div: var(--alma-border);
    --prof-action-btn-text: var(--alma-text-muted);
    --prof-action-calendar-hover: rgba(37,99,235,0.12);
    --prof-action-calendar-text: #60a5fa;
    --prof-action-edit-hover: rgba(37,99,235,0.12);
    --prof-action-edit-text: #60a5fa;
    --prof-action-schedule-hover: rgba(13,148,136,0.12);
    --prof-action-schedule-text: #2dd4bf;
    --prof-action-pwd-hover: rgba(202,138,4,0.12);
    --prof-action-pwd-text: #fbbf24;
    --prof-action-deact-hover: rgba(220,38,38,0.10);
    --prof-action-deact-text: #f87171;
    --prof-action-act-hover: rgba(5,150,105,0.10);
    --prof-action-act-text: #4ade80;
    /* Vista tarjetas */
    --prof-card-bg: rgba(255,255,255,0.04);
    --prof-card-border: var(--alma-border);
    --prof-card-hover: rgba(37,99,235,0.25);
    --prof-card-on-stripe: linear-gradient(90deg,var(--alma-accent-2),var(--alma-accent));
    --prof-card-off-stripe: linear-gradient(90deg,rgba(71,85,105,0.6),rgba(51,65,85,0.6));
    --prof-card-footer-bg: rgba(0,0,0,0.15);
    --prof-card-footer-border: var(--alma-border);
    /* Card footer buttons */
    --prof-card-agenda-bg: rgba(255,255,255,0.05);
    --prof-card-agenda-hover: rgba(255,255,255,0.10);
    --prof-card-agenda-border: var(--alma-border-2);
    --prof-card-agenda-text: var(--alma-text-sub);
    --prof-card-edit-bg: rgba(37,99,235,0.10);
    --prof-card-edit-hover: rgba(37,99,235,0.20);
    --prof-card-edit-border: rgba(37,99,235,0.22);
    --prof-card-edit-text: #60a5fa;
    --prof-card-pwd-bg: rgba(255,255,255,0.05);
    --prof-card-pwd-hover-bg: rgba(202,138,4,0.12);
    --prof-card-pwd-hover-border: rgba(202,138,4,0.25);
    --prof-card-pwd-border: var(--alma-border-2);
    --prof-card-pwd-text: var(--alma-text-sub);
    --prof-card-pwd-hover-text: #fbbf24;
    --prof-card-deact-bg: rgba(202,138,4,0.10);
    --prof-card-deact-hover: rgba(202,138,4,0.20);
    --prof-card-deact-border: rgba(202,138,4,0.22);
    --prof-card-deact-text: #fbbf24;
    --prof-card-act-bg: rgba(5,150,105,0.10);
    --prof-card-act-hover: rgba(5,150,105,0.20);
    --prof-card-act-border: rgba(5,150,105,0.22);
    --prof-card-act-text: #4ade80;
    /* Dot activo/inactivo en card */
    --prof-dot-on: #4ade80;
    --prof-dot-off: var(--alma-text-muted);
    /* Toast */
    --prof-toast-ok-bg: rgba(5,150,105,0.90);
    --prof-toast-ok-border: rgba(16,185,129,0.40);
    --prof-toast-err-bg: rgba(185,28,28,0.90);
    --prof-toast-err-border: rgba(239,68,68,0.40);
    /* Modal headers icons */
    --prof-modal-create-icon-bg: rgba(37,99,235,0.12);
    --prof-modal-create-icon-border: rgba(37,99,235,0.25);
    --prof-modal-pwd-icon-bg: rgba(202,138,4,0.12);
    --prof-modal-pwd-icon-border: rgba(202,138,4,0.25);
    --prof-modal-sched-icon-bg: rgba(13,148,136,0.12);
    --prof-modal-sched-icon-border: rgba(13,148,136,0.25);
    /* Section numbers */
    --prof-section-1-bg: #2563eb;
    --prof-section-2-bg: var(--alma-accent);
    /* Warning box en modal contraseña */
    --prof-pwd-warn-bg: rgba(202,138,4,0.08);
    --prof-pwd-warn-border: rgba(202,138,4,0.22);
    --prof-pwd-warn-text: #fbbf24;
    /* Day schedule row */
    --prof-day-bg: rgba(255,255,255,0.04);
    --prof-day-border: var(--alma-border-2);
    --prof-day-check-on-bg: #0d9488;
    --prof-day-check-on-border: #0d9488;
    --prof-day-check-off-bg: transparent;
    --prof-day-check-off-border: var(--alma-border-2);
    --prof-day-active-text: var(--alma-text);
    --prof-day-inactive-text: var(--alma-text-muted);
    --prof-day-time-text: #2dd4bf;
    /* Toggle switch */
    --prof-toggle-on-bg: #059669;
    --prof-toggle-off-bg: rgba(71,85,105,0.60);
    /* Btn primary (azul/morado para este módulo) */
    --prof-btn-primary-bg: linear-gradient(135deg,#2563eb,var(--alma-accent));
    --prof-btn-sched-bg: linear-gradient(135deg,#0d9488,#0891b2);
    --prof-btn-pwd-bg: linear-gradient(135deg,#d97706,#ea580c);
    /* Result footer */
    --prof-footer-bg: rgba(0,0,0,0.20);
    --prof-footer-border: var(--alma-border);
}

[data-mode="light"] {
    --prof-stat-bg: var(--alma-bg-card);
    --prof-stat-border: var(--alma-border);
    --prof-stat-total-icon-bg: rgba(37,99,235,0.08);
    --prof-stat-total-icon-border: rgba(37,99,235,0.15);
    --prof-stat-total-val: var(--alma-text);
    --prof-stat-active-icon-bg: rgba(5,150,105,0.08);
    --prof-stat-active-icon-border: rgba(5,150,105,0.15);
    --prof-stat-active-val: #047857;
    --prof-stat-inactive-icon-bg: rgba(71,85,105,0.08);
    --prof-stat-inactive-icon-border: rgba(71,85,105,0.18);
    --prof-stat-inactive-val: var(--alma-text-sub);
    --prof-stat-spec-icon-bg: var(--alma-accent-soft);
    --prof-stat-spec-icon-border: var(--alma-accent-border);
    --prof-stat-spec-val: var(--alma-accent-2);
    --prof-avatar-bg: linear-gradient(135deg,#2563eb,var(--alma-accent));
    --prof-avatar-text: #fff;
    --prof-header-icon-bg: rgba(37,99,235,0.08);
    --prof-header-icon-border: rgba(37,99,235,0.15);
    --prof-input-bg: var(--alma-bg-input);
    --prof-input-border: var(--alma-border-2);
    --prof-input-focus: rgba(37,99,235,0.25);
    --prof-input-text: var(--alma-text);
    --prof-input-placeholder: var(--alma-text-muted);
    --prof-input-error-border: rgba(220,38,38,0.40);
    --prof-table-bg: var(--alma-bg-card);
    --prof-table-border: var(--alma-border);
    --prof-table-head-bg: rgba(0,0,0,0.04);
    --prof-table-row-even: transparent;
    --prof-table-row-odd: rgba(0,0,0,0.015);
    --prof-table-row-hover: rgba(0,0,0,0.03);
    --prof-spec-badge-bg: rgba(99,60,180,0.07);
    --prof-spec-badge-border: rgba(139,92,246,0.15);
    --prof-spec-badge-text: var(--alma-accent-2);
    --prof-badge-on-bg: rgba(5,150,105,0.07);
    --prof-badge-on-border: rgba(5,150,105,0.18);
    --prof-badge-on-text: #047857;
    --prof-badge-on-dot: #047857;
    --prof-badge-off-bg: rgba(71,85,105,0.07);
    --prof-badge-off-border: rgba(71,85,105,0.18);
    --prof-badge-off-text: var(--alma-text-muted);
    --prof-badge-off-dot: var(--alma-text-muted);
    --prof-action-group-bg: var(--alma-bg-card);
    --prof-action-group-border: var(--alma-border);
    --prof-action-group-div: var(--alma-border);
    --prof-action-btn-text: var(--alma-text-muted);
    --prof-action-calendar-hover: rgba(37,99,235,0.07);
    --prof-action-calendar-text: #1d4ed8;
    --prof-action-edit-hover: rgba(37,99,235,0.07);
    --prof-action-edit-text: #1d4ed8;
    --prof-action-schedule-hover: rgba(13,148,136,0.07);
    --prof-action-schedule-text: #0f766e;
    --prof-action-pwd-hover: rgba(202,138,4,0.07);
    --prof-action-pwd-text: #b45309;
    --prof-action-deact-hover: rgba(220,38,38,0.06);
    --prof-action-deact-text: #b91c1c;
    --prof-action-act-hover: rgba(5,150,105,0.06);
    --prof-action-act-text: #047857;
    --prof-card-bg: var(--alma-bg-card);
    --prof-card-border: var(--alma-border);
    --prof-card-hover: rgba(37,99,235,0.20);
    --prof-card-on-stripe: linear-gradient(90deg,#2563eb,var(--alma-accent));
    --prof-card-off-stripe: linear-gradient(90deg,#94a3b8,#64748b);
    --prof-card-footer-bg: rgba(0,0,0,0.03);
    --prof-card-footer-border: var(--alma-border);
    --prof-card-agenda-bg: var(--alma-bg-card);
    --prof-card-agenda-hover: var(--alma-bg-hover);
    --prof-card-agenda-border: var(--alma-border);
    --prof-card-agenda-text: var(--alma-text-sub);
    --prof-card-edit-bg: rgba(37,99,235,0.07);
    --prof-card-edit-hover: rgba(37,99,235,0.14);
    --prof-card-edit-border: rgba(37,99,235,0.18);
    --prof-card-edit-text: #1d4ed8;
    --prof-card-pwd-bg: var(--alma-bg-card);
    --prof-card-pwd-hover-bg: rgba(202,138,4,0.08);
    --prof-card-pwd-hover-border: rgba(202,138,4,0.18);
    --prof-card-pwd-border: var(--alma-border);
    --prof-card-pwd-text: var(--alma-text-sub);
    --prof-card-pwd-hover-text: #b45309;
    --prof-card-deact-bg: rgba(202,138,4,0.08);
    --prof-card-deact-hover: rgba(202,138,4,0.14);
    --prof-card-deact-border: rgba(202,138,4,0.18);
    --prof-card-deact-text: #b45309;
    --prof-card-act-bg: rgba(5,150,105,0.08);
    --prof-card-act-hover: rgba(5,150,105,0.14);
    --prof-card-act-border: rgba(5,150,105,0.18);
    --prof-card-act-text: #047857;
    --prof-dot-on: #047857;
    --prof-dot-off: var(--alma-text-muted);
    --prof-toast-ok-bg: rgba(5,150,105,0.92);
    --prof-toast-ok-border: rgba(5,150,105,0.35);
    --prof-toast-err-bg: rgba(185,28,28,0.92);
    --prof-toast-err-border: rgba(220,38,38,0.35);
    --prof-modal-create-icon-bg: rgba(37,99,235,0.08);
    --prof-modal-create-icon-border: rgba(37,99,235,0.18);
    --prof-modal-pwd-icon-bg: rgba(202,138,4,0.08);
    --prof-modal-pwd-icon-border: rgba(202,138,4,0.18);
    --prof-modal-sched-icon-bg: rgba(13,148,136,0.08);
    --prof-modal-sched-icon-border: rgba(13,148,136,0.18);
    --prof-section-1-bg: #2563eb;
    --prof-section-2-bg: var(--alma-accent);
    --prof-pwd-warn-bg: rgba(202,138,4,0.06);
    --prof-pwd-warn-border: rgba(202,138,4,0.18);
    --prof-pwd-warn-text: #b45309;
    --prof-day-bg: var(--alma-bg-card);
    --prof-day-border: var(--alma-border);
    --prof-day-check-on-bg: #0d9488;
    --prof-day-check-on-border: #0d9488;
    --prof-day-check-off-bg: transparent;
    --prof-day-check-off-border: var(--alma-border-2);
    --prof-day-active-text: var(--alma-text);
    --prof-day-inactive-text: var(--alma-text-muted);
    --prof-day-time-text: #0f766e;
    --prof-toggle-on-bg: #059669;
    --prof-toggle-off-bg: rgba(100,116,139,0.40);
    --prof-btn-primary-bg: linear-gradient(135deg,#2563eb,var(--alma-accent));
    --prof-btn-sched-bg: linear-gradient(135deg,#0d9488,#0891b2);
    --prof-btn-pwd-bg: linear-gradient(135deg,#d97706,#ea580c);
    --prof-footer-bg: rgba(0,0,0,0.03);
    --prof-footer-border: var(--alma-border);
}

/* ── Stat card ───────────────────────────────── */
.prof-stat-card {
    background: var(--prof-stat-bg);
    border: 1px solid var(--prof-stat-border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.prof-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.prof-stat-icon-total {
    background: var(--prof-stat-total-icon-bg);
    border-color: var(--prof-stat-total-icon-border);
}

.prof-stat-icon-active {
    background: var(--prof-stat-active-icon-bg);
    border-color: var(--prof-stat-active-icon-border);
}

.prof-stat-icon-inactive {
    background: var(--prof-stat-inactive-icon-bg);
    border-color: var(--prof-stat-inactive-icon-border);
}

.prof-stat-icon-spec {
    background: var(--prof-stat-spec-icon-bg);
    border-color: var(--prof-stat-spec-icon-border);
}

.prof-stat-val-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--prof-stat-total-val);
}

.prof-stat-val-active {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--prof-stat-active-val);
}

.prof-stat-val-inactive {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--prof-stat-inactive-val);
}

.prof-stat-val-spec {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--prof-stat-spec-val);
}

.prof-stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--alma-text-muted);
}

/* ── Avatar ──────────────────────────────────── */
.prof-avatar {
    background: var(--prof-avatar-bg);
    color: var(--prof-avatar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.prof-avatar-sm {
    width: 36px;
    height: 36px;
    font-size: 0.8125rem;
}

.prof-avatar-md {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

.prof-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

/* ── Input ───────────────────────────────────── */
.prof-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--prof-input-bg);
    border: 1px solid var(--prof-input-border);
    border-radius: 10px;
    color: var(--prof-input-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

    .prof-input:focus {
        border-color: var(--prof-input-focus);
        box-shadow: 0 0 0 3px var(--prof-input-focus);
    }

    .prof-input::placeholder {
        color: var(--prof-input-placeholder);
    }

    .prof-input.error {
        border-color: var(--prof-input-error-border);
    }

.prof-input-mono {
    font-family: monospace;
}

.prof-pwd-eye {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--alma-text-muted); padding: 0;
    display: flex; align-items: center;
}

    .prof-pwd-eye:hover {
        color: var(--alma-text-sub);
    }

/* ── Tabla ───────────────────────────────────── */
.prof-table-wrap {
    background: var(--prof-table-bg);
    border: 1px solid var(--prof-table-border);
    border-radius: 12px;
    overflow: hidden;
}

.prof-table-head {
    padding: 10px 20px;
    border-bottom: 1px solid var(--prof-table-border);
    background: var(--prof-table-head-bg);
    display: grid;
    gap: 16px;
    align-items: center;
}

.prof-table-row {
    padding: 14px 20px;
    border-bottom: 1px solid var(--prof-table-border);
    display: grid;
    gap: 16px;
    align-items: center;
    transition: background 0.12s ease;
}

    .prof-table-row:last-child {
        border-bottom: none;
    }

    .prof-table-row.even {
        background: var(--prof-table-row-even);
    }

    .prof-table-row.odd {
        background: var(--prof-table-row-odd);
    }

    .prof-table-row:hover {
        background: var(--prof-table-row-hover);
    }

.prof-table-th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--alma-text-muted);
}

.prof-table-footer {
    padding: 10px 20px;
    background: var(--prof-footer-bg);
    border-top: 1px solid var(--prof-footer-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Badges ──────────────────────────────────── */
.prof-spec-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: var(--prof-spec-badge-bg);
    border: 1px solid var(--prof-spec-badge-border);
    color: var(--prof-spec-badge-text);
}

.prof-badge-on {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: var(--prof-badge-on-bg);
    border: 1px solid var(--prof-badge-on-border);
    color: var(--prof-badge-on-text);
}

.prof-badge-off {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: var(--prof-badge-off-bg);
    border: 1px solid var(--prof-badge-off-border);
    color: var(--prof-badge-off-text);
}

.prof-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.prof-badge-dot-on {
    background: var(--prof-badge-on-dot);
}

.prof-badge-dot-off {
    background: var(--prof-badge-off-dot);
}

/* ── Action buttons group (tabla) ────────────── */
.prof-action-group {
    display: flex;
    align-items: center;
    background: var(--prof-action-group-bg);
    border: 1px solid var(--prof-action-group-border);
    border-radius: 10px;
    overflow: hidden;
}

    .prof-action-group > * + * {
        border-left: 1px solid var(--prof-action-group-div);
    }

.prof-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--prof-action-btn-text);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    text-decoration: none;
}

.prof-action-btn-calendar:hover {
    background: var(--prof-action-calendar-hover);
    color: var(--prof-action-calendar-text);
}

.prof-action-btn-edit:hover {
    background: var(--prof-action-edit-hover);
    color: var(--prof-action-edit-text);
}

.prof-action-btn-schedule:hover {
    background: var(--prof-action-schedule-hover);
    color: var(--prof-action-schedule-text);
}

.prof-action-btn-pwd:hover {
    background: var(--prof-action-pwd-hover);
    color: var(--prof-action-pwd-text);
}

.prof-action-btn-deact:hover {
    background: var(--prof-action-deact-hover);
    color: var(--prof-action-deact-text);
}

.prof-action-btn-act:hover {
    background: var(--prof-action-act-hover);
    color: var(--prof-action-act-text);
}

/* ── Vista tarjetas ──────────────────────────── */
.prof-card {
    background: var(--prof-card-bg);
    border: 1px solid var(--prof-card-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease;
}

    .prof-card:hover {
        border-color: var(--prof-card-hover);
    }

/* Promover cliente existente a profesional */
.prof-promote-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--prof-card-bg);
    border: 1px solid var(--prof-card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .prof-promote-row:hover {
        border-color: var(--prof-card-hover);
    }

.prof-promote-row-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

    .prof-promote-row-disabled:hover {
        border-color: var(--prof-card-border);
    }

.prof-promote-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--prof-badge-on-bg);
    border: 1px solid var(--prof-badge-on-border);
    border-radius: 10px;
}

.prof-card-stripe-on {
    height: 4px;
    background: var(--prof-card-on-stripe);
}

.prof-card-stripe-off {
    height: 4px;
    background: var(--prof-card-off-stripe);
}

.prof-card-body {
    padding: 14px;
    flex: 1;
}

.prof-card-footer {
    padding: 10px;
    background: var(--prof-card-footer-bg);
    border-top: 1px solid var(--prof-card-footer-border);
    display: flex;
    gap: 6px;
}

.prof-dot-on {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--prof-dot-on);
    flex-shrink: 0;
}

.prof-dot-off {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--prof-dot-off);
    flex-shrink: 0;
}

.prof-card-btn {
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.prof-card-btn-agenda {
    background: var(--prof-card-agenda-bg);
    border-color: var(--prof-card-agenda-border);
    color: var(--prof-card-agenda-text);
}

    .prof-card-btn-agenda:hover {
        background: var(--prof-card-agenda-hover);
    }

.prof-card-btn-edit {
    background: var(--prof-card-edit-bg);
    border-color: var(--prof-card-edit-border);
    color: var(--prof-card-edit-text);
    flex: 1;
}

    .prof-card-btn-edit:hover {
        background: var(--prof-card-edit-hover);
    }

.prof-card-btn-pwd {
    background: var(--prof-card-pwd-bg);
    border-color: var(--prof-card-pwd-border);
    color: var(--prof-card-pwd-text);
}

    .prof-card-btn-pwd:hover {
        background: var(--prof-card-pwd-hover-bg);
        border-color: var(--prof-card-pwd-hover-border);
        color: var(--prof-card-pwd-hover-text);
    }

.prof-card-btn-deact {
    background: var(--prof-card-deact-bg);
    border-color: var(--prof-card-deact-border);
    color: var(--prof-card-deact-text);
    flex: 1;
}

    .prof-card-btn-deact:hover {
        background: var(--prof-card-deact-hover);
    }

.prof-card-btn-act {
    background: var(--prof-card-act-bg);
    border-color: var(--prof-card-act-border);
    color: var(--prof-card-act-text);
    flex: 1;
}

    .prof-card-btn-act:hover {
        background: var(--prof-card-act-hover);
    }

/* ── Toast ───────────────────────────────────── */
.prof-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    backdrop-filter: blur(12px);
    max-width: 300px;
}

.prof-toast-ok {
    background: var(--prof-toast-ok-bg);
    border-color: var(--prof-toast-ok-border);
}

.prof-toast-err {
    background: var(--prof-toast-err-bg);
    border-color: var(--prof-toast-err-border);
}

/* ── Modal icons ─────────────────────────────── */
.prof-modal-icon-create {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--prof-modal-create-icon-bg);
    border: 1px solid var(--prof-modal-create-icon-border);
    flex-shrink: 0;
}

.prof-modal-icon-pwd {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--prof-modal-pwd-icon-bg);
    border: 1px solid var(--prof-modal-pwd-icon-border);
    flex-shrink: 0;
}

.prof-modal-icon-sched {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--prof-modal-sched-icon-bg);
    border: 1px solid var(--prof-modal-sched-icon-border);
    flex-shrink: 0;
}

/* ── Section numbers ─────────────────────────── */
.prof-section-num-1 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--prof-section-1-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.prof-section-num-2 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--prof-section-2-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Day row (horarios) ──────────────────────── */
.prof-day-row {
    padding: 12px;
    background: var(--prof-day-bg);
    border: 1px solid var(--prof-day-border);
    border-radius: 10px;
}

.prof-day-check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

    .prof-day-check.on {
        background: var(--prof-day-check-on-bg);
        border-color: var(--prof-day-check-on-border);
    }

    .prof-day-check.off {
        background: var(--prof-day-check-off-bg);
        border-color: var(--prof-day-check-off-border);
    }

.prof-day-time {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--prof-day-time-text);
}

/* ── Toggle switch ───────────────────────────── */
.prof-toggle-track {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    padding: 2px;
    flex-shrink: 0;
}

    .prof-toggle-track.on {
        background: var(--prof-toggle-on-bg);
    }

    .prof-toggle-track.off {
        background: var(--prof-toggle-off-bg);
    }

.prof-toggle-thumb {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

    .prof-toggle-thumb.on {
        transform: translateX(20px);
    }

    .prof-toggle-thumb.off {
        transform: translateX(0);
    }

/* ── Pwd warning ─────────────────────────────── */
.prof-pwd-warn {
    padding: 10px 12px;
    background: var(--prof-pwd-warn-bg);
    border: 1px solid var(--prof-pwd-warn-border);
    border-radius: 10px;
    color: var(--prof-pwd-warn-text);
    font-size: 0.75rem;
}

/* ── Buttons ─────────────────────────────────── */
.prof-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--prof-btn-primary-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .prof-btn-primary:hover {
        filter: brightness(1.10);
    }

    .prof-btn-primary:disabled {
        background: var(--alma-bg-2);
        color: var(--alma-text-muted);
        cursor: not-allowed;
        filter: none;
    }

.prof-btn-sched {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--prof-btn-sched-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .prof-btn-sched:hover {
        filter: brightness(1.10);
    }

.prof-btn-pwd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--prof-btn-pwd-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .prof-btn-pwd:hover {
        filter: brightness(1.10);
    }

    .prof-btn-pwd:disabled {
        background: var(--alma-bg-2);
        color: var(--alma-text-muted);
        cursor: not-allowed;
        filter: none;
    }

/* ═══════════════════════════════════════════════════════════════
   MI CUENTA — páginas de perfil, contraseña, consultorios
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Field input compartido */
    --acc-input-bg: rgba(3,4,10,0.6);
    --acc-input-border: rgba(148,163,184,0.12);
    --acc-input-focus-border: rgba(29,158,117,0.5);
    --acc-input-focus-ring: rgba(29,158,117,0.10);
    --acc-input-text: var(--alma-text);
    --acc-input-placeholder: #1e293b;
    /* Btn primary verde (acento Aunara) */
    --acc-btn-bg: linear-gradient(135deg,#1D9E75,#0F6E56);
    --acc-btn-hover-bg: linear-gradient(135deg,#5DCAA5,#1D9E75);
    --acc-btn-shadow: rgba(29,158,117,0.30);
    --acc-btn-hover-shadow: rgba(29,158,117,0.50);
    /* Alertas */
    --acc-alert-ok-bg: rgba(16,185,129,0.06);
    --acc-alert-ok-border: rgba(16,185,129,0.18);
    --acc-alert-ok-text: #6ee7b7;
    --acc-alert-err-bg: rgba(239,68,68,0.06);
    --acc-alert-err-border: rgba(239,68,68,0.18);
    --acc-alert-err-text: #fca5a5;
    /* Panel de contenido */
    --acc-panel-bg: rgba(255,255,255,0.02);
    --acc-panel-border: rgba(148,163,184,0.08);
    /* Avatar (perfil) */
    --acc-avatar-bg: linear-gradient(135deg,#7c3aed,#6d28d9);
    --acc-avatar-shadow: rgba(124,58,237,0.25);
    /* Badge de rol */
    --acc-role-bg: rgba(124,58,237,0.12);
    --acc-role-text: #c4b5fd;
    /* Pwd strength bars */
    --acc-bar-empty: rgba(148,163,184,0.10);
    --acc-bar-weak: #ef4444;
    --acc-bar-medium: #f59e0b;
    --acc-bar-strong: #10b981;
    /* Consultorios — tenant card */
    --acc-tenant-card-bg: rgba(255,255,255,0.02);
    --acc-tenant-card-border: rgba(148,163,184,0.08);
    --acc-tenant-card-hover-bg: rgba(255,255,255,0.04);
    --acc-tenant-card-hover-border: rgba(148,163,184,0.15);
    --acc-tenant-icon-bg: rgba(29,158,117,0.10);
    --acc-tenant-icon-text: #5DCAA5;
    --acc-tenant-name: #e2e8f0;
    --acc-tenant-sub: #475569;
    --acc-tenant-btn-bg: rgba(29,158,117,0.10);
    --acc-tenant-btn-border: rgba(29,158,117,0.20);
    --acc-tenant-btn-text: #5DCAA5;
    --acc-tenant-btn-hover-bg: rgba(29,158,117,0.20);
    --acc-tenant-btn-hover-border: rgba(29,158,117,0.40);
    --acc-tenant-btn-hover-text: #9FE1CB;
    /* Empty state */
    --acc-empty-icon-bg: rgba(255,255,255,0.04);
    --acc-empty-icon: #475569;
    /* Back link */
    --acc-back-text: #64748b;
    --acc-back-hover-text: #cbd5e1;
    /* Mis turnos — status */
    --acc-status-confirmed-bg: rgba(5,150,105,0.15);
    --acc-status-confirmed-text: #4ade80;
    --acc-status-inprog-bg: rgba(202,138,4,0.15);
    --acc-status-inprog-text: #fbbf24;
    --acc-status-sched-bg: rgba(37,99,235,0.15);
    --acc-status-sched-text: #60a5fa;
    --acc-status-default-bg: rgba(71,85,105,0.20);
    --acc-status-default-text: var(--alma-text-sub);
}

[data-mode="light"] {
    --acc-input-bg: #ffffff;
    --acc-input-border: rgba(0,0,0,0.12);
    --acc-input-focus-border: rgba(29,158,117,0.45);
    --acc-input-focus-ring: rgba(29,158,117,0.08);
    --acc-input-text: var(--alma-text);
    --acc-input-placeholder: #94a3b8;
    --acc-btn-bg: linear-gradient(135deg,#1D9E75,#0F6E56);
    --acc-btn-hover-bg: linear-gradient(135deg,#5DCAA5,#1D9E75);
    --acc-btn-shadow: rgba(29,158,117,0.22);
    --acc-btn-hover-shadow: rgba(29,158,117,0.38);
    --acc-alert-ok-bg: rgba(16,185,129,0.05);
    --acc-alert-ok-border: rgba(16,185,129,0.15);
    --acc-alert-ok-text: #047857;
    --acc-alert-err-bg: rgba(239,68,68,0.05);
    --acc-alert-err-border: rgba(239,68,68,0.15);
    --acc-alert-err-text: #b91c1c;
    --acc-panel-bg: var(--alma-bg-card);
    --acc-panel-border: var(--alma-border);
    --acc-avatar-bg: linear-gradient(135deg,#7c3aed,#6d28d9);
    --acc-avatar-shadow: rgba(124,58,237,0.18);
    --acc-role-bg: rgba(124,58,237,0.08);
    --acc-role-text: #6d28d9;
    --acc-bar-empty: rgba(0,0,0,0.08);
    --acc-bar-weak: #dc2626;
    --acc-bar-medium: #d97706;
    --acc-bar-strong: #16a34a;
    --acc-tenant-card-bg: var(--alma-bg-card);
    --acc-tenant-card-border: var(--alma-border);
    --acc-tenant-card-hover-bg: var(--alma-bg-hover);
    --acc-tenant-card-hover-border: var(--alma-border-2);
    --acc-tenant-icon-bg: rgba(29,158,117,0.08);
    --acc-tenant-icon-text: #047857;
    --acc-tenant-name: #1e293b;
    --acc-tenant-sub: #64748b;
    --acc-tenant-btn-bg: rgba(29,158,117,0.08);
    --acc-tenant-btn-border: rgba(29,158,117,0.18);
    --acc-tenant-btn-text: #047857;
    --acc-tenant-btn-hover-bg: rgba(29,158,117,0.15);
    --acc-tenant-btn-hover-border: rgba(29,158,117,0.30);
    --acc-tenant-btn-hover-text: #065f46;
    --acc-empty-icon-bg: rgba(0,0,0,0.05);
    --acc-empty-icon: #94a3b8;
    --acc-back-text: #94a3b8;
    --acc-back-hover-text: #334155;
    --acc-status-confirmed-bg: rgba(5,150,105,0.08);
    --acc-status-confirmed-text: #047857;
    --acc-status-inprog-bg: rgba(202,138,4,0.08);
    --acc-status-inprog-text: #b45309;
    --acc-status-sched-bg: rgba(37,99,235,0.08);
    --acc-status-sched-text: #1d4ed8;
    --acc-status-default-bg: rgba(71,85,105,0.10);
    --acc-status-default-text: var(--alma-text-sub);
}

/* ── Shared field input ─────────────────────────── */
.acc-input {
    width: 100%;
    padding: 10px 14px;
    box-sizing: border-box;
    background: var(--acc-input-bg);
    border: 1px solid var(--acc-input-border);
    border-radius: 10px;
    color: var(--acc-input-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .acc-input:focus {
        border-color: var(--acc-input-focus-border);
        box-shadow: 0 0 0 3px var(--acc-input-focus-ring);
    }

    .acc-input::placeholder {
        color: var(--acc-input-placeholder);
    }

    .acc-input:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* ── Btn primary (acento verde Aunara) ─────────── */
.acc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    background: var(--acc-btn-bg);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 20px var(--acc-btn-shadow);
}

    .acc-btn:hover:not(:disabled) {
        background: var(--acc-btn-hover-bg);
        box-shadow: 0 0 30px var(--acc-btn-hover-shadow);
        transform: translateY(-1px);
    }

    .acc-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ── Alertas ─────────────────────────────────── */
.acc-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}

.acc-alert-ok {
    background: var(--acc-alert-ok-bg);
    border-color: var(--acc-alert-ok-border);
    color: var(--acc-alert-ok-text);
}

.acc-alert-err {
    background: var(--acc-alert-err-bg);
    border-color: var(--acc-alert-err-border);
    color: var(--acc-alert-err-text);
}

/* ── Panel de formulario ─────────────────────── */
.acc-panel {
    background: var(--acc-panel-bg);
    border: 1px solid var(--acc-panel-border);
    border-radius: 16px;
    padding: 24px;
}

.acc-panel-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--alma-text-muted);
    margin-bottom: 1.25rem;
}

/* ── Avatar perfil ───────────────────────────── */
.acc-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    flex-shrink: 0;
    background: var(--acc-avatar-bg);
    box-shadow: 0 0 20px var(--acc-avatar-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.125rem;
    user-select: none;
}

/* Badge de rol */
.acc-role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: var(--acc-role-bg);
    color: var(--acc-role-text);
}

/* ── Back link ───────────────────────────────── */
.acc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--acc-back-text);
    font-size: 0.875rem;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: color 0.2s;
}

    .acc-back:hover {
        color: var(--acc-back-hover-text);
    }

/* ── Password strength ───────────────────────── */
.acc-pwd-bars {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.acc-pwd-bar {
    height: 3px;
    flex: 1;
    border-radius: 2px;
    background: var(--acc-bar-empty);
    transition: background 0.3s;
}

    .acc-pwd-bar.weak {
        background: var(--acc-bar-weak);
    }

    .acc-pwd-bar.medium {
        background: var(--acc-bar-medium);
    }

    .acc-pwd-bar.strong {
        background: var(--acc-bar-strong);
    }

/* ── Tenant card (Mis Consultorios) ─────────── */
.acc-tenant-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    background: var(--acc-tenant-card-bg);
    border: 1px solid var(--acc-tenant-card-border);
    transition: background 0.2s, border-color 0.2s;
}

    .acc-tenant-card:hover {
        background: var(--acc-tenant-card-hover-bg);
        border-color: var(--acc-tenant-card-hover-border);
    }

.acc-tenant-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--acc-tenant-icon-bg);
    color: var(--acc-tenant-icon-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acc-tenant-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--acc-tenant-name);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-tenant-sub {
    font-size: 0.75rem;
    color: var(--acc-tenant-sub);
    margin-top: 2px;
}

.acc-tenant-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--acc-tenant-btn-bg);
    border: 1px solid var(--acc-tenant-btn-border);
    color: var(--acc-tenant-btn-text);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .acc-tenant-btn:hover {
        background: var(--acc-tenant-btn-hover-bg);
        border-color: var(--acc-tenant-btn-hover-border);
        color: var(--acc-tenant-btn-hover-text);
    }

/* ── Empty state ─────────────────────────────── */
.acc-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--acc-empty-icon-bg);
    color: var(--acc-empty-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

/* ── Mis Turnos — status badges ─────────────── */
.acc-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
}

.acc-status-confirmed {
    background: var(--acc-status-confirmed-bg);
    color: var(--acc-status-confirmed-text);
}

.acc-status-inprog {
    background: var(--acc-status-inprog-bg);
    color: var(--acc-status-inprog-text);
}

.acc-status-sched {
    background: var(--acc-status-sched-bg);
    color: var(--acc-status-sched-text);
}

.acc-status-default {
    background: var(--acc-status-default-bg);
    color: var(--acc-status-default-text);
}

/* ═══════════════════════════════════════════════════════════════
   MI PLAN + MI FACTURACIÓN — páginas de suscripción
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Plan hero */
    --mp-hero-border: rgba(148,163,184,0.10);
    --mp-hero-free-bg: linear-gradient(135deg,rgba(148,163,184,0.06) 0%,rgba(15,23,42,0.8) 100%);
    --mp-hero-pro-bg: linear-gradient(135deg,rgba(29,158,117,0.12) 0%,rgba(15,23,42,0.8) 100%);
    --mp-hero-pro-border: rgba(29,158,117,0.20);
    --mp-hero-biz-bg: linear-gradient(135deg,rgba(16,185,129,0.10) 0%,rgba(15,23,42,0.8) 100%);
    --mp-hero-biz-border: rgba(16,185,129,0.20);
    --mp-hero-free-glow: #94a3b8;
    --mp-hero-pro-glow: #1D9E75;
    --mp-hero-biz-glow: #10b981;
    --mp-hero-name: #f1f5f9;
    --mp-hero-sub: #94a3b8;
    --mp-hero-meta-text: #64748b;
    --mp-hero-meta-strong: #cbd5e1;
    /* Plan badges */
    --mp-badge-free-bg: rgba(148,163,184,0.12);
    --mp-badge-free-text: #94a3b8;
    --mp-badge-pro-bg: rgba(29,158,117,0.15);
    --mp-badge-pro-text: #5DCAA5;
    --mp-badge-biz-bg: rgba(16,185,129,0.12);
    --mp-badge-biz-text: #34d399;
    /* Status badges */
    --mp-status-active-bg: rgba(16,185,129,0.10);
    --mp-status-active-border: rgba(16,185,129,0.20);
    --mp-status-active-text: #34d399;
    --mp-status-inactive-bg: rgba(239,68,68,0.10);
    --mp-status-inactive-border: rgba(239,68,68,0.20);
    --mp-status-inactive-text: #f87171;
    --mp-dot-active: #34d399;
    --mp-dot-inactive: #f87171;
    /* Upgrade banner */
    --mp-upgrade-bg: rgba(29,158,117,0.07);
    --mp-upgrade-border: rgba(29,158,117,0.20);
    --mp-upgrade-text: #cbd5e1;
    --mp-upgrade-strong: #f1f5f9;
    /* Upgrade btn */
    --mp-btn-upgrade-bg: linear-gradient(135deg,#1D9E75,#0F6E56);
    --mp-btn-upgrade-shadow: rgba(29,158,117,0.30);
    --mp-btn-upgrade-hover-shadow: rgba(29,158,117,0.45);
    /* Section title */
    --mp-section-title: #64748b;
    --mp-section-line: rgba(148,163,184,0.08);
    /* Usage / stat cards */
    --mp-card-bg: rgba(255,255,255,0.02);
    --mp-card-border: rgba(148,163,184,0.08);
    --mp-card-hover: rgba(148,163,184,0.15);
    --mp-card-label: #64748b;
    --mp-card-value: #f1f5f9;
    --mp-card-sub: #475569;
    --mp-card-money: #34d399;
    /* Usage bar */
    --mp-bar-track: rgba(148,163,184,0.10);
    --mp-bar-ok: linear-gradient(90deg,#1D9E75,#5DCAA5);
    --mp-bar-warning: linear-gradient(90deg,#f59e0b,#fcd34d);
    --mp-bar-danger: linear-gradient(90deg,#ef4444,#f87171);
    --mp-bar-full: #475569;
    --mp-bar-label: #475569;
    /* Usage icon colors */
    --mp-icon-appt-bg: rgba(29,158,117,0.10);
    --mp-icon-appt-stroke: #5DCAA5;
    --mp-icon-pat-bg: rgba(14,165,233,0.10);
    --mp-icon-pat-stroke: #38bdf8;
    --mp-icon-prof-bg: rgba(16,185,129,0.10);
    --mp-icon-prof-stroke: #34d399;
    --mp-icon-sales-bg: rgba(245,158,11,0.10);
    --mp-icon-sales-stroke: #fbbf24;
    --mp-card-sales-val: #fbbf24;
    /* Feature items */
    --mp-feat-bg: rgba(255,255,255,0.02);
    --mp-feat-border: rgba(148,163,184,0.06);
    --mp-feat-included-text: #cbd5e1;
    --mp-feat-excluded-text: #334155;
    --mp-feat-check: #34d399;
    --mp-feat-cross: #334155;
    --mp-feat-upgrade-tag: #1D9E75;
    /* Facturación — info banner */
    --mf-info-bg: rgba(14,165,233,0.06);
    --mf-info-border: rgba(14,165,233,0.15);
    --mf-info-icon-bg: rgba(14,165,233,0.10);
    --mf-info-icon: #38bdf8;
    --mf-info-title: #e2e8f0;
    --mf-info-sub: #94a3b8;
    --mf-info-strong: #cbd5e1;
    /* Upload card */
    --mf-upload-bg: rgba(255,255,255,0.02);
    --mf-upload-border: rgba(148,163,184,0.08);
    /* Drop zone */
    --mf-drop-border: rgba(148,163,184,0.20);
    --mf-drop-bg: rgba(255,255,255,0.01);
    --mf-drop-hover-border: rgba(29,158,117,0.40);
    --mf-drop-hover-bg: rgba(29,158,117,0.04);
    --mf-drop-ok-border: rgba(16,185,129,0.40);
    --mf-drop-ok-bg: rgba(16,185,129,0.04);
    --mf-drop-title: #cbd5e1;
    --mf-drop-sub: #64748b;
    --mf-drop-file: #34d399;
    /* Payment row */
    --mf-pay-bg: rgba(255,255,255,0.02);
    --mf-pay-border: rgba(148,163,184,0.07);
    --mf-pay-hover: rgba(148,163,184,0.14);
    --mf-pay-period: #e2e8f0;
    --mf-pay-meta: #64748b;
    --mf-pay-amount: #f1f5f9;
    /* Payment dots */
    --mf-dot-pending: #fcd34d;
    --mf-dot-pending-glow: rgba(252,211,77,0.5);
    --mf-dot-verified: #34d399;
    --mf-dot-verified-glow: rgba(52,211,153,0.5);
    --mf-dot-rejected: #f87171;
    --mf-dot-rejected-glow: rgba(248,113,113,0.5);
    /* Payment badges */
    --mf-badge-pending-bg: rgba(252,211,77,0.10);
    --mf-badge-pending-text: #fcd34d;
    --mf-badge-verified-bg: rgba(52,211,153,0.10);
    --mf-badge-verified-text: #34d399;
    --mf-badge-rejected-bg: rgba(248,113,113,0.10);
    --mf-badge-rejected-text: #f87171;
    /* Receipt btn */
    --mf-receipt-bg: rgba(29,158,117,0.08);
    --mf-receipt-border: rgba(29,158,117,0.15);
    --mf-receipt-text: #5DCAA5;
    --mf-receipt-hover: rgba(29,158,117,0.15);
    /* Rejection note */
    --mf-reject-note-bg: rgba(248,113,113,0.07);
    --mf-reject-note-border: rgba(248,113,113,0.15);
    --mf-reject-note-text: #fca5a5;
    /* Empty */
    --mf-empty-bg: rgba(255,255,255,0.01);
    --mf-empty-border: rgba(148,163,184,0.06);
    --mf-empty-title: #94a3b8;
    --mf-empty-sub: #475569;
    /* Alerts */
    --mf-alert-ok-bg: rgba(16,185,129,0.08);
    --mf-alert-ok-border: rgba(16,185,129,0.20);
    --mf-alert-ok-text: #6ee7b7;
    --mf-alert-err-bg: rgba(239,68,68,0.08);
    --mf-alert-err-border: rgba(239,68,68,0.20);
    --mf-alert-err-text: #fca5a5;
    /* Shared input (facturación) */
    --mf-input-bg: rgba(3,4,10,0.6);
    --mf-input-border: rgba(148,163,184,0.12);
    --mf-input-focus-border: rgba(29,158,117,0.50);
    --mf-input-focus-ring: rgba(29,158,117,0.10);
    --mf-input-text: #f1f5f9;
    --mf-input-placeholder: #475569;
    /* Btns (facturación) */
    --mf-btn-primary-bg: linear-gradient(135deg,#1D9E75,#0F6E56);
    --mf-btn-primary-shadow: rgba(29,158,117,0.28);
    --mf-btn-primary-hover: linear-gradient(135deg,#5DCAA5,#1D9E75);
    --mf-btn-sec-bg: transparent;
    --mf-btn-sec-border: rgba(148,163,184,0.15);
    --mf-btn-sec-text: #94a3b8;
    --mf-btn-sec-hover-text: #cbd5e1;
    --mf-btn-sec-hover-bg: rgba(255,255,255,0.04);
}

[data-mode="light"] {
    --mp-hero-border: rgba(0,0,0,0.08);
    --mp-hero-free-bg: linear-gradient(135deg,rgba(148,163,184,0.06) 0%,rgba(241,245,249,0.9) 100%);
    --mp-hero-pro-bg: linear-gradient(135deg,rgba(29,158,117,0.08) 0%,rgba(241,245,249,0.9) 100%);
    --mp-hero-pro-border: rgba(29,158,117,0.15);
    --mp-hero-biz-bg: linear-gradient(135deg,rgba(16,185,129,0.07) 0%,rgba(241,245,249,0.9) 100%);
    --mp-hero-biz-border: rgba(16,185,129,0.15);
    --mp-hero-free-glow: #94a3b8;
    --mp-hero-pro-glow: #1D9E75;
    --mp-hero-biz-glow: #10b981;
    --mp-hero-name: var(--alma-text);
    --mp-hero-sub: var(--alma-text-muted);
    --mp-hero-meta-text: var(--alma-text-muted);
    --mp-hero-meta-strong: var(--alma-text-sub);
    --mp-badge-free-bg: rgba(148,163,184,0.10);
    --mp-badge-free-text: var(--alma-text-sub);
    --mp-badge-pro-bg: rgba(29,158,117,0.10);
    --mp-badge-pro-text: #047857;
    --mp-badge-biz-bg: rgba(16,185,129,0.10);
    --mp-badge-biz-text: #059669;
    --mp-status-active-bg: rgba(16,185,129,0.07);
    --mp-status-active-border: rgba(16,185,129,0.18);
    --mp-status-active-text: #047857;
    --mp-status-inactive-bg: rgba(239,68,68,0.07);
    --mp-status-inactive-border: rgba(239,68,68,0.18);
    --mp-status-inactive-text: #b91c1c;
    --mp-dot-active: #059669;
    --mp-dot-inactive: #dc2626;
    --mp-upgrade-bg: rgba(29,158,117,0.05);
    --mp-upgrade-border: rgba(29,158,117,0.15);
    --mp-upgrade-text: var(--alma-text-sub);
    --mp-upgrade-strong: var(--alma-text);
    --mp-btn-upgrade-bg: linear-gradient(135deg,#1D9E75,#0F6E56);
    --mp-btn-upgrade-shadow: rgba(29,158,117,0.22);
    --mp-btn-upgrade-hover-shadow: rgba(29,158,117,0.38);
    --mp-section-title: var(--alma-text-muted);
    --mp-section-line: var(--alma-border);
    --mp-card-bg: var(--alma-bg-card);
    --mp-card-border: var(--alma-border);
    --mp-card-hover: var(--alma-border-2);
    --mp-card-label: var(--alma-text-muted);
    --mp-card-value: var(--alma-text);
    --mp-card-sub: var(--alma-text-muted);
    --mp-card-money: #047857;
    --mp-bar-track: rgba(0,0,0,0.07);
    --mp-bar-ok: linear-gradient(90deg,#1D9E75,#5DCAA5);
    --mp-bar-warning: linear-gradient(90deg,#d97706,#f59e0b);
    --mp-bar-danger: linear-gradient(90deg,#dc2626,#ef4444);
    --mp-bar-full: #94a3b8;
    --mp-bar-label: var(--alma-text-muted);
    --mp-icon-appt-bg: rgba(29,158,117,0.08);
    --mp-icon-appt-stroke: #047857;
    --mp-icon-pat-bg: rgba(14,165,233,0.08);
    --mp-icon-pat-stroke: #0ea5e9;
    --mp-icon-prof-bg: rgba(16,185,129,0.08);
    --mp-icon-prof-stroke: #059669;
    --mp-icon-sales-bg: rgba(245,158,11,0.08);
    --mp-icon-sales-stroke: #d97706;
    --mp-card-sales-val: #b45309;
    --mp-feat-bg: var(--alma-bg-card);
    --mp-feat-border: var(--alma-border);
    --mp-feat-included-text: var(--alma-text-sub);
    --mp-feat-excluded-text: var(--alma-text-muted);
    --mp-feat-check: #059669;
    --mp-feat-cross: var(--alma-text-muted);
    --mp-feat-upgrade-tag: #047857;
    --mf-info-bg: rgba(14,165,233,0.05);
    --mf-info-border: rgba(14,165,233,0.12);
    --mf-info-icon-bg: rgba(14,165,233,0.08);
    --mf-info-icon: #0ea5e9;
    --mf-info-title: var(--alma-text);
    --mf-info-sub: var(--alma-text-sub);
    --mf-info-strong: var(--alma-text);
    --mf-upload-bg: var(--alma-bg-card);
    --mf-upload-border: var(--alma-border);
    --mf-drop-border: rgba(0,0,0,0.14);
    --mf-drop-bg: rgba(0,0,0,0.01);
    --mf-drop-hover-border: rgba(29,158,117,0.35);
    --mf-drop-hover-bg: rgba(29,158,117,0.04);
    --mf-drop-ok-border: rgba(16,185,129,0.35);
    --mf-drop-ok-bg: rgba(16,185,129,0.04);
    --mf-drop-title: var(--alma-text-sub);
    --mf-drop-sub: var(--alma-text-muted);
    --mf-drop-file: #059669;
    --mf-pay-bg: var(--alma-bg-card);
    --mf-pay-border: var(--alma-border);
    --mf-pay-hover: var(--alma-border-2);
    --mf-pay-period: var(--alma-text);
    --mf-pay-meta: var(--alma-text-muted);
    --mf-pay-amount: var(--alma-text);
    --mf-dot-pending: #b45309;
    --mf-dot-pending-glow: rgba(180,83,9,0.4);
    --mf-dot-verified: #059669;
    --mf-dot-verified-glow: rgba(5,150,105,0.4);
    --mf-dot-rejected: #dc2626;
    --mf-dot-rejected-glow: rgba(220,38,38,0.4);
    --mf-badge-pending-bg: rgba(202,138,4,0.08);
    --mf-badge-pending-text: #b45309;
    --mf-badge-verified-bg: rgba(5,150,105,0.08);
    --mf-badge-verified-text: #047857;
    --mf-badge-rejected-bg: rgba(220,38,38,0.07);
    --mf-badge-rejected-text: #b91c1c;
    --mf-receipt-bg: rgba(29,158,117,0.07);
    --mf-receipt-border: rgba(29,158,117,0.14);
    --mf-receipt-text: #047857;
    --mf-receipt-hover: rgba(29,158,117,0.14);
    --mf-reject-note-bg: rgba(248,113,113,0.05);
    --mf-reject-note-border: rgba(248,113,113,0.12);
    --mf-reject-note-text: #b91c1c;
    --mf-empty-bg: var(--alma-bg-card);
    --mf-empty-border: var(--alma-border);
    --mf-empty-title: var(--alma-text-sub);
    --mf-empty-sub: var(--alma-text-muted);
    --mf-alert-ok-bg: rgba(16,185,129,0.06);
    --mf-alert-ok-border: rgba(16,185,129,0.15);
    --mf-alert-ok-text: #047857;
    --mf-alert-err-bg: rgba(239,68,68,0.06);
    --mf-alert-err-border: rgba(239,68,68,0.15);
    --mf-alert-err-text: #b91c1c;
    --mf-input-bg: #fff;
    --mf-input-border: rgba(0,0,0,0.12);
    --mf-input-focus-border: rgba(29,158,117,0.45);
    --mf-input-focus-ring: rgba(29,158,117,0.08);
    --mf-input-text: var(--alma-text);
    --mf-input-placeholder: #94a3b8;
    --mf-btn-primary-bg: linear-gradient(135deg,#1D9E75,#0F6E56);
    --mf-btn-primary-shadow: rgba(29,158,117,0.22);
    --mf-btn-primary-hover: linear-gradient(135deg,#5DCAA5,#1D9E75);
    --mf-btn-sec-bg: transparent;
    --mf-btn-sec-border: rgba(0,0,0,0.12);
    --mf-btn-sec-text: var(--alma-text-muted);
    --mf-btn-sec-hover-text: var(--alma-text-sub);
    --mf-btn-sec-hover-bg: rgba(0,0,0,0.03);
}

/* ═════════════ MI PLAN ═════════════ */

/* Loading */
.mp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.mp-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(29,158,117,0.2);
    border-top-color: #1D9E75;
    animation: mp-spin 0.8s linear infinite;
}

@keyframes mp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Plan hero */
.mp-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--mp-hero-border);
}

    .mp-hero.free {
        background: var(--mp-hero-free-bg);
    }

    .mp-hero.pro {
        background: var(--mp-hero-pro-bg);
        border-color: var(--mp-hero-pro-border);
    }

    .mp-hero.biz {
        background: var(--mp-hero-biz-bg);
        border-color: var(--mp-hero-biz-border);
    }

.mp-hero-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.12;
    top: -80px;
    right: -80px;
    pointer-events: none;
}

.mp-hero.free .mp-hero-glow {
    background: var(--mp-hero-free-glow);
}

.mp-hero.pro .mp-hero-glow {
    background: var(--mp-hero-pro-glow);
}

.mp-hero.biz .mp-hero-glow {
    background: var(--mp-hero-biz-glow);
}

.mp-hero-name {
    font-family: 'Syne',sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--mp-hero-name);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.mp-hero-sub {
    font-size: 0.85rem;
    color: var(--mp-hero-sub);
}

.mp-hero-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.mp-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: var(--mp-hero-meta-text);
}

    .mp-hero-meta-item strong {
        color: var(--mp-hero-meta-strong);
        font-weight: 500;
    }

/* Plan badge (hero) */
.mp-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

    .mp-plan-badge.free {
        background: var(--mp-badge-free-bg);
        color: var(--mp-badge-free-text);
    }

    .mp-plan-badge.pro {
        background: var(--mp-badge-pro-bg);
        color: var(--mp-badge-pro-text);
    }

    .mp-plan-badge.biz {
        background: var(--mp-badge-biz-bg);
        color: var(--mp-badge-biz-text);
    }

/* Status badge */
.mp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}

    .mp-status-badge.active {
        background: var(--mp-status-active-bg);
        border-color: var(--mp-status-active-border);
        color: var(--mp-status-active-text);
    }

    .mp-status-badge.inactive {
        background: var(--mp-status-inactive-bg);
        border-color: var(--mp-status-inactive-border);
        color: var(--mp-status-inactive-text);
    }

.mp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

    .mp-dot.active {
        background: var(--mp-dot-active);
    }

    .mp-dot.inactive {
        background: var(--mp-dot-inactive);
    }

/* Upgrade banner */
.mp-upgrade-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background: var(--mp-upgrade-bg);
    border: 1px solid var(--mp-upgrade-border);
    margin-bottom: 1.5rem;
}

.mp-upgrade-text {
    font-size: 0.875rem;
    color: var(--mp-upgrade-text);
}

    .mp-upgrade-text strong {
        color: var(--mp-upgrade-strong);
        font-weight: 600;
    }

.mp-btn-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 9px;
    background: var(--mp-btn-upgrade-bg);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 16px var(--mp-btn-upgrade-shadow);
    text-decoration: none;
    white-space: nowrap;
}

    .mp-btn-upgrade:hover {
        transform: translateY(-1px);
        box-shadow: 0 0 24px var(--mp-btn-upgrade-hover-shadow);
    }

/* Section title */
.mp-section-title {
    font-family: 'Syne',sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mp-section-title);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .mp-section-title::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--mp-section-line);
    }

/* Usage / stat cards */
.mp-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mp-card {
    background: var(--mp-card-bg);
    border: 1px solid var(--mp-card-border);
    border-radius: 14px;
    padding: 1.25rem;
    transition: border-color 0.2s;
}

    .mp-card:hover {
        border-color: var(--mp-card-hover);
    }

.mp-card-label {
    font-size: 0.78rem;
    color: var(--mp-card-label);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
}

.mp-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mp-card-icon-appt {
    background: var(--mp-icon-appt-bg);
}

.mp-card-icon-pat {
    background: var(--mp-icon-pat-bg);
}

.mp-card-icon-prof {
    background: var(--mp-icon-prof-bg);
}

.mp-card-icon-sales {
    background: var(--mp-icon-sales-bg);
}

.mp-card-value {
    font-family: 'Syne',sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-card-value);
    line-height: 1;
    margin-bottom: 4px;
}

    .mp-card-value.money {
        color: var(--mp-card-sales-val);
    }

.mp-card-sub {
    font-size: 0.72rem;
    color: var(--mp-card-sub);
}

.mp-stat-label {
    font-size: 0.72rem;
    color: var(--mp-card-label);
    margin-bottom: 4px;
}

.mp-stat-value {
    font-family: 'Syne',sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mp-card-value);
    line-height: 1;
}

    .mp-stat-value.money {
        color: var(--mp-card-money);
    }

.mp-pct-label {
    font-size: 0.7rem;
}

/* Usage bar */
.mp-bar-wrap {
    margin-top: 10px;
}

.mp-bar-track {
    height: 4px;
    border-radius: 2px;
    background: var(--mp-bar-track);
    overflow: hidden;
}

.mp-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

    .mp-bar-fill.ok {
        background: var(--mp-bar-ok);
    }

    .mp-bar-fill.warning {
        background: var(--mp-bar-warning);
    }

    .mp-bar-fill.danger {
        background: var(--mp-bar-danger);
    }

    .mp-bar-fill.full {
        background: var(--mp-bar-full);
    }

.mp-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.68rem;
    color: var(--mp-bar-label);
}

/* Feature items */
.mp-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 1.5rem;
}

@media (max-width:560px) {
    .mp-features-grid {
        grid-template-columns: 1fr;
    }
}

.mp-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--mp-feat-bg);
    border: 1px solid var(--mp-feat-border);
    font-size: 0.82rem;
}

    .mp-feature-item.included {
        color: var(--mp-feat-included-text);
    }

    .mp-feature-item.excluded {
        color: var(--mp-feat-excluded-text);
    }

.mp-feature-check {
    color: var(--mp-feat-check);
    flex-shrink: 0;
}

.mp-feature-cross {
    color: var(--mp-feat-cross);
    flex-shrink: 0;
}

.mp-feature-upgrade-tag {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--mp-feat-upgrade-tag);
    white-space: nowrap;
}

/* ═════════════ MI FACTURACIÓN ═════════════ */

/* Info banner */
.mf-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background: var(--mf-info-bg);
    border: 1px solid var(--mf-info-border);
    margin-bottom: 1.5rem;
}

.mf-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mf-info-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mf-info-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mf-info-title);
    margin-bottom: 3px;
}

.mf-info-sub {
    font-size: 0.8rem;
    color: var(--mf-info-sub);
    line-height: 1.5;
}

    .mf-info-sub strong {
        color: var(--mf-info-strong);
    }

/* Upload card */
.mf-upload-card {
    background: var(--mf-upload-bg);
    border: 1px solid var(--mf-upload-border);
    border-radius: 18px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

/* Drop zone */
.mf-drop {
    border: 1.5px dashed var(--mf-drop-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--mf-drop-bg);
    position: relative;
    margin-bottom: 1rem;
}

    .mf-drop:hover {
        border-color: var(--mf-drop-hover-border);
        background: var(--mf-drop-hover-bg);
    }

    .mf-drop.uploaded {
        border-color: var(--mf-drop-ok-border);
        background: var(--mf-drop-ok-bg);
        border-style: solid;
    }

    .mf-drop input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

.mf-drop-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mf-drop-title);
    margin-bottom: 4px;
}

.mf-drop-sub {
    font-size: 0.75rem;
    color: var(--mf-drop-sub);
}

.mf-drop-file {
    font-size: 0.8rem;
    color: var(--mf-drop-file);
    margin-top: 6px;
    font-weight: 500;
}

/* Inputs */
.mf-input {
    width: 100%;
    padding: 10px 13px;
    box-sizing: border-box;
    background: var(--mf-input-bg);
    border: 1px solid var(--mf-input-border);
    border-radius: 9px;
    color: var(--mf-input-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .mf-input:focus {
        border-color: var(--mf-input-focus-border);
        box-shadow: 0 0 0 3px var(--mf-input-focus-ring);
    }

    .mf-input::placeholder {
        color: var(--mf-input-placeholder);
    }

/* Btns */
.mf-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 9px;
    background: var(--mf-btn-primary-bg);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 18px var(--mf-btn-primary-shadow);
}

    .mf-btn-primary:hover:not(:disabled) {
        background: var(--mf-btn-primary-hover);
        transform: translateY(-1px);
    }

    .mf-btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.mf-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 9px;
    background: var(--mf-btn-sec-bg);
    border: 1px solid var(--mf-btn-sec-border);
    color: var(--mf-btn-sec-text);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .mf-btn-secondary:hover {
        background: var(--mf-btn-sec-hover-bg);
        color: var(--mf-btn-sec-hover-text);
    }

/* Payment row */
.mf-payments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mf-pay-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--mf-pay-bg);
    border: 1px solid var(--mf-pay-border);
    transition: border-color 0.2s;
}

    .mf-pay-row:hover {
        border-color: var(--mf-pay-hover);
    }

.mf-pay-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .mf-pay-dot.pending {
        background: var(--mf-dot-pending);
        box-shadow: 0 0 6px var(--mf-dot-pending-glow);
    }

    .mf-pay-dot.verified {
        background: var(--mf-dot-verified);
        box-shadow: 0 0 6px var(--mf-dot-verified-glow);
    }

    .mf-pay-dot.rejected {
        background: var(--mf-dot-rejected);
        box-shadow: 0 0 6px var(--mf-dot-rejected-glow);
    }

.mf-pay-period {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mf-pay-period);
}

.mf-pay-meta {
    font-size: 0.72rem;
    color: var(--mf-pay-meta);
    margin-top: 2px;
}

.mf-pay-amount {
    font-family: 'Syne',sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mf-pay-amount);
    white-space: nowrap;
}

.mf-pay-badge {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

    .mf-pay-badge.pending {
        background: var(--mf-badge-pending-bg);
        color: var(--mf-badge-pending-text);
    }

    .mf-pay-badge.verified {
        background: var(--mf-badge-verified-bg);
        color: var(--mf-badge-verified-text);
    }

    .mf-pay-badge.rejected {
        background: var(--mf-badge-rejected-bg);
        color: var(--mf-badge-rejected-text);
    }

.mf-receipt-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 7px;
    background: var(--mf-receipt-bg);
    border: 1px solid var(--mf-receipt-border);
    color: var(--mf-receipt-text);
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

    .mf-receipt-btn:hover {
        background: var(--mf-receipt-hover);
    }

.mf-reject-note {
    margin-top: 5px;
    padding: 6px 10px;
    border-radius: 7px;
    background: var(--mf-reject-note-bg);
    border: 1px solid var(--mf-reject-note-border);
    font-size: 0.72rem;
    color: var(--mf-reject-note-text);
}

/* Alerts */
.mf-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.mf-alert-ok {
    background: var(--mf-alert-ok-bg);
    border-color: var(--mf-alert-ok-border);
    color: var(--mf-alert-ok-text);
}

.mf-alert-err {
    background: var(--mf-alert-err-bg);
    border-color: var(--mf-alert-err-border);
    color: var(--mf-alert-err-text);
}

/* Empty */
.mf-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--mf-empty-bg);
    border: 1px solid var(--mf-empty-border);
    border-radius: 14px;
}

.mf-empty-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mf-empty-title);
    margin-bottom: 4px;
}

.mf-empty-sub {
    font-size: 0.78rem;
    color: var(--mf-empty-sub);
}

/* ═══════════════════════════════════════════════════════════════
   PUBLIC / AUTH PAGES — Login, Register, CompletarRegistro,
   GoogleAuthPage, Unauthorized, Home, AdquirirAlmaSalud, etc.
   Solo variables — la estructura (layout/spacing) de cada página
   vive en el <style> del propio .razor. Estas páginas son dark-only
   hoy; el bloque light replica el dark hasta que se diseñe una
   variante propia.
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Texto */
    --pub-heading: #f1f5f9;
    --pub-text-dim: #64748b;
    --pub-text-faint: #475569;
    --pub-text-faintest: #1e293b;
    --pub-placeholder: #334155;
    /* Cards / inputs */
    --pub-card-bg: rgba(255,255,255,0.03);
    --pub-card-border: rgba(148,163,184,0.1);
    --pub-card-shadow: rgba(0,0,0,0.4);
    --pub-input-bg: rgba(3,4,10,0.6);
    --pub-input-border: rgba(148,163,184,0.12);
    --pub-divider: rgba(148,163,184,0.08);
    --pub-btn-secondary-bg: rgba(255,255,255,0.04);
    --pub-btn-secondary-hover-bg: rgba(255,255,255,0.07);
    --pub-spinner-track: rgba(255,255,255,0.3);
    /* Acento (familia --alma-accent-grad-*) */
    --pub-accent-soft: rgba(29,158,117,0.08);
    --pub-accent-soft-border: rgba(29,158,117,0.25);
    --pub-accent-badge-bg: rgba(29,158,117,0.1);
    --pub-accent-badge-border: rgba(29,158,117,0.2);
    --pub-accent-focus-border: rgba(29,158,117,0.5);
    --pub-accent-focus-ring: rgba(29,158,117,0.1);
    /* Danger / error */
    --pub-danger-bg: rgba(239,68,68,0.08);
    --pub-danger-border: rgba(239,68,68,0.2);
    --pub-danger-text: #fca5a5;
    --pub-danger-icon: #f87171;
    --pub-success-bg: rgba(16,185,129,0.08);
    --pub-success-border: rgba(16,185,129,0.2);
    --pub-success-text: #6ee7b7;
    --pub-success-icon: #34d399;
    --pub-accent-circle-bg: rgba(29,158,117,0.15);
    --pub-text-muted-purple: #7c6ba0;
    /* Orbes decorativos (uno por página, no son "el" acento) */
    --pub-orb-blue: #2563eb;
    --pub-orb-cyan: #0ea5e9;
    --pub-orb-purple: #8b5cf6;
    --pub-orb-red: #dc2626;
    --pub-grid-dot: rgba(139,92,246,0.1);
}

[data-mode="light"] {
    /* TODO: sin diseño light propio — igual al dark por ahora */
    --pub-heading: #f1f5f9;
    --pub-text-dim: #64748b;
    --pub-text-faint: #475569;
    --pub-text-faintest: #1e293b;
    --pub-placeholder: #334155;
    --pub-card-bg: rgba(255,255,255,0.03);
    --pub-card-border: rgba(148,163,184,0.1);
    --pub-card-shadow: rgba(0,0,0,0.4);
    --pub-input-bg: rgba(3,4,10,0.6);
    --pub-input-border: rgba(148,163,184,0.12);
    --pub-divider: rgba(148,163,184,0.08);
    --pub-btn-secondary-bg: rgba(255,255,255,0.04);
    --pub-btn-secondary-hover-bg: rgba(255,255,255,0.07);
    --pub-spinner-track: rgba(255,255,255,0.3);
    --pub-accent-soft: rgba(29,158,117,0.08);
    --pub-accent-soft-border: rgba(29,158,117,0.25);
    --pub-accent-badge-bg: rgba(29,158,117,0.1);
    --pub-accent-badge-border: rgba(29,158,117,0.2);
    --pub-accent-focus-border: rgba(29,158,117,0.5);
    --pub-accent-focus-ring: rgba(29,158,117,0.1);
    --pub-danger-bg: rgba(239,68,68,0.08);
    --pub-danger-border: rgba(239,68,68,0.2);
    --pub-danger-text: #fca5a5;
    --pub-danger-icon: #f87171;
    --pub-orb-blue: #2563eb;
    --pub-orb-purple: #8b5cf6;
    --pub-orb-red: #dc2626;
    --pub-grid-dot: rgba(139,92,246,0.1);
}

/* ═══════════════════════════════════════════════════════════════
   PUBLIC / AUTH PAGES — EXTENSIÓN
   Tokens agregados al migrar Home, AdquirirAlmaSalud, MiPagina,
   TenantHome, AdquireStep2Consultorio, GoogleAuthPage, Unauthorized.
   Mismo criterio: dark-only hoy, light replica el mismo valor.
   Agregar al final de dashboard.css
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* Texto */
    --pub-body-text: #e2e8f0;
    --pub-text-light: #cbd5e1;
    --pub-label-text: #cbd5e1;
    --pub-title-gradient-blue: #38bdf8;
    --pub-accent-contrast-text: #000000;
    /* Fondos / bordes genéricos */
    --pub-page-bg: rgba(3,4,10,0.92);
    --pub-panel-bg: rgba(255,255,255,0.02);
    --pub-card-bg-1: rgba(255,255,255,0.01);
    --pub-card-bg-2: rgba(255,255,255,0.02);
    --pub-card-border-soft: rgba(148,163,184,0.08);
    --pub-border-faint: rgba(148,163,184,0.06);
    --pub-border-faintest: rgba(148,163,184,0.05);
    --pub-border-white-soft: rgba(255,255,255,0.08);
    --pub-border-white-strong: rgba(255,255,255,0.18);
    --pub-outline-border: rgba(148,163,184,0.25);
    --pub-outline-hover-bg: rgba(148,163,184,0.08);
    --pub-outline-hover-border: rgba(148,163,184,0.45);
    --pub-info-bg: rgba(148,163,184,0.04);
    --pub-toggle-off-bg: rgba(148,163,184,0.15);
    --pub-input-bg-soft: rgba(3,4,10,0.4);
    --pub-fade-overlay: rgba(3,4,10,0.9);
    /* Botón primario "glass" (Home) */
    --pub-btn-primary-bg: rgba(15,110,86,0.70);
    --pub-btn-primary-hover-bg: rgba(19,128,101,0.70);
    --pub-btn-primary-shadow: rgba(15,110,86,0.25);
    /* Acento — variantes de alpha nuevas */
    --pub-accent-active-bg: rgba(29,158,117,0.2);
    --pub-accent-strong-border: rgba(29,158,117,0.6);
    --pub-accent-btn-bg: rgba(29,158,117,0.12);
    --pub-accent-bg-soft: rgba(29,158,117,0.12);
    --pub-accent-hover-bg: rgba(29,158,117,0.05);
    --pub-accent-list-hover-bg: rgba(29,158,117,0.06);
    --pub-accent-border-strong: rgba(29,158,117,0.35);
    --pub-accent-num-faint: rgba(29,158,117,0.4);
    --pub-accent-circle-border: rgba(29,158,117,0.3);
    --pub-accent-glow-hover: rgba(29,158,117,0.4);
    --pub-accent-tag-border: rgba(29,158,117,0.18);
    /* Success / warning / danger — variantes de alpha nuevas */
    --pub-success-icon-bg: rgba(16,185,129,0.15);
    --pub-success-badge-bg: rgba(16,185,129,0.12);
    --pub-warning-bg: rgba(245,158,11,0.08);
    --pub-warning-border: rgba(245,158,11,0.2);
    --pub-warning-text: #fbbf24;
    --pub-warning-icon: #fcd34d;
    --pub-danger-code: rgba(239,68,68,0.15);
    --pub-danger-grid-dot: rgba(239,68,68,0.07);
    /* Íconos multicolor de módulos (Home) */
    --pub-mod-teal-bg: rgba(20,184,166,0.12);    --pub-mod-teal-icon: #2dd4bf;
    --pub-mod-amber-bg: rgba(245,158,11,0.12);   --pub-mod-amber-icon: #fbbf24;
    --pub-mod-red-bg: rgba(239,68,68,0.12);
    --pub-mod-sky-bg: rgba(14,165,233,0.12);
    --pub-mod-purple-bg: rgba(168,85,247,0.12);  --pub-mod-purple-icon: #c084fc;
    --pub-mod-pink-bg: rgba(236,72,153,0.12);    --pub-mod-pink-icon: #f472b6;
    --pub-mod-green-bg: rgba(34,197,94,0.12);    --pub-mod-green-icon: #4ade80;
    /* Chips de especialidad (Home) */
    --pub-spec-estetica-bg: rgba(236,72,153,0.15);
    --pub-spec-psicologia-bg: rgba(29,158,117,0.15);
    --pub-spec-kinesiologia-bg: rgba(20,184,166,0.15);
    --pub-spec-nutricion-bg: rgba(34,197,94,0.15);
    --pub-spec-odontologia-bg: rgba(14,165,233,0.15);
    --pub-spec-medicina-bg: rgba(245,158,11,0.15);
    --pub-spec-veterinaria-bg: rgba(168,85,247,0.15);
    /* Selector de tema de página pública del tenant (MiPagina.razor) —
       ESTO es el picker "dark/pink/blue/..." de la página pública del
       consultorio, no confundir con el modo dark/light de la app. */
    --pub-theme-dark-bg:#03040a;   --pub-theme-dark-accent:#1D9E75;   --pub-theme-dark-accent-light:#5DCAA5;
    --pub-theme-pink-bg:#0a0307;   --pub-theme-pink-accent:#ec4899;   --pub-theme-pink-accent-light:#f9a8d4;
    --pub-theme-blue-bg:#030509;   --pub-theme-blue-accent:#3b82f6;   --pub-theme-blue-accent-light:#93c5fd;
    --pub-theme-teal-bg:#030a09;   --pub-theme-teal-accent:#14b8a6;   --pub-theme-teal-accent-light:#5eead4;
    --pub-theme-red-bg:#0a0303;    --pub-theme-red-accent:#ef4444;    --pub-theme-red-accent-light:#fca5a5;
    --pub-theme-yellow-bg:#09070a; --pub-theme-yellow-accent:#f59e0b; --pub-theme-yellow-accent-light:#fcd34d;
    --pub-theme-green-bg:#030a05;  --pub-theme-green-accent:#22c55e;  --pub-theme-green-accent-light:#86efac;
    --pub-theme-white-bg:#f8fafc;  --pub-theme-white-accent:#1D9E75;  --pub-theme-white-accent-light:#0F6E56;

    /* --- Wizard "Adquirir AlmaSalud" (--aq-*) --- */
    --aq-circle-border: rgba(148,163,184,0.2);
    --aq-circle-active-glow: rgba(29,158,117,0.4);
    --aq-line-done-bg: rgba(16,185,129,0.35);
    --aq-biz-grad-1: #059669;
    --aq-accent-strong-border: rgba(29,158,117,0.4);
    --aq-accent-faint-bg: rgba(29,158,117,0.04);
    --aq-success-strong-border: rgba(16,185,129,0.4);
    --aq-success-faint-bg: rgba(16,185,129,0.04);
    --aq-danger-strong-border: rgba(239,68,68,0.35);
    --aq-notice-bg: rgba(245,158,11,0.07);
    --aq-notice-text: #fcd34d;
    --aq-btn-next-glow: rgba(29,158,117,0.28);
    --aq-success-icon-bg: rgba(16,185,129,0.1);
    --aq-pending-icon-bg: rgba(245,158,11,0.1);
    --aq-pending-icon-border: rgba(245,158,11,0.2);
    --aq-url-pill-hover-bg: rgba(16,185,129,0.14);
    --aq-goto-glow: rgba(16,185,129,0.3);

    /* --- Tabla de planes / precios (--pricing-*) --- */
    --pricing-badge-free-bg: rgba(148,163,184,0.12);
    --pricing-badge-pop-bg: rgba(29,158,117,0.15);
    --pricing-btn-border: rgba(148,163,184,0.15);
    --pricing-free-sel-border: rgba(148,163,184,0.3);
    --pricing-section-row-bg: rgba(148,163,184,0.03);
    --pricing-pro-col-bg: rgba(29,158,117,0.02);
}

[data-mode="light"] {
    /* TODO: sin diseño light propio — igual al dark por ahora */
    --pub-body-text: #e2e8f0;
    --pub-text-light: #cbd5e1;
    --pub-label-text: #cbd5e1;
    --pub-title-gradient-blue: #38bdf8;
    --pub-accent-contrast-text: #000000;
    --pub-page-bg: rgba(3,4,10,0.92);
    --pub-panel-bg: rgba(255,255,255,0.02);
    --pub-card-bg-1: rgba(255,255,255,0.01);
    --pub-card-bg-2: rgba(255,255,255,0.02);
    --pub-card-border-soft: rgba(148,163,184,0.08);
    --pub-border-faint: rgba(148,163,184,0.06);
    --pub-border-faintest: rgba(148,163,184,0.05);
    --pub-border-white-soft: rgba(255,255,255,0.08);
    --pub-border-white-strong: rgba(255,255,255,0.18);
    --pub-outline-border: rgba(148,163,184,0.25);
    --pub-outline-hover-bg: rgba(148,163,184,0.08);
    --pub-outline-hover-border: rgba(148,163,184,0.45);
    --pub-info-bg: rgba(148,163,184,0.04);
    --pub-toggle-off-bg: rgba(148,163,184,0.15);
    --pub-input-bg-soft: rgba(3,4,10,0.4);
    --pub-fade-overlay: rgba(3,4,10,0.9);
    --pub-btn-primary-bg: rgba(15,110,86,0.70);
    --pub-btn-primary-hover-bg: rgba(19,128,101,0.70);
    --pub-btn-primary-shadow: rgba(15,110,86,0.25);
    --pub-accent-active-bg: rgba(29,158,117,0.2);
    --pub-accent-strong-border: rgba(29,158,117,0.6);
    --pub-accent-btn-bg: rgba(29,158,117,0.12);
    --pub-accent-bg-soft: rgba(29,158,117,0.12);
    --pub-accent-hover-bg: rgba(29,158,117,0.05);
    --pub-accent-list-hover-bg: rgba(29,158,117,0.06);
    --pub-accent-border-strong: rgba(29,158,117,0.35);
    --pub-accent-num-faint: rgba(29,158,117,0.4);
    --pub-accent-circle-border: rgba(29,158,117,0.3);
    --pub-accent-glow-hover: rgba(29,158,117,0.4);
    --pub-accent-tag-border: rgba(29,158,117,0.18);
    --pub-success-icon-bg: rgba(16,185,129,0.15);
    --pub-success-badge-bg: rgba(16,185,129,0.12);
    --pub-warning-bg: rgba(245,158,11,0.08);
    --pub-warning-border: rgba(245,158,11,0.2);
    --pub-warning-text: #fbbf24;
    --pub-warning-icon: #fcd34d;
    --pub-danger-code: rgba(239,68,68,0.15);
    --pub-danger-grid-dot: rgba(239,68,68,0.07);
    --pub-mod-teal-bg: rgba(20,184,166,0.12);    --pub-mod-teal-icon: #2dd4bf;
    --pub-mod-amber-bg: rgba(245,158,11,0.12);   --pub-mod-amber-icon: #fbbf24;
    --pub-mod-red-bg: rgba(239,68,68,0.12);
    --pub-mod-sky-bg: rgba(14,165,233,0.12);
    --pub-mod-purple-bg: rgba(168,85,247,0.12);  --pub-mod-purple-icon: #c084fc;
    --pub-mod-pink-bg: rgba(236,72,153,0.12);    --pub-mod-pink-icon: #f472b6;
    --pub-mod-green-bg: rgba(34,197,94,0.12);    --pub-mod-green-icon: #4ade80;
    --pub-spec-estetica-bg: rgba(236,72,153,0.15);
    --pub-spec-psicologia-bg: rgba(29,158,117,0.15);
    --pub-spec-kinesiologia-bg: rgba(20,184,166,0.15);
    --pub-spec-nutricion-bg: rgba(34,197,94,0.15);
    --pub-spec-odontologia-bg: rgba(14,165,233,0.15);
    --pub-spec-medicina-bg: rgba(245,158,11,0.15);
    --pub-spec-veterinaria-bg: rgba(168,85,247,0.15);
    --pub-theme-dark-bg:#03040a;   --pub-theme-dark-accent:#1D9E75;   --pub-theme-dark-accent-light:#5DCAA5;
    --pub-theme-pink-bg:#0a0307;   --pub-theme-pink-accent:#ec4899;   --pub-theme-pink-accent-light:#f9a8d4;
    --pub-theme-blue-bg:#030509;   --pub-theme-blue-accent:#3b82f6;   --pub-theme-blue-accent-light:#93c5fd;
    --pub-theme-teal-bg:#030a09;   --pub-theme-teal-accent:#14b8a6;   --pub-theme-teal-accent-light:#5eead4;
    --pub-theme-red-bg:#0a0303;    --pub-theme-red-accent:#ef4444;    --pub-theme-red-accent-light:#fca5a5;
    --pub-theme-yellow-bg:#09070a; --pub-theme-yellow-accent:#f59e0b; --pub-theme-yellow-accent-light:#fcd34d;
    --pub-theme-green-bg:#030a05;  --pub-theme-green-accent:#22c55e;  --pub-theme-green-accent-light:#86efac;
    --pub-theme-white-bg:#f8fafc;  --pub-theme-white-accent:#1D9E75;  --pub-theme-white-accent-light:#0F6E56;
    --aq-circle-border: rgba(148,163,184,0.2);
    --aq-circle-active-glow: rgba(29,158,117,0.4);
    --aq-line-done-bg: rgba(16,185,129,0.35);
    --aq-biz-grad-1: #059669;
    --aq-accent-strong-border: rgba(29,158,117,0.4);
    --aq-accent-faint-bg: rgba(29,158,117,0.04);
    --aq-success-strong-border: rgba(16,185,129,0.4);
    --aq-success-faint-bg: rgba(16,185,129,0.04);
    --aq-danger-strong-border: rgba(239,68,68,0.35);
    --aq-notice-bg: rgba(245,158,11,0.07);
    --aq-notice-text: #fcd34d;
    --aq-btn-next-glow: rgba(29,158,117,0.28);
    --aq-success-icon-bg: rgba(16,185,129,0.1);
    --aq-pending-icon-bg: rgba(245,158,11,0.1);
    --aq-pending-icon-border: rgba(245,158,11,0.2);
    --aq-url-pill-hover-bg: rgba(16,185,129,0.14);
    --aq-goto-glow: rgba(16,185,129,0.3);
    --pricing-badge-free-bg: rgba(148,163,184,0.12);
    --pricing-badge-pop-bg: rgba(29,158,117,0.15);
    --pricing-btn-border: rgba(148,163,184,0.15);
    --pricing-free-sel-border: rgba(148,163,184,0.3);
    --pricing-section-row-bg: rgba(148,163,184,0.03);
    --pricing-pro-col-bg: rgba(29,158,117,0.02);
}

/* ═══════════════════════════════════════════════════════════════
   USER DROPDOWN — Shared/Components/Layout/UserDropdown.razor
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    --ud-pill-bg: rgba(15,110,86,0.12);
    --ud-pill-border: rgba(15,110,86,0.28);
    --ud-pill-hover-bg: rgba(15,110,86,0.18);
    --ud-pill-hover-border: rgba(15,110,86,0.45);
    --ud-avatar-ring: rgba(255,255,255,0.04);
    --ud-avatar-glow: rgba(15,110,86,0.25);
    --ud-menu-bg: #0f172a;
    --ud-menu-border: rgba(255,255,255,0.08);
    --ud-menu-shadow: rgba(0,0,0,0.45);
    --ud-menu-shadow-ring: rgba(255,255,255,0.03);
    --ud-menu-email: rgba(255,255,255,0.55);
    --ud-divider: rgba(255,255,255,0.05);
    --ud-section-label: rgba(255,255,255,0.45);
    --ud-tenant-icon-glow: rgba(15,110,86,0.20);
    --ud-danger-hover-bg: rgba(239,68,68,0.10);
}

[data-mode="light"] {
    --ud-pill-bg: rgba(15,110,86,0.12);
    --ud-pill-border: rgba(15,110,86,0.28);
    --ud-pill-hover-bg: rgba(15,110,86,0.18);
    --ud-pill-hover-border: rgba(15,110,86,0.45);
    --ud-avatar-ring: rgba(255,255,255,0.04);
    --ud-avatar-glow: rgba(15,110,86,0.25);
    --ud-menu-bg: #0f172a;
    --ud-menu-border: rgba(255,255,255,0.08);
    --ud-menu-shadow: rgba(0,0,0,0.45);
    --ud-menu-shadow-ring: rgba(255,255,255,0.03);
    --ud-menu-email: rgba(255,255,255,0.55);
    --ud-divider: rgba(255,255,255,0.05);
    --ud-section-label: rgba(255,255,255,0.45);
    --ud-tenant-icon-glow: rgba(15,110,86,0.20);
    --ud-danger-hover-bg: rgba(239,68,68,0.10);
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION DROPDOWN — Shared/Components/NotificationDropdown.razor
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    --notif-hover-text: #cbd5e1;
    --notif-hover-bg: rgba(30,41,59,0.6);
    --notif-item-border: rgba(30,41,59,0.4);
    --notif-item-hover-bg: rgba(30,41,59,0.3);
    --notif-badge-bg: #7c3aed;
    --notif-accent: #a78bfa;
    --notif-active-bg: rgba(124,58,237,0.3);
    --notif-active-text: #c4b5fd;
    --notif-active-border: rgba(124,58,237,0.4);
    --notif-unread-bg: rgba(46,16,101,0.2);
    --notif-dot: #8b5cf6;
    --notif-panel-bg: #0a0f1e;
    --notif-panel-border: rgba(51,65,85,0.5);
    --notif-panel-shadow: rgba(0,0,0,0.7);
    --notif-type-appt-bg: rgba(30,58,138,0.4);   --notif-type-appt-text: #60a5fa;
    --notif-type-sale-bg: rgba(20,83,45,0.4);    --notif-type-sale-text: #4ade80;
    --notif-type-stock-bg: rgba(120,53,15,0.4);
    --notif-type-error-bg: rgba(127,29,29,0.4);
    --notif-type-success-bg: rgba(6,78,59,0.4);
    --notif-type-admin-bg: rgba(76,29,149,0.4);
}

[data-mode="light"] {
    --notif-hover-text: #cbd5e1;
    --notif-hover-bg: rgba(30,41,59,0.6);
    --notif-item-border: rgba(30,41,59,0.4);
    --notif-item-hover-bg: rgba(30,41,59,0.3);
    --notif-badge-bg: #7c3aed;
    --notif-accent: #a78bfa;
    --notif-active-bg: rgba(124,58,237,0.3);
    --notif-active-text: #c4b5fd;
    --notif-active-border: rgba(124,58,237,0.4);
    --notif-unread-bg: rgba(46,16,101,0.2);
    --notif-dot: #8b5cf6;
    --notif-panel-bg: #0a0f1e;
    --notif-panel-border: rgba(51,65,85,0.5);
    --notif-panel-shadow: rgba(0,0,0,0.7);
    --notif-type-appt-bg: rgba(30,58,138,0.4);   --notif-type-appt-text: #60a5fa;
    --notif-type-sale-bg: rgba(20,83,45,0.4);    --notif-type-sale-text: #4ade80;
    --notif-type-stock-bg: rgba(120,53,15,0.4);
    --notif-type-error-bg: rgba(127,29,29,0.4);
    --notif-type-success-bg: rgba(6,78,59,0.4);
    --notif-type-admin-bg: rgba(76,29,149,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   NAV MENU, MI CUENTA (dashboard), BELL, PATIENT, AUTHGUARD, etc.
   Tokens agregados al migrar la "cola larga" de archivos sueltos.
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    /* AppNavMenu */
    --navmenu-role-admin-text: #f87171;
    --navmenu-role-staff-text: #818cf8;
    --navmenu-overlay-bg: rgba(0,0,0,0.60);
    --navmenu-admin-hover-bg: rgba(225,29,72,0.08);
    --navmenu-admin-active-bg: rgba(225,29,72,0.12);
    --navmenu-admin-accent: #f43f5e;
    --navmenu-staff-hover-bg: rgba(79,70,229,0.08);
    --navmenu-staff-active-bg: rgba(79,70,229,0.12);
    --navmenu-logout-hover-bg: rgba(239,68,68,0.08);
    --navmenu-logout-hover-text: #f87171;
    /* Dashboard.razor (Mi Cuenta) — extensión de --acc-* */
    --acc-card-danger-border: rgba(239,68,68,0.1);
    --acc-card-danger-border-hover: rgba(239,68,68,0.3);
    --acc-card-danger-bg-hover: rgba(239,68,68,0.04);
    --acc-card-danger-text: #f87171;
    --acc-icon-blue-bg: rgba(14,165,233,0.1);
    --acc-icon-blue-text: #38bdf8;
    --acc-icon-amber-bg: rgba(245,158,11,0.1);
    --acc-icon-amber-text: #fbbf24;
    --acc-icon-red-bg: rgba(239,68,68,0.08);
    --acc-icon-red-text: #f87171;
    --acc-icon-teal-bg: rgba(29,158,117,0.1);
    /* NotificationBell */
    --bell-danger-text: #f87171;
    --bell-type-appointment-bg: rgba(30,58,138,0.3);
    --bell-type-appointment-text: #60a5fa;
    --bell-type-sale-bg: rgba(20,83,45,0.3);
    --bell-type-sale-text: #4ade80;
    --bell-type-stock-bg: rgba(120,53,15,0.3);
    --bell-type-stock-text: #fbbf24;
    --bell-type-warning-bg: rgba(120,53,15,0.3);
    --bell-type-warning-text: #fbbf24;
    --bell-type-error-bg: rgba(127,29,29,0.3);
    --bell-type-error-text: #f87171;
    --bell-type-success-bg: rgba(6,78,59,0.3);
    --bell-type-success-text: #34d399;
    --bell-type-admin-bg: rgba(76,29,149,0.3);
    --bell-type-admin-text: #a78bfa;
    --bell-type-default-bg: #1e293b;
    --bell-type-default-text: #94a3b8;
    /* PatientProfile.razor */
    --pprofile-tagwarn-bg: rgba(245,158,11,0.1);
    --pprofile-tagwarn-border: rgba(245,158,11,0.2);
    --pprofile-tagwarn-title: #fbbf24;
    /* AuthGuard — splash de carga, sin diseño light */
    --authguard-bg-1: #0a0e27;
    --authguard-bg-2: #0f1419;
    --authguard-bg-3: #0d1b2a;
    --authguard-orb-blue: rgba(59,130,246,0.1);
    --authguard-orb-teal: rgba(20,184,166,0.1);
    --authguard-orb-indigo: rgba(99,102,241,0.05);
    --authguard-accent-1: #3b82f6;
    --authguard-accent-2: #14b8a6;
    --authguard-icon-shadow: rgba(59,130,246,0.3);
    --authguard-spinner-color: #60a5fa;
    --authguard-text-muted: #9ca3af;
    --authguard-track-bg: #1f2937;
    /* AppointmentCard (también PatientHistory, PatientDashboard) */
    --apptcard-status-completed-bg: rgba(16,185,129,0.1);
    --apptcard-status-completed-text: #10b981;
    --apptcard-status-cancelled-bg: rgba(239,68,68,0.1);
    --apptcard-status-cancelled-text: #f87171;
    --apptcard-status-confirmed-bg: rgba(59,130,246,0.1);
    --apptcard-status-confirmed-text: #60a5fa;
    --apptcard-cancel-text: rgba(248,113,113,0.6);
    /* PatientHistory.razor */
    --mh-hc-warn-bg: rgba(245,158,11,0.06);
    --mh-hc-warn-border: rgba(245,158,11,0.2);
    --mh-hc-warn-title: #fbbf24;
    /* PatientDashboard.razor */
    --pp-icon-green-bg: rgba(34,197,94,0.1);
    --pp-icon-green-text: #22c55e;
    /* MainLayout.razor */
    --layout-error-border: rgba(239,68,68,0.3);
    --layout-error-btn-bg: #dc2626;
    /* Routes.razor (404) */
    --routes-404-bg: #0d0d0d;
    --routes-404-sub: #9ca3af;
    --routes-404-btn-bg: #2563eb;
    --routes-404-btn-hover-bg: #1d4ed8;
    /* LogoUploader */
    --lu-remove-bg: rgba(0,0,0,0.6);
    /* MyAppointments.razor (FeaturesPatient) */
    --pmt-tab-active-shadow: rgba(0,0,0,0.1);
}

[data-mode="light"] {
    --navmenu-role-admin-text: #f87171;
    --navmenu-role-staff-text: #818cf8;
    --navmenu-overlay-bg: rgba(0,0,0,0.60);
    --navmenu-admin-hover-bg: rgba(225,29,72,0.08);
    --navmenu-admin-active-bg: rgba(225,29,72,0.12);
    --navmenu-admin-accent: #f43f5e;
    --navmenu-staff-hover-bg: rgba(79,70,229,0.08);
    --navmenu-staff-active-bg: rgba(79,70,229,0.12);
    --navmenu-logout-hover-bg: rgba(239,68,68,0.08);
    --navmenu-logout-hover-text: #f87171;
    --acc-card-danger-border: rgba(239,68,68,0.1);
    --acc-card-danger-border-hover: rgba(239,68,68,0.3);
    --acc-card-danger-bg-hover: rgba(239,68,68,0.04);
    --acc-card-danger-text: #f87171;
    --acc-icon-blue-bg: rgba(14,165,233,0.1);
    --acc-icon-blue-text: #38bdf8;
    --acc-icon-amber-bg: rgba(245,158,11,0.1);
    --acc-icon-amber-text: #fbbf24;
    --acc-icon-red-bg: rgba(239,68,68,0.08);
    --acc-icon-red-text: #f87171;
    --acc-icon-teal-bg: rgba(29,158,117,0.1);
    --bell-danger-text: #f87171;
    --bell-type-appointment-bg: rgba(30,58,138,0.3);
    --bell-type-appointment-text: #60a5fa;
    --bell-type-sale-bg: rgba(20,83,45,0.3);
    --bell-type-sale-text: #4ade80;
    --bell-type-stock-bg: rgba(120,53,15,0.3);
    --bell-type-stock-text: #fbbf24;
    --bell-type-warning-bg: rgba(120,53,15,0.3);
    --bell-type-warning-text: #fbbf24;
    --bell-type-error-bg: rgba(127,29,29,0.3);
    --bell-type-error-text: #f87171;
    --bell-type-success-bg: rgba(6,78,59,0.3);
    --bell-type-success-text: #34d399;
    --bell-type-admin-bg: rgba(76,29,149,0.3);
    --bell-type-admin-text: #a78bfa;
    --bell-type-default-bg: #1e293b;
    --bell-type-default-text: #94a3b8;
    --pprofile-tagwarn-bg: rgba(245,158,11,0.1);
    --pprofile-tagwarn-border: rgba(245,158,11,0.2);
    --pprofile-tagwarn-title: #fbbf24;
    --authguard-bg-1: #0a0e27;
    --authguard-bg-2: #0f1419;
    --authguard-bg-3: #0d1b2a;
    --authguard-orb-blue: rgba(59,130,246,0.1);
    --authguard-orb-teal: rgba(20,184,166,0.1);
    --authguard-orb-indigo: rgba(99,102,241,0.05);
    --authguard-accent-1: #3b82f6;
    --authguard-accent-2: #14b8a6;
    --authguard-icon-shadow: rgba(59,130,246,0.3);
    --authguard-spinner-color: #60a5fa;
    --authguard-text-muted: #9ca3af;
    --authguard-track-bg: #1f2937;
    --apptcard-status-completed-bg: rgba(16,185,129,0.1);
    --apptcard-status-completed-text: #10b981;
    --apptcard-status-cancelled-bg: rgba(239,68,68,0.1);
    --apptcard-status-cancelled-text: #f87171;
    --apptcard-status-confirmed-bg: rgba(59,130,246,0.1);
    --apptcard-status-confirmed-text: #60a5fa;
    --apptcard-cancel-text: rgba(248,113,113,0.6);
    --mh-hc-warn-bg: rgba(245,158,11,0.06);
    --mh-hc-warn-border: rgba(245,158,11,0.2);
    --mh-hc-warn-title: #fbbf24;
    --pp-icon-green-bg: rgba(34,197,94,0.1);
    --pp-icon-green-text: #22c55e;
    --layout-error-border: rgba(239,68,68,0.3);
    --layout-error-btn-bg: #dc2626;
    --routes-404-bg: #0d0d0d;
    --routes-404-sub: #9ca3af;
    --routes-404-btn-bg: #2563eb;
    --routes-404-btn-hover-bg: #1d4ed8;
    --lu-remove-bg: rgba(0,0,0,0.6);
    --pmt-tab-active-shadow: rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN/STAFF DASHBOARDS — SuperAdminDashboard, StaffDashboard
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    --staff-bg: #020617;
    --staff-card-bg: rgba(255,255,255,0.02);
    --staff-card-border: rgba(148,163,184,0.08);
    --staff-divider: rgba(148,163,184,0.06);
    --staff-divider-faint: rgba(148,163,184,0.04);
    --staff-row-hover-bg: rgba(255,255,255,0.01);
    --staff-border-soft: rgba(148,163,184,0.1);
    --staff-text-dim: #64748b;
    --staff-text-strong: #e2e8f0;
    --staff-amber-text: #fbbf24;
    --staff-danger-text: #f87171;
    --staff-emerald-text: #34d399;
    --staff-green-dark: #059669;
    --staff-amber-dark: #d97706;
    --staff-blue-light: #3b82f6;
    --staff-teal-dark: #0d9488;
    --staff-teal-light: #14b8a6;
    --staff-accent-border-soft: rgba(29,158,117,0.18);
    --staff-accent-bg-soft: rgba(29,158,117,0.12);
    --staff-accent-bg-med: rgba(29,158,117,0.15);
    --staff-accent-bg-strong: rgba(29,158,117,0.25);
    --staff-accent-border-focus: rgba(29,158,117,0.4);
    --staff-emerald-bg-soft: rgba(16,185,129,0.1);
    --staff-emerald-bg-med: rgba(16,185,129,0.12);
    --staff-emerald-border: rgba(16,185,129,0.2);
    --staff-emerald-bg-strong: rgba(16,185,129,0.22);
    --staff-emerald-border-focus: rgba(16,185,129,0.4);
    --staff-amber-badge-bg: rgba(245,158,11,0.1);
    --staff-amber-badge-border: rgba(245,158,11,0.2);
    --staff-amber-alert-bg: rgba(245,158,11,0.06);
    --staff-danger-bg: rgba(239,68,68,0.1);
    --staff-danger-border: rgba(239,68,68,0.18);
    --staff-danger-border-strong: rgba(239,68,68,0.2);
    --staff-overlay-bg: rgba(0,0,0,0.75);
    --staff-modal-bg: #0f1117;
    --staff-modal-border: rgba(148,163,184,0.12);
}

[data-mode="light"] {
    --staff-bg: #020617;
    --staff-card-bg: rgba(255,255,255,0.02);
    --staff-card-border: rgba(148,163,184,0.08);
    --staff-divider: rgba(148,163,184,0.06);
    --staff-divider-faint: rgba(148,163,184,0.04);
    --staff-row-hover-bg: rgba(255,255,255,0.01);
    --staff-border-soft: rgba(148,163,184,0.1);
    --staff-text-dim: #64748b;
    --staff-text-strong: #e2e8f0;
    --staff-amber-text: #fbbf24;
    --staff-danger-text: #f87171;
    --staff-emerald-text: #34d399;
    --staff-green-dark: #059669;
    --staff-amber-dark: #d97706;
    --staff-blue-light: #3b82f6;
    --staff-teal-dark: #0d9488;
    --staff-teal-light: #14b8a6;
    --staff-accent-border-soft: rgba(29,158,117,0.18);
    --staff-accent-bg-soft: rgba(29,158,117,0.12);
    --staff-accent-bg-med: rgba(29,158,117,0.15);
    --staff-accent-bg-strong: rgba(29,158,117,0.25);
    --staff-accent-border-focus: rgba(29,158,117,0.4);
    --staff-emerald-bg-soft: rgba(16,185,129,0.1);
    --staff-emerald-bg-med: rgba(16,185,129,0.12);
    --staff-emerald-border: rgba(16,185,129,0.2);
    --staff-emerald-bg-strong: rgba(16,185,129,0.22);
    --staff-emerald-border-focus: rgba(16,185,129,0.4);
    --staff-amber-badge-bg: rgba(245,158,11,0.1);
    --staff-amber-badge-border: rgba(245,158,11,0.2);
    --staff-amber-alert-bg: rgba(245,158,11,0.06);
    --staff-danger-bg: rgba(239,68,68,0.1);
    --staff-danger-border: rgba(239,68,68,0.18);
    --staff-danger-border-strong: rgba(239,68,68,0.2);
    --staff-overlay-bg: rgba(0,0,0,0.75);
    --staff-modal-bg: #0f1117;
    --staff-modal-border: rgba(148,163,184,0.12);
}

/* ═══════════════════════════════════════════════════════════════
   ROLE DASHBOARDS — loading skeleton compartido
   Admin/BranchManager/Accounting/ReceptionistDashboard
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    --rdash-bg: #020617;
    --rdash-bg-admin: rgba(3,4,10,0.92);
    --rdash-border-admin: #a855f7;
    --rdash-border-branch: #3b82f6;
    --rdash-border-reception: #22c55e;
    --rdash-error-bg: rgba(69,10,10,0.3);
    --rdash-error-border: rgba(153,27,27,0.5);
    --rdash-error-icon: #f87171;
    --rdash-card-bg: rgba(15,23,42,0.5);
    --rdash-card-border: #1e293b;
    --rdash-btn-bg: #334155;
    --rdash-btn-hover-bg: #475569;
    --rdash-emerald-text: #34d399;
    --rdash-orange-text: #fb923c;
    --rdash-purple-btn-bg: #9333ea;
    --rdash-purple-btn-hover-bg: #7e22ce;
    --rdash-select-bg: #0f172a;
    --rdash-purple-400: #c084fc;
    --rdash-green-600: #16a34a;
    --rdash-emerald-600: #059669;
    --rdash-green-700: #15803d;
    --rdash-emerald-700: #047857;
}

[data-mode="light"] {
    --rdash-bg: #020617;
    --rdash-bg-admin: rgba(3,4,10,0.92);
    --rdash-border-admin: #a855f7;
    --rdash-border-branch: #3b82f6;
    --rdash-border-reception: #22c55e;
    --rdash-error-bg: rgba(69,10,10,0.3);
    --rdash-error-border: rgba(153,27,27,0.5);
    --rdash-error-icon: #f87171;
    --rdash-card-bg: rgba(15,23,42,0.5);
    --rdash-card-border: #1e293b;
    --rdash-btn-bg: #334155;
    --rdash-btn-hover-bg: #475569;
    --rdash-emerald-text: #34d399;
    --rdash-orange-text: #fb923c;
    --rdash-purple-btn-bg: #9333ea;
    --rdash-purple-btn-hover-bg: #7e22ce;
    --rdash-select-bg: #0f172a;
    --rdash-purple-400: #c084fc;
    --rdash-green-600: #16a34a;
    --rdash-emerald-600: #059669;
    --rdash-green-700: #15803d;
    --rdash-emerald-700: #047857;
}

/* ═══════════════════════════════════════════════════════════════
   CLINICAL HISTORY — Features/ClinicalHistory/Pages/ClinicalHistory.razor
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    --ch-bg: #020617;
    --ch-accent: #a855f7;
    --ch-error-bg: rgba(69,10,10,0.3);
    --ch-error-border: rgba(153,27,27,0.5);
    --ch-danger-text: #f87171;
    --ch-btn-bg: #334155;
    --ch-btn-hover-bg: #475569;
    --ch-hover-bg: #1e293b;
    --ch-card-bg: rgba(15,23,42,0.5);
    --ch-card-border: #1e293b;
    --ch-purple-text: #c084fc;
    --ch-blue-text: #60a5fa;
    --ch-green-text: #4ade80;
    --ch-tab-active-bg: #9333ea;
    --ch-notes-bg: rgba(30,41,59,0.3);
    --ch-note-bg: #0f172a;
    --ch-amber-text: #fbbf24;
    --ch-text-light: #cbd5e1;
    --ch-lightbox-bg: rgba(0,0,0,0.9);
    --ch-status-completed-bg: rgba(34,197,94,0.2);
    --ch-status-cancelled-bg: rgba(239,68,68,0.2);
    --ch-status-noshow-bg: rgba(249,115,22,0.2);
    --ch-orange-text: #fb923c;
    --ch-status-inprogress-bg: rgba(59,130,246,0.2);
    --ch-status-confirmed-bg: rgba(234,179,8,0.2);
    --ch-yellow-text: #facc15;
    --ch-status-default-bg: rgba(100,116,139,0.2);
    --ch-status-clinical-bg: rgba(168,85,247,0.2);
    --ch-status-observation-bg: rgba(20,184,166,0.2);
    --ch-teal-text: #2dd4bf;
}

[data-mode="light"] {
    --ch-bg: #020617;
    --ch-accent: #a855f7;
    --ch-error-bg: rgba(69,10,10,0.3);
    --ch-error-border: rgba(153,27,27,0.5);
    --ch-danger-text: #f87171;
    --ch-btn-bg: #334155;
    --ch-btn-hover-bg: #475569;
    --ch-hover-bg: #1e293b;
    --ch-card-bg: rgba(15,23,42,0.5);
    --ch-card-border: #1e293b;
    --ch-purple-text: #c084fc;
    --ch-blue-text: #60a5fa;
    --ch-green-text: #4ade80;
    --ch-tab-active-bg: #9333ea;
    --ch-notes-bg: rgba(30,41,59,0.3);
    --ch-note-bg: #0f172a;
    --ch-amber-text: #fbbf24;
    --ch-text-light: #cbd5e1;
    --ch-lightbox-bg: rgba(0,0,0,0.9);
    --ch-status-completed-bg: rgba(34,197,94,0.2);
    --ch-status-cancelled-bg: rgba(239,68,68,0.2);
    --ch-status-noshow-bg: rgba(249,115,22,0.2);
    --ch-orange-text: #fb923c;
    --ch-status-inprogress-bg: rgba(59,130,246,0.2);
    --ch-status-confirmed-bg: rgba(234,179,8,0.2);
    --ch-yellow-text: #facc15;
    --ch-status-default-bg: rgba(100,116,139,0.2);
    --ch-status-clinical-bg: rgba(168,85,247,0.2);
    --ch-status-observation-bg: rgba(20,184,166,0.2);
    --ch-teal-text: #2dd4bf;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCHABLE SELECT — extensión (nuevos estados)
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-mode="dark"] {
    --ss-clear-hover: #f87171;
    --ss-item-selected-hover-bg: rgba(29,158,117,0.18);
}

[data-mode="light"] {
    --ss-clear-hover: #f87171;
    --ss-item-selected-hover-bg: rgba(29,158,117,0.18);
}