/* ═══════════════════════════════════════════════════════════════════════════
   GASTOS · TEMA CLARO — LOS AJUSTES A MANO (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   `gastos-tema-claro.css` lo escribe «5 herramientas/generar-tema-claro.py» y se pierde en cada
   corrida; esto se edita a mano y se carga después. Es corto a propósito: el generador ya deja
   fuera todo lo que va sobre la fotografía (la barra, la portada, la banda del editor), así que
   ahí no hay nada que devolver. Lo que queda acá es lo que de verdad cambia entre un tema y el otro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LA BARRA SÓLIDA, EN TEAL ─────────────────────────────────────────────────────────────
   Sobre la foto no cambia (lleva `data-pz-foto`); cuando la foto sale de detrás, la barra es
   del teal de CIMA y ARIA: #046477 (el blanco encima da 6,79:1). Los círculos y la pastilla no
   cambian: son el mismo vidrio de tinta en los tres temas. */
html[data-tema="claro"] header.cab-marca:not(.cab-sobre-foto){
  background-color:#046477 !important;
  background-image:none !important;
  border-bottom-color:rgba(234,223,206,.16) !important;
}

/* ── 2 · LO QUE VA SOBRE LA FOTOGRAFÍA NO CAMBIA (las cuatro capas) ─────────────────────────
   1 · el marcado lleva `data-pz-foto` (la barra, la portada, la banda del editor);
   2 · el generador deja fuera sus reglas por nombre (`cab-marca`, `ses`, `portada`…);
   3 · LAS VARIABLES heredan aunque la regla no entre: dentro de la foto se reponen las del oscuro;
   4 · el color heredado va sólo en los contenedores, con `:where` (sin peso), nunca en `*`. */
html[data-tema="claro"] [data-pz-foto], html[data-tema="claro"] [data-pz-foto] *{
  --g-tinta:#1A2633; --g-hondo:#141D27; --g-hoja:#222E3A; --g-campo:#2A3541; --g-salvia:#7D9B5B; --g-crema:#EADFCE;
  --g-crema70:rgba(234,223,206,.70); --g-filete:rgba(234,223,206,.16); --g-filete-s:rgba(234,223,206,.08);
  --g-sombra:0 30px 70px -18px rgba(26,38,51,.62);
}
html[data-tema="claro"] :where(header.cab-marca){ color:#EADFCE; }
html[data-tema="claro"] :where(.gas-portada){ color:#FFFFFF; }

/* ── 3 · SOBRE UN RELLENO DEEP, LA LETRA SIGUE BLANCA ────────────────────────────────────────
   El generador pasa a tinta toda letra blanca, porque casi siempre va sobre la hoja; pero en los
   rellenos de acción (deep, teal, rojo) la letra es blanca en los tres temas. Se nombran uno por
   uno. `:not(#_)` le suma un id al peso: las reglas generadas arrastran un `:not(#login-screen *)`
   y un id pesa más que cualquier clase. */
html[data-tema="claro"]:not(#_) :is(.bg-forest-insignia, .tab-pill.tab-active, .fab-btn, #btn-confirm-ok, .lb-del-v,
  [class*="bg-forest-6"], [class*="bg-forest-7"], [class*="bg-teal-6"], [class*="bg-teal-7"], [class*="bg-emerald-6"], [class*="bg-red-6"]),
html[data-tema="claro"]:not(#_) :is(.bg-forest-insignia, .tab-pill.tab-active, .fab-btn, #btn-confirm-ok, .lb-del-v,
  [class*="bg-forest-6"], [class*="bg-forest-7"], [class*="bg-teal-6"], [class*="bg-teal-7"], [class*="bg-emerald-6"], [class*="bg-red-6"]) *{
  color:#FFFFFF !important; }
/* …menos la cabecera de los modales, que en claro ya no es relleno: es la hoja, con el título en tinta */
html[data-tema="claro"]:not(#_) :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child,
html[data-tema="claro"]:not(#_) :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child :is(h2, h3, button, button *){ color:#1A2633 !important; }
html[data-tema="claro"]:not(#_) :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child p{ color:rgba(26,38,51,.70) !important; }
/* el ícono del título es un disco deep: su letra, blanca */
html[data-tema="claro"]:not(#_) :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child > .material-icons-outlined,
html[data-tema="claro"]:not(#_) :is(.modal-container, .fixed.inset-0) > div > .bg-forest-insignia:first-child > div:first-child > .material-icons-outlined{ color:#FFFFFF !important; }
/* la línea aprobada en la revisión: salvia con letra tinta, en los tres temas */
html[data-tema="claro"]:not(#_) #compras-container button.bg-emerald-600, html[data-tema="claro"]:not(#_) #compras-container button.bg-emerald-600 *{ color:#1A2633 !important; }

/* ── 4 · LAS HOJAS, BLANCAS SOBRE EL PAPEL ───────────────────────────────────────────────────
   En oscuro las hojas son un velo de crema al 3 % sobre la tinta; traducido, en claro era un
   velo de tinta al 3 %: gris sobre papel. En el claro del libro la hoja es blanca. */
html[data-tema="claro"]:not(#_) :is(#historial-container, #aprobaciones-container) > div,
html[data-tema="claro"]:not(#_) .compra-card, html[data-tema="claro"]:not(#_) #compras-container > div:not(.compra-card){
  background-color:#FFFFFF !important; border-color:rgba(26,38,51,.10) !important; }
html[data-tema="claro"]:not(#_) :is(#historial-container, #aprobaciones-container) > div:hover{ border-color:rgba(26,38,51,.24) !important; }
html[data-tema="claro"]:not(#_) .estado-rechazado{ background-color:#FDF3F2 !important; border-color:rgba(179,38,30,.35) !important; }
html[data-tema="claro"]:not(#_) .estado-corregido{ background-color:#EEF6F8 !important; }
/* el pie del editor, papel con su filete */
html[data-tema="claro"]:not(#_) :is(#footer-editor, #footer-revision){ background:rgba(246,243,237,.96) !important; border-top-color:rgba(26,38,51,.12) !important; }