/* ═══════════════════════════════════════
   SmartNote Design System — site.css
   ═══════════════════════════════════════ */

:root {
    /* ── Superficies — ajusta solo estas 3 para cambiar el tono base ── */
    --clr-bg:        #f5f6fa;   /* fondo app: blanco con tinte gris muy suave */
    --clr-surface:   #ffffff;   /* sidebar, cards, paneles */
    --clr-surface-2: #eef0f5;   /* hover filas, inputs, headers tabla */
    --clr-border:    #dfe2ea;

    /* ── Texto ── */
    --clr-text:             #1f2330;
    --clr-text-muted:       #565d6b;   /* AA sobre surface-2 (#eef0f5) para texto pequeño */
    --clr-text-on-primary:  #ffffff;

    /* ── Marca / acentos ── */
    --clr-primary:       #4b48c7;   /* indigo de marca (propio, no es un step de Tailwind) */
    --clr-primary-hover: #6360e6;
    --clr-primary-rgb:   75, 72, 199;   /* mismo primary en RGB para tintes rgba() */
    --clr-accent:  #22d3ee;
    --clr-success: #22c55e;
    --clr-warning: #f59e0b;
    --clr-danger:  #ef4444;
    --clr-info:    #3b82f6;

    /* ── Tipografía ── */
    --font:         'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;  /* marca y títulos */

    /* ══ Color de ESTADO — fuente única de verdad ══════════════════════════
       Cada estado tiene 3 tokens: -bg (tinte de fondo de badge), -fg (texto, AA
       sobre el tinte) y el sólido (charts/dots/leyendas del dashboard). Badges,
       botones de estado, donas del dashboard y dots de leyenda derivan de aquí.
       Antes había 3 paletas distintas para la misma semántica. */
    --st-new:           #2563eb; --st-new-bg:           rgba(37,99,235,.12);  --st-new-fg:           #1d4ed8;
    --st-pending:       #f59e0b; --st-pending-bg:       rgba(245,158,11,.16); --st-pending-fg:       #b45309;  /* amber: "pendiente" en amarillo (vs verde "done" e indigo "inprogress") */
    --st-inprogress:    #4b48c7; --st-inprogress-bg:    rgba(75,72,199,.12);  --st-inprogress-fg:    #3f3cb8;
    --st-waitingclient: #d97706; --st-waitingclient-bg: rgba(217,119,6,.12);  --st-waitingclient-fg: #b45309;
    --st-waitingdev:    #9333ea; --st-waitingdev-bg:    rgba(147,51,234,.12); --st-waitingdev-fg:    #7e22ce;
    --st-done:          #16a34a; --st-done-bg:          rgba(22,163,74,.12);  --st-done-fg:          #15803d;
    --st-reopened:      #dc2626; --st-reopened-bg:      rgba(220,38,38,.12);  --st-reopened-fg:      #b91c1c;
    --st-neutral:       #64748b; --st-neutral-bg:       rgba(100,116,139,.12);--st-neutral-fg:       #475569;

    /* Rampa de vencidas por antigüedad (0–10 / 11–20 / 21–30 / +30 días) */
    --ramp-overdue-1: #f59e0b;
    --ramp-overdue-2: #ea580c;
    --ramp-overdue-3: #dc2626;
    --ramp-overdue-4: #7f1d1d;

    /* Paleta categórica para series con N categorías sin semántica de estado (VG-000115: volumen por
       semana y por tipo de entrega). Los tokens --st-* codifican ESTADO y no sirven acá; se cicla esta
       rampa por índice. Tonos separados en matiz para distinguirse entre sí en la dona y en las barras. */
    --cat-1: #4b48c7;
    --cat-2: #0d9488;
    --cat-3: #ea580c;
    --cat-4: #2563eb;
    --cat-5: #16a34a;
    --cat-6: #9333ea;
    --cat-7: #d97706;
    --cat-8: #db2777;

    /* Distribución de pendientes (Cliente / Interno / Externo) */
    --clr-breakdown-client:   #ea580c;
    --clr-breakdown-internal: #2563eb;
    --clr-breakdown-external: #0d9488;

    /* ── Login gradient (antes hardcoded) ── */
    --clr-login-gradient-start: #f5f6fa;
    --clr-login-gradient-end:   #e0e7ff;

    /* ── Sombras ── */
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
    --shadow-md: 0 4px 12px rgba(17, 24, 39, .08);
    --shadow-lg: 0 25px 50px rgba(17, 24, 39, .12);

    /* ── Layout ── */
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 4.5rem;   /* rail de solo iconos al colapsar */
    --radius: 12px;
    --radius-sm: 8px;
    --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 14px; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── App layout ── */
.app-wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--clr-surface);
    border-right: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    transition: transform var(--transition), width var(--transition);
}
.sidebar-collapse-btn {
    background: none; border: none; color: var(--clr-text-muted);
    font-size: 1.25rem; cursor: pointer; padding: 0;
}
.sidebar-collapse-btn:hover { color: var(--clr-text); }
.sidebar-header {
    padding: 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--clr-border);
}
.sidebar-brand {
    display: flex; align-items: center; gap: .75rem;
    font-family: var(--font-display);
    font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--clr-primary);
}
.sidebar-toggle { background: none; border: none; color: var(--clr-text-muted); font-size: 1.25rem; cursor: pointer; }
.sidebar-nav {
    list-style: none; padding: .75rem 0; margin: 0; flex: 1;
}
.sidebar-nav li a {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1.25rem; margin: 2px .5rem;
    color: var(--clr-text-muted); text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background-color var(--transition);
    font-weight: 500;
}
.sidebar-nav li a:hover { color: var(--clr-text); background: var(--clr-surface-2); }
.sidebar-nav li a.active { color: var(--clr-text-on-primary); background: var(--clr-primary); }
.sidebar-nav li a:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: -2px; }
.sidebar-nav li a i { font-size: 1.15rem; }

