/* ═══════════════════════════════════════════════════════════════════════════
   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;
}
/* El del mapa lo cuelga aria-lujo.js sin `bt-cab`: se nombra aparte para que sea igual a sus vecinos. */
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) #btnMapaEco{
  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,
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) #btnMapaEco: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 lo marca `bg-white` de Tailwind (no `.on`, que esta barra no usa). Como ahora es un
   solo círculo que dice el idioma activo, va en contorno igual que sus vecinos: relleno en
   crema parecía presionado (Luis, 2026-09-25). */
html[data-tema="claro"][data-tema="claro"] header.cab-marca:not(.cab-sobre-foto) .cab-marca__idioma button.bg-white{
  background-color:rgba(234,223,206,.06) !important; border-color:rgba(234,223,206,.22) !important; color:#EADFCE !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 DEL ENCABEZADO DE LAS 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 —`Guardar como nueva`, `Publicar`, `Correo`, `Calcular` y la acción del
   globo de ARIA—, deep en el oscuro. Pasan al #046477 del tema claro y conservan la letra
   blanca. Todo lo demás del encabezado queda intacto (aria-fases.css). */
html[data-tema="claro"] #faseNav :is(.vc-acc--pral, #saveSlot > [data-save="new"]),
html[data-tema="claro"] .vc-flota .vc-acc--pral{
  background-color:#046477 !important;
  border-color:#046477 !important;
  color:#FFFFFF !important;
}
html[data-tema="claro"] #faseNav :is(.vc-acc--pral, #saveSlot > [data-save="new"]):hover,
html[data-tema="claro"] .vc-flota .vc-acc--pral:hover{
  background-color:#04566A !important;
  border-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; }

/* ── 4b · Y LOS TONOS (2026-09-29, barrido de contraste) ─────────────────────────────────────
   La misma historia con las rampas de color: `aria-lujo.js` §1 deja del 600 para arriba de
   rojo, índigo, esmeralda, ámbar… en crema o blanco, porque sobre tinta el texto es crema. Sobre
   papel eran 1,0–1,3:1: «Itinerario no encontrado.», las señales de descarte del lead, el
   enlace público, el aviso de reglas no ejecutadas, los íconos índigo. Van a la tinta de la
   casa; las de acción (índigo, cielo), a deep, que es su color de acción en claro. Rojo y
   ocre siguen siendo sólo de relleno: una letra de error va en tinta.
   SE QUEDAN COMO ESTÁN adentro de los rellenos de tono que en claro siguen oscuros —índigo y
   cielo 50/100, rosa y esmeralda 50, ámbar 100— y de los botones de relleno, donde la crema o el
   blanco es justo lo que se lee. (`bg-amber-50` sí se aclara en claro: adentro va tinta.) */
html[data-tema="claro"] :is(.text-red-600, .text-red-700, .text-red-800, .text-red-900,
  .text-rose-600, .text-rose-700, .text-rose-800, .text-rose-900,
  .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900,
  .text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900):not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(:is(.bg-indigo-50, .bg-indigo-100, .bg-sky-50, .bg-rose-50, .bg-emerald-50, .bg-amber-100, [class*="bg-indigo-6"], [class*="bg-emerald-6"], [class*="bg-rose-6"], [class*="bg-red-6"], [class*="bg-sky-6"])):not(:is(.bg-indigo-50, .bg-indigo-100, .bg-sky-50, .bg-rose-50, .bg-emerald-50, .bg-amber-100, [class*="bg-indigo-6"], [class*="bg-emerald-6"], [class*="bg-rose-6"], [class*="bg-red-6"], [class*="bg-sky-6"]) *){
  color:#1A2633 !important;
}
html[data-tema="claro"] :is(.text-indigo-600, .text-indigo-700, .text-indigo-800, .text-indigo-900,
  .text-sky-600, .text-sky-700, .text-sky-800, .text-sky-900):not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(:is(.bg-indigo-50, .bg-indigo-100, .bg-sky-50, .bg-rose-50, .bg-emerald-50, .bg-amber-100, [class*="bg-indigo-6"], [class*="bg-emerald-6"], [class*="bg-rose-6"], [class*="bg-red-6"], [class*="bg-sky-6"])):not(:is(.bg-indigo-50, .bg-indigo-100, .bg-sky-50, .bg-rose-50, .bg-emerald-50, .bg-amber-100, [class*="bg-indigo-6"], [class*="bg-emerald-6"], [class*="bg-rose-6"], [class*="bg-red-6"], [class*="bg-sky-6"]) *){
  color:#005565 !important;
}
/* ── 5 · 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 se va apagando en el color de la página. Desde el 2026-09-27 hay tres temas y el claro
   vuelve a ser el de papel: la bandeja tiene suelo crema y el cierre muere en ese crema, como
   la arena (el que muere en teal es ahora el del tema teal, en aria-tema-teal.css).

   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,.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;
}
/* El logo sigue siendo el blanco, con su sombra: abajo ahora queda el bosque, que es oscuro. */

/* ── 6 · 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; }

/* ── 7 · LA NOTA DEL EDITOR, EN LA MESA ─────────────────────────────────────────────────────
   En el oscuro va en crema (aria-lujo.css); en claro la mesa es papel y vuelve a la tinta al 50 %
   del documento, como siempre. */
/* con el mismo peso que su gemela generada (que la traduce al 68 %), y cargada después: gana */
html[data-tema="claro"].aria-lujo .doc--edicion .nota-plantilla:not([data-pz-foto]){ color:rgba(26,38,51,.5); }

/* La barra de formato de la fase 4: su estado, a 10 px, con la tinta al 60 % daba 4:1 sobre el
   vidrio. Al 72 % (2026-09-28). */
html[data-tema="claro"].aria-lujo #fase4 .bf-estado:not([data-pz-foto]):not(#pz){ color:rgba(26,38,51,.72) !important; }