/* ============================================================================
   YUZIOT — Design Tokens (fuente única de verdad)
   ============================================================================
   Sistema de temas vía atributo `data-theme` en <html>. Ambos temas
   (dark + light) están ACTIVOS y son elegibles por usuario desde
   `<app-module-settings>` (gear → Preferencias → Tema; dark / light / system).
   Persistencia: `user_profiles.theme_preference` + cache `localStorage`.

   Estructura:
     :root          → constantes invariantes (tipografía, pesos, radios,
                       sombras, transiciones, layout) — no cambian con tema.
     [data-theme=dark]  → paleta oscura (Terminal Elite v3) y aliases legacy.
     [data-theme=light] → paleta clara.

   Carga: link al final del <head> de cada módulo, después del <style> inline,
   para ganar la cascada sobre cualquier :root local.
   ============================================================================ */


/* ──────────────────────────────────────────────────────────────────────────
   Constantes (no dependen del tema)
   ────────────────────────────────────────────────────────────────────────── */

:root {
    /* Tipografía */
    --font-display: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-tech:    'Orbitron', 'Rajdhani', monospace;
    --ls-tech:      0.08em;
    --ls-tech-lg:   0.12em;

    /* Pesos */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-strong:   600;
    --fw-bold:     700;

    /* Radios */
    --radius-xs:   6px;
    --radius-sm:   8px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-pill: 9999px;

    /* Layout */
    --sidebar-w:          240px;
    --sidebar-collapsed:  64px;
    --topbar-h:           56px;
    --content-max:        1680px;

    /* Gutter lateral fluido — ÚNICO valor compartido por header, context-bar,
       y main-content. Garantiza que el borde-de-pantalla → primer elemento
       sea idéntico en cualquier visual de cualquier módulo, a cualquier ancho.

       Escalado:  320px → 6px   ·  768px → 11px   ·  1280px → 18px   ·  ≥1440px → 20px (max)
       Para edge-to-edge en pantallas chicas, valor mínimo 6px (los íconos 36×36
       del header necesitan respeto mínimo del borde). */
    --shell-gutter:       clamp(6px, 1.4vw, 20px);
    /* Para uso vertical estándar de cards/secciones */
    --shell-gutter-y:     clamp(12px, 2vw, 24px);

    /* Altura del header del módulo. Constante del design system §7.
       Se referencia desde app-shell.css para sincronizar la transformación
       del context-bar (sticky en top: var(--shell-header-h)). */
    --shell-header-h:     56px;

    /* Padding INTERNO de cards/secciones. Fluido también:
       320px → 14px   ·   768px → 19px   ·   ≥1024px → 24px (max).
       Garantiza que en mobile las cards aprovechen su ancho útil
       (timeline, KPIs, tablas) sin sacrificar comodidad en desktop. */
    --card-padding:       clamp(14px, 2.5vw, 24px);

    /* Gap VERTICAL estándar entre cards/secciones de un módulo.
       Aprobado por el usuario tras prueba visual (era 24px y se veía
       demasiado separado). Usar en .content gap, en grids de cards y
       en cualquier spacing entre bloques apilados verticalmente. */
    --card-gap:           8px;

    /* Transiciones */
    --t-fast:      120ms;
    --t-base:      200ms;
    --t-slow:      280ms;
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Canal de marca (white-label). Único token que el branding de cliente puede
       teñir; default = acento cian YUZIOT. Resuelve por tema vía --color-disp.
       NUNCA usar para colores semánticos (success/warning/error, OEE, estados). */
    --brand-accent: var(--color-disp);
}