/* ── Grupo colapsable del sidebar (Archivo, VG-000109): <details>/<summary> nativo, sin JS ── */
.sidebar-group-li { list-style: none; }
.sidebar-group > summary {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1.25rem; margin: 2px .5rem;
    color: var(--clr-text-muted); cursor: pointer;
    border-radius: var(--radius-sm); font-weight: 500;
    list-style: none; /* oculta el triángulo nativo (Firefox) */
    transition: color var(--transition), background-color var(--transition);
}
.sidebar-group > summary::-webkit-details-marker { display: none; } /* oculta el triángulo nativo (WebKit) */
.sidebar-group > summary:hover { color: var(--clr-text); background: var(--clr-surface-2); }
.sidebar-group > summary:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: -2px; }
.sidebar-group > summary i { font-size: 1.15rem; }
.sidebar-group-caret { margin-left: auto; font-size: .8rem !important; transition: transform var(--transition); }
.sidebar-group[open] > summary .sidebar-group-caret { transform: rotate(180deg); }
.sidebar-subnav { list-style: none; margin: 0; padding: 0; }
.sidebar-subnav li a { padding-left: 2.65rem; } /* indenta los hijos bajo el ícono del grupo */

.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--clr-border);
}
.sidebar-user {
    display: flex; align-items: center; gap: .5rem;
    color: var(--clr-text-muted); font-size: .9rem; margin-bottom: .5rem;
}
.btn-logout {
    background: none; border: none; color: var(--clr-danger);
    cursor: pointer; font-size: .85rem; padding: 0;
    transition: opacity var(--transition);
}
.btn-logout:hover { opacity: .7; }

/* ── Main content ── */
.main-content {
    flex: 1;
    /* min-width:0 es clave: sin esto un flex item no se achica por debajo del ancho de su
       contenido (min-width:auto por defecto), y un grid ancho desbordaría toda la página
       rompiendo el layout responsive. Con min-width:0 el contenedor se acota al viewport y
       el grid Syncfusion muestra su propio scroll horizontal interno. */
    min-width: 0;
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    transition: margin-left var(--transition);
}

/* ── Sidebar colapsado (rail de solo iconos) — solo en escritorio ── */
@media (min-width: 992px) {
    html.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
    html.sidebar-collapsed .main-content { margin-left: var(--sidebar-w-collapsed); }

    /* Colapsado: se oculta el logo y queda SOLO el botón de toggle centrado en el header
       (un único control claro para volver a expandir). Se ocultan los textos del nav, el
       usuario, el selector de idioma y el texto del logout (queda el icono de cerrar sesión). */
    html.sidebar-collapsed .sidebar-brand,
    html.sidebar-collapsed .sidebar-nav li a span,
    html.sidebar-collapsed .sidebar-group > summary span,
    html.sidebar-collapsed .sidebar-group-caret,
    html.sidebar-collapsed .sidebar-user span,
    html.sidebar-collapsed .sidebar-lang-form,
    html.sidebar-collapsed .btn-logout span { display: none; }

    /* Centrar iconos en el rail. */
    html.sidebar-collapsed .sidebar-header { justify-content: center; padding: 1.25rem .5rem; }
    html.sidebar-collapsed .sidebar-nav li a { justify-content: center; gap: 0; padding: .7rem 0; }
    html.sidebar-collapsed .sidebar-group > summary { justify-content: center; gap: 0; padding: .7rem 0; margin: 2px .5rem; }
    html.sidebar-collapsed .sidebar-subnav li a { padding-left: 0; }
    html.sidebar-collapsed .sidebar-footer { padding: 1rem .5rem; text-align: center; }
    html.sidebar-collapsed .sidebar-user { justify-content: center; }
    html.sidebar-collapsed .btn-logout { font-size: 1.15rem; }
}
.content-area { padding: 2rem; }

/* ── Topbar (mobile) ── */
.topbar {
    padding: .75rem 1rem;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    display: flex; align-items: center; gap: 1rem;
}
.topbar-brand { font-weight: 700; font-size: 1.1rem; }
.btn-toggle { background: none; border: none; color: var(--clr-text); font-size: 1.5rem; cursor: pointer; }

