/* ============================================================
   THEME — Tokens propios del portal de RAMs
   ------------------------------------------------------------
   Las PRIMITIVAS de marca (paleta, texto, navy, acentos, reset,
   tipografía base, modo oscuro de las primitivas) viven en
   optivia-brand.css, que CADA página enlaza ANTES de este archivo.

   Aquí viven los tokens específicos del portal: estados semánticos,
   dominio (RAM, prioridad, cumplimiento, frescura, unidades), escala
   tipográfica, radios/capas/sombras, y el selector de tema.
   ============================================================ */

:root {
  /* ===== Tokens semánticos y de escala (Fase 1 — biblioteca de componentes) ===== */
  /* Superficie extra, foco y ámbar sólido (legible sobre claro) */
  --surface-3:  #efede7;
  --focus-ring: 0 0 0 3px rgba(55,138,221,.45);
  --amber-solid:#c47a0a;

  /* Texto sólido verde/rojo para chips y barras de sync (inspecciones).
     Reusan las primitivas --green/--red, que YA cambian solas en oscuro,
     en vez de un hex fijo que reprobaba AA en dark. Contraste verificado
     sobre --green-bg/--red-bg: claro ~5.8:1 (verde) / ~6.0:1 (rojo);
     oscuro ~7.9:1 (verde) / ~7.0:1 (rojo). */
  --green-solid: var(--green);
  --red-solid:   var(--red);

  /* Color de primer plano de acento (texto, íconos, indicador activo).
     En claro es el navy de marca; en oscuro NO puede ser --navy (casi
     negro, ~1.1:1) → se reasigna a un azul claro legible en el override
     de [data-theme="dark"] de abajo. */
  --accent-fg:  var(--navy);

  /* Escala tipográfica */
  --fs-micro: 10px;
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-body:  14px;
  --fs-body-field: 16px;
  --fs-display: 24px;
  --fw-medium: 500;
  --fw-semibold: 600;
  --ls-caps: .04em;

  /* Radios, capas, motion, táctil */
  --r-pill: 999px;
  --z-sticky: 10;
  --transition-slow: .3s ease;
  --touch-min: 44px;

  /* Estados semánticos (alias a primitivas → cambian solos en oscuro) */
  --color-success: var(--green);  --color-success-bg: var(--green-bg);  --color-success-bd: var(--green-bd);
  --color-warning: var(--amber);  --color-warning-bg: var(--amber-bg);  --color-warning-bd: var(--amber-bd);
  --color-danger:  var(--red);    --color-danger-bg:  var(--red-bg);    --color-danger-bd:  var(--red-bd);
  --color-info:    var(--blue);   --color-info-bg:    var(--blue-bg);   --color-info-bd:    var(--blue-bd);
  --color-neutral: var(--text-2); --color-neutral-bg: var(--surface-2); --color-neutral-bd: var(--border);

  /* Dominio: bordes de estados de RAM + estado "reabierta" */
  --ram-abierta-bd:     var(--blue-bd);
  --ram-para-cierre-bd: var(--amber-bd);
  --ram-cerrada-bd:     var(--green-bd);
  --ram-reabierta:      var(--purple);
  --ram-reabierta-bg:   var(--purple-bg);
  --ram-reabierta-bd:   var(--purple-bd);

  /* Dominio: prioridad */
  --prio-alta:  var(--red);    --prio-alta-bg:  var(--red-bg);
  --prio-media: var(--amber);  --prio-media-bg: var(--amber-bg);
  --prio-baja:  var(--text-2); --prio-baja-bg:  var(--surface-2);

  /* Dominio: cumplimiento de mantenimiento */
  --cumpl-al-dia:     var(--green);  --cumpl-al-dia-bg:     var(--green-bg);
  --cumpl-por-vencer: var(--amber);  --cumpl-por-vencer-bg: var(--amber-bg);
  --cumpl-atrasado:   var(--red);    --cumpl-atrasado-bg:   var(--red-bg);

  /* Dominio: frescura del dato */
  --fresh-en-linea:  var(--blue-mid);
  --fresh-retrasado: var(--amber);
  --fresh-sin-datos: var(--text-3);
  --fresh-offline:   var(--red);

  /* Colores específicos para estados de RAMs */
  --ram-abierta:      var(--blue-mid);
  --ram-abierta-bg:   var(--blue-bg);
  --ram-para-cierre:  var(--amber);
  --ram-para-cierre-bg: var(--amber-bg);
  --ram-cerrada:      var(--green);
  --ram-cerrada-bg:   var(--green-bg);

  /* Colores específicos para estatus de unidades */
  --unidad-habilitada:    var(--green);
  --unidad-habilitada-bg: var(--green-bg);
  --unidad-inhabilitada:  var(--red);
  --unidad-inhabilitada-bg: var(--red-bg);

  /* Misc */
  --r:         8px;
  --r2:        12px;
  --r3:        14px;
  --nav-w:     220px;   /* ancho expandido del sidebar */
  --nav-rail:  64px;    /* ancho colapsado (riel de solo iconos) */
  --transition: .15s ease;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 2px 10px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(26,39,68,.12);

  /* ===== Tokens estructurales (Fase 8 — deuda del sistema de diseño) ===== */
  /* Son no-cromáticos: no requieren variante en modo oscuro. */

  /* Escala de espaciado (base 4px). Usar para padding/margin/gap en vez
     de valores sueltos, para conservar el ritmo vertical y horizontal. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Encabezados y tamaños extra. Encajan en la escala ya existente:
     nano(9) < micro(10) < xs(11) < label(12) < sm(13) < body(14) <
     body-field(16) < h3(18) < h2(20) < display(24)=h1. */
  --fs-nano:  9px;
  --fs-label: 12px;
  --fs-h3:    18px;
  --fs-h2:    20px;
  --fs-h1:    24px;

  /* Interlineados: tight para datos densos/tablas, base para texto
     corrido, loose para bloques de lectura cómoda. */
  --lh-tight: 1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* Capas (z-index) con los valores EFECTIVOS del portal (no re-basar:
     el interlock real depende de estos números y del orden del DOM).
     --z-sticky:10 ya existía y se conserva. El toast legacy (9999) y
     modal-prompt (10000) quedan como literales hasta el canon de toast. */
  --z-loading: 800;   /* overlay de carga */
  --z-drawer:  1000;  /* sidebar móvil (bajo el modal por orden del DOM) */
  --z-modal:   1000;  /* .modal-overlay (modales legacy) */
  --z-dialog:  1100;  /* .ds-overlay (confirmaciones ds) */
  --z-toast:   1200;  /* .ds-toast */

  /* Dominio: programación de salidas (Fase 8). Familia SOFT azul/púrpura,
     deliberadamente DISTINTA de Disponibilidad (verde/rojo sólido) — los
     dos ejes conviven en la misma fila sin fusionarse. Alias de primitivas
     de optivia-brand.css → dark mode gratis, cero hex nuevo. */
  --prog-programada:    var(--blue);
  --prog-programada-bg: var(--blue-bg);
  --prog-programada-bd: var(--blue-bd);
  --prog-reserva:       var(--purple);
  --prog-reserva-bg:    var(--purple-bg);
  --prog-reserva-bd:    var(--purple-bd);

  /* Dominio: estado de la SALIDA (parrilla). "En riesgo" es ÁMBAR, no rojo:
     el rojo del portal es falla consumada; el riesgo aún se cubre con el pool. */
  --salida-sin-asignar:    var(--text-3);
  --salida-sin-asignar-bd: var(--border-2);
  --salida-asignada:    var(--blue);
  --salida-asignada-bg: var(--blue-bg);
  --salida-asignada-bd: var(--blue-bd);
  --salida-riesgo:      var(--amber);
  --salida-riesgo-bg:   var(--amber-bg);
  --salida-riesgo-bd:   var(--amber-bd);
  --salida-cubierta:    var(--purple);
  --salida-cubierta-bg: var(--purple-bg);
  --salida-cubierta-bd: var(--purple-bd);
}

/* ============================================================
   MODO OSCURO — overrides de los tokens del portal con valor literal
   (las primitivas de marca se redefinen en optivia-brand.css).
   ============================================================ */
[data-theme="dark"] {
  --surface-3:  #2b313d;
  --focus-ring: 0 0 0 3px rgba(90,160,232,.50);
  --amber-solid:#e8951f;

  /* Acento legible en oscuro: azul claro (= primitiva --blue dark #6fb0f0).
     Contraste sobre --surface ~7.2:1 y sobre --blue-bg (nav activo) ~6.7:1. */
  --accent-fg:  var(--blue);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.03);
  --shadow:    0 2px 10px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ============================================================
   SELECTOR DE TEMA (claro / oscuro / automático)
   Lo inyecta nav.js dentro de .topbar-right. Vive sobre la barra
   navy en ambos temas, por eso usa blancos translúcidos fijos.
   ============================================================ */
.optv-theme {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    margin-right: 8px;
}
.optv-theme button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border-radius: 999px;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    transition: var(--transition);
}
.optv-theme button:hover { color: #fff; }
.optv-theme button.active {
    background: #fff;
    color: var(--navy);
}
.optv-theme button i { line-height: 1; vertical-align: 0; }