/* public/assets/tokens.css
 * ─────────────────────────────────────────────────────────────────────────────
 * LA ÚNICA :root DE LA APLICACIÓN.
 *
 * POR QUÉ EXISTE, CON LA MEDICIÓN AL LADO
 * El 2026-09-05 había cinco bloques `:root` en fichero. Dos vivían en el mismo
 * premium.css (líneas 2 y 1745) y no se contradecían: eran dos mitades del
 * mismo fichero. El tercero vivía dentro de un heredoc de PHP —layout_css(),
 * _layout.php:1235— y se inyectaba INLINE en cada una de las 48 pantallas.
 *
 * Se compararon los 66 nombres uno a uno. Colisión: UNA.
 *     --danger   premium=#dc2626   layout=#b91c1c
 * Y como el <style> inline se emitía en la línea 672 y el <link> a premium.css
 * en la 673, ganaba premium: el #b91c1c llevaba muerto quién sabe cuánto. Nadie
 * lo sabía. Si alguien hubiera movido el <link> una línea arriba, todos los
 * rojos de la aplicación habrían cambiado de tono sin que nadie tocara un color.
 *
 * Aquí gana #dc2626 —lo que ya se veía— para que consolidar no cambie nada.
 * ─────────────────────────────────────────────────────────────────────────────
 */
