/* ═══════════════════════════════════════════════════════════════════════════
   ARIA · EL TEMA CLARO — LAS EXCEPCIONES A MANO (2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS del generado. Acá va lo que el generador no puede saber: lo que cambia de
   forma y no sólo de color, y lo que Luis pidió pieza por pieza.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LA BARRA DE ARRIBA: DOS ESTADOS Y SÓLO UNO CAMBIA ───────────────────────────────────
   Instrucción literal de Luis:
     «Cuando entras a ARIA, en esa imagen, todos esos componentes que están encima de la imagen,
      en modo claro, nada debe cambiar, nada. Es obligatorio. Pero cuando hago scroll y la
      imagen desaparece y la barra pasa a tener color sólido, ese color sólido tiene que ser
      el mismo teal de la barra de menú de CIMA. Y las letras tienen que coincidir.»

   El marcado ya distingue los dos estados: `aria-lujo.js` pone y quita `cab-sobre-foto` según
   haya fotografía detrás. Así que:
     · CON la clase  → no hay una sola regla acá. Queda tal cual está en el oscuro.
     · SIN la clase  → teal #046477, el mismo del menú de CIMA en claro.

   POR QUÉ ESTAS REGLAS EXISTEN SI LA BARRA LLEVA `data-pz-foto`. El atributo retira el tema
   GENERADO de esa rama, que es lo que queremos para el estado de la foto. Estas de acá se
   escriben a mano nombrando el atributo, para entrar justo donde el generado no entra — y
   sólo en el estado sólido.

   #046477: el blanco encima da 6,79:1 y contra el lienzo 6,13:1. Es el valor ya medido y
   aprobado en CIMA; no se recalcula, se calca, para que las dos apps digan el mismo teal. */
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;
}
/* Las letras, sobre ese teal: las mismas que en CIMA. Crema al 70% para lo secundario y crema
   entera para lo que se lee primero. Se nombra el atributo del tema dos veces para ganarle al
   `html.aria-lujo` del oscuro sin recurrir a un id que no existe. */
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto),
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .bt-cab,
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .ses__yo{
  color:#EADFCE !important;
}
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .bt-cab{
  background-color:rgba(234,223,206,.06) !important;
  border-color:rgba(234,223,206,.22) !important;
}
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .bt-cab:hover{
  background-color:rgba(234,223,206,.14) !important;
  border-color:rgba(234,223,206,.45) !important;
  color:#FFFFFF !important;
}
/* El selector de idioma, con el mismo trato que en el riel de CIMA: el activo en crema llena
   con la letra en teal, que es lo que allá se aprobó. */
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .cab-marca__idioma{
  background-color:transparent !important; border-color:rgba(234,223,206,.22) !important;
}
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .cab-marca__idioma button{
  color:rgba(234,223,206,.72) !important;
}
/* El activo NO lleva `.on` —eso es de la otra consola—: lo marca con `bg-white` de Tailwind,
   y el tema oscuro traduce ese blanco a tinta. Sobre el teal hay que devolverlo a crema con
   la letra en teal hondo, que es como se ve en el riel de CIMA. Medido en vivo: apuntar a
   `.on` no cambiaba nada porque esa clase no existe en esta barra. */
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .cab-marca__idioma button.bg-white{
  background-color:#EADFCE !important; color:#04566A !important;
}
/* La pastilla del usuario, igual que en el riel de CIMA sobre teal. */
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .ses{
  background-color:rgba(234,223,206,.08) !important;
  border-color:rgba(234,223,206,.22) !important;
}
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .ses__salir{
  color:rgba(234,223,206,.65) !important;
}
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .ses__salir:hover{
  color:#FFFFFF !important;
}
/* El logo de la marca es la versión blanca: sobre teal se sigue leyendo, así que no se toca.
   La sombra de la barra tampoco: es la misma pieza en los dos temas, como en CIMA. */

/* ── 2 · EL BOTÓN DE RELLENO TEAL DE LA FRANJA DE FASES ──────────────────────────────────────
   Luis: «cuando entramos a una cotización, la barra de arriba que tiene la imagen, ninguno de
   esos componentes puede cambiar; el único que puede cambiar es el botoncito de color teal,
   que ahora va a cambiar a este nuevo color teal del modo claro».

   Son los de relleno —`Publicar`, `Calcular`, `Correo`, `Guardar como nueva`—, que en el
   oscuro van en índigo o esmeralda de Tailwind y en la franja se ven como el botón teal. Pasan
   al #046477 del tema claro y conservan la letra blanca. Todo lo demás de la franja queda
   intacto, incluido «Sobrescribir», que es vidrio sobre la foto. */
