/* ==========================================================================
   TrascendIT CRM — TOKENS
   --------------------------------------------------------------------------
   REGLA (arquitectura R2/R3): este es el UNICO archivo del repositorio donde
   puede declararse un color, un tamaño de letra, un radio, una sombra o un
   espaciado. Cualquier otra hoja los CONSUME con var(--…), nunca los declara.

   Consecuencias directas:
     - "bajarle un punto a la letra" = cambiar --text-base aqui, una sola vez.
     - el modo oscuro sale gratis en cualquier pagina que use los tokens; no
       se arregla pagina por pagina.
     - un cliente con otro color primario se resuelve aqui, no en 32 hojas.

   Carga: SIEMPRE antes de app.css y antes de cualquier hoja de pagina.
   Este archivo no aplica ni una sola regla de estilo — solo declara valores.
   ========================================================================== */

/* Google Fonts — Outfit (headings) + DM Sans (body) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Variables CSS */
:root {
    --sidebar-width: 260px;
    --sidebar-bg-top: #1a2744;
    --sidebar-bg-bot: #111d38;
    --sidebar-text: #c8d2e6;
    --sidebar-hover: rgba(255,255,255,0.08);
    --sidebar-active-border: #4a90fa;
    /* El fondo del item activo se deriva del color de acento (configurable). */
    --sidebar-active-bg: color-mix(in srgb, var(--sidebar-active-border) 22%, transparent);
    --sidebar-section: rgba(255,255,255,0.28);
    --topbar-height: 60px;
    --primary: #4f8ffc;
    --primary-dark: #3b6de0;
    --primary-light: rgba(79,143,252,0.1);
    --primary-glow: rgba(79,143,252,0.25);
    --accent: #6c5ce7;
    --accent-light: rgba(108,92,231,0.1);
    --success: #10b981;
    --success-light: rgba(16,185,129,0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245,158,11,0.1);
    --danger: #ef4444;
    --danger-light: rgba(239,68,68,0.1);
    --info: #06b6d4;
    --info-light: rgba(6,182,212,0.1);
    --body-bg: #e8edf5;
    --surface: #ffffff;
    --surface-alt: #f3f5fa;
    --border: #d4dbe8;
    --border-light: #e8ecf4;
    --text-main: #111827;
    --text-muted: #556479;
    /* Sprint E css-cleanup: #8494a7 daba 4.04:1 (falla AA); #6c7a8a da 4.92:1 */
    --text-light: #6c7a8a;
    /* Paleta oscura fija — superficies/bordes de componentes siempre oscuros
       (ej. chat IA en prefers-color-scheme: dark). Valores constantes:
       NO se redefinen en body.dark-mode. */
    --dark-surface: #1a1a2e;
    --dark-surface-alt: #2a2a3e;
    --dark-border: #334155;
    --card-shadow: 0 2px 6px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
    --card-shadow-hover: 0 12px 32px rgba(15,23,42,0.1), 0 4px 12px rgba(15,23,42,0.05);
    --shadow-lg: 0 20px 50px rgba(15,23,42,0.14), 0 6px 20px rgba(15,23,42,0.07);
    --shadow-glow: 0 4px 16px rgba(79,143,252,0.2);
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --radius-pill: 50px;
    --sidebar-zindex: 1040;
    /* ────────────────────────────────────────────────────────────────
       Tipografías del sistema. Son TRES y no hay una cuarta.

       --font-mono faltaba: se referenciaba desde jornada-laboral.css y
       proyeccion-nomina.css con `var(--font-mono, …)` y como el token no
       existía, siempre caía al fallback sin que nadie lo notara. Es el
       mismo fallo silencioso que tenía el login con sus fuentes.

       Es una pila del sistema a propósito, sin fuente web: las cifras
       tabulares no necesitan descarga y así no se puede "perder" como le
       pasó a 'Space Mono', que flujo-caja pedía y nadie cargaba.
       ──────────────────────────────────────────────────────────────── */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', 'Cascadia Mono',
                 'Segoe UI Mono', Menlo, Consolas, monospace;
    /* Acento editorial. Lo usa el título de Cumplimiento Comercial, que traía
       'Instrument Serif' cargada por su cuenta. El matiz de diseño se conserva;
       lo que se elimina es que una pantalla descargue su propia fuente. */
    --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia,
                  'Times New Roman', serif;

    /* Spacing scale (4px base) */
    --space-3xs: 0.125rem;  /* 2px */
    --space-2xs: 0.25rem;   /* 4px */
    --space-xs: 0.5rem;     /* 8px */
    --space-sm: 0.75rem;    /* 12px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* Sizing scale */
    --size-icon-sm: 1rem;      /* 16px — small inline icons */
    --size-icon: 1.25rem;      /* 20px — default icon size */
    --size-icon-lg: 1.5rem;    /* 24px — large icons */
    --size-touch: 2.75rem;     /* 44px — minimum touch target */
    --size-btn-sm: 2rem;       /* 32px — small buttons */
    --size-btn: 2.5rem;        /* 40px — default buttons */
    --size-avatar-sm: 2rem;    /* 32px */
    --size-avatar: 2.5rem;     /* 40px */
    --size-avatar-lg: 3rem;    /* 48px */

    /* ────────────────────────────────────────────────────────────────
       Escala tipográfica.

       Los dos extremos (--text-2xs y --text-4xl/5xl) se añadieron tras
       medir la tipografía REAL del sistema: había 759 font-size literales
       y 164 caían a más de 1px del escalón más cercano — casi todos por
       quedar FUERA de la escala, no por estar mal. Abajo, micro-etiquetas
       de tabla y badges (0,6–0,68rem); arriba, los números grandes de las
       tarjetas KPI y los heros (2rem, 2,5rem).

       Regla: una hoja de página NO escribe un tamaño literal. Si el que
       necesitas no está aquí, el que falta es el escalón, no la excepción.
       ──────────────────────────────────────────────────────────────── */
    --text-2xs: 0.65rem;   /* 10.4px — micro-etiquetas, badges diminutos */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.8125rem;  /* 13px */
    --text-base: 0.9rem;   /* 14.4px — body default */
    --text-md: 1rem;       /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px — page heros */
    --text-4xl: 2rem;      /* 32px — cifra destacada de KPI */
    --text-5xl: 2.5rem;    /* 40px — hero numérico */

    /* ────────────────────────────────────────────────────────────────
       PALETA CATEGÓRICA.

       Distinta de la semántica: --success/--warning/--danger significan
       "bien / ojo / mal". Estos matices NO significan nada, solo sirven
       para DISTINGUIR categorías entre sí — el propósito de un envío, el
       estado de una cola, la serie de un gráfico.

       Existen porque el sistema no los tenía y cada página se inventaba
       los suyos: los chips de la cola de correo llevaban #8b5cf6, #ec4899
       y #6366f1 sueltos. Al no ser tokens, no cambiaban en modo oscuro.

       Uso: color del texto sobre su versión -soft de fondo, igual que los
       badges del sistema.
       ──────────────────────────────────────────────────────────────── */
    --cat-slate:  #64748b;  --cat-slate-soft:  rgba(100,116,139,0.14);
    --cat-blue:   #3b82f6;  --cat-blue-soft:   rgba(59,130,246,0.14);
    --cat-indigo: #6366f1;  --cat-indigo-soft: rgba(99,102,241,0.14);
    --cat-violet: #8b5cf6;  --cat-violet-soft: rgba(139,92,246,0.14);
    --cat-pink:   #ec4899;  --cat-pink-soft:   rgba(236,72,153,0.14);
    --cat-teal:   #14b8a6;  --cat-teal-soft:   rgba(20,184,166,0.14);

    /* Podio: oro, plata y bronce. Son categóricos —indican posición, no
       estado— y reaparecen en cualquier ranking, así que viven aquí y no en
       la hoja del reporte que los estrenó. */
    --medal-gold:   #A47E1B;  --medal-gold-soft:   rgba(164,126,27,0.18);
    --medal-silver: #7A8493;  --medal-silver-soft: rgba(122,132,147,0.18);
    --medal-bronze: #8C6239;  --medal-bronze-soft: rgba(140,98,57,0.18);

    /* Font weights — escala explícita para no hardcodear */
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* Line heights */
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* ────────────────────────────────────────────────────────────────
       Breakpoints — Capa 4.5 (audit 2026-05-03 reporte 07).
       Convención Bootstrap 5: usar decimales para que `max-width: 767.98px`
       no traslape con `min-width: 768px`. Estos tokens son SOLO para
       documentar; las @media queries NO pueden usar var() — hay que
       hardcodear los mismos valores en CSS.
       ──────────────────────────────────────────────────────────────── */
    --bp-sm:        576px;
    --bp-md:        768px;
    --bp-lg:        992px;
    --bp-xl:        1200px;
    --bp-2xl:       1400px;
    --bp-sm-down:   575.98px;
    --bp-md-down:   767.98px;
    --bp-lg-down:   991.98px;
    --bp-xl-down:   1199.98px;

    /* ────────────────────────────────────────────────────────────────
       Z-index scale — evitar números mágicos dispersos.
       ──────────────────────────────────────────────────────────────── */
    --z-base:        0;
    --z-raised:      10;
    --z-dropdown:    1000;
    --z-sticky:      1020;
    --z-fixed:       1030;
    --z-sidebar:     1040;
    --z-overlay:     1050;
    --z-modal:       1055;
    --z-popover:     1070;
    --z-tooltip:     1080;
    --z-toast:       1090;
    --z-skip-link:   10000;

    /* ────────────────────────────────────────────────────────────────
       Focus ring — un solo origen de verdad para outline accesible.
       Audit 2026-05-03 reporte 07: foco invisible / outline removed.
       ──────────────────────────────────────────────────────────────── */
    --focus-ring-color:  var(--primary);
    --focus-ring-width:  2px;
    --focus-ring-offset: 2px;
    --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* --------------------------------------------------------------------------
   Sidebar — modo compacto (el ancho es un token; el comportamiento vive en
   app.css bajo `body.sidebar-compact`).
   -------------------------------------------------------------------------- */
:root {
    --sidebar-compact-width: 64px;
}

/* ==========================================================================
   MODO OSCURO — solo redefinicion de TOKENS.
   Los overrides de componentes (`body.dark-mode .card`, etc.) siguen en
   app.css: aqui unicamente se cambian los valores. Cuanto mas migremos las
   hojas a var(--…), mas se vacia ese bloque de app.css.
   ========================================================================== */
body.dark-mode {
    --body-bg:       #0a0f1e;
    --surface:       #111827;
    --surface-alt:   #1a2236;
    --border:        #2a3650;
    --border-light:  #1f2b40;
    --text-main:     #f1f5f9;
    --text-muted:    #a3b1c6;
    --text-light:    #7b8da4;
    --card-shadow:   0 2px 8px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
    --card-shadow-hover: 0 12px 36px rgba(0,0,0,0.55);
    --shadow-lg:     0 20px 50px rgba(0,0,0,0.65);
    --primary-light: rgba(79,143,252,0.15);
    --primary-glow:  rgba(79,143,252,0.25);
    --accent-light:  rgba(108,92,231,0.15);
    --success-light: rgba(16,185,129,0.15);
    --warning-light: rgba(245,158,11,0.15);
    --danger-light:  rgba(239,68,68,0.15);
    --info-light:    rgba(6,182,212,0.15);

    /* Paleta categórica en oscuro: mismos matices, un punto más claros para
       que mantengan contraste sobre superficie oscura, y el -soft con algo
       más de alfa para que el chip siga distinguiéndose del fondo. */
    --cat-slate:  #94a3b8;  --cat-slate-soft:  rgba(148,163,184,0.18);
    --cat-blue:   #7fb5ff;  --cat-blue-soft:   rgba(127,181,255,0.18);
    --cat-indigo: #a5b4fc;  --cat-indigo-soft: rgba(165,180,252,0.18);
    --cat-violet: #c4b5fd;  --cat-violet-soft: rgba(196,181,253,0.18);
    --cat-pink:   #f9a8d4;  --cat-pink-soft:   rgba(249,168,212,0.18);
    --cat-teal:   #5eead4;  --cat-teal-soft:   rgba(94,234,212,0.18);

    /* Medallas: los tonos claros miden 2,8–3,8 de contraste sobre superficie
       oscura, o sea ilegibles. Se aclaran conservando el matiz metálico. */
    --medal-gold:   #D9AE3B;  --medal-gold-soft:   rgba(217,174,59,0.20);
    --medal-silver: #B4BECD;  --medal-silver-soft: rgba(180,190,205,0.20);
    --medal-bronze: #CE9366;  --medal-bronze-soft: rgba(206,147,102,0.20);

    color-scheme: dark;

    /* Mapeo de variables Bootstrap 5 → tokens del CRM en dark mode.
       Vistas como orden_de_facturacion/document-details usan
       `var(--bs-body-bg)`, `var(--bs-body-color)` etc. directamente
       (en vez de los tokens del CRM). Sin este mapeo, esas vistas
       quedan en colores claros sobre fondo oscuro. */
    --bs-body-bg:           var(--surface);
    --bs-body-color:        var(--text-main);
    --bs-border-color:      var(--border);
    --bs-border-color-translucent: var(--border-light);
    --bs-secondary-bg:      var(--surface-alt);
    --bs-secondary-color:   var(--text-muted);
    --bs-tertiary-bg:       var(--surface-alt);
    --bs-tertiary-color:    var(--text-light);
    --bs-emphasis-color:    var(--text-main);
    --bs-link-color:        #7fb5ff;
    --bs-link-hover-color:  #9bc5ff;
    --bs-table-bg:          var(--surface);
    --bs-table-color:       var(--text-main);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg:  var(--surface-alt);
    --bs-table-hover-bg:    rgba(255,255,255,0.04);
    --bs-form-control-bg:   var(--surface-alt);
    --bs-form-control-color: var(--text-main);
    --bs-form-control-border-color: var(--border);
    --bs-card-bg:           var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-cap-bg:       var(--surface-alt);
    --bs-modal-bg:          var(--surface);
    --bs-modal-border-color: var(--border);
    --bs-dropdown-bg:       var(--surface);
    --bs-dropdown-color:    var(--text-main);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-link-color: var(--text-main);
    --bs-dropdown-link-hover-bg: var(--surface-alt);

    /* Las utilidades de Bootstrap NO leen las variables de arriba: leen su
       gemela `-rgb`, porque las compone con rgba() para poder aplicar
       opacidad. `.bg-body-tertiary` es
       `rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity))`, así que
       redefinir `--bs-tertiary-bg` no la mueve ni un pixel.

       Sin estas cuatro líneas, cualquier `.bg-body-*` o `.text-body-*`
       se queda CLARA sobre el fondo oscuro — que es la franja blanca que
       tenía la cabecera de Proyección de Renta.

       Van como tripletas porque rgba() no acepta un color dentro; son los
       mismos valores de --surface / --surface-alt / --text-muted /
       --text-light de este bloque. */
    --bs-secondary-bg-rgb:    26, 34, 54;      /* --surface-alt  #1a2236 */
    --bs-tertiary-bg-rgb:     26, 34, 54;      /* --surface-alt  #1a2236 */
    --bs-body-bg-rgb:         17, 24, 39;      /* --surface      #111827 */
    --bs-secondary-color-rgb: 163, 177, 198;   /* --text-muted   #a3b1c6 */
    --bs-tertiary-color-rgb:  123, 141, 164;   /* --text-light   #7b8da4 */
    --bs-emphasis-color-rgb:  241, 245, 249;   /* --text-main    #f1f5f9 */
}