:root {
  color-scheme: light;
  /* Approved cockpit, 24 Oct. Source documents retain their own ink. */
  --cp-canvas:#eff1f5; --cp-panel:#ffffff; --cp-subtle:#f6f8fb;
  --cp-ink:#10253d; --cp-muted:#52647b; --cp-line:#dce3eb; --cp-control:#b8c4d2;
  --cp-gold:#b8883b; --cp-gold-ink:#152238; --cp-selected:#faf3e5;
  --cp-nav:#102438; --cp-nav-ink:#dce6f1; --cp-nav-muted:#b6c7d9;
  --cp-nav-border:#38506a; --cp-nav-hover:#1c344e;
  --cp-nav-selected:#d6b26f; --cp-nav-selected-border:#e5c488; --cp-nav-selected-ink:#152238;

  /* ── Superficie y texto ─────────────────────────────────────────────── */
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-subtle: #f1f5f9;
  --bg-elevated: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --border-main: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-focus: #3b82f6;

  /* ── Acento y semáforo ──────────────────────────────────────────────── */
  --accent: #0284c7;
  --accent-hover: #0369a1;
  --accent-light: #f0f9ff;
  --success: #16a34a;
  --success-bg: #f0fdf4;      /* era #ecfdf5 emerald-50.  ΔE 1.48 */
  --success-border: #86efac;  /* era #a7f3d0 emerald-200. ΔE 7.86 */
  --success-text: #166534;    /* era #065f46 emerald-900. ΔE 7.36 */
  --transit: #0284c7;
  --transit-bg: #f0f9ff;
  --transit-border: #bae6fd;
  --transit-text: #0369a1;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  --warning-text: #92400e;
  --danger: #dc2626;          /* resuelta: era #b91c1c en layout_css(), muerto */
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-text: #991b1b;

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Filemón Office #27416: palette and type of the owner's approved preview. */
  --office-canvas: #f0f2ed;
  --office-panel: #fafbf7;
  --office-ink: #223c32;
  --office-muted: #64766c;
  --office-line: #dce3d9;
  --office-green: #225b42;
  --office-green-ink: #fafbf7;
  --office-soft: #e5eee1;
  --office-paper: #fffefb;
  --office-paper-ink: #273c32;
  --office-paper-muted: #65756b;
  --office-paper-line: #dce3d9;
  --office-paper-soft: #e9efdf;
  --office-shadow: #1b2b2510;
  --office-font: 'Office Manrope', system-ui, sans-serif;
  --office-editorial: 'Office Source Serif', Georgia, serif;

  /* ── Safe-area ──────────────────────────────────────────────────────── */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* ── Escritorio ─────────────────────────────────────────────────────── */
  --wb-row-height: 36px;
  --wb-font-size-base: 13.5px;
  --wb-font-size-table: 12px;
  --wb-input-height: 32px;
  --wb-sidebar-width: 260px;
  --wb-border-subtle: #e2e8f0;

  /* ── Teléfono ───────────────────────────────────────────────────────── */
  --mc-touch-min: 48px;
  --mc-bottom-nav-height: calc(60px + var(--sab));
  --mc-card-padding: 16px;
  --mc-font-size-hero: 28px;
  --mc-font-size-kpi: 22px;
  --mc-font-size-body: 15px;
  --mc-radius-card: 16px;
  --mc-radius-btn: 12px;

  /* ── Alias heredados de layout_css(). NO se renombran en este paso:
   *    están usados 253 veces entre public/ y app/ (--muted 61, --line 46,
   *    --ink 30, --danger 21, --warn 16, --blue 15, --ok 14, --card 12…).
   *    Renombrar 253 sitios en el mismo commit que consolida los tokens
   *    haría imposible saber cuál de los dos cambios rompió algo. ───────── */
  --bg: #eef2f7;
  --card: #ffffff;
  --ink: #1f2a37;
  --muted: #64748b;
  --line: #e2e8f0;
  --blue: #2563eb;
  --blueh: #1d4ed8;
  --blbg: #eff6ff;
  --blbd: #bfdbfe;
  /* ── DOS VERDES Y TRES ROJOS: medido, NO arreglado aqui ──────────────
   * MEDIDO sobre el HTML servido de `equipos_reporte.php`: conviven
   * rgb(21,128,61)=#15803d (este `--ok`) y rgb(22,163,74)=#16a34a
   * (`--success`). Dos verdes para decir lo mismo. Y `--bad` NO EXISTE:
   * cada `var(--bad,#b00020)` cae siempre a su respaldo.
   *
   * SE INTENTO colapsarlos aqui —`--ok: var(--success)` y `--bad:
   * var(--danger)`— y la medicion dijo que era PEOR: los colores SUBIERON
   * en las tres pantallas (12, 9, 17). Motivo: el duplicado no sale del
   * token, sale de un #15803d escrito a mano en alguna pantalla, asi que
   * mover el alias solo añadia un tercer tono.
   *
   * Se revierte y queda ANOTADO. El arreglo de verdad es barrer los hex
   * sueltos, que es su propio trabajo con su propia medicion. */
  --ok: #15803d;
  --okbg: #dcfce7;
  --warn: #b45309;
  --warnbg: #fef3c7;
  --dangerbg: #fee2e2;
  --ready: #7c3aed;
  --readybg: #f3e8ff;

  /* ── Nuevos en este paso ────────────────────────────────────────────── */
  --tap: 48px;                /* objetivo táctil mínimo */
  --alto-barra: 56px;         /* la barra fija de arriba a ≤767 px */
  --neg: #b91c1c;             /* el rojo de un número negativo. Sí, es el
                                 #b91c1c que estaba muerto: se recicla con un
                                 trabajo de verdad en vez de borrarlo. */
  --mov: 140ms;               /* la ÚNICA duración de movimiento */

  /* ═══ LA ESCALA (2026-09-19) ═══════════════════════════════════════════
   *
   * POR QUÉ, CON LA MEDICIÓN DELANTE
   *
   * Contados con un navegador real sobre el HTML servido, en UNA pantalla:
   *
   *     equipos_reporte.php        25 tamaños de letra distintos
   *     equipos_reporte_vista.php  22
   *     index.php                  16
   *
   * Y no eran redondos. Entre ellos: 10.1779, 11.3088, 12.7968, 13.536,
   * 13.12, 14.72, 14.88. Nadie escribió nunca «13.536px» — eso es `em`
   * dentro de `em` dentro de `em` multiplicándose. O sea: no son decisiones,
   * es sedimento. Un sistema tiene seis o siete tamaños ELEGIDOS.
   *
   * Cada uno lleva su trabajo en el nombre, no su tamaño. El día que 15px
   * deba ser 16, cambia aquí y cambia en las 63 pantallas — y nadie tiene
   * que buscar «cuál de los 15px era el de las cifras».
   * ═════════════════════════════════════════════════════════════════════ */
  --fs-1: 30px;   /* la cifra que DECIDE. Una por pantalla, o ninguna.      */
  --fs-2: 21px;   /* el título de la pantalla.                             */
  --fs-3: 15px;   /* una cifra normal, un dato que se lee de un vistazo.    */
  --fs-4: 13px;   /* el cuerpo: prosa, celdas de tabla.                     */
  --fs-5: 12px;   /* el contexto: subtítulos, pies, ayudas.                 */
  --fs-6: 10px;   /* el rótulo en versalitas de una cifra.                  */
  --fs-7: 9px;    /* la nota al margen. Por debajo de esto no se lee.       */

  /* Cuatro pesos. Cinco ya era uno de más. */
  --fw-normal: 400;
  --fw-medio:  600;
  --fw-fuerte: 700;
  --fw-extra:  800;   /* sólo cifras: el peso es lo que las hace mirar */

  /* El ritmo, de cuatro en cuatro. Un espacio que no es múltiplo de 4 se ve. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --lh-apretado: 1.2;   /* cifras y títulos */
  --lh-base:     1.5;   /* prosa */
  --lh-suelto:   1.65;  /* párrafos largos de explicación */

  /* ═══ SEIS COLORES DE TEXTO, NOMBRADOS POR SU TRABAJO ══════════════════
   *
   * Medidos hoy: 11 colores de texto distintos en `equipos_reporte.php` y
   * 16 en `index.php`. Eso no es una paleta, es lo que quedó.
   *
   * Se nombran por lo que HACEN, no por lo que son. `--tx-manda` puede
   * dejar de ser rojo algún día; lo que no puede es dejar de significar
   * «esto espera tu mano».
   *
   * LA LEY DEL ACENTO: `--tx-manda` significa UNA sola cosa y no se usa
   * para nada más. Ni un borde decorativo, ni un título, ni un icono. El
   * día que abras la app y no veas ese color, terminaste.
   * ═════════════════════════════════════════════════════════════════════ */
  --tx-fuerte: var(--text-main);    /* la cifra que decide, los títulos     */
  --tx-normal: #334155;             /* la prosa que se lee. COLAPSADO el
                                       2026-09-19: era #374151 (gray-700) y
                                       se usaba 11 veces; #334155 (slate-700)
                                       se escribía a mano 43. Gana la mayoría.
                                       ΔE2000 = 1.85 (casi igual) y el
                                       contraste MEJORA: 10.31 → 10.35:1.    */
  --tx-suave:  var(--text-muted);   /* contexto, rótulos, subtítulos        */
  --tx-tenue:  var(--text-faint);   /* lo que está ahí por si acaso         */
  --tx-manda:  var(--danger);       /* ESPERA TU MANO. Nada más.            */
  /* Apunta a `--ok` (#15803d) y NO a `--success` (#16a34a) a proposito: ese
 * verde es el que la aplicacion YA sirve, escrito a mano en 11 ficheros y
 * ~24 sitios (premium.css 8, socios 3, subir 3…). Apuntar al otro añadiria
 * un segundo verde en cada pantalla que adopte el token — MEDIDO: subia el
 * conteo de 11 a 12. Cuando el barrido de hex sueltos ocurra, este alias se
 * mueve a `--success` en UN sitio. */
  --tx-bien:   var(--ok);           /* confirmado, cuadra, no pide nada     */

  /* ═══ LOS QUE NO TENÍAN NOMBRE (2026-09-19) ════════════════════════════
   *
   * QUÉ SON ESTOS
   * El barrido anterior puso 974 colores detrás de un token y se paró en seco
   * delante de los que NO tenían ninguno: 982 hex sueltos, 168 valores
   * distintos. No se podían barrer porque nadie había decidido qué SIGNIFICAN.
   * Aquí se decide. Cada nombre dice el trabajo, y al lado va las veces que la
   * aplicación lo sirve hoy — medido sobre premium/base/workspace.css y las
   * 63 pantallas de public/.
   *
   * LA REGLA DEL CORTE: un color usado tres veces o menos NO es un color del
   * sistema, es una decisión local. Nombrarlo sería inventar una ley para un
   * caso. Los que quedan sueltos quedan sueltos, y el trinquete los cuenta.
   *
   * NINGÚN VALOR CAMBIA. Se nombra lo que ya se sirve; la huella de color de
   * las 8 pantallas (11,207 elementos) es idéntica antes y después.
   * ═════════════════════════════════════════════════════════════════════ */

  /* ── Grises de la interfaz ──────────────────────────────────────────── */
  --tx-titulo:     #1e293b;   /* 23× el título de un bloque: más que la prosa,
                                 menos que la cifra que decide               */
  --tx-rotulo:     #475569;   /* 59× el rótulo de un dato: cabecera de tabla,
                                 etiqueta de campo, pie de caja              */
  --tx-invertido:  #ffffff;   /* 82× texto que va SOBRE un color sólido      */
  --tx-mueble:     #cbd5e1;   /* el ›, el └─, el asa de un panel: estructura
                                 que no significa nada                       */
  --borde-control: #cbd5e1;   /* 83× el contorno de algo que se TOCA: input,
                                 botón secundario, chip, pastilla. Distinto de
                                 `--border-main`, que separa CONTENIDO.      */
  --relleno-gris:  #e2e8f0;   /* 22× el relleno de un distintivo o de un
                                 botón pulsado                               */

  /* ── El ramal gris heredado ─────────────────────────────────────────────
   * Mismo trabajo que los de arriba, otra familia de tono: la aplicación es
   * `slate` y estos cinco son `gray`. Se nombran para que la convergencia sea
   * un día CINCO líneas en este fichero, y no 51 sitios en 60 ficheros.
   * A la izquierda el gris, a la derecha su gemelo en pizarra. ──────────── */
  --gr-tinta:       #111827;  /* 10× ≈ --text-main   #0f172a */
  --gr-medio:       #4b5563;  /*  4× ≈ --tx-rotulo   #475569 */
  --gr-tx:          #6b7280;  /* 19× ≈ --text-muted  #64748b */
  --gr-tenue:       #9ca3af;  /*  7× ≈ --text-faint  #94a3b8 */
  --gr-linea:       #d1d5db;  /* 11× ≈ --border-main #e2e8f0 */
  --gr-linea-suave: #e5e7eb;  /*  3×                         */
  --gr-fantasma:    #e3e6ec;  /*  3×                         */
  --borde-panel:    #d8e0ea;  /*  5× el borde de un panel cockpit (2026-10-09) */
  --fondo-panel:    #fcfdfd;  /*  2× el fondo casi-blanco del ledger cockpit  */
  --borde-lista:    #dbe3ef;  /*  1× el borde de una lista desplegable        */
  --fondo-forma:    #fefefe;  /*  3× el fondo de una forma suelta (_vigilancia) */

  /* ── Superficie oscura ──────────────────────────────────────────────────
   * El único fondo oscuro que la aplicación ya tiene: el teleprómpter, el
   * cajón de linaje, la bandeja de lote, las teclas. Nombrarlo es lo que un
   * modo oscuro necesita primero — no un interruptor, un vocabulario. ───── */
  --os-fondo:      #1e293b;   /* el fondo de un panel oscuro                 */
  --os-fondo-alto: #24344d;   /* su fila señalada                            */
  --os-linea:      #334155;   /* la línea DENTRO de un panel oscuro          */
  --os-tx:         #e2e8f0;   /* el texto sobre oscuro                       */
  --os-tx-suave:   #cbd5e1;   /* su segundo renglón                          */
  --negro:         #000000;   /*  9× negro real: la maqueta de teléfono y las
                                 sombras. NO es un color de texto.           */

  /* ── Verde: confirmado, cuadra ──────────────────────────────────────────
   * OJO: conviven con `--success-*`, que son la familia `emerald`. Éstos son
   * `green`. Medido: el escrito a mano gana en fondo (19 vs 14) y empata en
   * texto (18 vs 19). No se colapsan aquí porque colapsar MUEVE píxeles y eso
   * es una decisión con ojos delante, no un barrido. Queda anotado. ─────── */
  --success-border-suave: #bbf7d0;  /*  8× green-200, el borde más suave */
  --success-tinta:        #14532d;  /*  4× green-900, el verde más hondo */

  /* ── Ámbar: mira esto ───────────────────────────────────────────────── */
  --am-fondo:       #fef9c3;  /*  3× */
  --am-fondo-tenue: #fffdf5;  /*  4× */
  --am-borde:       #fcd34d;  /* 24× la raya que marca atención              */
  --am-borde-suave: #fde047;  /*  3× */
  --am-vivo:        #f59e0b;  /* 11× */
  --am-tinta:       #b8860b;  /* 10× */
  --am-tx:          #78350f;  /*  4× */
  --am-tx-oliva:    #713f12;  /*  3× */
  --am-tx-medio:    #8a6d1f;  /*  3× */
  --am-fondo-claro: #fefce8;  /*  7× el fondo de un aviso suave (cochinito) */
  --am-borde-palido:#fef08a;  /*  6× su borde, un tono más claro que --am-borde */
  --am-tx-quemado:  #8a4b00;  /*  1× el texto de un archivo con advertencia (buzón) */

  /* ── Naranja: se salió del carril ───────────────────────────────────── */
  --nj-fondo:       #fff7ed;  /*  4× */
  --nj-fondo-medio: #ffedd5;  /*  3× */
  --nj-borde:       #fed7aa;  /*  6× */
  --nj-borde-vivo:  #fdba74;  /*  3× */
  --nj-vivo:        #ea580c;  /*  5× */
  --nj-tx:          #c2410c;  /*  7× */
  --nj-tx-hondo:    #9a3412;  /*  3× */

  /* ── Rojo ───────────────────────────────────────────────────────────── */
  --rj-borde: #fca5a5;        /* 15× */
  --rj-vivo:  #ef4444;        /*  7× */
  --rj-tx:    #7f1d1d;        /*  4× */
  --rj-tinta: #b00020;        /*  3× el `--bad` que NUNCA existió: cada
                                 `var(--bad,#b00020)` caía a su respaldo.    */

  /* ── Azul ───────────────────────────────────────────────────────────── */
  --az-cielo:       #38bdf8;  /*  9× */
  --az-fondo:       #e0f2fe;  /*  3× */
  --az-fondo-medio: #dbeafe;  /*  3× */
  --az-tx:          #1e40af;  /* 11× */
  --az-tx-hondo:    #1e3a8a;  /*  3× */
  --az-tinta:       #2a6fb5;  /*  3× */

  /* ── Morado ─────────────────────────────────────────────────────────── */
  --mo-vivo: #7e22ce;         /*  3× */

  /* ── Marcas ajenas ──────────────────────────────────────────────────────
   * NO giran con el tema. Son de otro. El día que haya modo oscuro, estos
   * cinco valores se quedan exactamente donde están. ───────────────────── */
  --marca-whatsapp:       #25d366;  /* 6× */
  --marca-whatsapp-hondo: #128c7e;  /* 3× */
  --marca-teams:          #0078d4;  /* 3× */
  --marca-outlook:        #005a9e;  /* 1× */
  --marca-outlook-medio:  #106ebe;  /* 1× */
  --marca-telegram:       #0088cc;  /* 1× */
  --marca-linkedin:       #0077b5;  /* 2× */
  --marca-whatsapp-claro: #1ebe5d;  /* 2× */
  --marca-whatsapp-alt:   #1ebc59;  /* 1× el mismo verde, un dígito distinto:
                                       alguien lo tecleó de memoria.        */
  /* La máscara del simulador de WhatsApp: reproduce SU interfaz, no la nuestra.
     Igual que las marcas: no giran con el tema. (Barrido 2026-10-09.) */
  --marca-wa-fondo:     #efeae2;  /* 1× el fondo del chat                     */
  --marca-wa-cabecera:  #075e54;  /* 1× la barra de arriba del chat           */
  --marca-wa-burbuja:   #d9fdd3;  /* 1× la burbuja propia                     */
  --marca-wa-texto:     #111b21;  /* 1× el texto de la burbuja                */
  --marca-wa-meta:      #667781;  /* 1× la hora bajo la burbuja               */

  /* ═══ LA COLA: lo que quedaba suelto (2026-09-19) ══════════════════════
   *
   * Tras el colapso quedaban 193 hex sueltos. Medido uno a uno contra los 151
   * tokens con ΔE2000 —la distancia de color como la ve un ojo—:
   *
   *     94 estaban a ΔE 0.00   el MISMO color, sólo que fuera del mapa
   *     21 a ΔE < 3            ruido: se absorben al token más cercano
   *     61 a ΔE >= 3           colores de verdad distintos: se nombran AQUÍ
   *     17 se quedan sueltos   y tienen motivo, escrito abajo
   *
   * LA REGLA: nunca mover un píxel más de lo imperceptible. Por eso un color
   * a ΔE >= 3 NO se absorbe: se nombra. Nombrar no cambia nada; absorber sí.
   * ═════════════════════════════════════════════════════════════════════ */

  /* ── Morado: el ramal que existía sin nombre ────────────────────────────
   * La app ya tenía `--ready`/`--readybg`/`--mo-vivo` y doce tonos más
   * escritos a mano. Es una familia, no una serie de accidentes. ────────── */
  --mo-fondo:       #f5f3ff;  --mo-fondo-rosa:  #fdf4ff;
  --mo-fondo-humo:  #faf5ff;  --mo-lila:        #e9d5ff;
  --mo-borde-suave: #ddd6fe;  --mo-borde:       #f0abfc;
  --mo-claro:       #c084fc;  --mo-medio:       #c026d3;
  --mo-fuerte:      #9333ea;  --mo-hondo:       #6b21a8;
  --mo-tinta:       #581c87;  --mo-noche:       #4c1d95;

  /* ── Índigo ─────────────────────────────────────────────────────────── */
  --in-fondo: #e0e7ff;  --in-vivo: #6366f1;
  --in-hondo: #4f46e5;  --in-tinta: #3730a3;

  /* ── Las medallas del ranking ───────────────────────────────────────────
   * Oro, plata y bronce. `--medalla-plata` está a ΔE 1.64 de `--gr-tenue` y
   * AUN ASÍ tiene nombre propio: su trabajo es «segundo lugar», no «gris
   * tenue». El día que el gris cambie, la plata no tiene por qué seguirlo. */
  --medalla-oro:    #d4a017;
  --medalla-plata:  #9aa3ad;
  --medalla-bronce: #b07a4a;

  /* ── El pivote: `panel.php` imita una hoja de cálculo ─────────────────── */
  --pv-nivel1: #9cc3e6;  --pv-nivel2: #cfe2f3;
  --pv-linea:  #4f6b7a;  --pv-tog:    #33566b;

  /* ── Ámbar y oro ────────────────────────────────────────────────────── */
  --am-oro:       #eab308;  --am-sol:     #fbbf24;
  --am-sol-claro: #fef08a;  --am-mostaza: #ca8a04;
  --am-ocre:      #a16207;  --am-cuero:   #854d0e;
  --am-tierra:    #451a03;

  /* ── Naranja ────────────────────────────────────────────────────────── */
  --nj-fuego: #f97316;  --nj-tierra: #7c2d12;

  /* ── Rojo ───────────────────────────────────────────────────────────── */
  --rj-claro:  #f87171;  --rj-fondo:  #fdeaee;
  --rj-hondo:  #7a1020;  --rj-tierra: #431407;
  --rj-alarma: #d10000;  --rj-alarma-hondo: #a80000;

  /* ── Azul ───────────────────────────────────────────────────────────── */
  --az-borde: #93c5fd;  --az-cielo-claro: #7dd3fc;
  --az-medio: #075985;  --az-hondo:       #0c4a6e;

  /* ── Verde ──────────────────────────────────────────────────────────── */
  --vd-menta:       #6ee7b7;  --vd-lima: #4ade80;
  --vd-barra:       #22c55e;  /* el relleno de una barra que va bien. `--marca-whatsapp-claro`
                                 esta a ΔE 1.95 y AUN ASI no vale: esto no es WhatsApp. */
  --vd-agua:        #0f766e;  --vd-fondo-tenue: #f6fdf8;
  --vd-enlace:      #08774e;  /* 2× el enlace-verde de la portada (Libro Excel) */
  --vd-enlace-borde:#065f3e;  /* 1× su borde, un tono más hondo              */
}

