/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL DE GUÍAS · EL TEMA CLARO, LO QUE EL GENERADOR NO PUEDE DECIDIR (a mano)
   ───────────────────────────────────────────────────────────────────────────
   `guias-tema-claro.css` sale de guias.css con generar-tema-claro.py. El generador lleva la
   tinta de las tarjetas y del lienzo al mismo papel, así que acá se separan (el lienzo crema,
   las tarjetas blancas, como en prisma-tema.css), y se devuelve el blanco a la letra que va
   sobre un relleno de color, que el generador pasa a tinta porque la regla base de `.gu-bt`
   le gana a la del relleno.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Las superficies: tarjetas y ventanas en blanco sobre el lienzo crema. */
html[data-tema="claro"] :is(.gu-tarjeta, .gu-panel, .gu-gasto, .gu-vacio, .gu-hoja):not([data-pz-foto]){
  background:#FFFFFF; border-color:rgba(26,38,51,.10); }
html[data-tema="claro"] .gu-tres > div:not([data-pz-foto]){ background:#FBF9F5; border-color:rgba(26,38,51,.08); }
html[data-tema="claro"] .gu-inp:not([data-pz-foto]){ background:#EFEAE1; border-color:rgba(26,38,51,.14); }
html[data-tema="claro"] .gu-mas:not([data-pz-foto]){ border-color:rgba(26,38,51,.12); }
html[data-tema="claro"] .gu-mas > summary:not([data-pz-foto]){ color:rgba(26,38,51,.70); }
html[data-tema="claro"] .gu-mas > summary .material-icons-outlined:not([data-pz-foto]){ color:#006D82; }
html[data-tema="claro"] .gu-bt--foto:not([data-pz-foto]){ border-color:rgba(0,109,130,.55); }
html[data-tema="claro"] .gu-bt--foto .material-icons-outlined:not([data-pz-foto]){ color:#006D82; }

/* La letra sobre un relleno de color sigue blanca (y el presionado, deep con letra blanca). */
html[data-tema="claro"] :is(.gu-bt--lleno, .gu-bt--rojo, .gu-bt--peligro, .gu-bt:active):not([data-pz-foto]){ color:#FFFFFF; }
html[data-tema="claro"] .gu-c-rojo .gu-mon:not([data-pz-foto]){ color:rgba(255,255,255,.8); }
html[data-tema="claro"] .gu-mini-doc .material-icons-outlined:not([data-pz-foto]){ color:#FFFFFF; }
html[data-tema="claro"] :is(.thumb-stack, .thumb-stack-more):not([data-pz-foto]){ border-color:#FFFFFF; }

/* Las ventanas: el velo de tinta abierta del claro. */
html[data-tema="claro"] :is(.modal-container, .gu-velo-modal):not([data-pz-foto]){ background:rgba(26,38,51,.38); }

/* La lista se desvanece en el papel, no en la tinta. */
html[data-tema="claro"] #view-historial::after{ background:linear-gradient(180deg, rgba(246,243,237,0) 0%, rgba(246,243,237,.92) 55%, #F6F3ED 100%); }

/* El aviso flotante: su fondo lo pone la app (tinta, deep o rojo), así que la letra es blanca. */
html[data-tema="claro"] .gu-toast:not([data-pz-foto]),
html[data-tema="claro"] .gu-toast .material-icons-outlined:not([data-pz-foto]){ color:#FFFFFF; border-color:rgba(255,255,255,.14); }

/* El visor de comprobantes es negro en los tres temas: es un visor de fotos. */
html[data-tema="claro"] #lightbox-vouchers:not([data-pz-foto]){ background:rgba(0,0,0,.96); }
html[data-tema="claro"] :is(.lb-close-v, .lb-nav-v, .lb-descarga):not([data-pz-foto]){ color:#FFFFFF; }
html[data-tema="claro"] #lb-counter-voucher:not([data-pz-foto]){ color:rgba(255,255,255,.8); }

/* Los dos botones principales (Nueva liquidación, Gasto) son rellenos de color: se ven igual
   que en el oscuro, con su anillo crema; sólo la sombra se aclara. */
html[data-tema="claro"] :is(.gu-principal, .gu-agregar):not([data-pz-foto]){ color:#FFFFFF; border-color:rgba(234,223,206,.30);
  box-shadow:inset 0 0 0 3px #005565, inset 0 0 0 4px rgba(234,223,206,.18), 0 18px 36px -20px rgba(26,38,51,.45); }
html[data-tema="claro"] .gu-agregar:not([data-pz-foto]){ box-shadow:inset 0 0 0 3px #006D82, inset 0 0 0 4px rgba(234,223,206,.18), 0 16px 30px -18px rgba(26,38,51,.45); }
html[data-tema="claro"] :is(.gu-principal, .gu-agregar):active:not([data-pz-foto]){ box-shadow:inset 0 0 0 3px #005565, inset 0 0 0 4px rgba(234,223,206,.18), 0 16px 30px -18px rgba(26,38,51,.45); }
html[data-tema="claro"] :is(.gu-principal, .gu-agregar) .material-icons-outlined:not([data-pz-foto]){ color:#EADFCE; border-color:rgba(234,223,206,.50); }