/* ═══════════════════════════════════════════════════════════════════════════
   CIMA · EL TEMA CLARO — EL NÚCLEO, ESCRITO A MANO (2026-09-23, pedido de Luis)
   ───────────────────────────────────────────────────────────────────────────
   Luis: «este modo claro tiene que correr sobre todo CIMA, todo, todas las ventanas,
   absolutamente todas; tiene que quedar 100% cubierto».

   ── LO QUE SE DESCUBRIÓ ANTES DE ESCRIBIR UNA LÍNEA ──────────────────────────────────────
   CIMA NACIÓ CLARA. Su `<style>` de index.html declara, y sigue declarando hoy, un juego de
   tokens de papel: `--papel:#FFFFFF`, `--papel-tenue:#FBF9F6`, `--borde:#E4DACB`,
   `--tinta:#1A2633`, `--tinta-suave:#6B7B86`. Lo que la puso en tinta fue `cima-lujo.css`,
   que redefine esos mismos tokens sobre cinco contenedores —#aplicacion, #zona-modales,
   #riel-globo, #aviso y .combo-panel— y encima escribe 703 colores a mano.

   Así que el tema claro de CIMA NO SE INVENTA: SE RESTAURA. Este archivo devuelve los tokens a
   los valores que la app ya tenía, y con eso se resuelven de una sola vez:
     · los 212 atributos `style=` del marcado que pintan con var() —de 290 que pintan color—,
     · los 68 usos de var() de cima-lujo.css,
     · y todo lo que el generador salta justamente por usar var().
   Lo que queda —los colores escritos a mano— lo cubre `cima-tema-claro.css`, que es generado.

   Por eso este archivo va PRIMERO y el generado después: la restauración pone el suelo, y el
   generado corrige encima lo que no pasa por tokens.

   ── LAS REGLAS DEL MÉTODO, APRENDIDAS EN VIVERO Y GOLFITO ────────────────────────────────
   1 · Sobre la fotografía el tema NO entra. Se marca la rama con `data-pz-foto` en el HTML.
   2 · Las VARIABLES traspasan ese marcado: heredan desde el `:root` aunque la regla no entre.
       Por eso el §2 de acá las devuelve a oscuro dentro de la rama de la foto. Esta lección
       costó cara: en VIVERO y Golfito el nombre del usuario aparecía en tinta sobre la foto,
       en el menú del teléfono, y no había regla equivocada en ninguna parte — era la variable.
   3 · No imponer el oscuro pieza por pieza: impedir que el tema entre. Cada valor impuesto a
       mano aplasta el de tres vecinos.
   4 · El color baja a los hijos; el fondo y el filete, no. Un `*` con fondo le pone un cuadro
       a cada ícono.
   5 · Lo que ya es claro a propósito —el papel de un documento— no se toca en ningún tema.
   ES REVERSIBLE: se borra su <link> en index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LOS TOKENS, DE VUELTA A LOS DE LA APP ───────────────────────────────────────────────
   Los mismos cinco contenedores que oscurece `cima-lujo.css` (su §0), con los valores que
   declara el `<style>` de index.html. No hay ni un color nuevo acá: son los suyos.
   Gana por peso sin trucos: `html[data-tema] #aplicacion` lleva el id de la app más el
   atributo del tema, contra el `#aplicacion` pelado del oscuro. */
html[data-tema="claro"] #aplicacion,
html[data-tema="claro"] #zona-modales,
html[data-tema="claro"] #riel-globo,
html[data-tema="claro"] #aviso,
html[data-tema="claro"] .combo-panel{
  --navy:#1A2633; --navy-hondo:#0D1720;
  --teal:#005565; --teal-alto:#006D82;
  --sage:#7D9B5B; --cream:#EADFCE;
  --borde:#E4DACB; --borde-suave:#EFE8DC;
  --tinta:#1A2633; --tinta-suave:#6B7B86;
  --papel:#FFFFFF; --papel-tenue:#FBF9F6;
  --alerta:#B4231F; --naranja:#C2410C; --ambar:#B45309;
  --sombra-card:0 1px 2px rgba(26,38,51,.05), 0 8px 24px -12px rgba(26,38,51,.16); }

/* ── 2 · Y EN OSCURO OTRA VEZ, DENTRO DE LA FOTOGRAFÍA ───────────────────────────────────────
   Acá está la lección que en VIVERO y Golfito se aprendió tarde. El marcado `data-pz-foto`
   impide que entren las REGLAS del tema, pero no sus VARIABLES: una regla del tema oscuro que
   dice `color:var(--tinta)` sigue gobernando sobre la foto, sólo que la variable ya vale otra
   cosa. Se devuelven a los valores de `cima-lujo.css` dentro de la rama marcada, y con eso lo
   que está sobre una imagen queda idéntico en los dos temas, que es la regla de la casa. */
html[data-tema="claro"] [data-pz-foto]{
  --navy:#FFFFFF; --navy-hondo:#141D27;
  --teal:#EADFCE; --teal-alto:#EADFCE;
  --sage:#7D9B5B; --cream:#EADFCE;
  --borde:rgba(234,223,206,.16); --borde-suave:rgba(234,223,206,.10);
  --tinta:#EADFCE; --tinta-suave:rgba(234,223,206,.70);
  --papel:#222E3A; --papel-tenue:#1A2633;
  --alerta:#EADFCE; --naranja:#EADFCE; --ambar:#EADFCE;
  --sombra-card:none; }

/* ── 3 · EL SUELO DE LA PÁGINA ───────────────────────────────────────────────────────────────
   En oscuro el `html` lleva la fotografía del ecosistema de fondo, fija. En claro esa foto no
   se lava ni se tiñe: se retira, y queda el lienzo del tema, igual que en VIVERO y Golfito.
   Se hace acá y no en el generado porque es una decisión, no una traducción de color. */
html[data-tema="claro"]{ background:#F6F3ED !important; }
html[data-tema="claro"] body{ background:#F6F3ED !important; }