/* ── Cards / Panels ── */
.card-vigia {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.card-vigia:hover { border-color: var(--clr-primary); box-shadow: 0 0 20px rgba(var(--clr-primary-rgb),.1); }

/* ── Stat cards ── */
.stat-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    display: flex; align-items: center; gap: 1rem;
}
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}
.stat-icon.primary { background: rgba(var(--clr-primary-rgb),.15); color: var(--clr-primary); }
.stat-icon.success { background: rgba(34,197,94,.15); color: var(--clr-success); }
.stat-icon.warning { background: rgba(245,158,11,.15); color: var(--clr-warning); }
.stat-icon.danger  { background: rgba(239,68,68,.15); color: var(--clr-danger); }
.stat-icon.info    { background: rgba(59,130,246,.15); color: var(--clr-info); }
.stat-icon.accent  { background: rgba(34,211,238,.15); color: var(--clr-accent); }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .8rem; color: var(--clr-text-muted); margin-top: 2px; }

/* ── Tables ── */
.table-vigia { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-vigia thead th {
    background: var(--clr-surface-2);
    color: var(--clr-text-muted);
    font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
    padding: .75rem 1rem; border: none; white-space: nowrap;
}
.table-vigia tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--clr-border);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
/* Números alineados también en las grids Syncfusion (solo afecta dígitos). */
.e-grid .e-rowcell { font-variant-numeric: tabular-nums; }
.table-vigia tbody tr:hover { background: var(--clr-surface-2); }

/* ── Badges ── */
.badge-vigia {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .65rem; border-radius: 20px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
/* Todas las badges derivan de los tokens --st-* (texto -fg cumple AA sobre el fondo -bg). */
.badge-new        { background: var(--st-new-bg);           color: var(--st-new-fg); }
.badge-open       { background: var(--st-pending-bg);       color: var(--st-pending-fg); }
.badge-inprogress { background: var(--st-inprogress-bg);    color: var(--st-inprogress-fg); }
.badge-waitingonclient    { background: var(--st-waitingclient-bg); color: var(--st-waitingclient-fg); }
.badge-waitingondeveloper { background: var(--st-waitingdev-bg);    color: var(--st-waitingdev-fg); }
.badge-resolved   { background: var(--st-done-bg);          color: var(--st-done-fg); }
.badge-closed     { background: var(--st-neutral-bg);       color: var(--st-neutral-fg); }
.badge-reopened   { background: var(--st-reopened-bg);      color: var(--st-reopened-fg); }
.badge-active     { background: var(--st-done-bg);          color: var(--st-done-fg); }
.badge-inactive   { background: var(--st-neutral-bg);       color: var(--st-neutral-fg); }

/* Estado de áreas (Tareas/Procesos/Impuestos) — ahora MISMA familia que las donas del Dashboard
   y que las badges de arriba (una sola fuente de verdad): Pendiente cyan · En proceso indigo ·
   Terminado verde. */
.badge-status-pending    { background: var(--st-pending-bg);    color: var(--st-pending-fg); }
.badge-status-inprogress { background: var(--st-inprogress-bg); color: var(--st-inprogress-fg); }
.badge-status-done       { background: var(--st-done-bg);       color: var(--st-done-fg); }
/* 4º estado (impuestos, "Por presentar"): naranja de atención. */
.badge-status-warn       { background: var(--st-waitingclient-bg); color: var(--st-waitingclient-fg); }

.badge-critical { background: var(--st-reopened-bg);      color: var(--st-reopened-fg); }
.badge-high     { background: var(--st-waitingclient-bg); color: var(--st-waitingclient-fg); }
.badge-medium   { background: var(--st-new-bg);           color: var(--st-new-fg); }
.badge-low      { background: var(--st-done-bg);          color: var(--st-done-fg); }

.badge-sla-breach { background: var(--st-reopened-bg); color: var(--st-reopened-fg); }
@media (prefers-reduced-motion: no-preference) {
    .badge-sla-breach { animation: pulseBreach 2s ease-in-out infinite; }
}
@keyframes pulseBreach { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* ── Status transition buttons (colors mirror status badges) ── */
/* Combined selector (specificity 0,2,0) beats .btn-vigia (0,1,0) which resets border:none */
.btn-vigia.btn-status-new, .btn-vigia.btn-status-open, .btn-vigia.btn-status-inprogress,
.btn-vigia.btn-status-waitingonclient, .btn-vigia.btn-status-waitingondeveloper,
.btn-vigia.btn-status-resolved, .btn-vigia.btn-status-closed, .btn-vigia.btn-status-reopened {
    transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
/* Tintes 8%/18% derivados del mismo token --st-* vía color-mix (sin rgb duplicados). */
.btn-vigia.btn-status-new              { background: color-mix(in srgb, var(--st-new) 8%, transparent);  border: 1px solid color-mix(in srgb, var(--st-new) 50%, transparent);  color: var(--st-new-fg); }
.btn-vigia.btn-status-new:hover        { background: color-mix(in srgb, var(--st-new) 18%, transparent); border-color: var(--st-new);          color: var(--st-new-fg);          transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--st-new) 20%, transparent); }
.btn-vigia.btn-status-open             { background: color-mix(in srgb, var(--st-pending) 8%, transparent);  border: 1px solid color-mix(in srgb, var(--st-pending) 50%, transparent);  color: var(--st-pending-fg); }
.btn-vigia.btn-status-open:hover       { background: color-mix(in srgb, var(--st-pending) 18%, transparent); border-color: var(--st-pending);        color: var(--st-pending-fg);        transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--st-pending) 20%, transparent); }
.btn-vigia.btn-status-inprogress       { background: color-mix(in srgb, var(--st-inprogress) 8%, transparent);  border: 1px solid color-mix(in srgb, var(--st-inprogress) 50%, transparent);  color: var(--st-inprogress-fg); }
.btn-vigia.btn-status-inprogress:hover { background: color-mix(in srgb, var(--st-inprogress) 18%, transparent); border-color: var(--st-inprogress);       color: var(--st-inprogress-fg);       transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--st-inprogress) 20%, transparent); }
.btn-vigia.btn-status-waitingonclient       { background: color-mix(in srgb, var(--st-waitingclient) 8%, transparent); border: 1px solid color-mix(in srgb, var(--st-waitingclient) 50%, transparent);  color: var(--st-waitingclient-fg); }
.btn-vigia.btn-status-waitingonclient:hover { background: color-mix(in srgb, var(--st-waitingclient) 18%, transparent); border-color: var(--st-waitingclient);       color: var(--st-waitingclient-fg);       transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--st-waitingclient) 20%, transparent); }
.btn-vigia.btn-status-waitingondeveloper       { background: color-mix(in srgb, var(--st-waitingdev) 8%, transparent);  border: 1px solid color-mix(in srgb, var(--st-waitingdev) 50%, transparent);  color: var(--st-waitingdev-fg); }
.btn-vigia.btn-status-waitingondeveloper:hover { background: color-mix(in srgb, var(--st-waitingdev) 18%, transparent);  border-color: var(--st-waitingdev);                  color: var(--st-waitingdev-fg);                  transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--st-waitingdev) 20%, transparent); }
.btn-vigia.btn-status-resolved              { background: color-mix(in srgb, var(--st-done) 8%, transparent);  border: 1px solid color-mix(in srgb, var(--st-done) 50%, transparent);   color: var(--st-done-fg); }
.btn-vigia.btn-status-resolved:hover        { background: color-mix(in srgb, var(--st-done) 18%, transparent);  border-color: var(--st-done);        color: var(--st-done-fg);        transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--st-done) 20%, transparent); }
.btn-vigia.btn-status-closed               { background: color-mix(in srgb, var(--st-neutral) 8%, transparent); border: 1px solid color-mix(in srgb, var(--st-neutral) 40%, transparent); color: var(--st-neutral-fg); }
.btn-vigia.btn-status-closed:hover         { background: color-mix(in srgb, var(--st-neutral) 15%, transparent); border-color: var(--st-neutral);    color: var(--st-neutral-fg);    transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--st-neutral) 15%, transparent); }
.btn-vigia.btn-status-reopened              { background: color-mix(in srgb, var(--st-reopened) 8%, transparent);  border: 1px solid color-mix(in srgb, var(--st-reopened) 50%, transparent);   color: var(--st-reopened-fg); }
.btn-vigia.btn-status-reopened:hover        { background: color-mix(in srgb, var(--st-reopened) 18%, transparent);  border-color: var(--st-reopened);         color: var(--st-reopened-fg);         transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--st-reopened) 20%, transparent); }

