/* ============================================================
   CELTEC — Tokens de diseño (única fuente de variables)
   Se enlaza ANTES de dark-mode.css y de celtec-app.css.
   Modo oscuro: clase `dark-mode` en <body> (igual que hoy).

   Estructura:
     1. Fuente (Inter, subconjunto latino, autoalojada)
     2. Tokens base (claro)
     3. Alias heredados (--primary, --dark, --gray, ...) para no romper
        las páginas ni los style="var(--gray)" existentes
     4. Tokens modo oscuro
   ============================================================ */

/* ── 1. Fuente ─────────────────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'),
         url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 2. Tokens base (modo claro) ───────────────────────────── */
:root {
    /* Marino (estructura) */
    --navy-950: #0A1228;
    --navy-900: #0F1B3D;
    --navy-800: #172554;
    --navy-700: #243B7A;

    /* Azul del logo (acción) */
    --brand-100: #E8EDFF;
    --brand-200: #98B8F8;   /* azul claro del logo */
    --brand-500: #4868F8;   /* azul del logo: decorativo y anillos de foco */
    --brand-600: #3B55E6;   /* acción: botones y enlaces (5.8:1 con blanco) */
    --brand-700: #2F49D1;   /* hover (7:1) */

    /* Estados (el color sólido lleva texto blanco ≥ 4.8:1) */
    --success-600: #047857;
    --success-bg:  #D1FAE5;
    --success-fg:  #065F46;
    --warning-600: #B45309;
    --warning-bg:  #FEF3C7;
    --warning-fg:  #92400E;
    --danger-600:  #DC2626;
    --danger-bg:   #FEE2E2;
    --danger-fg:   #991B1B;
    --info-600:    #2563EB;
    --info-bg:     #E8EDFF;
    --info-fg:     #2F49D1;
    --neutral-bg:  #E2E8F0;
    --neutral-fg:  #475569;

    /* Series de gráficas (Fase 9k-6): cada una ≥ 4,5:1 contra --surface (blanco); se leen con
       getComputedStyle(document.body) al pintar. Los nombres son el tono, no el significado. */
    --chart-brand:  #3B55E6;
    --chart-blue:   #0369A1;
    --chart-green:  #047857;
    --chart-amber:  #B45309;
    --chart-red:    #DC2626;
    --chart-violet: #7C3AED;
    --chart-pink:   #BE185D;
    --chart-teal:   #0F766E;
    --chart-slate:  #64748B;

    /* Superficies, bordes y texto */
    --bg:            #F4F6FB;
    --surface:       #FFFFFF;
    --surface-2:     #F1F5F9;
    --surface-hover: #F8FAFC;
    --surface-raised: #FFFFFF;  /* modales y paneles flotantes (en oscuro, una capa sobre la tarjeta) */
    --field-bg:      var(--surface);   /* fondo de inputs y cabecera de tabla */
    --border:        #E2E8F0;
    --border-strong: #CBD5E1;
    --border-input:  #7C8DA8;   /* 3.4:1 sobre blanco (borde de controles) */

    /* Texto de color (en oscuro se aclara para llegar a ≥ 4.5:1) */
    --primary-text:  var(--brand-600);
    --success-text:  var(--success-600);
    --warning-text:  var(--warning-600);
    --danger-text:   var(--danger-600);
    --text:          #0F1B3D;
    --text-muted:    #52627A;   /* 6.2:1 sobre blanco, 5.7:1 sobre --bg */
    --link:          var(--brand-600);
    --on-brand:      #FFFFFF;
    --overlay:       rgba(10, 18, 40, 0.6);

    /* Sidebar */
    --sidebar-bg:          var(--navy-900);
    --sidebar-border:      rgba(255, 255, 255, 0.1);
    --sidebar-text:        rgba(255, 255, 255, 0.78);
    --sidebar-text-muted:  rgba(255, 255, 255, 0.62);
    --sidebar-hover:       rgba(255, 255, 255, 0.07);
    --sidebar-active-bg:   var(--brand-600);
    --sidebar-width:       260px;
    --sidebar-collapsed:   70px;

    /* Tipografía */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-xs:  0.75rem;    /* 12 */
    --fs-sm:  0.875rem;   /* 14 */
    --fs-md:  1rem;       /* 16 (mínimo en inputs: evita el zoom de iOS) */
    --fs-lg:  1.125rem;   /* 18 */
    --fs-xl:  1.25rem;    /* 20 */
    --fs-2xl: 1.5rem;     /* 24 */
    --fs-3xl: 1.875rem;   /* 30 */
    --fs-4xl: 2.25rem;    /* 36 */
    --lh-tight: 1.2;
    --lh-base:  1.5;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    /* Espaciado (base 4 px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    /* Radios */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(15, 27, 61, 0.06), 0 1px 3px rgba(15, 27, 61, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 27, 61, 0.10);
    --shadow-lg: 0 12px 32px rgba(15, 27, 61, 0.18);
    --ring:      0 0 0 3px rgba(72, 104, 248, 0.35);
    --focus-color: var(--brand-600);

    /* Movimiento */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 150ms;
    --dur: 250ms;

    /* Capas */
    --z-sticky: 10;
    --z-fab: 900;
    --z-sidebar: 1000;
    --z-drawer: 2000;
    --z-modal: 3000;
    --z-toast: 9999;

    /* Tamaños de control (el POS en escritorio mantiene densidad) */
    --tap: 44px;
    --control-h: 40px;

    /* Operadoras (Fase 9i): colores de marca. --tigo / --claro son RELLENOS (botón activo con texto blanco);
       -fg = texto sobre su fondo suave (-bg); -ink = texto de color sobre la tarjeta (≥ 4.5:1 sobre blanco y --bg).
       En oscuro se aclaran -bg, -fg e -ink (ver más abajo). */
    --tigo:  #00A0E9;
    --claro: #E30613;
    --tigo-bg:  #DBEEFF;  --tigo-fg:  #0065A3;  --tigo-ink:  #003876;
    --claro-bg: #FEE2E2;  --claro-fg: #991B1B;  --claro-ink: #E2001A;
}