/* ──────────────────────────────────────────────────────────────────────────
   TEMA OSCURO (default) — Terminal Elite v3
   Aplica con <html data-theme="dark"> o por default si no hay atributo.
   ────────────────────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
    color-scheme: dark;   /* controles nativos (date picker, scrollbar) en dark */

    /* Fondos */
    --bg-app:           #030508;
    --bg-app-grid:      rgba(0, 229, 255, 0.012);
    --bg-surface:       #0a0d14;
    --bg-surface-2:     #111621;
    --bg-surface-3:     #161c2a;
    --bg-elevated:      #1e2530;
    --bg-overlay:       rgba(2, 4, 8, 0.82);

    /* Bordes */
    --border-subtle:    rgba(255, 255, 255, 0.06);
    --border-default:   rgba(255, 255, 255, 0.10);
    --border-strong:    rgba(255, 255, 255, 0.16);
    --border-accent:    rgba(0, 229, 255, 0.24);
    --border-focus:     rgba(0, 229, 255, 0.55);

    /* Texto */
    --text-primary:     #ffffff;
    --text-secondary:   #949ba4;
    --text-tertiary:    #5c636d;
    --text-disabled:    #3a3f48;

    /* Marca + estados */
    --color-disp:       #00e5ff;  /* cian — accent principal */
    --color-rend:       #ffbb00;
    --color-cal:        #00ff88;
    --color-success:    #00ff88;
    --color-warning:    #ffbb00;
    --color-error:      #ff3355;
    --color-info:       #00bfff;
    --color-violet:     #c89eff;
    /* P7 — token canónico para acciones de Mantenimiento (botón ticket inline,
       acentos de la sección). Re-usa --color-violet en dark. */
    --color-maintenance: #c89eff;
    --accent-dim:       rgba(0, 229, 255, 0.15);

    /* KPI strip del Operator — color por indicador (Design System §13).
       Hex propios de marca; en dark = exactamente los literales históricos. */
    --kpi-disp:         #00d4ff;
    --kpi-rend:         #ffb547;
    --kpi-cal:          #00e87a;

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0,0,0,.32);
    --shadow-md: 0 8px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 15px 50px rgba(0,0,0,.65);
    --shadow-xl: 0 24px 64px rgba(0,0,0,.75);
    --text-shadow-neon: 0 0 10px var(--accent-dim);

    /* Superficies y overlays (Fase 1 theming — antes hex literales en componentes)
       REGLA (no reincidir): el cuerpo del modal es --bg-surface-2 (#111621); un
       panel #000/casi-negro adentro se ve como un agujero. Estos dos tokens son
       superficies azul-gris de la MISMA familia, NUNCA negro puro:
         · sunken  = recessed bajo la superficie (inputs/select/toolbar) — más
           oscuro que #111621 pero claramente NO negro.
         · popover = flotante por encima (listas/popovers) — más claro que el
           cuerpo, lee como elevado. */
    --surface-sunken:   #0d121d;                  /* inputs, select-trigger, toolbar (recessed, NO #000) */
    --surface-popover:  #1a2130;                  /* listas desplegables / popovers (elevado, NO casi-negro) */
    --overlay-faint:    rgba(255,255,255,0.025);  /* hover ultra-sutil */
    --overlay-soft:     rgba(255,255,255,0.05);   /* hover/tinte de cards y filas */
    --overlay-strong:   rgba(255,255,255,0.10);   /* track de toggle OFF */
    --text-on-accent:   #000;                     /* texto/icono sobre relleno de acento */
    --timeline-surface: #080a0f;                  /* fondo del .timeline-scroll (Operator) */

    /* ─── Aliases legacy (mapean nombres viejos a canónicos) ─── */
    --color-bg-primary:     var(--bg-app);
    --color-bg-secondary:   var(--bg-surface);
    --color-bg-tertiary:    var(--bg-elevated);
    --color-accent-primary: var(--color-disp);
    --color-text-primary:   var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary:  var(--text-tertiary);
    --color-border:         var(--border-subtle);
    --bg:        var(--bg-app);
    --accent:    var(--color-disp);
    --text-dim:  var(--text-tertiary);
    --text-sec:  var(--text-secondary);
    --bg-card:   var(--bg-surface);
    --border:    var(--border-subtle);
    --green:     var(--color-success);
    --red:       var(--color-error);
    --yellow:    var(--color-warning);
}


/* ──────────────────────────────────────────────────────────────────────────
   TEMA CLARO — activo desde Fase 3 (selector de tema por usuario).
   Aplica con <html data-theme="light">.

   Mantiene las MISMAS variables semánticas que el bloque dark: cualquier CSS
   que use --bg-surface, --text-primary, etc., se adapta automáticamente.
   ────────────────────────────────────────────────────────────────────────── */