/* ── Buttons ── */
.btn-vigia {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .5rem 1.25rem; border: none; border-radius: var(--radius-sm);
    font-weight: 600; font-size: .85rem; cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    text-decoration: none;
}
/* Ring de teclado visible (no se anima su aparición). */
.btn-vigia:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
.btn-primary-v { background: var(--clr-primary); color: var(--clr-text-on-primary); }
.btn-primary-v:hover { background: var(--clr-primary-hover); color: var(--clr-text-on-primary); }
.btn-outline-v { background: transparent; border: 1px solid var(--clr-border); color: var(--clr-text); }
.btn-outline-v:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.btn-danger-v  { background: var(--clr-danger); color: var(--clr-text-on-primary); }
.btn-success-v { background: var(--clr-success); color: var(--clr-text-on-primary); }

/* Disabled: preserve each variant's color/background; only dim it. Specificity (0,3,1) beats Bootstrap's .btn:disabled (0,1,1). */
.btn-vigia.btn-primary-v:disabled, .btn-vigia.btn-primary-v.disabled { background: var(--clr-primary); color: var(--clr-text-on-primary); opacity: .65; cursor: not-allowed; }
.btn-vigia.btn-outline-v:disabled, .btn-vigia.btn-outline-v.disabled { background: transparent; color: var(--clr-text); border-color: var(--clr-border); opacity: .65; cursor: not-allowed; }
.btn-vigia.btn-danger-v:disabled,  .btn-vigia.btn-danger-v.disabled  { background: var(--clr-danger);  color: var(--clr-text-on-primary); opacity: .65; cursor: not-allowed; }
.btn-vigia.btn-success-v:disabled, .btn-vigia.btn-success-v.disabled { background: var(--clr-success); color: var(--clr-text-on-primary); opacity: .65; cursor: not-allowed; }

/* ── Forms ── */
.form-control, .form-select {
    background: var(--clr-surface-2) !important;
    border: 1px solid var(--clr-border) !important;
    color: var(--clr-text) !important;
    border-radius: var(--radius-sm) !important;
    padding: .6rem .9rem !important;
    transition: border-color var(--transition) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--clr-primary-rgb),.15) !important;
}
.form-label { font-weight: 500; color: var(--clr-text-muted); font-size: .85rem; margin-bottom: .35rem; }

