/* ═══════════════════════════════════════════════════════════════════════════
   ARIA · LA LÍNEA DE LUJO — la hoja, en tinta (2026-09-21, pedido de Luis)
   ───────────────────────────────────────────────────────────────────────────
   La línea de lujo de CEPAS y Accesos, en el tema de ARIA (la hoja), y SIEMPRE dentro
   del libro de marca (System/marca/sistema_de_diseno.md, que manda):

   LOS COLORES — cinco y ninguno más
     tinta  #1A2633  el suelo · la hoja #222E3A (tinta + crema 5 %: la elevación SUBE)
     deep   #005565  relleno de acción (Guardar, Correo…) y de la fase activa
     teal   #006D82  filetes y estados activos; NUNCA de letra sobre tinta (2,56)
     salvia #7D9B5B  SÓLO relleno: lo ya hecho (las fases recorridas, los puntos de estado)
     crema  #EADFCE  el texto; crema 70 % el secundario; crema 16 % los filetes
     blanco #FFFFFF  los títulos sobre tinta, y el papel del documento del cliente
     (ocre #8A6A2F y rojo #B3261E: andamiaje declarado de sistema, sólo de relleno)

   LA LEY DE TEXTO POR FONDO (§2, es ley)
     | Fondo      | Cuerpo | Títulos | Etiquetas            | Versalitas |
     | Tinta      | Crema  | Blanco  | Teal sólo ≥ 18 pt    | Crema 70 % |
     | Deep       | Blanco | Blanco  | Crema                | Blanco 75 %|
     | Blanco     | Tinta  | Deep    | Deep                 | Tinta 70 % |
     | Foto+velo  | Blanco | Blanco  | Blanco               | Blanco 80 %|

   FORMA Y MOVIMIENTO (§5): radios 14 / 9 / pastilla; UNA sola sombra (la del modal,
   teñida de tinta); nada se levanta, nada brilla; cristal sólo en la cabecera fija; el
   velo de foto es tinta de 0 a 45 % desde el 45 % de la altura, nunca más.
   Ni negrita ni itálica (consola.css ya lo impone).

   El login no cambia. El documento del cliente trae sus propios colores: sigue siendo papel.
   ES REVERSIBLE: se borran las dos líneas de aria-lujo en index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LAS VARIABLES DE LA CONSOLA, EN TINTA ──────────────────────────── */
html.aria-lujo body{
  --blanco:#222E3A; --suelo:#1A2633; --suelo-2:#27323E; --filete:rgba(234,223,206,.16);
  --ink:#EADFCE; --ink-70:rgba(234,223,206,.70); --ink-14:rgba(234,223,206,.16);
  --ink-08:rgba(234,223,206,.10); --ink-04:rgba(234,223,206,.05);
  /* `--deep` en consola.css hace de LETRA de acento en decenas de reglas; sobre tinta el deep
     no se lee (1,64). Adentro de la app esa letra es crema, y los RELLENOS de acción que
     dependían de la variable se pintan con #005565 escrito abajo (§5 bis). */
  --deep:#EADFCE; --teal:#006D82; --green-txt:#EADFCE; --error:#EADFCE;
  /* Los «verdes de la hoja» de consola.css (#04291f, #0b5d43, #0f766e…) NO son de la marca.
     Adentro de la app la hoja se hace con deep y teal; el login conserva los suyos (abajo). */
  --hoja-sombra:#005565; --hoja-honda:#EADFCE; --hoja-viva:#006D82; --hoja-fondo:#005565;
  --hoja:linear-gradient(#005565,#005565); --hoja-luz:linear-gradient(transparent,transparent);
  background-color:#1A2633 !important; color:#EADFCE;
}
/* El login, tal cual era; y el papel del documento del cliente, que sigue siendo papel. */
html.aria-lujo #pantallaLogin, html.aria-lujo .doc-papel, html.aria-lujo .pagina{
  --blanco:#FFFFFF; --suelo:#F8F9FA; --suelo-2:#F1F3F5; --filete:#E5E7E9;
  --ink:#1A2633; --ink-70:rgba(26,38,51,.70); --ink-14:rgba(26,38,51,.14);
  --ink-08:rgba(26,38,51,.08); --ink-04:rgba(26,38,51,.04); --deep:#005565; --teal:#006D82; --green-txt:#4C6636; }
html.aria-lujo #pantallaLogin{ --hoja-sombra:#04291f; --hoja-honda:#0b5d43; --hoja-viva:#0f766e; --hoja-fondo:#07432f;
  --hoja:linear-gradient(-45deg,var(--hoja-sombra),var(--hoja-honda),var(--hoja-viva),var(--hoja-fondo));
  --hoja-luz:linear-gradient(105deg,transparent 38%,rgba(255,240,178,.30) 50%,transparent 62%); }