[data-theme="light"] {
    color-scheme: light;   /* controles nativos (date picker, scrollbar) en light */

    /* Fondos (invertidos respecto al dark, con jerarquía sutil) */
    --bg-app:           #f5f7fa;
    --bg-app-grid:      rgba(0, 178, 200, 0.025);
    --bg-surface:       #ffffff;
    --bg-surface-2:     #f0f3f7;
    --bg-surface-3:     #e6ebf2;
    --bg-elevated:      #ffffff;
    --bg-overlay:       rgba(15, 25, 40, 0.65);

    /* Bordes — más oscuros en tema claro */
    --border-subtle:    rgba(15, 25, 40, 0.08);
    --border-default:   rgba(15, 25, 40, 0.12);
    --border-strong:    rgba(15, 25, 40, 0.18);
    --border-accent:    rgba(0, 137, 161, 0.32);
    --border-focus:     rgba(0, 137, 161, 0.65);

    /* Texto — invertido */
    --text-primary:     #0f1928;
    --text-secondary:   #4a5566;
    --text-tertiary:    #7c8694;
    /* Texto disabled / placeholder. Más tenue que --text-tertiary (sigue
       leyéndose como hint, no como texto activo) pero legible — Fase 3.5
       subió desde #b8c0cc, que sobre blanco quedaba casi invisible. */
    --text-disabled:    #959cab;

    /* Marca + estados — mismos hue, ajustado para fondos claros (más saturado) */
    --color-disp:       #0089a1;  /* cian más oscuro para contraste sobre blanco */
    --color-rend:       #c98a00;
    --color-cal:        #00a55a;
    --color-success:    #00a55a;
    --color-warning:    #c98a00;
    --color-error:      #d72d4d;
    --color-info:       #1d80c4;
    --color-violet:     #7d56cc;
    /* P7 — light theme: violet oscurecido para contraste AA sobre fondo claro */
    --color-maintenance: #7d56cc;
    --accent-dim:       rgba(0, 137, 161, 0.12);

    /* KPI strip del Operator — mismo hue (cian/ámbar/verde), oscurecido para
       contraste AA sobre la superficie clara del strip. */
    --kpi-disp:         #0089a1;
    --kpi-rend:         #c98a00;
    --kpi-cal:          #00a55a;

    /* Sombras — más sutiles en claro */
    --shadow-sm: 0 1px 3px rgba(15, 25, 40, .08);
    --shadow-md: 0 4px 12px rgba(15, 25, 40, .12);
    --shadow-lg: 0 10px 32px rgba(15, 25, 40, .16);
    --shadow-xl: 0 18px 48px rgba(15, 25, 40, .22);
    --text-shadow-neon: 0 0 6px rgba(0, 137, 161, .25);

    /* Superficies y overlays — equivalentes claros */
    --surface-sunken:   #ffffff;
    --surface-popover:  #ffffff;
    --overlay-faint:    rgba(15,25,40,0.03);
    --overlay-soft:     rgba(15,25,40,0.05);
    --overlay-strong:   rgba(15,25,40,0.10);
    --text-on-accent:   #ffffff;
    --timeline-surface: #e8ecf2;                  /* panel técnico claro; el chrome
                                                     del timeline (ejes/grid) ya
                                                     adapta a texto oscuro en light */

    /* Aliases legacy igual */
    --color-bg-primary:     var(--bg-app);
    --color-bg-secondary:   var(--bg-surface);
    --color-bg-tertiary:    var(--bg-elevated);
    --color-accent-primary: var(--color-disp);
    --color-text-primary:   var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary:  var(--text-tertiary);
    --color-border:         var(--border-subtle);
    --bg:        var(--bg-app);
    --accent:    var(--color-disp);
    --text-dim:  var(--text-tertiary);
    --text-sec:  var(--text-secondary);
    --bg-card:   var(--bg-surface);
    --border:    var(--border-subtle);
    --green:     var(--color-success);
    --red:       var(--color-error);
    --yellow:    var(--color-warning);
}


/* ──────────────────────────────────────────────────────────────────────────
   Auto-fallback al sistema operativo (prefers-color-scheme)
   Habilitado solo si <html> NO tiene atributo data-theme explícito.
   En producción esto NO se dispara: el pre-paint inline siempre setea
   data-theme antes del primer paint (resuelve 'system' con matchMedia).
   Bloque queda como defensa para entornos sin JS o pre-paint roto.
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: light) {
    html:not([data-theme]) {
        /* Vacío a propósito: el default sin data-theme es dark (los tokens del
           bloque `:root` cubren ese caso). Si en el futuro se quisiera que el
           default sin JS respete el SO, copiar acá los tokens de
           [data-theme="light"]. No es prioridad — el pre-paint inline ya cubre
           el caso normal. */
    }
}