/* ── Page titles ── */
.page-title {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: .75rem;
}
.page-title i { color: var(--clr-primary); }

/* ── Section titles (cards/panels) ── */
.section-title {
    color: var(--clr-text);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: 1rem;
}
.section-title i { color: var(--clr-primary); margin-right: .35rem; }

/* ── Login page ── */
.login-wrapper {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--clr-login-gradient-start) 0%, var(--clr-login-gradient-end) 100%);
}
.login-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 100%; max-width: 420px;
    box-shadow: var(--shadow-lg);
}
.login-brand {
    text-align: center; margin-bottom: 2rem;
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--clr-primary);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
}
@media (max-width: 575.98px) {
    .content-area { padding: 1rem; }
    .stat-card { padding: 1rem; }
}

/* ═══════════════════════════════════════
   Overrides centralizados — neutralizar utilities Bootstrap oscuros.
   Mantienen coherencia con el design system claro sin modificar vistas.
   Para volver a oscuro: cambiar solo las variables de :root arriba.
   ═══════════════════════════════════════ */

.bg-dark, .bg-black, .text-bg-dark {
    background-color: var(--clr-surface-2) !important;
    color: var(--clr-text) !important;
}

.bg-dark .text-white,
.bg-black .text-white,
.text-bg-dark .text-white,
.bg-dark.text-white,
.bg-black.text-white {
    color: var(--clr-text) !important;
}

.bg-dark .border-secondary,
.bg-dark.border-secondary,
.bg-black .border-secondary {
    border-color: var(--clr-border) !important;
}

.bg-dark .form-control.bg-transparent,
.bg-black .form-control.bg-transparent {
    color: var(--clr-text) !important;
}

.navbar-dark {
    background-color: var(--clr-surface) !important;
}
.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
    color: var(--clr-text) !important;
}

/* ── Assignee picker (selector multi-gestor con modal) ── */
.assignee-picker-chips {
    display: flex; flex-wrap: wrap; gap: .35rem;
    min-height: 2rem;
}
.assignee-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .5rem .25rem .65rem;
    background: rgba(var(--clr-primary-rgb),.12);
    border: 1px solid rgba(var(--clr-primary-rgb),.35);
    color: var(--clr-primary);
    border-radius: 16px;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.2;
}
.assignee-chip-label { display: inline-block; }
.assignee-chip-x {
    border: 0; background: transparent; color: var(--clr-primary);
    cursor: pointer; padding: 0 .2rem; line-height: 1; font-size: 1.1rem; font-weight: 700;
    opacity: .65;
}
.assignee-chip-x:hover { opacity: 1; color: var(--clr-danger); }
.assignee-picker-list { max-height: 50vh; overflow-y: auto; }
.assignee-picker-list .list-group-item { cursor: pointer; }
.assignee-picker-list .list-group-item:hover { background: rgba(var(--clr-primary-rgb),.05); }

/* Empty record placeholder for Syncfusion grids (Activities / BusinessProcesses / TaxControls) */
.grid-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--clr-text-muted);
}
.grid-empty i {
    display: block;
    font-size: 2.25rem;
    margin-bottom: .5rem;
    opacity: .7;
}
.grid-empty p {
    margin: 0;
    font-size: .95rem;
}

/* ── Grid global search bar (búsqueda en cualquier campo, encima del grid) ── */
.grid-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 12px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.grid-search-bar:focus-within {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(var(--clr-primary-rgb), .15);
}
.grid-search-bar .gsb-icon { color: var(--clr-text-muted); font-size: 1rem; flex: 0 0 auto; }
.grid-search-bar .gsb-input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--clr-text);
    font-size: .9rem;
    padding: 2px 0;
}
.grid-search-bar .gsb-input::placeholder { color: var(--clr-text-muted); }
.grid-search-bar .gsb-clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--clr-text-muted);
    cursor: pointer;
    padding: 2px 5px;
    line-height: 1;
    border-radius: 50%;
    transition: color var(--transition), background var(--transition);
}
.grid-search-bar .gsb-clear:hover { color: var(--clr-text); background: var(--clr-border); }

/* ── Grid active-filter bar (filtros aplicados + limpiar) ── */
.grid-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-left: 3px solid var(--clr-primary);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 12px;
}
.grid-filter-bar .gfb-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.grid-filter-bar .gfb-icon { color: var(--clr-primary); }
.grid-filter-bar .gfb-label { font-weight: 600; color: var(--clr-text); }
.grid-filter-bar .gfb-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.grid-filter-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: .8rem;
    line-height: 1.4;
}
.grid-filter-chip .gfc-label { color: var(--clr-text-muted); }
.grid-filter-chip .gfc-value { color: var(--clr-text); font-weight: 600; }
.grid-filter-bar .gfb-clear { flex: 0 0 auto; padding: 2px 10px; font-size: .8rem; }