html[data-tema="claro"][data-tema="claro"] #faseNav [class*="bg-indigo-6"],
html[data-tema="claro"][data-tema="claro"] #faseNav [class*="bg-emerald-6"],
html[data-tema="claro"][data-tema="claro"] #faseNav [class*="bg-sky-6"]{
  background-color:#046477 !important;
  border-color:#046477 !important;
  color:#FFFFFF !important;
}
html[data-tema="claro"][data-tema="claro"] #faseNav [class*="bg-indigo-6"]:hover,
html[data-tema="claro"][data-tema="claro"] #faseNav [class*="bg-emerald-6"]:hover,
html[data-tema="claro"][data-tema="claro"] #faseNav [class*="bg-sky-6"]:hover{
  background-color:#04566A !important;
}

/* ── 3 · EL BOTÓN DEL TEMA, DENTRO DE LA BARRA ───────────────────────────────────────────────
   Vive a la par del de «Abrir en Claude Desktop», así que se viste como sus vecinos: sobre la
   foto es el vidrio de los `bt-cab`, y sobre el teal toma el mismo trato que ellos. Se escribe
   acá y no en `prisma-tema.css` porque su sitio es propio de ARIA. */
html.aria-lujo .cab-marca__acc .pz-tema-btn{
  width:38px; height:38px; border-radius:99px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background-color:rgba(234,223,206,.04); border:1px solid rgba(234,223,206,.14);
  color:#EADFCE; transition:border-color 120ms linear, background-color 120ms linear;
}
html.aria-lujo .cab-marca__acc .pz-tema-btn:hover{ border-color:rgba(234,223,206,.4); }
html.aria-lujo .cab-marca__acc .pz-tema-btn .material-icons-outlined{ font-size:17px; }
html.aria-lujo header.cab-marca.cab-sobre-foto .pz-tema-btn{
  background-color:rgba(20,29,39,.58) !important; border:1px solid rgba(255,255,255,.30) !important;
}
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .pz-tema-btn{
  background-color:rgba(234,223,206,.06) !important; border-color:rgba(234,223,206,.22) !important;
  color:#EADFCE !important;
}

/* ── 4 · LOS GRISES DE TEXTO DE TAILWIND, SOBRE PAPEL ────────────────────────────────────────
   ARIA reescribe en caliente la paleta de Tailwind para la tinta (`aria-lujo.js` §1), y los
   `text-slate-*` quedan en tonos pensados para leerse sobre fondo oscuro. Sobre papel, el
   400 da 2,37:1 —«(llegó a Toursys)», la línea que dice a qué llegó cada cotización, casi no
   se veía— y el 300 aún menos.

   No se inventa un gris: se usan los tonos de tinta de la casa, los mismos que el resto del
   tema claro. El 500 ya cumple, pero se nombra igual para que los tres bajen en escalera y no
   se crucen entre sí. Medido con el auditor de contraste el 2026-09-23. */
html[data-tema="claro"] .text-slate-300{ color:rgba(26,38,51,.60) !important; }
/* .66 y no .62: con .62 el contraste daba 4,44 y el mínimo es 4,5 —así de cerca—. */
html[data-tema="claro"] .text-slate-400{ color:rgba(26,38,51,.66) !important; }
html[data-tema="claro"] .text-slate-500{ color:rgba(26,38,51,.70) !important; }
/* Y LOS OSCUROS TAMBIÉN, que son los que más se notan. `aria-lujo.js` reescribe TODA la
   escala para la tinta: `text-slate-700/800/900` —el texto principal de Tailwind— quedan en
   crema, porque sobre tinta el texto ES crema. Sobre papel eso es crema sobre blanco: 1,32,
   invisible. Se veía en los importes de la cotización, que salían en blanco sobre blanco.
   Vuelven a la tinta de la casa. */
