/* =============================================================================
 * TechnoSense-Wx — theme.css
 * -----------------------------------------------------------------------------
 * Tokens globales de diseño. Punto único de verdad para colores, tipografía,
 * espaciados y sombras. Cambiar un valor aquí lo cambia en todo el sistema.
 *
 * Modo oscuro: agregar data-theme="dark" en <html> activa el bloque dark.
 * El toggle lee/escribe localStorage('ts-theme') y aplica antes del paint.
 *
 * Cargar SIEMPRE primero, antes de base.css, components.css y el CSS de módulo.
 *
 * Arriba van las @font-face de Inter y JetBrains Mono: las fuentes viven en
 * public/assets/fonts/ y son las mismas de la app.
 * ============================================================================= */

/* ── Fuentes: Inter y JetBrains Mono, servidas desde public/assets/fonts/ ─── */
/* Hasta el 2026-10-06 la web pedía "Inter" y "JetBrains Mono" sin cargarlas, y
   cada aparato pintaba con la suya (SF Pro, Roboto, Segoe). Ahora son las
   MISMAS que empaqueta la app (TechnoSense-Wx-App/assets/fonts/), pasadas a
   WOFF2 sin tocar un solo avance ni contorno: un texto mide igual en la web y
   en la app, en cualquier aparato. Sin Google Fonts y sin local(): una Inter
   instalada en el equipo puede ser otra versión, con otras medidas.

   Pesos 400, 500, 700 y 800, los de la app. El 600 NO se sirve, a propósito:
   la web lo pide (.tend-badge, .hy-big-val, .cl-nombre...) y la app también,
   y las dos lo resuelven igual, con la cara de 700: para un peso mayor de 500
   se busca primero hacia arriba, en CSS Fonts 4 y en Flutter. Es una negrita
   real, no sintética. Cursiva tampoco hay, y la app tampoco la empaqueta: lo
   poco que la pide (.val-null, .cmp-why...) sale con la normal, inclinada por
   el navegador.

   Dos archivos por cara, repartidos con unicode-range:
     Familia-peso.woff2      latin de Google Fonts, super/subíndices, flechas,
                             operadores, formas y dingbats, y todo carácter que
                             aparece en la web. Es el que baja cualquier página.
     Familia-peso-ext.woff2  el resto del latín (Ext-A, Ext-B, Adicional,
                             diacríticos combinables), las monedas, los
                             símbolos de letra y las fracciones. Solo se baja
                             si la página trae uno, como un nombre polaco.
   El -ext va antes que el núcleo. Los rangos no se solapan y el orden no
   cambia nada, salvo en un navegador que ignorara unicode-range: ese se queda
   con la última regla de cada peso, y tiene que ser la del núcleo.

   ?v= son los ocho primeros caracteres del sha256 del archivo: si se regenera
   un .woff2, cambia su ?v=. Cómo se hacen, en public/assets/fonts/README.md. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Inter-400-ext.woff2?v=3e279228") format("woff2");
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB,
                   U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB,
                   U+20AD-20CF, U+2100-2121, U+2123-218F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Inter-400.woff2?v=57a0ea13") 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-209F, U+20AC, U+2122, U+2190-23FF, U+2500, U+2550,
                   U+25A0-25FF, U+2700-27BF, U+FEFF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Inter-500-ext.woff2?v=76df07ab") format("woff2");
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB,
                   U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB,
                   U+20AD-20CF, U+2100-2121, U+2123-218F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Inter-500.woff2?v=b054edb6") 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-209F, U+20AC, U+2122, U+2190-23FF, U+2500, U+2550,
                   U+25A0-25FF, U+2700-27BF, U+FEFF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Inter-700-ext.woff2?v=35b958ca") format("woff2");
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB,
                   U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB,
                   U+20AD-20CF, U+2100-2121, U+2123-218F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Inter-700.woff2?v=1ab267d9") 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-209F, U+20AC, U+2122, U+2190-23FF, U+2500, U+2550,
                   U+25A0-25FF, U+2700-27BF, U+FEFF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Inter-800-ext.woff2?v=c5e0bd6b") format("woff2");
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB,
                   U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB,
                   U+20AD-20CF, U+2100-2121, U+2123-218F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Inter-800.woff2?v=4c2a9252") 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-209F, U+20AC, U+2122, U+2190-23FF, U+2500, U+2550,
                   U+25A0-25FF, U+2700-27BF, U+FEFF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-400-ext.woff2?v=9e380ffe") format("woff2");
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB,
                   U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB,
                   U+20AD-20CF, U+2100-2121, U+2123-218F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-400.woff2?v=da79e713") 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-209F, U+20AC, U+2122, U+2190-23FF, U+2500, U+2550,
                   U+25A0-25FF, U+2700-27BF, U+FEFF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-500-ext.woff2?v=82a2a726") format("woff2");
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB,
                   U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB,
                   U+20AD-20CF, U+2100-2121, U+2123-218F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-500.woff2?v=b593b70e") 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-209F, U+20AC, U+2122, U+2190-23FF, U+2500, U+2550,
                   U+25A0-25FF, U+2700-27BF, U+FEFF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-700-ext.woff2?v=1597960c") format("woff2");
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB,
                   U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB,
                   U+20AD-20CF, U+2100-2121, U+2123-218F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-700.woff2?v=1ca59550") 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-209F, U+20AC, U+2122, U+2190-23FF, U+2500, U+2550,
                   U+25A0-25FF, U+2700-27BF, U+FEFF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-800-ext.woff2?v=6fe582cf") format("woff2");
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB,
                   U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB,
                   U+20AD-20CF, U+2100-2121, U+2123-218F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-800.woff2?v=a5171944") 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-209F, U+20AC, U+2122, U+2190-23FF, U+2500, U+2550,
                   U+25A0-25FF, U+2700-27BF, U+FEFF;
}

/* ── Tema claro (por defecto) ─────────────────────────────────────────────── */
:root {
    /* Paleta: cielo / instrumento */
    --sky-900: #0c4a6e;
    --sky-700: #075985;
    --sky-600: #0284c7;
    --sky-100: #e0f2fe;

    /* Acento: radiación solar */
    --solar-600: #d97706;
    --solar-500: #f59e0b;
    --solar-100: #fef3c7;

    /* Neutros — tema claro */
    --ink:       #1e293b;
    --ink-soft:  #475569;
    --muted:     #94a3b8;
    --line:      #e2e8f0;
    --paper:     #f8fafc;
    --white:     #ffffff;

    /* Superficies de cards y header */
    --surface-1: #ffffff;    /* cards, panels */
    --surface-2: #f8fafc;    /* página, fondos */
    --surface-3: #f1f5f9;    /* hovers, inputs */

    /* Estados */
    --ok:    #16a34a;
    --warn:  #f59e0b;
    --error: #dc2626;
    --idle:  #94a3b8;

    /* Tipografía */
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Inter", system-ui, -apple-system, sans-serif;
    --font-data:    "JetBrains Mono", "SF Mono", "Consolas", monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.85rem;
    --fs-base: 0.95rem;
    --fs-md:   1.1rem;
    --fs-lg:   1.5rem;
    --fs-xl:   2rem;
    --fs-2xl:  2.75rem;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold:   700;
    --fw-black:  800;

    /* Espaciado */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-8: 3rem;

    /* Radios */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    /* Sombras — modo claro */
    --shadow-sm: 0 1px 3px rgba(12, 74, 110, 0.08);
    --shadow-md: 0 4px 16px rgba(12, 74, 110, 0.10);
    --shadow-lg: 0 12px 40px rgba(12, 74, 110, 0.14);

    /* Transiciones */
    --t-fast: 0.15s ease;
    --t-base: 0.25s ease;

    /* Ícono del toggle (sol/luna) */
    --theme-icon: 'sun';
}