/* ── Cards del dashboard: filas y secciones clickeables que llevan al inbox filtrado ── */
.area-row-link { color: inherit; text-decoration: none; border-radius: var(--radius-sm); transition: background .15s ease; cursor: pointer; }
.area-row-link:hover { background: var(--clr-surface-2); color: inherit; }
.area-row-link:hover strong { color: var(--clr-primary); }
/* Leyenda de estados de la card de área. Impuestos tiene 4 estados con nombres largos ("Presentado
   pendiente de pago"), así que el texto va algo más chico y el conteo no se deja partir ni encoger. */
.area-status-legend { font-size: .88rem; line-height: 1.25; }
.area-status-legend .area-row-link > span:first-child { padding-right: .4rem; }
.area-status-legend .area-row-link strong { white-space: nowrap; flex: 0 0 auto; }
.area-status-legend .dot { flex: 0 0 auto; }
/* La dona y las stat-cards navegan; un puntero de "clic" lo deja claro. */
.area-card-clickable, .stat-card-link { cursor: pointer; }
.stat-card-link { color: inherit; text-decoration: none; display: block; }
.stat-card-link:hover .stat-card { border-color: var(--clr-primary); }

/* ── Nota de voz (audio recorder) ── */
.audio-recorder-label { font-size: .8rem; font-weight: 600; color: var(--clr-text-muted); }
/* Estado "grabando": rojo claro + pulso (antes solo cambiaba el icono y casi no se notaba). */
.btn-vigia.is-recording {
    background: rgba(239,68,68,.12);
    border: 1px solid var(--clr-danger);
    color: var(--clr-danger);
}
@media (prefers-reduced-motion: no-preference) {
    .btn-vigia.is-recording { animation: recPulse 1.4s ease-in-out infinite; }
    @keyframes recPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); }
        50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
    }
}

/* ── Alerts: fade al auto-cerrar los de éxito/info (los de error/advertencia quedan fijos) ── */
.alert { transition: opacity .4s ease; }
.alert.alert-autohide { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Vista Kanban de inbox (tablero de solo lectura). Override del tema Syncfusion
   para que combine con el design system. Las 3 columnas son, en orden,
   Pendiente/Abierto (sky) · En proceso (indigo) · Terminado/Cerrado (verde).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Toggle Grid/Tablero — botón activo resaltado en primary. */
.vigia-view-toggle .btn-vigia.btn-outline-v.active {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: var(--clr-text-on-primary);
}
.vigia-view-toggle .btn-vigia { display: inline-flex; align-items: center; }

/* Barra de filtros activos sobre el tablero (solo lectura): reusa los chips del grid. */
.vigia-kanban-filters {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: .9rem; padding: .55rem .75rem;
    background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
}
.vigia-kanban-filters .vkf-label { font-weight: 600; color: var(--clr-text); }
.vigia-kanban-filters .vkf-label .bi { color: var(--clr-primary); margin-right: .25rem; }
.vigia-kanban-filters .vkf-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Estados de carga / vacío / error del host del tablero. */
.vigia-kanban-state {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 240px; color: var(--clr-text-muted); font-size: .9rem;
}
.vigia-kanban-spin { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
    .vigia-kanban-spin { animation: vkSpin 1s linear infinite; }
    @keyframes vkSpin { to { transform: rotate(360deg); } }
}

/* ── Contenedor / tablero Syncfusion ── */
.vigia-kanban.e-kanban { background: transparent; border: none; }
.vigia-kanban .e-kanban-table { border-collapse: separate; }
.vigia-kanban .e-kanban-content,
.vigia-kanban .e-kanban-header { background: transparent; border: none; }

/* Cabeceras de columna: fondo sutil, sin bordes duros, con dot de color por estado. */
.vigia-kanban .e-kanban-header .e-header-cells {
    background: transparent; border: none; padding: .25rem .5rem 0;
}
.vigia-kanban .e-kanban-header .e-header-cells .e-header-wrap { border: none; }
.vigia-kanban .e-header-text {
    font-family: var(--font); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .03em; color: var(--clr-text); display: inline-flex; align-items: center;
}
/* Dot de color por columna (orden semántico fijo en los 3 inboxes). */
.vigia-kanban .e-header-text::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    margin-right: .5rem; background: var(--st-neutral);
    /* Sin esto el dot es un flex item encogible y desaparece (width 0) cuando el título es largo. */
    flex: 0 0 auto;
}
.vigia-kanban .e-header-cells:nth-child(1) .e-header-text::before { background: var(--st-pending); }
.vigia-kanban .e-header-cells:nth-child(2) .e-header-text::before { background: var(--st-inprogress); }
.vigia-kanban .e-header-cells:nth-child(3) .e-header-text::before { background: var(--st-done); }
/* Impuestos tiene CUATRO columnas (Programado · Por presentar · Presentado pendiente de pago ·
   Presentado y pagado), así que el orden de arriba queda corrido y la 4ª sin color. Estos son los
   mismos colores que usa el dashboard para esos estados (ver TaxStatusPresentation). */
.vigia-kanban.vigia-kanban-tax .e-header-cells:nth-child(2) .e-header-text::before { background: var(--st-waitingclient); }
.vigia-kanban.vigia-kanban-tax .e-header-cells:nth-child(3) .e-header-text::before { background: var(--st-inprogress); }
.vigia-kanban.vigia-kanban-tax .e-header-cells:nth-child(4) .e-header-text::before { background: var(--st-done); }
/* Sus nombres tampoco caben en una línea ("Presentado pendiente de pago"): envuelven en dos, con el
   dot alineado arriba, en vez de recortarse. */