@media (pointer: coarse) {
    :root { --control-h: 44px; }
}

/* ── 3. Alias heredados ────────────────────────────────────────
   Declarados en :root Y en body para que se vuelvan a resolver
   con los tokens oscuros cuando <body> tiene .dark-mode.
   Las páginas siguen usando var(--primary), var(--gray), etc.   */
:root,
body {
    --primary:      var(--brand-600);
    --primary-dark: var(--brand-700);
    --secondary:    var(--success-600);
    --danger:       var(--danger-600);
    --warning:      var(--warning-600);
    --info:         var(--info-600);
    --dark:         var(--text);
    --gray:         var(--text-muted);
    --light-gray:   var(--bg);
    --white:        var(--surface);
}

/* ── 4. Modo oscuro ───────────────────────────────────────── */
body.dark-mode {
    /* Jerarquía de capas: body < tarjeta < modal (+ hover) */
    --bg:             #070D1C;   /* fondo de página */
    --surface:        #14203F;   /* tarjetas, encabezado de página */
    --surface-2:      #1A2A52;   /* botón secundario, fondos suaves */
    --surface-raised: #213363;   /* modales y paneles flotantes */
    --surface-hover:  #27386A;   /* fila/ítem en hover */
    --field-bg:       #070D1C;   /* inputs y cabecera de tabla (hundidos) */
    --border:         #2A3C6C;
    --border-strong:  #3F5388;
    --border-input:   #6A7EA8;   /* 4.9:1 sobre el campo, 4.0:1 sobre la tarjeta */
    --text:           #E8EDF8;
    --text-muted:     #9AA9C5;
    --link:           #9DB0FF;
    --overlay:        rgba(3, 7, 18, 0.75);

    /* Texto de color sobre superficies oscuras (≥ 4.5:1 en todas las capas) */
    --primary-text: #9DB0FF;
    --success-text: #6EE7B7;
    --warning-text: #FCD34D;
    --danger-text:  #FCA5A5;

    --success-bg: #0B3B2E;  --success-fg: var(--success-text);
    --warning-bg: #3B2A08;  --warning-fg: var(--warning-text);
    --danger-bg:  #450A0A;  --danger-fg:  var(--danger-text);
    --info-bg:    #1E2B5C;  --info-fg:    #A5B8FF;
    --neutral-bg: #2A3C6C;  --neutral-fg: #C5D0E6;

    /* Series de gráficas sobre --surface oscuro (#14203F): ≥ 5,8:1 */
    --chart-brand:  #8EA2FF;
    --chart-blue:   #38BDF8;
    --chart-green:  #34D399;
    --chart-amber:  #FBBF24;
    --chart-red:    #F87171;
    --chart-violet: #A78BFA;
    --chart-pink:   #F472B6;
    --chart-teal:   #2DD4BF;
    --chart-slate:  #94A3B8;

    /* Operadoras: --tigo y --claro (rellenos) no cambian */
    --tigo-bg:  #0B2F4D;  --tigo-fg:  #7DD3FC;  --tigo-ink:  #7DD3FC;
    --claro-bg: #450A0A;  --claro-fg: #FCA5A5;  --claro-ink: #FCA5A5;

    --sidebar-bg: var(--navy-950);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --ring:      0 0 0 3px rgba(157, 176, 255, 0.4);
    --focus-color: #9DB0FF;
}