/* Clear weekly workspace preview. Keep every override inside the opt-in root. */
[data-workspace-ui="preview"] {
  --bg-main: #f5f5f2;
  --bg-card: #ffffff;
  --bg-card-subtle: #f0f1ee;
  --bg-elevated: #ffffff;
  --text-main: #20242c;
  --text-muted: #5e626b;
  --text-faint: #777c84;
  --border-main: #dadddc;
  --border-subtle: #e9ebe8;
  --border-focus: #2459d3;
  --accent: #2459d3;
  --accent-hover: #1946ad;
  --accent-light: #edf2ff;
  --wb-font-size-base: 16px;
  --wb-font-size-table: 15px;
  --wb-input-height: 48px;
  --wb-sidebar-width: 232px;
  --wb-border-subtle: #dadddc;
  --bg: var(--bg-main);
  --bg2: var(--bg-card-subtle);
  --card: var(--bg-card);
  --ink: var(--text-main);
  --muted: var(--text-muted);
  --line: var(--border-main);
  --blue: var(--accent);
  --blueh: var(--accent-hover);
  --blbg: var(--accent-light);
}

/* ═══ LA NOCHE (Paso 06) ══════════════════════════════════════════════════
 * Sólo tokens: con un `.kpi { … }` aquí dentro esto deja de ser una paleta y
 * pasa a ser una segunda hoja que mantener. `:not([data-tema="claro"])` no es
 * adorno — sin él, quien elige CLARO en un sistema oscuro no consigue nada.
 * ALCANCE HONESTO: mueve lo que usa tokens. Quedan hex a mano en pantallas
 * heredadas de `public/`; esas zonas se quedan claras. Es parcial, y se dice.
 * ═══════════════════════════════════════════════════════════════════════ */