.vigia-kanban.vigia-kanban-tax .e-header-text { white-space: normal; align-items: flex-start; }
.vigia-kanban.vigia-kanban-tax .e-header-text::before { margin-top: .32rem; }
/* Contador de items por columna en pill. */
.vigia-kanban .e-header-cells .e-item-count {
    background: var(--clr-surface-2); color: var(--clr-text-muted);
    border-radius: 20px; padding: .05rem .5rem; font-size: .72rem; font-weight: 700; margin-left: .5rem;
}

/* Cuerpo de columna: fondo sutil tipo "carril". */
.vigia-kanban .e-content-row .e-content-cells {
    background: var(--clr-bg); border: 1px solid var(--clr-border);
    border-radius: var(--radius); padding: .5rem; vertical-align: top;
}
.vigia-kanban .e-content-row .e-content-cells + .e-content-cells { border-left: 1px solid var(--clr-border); }

/* ── Cards ── */
/* Cada card lleva un acento de color en el borde izquierdo según el estado de su columna (Pendiente sky ·
   En proceso indigo · Terminado verde) + sombra para que resalte. El acento se hace con inset box-shadow
   (no con border-left) para que el hover —que tiñe el borde de primary— no lo pise. */
/* Nota: Syncfusion define el borde de .e-card con selectores muy específicos; para que el acento de color
   gane hay que forzarlo con !important (patrón estándar de override del tema EJ2). */
.vigia-kanban .e-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border) !important;
    border-left-width: 5px !important; border-left-style: solid !important;
    border-radius: var(--radius-sm);
    margin: 0 0 .7rem; padding: 0; cursor: pointer;
    box-shadow: 0 3px 10px rgba(17, 24, 39, .10) !important;
    transition: box-shadow var(--transition), transform var(--transition);
}
.vigia-kanban .e-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(17, 24, 39, .16) !important; }

/* Acento de color en el borde izquierdo según el estado de la columna (orden fijo en los 3 inboxes). */
.vigia-kanban .e-content-cells:nth-child(1) .e-card { border-left-color: var(--st-pending) !important; }
.vigia-kanban .e-content-cells:nth-child(2) .e-card { border-left-color: var(--st-inprogress) !important; }
.vigia-kanban .e-content-cells:nth-child(3) .e-card { border-left-color: var(--st-done) !important; }
/* Impuestos: mismo corrimiento que en los dots del header, ahora sobre el acento de la card. */
.vigia-kanban.vigia-kanban-tax .e-content-cells:nth-child(2) .e-card { border-left-color: var(--st-waitingclient) !important; }
.vigia-kanban.vigia-kanban-tax .e-content-cells:nth-child(3) .e-card { border-left-color: var(--st-inprogress) !important; }
.vigia-kanban.vigia-kanban-tax .e-content-cells:nth-child(4) .e-card { border-left-color: var(--st-done) !important; }

/* Contenido de la card (template propio). */
.vk-card { display: flex; flex-direction: column; gap: .4rem; padding: .7rem .8rem; }
.vk-top { display: flex; align-items: center; justify-content: space-between; }
.vk-num { font-weight: 700; font-size: .78rem; color: var(--clr-primary); font-variant-numeric: tabular-nums; }
.vk-ai { color: var(--clr-danger); font-size: .9rem; }
.vk-title { font-weight: 600; font-size: .9rem; color: var(--clr-text); line-height: 1.3; }
.vk-meta { font-size: .76rem; color: var(--clr-text-muted); line-height: 1.25; }
.vk-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.vk-chip {
    display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 20px;
    font-size: .7rem; font-weight: 600; background: var(--clr-surface-2); color: var(--clr-text-muted);
}
/* Chip de categoría "¿con quién está la pelota?" con color (mismos tonos que el breakdown del dashboard):
   Cliente naranja · Interno azul · Externo teal. Antes era gris y se perdía. */
