/* ═══════════════════════════════════════════════════════════════════════════
   PERLA · PRESENTACIONES Y LANDINGS (app8) · TEMA CLARO — LOS AJUSTES A MANO (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   `app8-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. El generador ya deja fuera todo lo que va
   sobre la foto (`:not([data-pz-foto])`): acá queda sólo lo que de verdad cambia.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · SOBRE LA FOTO NO CAMBIA NADA ────────────────────────────────────────
   La letra heredada, la del oscuro: va en el contenedor y no en sus hijos, que ya traen la suya
   (ver reference-tema-sobre-foto: una regla directa en los hijos le gana a la herencia y
   aplastaba los blancos de los botones). */
html[data-tema="claro"] :where(header.cab-marca, .a8-portada, .deck-card-thumb){ color:#EADFCE; }

/* ── 2 · LA BARRA SÓLIDA, EN TEAL ────────────────────────────────────────────
   Cuando la foto se va, la barra es del teal de CIMA y ARIA (#046477: el blanco encima da
   6,79:1). Sus círculos y la pastilla no cambian: son los del oscuro. */
html[data-tema="claro"] header.cab-marca:not(.cab-sobre-foto){
  background-color:#046477 !important;
  border-bottom-color:rgba(234,223,206,.16) !important;
}

/* ── 3 · EL FUNDIDO DE LA PORTADA Y EL CIERRE, EN EL PAPEL ───────────────────────────────────
   Lo único de la portada que cambia de tema, a propósito: el color en que la foto se funde con
   la página. La letra nunca queda encima del fundido (va en su propio tramo), así que se sigue
   leyendo en blanco. El cierre, como el de ARIA en claro: un solo difuminado, arriba, de la
   espuma al crema. */
html[data-tema="claro"] .a8-portada__fundido{
  background:linear-gradient(180deg, rgba(246,243,237,0) 0%, rgba(246,243,237,.5) 38%, rgba(246,243,237,.9) 72%, #F6F3ED 100%) !important; }
html[data-tema="claro"] .a8-cierre__foto{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 8%, rgba(0,0,0,.70) 18%, #000 30%, #000 100%) !important;
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 8%, rgba(0,0,0,.70) 18%, #000 30%, #000 100%) !important; }
html[data-tema="claro"] .a8-cierre__tinta{
  background:linear-gradient(180deg, #F6F3ED 0%, rgba(246,243,237,.88) 8%, rgba(246,243,237,.56) 17%,
    rgba(246,243,237,.22) 27%, rgba(246,243,237,0) 38%, rgba(246,243,237,0) 100%) !important; }

/* ── 4 · LA ESTRELLA DE CARGA ─────────────────────────────────────────────────────────────────
   La de la marca es crema y sobre el papel no se ve: va oscura, con un halo claro que la despega
   también de una foto (sin disco; lo mismo que CAMPO y RAÍCES). */
html[data-tema="claro"][data-tema="claro"] #loader .a8-carga{ filter:brightness(.22) drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(255,255,255,.75)) !important; }

/* ── 5 · LAS LETRAS DE LA MESA OSCURA DE ANTES, SOBRE EL PAPEL ───────────────────────────────
   Esta app escribió `text-slate-200/300` como letra clara sobre su editor negro. El generador de
   Tailwind las traduce por su paso (200 → casi blanco), y en claro quedaban invisibles sobre el
   papel (1,1:1: «Adorno de marca», «Cambiar figura», «Copiar actual», «Subir fotos nuevas»). Van
   en tinta. Y el gris 400, que en el claro es de relleno (3,1:1 como letra), un paso más firme. */
html[data-tema="claro"][data-tema="claro"] :is(.text-slate-200, .text-slate-300):not([data-pz-foto]):not(.tn-deck-root *){ color:#1A2633 !important; }
html[data-tema="claro"][data-tema="claro"] .text-slate-400:not([data-pz-foto]):not(.tn-deck-root *){ color:#5F5B55 !important; }
/* la orientación elegida en «Nueva presentación»: el relleno teal claro lleva la letra en tinta */
html[data-tema="claro"][data-tema="claro"] .format-toggle button.active{ color:#1A2633 !important; border-color:#006D82 !important; }

/* ── 6 · LA CHISPA DEL MODO CLAUDE PUESTO ─────────────────────────────────────────────────────
   El botón encendido es deep en los tres temas; su chispa va blanca (el generador la pasaba a
   tinta: 1,8:1 sobre el deep). */
html[data-tema="claro"][data-tema="claro"] .modo-claude .mc-toggle .mc-chispa{ color:#FFFFFF !important; }