html[data-tema="claro"] .text-slate-600{ color:rgba(26,38,51,.78) !important; }
html[data-tema="claro"] .text-slate-700,
html[data-tema="claro"] .text-slate-800,
html[data-tema="claro"] .text-slate-900{ color:#1A2633 !important; }

/* ── 5 · LA LÍNEA BAJO EL TÍTULO, EN EL TEAL DE LA BARRA ─────────────────────────────────────
   Luis, 2026-09-23: «esa línea cambia de color en modo claro; quiero que cambie, pero al teal
   más claro de la barra de menú».

   Es una EXCEPCIÓN PEDIDA a la regla de que sobre la fotografía nada cambia, y por eso se
   escribe acá y con el atributo nombrado: el título vive dentro de la rama marcada como foto,
   así que ninguna regla del tema la alcanza por su cuenta.
   La línea es el `::after` del título y se pinta con `var(--hoja)`, que en claro pasa a crema
   —crema sobre una foto clara no se ve—. Se le pone el mismo #046477 de la barra sólida, que
   es el teal que Luis nombra, para que las dos piezas digan el mismo color. */
html[data-tema="claro"] .hoja-inicio__tit::after{
  background:#046477 !important;
  background-image:none !important;
}

/* ── 6 · EL CIERRE DE LA BANDEJA, EN CLARO ──────────────────────────────────────────────────
   UN SOLO DIFUMINADO, ARRIBA (Luis, 2026-09-24: «en modo claro no me gusta el difuminado de
   abajo y los lados; sólo debe tener arriba, y ahí es como del agua blanco a lo crema»).
   Antes el cierre claro copiaba al oscuro —la foto enmascarada por los cuatro lados— y encima
   le sumaba una franja teal al pie. Sobre papel crema eso se veía como una mancha nublada.
   Ahora la foto va entera de lado a lado y hasta abajo, y sólo arriba se funde: la espuma del
   mar, que ya es casi blanca, se va apagando en el crema de la página (#F6F3ED).

   LA FOTOGRAFÍA NO SE TOCA —sobre foto, nada cambia—: sólo cambia cuánto de ella se ve y la
   tinta que la funde. */
html[data-tema="claro"] .lujo-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"] .lujo-cierre__tinta{
  background:linear-gradient(180deg,
    #F6F3ED 0%, rgba(246,243,237,.86) 8%, rgba(246,243,237,.52) 17%,
    rgba(246,243,237,.20) 27%, rgba(246,243,237,0) 38%, rgba(246,243,237,0) 100%) !important;
}
/* El logo sigue siendo el blanco, con su sombra: abajo ahora queda el bosque, que es oscuro. */

/* ── 7 · LOS FONDOS CLAROS DE TAILWIND, QUE EN CLARO SEGUÍAN EN TINTA ────────────────────────
   Luis, 2026-09-24: «estos dos contenedores son los únicos que tienen color de letra que no se
   lee en el tema claro» — el resumen del lead (`#lecturaLead`) y las cajas de notas de Toursys
   («Comentario interno»). Los dos con el fondo oscuro y la letra oscura encima.

   LA CAUSA, Y POR QUÉ NO LA VIO EL GENERADOR. `aria-lujo.js` reescribe la paleta de Tailwind
   ANTES de que pinte: `slate-50` deja de ser casi blanco y pasa a #222E3A. Esa clase la genera
   Tailwind en caliente, así que no está en ninguna hoja que el generador pueda leer —por eso
   tradujo los `text-slate-*` (§4) pero no los `bg-slate-*`: no existen hasta que el navegador
   los crea—. En tinta todo calzaba, porque la letra también pasaba a crema. En claro la §4
   devolvió la letra a tinta y el fondo se quedó oscuro: tinta sobre tinta.

   Se devuelven los tres tonos de fondo a los de la consola clara, que es lo que estas cajas
   fueron siempre: `--suelo`, `--suelo-2` y `--filete`. Con la letra de la §4 encima, el
   contraste vuelve a ser el del diseño original.

   SIN TOCAR LAS DE OPACIDAD (`bg-slate-50/60` y compañía): son clases distintas, las usa el
   andamiaje de las fases y ya tienen su propia regla en `aria-lujo.css`. */
html[data-tema="claro"] .bg-slate-50:not([data-pz-foto]){ background-color:#F8F9FA !important; }
html[data-tema="claro"] .bg-slate-100:not([data-pz-foto]){ background-color:#F1F3F5 !important; }
html[data-tema="claro"] .bg-slate-200:not([data-pz-foto]){ background-color:#E5E7E9 !important; }
/* Y sus filetes, que venían del mismo sitio y quedaban invisibles sobre el papel. */
html[data-tema="claro"] .border-slate-200:not([data-pz-foto]),
html[data-tema="claro"] .border-slate-300:not([data-pz-foto]){ border-color:#E5E7E9 !important; }
/* Y el estado de paso del ratón, que en Tailwind es OTRA clase (`hover:bg-slate-200` genera
   `.hover\:bg-slate-200:hover`, no `.bg-slate-200`): sin esto, los botones de «Analizar» y
   compañía volvían a tinta justo al pasarles por encima. */
html[data-tema="claro"] .hover\:bg-slate-100:hover:not([data-pz-foto]){ background-color:#F1F3F5 !important; }
html[data-tema="claro"] .hover\:bg-slate-200:hover:not([data-pz-foto]){ background-color:#E5E7E9 !important; }