html.aria-lujo .doc-papel, html.aria-lujo .pagina{ color:#1A2633; }
html.aria-lujo ::selection{ background-color:#005565; color:#FFFFFF; }
html.aria-lujo body *{ scrollbar-color:rgba(234,223,206,.16) transparent; }

/* ── 2 · LAS SUPERFICIES: lo que era blanco es la hoja (tinta un paso más clara) ── */
html.aria-lujo .bg-white.bg-white:not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(#pantallaLogin *){ background-color:#222E3A; }
html.aria-lujo [class*="bg-slate-900/"]{ background-color:rgba(26,38,51,.72) !important; }
/* Una sola sombra en el producto, la del modal: todo lo demás se eleva por material. */
html.aria-lujo .shadow-sm.shadow-sm, html.aria-lujo .shadow.shadow, html.aria-lujo .shadow-md.shadow-md,
html.aria-lujo .shadow-lg.shadow-lg{ box-shadow:none; }
html.aria-lujo .ws-panel,
html.aria-lujo [class*="overflow-x-auto"]:has(>table){ border-color:rgba(234,223,206,.16) !important; }

/* ── 3 · LA CABECERA: tinta, el único cristal del producto, y un filete teal ── */
html.aria-lujo .cab-marca{ background-color:rgba(26,38,51,.94) !important; background-image:none !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #006D82; }
html.aria-lujo .bt-cab{ background-color:transparent; border-color:rgba(234,223,206,.16); color:#EADFCE; }
html.aria-lujo .bt-cab:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
html.aria-lujo .cab-marca__idioma{ background-color:transparent; border-color:rgba(234,223,206,.16); }
html.aria-lujo .cab-marca__idioma button{ color:rgba(234,223,206,.70); }
html.aria-lujo .cab-marca__idioma button.on{ background-color:#EADFCE; color:#1A2633; }
html.aria-lujo .ses__yo{ color:#EADFCE; }
html.aria-lujo .ses__ir, html.aria-lujo .ses__salir{ color:rgba(234,223,206,.70); border-color:rgba(234,223,206,.16); }

/* ── 5 · BOTONES: el relleno de acción es deep, con letra blanca (8,44) ─── */
html.aria-lujo [class*="bg-indigo-6"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *), html.aria-lujo [class*="bg-indigo-7"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *),
html.aria-lujo [class*="bg-emerald-6"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *), html.aria-lujo [class*="bg-emerald-7"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *),
html.aria-lujo [class*="bg-teal-6"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *), html.aria-lujo [class*="bg-teal-7"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *){
  background-color:#005565 !important; background-image:none !important; color:#FFFFFF !important; border-color:#005565 !important; box-shadow:none !important; }
html.aria-lujo [class*="bg-indigo-6"]:hover:not(.doc *), html.aria-lujo [class*="bg-indigo-7"]:hover:not(.doc *),
html.aria-lujo [class*="bg-emerald-6"]:hover:not(.doc *){ background-color:#006D82 !important; }
html.aria-lujo [class*="bg-indigo-6"] *, html.aria-lujo [class*="bg-indigo-7"] *, html.aria-lujo [class*="bg-emerald-6"] *{ color:#FFFFFF; }
html.aria-lujo [class*="bg-red-6"], html.aria-lujo [class*="bg-rose-6"]{ background-color:#B3261E !important; color:#FFFFFF !important; }
html.aria-lujo .bt-menor{ background-color:transparent; border-color:rgba(234,223,206,.16); color:#EADFCE; }
html.aria-lujo .bt-menor:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
/* La nota del editor («corte el texto, nunca el tipo») va en la mesa, no en el papel: con la tinta
   al 50 % del documento, sobre la mesa de tinta no se veía (1:1, medido el 2026-09-27). */
html.aria-lujo .doc--edicion .nota-plantilla{ color:rgba(234,223,206,.6); }
html.aria-lujo input[type="file"]::file-selector-button{ background-color:#005565; color:#FFFFFF; }

/* ── 5 bis · LOS RELLENOS DE ACCIÓN QUE DEPENDÍAN DE --deep ─────────────── */
html.aria-lujo .bt-enviar, html.aria-lujo .interruptor[aria-checked="true"], html.aria-lujo .doc-bt,
html.aria-lujo .com-sw[aria-pressed="true"], html.aria-lujo [class*="bg-deep"]{ background-color:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; }
/* La nota de cada interruptor de comisiones («0,30 % por cada 3 pax») ya es secundaria por su color;
   la opacidad .72 de consola.css la bajaba otra vez y a 10 px quedaba bajo 4,5:1 en los tres temas
   (3,8 oscuro, 4,3 teal, 3,6 claro; barrido del 2026-09-29). */
html.aria-lujo .com-sw__nota{ opacity:1 !important; }
html.aria-lujo .bt-enviar:hover, html.aria-lujo .doc-bt:hover{ background-color:#006D82 !important; transform:none; }
/* Teal de letra sobre tinta no se lee (2,56): los enlaces del documento van en crema. */
 html.aria-lujo .doc-archivo{ color:#EADFCE; }
html.aria-lujo .doc-archivo:hover{ border-color:#EADFCE; }

/* ── 6 · CAMPOS: la hoja un paso más clara; el foco con anillo doble (§2) ── */
html.aria-lujo body input:not(#pantallaLogin *):not(.doc *):not(.doc-papel *):not(.ed-raiz *):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.border-0):not(.bg-transparent),
html.aria-lujo body textarea:not(#pantallaLogin *):not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(.border-0):not(.bg-transparent),
html.aria-lujo body select:not(#pantallaLogin *):not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(.border-0):not(.bg-transparent){
  background-color:#2A3541 !important; color:#EADFCE !important; border-color:rgba(234,223,206,.16) !important; }
/* Sobre tinta el teal solo no se ve (2,56): anillo teal más halo crema, que es lo que lo hace visible. */
html.aria-lujo body input:not(#pantallaLogin *):focus-visible, html.aria-lujo body textarea:not(#pantallaLogin *):focus-visible,
html.aria-lujo body select:not(#pantallaLogin *):focus-visible, html.aria-lujo body button:not(#pantallaLogin *):focus-visible{
  outline:2px solid #006D82 !important; box-shadow:0 0 0 4px rgba(234,223,206,.22) !important; }
html.aria-lujo select option{ background-color:#222E3A; color:#EADFCE; }
html.aria-lujo input::placeholder, html.aria-lujo textarea::placeholder{ color:rgba(234,223,206,.70) !important; opacity:.75; }
/* El login tiene cuadros BLANCOS: ahí el texto de ejemplo va en tinta, no en crema (Luis: «no se leen»). */
html.aria-lujo .lg-inp::placeholder{ color:rgba(26,38,51,.55) !important; opacity:1; }
html.aria-lujo input[type=checkbox], html.aria-lujo input[type=radio]{ accent-color:#005565; }
/* Lo que se edita en el lugar (el título del día, su texto, la Fase 1) sigue siendo texto. */
html.aria-lujo textarea.bg-transparent, html.aria-lujo input.bg-transparent{ color:#EADFCE; }

/* ── 7 · EL INICIO: la bandeja vive en aria-bandeja.css (2026-09-25) ─────── */
html.aria-lujo #home{ overflow-x:hidden; }

/* ── 8 · LA CONVERSACIÓN ─────────────────────────────────────────────────── */
html.aria-lujo #chat{ background-color:#1A2633; }
html.aria-lujo .msj__ast{ background-color:#005565; color:#FFFFFF; }
html.aria-lujo .msj--ia .burb{ background-color:#2A3541; color:#EADFCE; border-color:rgba(234,223,206,.16); }
html.aria-lujo .msj--yo .burb{ background-color:#005565; color:#FFFFFF; }

/* ── 9 · TABLAS, DÍAS, CIFRAS, MODALES ──────────────────────────────────── */
html.aria-lujo thead th:not(.doc *):not(.doc-papel *):not(.ed-raiz *){ background-color:#222E3A !important; color:rgba(234,223,206,.70) !important; border-bottom-color:#006D82 !important; }
html.aria-lujo .banda-cifras{ background-color:#005565 !important; }
html.aria-lujo .rec-parada{ background-color:#2A3541; }
html.aria-lujo .rec-tramo svg, html.aria-lujo .rec-tramo i, html.aria-lujo .rec-tramo span{ background-color:#1A2633; }
/* La única sombra del producto: la del modal, teñida de tinta (§5). */
html.aria-lujo [id$="Modal"] > div:not(.hidden), html.aria-lujo .nc-hoja__caja{
  border:1px solid rgba(234,223,206,.16); box-shadow:0 30px 70px -18px rgba(26,38,51,.62); }

/* ── 10 · EL DOCUMENTO: papel blanco sobre el suelo de tinta ────────────── */

/* ── 11 · AVISOS: el ocre de sistema, sólo de relleno; la letra, crema ─── */
html.aria-lujo .aviso-sin-tarifa, html.aria-lujo [class*="bg-amber-50"]{ background-color:#352F2B !important; border-color:#8A6A2F !important; color:#EADFCE; }

/* ── 12 · LA BARRA DE FORMATO, en tinta ──────────────────────────────────── */
html.aria-lujo .bf{ background-color:#222E3A; border-color:rgba(234,223,206,.16); }
html.aria-lujo .bf-bt, html.aria-lujo .bf-color, html.aria-lujo .bf-restaurar{ border-color:rgba(234,223,206,.16); color:#EADFCE; }
html.aria-lujo .bf-bt:hover, html.aria-lujo .bf-color:hover, html.aria-lujo .bf-restaurar:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
html.aria-lujo .bf-bt--on{ background-color:#005565; border-color:#005565; color:#FFFFFF; }
html.aria-lujo .bf-sep{ background-color:rgba(234,223,206,.16); }
html.aria-lujo .bf-tam, html.aria-lujo .bf-estado{ color:rgba(234,223,206,.70); }

/* ── 13 · LOS TONOS 300–500 SON RELLENO, NUNCA LETRA (§2, para todas las familias) ── */
html.aria-lujo [class*="text-indigo-3"]:not(.doc-papel *),
html.aria-lujo [class*="text-indigo-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-indigo-5"]:not(.doc-papel *),
html.aria-lujo [class*="text-sky-3"]:not(.doc-papel *),
html.aria-lujo [class*="text-sky-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-sky-5"]:not(.doc-papel *),
html.aria-lujo [class*="text-cyan-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-cyan-5"]:not(.doc-papel *),
html.aria-lujo [class*="text-blue-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-blue-5"]:not(.doc-papel *),
html.aria-lujo [class*="text-teal-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-teal-5"]:not(.doc-papel *),
html.aria-lujo [class*="text-emerald-3"]:not(.doc-papel *),
html.aria-lujo [class*="text-emerald-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-emerald-5"]:not(.doc-papel *),
html.aria-lujo [class*="text-green-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-green-5"]:not(.doc-papel *),
html.aria-lujo [class*="text-amber-3"]:not(.doc-papel *),
html.aria-lujo [class*="text-amber-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-amber-5"]:not(.doc-papel *),
html.aria-lujo [class*="text-red-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-red-5"]:not(.doc-papel *),
html.aria-lujo [class*="text-rose-4"]:not(.doc-papel *),
html.aria-lujo [class*="text-rose-5"]:not(.doc-papel *){ color:#EADFCE !important; }

/* Los neutros 200–300 usados como letra (los «—» de celda vacía): crema 70 %, el secundario. */
html.aria-lujo .text-slate-200.text-slate-200:not(.doc-papel *), html.aria-lujo .text-slate-300.text-slate-300:not(.doc-papel *),
html.aria-lujo .text-gray-300.text-gray-300:not(.doc-papel *){ color:rgba(234,223,206,.70); }

/* ═══ 15 · LAS FASES, ELEVADAS ════════════════════════════════════════════════
   Cada etapa se señaliza con su portada, y adentro todo sube un escalón: títulos en
   Glare, rótulos en versalita crema 70 %, cifras como cifras, filetes finos. */

/* LA PORTADA DE LA FASE, RETIRADA (2026-09-23). Era una franja aparte bajo el paso a
   paso, con «Fase N de 5», el nombre y las cifras. Se sustituyó el 2026-09-21 por la
   fotografía DENTRO de `#faseNav` —Luis: «el título es redundante y quita una franja de
   espacio»—, y su `.lujo-fase*` quedó sin nadie que lo escribiera: veintiséis reglas que
   ningún elemento usaba. Se van con el motor del viaje, que es cuando se descubrieron. */

/* El suelo de trabajo de cada fase: tinta, sin tintes grises. */
html.aria-lujo #builderSection [class*="bg-slate-50/"]{ background-color:transparent !important; }
html.aria-lujo .ws-panel{ background-color:#1A2633 !important; }
html.aria-lujo .ws-panel__tit{ font:300 28px/1.1 var(--glare) !important; color:#FFFFFF !important; letter-spacing:-.01em; }

/* Las secciones plegables: la ficha, las notas, las comisiones, la plantilla. */
html.aria-lujo #builderSection details.bg-white{ background-color:#222E3A !important; border-color:rgba(234,223,206,.16) !important; border-radius:14px !important; }
html.aria-lujo #builderSection details.bg-white[open]{ border-color:#006D82 !important; }


/* Los servicios: el nombre en Glare, el código en versalita, las cifras como cifras. */
html.aria-lujo .ficha-margen b{ color:#FFFFFF !important; }

/* Las tablas de la consola: cabeceras en versalita, filas quietas (§5: las tablas no animan). */
html.aria-lujo thead th:not(.doc *):not(.doc-papel *):not(.ed-raiz *){ font:400 10.5px/1.2 var(--sans) !important; letter-spacing:.2em !important; text-transform:uppercase; padding-top:16px !important; }
html.aria-lujo tbody td:not(.doc *):not(.doc-papel *):not(.ed-raiz *){ border-bottom-color:rgba(234,223,206,.10) !important; }
html.aria-lujo tbody tr:not(.doc *):not(.doc-papel *):not(.ed-raiz *):hover{ background-color:#2A3541; }

/* La sección de la plantilla Safari (otra estructura) y los «Editar descripción» de cada servicio. */
html.aria-lujo #builderSection details.p-4 > summary{ font:300 21px/1.2 var(--glare) !important; color:#FFFFFF !important; padding:4px 6px; }
html.aria-lujo #builderSection details.p-4{ padding:18px 22px !important; }

/* ── 16 · LA VENTANA DE CORREO (2026-09-21) ─────────────────────────────────
   El botón de copiar es la acción principal: deep con letra blanca. La vista previa es el
   correo como lo recibe el cliente: papel blanco, igual que el documento. */
html.aria-lujo #btnEmailCopiar{ background-color:#005565 !important; color:#FFFFFF !important; border:1px solid #005565 !important; border-radius:99px !important; box-shadow:none !important; transform:none !important; }
html.aria-lujo #btnEmailCopiar:hover{ background-color:#006D82 !important; }
html.aria-lujo #btnEmailCopiar *{ color:#FFFFFF !important; }
html.aria-lujo #emailPreview{ background-color:#FFFFFF !important; border-color:rgba(234,223,206,.16) !important; }

/* ── 18 · EL MAPA DE ECOSISTEMAS, SOBRE LA BANDEJA ─────────────────────────── */
html.aria-lujo .lujo-mapa-bt{ display:inline-flex; align-items:center; gap:8px; }
html.aria-lujo .lujo-mapa-bt svg{ width:16px; height:16px; flex:none; }
.lujo-mapa{ position:fixed; inset:0; z-index:9000; background:#141D27; animation:lujoMapa .34s cubic-bezier(.22,.9,.24,1); }
.lujo-mapa iframe{ width:100%; height:100%; border:0; display:block; }
html.lujo-mapa-abierto, html.lujo-mapa-abierto body{ overflow:hidden !important; }
@keyframes lujoMapa{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .lujo-mapa{ animation:none; } }

/* Los títulos de los logins, iguales en las cuatro apps (CIMA, ARIA, CEPAS, VIVERO):
   NOMBRE en Marcellus y su función en versalitas, con las medidas del login de VIVERO. */
html.aria-lujo .lg-tit, .lg-tit{ font-family:Marcellus, "PP Fragment Glare", Georgia, serif !important; font-weight:400 !important; font-style:normal !important; font-size:2.6rem !important; line-height:1 !important; letter-spacing:.2em !important; padding-left:.2em !important; color:#FFFFFF !important; text-shadow:none !important; margin:0 !important; }
html.aria-lujo .lg-sub, .lg-sub{ font-family:Figtree, "PP Fragment Sans", Inter, system-ui, sans-serif !important; font-weight:400 !important; font-size:.64rem !important; line-height:1.4 !important; letter-spacing:.34em !important; text-transform:uppercase !important; color:rgba(255,255,255,.85) !important; text-shadow:none !important; margin:.7rem 0 1.6rem !important; }

/* Los datos del itinerario gráfico, ahora en la Fase 3 (arriba del documento, plegados). */
/* Plegado no existe: la foto y el documento quedan pegados. Abierto, se despliega entre los dos. */
#fase3 > #datosItinerario:not([open]){ display:none !important; }
#fase3 > #datosItinerario > summary{ display:none !important; }
#fase3 > #datosItinerario[open]{ flex-shrink:0; margin:0 !important; border-radius:0 !important; border-width:0 0 1px !important;
  padding:1rem 1.25rem !important; max-height:46vh; overflow-y:auto; animation:datosAbre .22s cubic-bezier(.22,.9,.24,1); }
#fase3 > #datosItinerario[open] > div{ margin-top:0 !important; }
@keyframes datosAbre{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ #fase3 > #datosItinerario[open]{ animation:none; } }

/* «¿Olvidó su contraseña?» en crema, como en CIMA y CEPAS (antes cian, fuera del libro). */
html.aria-lujo .lg-link, .lg-link{ color:#EADFCE !important; font-weight:400 !important; }

/* sobre la foto, la barra no lleva sombra: la imagen sigue continua, sin división (Luis) */
html.aria-lujo header.cab-marca.cab-sobre-foto, html.aria-lujo header.cab-marca.cab-sobre-foto > *{ box-shadow:none !important; border:0 !important; }
/* el logo de Terranova en la barra, más grande (Luis): 36 px, como en el riel de VIVERO y CIMA */
html.aria-lujo header.cab-marca img.logo-marca{ height:36px !important; width:auto !important; max-width:none !important; }

/* ── 32 · LA FOTO DETRÁS DE LA BARRA EN TODOS LOS ANCHOS (Luis, 2026-09-22) ─────────────
   «Acá también debe extenderse»: en ventanas angostas la barra baja a dos filas y seguía
   sólida, con la foto debajo y el filete teal. Ahora vale en cualquier ancho: la barra queda
   sobre la foto y la foto sube lo que la barra mida (--alto-barra, medido por aria-lujo.js). */
:root{ --alto-barra:64px; }
html.aria-lujo .h-screen.flex.flex-col:has(> header.cab-marca){ position:relative; }
html.aria-lujo header.cab-marca{ position:absolute !important; top:0; left:0; right:0; z-index:40;
  border-bottom:0 !important; transition:background-color .35s ease; }
html.aria-lujo header.cab-marca.cab-sobre-foto{ background-color:transparent !important; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none !important; }
html.aria-lujo header.cab-marca.cab-sobre-foto .bt-cab{ background-color:rgba(26,38,51,.35); border-color:rgba(255,255,255,.28); }
/* La barra sobre la foto: cada botón en vidrio oscuro con filete claro, legible sobre
   cualquier imagen (Luis: «Salir» se perdía sobre un cielo claro). */
html.aria-lujo header.cab-marca.cab-sobre-foto .ses__salir, html.aria-lujo header.cab-marca.cab-sobre-foto .bt-cab,
html.aria-lujo header.cab-marca.cab-sobre-foto .cab-marca__idioma{ background-color:rgba(20,29,39,.58) !important; border:1px solid rgba(255,255,255,.30) !important;
  color:#FFFFFF !important; backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); }
html.aria-lujo header.cab-marca.cab-sobre-foto .ses__salir:hover, html.aria-lujo header.cab-marca.cab-sobre-foto .bt-cab:hover{ background-color:rgba(0,85,101,.85) !important; border-color:rgba(255,255,255,.55) !important; }
html.aria-lujo header.cab-marca.cab-sobre-foto .cab-marca__idioma button:not(.on){ color:rgba(255,255,255,.85) !important; }
html.aria-lujo header.cab-marca.cab-sobre-foto .ses__yo, html.aria-lujo header.cab-marca.cab-sobre-foto img.logo-marca{ text-shadow:0 1px 10px rgba(10,16,22,.55); filter:drop-shadow(0 1px 6px rgba(10,16,22,.45)); }
html.aria-lujo header.cab-marca.cab-sobre-foto .ses__yo{ color:#FFFFFF !important; }
/* la barra queda fija arriba en cualquier ancho (en el celular se desliza la página entera) */
html.aria-lujo header.cab-marca{ position:fixed !important; }

/* ── 38 · LA FASE 4 (DOCUMENTOS): LA BARRA DE FORMATO Y EL PAPEL (Luis, 2026-09-22) ─────────
   La barra de formato es una pastilla de vidrio que flota fija arriba mientras se recorre el
   documento; la hoja, centrada con la única sombra de la marca. En el celular la barra va en una
   sola fila que se desliza. Las pestañas, el panel de opciones y el acomodo de la fase son de la
   Carpeta (aria-interiores.css, 2026-09-28). */
html.aria-lujo #fase4 .bf{ position:sticky !important; top:8px !important; z-index:5; width:fit-content; max-width:100%; margin:0 auto 18px !important;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px !important; padding:5px 8px !important;
  background:rgba(20,29,39,.82) !important; border:1px solid rgba(234,223,206,.10) !important; border-radius:18px !important;
  backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1); box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; }
html.aria-lujo #fase4 .bf-bt, html.aria-lujo #fase4 .bf-color{ width:30px !important; height:30px !important; min-width:30px; padding:0 !important; border-radius:99px !important;
  display:inline-flex !important; align-items:center; justify-content:center; background:transparent !important; border:0 !important;
  color:rgba(234,223,206,.78) !important; transition:background-color 120ms linear, color 120ms linear; }
html.aria-lujo #fase4 .bf-bt svg, html.aria-lujo #fase4 .bf-color svg{ width:15px !important; height:15px !important; }
html.aria-lujo #fase4 .bf-bt:hover, html.aria-lujo #fase4 .bf-color:hover{ background:rgba(234,223,206,.08) !important; color:#FFFFFF !important; }
html.aria-lujo #fase4 .bf-bt[aria-pressed="true"], html.aria-lujo #fase4 .bf-bt.on, html.aria-lujo #fase4 .bf-bt.activo{ background:#005565 !important; color:#FFFFFF !important; }
html.aria-lujo #fase4 .bf-sep{ width:1px !important; height:18px !important; margin:0 5px !important; background:rgba(234,223,206,.12) !important; border:0 !important; }
html.aria-lujo #fase4 .bf-sel, html.aria-lujo #fase4 .bf-num{ height:30px !important; border-radius:99px !important; background-color:rgba(234,223,206,.05) !important;
  border:1px solid rgba(234,223,206,.12) !important; color:#EADFCE !important; font-size:12px !important; padding:0 .8rem !important; }
html.aria-lujo #fase4 .bf-sel{ max-width:150px; }
html.aria-lujo #fase4 .bf-num{ width:52px !important; padding:0 .4rem 0 .7rem !important; }
html.aria-lujo #fase4 .bf-tam{ display:inline-flex; align-items:center; gap:4px; margin-left:4px; font-size:10px; letter-spacing:.1em; color:rgba(234,223,206,.5); }
html.aria-lujo #fase4 .bf-esp{ display:none !important; }
html.aria-lujo #fase4 .bf-estado{ font-size:10px !important; letter-spacing:.12em; color:rgba(234,223,206,.7) !important; margin:0 6px; }   /* .5 daba 4,2:1 a 10 px */
html.aria-lujo #fase4 .bf-restaurar{ height:30px !important; border-radius:99px !important; padding:0 .8rem !important; margin-left:4px; display:inline-flex !important; align-items:center; gap:.35rem;
  background:transparent !important; border:1px solid rgba(234,223,206,.16) !important; color:#EADFCE !important; font-size:12px !important; }
html.aria-lujo #fase4 .bf-restaurar:hover{ border-color:rgba(234,223,206,.5) !important; }
html.aria-lujo #fase4 .bf-restaurar svg{ width:14px; height:14px; }
html.aria-lujo #fase4 .doc-papel{ margin:0 auto 28px !important; border-radius:4px; box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; }
@media (max-width:767px){
  html.aria-lujo #fase4 .bf{ flex-wrap:nowrap !important; overflow-x:auto; justify-content:flex-start; width:100%; border-radius:16px !important; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent); }
  html.aria-lujo #fase4 .bf::-webkit-scrollbar{ display:none; }
  html.aria-lujo #fase4 .bf > *{ flex:none; }
  html.aria-lujo #fase4 .bf-bt, html.aria-lujo #fase4 .bf-color{ width:36px !important; height:36px !important; min-width:36px; }
}
/* la barra de formato en UNA fila en escritorio: botones de 28 px y «Restaurar» como ícono (su nombre, en el globo) */
@media (min-width:768px){
  html.aria-lujo #fase4 .bf{ gap:1px !important; padding:4px 6px !important; }
  html.aria-lujo #fase4 .bf-bt, html.aria-lujo #fase4 .bf-color{ width:28px !important; height:28px !important; min-width:28px; }
  html.aria-lujo #fase4 .bf-sep{ margin:0 3px !important; }
  html.aria-lujo #fase4 .bf-sel{ max-width:118px; height:28px !important; }
  html.aria-lujo #fase4 .bf-num{ height:28px !important; width:48px !important; }
  html.aria-lujo #fase4 .bf-restaurar{ font-size:0 !important; width:28px; height:28px !important; padding:0 !important; justify-content:center; gap:0 !important; margin-left:3px; }
}
/* en angosto (<1024) la barra de formato va en una fila que se desliza si no cabe */
@media (max-width:1023px){
  html.aria-lujo #fase4 .bf{ flex-wrap:nowrap !important; overflow-x:auto; justify-content:flex-start; width:100%; scrollbar-width:none; }
  html.aria-lujo #fase4 .bf::-webkit-scrollbar{ display:none; }
  html.aria-lujo #fase4 .bf > *{ flex:none; }
  html.aria-lujo #fase4 .bf-tam > span{ display:none; }
}
/* un desglose que no aplica en esta cotización: apagado, tenue y con su «no aplica» */
html.aria-lujo #fase4 .doc-sw.doc-sw--na{ opacity:.45; cursor:help; }
html.aria-lujo #fase4 .doc-sw.doc-sw--na input{ cursor:not-allowed; }
html.aria-lujo #fase4 .doc-sw.doc-sw--na::after{ content:"no aplica"; order:-1; margin-left:auto; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,223,206,.6); }

/* el resumen por tipo: categorías propias y el grupo de cada servicio */
html.aria-lujo #fase4 .doc-rt{ display:flex; flex-direction:column; gap:8px; margin-top:4px; padding:12px 0 2px; border-top:1px solid rgba(234,223,206,.07); }
html.aria-lujo #fase4 .doc-rt.hidden{ display:none; }
html.aria-lujo #fase4 .doc-rt__nada{ font-size:11.5px; color:rgba(234,223,206,.5); line-height:1.5; }

/* ── 39 · «MIS CATEGORÍAS» (el modal de app1 con el diseño de PRISMA) ─────────────────── */
html.aria-lujo #fase4 .doc-rt__gestionar{ height:36px; border-radius:99px; border:1px solid rgba(0,109,130,.7); background:rgba(0,109,130,.12); color:#FFFFFF;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-size:12.5px; cursor:pointer; width:100%; }
html.aria-lujo #fase4 .doc-rt__gestionar:hover{ background:#005565; border-color:#005565; }
html.aria-lujo #fase4 .doc-rt__gestionar svg{ width:15px; height:15px; }
.rt-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(10,16,22,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.rt-modal.hidden{ display:none; }
.rt-modal__hoja{ width:min(680px, 100%); max-height:86vh; display:flex; flex-direction:column; overflow:hidden; border-radius:20px;
  background:#1A2633; border:1px solid rgba(234,223,206,.12); box-shadow:0 30px 70px -18px rgba(26,38,51,.62); color:#EADFCE; font-family:Figtree, system-ui, sans-serif; }
.rt-modal__cab{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px 12px; }
.rt-modal__cab h3{ margin:0; font:300 24px/1.1 Marcellus, Georgia, serif; color:#FFFFFF; }
.rt-modal__x{ width:34px; height:34px; border-radius:99px; border:1px solid rgba(234,223,206,.18); background:transparent; color:#EADFCE; font-size:20px; cursor:pointer; }
.rt-modal__x:hover{ border-color:rgba(234,223,206,.5); }
.rt-modal__crear{ padding:4px 22px 12px; display:flex; flex-direction:column; gap:8px; }
.rt-modal__fila{ display:flex; gap:8px; }
.rt-inp{ flex:1; min-width:0; height:38px; border-radius:99px; background:rgba(234,223,206,.05); border:1px solid rgba(234,223,206,.14); color:#EADFCE; padding:0 1rem; font-size:13px; outline:0; }
.rt-inp:focus{ border-color:#006D82; background:rgba(0,109,130,.08); }
.rt-inp--chip{ height:26px; padding:0 .6rem; font-size:12px; }
.rt-bt{ height:38px; padding:0 1.1rem; border-radius:99px; border:1px solid rgba(234,223,206,.18); background:transparent; color:#EADFCE; font-size:13px; cursor:pointer; white-space:nowrap; }
.rt-bt--prin{ background:#005565; border-color:#005565; color:#FFFFFF; }
.rt-bt--prin:hover{ background:#006D82; }
.rt-bt--peligro{ color:#E8A39C; border-color:rgba(179,38,30,.45); }
.rt-bt--peligro:hover, .rt-bt--confirmar{ background:rgba(179,38,30,.25) !important; color:#FFFFFF !important; }
.rt-modal__guardar{ display:inline-flex; align-items:center; gap:.5rem; font-size:12px; color:rgba(234,223,206,.72); cursor:pointer; }
.rt-modal__guardar input{ accent-color:#006D82; width:15px; height:15px; }
.rt-modal__acordeon{ display:flex; justify-content:space-between; align-items:center; margin:0 22px; padding:10px 2px; background:transparent; border:0;
  border-top:1px solid rgba(234,223,206,.08); color:rgba(234,223,206,.62); font-size:10px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; }
.rt-modal__acordeon[aria-expanded="true"] .rt-chev{ transform:rotate(180deg); }
.rt-chev{ transition:transform .2s ease; font-size:14px; }
.rt-modal__biblio{ margin:0 22px 8px; display:flex; flex-wrap:wrap; gap:6px; max-height:110px; overflow:auto; }
.rt-modal__biblio.hidden{ display:none; }
.rt-chip{ display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 10px; border-radius:99px; border:1px dashed rgba(234,223,206,.3); font-size:12px; }
.rt-chip--perm{ border-style:solid; border-color:rgba(0,109,130,.7); }
.rt-chip button{ width:22px; height:22px; border-radius:99px; border:0; background:rgba(234,223,206,.07); color:#EADFCE; cursor:pointer; font-size:12px; line-height:1; }
.rt-chip button:hover{ background:rgba(234,223,206,.16); }
.rt-chip--confirmar{ border-color:#B3261E; background:rgba(179,38,30,.18); }
.rt-modal__sub{ margin:6px 22px 0; padding:10px 2px 8px; border-top:1px solid rgba(234,223,206,.08); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(234,223,206,.62); }
.rt-modal__lista{ flex:1; overflow:auto; padding:0 22px 8px; }
.rt-linea{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 2px; border-bottom:1px solid rgba(234,223,206,.06); }
.rt-linea__txt{ min-width:0; display:grid; grid-template-columns:auto 1fr; column-gap:8px; row-gap:2px; align-items:center; }
.rt-cod{ grid-row:1 / 3; font-size:9.5px; letter-spacing:.08em; padding:2px 6px; border-radius:6px; border:1px solid rgba(0,109,130,.6); color:#EADFCE; }
.rt-linea__n{ font-size:13px; color:#FFFFFF; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rt-linea__p{ font-size:11px; color:rgba(234,223,206,.5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rt-sel{ flex:none; width:190px; height:34px; border-radius:99px; background-color:rgba(234,223,206,.05); border:1px solid rgba(234,223,206,.14); color:#EADFCE; font-size:12px; padding:0 .8rem; }
.rt-nada{ font-size:12px; color:rgba(234,223,206,.5); margin:4px 0; }
.rt-modal__pie{ display:flex; justify-content:flex-end; gap:10px; padding:14px 22px 18px; border-top:1px solid rgba(234,223,206,.08); }
@media (max-width:640px){
  .rt-modal{ padding:0; align-items:flex-end; }
  .rt-modal__hoja{ max-height:92vh; border-radius:20px 20px 0 0; }
  .rt-linea{ flex-direction:column; align-items:stretch; }
  .rt-sel{ width:100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PASTILLA DEL USUARIO Y LA SUPLANTACIÓN (2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   La misma pieza de CIMA, VIVERO y Golfito, adaptada a una barra horizontal: crema al 6%,
   filete crema al 16%, el hundido interior y nada de sombra proyectada. Son los valores
   MEDIDOS en VIVERO con la sesión puesta, no los que dice su hoja.

   VA ENTERA DENTRO DE LA BARRA, que sobre la fotografía no cambia de tema: por eso estos
   colores se escriben una sola vez y el tema claro no los toca (ver aria-tema-claro-*.css).
   ═══════════════════════════════════════════════════════════════════════════ */
/* LA PASTILLA SE VISTE COMO LOS BOTONES DE AL LADO (Luis, 2026-09-23: «que el contenedor del
   usuario tenga el mismo color, transparencia y borde que el botón de cotizaciones»). Antes
   llevaba el vidrio del riel de CIMA —crema al 6% con hundido interior—, que en un riel
   vertical calza y aquí, al lado de los `bt-cab`, se leía como otra pieza. Ahora son los
   mismos valores que `.bt-cab`, sin sombra interior. */
html.aria-lujo .ses{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap;
  padding:6px 10px; border-radius:9999px;
  background-color:transparent;
  border:1px solid rgba(234,223,206,.16);
  box-shadow:none;
}
html.aria-lujo .ses__disco{
  width:22px; height:22px; border-radius:9999px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(0,109,130,.30); border:1px solid rgba(0,109,130,.50); color:#FFFFFF;
}
html.aria-lujo .ses__yo{
  font:500 12.5px/1 var(--sans); color:#FFFFFF; white-space:nowrap;
  max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
/* El botón de salir: sin caja, como en el riel de las otras apps. */
/* EL ÍCONO DE SALIR, SIN CAJA. Lo heredó de `.ses__ir,.ses__salir` de consola.css, que le da
   fondo, filete y relleno de píldora: dentro de la pastilla eso es una caja adentro de otra, y
   se veía como un recuadro pegado al borde (Luis, 2026-09-23). Se anula todo, incluida la
   sombra y el radio, para que quede el puro ícono. */
html.aria-lujo .ses__salir{
  background:none !important; background-color:transparent !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; margin-left:2px;
  color:rgba(234,223,206,.58) !important; display:inline-flex; align-items:center; cursor:pointer;
}
html.aria-lujo .ses__salir:hover{ color:#FFFFFF !important; }
/* La flecha de suplantación, igual que en Golfito: a la izquierda del disco. */
html.aria-lujo .ses__cambiar{
  width:22px; height:22px; border-radius:9999px; flex:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15);
  color:rgba(234,223,206,.75); transition:color .2s, background-color .2s;
}
html.aria-lujo .ses__cambiar:hover{ background:rgba(255,255,255,.20); color:#EADFCE; }
html.aria-lujo .ses__cambiar[hidden]{ display:none !important; }

/* El menú de personas. Vive pegado al <body> —la barra lo recortaría— y por eso se pinta
   con sus colores escritos: no hereda de nadie. */
.supl-menu{
  position:fixed; z-index:9999; max-height:340px; overflow:auto; padding:6px;
  background:#16222E; border:1px solid rgba(234,223,206,.15); border-radius:14px;
  box-shadow:0 22px 45px rgba(4,12,18,.55); font-family:var(--sans, inherit);
  scrollbar-width:thin; scrollbar-color:#046477 transparent;
}
.supl-menu::-webkit-scrollbar{ width:10px; }
.supl-menu::-webkit-scrollbar-track{ background:transparent; margin:8px 0; }
.supl-menu::-webkit-scrollbar-thumb{ background:#046477; border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
.supl-fila{
  padding:9px 10px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:400;
  color:#EADFCE; transition:background-color .15s;
}
.supl-fila:hover{ background:rgba(234,223,206,.08); }
/* «Volver a mi cuenta» es la salida: deep de relleno con letra blanca, como toda acción (antes
   iba en dorado, fuera del libro de marca) */
.supl-fila--volver{ color:#FFFFFF; background:#005565; display:flex; align-items:center; gap:6px; }
.supl-fila--volver:hover{ background:#006D82; }
.supl-linea{ height:1px; background:rgba(234,223,206,.10); margin:4px 6px; }
.supl-nota{ padding:9px 10px; font-size:12px; color:rgba(234,223,206,.55); }
/* el rojo va sólo de relleno */
.supl-nota--mal{ color:#FFFFFF; background:#B3261E; border-radius:8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRA, MÁS CORTA: TODO EN CÍRCULOS (2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   Luis: «pon los botones circulares como se ven en modo móvil, pero en escritorio, sin texto,
   un poco más minimalista… y el botón de traducir también al final, sólo un círculo con el
   idioma activo, para que todos los botones sean iguales y quiten poco espacio».
   El texto no se pierde: vive en `title` y `aria-label`.
   ═══════════════════════════════════════════════════════════════════════════ */
html.aria-lujo .cab-marca__acc .bt-cab--icono{
  width:38px; height:38px; padding:0; border-radius:99px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; gap:0;
}
html.aria-lujo .cab-marca__acc .bt-cab--icono span{ display:none !important; }

/* EL IDIOMA, EN UN SOLO CÍRCULO. Los dos botones siguen en el marcado; sólo se ve el del
   idioma ACTIVO, que es el que dice en qué idioma se está, y al tocarlo cambia al otro
   (`alternarIdioma`, en index.html). */
html.aria-lujo .cab-idioma--uno{
  padding:0; border:0; background:transparent; gap:0;
}
html.aria-lujo .cab-idioma--uno button{
  width:38px; height:38px; padding:0; border-radius:99px;
  display:none; align-items:center; justify-content:center;
  font:600 11.5px/1 var(--sans); letter-spacing:.06em;
  background-color:transparent !important; border:1px solid rgba(234,223,206,.16) !important;
  color:#EADFCE !important; cursor:pointer;
  transition:border-color 120ms linear, background-color 120ms linear;
}
/* EL ACTIVO LO MARCA `bg-white`, NO `on`. El JavaScript de la consola reescribe las clases
   de estos dos botones al cambiar de idioma —le pone `bg-white shadow-sm` al activo— y de
   paso borra cualquier otra. Apoyarse en `on` dejaba los dos escondidos y el selector
   desaparecía de la barra. Comprobado en vivo el 2026-09-23. */
html.aria-lujo .cab-idioma--uno button.bg-white{ display:inline-flex; }
html.aria-lujo .cab-idioma--uno button.bg-white:hover{ border-color:rgba(234,223,206,.70) !important; color:#FFFFFF !important; }

/* ── LA BARRA, TODA PEGADA A LA IZQUIERDA (Luis, 2026-09-24) ──────────────────────────────
   «Puedes reacomodar todo lo que he puesto en la cabecera; no está acomodado totalmente en
   línea recta porque no lo logro, pero puedes afinarlo.»

   Lo colocó a mano con la herramienta de acomodo y después se midieron las dos barras, la
   suya y la real, una al lado de la otra. La suya NO estaba torcida: las diez piezas tenían
   su centro en 42 px, la mitad exacta de los 84 de alto —lo que parecía desalineado era que
   cada pieza tiene un alto distinto, así que su `top` también—. Y el paso entre los botones
   circulares le salió en 46 px, que es justo 38 de botón + 8 de `gap`: el reparto natural.

   Lo ÚNICO que movió, entonces, fue correr todo a la izquierda, y la diferencia se explica
   con dos huecos muertos que medían 38 y 39 píxeles:
   1 · LA FILA SE CENTRABA. Con `max-width:1440` dentro de una barra más ancha, sobraban 26 px
       a cada lado; sumados a un margen lateral de 22, el logo arrancaba en 48 en vez de 10.
   2 · EL CONTENEDOR DEL MEDIO SIGUE COBRANDO SUS GAPS. `.cab-marca__medio` quedó vacío
       cuando se retiró el título visible (2026-09-21): mide 0 de ancho, pero al ser un hijo
       más de la fila cobra un `gap` de 22 a cada lado. 44 px de nada entre el logo y los
       controles. Se saca del flujo en vez de esconderlo, porque adentro vive el <h1> que leen
       los lectores de pantalla.
   Por eso acá no hay una sola coordenada fija: corregidos los dos huecos, el reparto de
   siempre deja cada pieza dentro de 5 px de donde él la puso. Y como la barra es UNA sola,
   esto vale igual en la portada y en las cinco fases — «esos botones de la cabecera se
   repiten en todas las fases, agrégalos igual en todas».
   El celular no entra: por debajo de 1024 manda su propio acomodo (§44). */
@media (min-width:1024px){
  html.aria-lujo .cab-marca{ padding-left:10px; padding-right:10px; }
  html.aria-lujo .cab-marca__fila{ max-width:none; margin:0; gap:6px; }
  html.aria-lujo .cab-marca__medio{ position:absolute !important; width:0 !important; }
}

/* El botón del mapa sube a la barra y se vuelve un círculo más. */
html.aria-lujo .cab-marca__acc #btnMapaEco{
  width:38px; height:38px; padding:0; border-radius:99px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background-color:transparent; border:1px solid rgba(234,223,206,.16); color:#EADFCE;
  transition:border-color 120ms linear, background-color 120ms linear;
}
html.aria-lujo .cab-marca__acc #btnMapaEco:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
html.aria-lujo .cab-marca__acc #btnMapaEco span{ display:none !important; }
html.aria-lujo .cab-marca__acc #btnMapaEco svg{ width:17px; height:17px; }

/* EL NOMBRE DEL LUGAR, JUNTO A LA LÍNEA DEL TÍTULO (Luis, 2026-09-23: «debe estar a la par de
   la línea que está debajo de Cotizaciones, bien acomodado ahí»). Estaba suelto arriba a la
   derecha, sin nada con qué alinearse. Ahora comparte la línea base con el filete de 72 px
   que firma el título: misma altura, el título a la izquierda y el lugar a la derecha. */
/* El pie cuelga ahora de la CABECERA y no de la banda de fotos: la banda termina donde
   acaba la imagen y el título cae más abajo, así que anclado a ella el rótulo quedaba a
   150 px por encima de la línea. Se alinea por la misma base que el filete del título. */
/* ═══════════════════════════════════════════════════════════════════════════
   TODOS LOS CONTROLES DE LA BARRA, IDÉNTICOS (2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   Luis, mirando la barra sobre una foto clara: «el del usuario no se ve igual que los botones,
   el del mapa no se ve igual al resto, y el del tema se ve diferente también».

   Y tenía razón en los tres. Medido: `btnBandeja` y `btnNew` iban en tinta al 58% con filete
   blanco al 30% —el vestido que `cab-sobre-foto` da a los `.bt-cab`—, mientras que la pastilla
   del usuario y el botón del mapa se habían quedado en transparente con filete crema al 16%,
   que es el vestido de la barra SÓLIDA. Sobre una foto clara eso es un botón que se ve y otro
   que casi no.

   La causa es que cada uno se escribió por su lado: los `bt-cab` ya estaban en la lista de
   `cab-sobre-foto`, y la pastilla, el mapa y el tema se agregaron después sin entrar en ella.
   Esta regla los nombra a TODOS en un solo sitio, para que el día que se agregue otro control
   baste con sumarlo aquí. Mismo fondo, mismo filete, misma medida: 38 × 38.
   ═══════════════════════════════════════════════════════════════════════════ */
html.aria-lujo header.cab-marca.cab-sobre-foto .ses,
html.aria-lujo header.cab-marca.cab-sobre-foto #btnMapaEco,
html.aria-lujo header.cab-marca.cab-sobre-foto .pz-tema-btn,
html.aria-lujo header.cab-marca.cab-sobre-foto .cab-idioma--uno button{
  background-color:rgba(20,29,39,.58) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:none !important;
}
html.aria-lujo header.cab-marca.cab-sobre-foto #btnMapaEco:hover,
html.aria-lujo header.cab-marca.cab-sobre-foto .pz-tema-btn:hover,
html.aria-lujo header.cab-marca.cab-sobre-foto .cab-idioma--uno button:hover{
  background-color:rgba(0,85,101,.85) !important; border-color:rgba(255,255,255,.55) !important;
}
/* El contenedor del selector no pinta nada: quien se ve es el botón de adentro. Con los dos
   vestidos se dibujaban dos filetes concéntricos y el círculo salía de 40 px entre los de 38. */
html.aria-lujo .cab-idioma--uno{ background:transparent !important; border:0 !important; padding:0 !important; }
html.aria-lujo header.cab-marca.cab-sobre-foto .cab-idioma--uno{ background-color:transparent !important; border:0 !important; }
/* La pastilla mide lo mismo de alto que sus vecinos: 38, no 36. */
html.aria-lujo .ses{ height:38px; padding:0 12px 0 6px; }
/* El ícono de salir sigue sin caja, también sobre la foto: es un ícono, no un botón más. */
html.aria-lujo header.cab-marca.cab-sobre-foto .ses__salir{
  background-color:transparent !important; border:0 !important; box-shadow:none !important;
}

/* EL LOGO, MÁS GRANDE SIN MOVER NADA (Luis, 2026-09-23: «ese logo tiene campo para ser más
   grande sin mover las demás cosas»). Y lo tiene: la altura de la barra la fijan los botones
   —38 px— más su relleno de 14 arriba y 14 abajo, o sea 66 px de caja. Con 36 px el logo
   dejaba 30 px de aire; a 48 px sigue cabiendo con holgura y no empuja a nadie. */
html.aria-lujo header.cab-marca img.logo-marca{ height:56px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOS ICONOS DE LA BARRA, DEL MISMO COLOR Y DEL MISMO GROSOR (2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   Luis: «el icono del mapa y el del cambiador de tema no son exactamente del mismo color que
   los demás; el botón y la transparencia son perfectos». Medido, había TRES colores en la
   misma fila:
     · Cotizaciones y Nueva → blanco puro, trazo de 2 px, 16 × 16
     · Mapa y Tema          → crema #EADFCE, trazo de 1,6 px, 17 × 17
     · Idioma               → blanco al 85 %
   Venían de sitios distintos: los dos primeros los pinta la regla de `cab-sobre-foto`, y el
   mapa y el tema se escribieron después con el crema de la barra sólida. La diferencia de
   trazo la explica el SVG del mapa, dibujado a mano con 1,6.

   Se igualan los tres ejes —color, grosor y tamaño— en los DOS estados de la barra: blanco
   sobre la fotografía, crema cuando la barra es sólida. Que es lo que ya hacían los `bt-cab`. */
html.aria-lujo header.cab-marca.cab-sobre-foto #btnMapaEco,
html.aria-lujo header.cab-marca.cab-sobre-foto .pz-tema-btn,
html.aria-lujo header.cab-marca.cab-sobre-foto .cab-idioma--uno button{
  color:#FFFFFF !important;
}
html.aria-lujo header.cab-marca.cab-sobre-foto #btnMapaEco svg{ stroke:#FFFFFF !important; }
/* Barra sólida: el mismo crema que los `bt-cab`. */
html.aria-lujo header.cab-marca:not(.cab-sobre-foto) #btnMapaEco,
html.aria-lujo header.cab-marca:not(.cab-sobre-foto) .pz-tema-btn,
html.aria-lujo header.cab-marca:not(.cab-sobre-foto) .cab-idioma--uno button{
  color:#EADFCE !important;
}
/* El mismo grosor y el mismo tamaño que los iconos de Lucide, que son los que mandan acá. */
html.aria-lujo .cab-marca__acc #btnMapaEco svg{ width:16px; height:16px; stroke-width:2; }
html.aria-lujo .cab-marca__acc .pz-tema-btn .material-icons-outlined{ font-size:16px; }

/* EL LOGO, LEGIBLE TAMBIÉN SOBRE UN CIELO BLANCO (Luis, 2026-09-23: «sobre algunas imágenes no
   se ve»). Tenía una sola sombra suave —tinta al 45 %, difuminada 6 px—, que basta sobre selva
   y desaparece contra una foto quemada de blanco. Se le ponen DOS: una cerrada y opaca que
   dibuja el contorno de cada trazo, y otra abierta que lo despega del fondo. No se le pone una
   caja detrás: el logo es la marca y el libro no admite encerrarla. */
html.aria-lujo header.cab-marca.cab-sobre-foto img.logo-marca{
  filter:drop-shadow(0 1px 2px rgba(10,16,22,.85)) drop-shadow(0 2px 12px rgba(10,16,22,.65)) !important;
}

/* LA BARRA DE DESPLAZAMIENTO NO SE VE, PERO EL DESPLAZAMIENTO FUNCIONA (Luis, 2026-09-23).
   `scrollbar-width:none` en Firefox y el pseudoelemento vacío en los de Chromium. No se toca
   `overflow`: la rueda, el teclado y el gesto del panel siguen funcionando igual; lo único que
   desaparece es el riel. En el celular lo que se desplaza es la página entera (aria-movil.css
   §1), así que con la bandeja a la vista el riel de la página tampoco se ve: se comía una
   franja oscura a la derecha (Luis, 2026-09-25). */
html.aria-lujo #home,
html.aria-lujo #home *,
html.aria-lujo:has(#home:not(.hidden)){
  scrollbar-width:none !important; -ms-overflow-style:none !important;
}
html.aria-lujo #home::-webkit-scrollbar,
html.aria-lujo #home *::-webkit-scrollbar,
html.aria-lujo:has(#home:not(.hidden))::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; }

/* EL DISCO DEL USUARIO, SOBRE LA BARRA SÓLIDA (Luis, 2026-09-23: «cuando se hace scroll, el
   fondo del icono del usuario debe ser un poquito más oscuro para que se vea; el resto es
   perfecto»). Su relleno es teal al 30%, pensado para leerse sobre la fotografía; cuando la
   barra se vuelve teal sólida, teal sobre teal desaparece. Se le da tinta al 30%, que sobre el
   #046477 dibuja el disco sin ensuciarlo —y sólo en ese estado: sobre la foto no se toca. */
html.aria-lujo header.cab-marca:not(.cab-sobre-foto) .ses__disco{
  background-color:rgba(13,23,32,.30) !important;
  border-color:rgba(13,23,32,.28) !important;
}
/* Y el icono del tema, ahora que es un SVG de trazo, con la misma caja que sus vecinos. */
html.aria-lujo .cab-marca__acc .pz-tema-btn svg{ width:16px; height:16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EL CIERRE DE LA BANDEJA: ZACATE, ARENA Y MAR (Luis, 2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   «Quiero un cierre ahí al final, estilo como cierra Nido, con una foto de una costa que
   cierre con el logo de Terranova… el final que sea el zacate, después la arena y después el
   mar, incrustada en el fondo con un difuminado para que el agua se combine con el fondo.»

   UN SOLO DIFUMINADO, ARRIBA, EN LOS DOS TEMAS (Luis, 2026-09-24). Empezó con la técnica del
   Nido —la foto enmascarada por los cuatro lados—, pero sobre esta toma se ve mejor entera:
   primero lo pidió en claro y después en oscuro («quita el difuminado de los lados y de abajo
   igual que el modo claro»). La foto va de lado a lado y hasta el final; sólo arriba nace
   del fondo, y ahí el mar entra en el color de la página sin costura.

   DERECHA, COMO SE TOMÓ (Luis, 2026-09-24: «esta imagen de cierre la pusiste al revés, está de
   cabeza, hay que darle vuelta»). Estuvo espejada en vertical para que el agua quedara abajo,
   pero es una toma de dron algo inclinada: las palmeras se ladean hacia la cámara, y
   espejada quedaban colgando. Ahora va tal cual y el mar queda arriba. Si hace falta cerrar
   con el agua, se busca una toma que ya la traiga abajo; voltear la fotografía no sirve.
   ═══════════════════════════════════════════════════════════════════════════ */
html.aria-lujo .lujo-cierre{
  position:relative; isolation:isolate; overflow:hidden;
  /* abajo, el aire de la barra flotante de la bandeja: el logo queda por encima de ella */
  margin:64px calc(50% - 50vw) 0; padding:clamp(190px,26vw,340px) 24px clamp(110px,9vw,130px);
  display:flex; align-items:flex-end; justify-content:center;
  background:transparent; border:0;
}
html.aria-lujo .lujo-cierre__foto{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-position:center 62%; background-size:cover; background-repeat:no-repeat;
  filter:brightness(.62) saturate(.98);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.34) 10%, rgba(0,0,0,.74) 22%, #000 38%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.34) 10%, rgba(0,0,0,.74) 22%, #000 38%, #000 100%);
}
/* La tinta que sube: el agua entra en el fondo de la página sin costura. Nace y muere en
   #1A2633, que es el fondo REAL de la bandeja en el tema oscuro (medido en vivo el 2026-09-24).
   Estaba en #141D27, un punto más oscuro, y eso dibujaba una línea recta donde empezaba el mar
   (Luis: «solo tienes que difuminar el mar de la imagen con el fondo»). */
html.aria-lujo .lujo-cierre__tinta{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* Del 40 % para abajo queda un velo parejo al 12 %: sin él la foto se aclararía de golpe
     donde termina el difuminado. Abajo ya no se oscurece, porque abajo ya no se funde. */
  background:linear-gradient(180deg, #1A2633 0%, rgba(26,38,51,.86) 9%, rgba(26,38,51,.34) 24%,
    rgba(26,38,51,.12) 40%, rgba(26,38,51,.12) 100%);
}
/* El logo: la versión blanca, que es la que se sostiene sobre fotografía en los dos temas. */
html.aria-lujo .lujo-cierre__logo{
  height:clamp(46px,5.2vw,78px); width:auto; opacity:.94;
  filter:drop-shadow(0 2px 6px rgba(6,12,18,.75)) drop-shadow(0 10px 30px rgba(6,12,18,.55));
}
@media (max-width:640px){
  html.aria-lujo .lujo-cierre{ padding-top:clamp(150px,44vw,240px); }
}
@media (prefers-reduced-motion:reduce){ html.aria-lujo .lujo-cierre__foto{ filter:brightness(.62); } }

/* ═══════════════════════════════════════════════════════════════════════════
   44 · LA BARRA DE ARRIBA HASTA 1023 PX (Luis, 2026-09-24)
   ───────────────────────────────────────────────────────────────────────────
   En dos renglones cuando no cabe en uno: la pastilla y los círculos viven en el mismo
   contenedor (`.cab-marca__acc`); con `display:contents` sus hijos pasan a ser celdas de la
   fila, y aria-bandeja.css los acomoda igual en la bandeja y adentro de una cotización: el logo
   a la izquierda y, a la derecha, los círculos y el usuario. La franja de las fases, que antes
   se acomodaba acá, es ahora el encabezado de las fases (aria-fases.css).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  /* el margen de la barra, fijo */
  html.aria-lujo header.cab-marca{ padding:12px 16px !important; }
  html.aria-lujo header.cab-marca .cab-marca__fila{
    display:grid !important; column-gap:8px !important; row-gap:10px !important; align-items:center; }
  html.aria-lujo header.cab-marca .cab-marca__acc{ display:contents !important; }
  html.aria-lujo header.cab-marca .cab-marca__medio{ position:absolute !important; width:0 !important; }
  /* «Ocultar el panel de chat» no va en el celular: ahí ese hueco lo gobiernan las pestañas
     Conversación/Constructor (así lo dice su marcado, `hidden lg:inline-flex`). Se veía
     porque la regla de los círculos le ponía `display` y le ganaba a esa clase. */
  html.aria-lujo header.cab-marca #btnToggleChat{ display:none !important; }
}