/* ═══════════════════════════════════════════════════════════════════════════
   HORMIGA · EL TEMA CLARO, LO QUE EL GENERADOR NO PUEDE DECIDIR (a mano)
   ───────────────────────────────────────────────────────────────────────────
   Los de ÁGUILA (app-liquidaciones/guias-tema-claro-ajustes.css), más lo que Gastos tiene y ÁGUILA
   no. `hormiga-tema-claro.css` sale de hormiga.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.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Las superficies: tarjetas y ventanas en blanco sobre el lienzo crema. */
html[data-tema="claro"] :is(.gu-tarjeta, .gu-gasto, .gu-vacio, .gu-hoja):not([data-pz-foto]){
  background:#FFFFFF; border-color:rgba(26,38,51,.10); }
html[data-tema="claro"] .gu-seccion: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"] :is(.gu-mas > summary, .gu-bt--foto, .gu-etq, .gu-seccion__tit, .gu-hoja__titulo) .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-tot__num: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, .tab-pill.tab-active, .gu-bt--no.gu-bt--elegido,
  .gu-estado--corregir, .gu-estado--enviada, .gu-marca--rojo, .gu-marca--deep, .gu-insignia, .lb-del-v):not([data-pz-foto]),
html[data-tema="claro"] :is(.gu-bt--lleno, .gu-bt--rojo, .gu-bt--peligro, .gu-bt--no.gu-bt--elegido) .material-icons-outlined:not([data-pz-foto]){ color:#FFFFFF; }
/* …y sobre la salvia llena (lo aprobado y lo pagado), tinta, como en el oscuro */
html[data-tema="claro"] :is(.gu-estado--pagado, .gu-marca--salvia, .gu-bt--si.gu-bt--elegido, .gu-bt--si.gu-bt--elegido .material-icons-outlined):not([data-pz-foto]){ color:#1A2633; }
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 que flotan (Nuevo reporte, Gasto) son la pieza de «Enviar»; en claro su sombra se aclara. */
html[data-tema="claro"] :is(.gu-principal, .gu-agregar):not([data-pz-foto]){ box-shadow:0 14px 30px -18px rgba(26,38,51,.45); }

/* La carga, en claro: el velo de papel y la estrella en tinta (Luis: «solo la estrella, con contraste para
   que se vea»). La crema, sobre el papel, apenas se distinguía; en oscuro y teal sigue la crema sobre tinta. */
html[data-tema="claro"] .gu-splash{ background:rgba(246,243,237,.62); }
html[data-tema="claro"] .gu-splash__estrella:not(.gu-splash__estrella--tinta){ display:none; }
html[data-tema="claro"] .gu-splash__estrella--tinta{ display:block; filter:drop-shadow(0 1px 2px rgba(255,255,255,.9)) drop-shadow(0 4px 16px rgba(246,243,237,.9)); }