/* El bloque `@media (prefers-color-scheme: dark)` que estaba aquí se QUITÓ (2026-09-21).
 * MEDIDO en el navegador real, con la app abierta en un Chrome con el sistema en oscuro:
 * 31 de 31 pantallas quedaban ilegibles (4,250 textos con contraste < 3:1; el peor,
 * `equipos_catalogo.php`, 798 de 2,399), mientras que en claro sólo 18 pantallas tenían algún
 * texto flojo (157 en total). Motivo: este archivo sólo mueve tokens; los hex escritos a mano en
 * las pantallas siguen claros, y el texto heredado sí se vuelve blanco → blanco sobre blanco.
 * Así que «sistema» ya NO sigue al sistema: la app es CLARA salvo que la persona elija OSCURO
 * con el interruptor 🌓 (`data-tema="oscuro"`, abajo). Ese modo sigue siendo parcial y se dice. */


:root[data-dp-theme="jade"]:not([data-tema="oscuro"]) {
  --cp-canvas:#ecf7ef; --cp-panel:#fbfcf6; --cp-subtle:#f3f8f2;
  --cp-ink:#183b34; --cp-muted:#4c6e63; --cp-line:#d5dfd2; --cp-control:#739b89;
  --cp-gold:#00734e; --cp-gold-ink:#ffffff; --cp-selected:#cceedd;
}

