/* ═══════════════════════════════════════════════════════════════════════════ ARIA · EL TEMA CLARO — EL NÚCLEO, ESCRITO A MANO (2026-09-23) ─────────────────────────────────────────────────────────────────────────── ── LO QUE SE MIDIÓ ANTES DE ESCRIBIR UNA LÍNEA ───────────────────────────────────────── ARIA NACIÓ CLARA, igual que CIMA. `consola.css` declara en su `:root` un juego de tokens de papel —`--ink:#1A2633`, `--blanco:#FFFFFF`, `--deep:#005565`, `--teal:#006D82`— y lo que la puso en tinta fue `aria-lujo.css`, que redefine esos mismos tokens sobre `body` y encima escribe los colores que no pasan por variable. Y ya trae escrito el camino de vuelta: ese mismo archivo restaura los tokens claros para el login y para el papel del documento del cliente (`#pantallaLogin`, `.doc-papel`, `.pagina`, `.ed-raiz`), porque esas dos zonas nunca fueron de tinta. Este archivo hace lo mismo para toda la consola cuando el tema es claro: no inventa una paleta, devuelve la suya. Con eso se resuelven de una sola vez las 483 declaraciones que el generador salta justamente por usar `var()`. Lo que queda —los colores escritos a mano— lo cubre `aria-tema-claro.css`, que es generado. Por eso este archivo va PRIMERO: pone el suelo, y el generado corrige encima. ── LA REGLA QUE MANDA SOBRE TODO LO DEMÁS ────────────────────────────────────────────── Luis, el 2026-09-23, sobre la barra y el banner: «todos esos componentes que están encima de la imagen, en modo claro, nada debe cambiar, nada, es obligatorio… ni siquiera hagas la estructuración de cambio de tema para esa parte del banner; tiene que quedarse idéntico». Se cumple en tres capas, y hacen falta las tres: 1 · el marcado lleva `data-pz-foto` en la barra, la franja de fases y la portada; 2 · el generador deja fuera sus selectores (los pseudoelementos no llevan atributo, así que marcarlos en el DOM no alcanza); 3 · y el §2 de acá devuelve las VARIABLES a tinta dentro de esa rama. Esta tercera es la que se aprendió tarde en VIVERO: el atributo frena las REGLAS del tema, pero no sus variables — heredan igual, y una regla del oscuro que diga `color:var(--ink)` acaba pintando tinta sobre la fotografía. LO ÚNICO QUE SÍ CAMBIA ARRIBA es la barra cuando se queda sin foto detrás y se vuelve sólida; eso vive en `aria-tema-claro-ajustes.css`. ES REVERSIBLE: se borra su en index.html. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · LOS TOKENS, DE VUELTA A LOS DE LA CONSOLA ─────────────────────────────────────────── Son los mismos valores que `aria-lujo.css` ya restaura para el login y el documento. Ni un color nuevo. Gana por peso sin trucos: `html[data-tema="claro"] body` lleva el atributo del tema contra el `html.aria-lujo body` del oscuro — dos clases contra clase y atributo, y el orden de carga desempata a favor de éste, que se carga después. */ html[data-tema="claro"] body{ --blanco:#FFFFFF; --suelo:#F8F9FA; --suelo-2:#F1F3F5; --filete:#E5E7E9; --ink:#1A2633; --ink-70:rgba(26,38,51,.70); --ink-14:rgba(26,38,51,.14); --ink-08:rgba(26,38,51,.08); --ink-04:rgba(26,38,51,.04); --deep:#005565; --teal:#006D82; --green-txt:#4C6636; --error:#B3261E; /* Los verdes de «la hoja» vuelven a los de la consola clara. */ --hoja-sombra:#04291f; --hoja-honda:#0b5d43; --hoja-viva:#0f766e; --hoja-fondo:#07432f; --hoja:linear-gradient(#F6F3ED,#F6F3ED); --hoja-luz:linear-gradient(transparent,transparent); background-color:#F6F3ED !important; color:#1A2633; color-scheme:light; } /* ── 2 · Y EN TINTA OTRA VEZ, DENTRO DE LA FOTOGRAFÍA ──────────────────────────────────────── La lección de VIVERO y Golfito, aplicada de entrada. `data-pz-foto` impide que entren las REGLAS del tema, pero las VARIABLES heredan igual. Sin esto, el nombre del usuario y los rótulos de la barra aparecerían en tinta sobre la foto sin que ninguna regla lo pidiera. Se repiten los valores del oscuro, tal cual los escribe `aria-lujo.css`. */ html[data-tema="claro"] [data-pz-foto], html[data-tema="claro"] [data-pz-foto] *{ --blanco:#222E3A; --suelo:#1A2633; --suelo-2:#27323E; --filete:rgba(234,223,206,.16); --ink:#EADFCE; --ink-70:rgba(234,223,206,.70); --ink-14:rgba(234,223,206,.16); --ink-08:rgba(234,223,206,.10); --ink-04:rgba(234,223,206,.05); --deep:#EADFCE; --teal:#006D82; --green-txt:#EADFCE; --error:#EADFCE; --hoja-sombra:#005565; --hoja-honda:#EADFCE; --hoja-viva:#006D82; --hoja-fondo:#005565; } /* EL COLOR HEREDADO VA SÓLO EN LA RAÍZ DE LA RAMA, NO EN CADA HIJO. Es la regla 4 de la casa —«el color baja a los hijos; el fondo y el filete, no»— y acá se comprobó en los dos sentidos el 2026-09-23: · sin esta regla, la barra heredaba la tinta del `body` claro y los textos sin regla propia se veían oscuros sobre la fotografía; · con ella puesta en `[data-pz-foto] *`, aplastaba los blancos que `cab-sobre-foto` le da a «Cotizaciones», «Nueva cotización» y al disco del usuario, y los dejaba crema. Puesta sólo en el elemento marcado, el crema BAJA a quien no declara color —que es lo que hacía el tema oscuro— y no toca a quien sí lo declara. Las VARIABLES, en cambio, sí necesitan el `*`: se resuelven en cada elemento que las usa, no se heredan ya resueltas. */ /* VA EN `:where()`, Y ES LA PIEZA QUE HACE QUE ESTO FUNCIONE. `prisma-tema.js` no marca sólo la raíz de la rama: marca TAMBIÉN a cada descendiente, para que el `:not([data-pz-foto])` del generado sea una comparación directa y no un recorrido. Como efecto, una regla escrita sobre `[data-pz-foto]` alcanza a cada botón de la barra, no al contenedor, y con la misma especificidad que las del lujo —dos clases contra clase y atributo— gana la que va después: la mía. Así aplasté el blanco de «Cotizaciones» y el crema al 75% de la flecha de suplantar, dejándolos a todos en el mismo crema. `:where()` no suma especificidad: la regla queda en (0,1,1) y pierde contra CUALQUIER regla propia del lujo, que es justo lo que se quiere. Sólo pinta a quien no declara color —que en el tema oscuro heredaba del `body`— y no toca a nadie más. Y SE NOMBRAN LOS TRES CONTENEDORES, no `[data-pz-foto]`. Esto costó tres intentos y la razón es que UNA REGLA DIRECTA SIEMPRE LE GANA A LA HERENCIA, por poca especificidad que tenga —ni `:where()` salva eso—. Como el marcado está en cada descendiente, la regla alcanzaba a los SVG de la pastilla, que en el tema oscuro no declaran color y lo HEREDAN de su botón: la flecha de suplantar pasaba de crema al 75% a crema entero, y el disco del usuario, de blanco a crema. Nombrando sólo los tres contenedores que llevan el atributo en el HTML, el crema vuelve a BAJAR como bajaba del `body` en oscuro, y cada pieza conserva el suyo. */ html[data-tema="claro"] :where(header.cab-marca, #faseNav, .hoja-inicio__cab){ color:#EADFCE; } /* ── 3 · EL SUELO ──────────────────────────────────────────────────────────────────────────── El mismo crema de papel de CIMA, VIVERO y Golfito: la consola no es blanca de pantalla, es una hoja. Va sobre los contenedores que pintan el fondo en el oscuro. */ html[data-tema="claro"] #app, html[data-tema="claro"] .h-screen, html[data-tema="claro"] #home{ background-color:#F6F3ED; } /* ── 4 · LO QUE YA ERA CLARO A PROPÓSITO, NO SE TOCA ───────────────────────────────────────── El papel del documento del cliente y el login nacieron claros y lo siguen siendo en los dos temas. Se repite acá su juego para que ni el generado ni el §1 los muevan. */ html[data-tema="claro"] #pantallaLogin, html[data-tema="claro"] .doc-papel, html[data-tema="claro"] .pagina, html[data-tema="claro"] .ed-raiz{ --blanco:#FFFFFF; --suelo:#F8F9FA; --suelo-2:#F1F3F5; --filete:#E5E7E9; --ink:#1A2633; --ink-70:rgba(26,38,51,.70); --ink-14:rgba(26,38,51,.14); --ink-08:rgba(26,38,51,.08); --ink-04:rgba(26,38,51,.04); --deep:#005565; --teal:#006D82; --green-txt:#4C6636; }