/* ═══════════════════════════════════════════════════════════════════════════
   ARIA · EL TEMA TEAL — LO QUE LA TRADUCCIÓN NO ALCANZA (2026-09-27)
   ───────────────────────────────────────────────────────────────────────────
   Luis: tres temas —oscuro, teal (el intermedio) y claro— con un solo botón de tres toques.
   El teal es el oscuro con otro suelo: la hoja de lujo se usa traducida entera
   (aria-lujo-teal.css, de 5 herramientas/generar-tema-teal.py), así que acá sólo va lo que
   no vive en esa hoja. La bandeja lleva el suyo en aria-bandeja.css, como sus otros dos.
   Misma lógica del oscuro: suelo y barra del mismo color, el teal #046477 de la barra de CIMA.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LA BARRA SÓLIDA ──────────────────────────────────────────────────────────────────────
   Sobre la foto no cambia nada (lleva `cab-sobre-foto`); cuando la foto se va y la barra se
   vuelve sólida, es del teal del suelo. Las letras y los botones ya son los crema del oscuro. */
html[data-tema="teal"] header.cab-marca:not(.cab-sobre-foto){
  background-color:#046477 !important;
  background-image:none !important;
  border-bottom-color:rgba(234,223,206,.16) !important;
}

/* ── 2 · EL CIERRE DE LA BANDEJA ──────────────────────────────────────────────────────────────
   Un solo difuminado, arriba: la espuma del mar se apaga en el teal del suelo (era el cierre del
   tema claro entre el 2026-09-25 y el 2026-09-27, cuando el claro tenía suelo teal). */
html[data-tema="teal"] .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="teal"] .lujo-cierre__tinta{
  background:linear-gradient(180deg,
    #046477 0%, rgba(4,100,119,.86) 8%, rgba(4,100,119,.52) 17%,
    rgba(4,100,119,.20) 27%, rgba(4,100,119,0) 38%, rgba(4,100,119,0) 100%) !important;
}

/* ── 3 · LOS COLORES DE TAILWIND ──────────────────────────────────────────────────────────────
   `aria-lujo.js` reescribe la paleta de Tailwind para la tinta ANTES de que pinte, y Tailwind
   escribe esas clases en caliente: no están en ninguna hoja que la traducción pueda leer. Se
   traducen a mano los fondos y filetes que la consola usa, con sus estados de paso del ratón
   (`hover:bg-slate-200` es otra clase). Hoja → deep, suelo → teal, el paso de más → #0B6576.
   Nada de esto entra en el documento del cliente (`.doc`, `.doc-papel`, el editor): es papel
   blanco en los tres temas. */
html[data-tema="teal"] .bg-slate-50:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ background-color:#005565 !important; }
html[data-tema="teal"] .bg-slate-100:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ background-color:#046477 !important; }
html[data-tema="teal"] .bg-slate-200:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ background-color:#0B6576 !important; }
html[data-tema="teal"] .border-slate-200:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *),
html[data-tema="teal"] .border-slate-300:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ border-color:rgba(234,223,206,.24) !important; }
html[data-tema="teal"] .hover\:bg-slate-100:hover:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ background-color:#046477 !important; }
html[data-tema="teal"] .hover\:bg-slate-200:hover:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ background-color:#0B6576 !important; }
/* Los grises de texto: pensados para leerse sobre tinta, sobre el teal bajan a menos de 3:1. Van
   en blanco con transparencia, que sobre #046477 da 4,6:1 o más. */
html[data-tema="teal"] .text-slate-300:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ color:rgba(255,255,255,.76) !important; }
html[data-tema="teal"] .text-slate-400:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ color:rgba(255,255,255,.80) !important; }
html[data-tema="teal"] .text-slate-500:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ color:rgba(255,255,255,.86) !important; }
/* El 600 es la crema tostada de los rótulos de la calificación («¿De qué cotización vino este
   lead?»): 4,0:1 sobre el teal, medido en el barrido del 2026-09-29. Blanco al 86 %, como el 500. */
html[data-tema="teal"] .text-slate-600:not([data-pz-foto]):not(.doc *):not(.doc-papel *):not(.ed-raiz *){ color:rgba(255,255,255,.86) !important; }

/* ── 4 · LOS TÍTULOS DE GRUPO DE LA FASE 4 ────────────────────────────────────────────────────
   «Lo que ve el cliente», «Comisiones»: 9,5 px en versalitas. La traducción los deja en blanco
   al 76 %, que sobre la hoja deep del panel da 4,49:1 (barrido del 2026-09-29). Al 86 %. */
html[data-tema="teal"] #fase4 .doc-tit:not([data-pz-foto]){ color:rgba(255,255,255,.86) !important; }