:root[data-tema="oscuro"] {
  --cp-canvas:#101d2d; --cp-panel:#192b3e; --cp-subtle:#1d3045;
  --cp-ink:#f0f4fa; --cp-muted:#b7c7d9; --cp-line:#35495d; --cp-control:#688099;
  --cp-gold:#d4aa60; --cp-gold-ink:#122237; --cp-selected:#433b2c;
  --cp-nav:#0a1726;
  --office-canvas: #15211d;
  --office-panel: #1c2b25;
  --office-ink: #e7eee8;
  --office-muted: #a9bab0;
  --office-line: #35463c;
  --office-green: #b5dac1;
  --office-green-ink: #1c2b25;
  --office-soft: #304938;
  --office-paper: #efeee5;
  color-scheme: dark;
  --bg-main: #0b1220;
  --bg-card: #131c2e;
  --bg-card-subtle: #1b263b;
  --bg-elevated: #1b263b;
  --text-main: #e8eef7;
  --text-muted: #9fb0c6;
  --text-faint: #6f8199;
  --border-main: #27354a;
  --border-subtle: #1b263b;
  --border-focus: #38bdf8;
  --accent: #38bdf8;
  --accent-contrast: #082f49;
  --accent-hover: #0284c7;
  --accent-light: rgba(56, 189, 248, 0.12);
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  /* Pares completos para las superficies y alias que usa el área de equipos. */
  --bg: var(--bg-main);
  --bg2: var(--bg-card-subtle);
  --card: var(--bg-card);
  --ink: var(--text-main);
  --muted: var(--text-muted);
  --line: var(--border-main);
  --blue: #2563eb;
  --blueh: #93c5fd;
  --blbg: #172d49;
  --blbd: #345477;
  --ok: #86efac;
  --okbg: #123624;
  --warn: #fcd34d;
  --warnbg: #3b2c13;
  --dangerbg: #431f27;
  --ready: #d8b4fe;
  --readybg: #332046;
  --success-bg: var(--okbg);
  --success-text: var(--ok);
  --success-tinta: var(--ok);
  --success-border: #286044;
  --success-border-suave: #286044;
  --warning-bg: var(--warnbg);
  --warning-text: var(--warn);
  --warning-border: #705725;
  --danger-bg: var(--dangerbg);
  --danger-text: #fca5a5;
  --danger-border: #85414b;
  --transit-bg: var(--blbg);
  --transit-text: #7dd3fc;
  --transit-border: var(--blbd);
  --gr-tinta: var(--text-main);
  --gr-medio: var(--text-muted);
  --gr-tx: var(--text-muted);
  --gr-linea: var(--border-main);
  --gr-linea-suave: var(--border-subtle);
  --am-fondo: var(--warnbg);
  --am-fondo-tenue: #2a2419;
  --am-tinta: #fcd34d;
  --am-tx: #fde68a;
  --am-tx-oliva: #fde68a;
  --am-tx-medio: #fde68a;
  --nj-fondo: #382617;
  --nj-fondo-medio: #432b17;
  --nj-tx: #fdba74;
  --nj-tx-hondo: #fed7aa;
  --rj-fondo: var(--dangerbg);
  --rj-tx: #fca5a5;
  --rj-tinta: #fca5a5;
  --az-fondo: var(--blbg);
  --az-fondo-medio: var(--blbg);
  --az-tx: #93c5fd;
  --az-tx-hondo: #bfdbfe;
  --az-tinta: #93c5fd;
  --mo-fondo: var(--readybg);
  --mo-fondo-rosa: var(--readybg);
  --mo-fondo-humo: var(--readybg);
  --mo-tinta: #d8b4fe;
  /* `--mo-noche` (texto del aviso de ficha fusionada) no tenía valor oscuro: morado 900 sobre el fondo morado
     oscuro = 1.34:1, medido en socios.php el 2026-09-23. Es la misma tinta del grupo. */
  --mo-noche: var(--mo-tinta);
  /* `--rj-tierra` (el porqué de «no se puede», bait.php) tampoco tenía valor oscuro: 1.09:1 medido. */
  --rj-tierra: var(--rj-tx);
  --mo-hondo: #d8b4fe;
  --mo-fuerte: #d8b4fe;
  --in-fondo: #272c51;
  --in-tinta: #c7d2fe;
  --vd-fondo-tenue: #123624;
  --sel: #3b2c13;
  --neg: #fca5a5;
  --tx-fuerte: #f8fafc;
  --tx-normal: #e2e8f0;
  --tx-suave: #94a3b8;
  --tx-tenue: #64748b;
  --tx-manda: #f87171;
  --tx-bien: #4ade80;
  --tx-titulo: #f8fafc;
  --tx-rotulo: #94a3b8;
  --borde-control: #334155;
  --relleno-gris: #1e293b;
  --os-fondo: #0f172a;
  --os-caja: #1e293b;
  --os-linea: #334155;
  --os-texto: #f8fafc;
  --os-tenue: #94a3b8;
}


/* October coherent workspace: voluntary dark surfaces inherit through the preview scope. */
:root[data-tema="oscuro"] [data-workspace-ui="preview"] {
  --bg-main:#16191e; --bg-card:#20242c; --bg-card-subtle:#282e38; --bg-elevated:#282e38;
  --text-main:#edf0f5; --text-muted:#b8c0cc; --text-faint:#a2acba;
  --border-main:#46515f; --border-subtle:#35404c; --border-focus:#91b5ff;
  --accent:#91b5ff; --accent-hover:#b6ceff; --accent-light:#293b5d;
  --bg:var(--bg-main); --bg2:var(--bg-card-subtle); --card:var(--bg-card); --ink:var(--text-main);
  --muted:var(--text-muted); --line:var(--border-main); --blue:var(--accent); --blbg:var(--accent-light);
}
[data-workspace-ui="preview"] { --wb-accent-ink:#fff; }
:root[data-tema="oscuro"] [data-workspace-ui="preview"] { --wb-accent-ink:#15243c; }