.vk-cat {
    display: inline-flex; align-items: center; padding: .12rem .6rem; border-radius: 20px;
    font-size: .7rem; font-weight: 600;
}
.vk-cat-client   { background: rgba(234, 88, 12, .12);  color: #c2410c; }
.vk-cat-internal { background: rgba(37, 99, 235, .12);  color: #1d4ed8; }
.vk-cat-external { background: rgba(13, 148, 136, .14); color: #0f766e; }

/* Línea del consecutivo: prioridad (y robot IA) alineados a la derecha en la misma fila del N°. */
.vk-top-right { display: inline-flex; align-items: center; gap: .4rem; }
.vk-prio { font-size: .68rem; padding: .1rem .55rem; }
.vk-progress { height: 7px; background: var(--clr-surface-2); border-radius: 4px; overflow: hidden; }
.vk-progress-bar { height: 100%; border-radius: 4px; }
.vk-progress-label { font-size: .7rem; color: var(--clr-text-muted); font-weight: 600; margin-top: -.15rem; }
.vk-dates { display: flex; flex-direction: column; gap: .15rem; }
.vk-date { font-size: .76rem; color: var(--clr-text-muted); font-variant-numeric: tabular-nums; }
.vk-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin-top: .15rem; padding-top: .45rem; border-top: 1px solid var(--clr-border);
}
.vk-assignee { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.vk-avatar {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(var(--clr-primary-rgb), .15); color: var(--clr-primary);
    font-size: .65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.vk-assignee-name {
    font-size: .74rem; color: var(--clr-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem;
}
.vk-due { font-size: .74rem; color: var(--clr-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vk-amount { font-size: .82rem; font-weight: 700; color: var(--clr-text); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════
   Notificaciones in-app (VG-000108)
   ═══════════════════════════════════════ */

/* ── Campana del menú lateral ── */
.notif-bell { position: relative; }

/* Durmiendo: ícono gris + "zzz" tenue flotando en la esquina. */
.notif-bell.bell-sleeping i { color: var(--clr-text-muted); }
.notif-bell.bell-sleeping::after {
    content: "zzz";
    position: absolute; top: .28rem; left: 1.9rem;
    font-size: .58rem; font-weight: 700; font-style: italic;
    letter-spacing: .04em; color: var(--clr-text-muted); opacity: .55;
    pointer-events: none;
}
.notif-bell.bell-sleeping.active::after { color: var(--clr-text-on-primary); opacity: .7; }

/* Activa: ícono y texto rojos (danger) + leve vibración para que se note el trabajo pendiente. */
.notif-bell.bell-active i { color: var(--clr-danger); transform-origin: 50% 0; }
.notif-bell.bell-active span:not(.bell-badge) { color: var(--clr-danger); font-weight: 700; }
/* Cuando el ítem del menú está seleccionado (fondo primario), el texto va en blanco para contraste. */
.notif-bell.bell-active.active i,
.notif-bell.bell-active.active span:not(.bell-badge) { color: var(--clr-text-on-primary); }

/* Burbuja con el conteo, anclada a la esquina del ícono. */
.notif-bell .bell-badge {
    position: absolute; top: .3rem; left: 1.8rem;
    min-width: 1.05rem; height: 1.05rem; padding: 0 .28rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .66rem; font-weight: 700; line-height: 1;
    color: #fff; background: var(--clr-danger);
    border-radius: 999px; box-shadow: 0 0 0 2px var(--clr-surface);
}
.notif-bell.active .bell-badge { box-shadow: 0 0 0 2px var(--clr-primary); }
.notif-bell .bell-badge[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .notif-bell.bell-active i { animation: bellShake 2.4s ease-in-out infinite; }
    /* Sacude un instante y descansa el resto del ciclo (leve, no molesto). */
    @keyframes bellShake {
        0%, 82%, 100% { transform: rotate(0); }
        84% { transform: rotate(-12deg); }
        86% { transform: rotate(10deg); }
        88% { transform: rotate(-8deg); }
        90% { transform: rotate(6deg); }
        92% { transform: rotate(-3deg); }
        94% { transform: rotate(0); }
    }
}

/* ── Inbox de notificaciones ── */
.notif-inbox { padding: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.notif-item {
    display: flex; align-items: center; gap: 1rem;
    padding: .8rem .9rem;
    border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
    background: var(--clr-surface);
}
/* No abierta: destaca — borde izquierdo indigo, texto en negrita y punto indicador. */
.notif-item.is-unread { border-left: 3px solid var(--clr-primary); }
.notif-item.is-unread .notif-text { font-weight: 600; }
.notif-item.is-unread .notif-num::before {
    content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem;
    border-radius: 50%; background: var(--clr-primary); vertical-align: middle;
}
/* Ya abierta: fondo gris y texto atenuado (vista pero aún pendiente hasta el chulito). */
.notif-item:not(.is-unread) { background: var(--clr-surface-2); }
.notif-item:not(.is-unread) .notif-text,
.notif-item:not(.is-unread) .notif-meta { color: var(--clr-text-muted); }

.notif-num {
    flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--clr-primary); text-decoration: none; white-space: nowrap;
    padding: .3rem .6rem; border-radius: var(--radius-sm); background: var(--clr-surface);
    border: 1px solid var(--clr-border);
}
.notif-num:hover { background: var(--clr-primary); color: var(--clr-text-on-primary); border-color: var(--clr-primary); }
.notif-num:hover::before { background: var(--clr-text-on-primary); }

.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-text { color: var(--clr-text); font-size: .9rem; }
.notif-meta { color: var(--clr-text-muted); font-size: .76rem; font-variant-numeric: tabular-nums; margin-top: .1rem; }

/* Chulito: fondo verde + chulito blanco por defecto; verde más oscuro al pasar el mouse. */
.notif-done {
    flex: 0 0 auto; width: 2.1rem; height: 2.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--st-done); background: var(--st-done);
    color: #fff; border-radius: 50%; cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}
.notif-done:hover { background: var(--st-done-fg); border-color: var(--st-done-fg); }
.notif-done:disabled { opacity: .5; cursor: default; }
.notif-done i { font-size: 1.05rem; }

.notif-empty { padding: 2.5rem 1rem; color: var(--clr-text-muted); }
.notif-empty-icon { font-size: 2.4rem; display: block; margin-bottom: .6rem; opacity: .55; }
.vk-overdue { color: var(--clr-danger); font-weight: 700; }