/* ── Tema oscuro ─────────────────────────────────────────────────────────── */
/* Inspirado en dashboards de instrumentación meteorológica:
   fondo casi negro, acentos azules y ámbar mantienen la identidad visual */
[data-theme="dark"] {
    /* Paleta: cielo nocturno */
    --sky-900: #7dd3fc;    /* azul claro — texto fuerte en oscuro */
    --sky-700: #38bdf8;    /* azul medio */
    --sky-600: #0ea5e9;    /* azul instrumento */
    --sky-100: #0c2a3e;    /* azul muy oscuro — fondos sutiles */

    /* Acento solar — mantener energía visual */
    --solar-600: #f59e0b;
    --solar-500: #fbbf24;
    --solar-100: #1c1609;

    /* Neutros — tema oscuro */
    --ink:       #f1f5f9;   /* texto cuerpo: casi blanco */
    --ink-soft:  #cbd5e1;   /* texto secundario */
    --muted:     #64748b;   /* texto terciario, labels */
    --line:      #1e293b;   /* bordes, divisores */
    --paper:     #0b1120;   /* fondo de página: azul muy oscuro */
    --white:     #131f35;   /* "blanco" en oscuro: superficie primaria */

    /* Superficies escalonadas */
    --surface-1: #162032;   /* cards, panels */
    --surface-2: #0b1120;   /* página */
    --surface-3: #1e293b;   /* hovers, inputs */

    /* Estados — ligeramente más brillantes en oscuro */
    --ok:    #22c55e;
    --warn:  #fbbf24;
    --error: #f87171;
    --idle:  #475569;

    /* Sombras — oscuro con glow azul sutil */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
}