/* ═══════════════════════════════════════════════════════════════════════════
   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, html.aria-lujo .ed-raiz{
  --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, html.aria-lujo .ed-raiz{ color:#1A2633; }
/* El editor del itinerario (Fase 3) es mesa de trabajo del documento: claro, como el papel.
   Sus campos no toman el estilo oscuro de la consola. */
html.aria-lujo .ed-raiz input, html.aria-lujo .ed-raiz select, html.aria-lujo .ed-raiz textarea{
  background-color:#FFFFFF !important; color:#1A2633 !important; border-color:rgba(26,38,51,.14) !important; }
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 .dia-tarj, html.aria-lujo .tcaja,
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); }

/* ── 4 · EL PASO A PASO: el tallo. Lo recorrido en salvia, la fase activa en deep ── */
html.aria-lujo .perfil, html.aria-lujo #faseNav{ background-color:#1A2633 !important; border-bottom:1px solid rgba(234,223,206,.16) !important; }
html.aria-lujo .fase-num{ background-color:transparent !important; color:rgba(234,223,206,.70) !important; border-color:rgba(234,223,206,.16) !important; }
html.aria-lujo .fase-btn:has(~ .fase-btn.fase-on) .fase-num{ background-color:#7D9B5B !important; border-color:#7D9B5B !important; color:#1A2633 !important; }
html.aria-lujo .fase-btn.fase-on .fase-num{ background-color:#005565 !important; border-color:#EADFCE !important; color:#FFFFFF !important; box-shadow:none !important; }
html.aria-lujo .fase-lbl{ color:rgba(234,223,206,.70) !important; }
html.aria-lujo .fase-dato{ color:#FFFFFF !important; }

/* ── 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; }
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; }
html.aria-lujo .bt-enviar:hover, html.aria-lujo .doc-bt:hover{ background-color:#006D82 !important; transform:none; }
html.aria-lujo .fase-btn.fase-on::before, html.aria-lujo .fase-btn:has(~ .fase-btn.fase-on)::before{ background-color:#7D9B5B; }
/* Teal de letra sobre tinta no se lee (2,56): los enlaces del documento van en crema. */
html.aria-lujo .doc-mini:hover, html.aria-lujo .doc-archivo, html.aria-lujo .doc-papel-link{ color:#EADFCE; }
html.aria-lujo .doc-archivo:hover, html.aria-lujo .doc-papel-link:hover, html.aria-lujo .doc-mini: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):not(.dia-tarj__tit):not(.cal-fila__input),
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; }
html.aria-lujo #tsBody input[type="checkbox"]{ background-color:#2A3541; 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 .dia-tarj__tit{ color:#FFFFFF; background-color:transparent; }
html.aria-lujo textarea.bg-transparent, html.aria-lujo input.bg-transparent{ color:#EADFCE; }

/* ── 7 · EL INICIO: la banda de selva (foto + velo de tinta ≤ 45 %) ─────── */
html.aria-lujo #home{ background-color:transparent; overflow-x:hidden; }
html.aria-lujo .hoja-inicio__cab.lujo-cab{ position:relative; min-height:260px; align-items:flex-end; padding:0 0 24px;
  margin-bottom:24px; isolation:isolate; }
/* EL FONDO DE TINTA DEBAJO DE LAS CAPAS (2026-09-23). Con el motor del viaje, la primera
   fotografía entra cuando ya está cargada, no antes: sin este fondo se vería un instante lo
   que hay detrás. Es el mismo tono con el que arranca la franja de fases. */
.lujo-banda{ position:absolute; inset:-44px calc(50% - 50vw) 0; z-index:-1; overflow:hidden; isolation:isolate;
  background-color:#141D27; }
.lujo-banda__foto{ position:absolute; inset:0; background-size:cover; background-position:center 40%; opacity:0;
  transition:opacity .62s cubic-bezier(.22,.9,.24,1); }
.lujo-banda__foto.activa{ opacity:1; }
/* El velo del libro: tinta de 0 a 45 %, subiendo desde el 45 % de la altura. Nunca más. */
.lujo-banda__velo{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(26,38,51,0) 45%, rgba(26,38,51,.45) 100%); }
.lujo-banda::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:#006D82; }
.lujo-banda__pie{ position:absolute; right:clamp(16px,4vw,48px); bottom:24px; display:flex; align-items:center; gap:12px; }
.lujo-banda__lugar{ font:400 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.80); transition:opacity .12s linear; }
/* Los puntitos de la transición se retiraron con su marcado el 2026-09-23. */
/* Sobre foto + velo el título va en blanco (§2). */
html.aria-lujo .hoja-inicio__tit{ color:#FFFFFF; font:300 58px/1.05 var(--glare); letter-spacing:-.016em; }
html.aria-lujo .hoja-inicio__buscar, html.aria-lujo .hoja-inicio__sel{ background-color:#2A3541 !important; }
html.aria-lujo .hoja-inicio__lista{ background-color:#222E3A; border-top:1px solid #006D82; }
html.aria-lujo .hoja-inicio__cabezas{ color:rgba(234,223,206,.70); }
html.aria-lujo .fila-cotiz{ background-color:transparent !important; border-color:rgba(234,223,206,.10) !important; transition:background-color .12s linear !important; }
html.aria-lujo .fila-cotiz:hover{ background-color:#2A3541 !important; }
html.aria-lujo .hoja-inicio__paginas{ background-color:#222E3A; border-top-color:rgba(234,223,206,.16); }

/* ── 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 .dia-tarj{ background-color:#222E3A; }
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 ────────────── */
html.aria-lujo .ed-lienzo, html.aria-lujo .doc-hoja{ background-color:#1A2633 !important; }
html.aria-lujo .doc-tabs{ border-color:rgba(234,223,206,.16) !important; }

/* ── 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; }
html.aria-lujo .cal-grupo{ background-color:#222E3A; border-color:rgba(234,223,206,.16); }

@media (prefers-reduced-motion:reduce){
  .lujo-banda__foto{ transition:opacity .12s linear; }
}

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

/* ── 14 · EL INICIO, EN SERIO: portada con cifra, un panel de filtros y columnas ── */
@media (min-width:900px){
  html.aria-lujo .hoja-inicio__cab.lujo-cab{ display:grid; grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-rows:340px auto; column-gap:12px; row-gap:0; align-items:center; min-height:0; padding:0; margin:0; }
  html.aria-lujo .lujo-cab > .flex-1{ display:none; }
  html.aria-lujo .lujo-cab .hoja-inicio__tit{ grid-area:1/1/2/2; align-self:end; margin:0 0 36px; font-size:64px; }
  html.aria-lujo .lujo-cab .lujo-cifra{ grid-area:1/2/2/4; align-self:end; justify-self:end; margin:0 0 30px; }
  html.aria-lujo .lujo-cab .hoja-inicio__buscar{ grid-area:2/1/3/2; width:auto; margin:18px 0 18px 18px; }
  html.aria-lujo .lujo-cab #bandejaEstado{ grid-area:2/2/3/3; margin:18px 0; }
  html.aria-lujo .lujo-cab #btnNotasCredito{ grid-area:2/3/3/4; margin:18px 18px 18px 0; }
  /* El panel de filtros: una sola hoja que arranca donde termina la foto. */
  html.aria-lujo .lujo-cab::after{ content:""; grid-area:2/1/3/4; align-self:stretch; background-color:#222E3A;
    border:1px solid rgba(234,223,206,.16); border-bottom:0; border-radius:14px 14px 0 0; z-index:-1; }
  html.aria-lujo .lujo-banda{ inset:-44px calc(50% - 50vw) auto; height:384px; }
  html.aria-lujo .hoja-inicio__filtros{ background-color:#222E3A; border:1px solid rgba(234,223,206,.16); border-top-color:rgba(234,223,206,.10);
    border-radius:0 0 14px 14px; padding:14px 18px 18px; margin-bottom:36px; }
}
.lujo-cifra{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; color:#FFFFFF; }
.lujo-cifra__n{ font:300 96px/0.9 var(--glare); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.lujo-cifra__rot{ font:400 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.80); }
html.aria-lujo .lujo-banda__pie:not(.hoja-inicio__tit > *){ top:68px; bottom:auto; }
/* Los controles del panel: finos, sobre la hoja, sin relleno propio. */
html.aria-lujo .hoja-inicio__filtros select, html.aria-lujo .hoja-inicio__filtros input,
html.aria-lujo .lujo-cab select, html.aria-lujo .lujo-cab .hoja-inicio__buscar{
  background-color:transparent !important; border-color:rgba(234,223,206,.16) !important; }
html.aria-lujo .hoja-inicio__filtros select:hover, html.aria-lujo .hoja-inicio__filtros input:hover,
html.aria-lujo .lujo-cab select:hover, html.aria-lujo .lujo-cab .hoja-inicio__buscar:hover{ border-color:rgba(234,223,206,.70) !important; }
html.aria-lujo .hoja-inicio__mes, html.aria-lujo .hoja-inicio__cuenta{ color:rgba(234,223,206,.70); }
html.aria-lujo .hoja-inicio__cuenta{ letter-spacing:.14em; text-transform:uppercase; font-size:11px; }

/* La bandeja en columnas: el viaje, su estado, adónde llegó, la cifra y la fecha. */
@media (min-width:1024px){
  html.aria-lujo .hoja-inicio__cabezas{ display:grid !important; grid-template-columns:minmax(0,1fr) 370px 150px 212px; gap:20px;
    padding:0 28px 12px; font:400 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
  html.aria-lujo .hoja-inicio__cabezas span:nth-child(3){ text-align:right; }
  html.aria-lujo .fila-cotiz{ display:grid !important; grid-template-columns:minmax(0,1fr) 150px 200px 150px 120px 72px; gap:20px;
    align-items:center; padding:22px 28px !important; }
  html.aria-lujo .fila-cotiz > .fila-cotiz__seguim{ grid-column:1/-1; }
  html.aria-lujo .fila-cotiz__total{ text-align:right; }
}
html.aria-lujo .fila-cotiz{ border-left:0 !important; border-right:0 !important; border-radius:0 !important; }
html.aria-lujo .fila-cotiz__tit{ font:300 20px/1.25 var(--glare) !important; color:#FFFFFF !important; letter-spacing:-.005em; }
html.aria-lujo .fila-cotiz__cliente{ font:400 11.5px/1.3 var(--sans); letter-spacing:.06em; color:rgba(234,223,206,.70) !important; margin-top:6px; }
html.aria-lujo .fila-cotiz__cliente .font-mono{ font-family:var(--sans) !important; letter-spacing:.2em; color:#EADFCE !important; }
html.aria-lujo .fila-cotiz__estado{ justify-self:start; border-radius:99px !important; padding:6px 12px !important; font:400 11px/1 var(--sans) !important; letter-spacing:.08em; }
html.aria-lujo .fila-cotiz__fase{ font:300 13px/1.35 var(--sans); color:#EADFCE; }
html.aria-lujo .fila-cotiz__total{ font:300 24px/1 var(--glare) !important; color:#FFFFFF !important; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
html.aria-lujo .fila-cotiz__fecha{ font:400 11px/1.3 var(--sans); letter-spacing:.08em; color:rgba(234,223,206,.70) !important; font-variant-numeric:tabular-nums; }
html.aria-lujo .fila-cotiz__acciones{ justify-self:end; }
html.aria-lujo .hoja-inicio__lista{ border-radius:14px; border:1px solid rgba(234,223,206,.16); overflow:hidden; }

/* ── 14 bis · EL INICIO EN PANTALLA ANGOSTA: título y cifra sobre la foto, controles debajo ── */
@media (max-width:899px){
  html.aria-lujo .hoja-inicio__cab.lujo-cab{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:230px auto auto;
    column-gap:12px; row-gap:10px; align-items:center; min-height:0; padding:0 0 12px; margin:0 0 12px; }
  html.aria-lujo .lujo-cab > .flex-1{ display:none; }
  html.aria-lujo .lujo-cab .hoja-inicio__tit{ grid-area:1/1/2/2; align-self:end; margin:0 0 22px; font-size:40px; }
  html.aria-lujo .lujo-cab .lujo-cifra{ grid-area:1/2/2/3; align-self:end; margin:0 0 18px; }
  html.aria-lujo .lujo-cab .lujo-cifra__n{ font-size:60px; }
  html.aria-lujo .lujo-cab .hoja-inicio__buscar{ grid-area:2/1/3/3; width:100%; margin-top:14px; }
  html.aria-lujo .lujo-cab #bandejaEstado{ grid-area:3/1/4/2; }
  html.aria-lujo .lujo-cab #btnNotasCredito{ grid-area:3/2/4/3; }
  html.aria-lujo .lujo-banda{ inset:-44px calc(50% - 50vw) auto; height:274px; }
  html.aria-lujo .lujo-banda__pie:not(.hoja-inicio__tit > *){ top:36px; }
}
/* 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/"], html.aria-lujo #fase1panel [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; }
html.aria-lujo #qualScore{ font:400 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#EADFCE;
  padding:6px 12px; border-radius:99px; background-color:#005565; }

/* 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; }
html.aria-lujo .com-cab{ padding:18px 22px !important; align-items:baseline; gap:14px; }
html.aria-lujo .com-cab__tit{ font:300 21px/1.2 var(--glare) !important; color:#FFFFFF !important; letter-spacing:-.005em; }
html.aria-lujo .com-cab__resumen{ font:400 12px/1.3 var(--sans) !important; letter-spacing:.06em; color:rgba(234,223,206,.70) !important; }

/* Los días: el número como cifra, el título en Glare, el tallo que los une. */
html.aria-lujo .dia-tarj{ padding:26px 30px !important; border-radius:14px !important; border:1px solid rgba(234,223,206,.16) !important; position:relative; }
html.aria-lujo .dia-tarj:focus-within{ border-color:#006D82 !important; }
html.aria-lujo .dia-tarj__num{ width:48px !important; height:48px !important; flex:0 0 48px !important; border-radius:99px !important;
  background:#005565 !important; background-image:none !important; color:#FFFFFF !important; font:300 24px/1 var(--glare) !important;
  display:grid !important; place-items:center; }
html.aria-lujo .dia-tarj__tit{ font:300 30px/1.15 var(--glare) !important; color:#FFFFFF !important; letter-spacing:-.012em; }
html.aria-lujo .dia-tarj textarea.bg-transparent{ font:300 14.5px/1.6 var(--sans) !important; color:#EADFCE !important; }

/* Los servicios: el nombre en Glare, el código en versalita, las cifras como cifras. */
html.aria-lujo .svc-linea{ padding:16px 0 !important; border-top:1px solid rgba(234,223,206,.10) !important; }
html.aria-lujo .svc-linea p.text-sm{ font:300 17px/1.3 var(--glare) !important; color:#FFFFFF !important; white-space:normal; }
html.aria-lujo .svc-linea p.text-sm [class*="uppercase"]{ font-family:var(--sans); font-size:10px; letter-spacing:.2em; color:rgba(234,223,206,.70) !important; }
html.aria-lujo .svc-linea .font-mono{ font-family:var(--sans) !important; font-size:10px !important; letter-spacing:.16em; background:transparent !important;
  border:1px solid rgba(234,223,206,.16); border-radius:99px !important; padding:2px 8px !important; color:#EADFCE !important; }
html.aria-lujo .svc-linea p.text-\[11px\]{ color:rgba(234,223,206,.70) !important; letter-spacing:.04em; }
html.aria-lujo .svc-etq{ color:rgba(234,223,206,.70) !important; }
html.aria-lujo .precio-calc{ font:300 18px/1 var(--glare) !important; color:#FFFFFF !important; }
html.aria-lujo .ficha-margen b{ color:#FFFFFF !important; }

/* Fase 1: cada grupo con su rótulo en versalita y un filete que lo acompaña. */
html.aria-lujo .cal-grupo{ padding:24px 28px !important; border-radius:14px !important; }
html.aria-lujo .cal-grupo__tit{ display:flex !important; align-items:center; gap:14px; font:400 11px/1 var(--sans) !important;
  letter-spacing:.24em !important; text-transform:uppercase; color:rgba(234,223,206,.70) !important; margin-bottom:18px !important; }
html.aria-lujo .cal-grupo__tit::before{ content:""; width:8px; height:8px; border-radius:99px; background-color:#7D9B5B; flex:none; }
html.aria-lujo .cal-grupo__tit::after{ content:""; flex:1; height:1px; background-color:rgba(234,223,206,.16); }
html.aria-lujo .cal-fila__lbl{ color:rgba(234,223,206,.70) !important; letter-spacing:.04em; }
html.aria-lujo .cal-fila__input{ font:300 16px/1.4 var(--sans) !important; color:#FFFFFF !important; border-bottom-color:rgba(234,223,206,.16) !important; }
html.aria-lujo .cal-fila__input:focus{ border-bottom-color:#EADFCE !important; }
html.aria-lujo .cal-fila__origen{ color:rgba(234,223,206,.70) !important; }

/* Fase 5: la cabecera de la reserva, cada dato legible de lejos. */
html.aria-lujo #tsCabecera{ background-color:#222E3A !important; border:1px solid rgba(234,223,206,.16) !important; border-radius:14px !important;
  padding:20px 24px !important; box-shadow:none !important; }
html.aria-lujo #tsCabecera .uppercase{ font:400 10.5px/1 var(--sans) !important; letter-spacing:.2em !important; color:rgba(234,223,206,.70) !important; margin-bottom:6px; }
html.aria-lujo #tsCabecera .ts-copiable{ font:300 18px/1.2 var(--glare) !important; color:#FFFFFF !important; }
html.aria-lujo .ts-copiable:hover{ background-color:#2A3541 !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 Fase 4: las pestañas del documento, como pestañas de marca. */
html.aria-lujo .doc-tab{ color:rgba(234,223,206,.70); letter-spacing:.04em; }
html.aria-lujo .doc-tab--on{ color:#FFFFFF !important; border-bottom-color:#EADFCE !important; }
html.aria-lujo .doc-panel{ background-color:#222E3A; border:1px solid rgba(234,223,206,.16); border-radius:14px; }
html.aria-lujo .doc-lbl{ color:rgba(234,223,206,.70) !important; letter-spacing:.14em; text-transform:uppercase; font-size:10.5px !important; }

/* 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; }
html.aria-lujo .svc-linea summary.text-\[11px\]{ font:400 10.5px/1 var(--sans) !important; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(234,223,206,.70) !important; margin-top:8px; }
html.aria-lujo .svc-linea summary.text-\[11px\]:hover{ color:#FFFFFF !important; }

/* El paso a paso: lo recorrido es salvia SÓLIDO (consola.css le ponía encima la capa de la hoja). */
html.aria-lujo .fase-btn .fase-num{ background-image:none !important; }
/* La Fase 1: su portada ya dice «Calificación»; el panel no lo repite (queda la cuenta de datos). */
html.aria-lujo #fase1panel .ws-panel__tit, html.aria-lujo #fase1panel .ws-panel__tit ~ svg,
html.aria-lujo #fase1panel > div:first-child > svg:first-child{ display:none !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; }

/* ── 17 · LA FOTO DE LA FASE, COMO FONDO DE LA BARRA DE FASES (2026-09-21) ──────
   La franja aparte con «Fase N de 5» y el nombre se fue: la barra ya lo dice. La foto de la
   fase vive detrás del paso a paso. El velo del libro, uno solo y parejo al 45 % (no más:
   §3); lo que tiene que leerse va sobre cristal de tinta, que es la salida que da el libro
   cuando la foto sola no alcanza. Al cambiar de fase la foto se funde con la siguiente. */
html.aria-lujo #faseNav.lujo-nav{ position:relative; isolation:isolate; overflow:hidden; min-height:84px;
  background:#141D27 !important; border-bottom:1px solid rgba(234,223,206,.16) !important; }
.lujo-nav__fotos{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* SIN ACERCAMIENTO (Luis, 2026-09-24): «dentro de las fases la imagen tiene como un efecto de
   zoom cuando entra; quítalo. Que pasen nada más las imágenes tal como pasa en la portada…
   ése es el lugar de más trabajo, ahí es donde más van a estar los vendedores, y ese zoom
   puede llegar a marear».
   La franja llevaba un `scale(1.08)` que se relajaba en siete segundos. En una portada que se
   mira un momento eso respira; en la barra que el vendedor tiene delante toda la mañana,
   cansa. Queda sólo el fundido, el mismo de la portada.
   El `inset:-2%` también se va: existía para que el acercamiento no descubriera los bordes. */
.lujo-nav__foto{ position:absolute; inset:0; background-size:cover; background-position:center 55%; opacity:0;
  transition:opacity .62s cubic-bezier(.22,.9,.24,1); }
.lujo-nav__foto.activa{ opacity:1; }
.lujo-nav__velo{ position:absolute; inset:0; background:rgba(26,38,51,.45); }
/* EL RÓTULO, SIN PASTILLA (Luis, 2026-09-24): «dentro de las fases no me gusta ese contenedor
   que tiene el nombre; quítale el contenedor, que queden sólo las letras tal y como pasa al
   inicio». Llevaba fondo y radio porque nació antes que el velo de la franja; con el velo al
   45 % encima de la fotografía, las letras se leen solas — igual que el rótulo de la portada,
   que nunca tuvo pastilla. */
.lujo-nav__lugar{ position:absolute; right:14px; bottom:6px; font:400 9.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.80); transition:opacity .12s linear; }
/* El paso a paso sobre cristal. */
html.aria-lujo #faseNav.lujo-nav .perfil__pasos{ padding:6px 12px 6px 6px; border-radius:99px; background:rgba(26,38,51,.62);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(234,223,206,.16); }
html.aria-lujo #faseNav.lujo-nav .fase-num{ background-color:rgba(26,38,51,.55) !important; }
html.aria-lujo #faseNav.lujo-nav .fase-btn:has(~ .fase-btn.fase-on) .fase-num{ background-color:#7D9B5B !important; }
html.aria-lujo #faseNav.lujo-nav .fase-btn.fase-on .fase-num{ background-color:#005565 !important; }
html.aria-lujo #faseNav.lujo-nav .fase-btn:not(:first-child)::before{ background-color:rgba(234,223,206,.30); }
html.aria-lujo #faseNav.lujo-nav .fase-btn.fase-on::before, html.aria-lujo #faseNav.lujo-nav .fase-btn:has(~ .fase-btn.fase-on)::before{ background-color:#7D9B5B; }
html.aria-lujo #faseNav.lujo-nav .fase-lbl{ color:rgba(255,255,255,.80) !important; }
html.aria-lujo #faseNav.lujo-nav .fase-dato{ color:#FFFFFF !important; }
/* Los botones, el estado y los rótulos de la barra: cristal de tinta con letra blanca.
   Copiar el enlace y abrirlo (`.fase3-pub__bt`) entran aquí desde el 2026-09-24: van al lado de
   Autoevaluación y Versiones y Luis los pidió «iguales todos al de historial». */
html.aria-lujo #faseNav.lujo-nav .perfil__grupo > button:not([class*="bg-sky-6"]):not([class*="bg-indigo-6"]):not(#btnGuardar),
html.aria-lujo #faseNav.lujo-nav .bt-cab, html.aria-lujo #faseNav.lujo-nav .bt-menor, html.aria-lujo #faseNav.lujo-nav select,
html.aria-lujo #faseNav.lujo-nav .fase3-pub__bt{
  background-color:rgba(26,38,51,.62) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.26) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
html.aria-lujo #faseNav.lujo-nav .perfil__grupo > button:hover, html.aria-lujo #faseNav.lujo-nav .bt-menor:hover,
html.aria-lujo #faseNav.lujo-nav .fase3-pub__bt:hover{ border-color:#FFFFFF !important; }
html.aria-lujo #faseNav.lujo-nav .perfil__grupo > span, html.aria-lujo #faseNav.lujo-nav label, html.aria-lujo #faseNav.lujo-nav [class*="text-slate"]{
  color:#FFFFFF !important; }
html.aria-lujo #faseNav.lujo-nav .perfil__grupo > span:not(:empty), html.aria-lujo #faseNav.lujo-nav > span:not(:empty):not(.lujo-nav__lugar){
  padding:4px 10px; border-radius:99px; background:rgba(26,38,51,.55); }
/* El `transform:none` que había acá sobraba desde que se retiró el acercamiento: ya no hay
   ninguna transformación que anular. Queda el fundido más corto, que es lo que sí pide quien
   marcó menos movimiento. */
@media (prefers-reduced-motion:reduce){ .lujo-nav__foto{ transition:opacity .2s linear; } }

/* ── 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; } }
html.aria-lujo .lujo-cab #btnMapaEco{ grid-area:1/1/2/2; align-self:start; justify-self:start; margin:26px 0 0 0; background:rgba(26,38,51,.55) !important;
  color:#FFFFFF !important; border:1px solid rgba(255,255,255,.28) !important; border-radius:99px !important; padding:.55rem 1rem !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:2; }
html.aria-lujo .lujo-cab #btnMapaEco:hover{ border-color:#FFFFFF !important; }

/* 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; } }
html.aria-lujo #faseNav.lujo-nav #btnDatosItin.activo{ background:#005565 !important; border-color:#005565 !important; }
@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; }

/* Fase 1: fuera la fila de cabecera del panel (la pastilla «6/11 datos» y su aire). El conteo
   ya lo dice la barra de fases («6 de 11 datos»). Pedido de Luis, 2026-09-22. */
html.aria-lujo #fase1panel > div:first-child{ display:none !important; }

/* ── 31 · LA FOTO SUBE DETRÁS DE LA BARRA Y LA FRANJA DE FASES NO BRINCA (Luis, 2026-09-22) ──
   1) La barra de arriba (Terranova, usuario, Salir, Cotizaciones…) queda TRANSPARENTE sobre
      la foto; al deslizar la bandeja y pasar el borde de la imagen se vuelve de su color de
      siempre. Adentro de una cotización la foto de la fase sube detrás de la barra: más foto.
   2) Sin líneas divisorias: ni el filete teal bajo la foto ni el de la barra. Entre la foto y
      el panel de filtros, una pequeña separación.
   3) La franja de fases tiene UNA estructura fija en las cinco fases (como los logins): el
      paso a paso a la izquierda, los botones de la fase en el medio, Estado · Autoevaluación
      · Versiones a la derecha (estos dos, como íconos con su nombre al pasar). Los textos de
      estado («29 páginas · 7 días…», «10 líneas guardadas…», «Guardado») salen de la fila y
      van al pie de la foto, como el lugar. Una fila en escritorio ancho; dos filas FIJAS en
      pantallas medianas (la segunda, la de los botones de la fase). El alto no cambia. */
@media (min-width:1024px){
  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; }
  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 bandeja: la foto arranca en el borde de arriba, bajo la barra; abajo, aire antes del panel */
  html.aria-lujo #home > .hoja-inicio{ padding-top:108px !important; }
  html.aria-lujo .lujo-banda{ inset:-108px calc(50% - 50vw) auto !important; height:434px !important; }
  html.aria-lujo .lujo-banda::after{ display:none !important; }
  html.aria-lujo .lujo-banda__pie:not(.hoja-inicio__tit > *){ top:132px !important; }
  /* la franja de fases, fija */
  html.aria-lujo #faseNav.lujo-nav{ display:grid !important; min-height:0 !important; border-bottom:0 !important; }
  html.aria-lujo #faseNav.lujo-nav > .flex-1{ display:none !important; }
  /* 10 px entre botones, el mismo hueco que la fila de arriba (Luis los dejó entre 7 y 13) */
  html.aria-lujo #faseNav.lujo-nav > .perfil__grupo{ gap:10px !important; }
  html.aria-lujo #faseNav.lujo-nav > label > span{ display:none !important; }
  /* Autoevaluación y Versiones: íconos redondos (el nombre, en el globo del navegador) */
  html.aria-lujo #faseNav.lujo-nav > #btnAutoeval, html.aria-lujo #faseNav.lujo-nav > #btnVersiones{ width:34px; height:34px; padding:0 !important;
    justify-content:center; border-radius:99px !important; }
  html.aria-lujo #faseNav.lujo-nav > #btnAutoeval > span, html.aria-lujo #faseNav.lujo-nav > #btnVersiones > span{ display:none !important; }
  /* los textos de estado salen de la fila: el pie de la foto los muestra (aria-lujo.js §5) */
  html.aria-lujo #faseNav.lujo-nav #fase3Estado, html.aria-lujo #faseNav.lujo-nav #docEstado, html.aria-lujo #faseNav.lujo-nav #tsHint,
  html.aria-lujo #faseNav.lujo-nav #tsProgreso, html.aria-lujo #faseNav.lujo-nav #saveHint{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .lujo-nav__notas{ position:absolute; left:22px; bottom:8px; font:400 9.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
    color:rgba(255,255,255,.82); padding:3px 9px; border-radius:99px; background:rgba(26,38,51,.45); max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lujo-nav__notas:empty{ display:none; }
  /* «Publicado para el cliente»: en pantalla ancha quedan sólo sus dos botones, copiar el
     enlace y abrirlo (↗). El visto verde que iba delante se retiró del marcado (Luis,
     2026-09-24: «quita ese icono de check, ni entiendo para qué es»): no se podía tocar ni
     decía nada que los dos botones no dijeran ya con sólo estar ahí. */
  html.aria-lujo #faseNav.lujo-nav .fase3-pub > span{ display:none !important; }
  html.aria-lujo #faseNav.lujo-nav .fase3-pub{ gap:6px !important; }
  html.aria-lujo #faseNav.lujo-nav #btnDatosItin{ white-space:nowrap; }
}
@media (min-width:1024px){
  /* todos los botones de la franja, del mismo alto y en una línea */
  html.aria-lujo #faseNav.lujo-nav .perfil__grupo > button, html.aria-lujo #faseNav.lujo-nav .perfil__grupo #saveSlot button,
  html.aria-lujo #faseNav.lujo-nav .fase3-pub__bt, html.aria-lujo #faseNav.lujo-nav .fase3-pub a{ height:34px !important; padding-top:0 !important; padding-bottom:0 !important;
    white-space:nowrap !important; border-radius:99px !important; display:inline-flex !important; align-items:center; flex:none; }
  html.aria-lujo #faseNav.lujo-nav .perfil__grupo > button span{ white-space:nowrap !important; }
  html.aria-lujo #faseNav.lujo-nav select{ height:34px !important; border-radius:99px !important; }
  /* SIN PUBLICAR TODAVÍA: EL AVISO VA AL PIE DE LA FOTO. La condición mira que no haya una
     `.fase3-pub` DE VERDAD, no que no haya ninguna: el marcado pasó a envolver también el
     estado vacío en `.fase3-pub.fase3-pub--vacio`, así que la regla vieja dejó de morder y
     el aviso —«Todavía no se ha publicado nada…», 482 px— se quedó dentro de la fila de
     botones de la fase 3, que por eso pedía 1285 px y desbordaba la franja. Misma corrección
     en `aria-lujo.js` §5, que decidía con la misma pregunta. Medido el 2026-09-24. */
  html.aria-lujo #faseNav.lujo-nav #fase3Publicado:not(:has(.fase3-pub:not(.fase3-pub--vacio))){ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}
/* 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; }
/* la franja de fases sólo existe adentro de una cotización: en la bandeja sigue oculta */
html.aria-lujo #faseNav.lujo-nav.hidden, html.aria-lujo #faseNav.hidden{ display:none !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).
   Sin filete bajo la foto; una pequeña separación antes del panel de filtros. */
: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); }
html.aria-lujo #home > .hoja-inicio{ padding-top:calc(var(--alto-barra) + 44px) !important; }
html.aria-lujo .lujo-banda{ top:calc(-44px - var(--alto-barra)) !important; }
html.aria-lujo .lujo-banda::after{ display:none !important; }
html.aria-lujo .lujo-banda__pie:not(.hoja-inicio__tit > *){ top:calc(var(--alto-barra) + 68px) !important; }
@media (min-width:900px){
  html.aria-lujo .lujo-banda{ height:calc(370px + var(--alto-barra)) !important; }
}
/* adentro de una cotización: la foto de la fase también sube detrás de la barra */
html.aria-lujo #faseNav.lujo-nav{ padding-top:calc(var(--alto-barra) + 14px) !important; }
/* UN SOLO ALTO DE 1024 PARA ARRIBA (2026-09-24). Eran dos: +150 hasta 1699 y +98 por encima,
   porque en pantallas muy anchas todo cabía en un renglón y la franja podía ser más baja.
   Con el acomodo del §43 siempre hay dos bandas —la de la barra arriba y la de los controles
   al pie— y la fotografía vive entre las dos: a +98 esa foto se quedaba en nada justo en las
   pantallas donde más espacio hay.
   Y es +134, no +150: 218 px en total, el alto que Luis le dio al rediseñar las cinco fases
   («le bajé un poquito el alto a la imagen», 2026-09-24). */
@media (min-width:1024px){
  html.aria-lujo #faseNav.lujo-nav{ height:calc(var(--alto-barra) + 134px); }
}
html.aria-lujo #faseNav.lujo-nav.hidden, html.aria-lujo #faseNav.hidden{ display:none !important; }
/* En ventanas angostas y en el celular la foto también cubre el título y la cifra, como en
   escritorio: su alto suma lo que mide la barra (antes quedaba corta debajo de ella). */
@media (max-width:899px){
  html.aria-lujo .lujo-banda{ height:calc(var(--alto-barra) + 274px) !important; }
}
/* 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; }
/* el pie de estado de la franja sólo existe en escritorio (en angosto los textos siguen en su fila) */
@media (max-width:1023px){ .lujo-nav__notas{ display:none !important; } }

/* ── 33 · EL ITINERARIO GRÁFICO, LUXURY (Luis, 2026-09-22) ─────────────────────────────
   «Mantiene mucho del diseño anterior; el acomodo de las cosas está perfecto.» Nada cambia
   de lugar: cambia el marco. La tira de miniaturas, la barra «Documento», el panel de
   ajustes y la barra de avisos pasan del blanco al lenguaje del resto (tinta, filetes
   finos, crema, pastillas). La barra de avisos queda en una sola línea fina: ocupa menos y
   sigue diciendo todo. El documento del cliente (el papel) no se toca. */
html.aria-lujo #fase3 .ed-raiz{ --ed-foco:#006D82; --ed-borde:rgba(234,223,206,.12); background:#141D27 !important; color:#EADFCE; }
/* la barra «Documento» */
html.aria-lujo #fase3 .ed-barra{ background:transparent !important; border-bottom:1px solid rgba(234,223,206,.08) !important; color:#EADFCE !important; }
html.aria-lujo #fase3 .ed-barra .ed-etq, html.aria-lujo #fase3 .ed-barra__abrir{ color:rgba(234,223,206,.72) !important; letter-spacing:.2em; font-size:10px !important; }
html.aria-lujo #fase3 .ed-barra .ed-btn, html.aria-lujo #fase3 .ed-barra select{ background:rgba(234,223,206,.04) !important; color:#EADFCE !important;
  border:1px solid rgba(234,223,206,.14) !important; border-radius:99px !important; }
html.aria-lujo #fase3 .ed-barra .ed-btn[aria-pressed="true"], html.aria-lujo #fase3 .ed-barra .ed-btn.on{ background:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; }
/* la tira de miniaturas */
html.aria-lujo #fase3 .ed-tira-col, html.aria-lujo #fase3 .ed-tira{ background:#141D27 !important; border-right:1px solid rgba(234,223,206,.07) !important; }
html.aria-lujo #fase3 .ed-min__prev{ border:1px solid rgba(234,223,206,.10) !important; border-radius:6px !important; background:#222E3A !important;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.7); transition:border-color 120ms linear, box-shadow 160ms linear; }
html.aria-lujo #fase3 .ed-min:hover .ed-min__prev{ border-color:rgba(234,223,206,.35) !important; }
html.aria-lujo #fase3 .ed-min[aria-current="true"] .ed-min__prev{ border-color:#006D82 !important; box-shadow:0 0 0 2px #006D82, 0 14px 30px -14px rgba(0,0,0,.8) !important; }
html.aria-lujo #fase3 .ed-min__cap{ color:rgba(234,223,206,.6) !important; font-size:10.5px !important; letter-spacing:.06em; }
html.aria-lujo #fase3 .ed-min__cap b, html.aria-lujo #fase3 .ed-min__cap strong{ color:#FFFFFF !important; font-weight:400 !important; }
/* el panel de ajustes */
html.aria-lujo #fase3 .ed-insp{ background:#1A2633 !important; border-left:1px solid rgba(234,223,206,.08) !important; color:#EADFCE !important; padding:1.1rem 1rem !important; }
html.aria-lujo #fase3 .ed-insp h3{ color:rgba(234,223,206,.62) !important; font-size:10px !important; letter-spacing:.2em !important; font-weight:400 !important; margin-bottom:.7rem !important; }
html.aria-lujo #fase3 .ed-insp section{ border-bottom:1px solid rgba(234,223,206,.08) !important; padding-bottom:1.1rem !important; margin-bottom:1.1rem !important; }
html.aria-lujo #fase3 .ed-insp .ed-campo{ color:#EADFCE !important; font-size:12px !important; display:flex; flex-direction:column; gap:.4rem; margin-bottom:.8rem; }
html.aria-lujo #fase3 .ed-insp .ed-campo:has(input[type="checkbox"]){ flex-direction:row; align-items:center; gap:.55rem; }
html.aria-lujo #fase3 .ed-insp select, html.aria-lujo #fase3 .ed-insp input:not([type="checkbox"]){ height:34px; background:rgba(234,223,206,.04) !important; color:#EADFCE !important;
  border:1px solid rgba(234,223,206,.14) !important; border-radius:99px !important; padding:0 .9rem !important; font-size:12px !important; }
html.aria-lujo #fase3 .ed-insp input[type="checkbox"]{ accent-color:#006D82; width:15px; height:15px; }
html.aria-lujo #fase3 .ed-insp .ed-nada{ color:rgba(234,223,206,.55) !important; font-size:11.5px !important; line-height:1.55; }
html.aria-lujo #fase3 .ed-insp-cerrar, html.aria-lujo #fase3 .ed-fab{ background:#005565 !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.2) !important; }
/* la barra de avisos: una línea fina */
html.aria-lujo #fase3 .ed-pie{ background:#141D27 !important; border-top:1px solid rgba(234,223,206,.08) !important; color:#EADFCE !important; }
html.aria-lujo #fase3 .ed-pie__cab{ min-height:34px; padding:.25rem .9rem !important; gap:.75rem !important; align-items:center; flex-wrap:nowrap !important; overflow:hidden; }
html.aria-lujo #fase3 .ed-pie .ed-etq{ color:rgba(234,223,206,.55) !important; font-size:9.5px !important; letter-spacing:.2em !important; }
html.aria-lujo #fase3 .ed-pie [data-ui="contador"]{ color:#EADFCE !important; font-size:11px !important; white-space:nowrap; }
html.aria-lujo #fase3 .ed-pie .ed-prop{ display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap; }
html.aria-lujo #fase3 .ed-pie .ed-prop > span:not(.ed-etq){ font-size:11px !important; color:rgba(234,223,206,.75) !important; font-variant-numeric:tabular-nums; }
html.aria-lujo #fase3 .ed-pie .ed-prop > span[data-fuera="1"]{ color:#D9B46A !important; }
html.aria-lujo #fase3 .ed-pie .ed-btn, html.aria-lujo #fase3 .ed-pie .ed-plegar{ height:26px; padding:0 .8rem !important; font-size:11px !important; border-radius:99px !important;
  background:transparent !important; color:#EADFCE !important; border:1px solid rgba(234,223,206,.18) !important; white-space:nowrap; display:inline-flex; align-items:center; gap:.3rem; }
html.aria-lujo #fase3 .ed-pie .ed-btn:hover, html.aria-lujo #fase3 .ed-pie .ed-plegar:hover{ border-color:rgba(234,223,206,.5) !important; }
html.aria-lujo #fase3 .ed-pie .ed-plegar svg{ width:13px; height:13px; }
html.aria-lujo #fase3 .ed-avisos{ background:#1A2633 !important; border-top:1px solid rgba(234,223,206,.06) !important; }
html.aria-lujo #fase3 .ed-avisos li{ color:rgba(234,223,206,.8) !important; border-bottom-color:rgba(234,223,206,.06) !important; font-size:12px !important; }
html.aria-lujo #fase3 .ed-avisos code{ background:rgba(234,223,206,.06) !important; color:#EADFCE !important; border-radius:6px; padding:.05rem .4rem; font-size:10px; }
/* la franja: «Copiar enlace» y su ícono en la misma línea */
html.aria-lujo #faseNav.lujo-nav .fase3-pub{ flex-wrap:nowrap !important; white-space:nowrap !important; display:inline-flex !important; align-items:center; }
html.aria-lujo #fase3 .ed-pie__cab, html.aria-lujo #fase3 .ed-pie > *:not(.ed-avisos){ background:transparent !important; border:0 !important; box-shadow:none !important; }
/* la copia de la página dentro de cada miniatura, anclada a la esquina: el .doc la centraba
   con su ancho real (794 px) y quedaba corrida fuera de la ficha — la miniatura «vacía» */
.ed-min__prev > .doc{ display:block !important; padding:0 !important; margin:0 !important; width:100% !important; height:auto !important; gap:0 !important; background:transparent !important; }
.ed-min__prev > .doc > .pagina{ margin:0 !important; transform-origin:0 0 !important; box-shadow:none !important; }

/* ── 34 · EL ANCHO DE USO DIARIO (~990 px) CON ESPACIO PARA EL DOCUMENTO (Luis, 2026-09-22) ──
   «En este tamaño deja muy poco espacio: no existe el scroll del celular que sube lo de
   arriba.» La barra de arriba en UNA fila —la pieza vacía del medio se retiró del flujo más abajo—, la
   franja de fases con la misma estructura fija de escritorio en dos filas, y la línea
   «Documento» fuera: su botón vive en la franja, como «Datos del itinerario» (se despliega
   al tocarlo y se pliega al tocarlo otra vez, afuera o con Esc). */
@media (min-width:768px){
  /* la línea «Documento» sólo aparece desplegada; el botón está en la franja */
  html.aria-lujo #fase3 .ed-raiz[data-barra="cerrada"] > .ed-barra{ display:none !important; }
  html.aria-lujo #fase3 .ed-raiz[data-barra="abierta"] > .ed-barra .ed-barra__abrir{ display:none !important; }
  html.aria-lujo #faseNav.lujo-nav #btnDocHerr.activo{ background:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; }
}
@media (min-width:768px) and (max-width:1023px){
  html.aria-lujo #faseNav.lujo-nav{ display:grid !important; grid-template-columns:auto minmax(0,1fr) auto auto auto auto; grid-template-rows:44px 38px;
    column-gap:8px; row-gap:8px; align-items:center; align-content:start; height:calc(var(--alto-barra) + 112px); min-height:0 !important;
    padding:calc(var(--alto-barra) + 8px) 16px 0 !important; border-bottom:0 !important; }
  html.aria-lujo #faseNav.lujo-nav > .flex-1{ display:none !important; }
  html.aria-lujo #faseNav.lujo-nav > .perfil__pasos{ grid-column:1; grid-row:1; }
  html.aria-lujo #faseNav.lujo-nav > .perfil__grupo{ grid-column:1 / -1; grid-row:2; justify-self:start; flex-wrap:nowrap !important; gap:6px !important; min-width:0; max-width:100%; overflow:hidden; }
  html.aria-lujo #faseNav.lujo-nav > label{ grid-column:3; grid-row:1; }
  html.aria-lujo #faseNav.lujo-nav > #btnAutoeval{ grid-column:4; grid-row:1; }
  html.aria-lujo #faseNav.lujo-nav > #btnVersiones{ grid-column:5; grid-row:1; }
  html.aria-lujo #faseNav.lujo-nav > #quoteAutor{ grid-column:6; grid-row:1; }
  html.aria-lujo #faseNav.lujo-nav > label > span{ display:none !important; }
  html.aria-lujo #faseNav.lujo-nav > #btnAutoeval, html.aria-lujo #faseNav.lujo-nav > #btnVersiones{ width:32px; height:32px; padding:0 !important; justify-content:center; border-radius:99px !important; }
  html.aria-lujo #faseNav.lujo-nav > #btnAutoeval > span, html.aria-lujo #faseNav.lujo-nav > #btnVersiones > span{ display:none !important; }
  html.aria-lujo #faseNav.lujo-nav #fase3Estado, html.aria-lujo #faseNav.lujo-nav #docEstado, html.aria-lujo #faseNav.lujo-nav #tsHint,
  html.aria-lujo #faseNav.lujo-nav #tsProgreso, html.aria-lujo #faseNav.lujo-nav #saveHint{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  /* la misma pregunta que en ≥1024: `.fase3-pub--vacio` no cuenta como publicado */
  html.aria-lujo #faseNav.lujo-nav #fase3Publicado:not(:has(.fase3-pub:not(.fase3-pub--vacio))){ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  html.aria-lujo #faseNav.lujo-nav .fase3-pub > span{ display:none !important; }
  html.aria-lujo #faseNav.lujo-nav .perfil__grupo > button, html.aria-lujo #faseNav.lujo-nav .perfil__grupo #saveSlot button,
  html.aria-lujo #faseNav.lujo-nav .fase3-pub__bt, html.aria-lujo #faseNav.lujo-nav .fase3-pub a{ height:32px !important; padding-top:0 !important; padding-bottom:0 !important;
    white-space:nowrap !important; border-radius:99px !important; display:inline-flex !important; align-items:center; flex:none; font-size:13px !important; }
  html.aria-lujo #faseNav.lujo-nav select{ height:32px !important; border-radius:99px !important; }
  html.aria-lujo #faseNav.lujo-nav .fase-btn.fase-on .fase-dato{ font-size:14px !important; }
  .lujo-nav__notas{ display:block !important; position:absolute; left:16px; bottom:6px; font:400 9px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
    color:rgba(255,255,255,.82); padding:3px 9px; border-radius:99px; background:rgba(26,38,51,.45); max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lujo-nav__notas:empty{ display:none !important; }
  html.aria-lujo .lujo-nav__lugar{ bottom:6px !important; }
}
/* ── 35 · LOS AVISOS: UN BOTÓN CON SU NÚMERO, SIN LA FRANJA (Luis, 2026-09-22) ─────────
   La barra de avisos ya no ocupa una fila: queda un botón «Avisos» flotando sobre el
   documento, abajo a la izquierda, con la cantidad en una pastilla cuando hay alguno. Al
   tocarlo se abre el panel completo (fondos, «Exportar igual» y la lista); se cierra al
   tocarlo otra vez, afuera o con Esc. */
html.aria-lujo #fase3 .ed-raiz{ position:relative; }
html.aria-lujo #fase3 .ed-raiz:not(.avisos-abiertos) > .ed-pie{ display:none !important; }
html.aria-lujo #fase3 .ed-raiz.avisos-abiertos > .ed-pie{ position:absolute !important; left:var(--avisos-izq, 16px); bottom:64px; z-index:30;
  width:min(680px, calc(100% - var(--avisos-izq, 16px) - 16px)); max-height:min(62vh, 560px); overflow:auto !important; display:block !important;
  border:1px solid rgba(234,223,206,.14) !important; border-radius:16px; box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; background:#141D27 !important; }
html.aria-lujo #fase3 .ed-raiz.avisos-abiertos > .ed-pie .ed-pie__cab{ flex-wrap:wrap !important; row-gap:.4rem; padding:.7rem 1rem !important; position:sticky; top:0; background:#141D27 !important; z-index:1; }
html.aria-lujo #fase3 .ed-raiz.avisos-abiertos > .ed-pie .ed-plegar{ display:none !important; }
html.aria-lujo #fase3 .ed-raiz.avisos-abiertos > .ed-pie .ed-avisos{ display:block !important; max-height:none !important; }
.lujo-avisos-bt{ position:absolute; left:var(--avisos-izq, 16px); bottom:16px; z-index:31; height:38px; padding:0 14px 0 12px; border-radius:99px;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:400 13px/1 var(--sans); color:#FFFFFF;
  background:rgba(20,29,39,.72); border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 70px -18px rgba(26,38,51,.62); transition:background-color 120ms linear, border-color 120ms linear; }
.lujo-avisos-bt:hover{ border-color:rgba(255,255,255,.55); }
.lujo-avisos-bt[aria-expanded="true"]{ background:#005565; border-color:#005565; }
.lujo-avisos-bt svg{ width:15px; height:15px; }
.lujo-avisos-bt__n{ min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:#8A6A2F; color:#FFFFFF; font-size:11px;
  display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.lujo-avisos-bt__n:empty{ display:none; }
/* el pellizco lo maneja el editor (zoom del documento); un dedo sigue desplazando */
html.aria-lujo #fase3 .ed-lienzo{ touch-action:pan-x pan-y; }
/* ── 36 · LA FILA DE LA FASE 3 QUE NO CABÍA (Luis: «un botón no cuadra, se traslapa») ──
   Con «Documento» en la franja, la fase 3 pedía más ancho del que hay: «Datos del
   itinerario» dice «Datos» y «Copiar enlace» queda como ícono (el nombre, en el globo); y
   hasta 1700 px la franja usa sus dos filas FIJAS (igual en las cinco fases). En ~990 px, el
   pie de estado tiene su propio renglón y ya no pisa los botones. */
@media (min-width:768px){
  html.aria-lujo #faseNav.lujo-nav #btnDatosItin > span{ font-size:0 !important; display:inline !important; }
  html.aria-lujo #faseNav.lujo-nav #btnDatosItin > span::after{ content:"Datos"; font-size:13px; }
  html.aria-lujo #faseNav.lujo-nav .fase3-pub__bt{ font-size:0 !important; gap:0 !important; width:32px; justify-content:center; padding:0 !important; }
  html.aria-lujo #faseNav.lujo-nav .fase3-pub__bt svg{ width:14px !important; height:14px !important; }
}
@media (min-width:768px) and (max-width:1023px){
  html.aria-lujo #faseNav.lujo-nav{ height:calc(var(--alto-barra) + 132px) !important; }
}
/* ── 37 · LA DIVISIÓN ENTRE SERVICIOS DE UN DÍA (Luis: «más fácil de identificar, sin bulla») ──
   Cada servicio es una hoja suave propia —apenas más clara que el día, filete fino, esquinas
   redondeadas— con aire entre uno y otro, en vez de una raya casi invisible. */
html.aria-lujo .dia-tarj ul > li.svc-linea{ border:1px solid rgba(234,223,206,.09) !important; border-radius:14px !important;
  background:rgba(234,223,206,.025) !important; padding:14px 16px 12px !important; margin:0 0 12px !important; transition:border-color 140ms linear, background-color 140ms linear; }
html.aria-lujo .dia-tarj ul > li.svc-linea:last-child{ margin-bottom:0 !important; }
html.aria-lujo .dia-tarj ul > li.svc-linea:hover{ border-color:rgba(234,223,206,.18) !important; background:rgba(234,223,206,.035) !important; }
html.aria-lujo .dia-tarj ul > li.svc-linea + li.svc-linea{ border-top:1px solid rgba(234,223,206,.09) !important; }

/* ── 38 · LA FASE 4 (DOCUMENTOS), A OTRO NIVEL (Luis, 2026-09-22) ──────────────────────────
   «Esa fase está bien, pero sé que puedes llevarla a otro nivel: botones más luxury, todo
   mejor acomodado, espacios optimizados; no puedes perder nada.» Nada se quita ni se mueve
   de sitio: cambia la manera. Las pestañas son un índice de libro; el panel de opciones,
   una hoja suave con sus secciones en versalitas finas y los interruptores como pastillas
   que se encienden en teal; la barra de formato, 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: las opciones plegadas en una pastilla, y pestañas y barra de
   formato en una sola fila que se desliza. */
html.aria-lujo #fase4 > div{ gap:14px !important; padding:14px 18px 18px !important; }
/* las pestañas: un índice de libro */
html.aria-lujo #fase4 .doc-tabs{ display:flex; align-items:flex-end; gap:0 1.6rem !important; padding:0 .3rem !important; border-bottom:1px solid rgba(234,223,206,.10) !important;
  background:transparent !important; border-radius:0 !important; }
html.aria-lujo #fase4 .doc-tab{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:.55rem 0 .65rem !important;
  font-size:13px !important; letter-spacing:.01em; color:rgba(234,223,206,.6) !important; box-shadow:inset 0 -2px 0 transparent; transition:color 120ms linear, box-shadow 160ms linear; }
html.aria-lujo #fase4 .doc-tab:hover{ color:#EADFCE !important; box-shadow:inset 0 -2px 0 rgba(234,223,206,.25); }
html.aria-lujo #fase4 .doc-tab.doc-tab--on{ color:#FFFFFF !important; box-shadow:inset 0 -2px 0 #006D82 !important; }
html.aria-lujo #fase4 .doc-bk{ margin-left:auto; align-self:center; padding:.3rem .7rem; border-radius:99px; border:1px solid rgba(234,223,206,.14);
  font-size:10px !important; letter-spacing:.16em; color:rgba(234,223,206,.7) !important; }
/* el panel de opciones */
html.aria-lujo #fase4 .doc-panel{ background:rgba(234,223,206,.022) !important; border:1px solid rgba(234,223,206,.08) !important; border-radius:18px !important;
  padding:18px 18px 8px !important; scrollbar-width:thin; scrollbar-color:rgba(234,223,206,.15) transparent; }
html.aria-lujo #fase4 .doc-grupo{ padding:0 0 16px !important; margin:0 0 16px !important; border-bottom:1px solid rgba(234,223,206,.07) !important; display:flex; flex-direction:column; gap:8px; }
html.aria-lujo #fase4 .doc-grupo:last-child{ border-bottom:0 !important; margin-bottom:0 !important; }
html.aria-lujo #fase4 .doc-tit{ display:flex; align-items:center; gap:.7rem; margin:0 0 2px !important; font-size:9.5px !important; letter-spacing:.22em !important;
  text-transform:uppercase; color:rgba(234,223,206,.55) !important; }
html.aria-lujo #fase4 .doc-tit::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(234,223,206,.14), transparent); }
html.aria-lujo #fase4 .doc-lbl{ font-size:11px !important; letter-spacing:.02em; color:rgba(234,223,206,.62) !important; margin:4px 0 -2px !important; }
html.aria-lujo #fase4 .doc-sel, html.aria-lujo #fase4 .doc-inp{ height:36px !important; border-radius:99px !important; background-color:rgba(234,223,206,.04) !important;
  border:1px solid rgba(234,223,206,.13) !important; color:#EADFCE !important; padding:0 .95rem !important; font-size:12.5px !important; box-shadow:none !important; width:100%; }
html.aria-lujo #fase4 .doc-sel:hover, html.aria-lujo #fase4 .doc-inp:hover{ border-color:rgba(234,223,206,.3) !important; }
html.aria-lujo #fase4 .doc-sel:focus, html.aria-lujo #fase4 .doc-inp:focus{ border-color:#006D82 !important; background-color:rgba(0,109,130,.08) !important; outline:0 !important; }
/* los interruptores: pastillas que se encienden en teal (siguen siendo casillas de verdad) */
html.aria-lujo #fase4 .doc-sw{ display:flex !important; align-items:center; justify-content:space-between; gap:.8rem; flex-direction:row-reverse;
  padding:7px 2px !important; font-size:12.5px !important; line-height:1.35; color:#EADFCE !important; cursor:pointer; }
html.aria-lujo #fase4 .doc-sw.hidden{ display:none !important; }
html.aria-lujo #fase4 .doc-sw input[type="checkbox"]{ -webkit-appearance:none; appearance:none; flex:none; width:34px; height:20px; margin:0; border-radius:99px; cursor:pointer;
  background:radial-gradient(circle at 10px 50%, rgba(234,223,206,.85) 6px, transparent 6.6px), rgba(234,223,206,.12);
  border:1px solid rgba(234,223,206,.16); transition:background-color 160ms ease, border-color 160ms ease; }
html.aria-lujo #fase4 .doc-sw input[type="checkbox"]:checked{ background:radial-gradient(circle at calc(100% - 10px) 50%, #FFFFFF 6px, transparent 6.6px), #006D82; border-color:#006D82; }
html.aria-lujo #fase4 .doc-sw input[type="checkbox"]:focus-visible{ outline:2px solid #006D82; outline-offset:2px; }
/* el botón que pliega el panel (sólo en angosto) */
html.aria-lujo #fase4 .doc-plegar{ height:40px; border-radius:99px !important; border:1px solid rgba(234,223,206,.14) !important; background:rgba(234,223,206,.03) !important;
  color:#EADFCE !important; font-size:12.5px !important; letter-spacing:.02em; padding:0 1rem !important; }
/* la hoja y su barra de formato */
html.aria-lujo #fase4 .doc-hoja{ background:transparent !important; scrollbar-width:thin; scrollbar-color:rgba(234,223,206,.18) transparent; }
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,.5) !important; margin:0 6px; }
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; }
/* el celular: opciones plegadas, pestañas y barra en una fila que se desliza */
@media (max-width:767px){
  html.aria-lujo #fase4 > div{ padding:10px 12px 14px !important; gap:10px !important; }
  html.aria-lujo #fase4 .doc-tabs{ overflow-x:auto; scrollbar-width:none; gap:0 1.2rem !important; flex-wrap:nowrap; }
  html.aria-lujo #fase4 .doc-tabs::-webkit-scrollbar{ display:none; }
  html.aria-lujo #fase4 .doc-tab{ flex:none; white-space:nowrap; }
  html.aria-lujo #fase4 .doc-panel{ padding:4px !important; border-radius:22px !important; }
  html.aria-lujo #fase4 .doc-panel .doc-plegar{ border:0 !important; background:transparent !important; width:100%; justify-content:space-between; }
  html.aria-lujo #fase4 .doc-panel__cuerpo{ padding:8px 12px 4px; }
  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; }
  html.aria-lujo #fase4 .doc-sw{ padding:9px 2px !important; font-size:13.5px !important; }
}
/* 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) el panel de opciones plegado es sólo su pastilla (sin caja dentro de caja),
   y la barra de formato va en una fila que se desliza si no cabe */
@media (max-width:1023px){
  html.aria-lujo #fase4 .doc-panel{ background:transparent !important; border:0 !important; padding:0 !important; border-radius:0 !important; }
  html.aria-lujo #fase4 .doc-panel .doc-plegar{ width:100%; justify-content:space-between; background:rgba(234,223,206,.03) !important; border:1px solid rgba(234,223,206,.12) !important; }
  html.aria-lujo #fase4 .doc-panel__cuerpo:not(.hidden){ margin-top:10px; padding:16px 16px 6px; border:1px solid rgba(234,223,206,.08); border-radius:18px; background:rgba(234,223,206,.022); }
  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; }
}
/* en el celular el nombre del lugar se pisaba con «Estado»: en esa pantalla se omite */
@media (max-width:767px){ html.aria-lujo .lujo-nav__lugar{ display:none !important; } }
/* 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); }
/* entre 1024 y ~1280 px el documento pasaba a columna: el panel arriba a todo lo alto y la hoja
   aplastada a 32 px («en un tamaño desaparece»). Desde 1024 px, siempre lado a lado. */
@media (min-width:1024px){
  html.aria-lujo #docDocumento{ flex-direction:row !important; }
  html.aria-lujo #docDocumento > #docPanel{ width:300px !important; flex:0 0 300px !important; min-height:0; }
  html.aria-lujo #docDocumento > .doc-hoja{ flex:1 1 auto !important; min-width:0; min-height:0; }
  html.aria-lujo #docPanel #btnDocPanel{ display:none !important; }
  html.aria-lujo #docPanel #docPanelCuerpo{ display:block !important; }
}
@media (min-width:1024px) and (max-width:1279px){
  html.aria-lujo #docDocumento > #docPanel{ width:260px !important; flex-basis:260px !important; }
}

/* 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__tit{ margin:4px 0 0; font-size:11px; color:rgba(234,223,206,.62); }
html.aria-lujo #fase4 .doc-rt__nueva{ display:flex; gap:6px; }
html.aria-lujo #fase4 .doc-rt__nueva .doc-inp{ flex:1; min-width:0; }
html.aria-lujo #fase4 .doc-rt__bt{ flex:none; height:36px; padding:0 .9rem; border-radius:99px; background:#005565; color:#FFFFFF; border:0; font-size:12px; cursor:pointer; }
html.aria-lujo #fase4 .doc-rt__cats{ display:flex; flex-wrap:wrap; gap:6px; }
html.aria-lujo #fase4 .doc-rt__cat{ display:inline-flex; align-items:center; gap:6px; padding:.25rem .35rem .25rem .7rem; border-radius:99px; border:1px solid rgba(0,109,130,.6); font-size:12px; color:#EADFCE; }
html.aria-lujo #fase4 .doc-rt__cat button{ width:20px; height:20px; border-radius:99px; border:0; background:rgba(234,223,206,.08); color:#EADFCE; cursor:pointer; line-height:1; }
html.aria-lujo #fase4 .doc-rt__nada{ font-size:11.5px; color:rgba(234,223,206,.5); line-height:1.5; }
html.aria-lujo #fase4 .doc-rt__lineas{ display:flex; flex-direction:column; gap:8px; }
html.aria-lujo #fase4 .doc-rt__linea{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:#EADFCE; }
html.aria-lujo #fase4 .doc-rt__linea .doc-sel{ height:32px !important; font-size:12px !important; }

/* ── 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:600;
  color:#EADFCE; transition:background-color .15s;
}
.supl-fila:hover{ background:rgba(234,223,206,.08); }
.supl-fila--volver{ color:#D9A441; display:flex; align-items:center; gap:6px; }
.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); }
.supl-nota--mal{ color:#E5857F; }

/* «Sobrescribir», con el mismo vidrio que los botones de la franja y la letra en blanco. Estaba en
   ámbar sólido con la letra en tinta: al lado de los otros tres botones de la franja gritaba, y
   el texto apenas se leía sobre ese fondo (Luis, 2026-09-23).
   VA SOBRE LA FOTOGRAFÍA, así que estos valores son los mismos en los dos temas — el tema claro
   no entra en la franja. */
html.aria-lujo #faseNav.lujo-nav .perfil__grupo #saveSlot button.sv-over{
  background-color:rgba(20,29,39,.58) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
}
html.aria-lujo #faseNav.lujo-nav .perfil__grupo #saveSlot button.sv-over:hover{
  background-color:rgba(0,85,101,.85) !important;
  border-color:rgba(255,255,255,.55) !important;
}

/* LA CONSOLA APAGADA MANDA SOBRE LA FRANJA (2026-09-23).
   `consola.css` esconde las piezas de la consola con `[data-consola="apagada"]` y un
   `display:none !important`, y «Generar correo» ya estaba en esa lista. Pero más arriba,
   dentro de dos `@media`, esta hoja le da `display:inline-flex !important` a todos los
   botones de la franja —para que no se partan en dos filas— y, como se carga DESPUÉS,
   ganaba: el botón seguía a la vista con la consola apagada. Se repite la orden acá, al
   final, para que la última palabra sea la de la consola. */
html.aria-lujo [data-consola="apagada"] #faseNav .perfil__grupo > #btnEmail,
html[data-consola="apagada"].aria-lujo #faseNav .perfil__grupo > #btnEmail{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   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 con sus escuchadores;
   sólo se ve el del idioma ACTIVO, que es el que dice en qué idioma se está —y al tocarlo
   cambia al otro, porque el JavaScript alterna la clase `on` entre los dos. */
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 móvil no entra: su acomodo es otro y lo gobierna `aria-movil.css`. */
@media (min-width:768px){
  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. */
/* EL RÓTULO DEL LUGAR, PEGADO 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í»).
   Va a la DERECHA DE LA LÍNEA y no al borde de la pantalla, por dos medidas tomadas en vivo:
     · alineado a la derecha se metía debajo de la cifra —el rótulo ocupa 208 px y la cifra
       empieza a 1.075: se pisaban—;
     · la línea mide 72 px desde el borde del título, así que a 88 px arranca justo después,
       con 16 de aire, y comparte con ella la misma línea base.
   Queda en la franja del `padding-bottom` del título, por debajo de su texto: no lo toca. */
/* LAS CUATRO REGLAS DE ARRIBA SE ACOTARON CON `:not(.hoja-inicio__tit > *)`. Colocaban el
   rótulo cuando colgaba de la banda de fotos —con `top` y hasta con `!important`— y le
   ganaban a este `bottom`, que lo mandaba 70 px por debajo de la línea, encima del buscador.
   Medido el 2026-09-23: el título acaba en 424 y el rótulo salía en 494. */
html.aria-lujo .hoja-inicio__tit > .lujo-banda__pie{
  position:absolute !important; left:88px !important; right:auto !important;
  top:auto !important; bottom:0 !important;
  position:absolute; left:88px; right:auto; bottom:0;
  height:3px; display:flex; align-items:center; justify-content:flex-start; z-index:1;
  pointer-events:none;
}
/* 88 px: la línea mide 72 y arranca en el borde del título, así que el rótulo empieza 16 px
   después de donde ella termina. No la pisa y comparte su línea base. */

/* ═══════════════════════════════════════════════════════════════════════════
   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. */
html.aria-lujo #home,
html.aria-lujo #home *,
html.aria-lujo .hoja-inicio__lista{
  scrollbar-width:none !important; -ms-overflow-style:none !important;
}
html.aria-lujo #home::-webkit-scrollbar,
html.aria-lujo #home *::-webkit-scrollbar,
html.aria-lujo .hoja-inicio__lista::-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;
  margin:64px calc(50% - 50vw) 0; padding:clamp(190px,26vw,340px) 24px clamp(48px,6vw,86px);
  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); } }

/* ═══════════════════════════════════════════════════════════════════════════
   43 · LA FRANJA DE FASES, ENCAJADA (Luis, 2026-09-24)
   ───────────────────────────────────────────────────────────────────────────
   «Esto es un reacomodo, pero las cosas no calzan milimétricamente de una fase a la otra:
   debes encajarlas. Y al final mantener la posibilidad de mover, porque me gustaría pulir.
   El nombre de la foto, en la fase 5 lo puse a la izquierda: ahí debe estar en todas.»

   Acomodó las cinco fases a mano y mandó los cinco volcados. Medida la franja real al lado,
   resultó que las cinco YA eran idénticas —paso a paso en (22, 99), botones de la fase en
   (22, 159), Estado en 1268, Autoevaluación 1422, Versiones 1468—: lo que no calzaba no era
   una fase contra otra, sino el ANCHO del grupo de botones, que va de 303 px en la fase 2 a
   1285 en la 3. Por eso en la 3 tuvo que meter el paso a paso en el hueco que dejaban.

   ── LO QUE PIDEN LOS CINCO VOLCADOS A LA VEZ ────────────────────────────────────────────
   1 · ESTADO, AUTOEVALUACIÓN Y VERSIONES SUBEN A LA LÍNEA DE LA BARRA. Los puso en y 12–26
       —centro 42, la mitad exacta de los 84 de la barra— en las cinco. La franja se extiende
       por DETRÁS de la barra (`padding-top: alto-barra + 14`), y a la derecha de los botones
       circulares esa banda está vacía: eso es lo que ocupó. Y explica por qué en la misma
       tanda corrió la barra entera a la izquierda — les estaba haciendo sitio.
   2 · EL PASO A PASO Y LOS BOTONES DE LA FASE BAJAN A UNA SOLA LÍNEA AL PIE. Hoy viven en
       dos renglones distintos (y 99 y 159); él los junta en y 180–194, las cinco veces.
   3 · EL PASO A PASO AL CENTRO, LOS BOTONES A LA DERECHA.
   4 · EL RÓTULO DE LA FOTO, A LA IZQUIERDA. Dicho con todas sus letras.

   ── EL PASO A PASO NO SE MUEVE NUNCA ──────────────────────────────────────────────────
   «Las fases deben estar exactamente en el mismo lugar que las demás; por eso reajusté
   botones yo.» Con una rejilla `1fr auto 1fr` el paso a paso quedaba centrado sólo cuando los
   botones de la fase le dejaban sitio: si no, la rejilla lo empujaba a la izquierda —a 1024 px
   iba de x 178 a 313 según la fase—. Ahora es al revés: el paso a paso se ancla al centro
   de la franja con un ancho fijo y los botones se acomodan a él. Si caben a su derecha, van
   en su misma línea; si no, suben un renglón, siempre contra el borde derecho. Quién cabe y
   quién no lo mide `aria-lujo.js` en vivo (`data-apretada`), porque depende de la fase, del
   idioma y del ancho, y ningún número escrito aquí acertaría en los tres.

   Autoevaluación y Versiones van centrados como pareja, que es la regla estable; él los dejó
   unos 32 px más a la derecha, y ese resto es lo que se pule con la herramienta de acomodo,
   que se queda puesta a propósito.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  html.aria-lujo #faseNav.lujo-nav{
    /* Las piezas del pie ocupan todo el ancho y comparten la celda: cada una se alinea sola
       —el paso a paso al centro, los botones a la derecha—, así ninguna empuja a la otra.
       Las tres columnas de la derecha son sólo para la fila de la barra: Autoevaluación,
       Versiones y el Estado, uno al lado del otro.
       Tres filas: la de la barra, la de los botones cuando suben, y la del pie. */
    grid-template-columns:minmax(0,1fr) auto auto auto !important;
    grid-template-rows:var(--alto-barra) minmax(0,1fr) auto !important;
    row-gap:0 !important; column-gap:10px !important;
    /* 4 px al pie deja el paso a paso en y 167, donde Luis lo puso en las cinco fases
       (166–168) con la franja de 218. */
    padding:0 22px 4px !important; align-content:stretch !important;
  }
  /* EL PASO A PASO, CLAVADO AL CENTRO Y SIEMPRE DEL MISMO ANCHO. Su ancho natural cambia con
     el dato de cada paso (396 a 408 px medidos), y centrado eso lo corría unos píxeles de una
     fase a otra. Con 424 px fijos —el más ancho medido y un margen— la cápsula es la misma
     en las cinco y los pasos se centran dentro de ella. */
  html.aria-lujo #faseNav.lujo-nav > .perfil__pasos{
    grid-column:1 / -1 !important; grid-row:3 !important; align-self:end !important; justify-self:center !important;
    min-width:424px !important; justify-content:center !important; }
  /* Los botones de la fase: en la línea del pie, contra el borde derecho… */
  html.aria-lujo #faseNav.lujo-nav > .perfil__grupo{
    grid-column:1 / -1 !important; grid-row:3 !important; align-self:end !important; justify-self:end !important;
    flex-wrap:nowrap !important; min-width:0 !important; max-width:100% !important; }
  /* …y un renglón arriba cuando ahí tocarían el paso a paso. */
  html.aria-lujo #faseNav.lujo-nav[data-apretada] > .perfil__grupo{ grid-row:2 !important; }
  /* En la línea del pie, 3 px por encima de la base del paso a paso: y 177, el valor que se
     repite en el rediseño de las cinco fases (176–178). */
  html.aria-lujo #faseNav.lujo-nav:not([data-apretada]) > .perfil__grupo{ margin-bottom:3px !important; }

  /* LA FASE 3: LAS ACCIONES AL BORDE, LAS HERRAMIENTAS A LA IZQUIERDA (Luis, 2026-09-24,
     rediseño de las cinco fases). Es la única con botones de más para un solo lado. Traer los
     cambios y Publicar van contra el borde derecho, como las acciones de todas las fases.
     Datos y Documento, a la izquierda: él los dejó en x 188, pero ahí los alcanza el nombre
     de la foto, que vive en esa misma altura y con el más largo del acervo («Caribe sur ·
     playa al atardecer») llega a x 250. Arrancan donde termina ese nombre más 14 px de aire
     —276 desde el borde de la franja, 254 desde su margen—, que es lo más cerca de donde él
     los puso sin que se toquen nunca. Cuándo cabe esto lo mide `aria-lujo.js` §9. */
  html.aria-lujo[data-fase-activa="3"] #faseNav.lujo-nav:not([data-apretada]) > .perfil__grupo[data-fase-botones="3"]{
    justify-self:stretch !important; display:grid !important; align-items:center !important;
    grid-template-columns:auto auto minmax(0,1fr) auto auto; column-gap:10px !important;
    padding-left:254px !important; }
  html.aria-lujo[data-fase-activa="3"] #faseNav.lujo-nav:not([data-apretada]) #btnDatosItin{ grid-column:1; grid-row:1; }
  html.aria-lujo[data-fase-activa="3"] #faseNav.lujo-nav:not([data-apretada]) #btnDocHerr{ grid-column:2; grid-row:1; }
  html.aria-lujo[data-fase-activa="3"] #faseNav.lujo-nav:not([data-apretada]) #btnDocReleer{ grid-column:4; grid-row:1; }
  html.aria-lujo[data-fase-activa="3"] #faseNav.lujo-nav:not([data-apretada]) #btnPublicar{ grid-column:5; grid-row:1; }
  /* LA ACCIÓN PRINCIPAL DE CADA FASE, SIEMPRE AL BORDE DERECHO. Es lo que dicen juntas las
     cinco fases del rediseño: Guardar en la 2, Publicar en la 3, Correo en la 4 y Calcular en
     la 5 quedan a la derecha del todo. En la 5 Calcular quedó solo (2026-09-24) y en las
     demás el orden del marcado ya lo deja ahí; la fase 3 se ordena con `order` porque su
     marcado trae Documento antes que Datos. */
  /* En la fase 3, el mismo orden de izquierda a derecha también cuando sus botones suben un
     renglón: Datos, Documento, Traer los cambios, Publicar (y la pastilla de publicado, si
     está). El marcado trae Documento antes que Datos porque `aria-lujo.js` lo cuelga ahí. */
  html.aria-lujo #faseNav.lujo-nav #btnDatosItin{ order:1; }
  html.aria-lujo #faseNav.lujo-nav #btnDocHerr{ order:2; }
  html.aria-lujo #faseNav.lujo-nav #btnDocReleer{ order:3; }
  html.aria-lujo #faseNav.lujo-nav #btnPublicar{ order:4; }
  html.aria-lujo #faseNav.lujo-nav #fase3Publicado{ order:5; }
  /* «Publicado para el cliente» sube a la línea de la barra, a la izquierda de Autoevaluación,
     como la dejó él. Cuelga de la franja por la derecha: 22 de margen + 142 del Estado (su
     selector tiene ancho fijo) + 34 + 34 de los dos botones + tres huecos de 10 = 262 px. */
  html.aria-lujo[data-fase-activa="3"] #faseNav.lujo-nav:not([data-apretada]) #fase3Publicado:has(.fase3-pub:not(.fase3-pub--vacio)){
    position:absolute !important; right:262px !important; top:calc((var(--alto-barra) - 34px) / 2) !important; }
  /* Y ahí arriba son dos círculos más de la fila, idénticos a Autoevaluación y Versiones (Luis,
     2026-09-24: «4 botones iguales y bien alineados con la misma separación»): 34 px, ícono de
     13 con el trazo de 1,6 y 10 px entre uno y otro, el mismo hueco de la rejilla de al lado. */
  html.aria-lujo[data-fase-activa="3"] #faseNav.lujo-nav:not([data-apretada]) #fase3Publicado .fase3-pub{ gap:10px !important; }
  html.aria-lujo[data-fase-activa="3"] #faseNav.lujo-nav:not([data-apretada]) #fase3Publicado .fase3-pub__bt{
    width:34px !important; height:34px !important; }
  html.aria-lujo[data-fase-activa="3"] #faseNav.lujo-nav:not([data-apretada]) #fase3Publicado .fase3-pub__bt svg{
    width:13px !important; height:13px !important; stroke-width:1.6; }
  /* ARRIBA, EN LA LÍNEA DE LA BARRA: AUTOEVALUACIÓN Y VERSIONES A LA PAR DEL ESTADO (Luis,
     2026-09-24: «esos dos botones deben estar a la par del botón de estado en todas las
     fases»). Antes colgaban del centro de la franja, lejos del Estado. Ahora son tres celdas
     seguidas de la misma rejilla, contra el borde derecho y separadas por su `column-gap`: si
     el Estado cambia de texto —Abierta, Propuesta enviada, Aceptada— y con eso de ancho, los
     dos botones se corren con él y nunca quedan tapados ni despegados. Van centrados en la
     fila de 84 px, la misma altura de los botones de la barra. */
  html.aria-lujo #faseNav.lujo-nav > #btnAutoeval{ grid-column:2 !important; grid-row:1 !important; align-self:center !important; }
  html.aria-lujo #faseNav.lujo-nav > #btnVersiones{ grid-column:3 !important; grid-row:1 !important; align-self:center !important; }
  html.aria-lujo #faseNav.lujo-nav > label{ grid-column:4 !important; grid-row:1 !important; align-self:center !important; margin:0 !important; }
  /* `#quoteAutor` nace vacío en la franja y sólo aportaba una columna de 0 px */
  html.aria-lujo #faseNav.lujo-nav > #quoteAutor{ display:none !important; }

  /* EL NOMBRE DE LA FOTO, EN LA ESQUINA DE ABAJO (Luis, 2026-09-24: «yo lo puse abajo en la
     esquina y casi llegando abajo; ajustalo en todas las fases»). En el rediseño de las cinco
     fases queda en y 195–200 de 218: 12 px del borde inferior. Ahí no lo alcanza nada: el paso a paso ya no se corre hacia la
     izquierda y los botones que no caben suben, no se extienden. El margen izquierdo es el de toda la franja, 22 px, el mismo
     del pie de estado que va encima. */
  html.aria-lujo #faseNav.lujo-nav .lujo-nav__lugar{ left:22px !important; right:auto !important; bottom:12px !important; }
  /* EL PIE DE ESTADO, EN LA BANDA LIBRE. La esquina de abajo es del nombre de la foto; justo
     debajo de la barra hay foto sin nada encima. Va a 96 px del borde para que quede un aire
     de 11 px sobre los botones cuando suben un renglón (y 133). */
  html.aria-lujo #faseNav.lujo-nav .lujo-nav__notas{ bottom:96px !important; max-width:46% !important; }
  /* Cuando los botones van en la línea del pie, la banda de encima queda libre y el pie de
     estado se centra justo sobre el paso a paso (Luis lo dejó en y 140–141 en el rediseño de
     las cinco fases). Si los botones suben un renglón, esa banda es de ellos y el pie vuelve a
     la izquierda. */
  html.aria-lujo #faseNav.lujo-nav:not([data-apretada]) .lujo-nav__notas{
    left:50% !important; transform:translateX(-50%); bottom:61px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   44 · ARIA EN EL CELULAR, EN LA MISMA DIRECCIÓN QUE EL ESCRITORIO (Luis, 2026-09-24)
   ───────────────────────────────────────────────────────────────────────────
   «Con el acomodo que ya tienes en modo escritorio puedes pulir el modo móvil en la misma
   dirección, siempre optimizando el espacio y ajustando el alto de la imagen, porque lo cambié
   en modo escritorio.»

   Medido a 375 px antes de tocar: la barra ocupaba 182 px en tres renglones (el idioma y el
   tema caían solos en el tercero); la franja medía 290, 341, 417, 340 y 335 según la fase;
   Estado, Autoevaluación y Versiones cambiaban de sitio en cada una, y en la 3 los botones se
   partían en dos renglones con el aviso de publicación metido en medio.

   LA MISMA GRAMÁTICA QUE EN ESCRITORIO, APILADA:
   · la barra: el logo y la pastilla de sesión arriba; los círculos juntos a la izquierda;
   · la foto, con el pie de estado centrado encima (en escritorio va justo sobre el paso a paso);
   · Autoevaluación, Versiones y el Estado, juntos y a la derecha, como en escritorio;
   · el paso a paso;
   · los botones de la fase a la derecha, con la acción principal en el borde.
   Todas las filas tienen alto fijo, así que la franja mide lo mismo en las cinco fases.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* ── LA BARRA, EN DOS RENGLONES ──
     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 así la pastilla sube junto al
     logo y los círculos bajan juntos. Las cinco columnas de 38 px son las de los círculos. */
  html.aria-lujo header.cab-marca .cab-marca__fila{
    display:grid !important; grid-template-columns:repeat(5, 38px) minmax(0,1fr);
    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; }
  html.aria-lujo header.cab-marca img.logo-marca{ grid-column:1 / 4; grid-row:1; height:28px !important; }
  html.aria-lujo header.cab-marca #ses-pastilla{ grid-column:4 / -1; grid-row:1; justify-self:end; }
  html.aria-lujo header.cab-marca .cab-marca__acc > :not(#ses-pastilla){ grid-row:2; }
  /* «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; }
  /* La barra flota sobre la franja (§32) y ahora comparte su segundo renglón con Autoevaluación
     y Versiones, que son de la franja: su hueco transparente se tragaba esos toques. Los toques
     atraviesan la barra y sólo sus piezas los reciben. */
  html.aria-lujo header.cab-marca{ pointer-events:none; }
  html.aria-lujo header.cab-marca .cab-marca__fila > *, html.aria-lujo header.cab-marca .cab-marca__acc > *{ pointer-events:auto; }

  /* ── LA FRANJA, EN DOS RENGLONES (Luis, 2026-09-24: «quedó súper mal: quiero que las fases
     estén centradas, y usas demasiadas líneas») ──
     La primera versión apilaba cinco renglones —la barra en dos, el trío de Estado, el paso a
     paso estirado de borde a borde y los botones— y tapaba casi toda la foto. Ahora son cuatro
     en total: Autoevaluación y Versiones suben al renglón de los círculos de la barra (en
     escritorio también comparten línea con la barra), el paso a paso va compacto y centrado, y
     el Estado comparte el último renglón con los botones de la fase. */
  html.aria-lujo #faseNav.lujo-nav{
    display:grid !important; grid-template-columns:auto minmax(0,1fr) !important;
    grid-template-rows:44px 38px !important; column-gap:8px !important; row-gap:12px !important;
    align-items:center !important; align-content:end !important; height:auto !important; min-height:0 !important;
    /* 56 px de foto limpia entre la barra y el paso a paso. */
    padding:calc(var(--alto-barra) + 56px) 16px 14px !important; }
  html.aria-lujo #faseNav.lujo-nav > .flex-1, html.aria-lujo #faseNav.lujo-nav > #quoteAutor{ display:none !important; }
  /* Autoevaluación y Versiones, en el renglón de los círculos de la barra, a la derecha: la
     barra mide 12 de margen + 38 + 10 + 38 + 12, así que ese renglón empieza 48 px antes de su
     borde de abajo, y un círculo de 34 va 2 px más abajo para quedar centrado. */
  html.aria-lujo #faseNav.lujo-nav > #btnAutoeval, html.aria-lujo #faseNav.lujo-nav > #btnVersiones{
    position:absolute !important; top:calc(var(--alto-barra) - 48px) !important; z-index:41;
    width:34px !important; height:34px !important; padding:0 !important; justify-content:center; border-radius:99px !important; }
  html.aria-lujo #faseNav.lujo-nav > #btnAutoeval{ right:60px !important; }
  html.aria-lujo #faseNav.lujo-nav > #btnVersiones{ right:16px !important; }
  html.aria-lujo #faseNav.lujo-nav > #btnAutoeval > span, html.aria-lujo #faseNav.lujo-nav > #btnVersiones > span{ display:none !important; }
  /* El paso a paso, compacto y centrado, en su renglón. */
  html.aria-lujo #faseNav.lujo-nav > .perfil__pasos{ grid-column:1 / -1; grid-row:1; justify-self:center;
    flex-wrap:nowrap !important; }
  /* Las líneas entre círculos, de 14 a 12 px: con «Calificación» al lado de su círculo la
     fase 1 medía 344, un píxel más que el ancho disponible. */
  html.aria-lujo #faseNav.lujo-nav .fase-btn:not(:first-child)::before{ width:12px !important; }
  /* El Estado, a la izquierda del último renglón: una píldora del ancho de su palabra más
     larga, sin la flecha ni el relleno que la hacían medir 178 px. La letra sigue en 16 px:
     con menos, el iPhone hace zoom al tocarla (aria-movil.css §4). */
  html.aria-lujo #faseNav.lujo-nav > label{ grid-column:1; grid-row:2; margin:0 !important; }
  html.aria-lujo #faseNav.lujo-nav > label > span{ display:none !important; }
  html.aria-lujo #faseNav.lujo-nav > label select{ height:38px !important; min-height:0 !important; border-radius:99px !important;
    -webkit-appearance:none; appearance:none; padding:0 8px !important; background-image:none !important; }
  /* Los botones de la fase, a la derecha, en círculos de 38 como los de la barra; la acción
     principal va en su color de siempre, que es lo que la distingue. Así entran junto al Estado
     en las cinco fases. El nombre sigue en el botón (tamaño de letra 0), así que el lector de
     pantalla lo dice igual. */
  html.aria-lujo #faseNav.lujo-nav > .perfil__grupo{ grid-column:2; grid-row:2; justify-self:end;
    flex-wrap:nowrap !important; gap:8px !important; }
  html.aria-lujo #faseNav.lujo-nav .perfil__grupo > button, html.aria-lujo #faseNav.lujo-nav .perfil__grupo #saveSlot button,
  html.aria-lujo #faseNav.lujo-nav .fase3-pub__bt{
    width:38px !important; height:38px !important; min-height:0 !important; padding:0 !important;
    border-radius:99px !important; display:inline-flex !important; align-items:center; justify-content:center;
    gap:0 !important; font-size:0 !important; flex:none; }
  html.aria-lujo #faseNav.lujo-nav .perfil__grupo #saveSlot{ gap:8px !important; }
  html.aria-lujo #faseNav.lujo-nav .perfil__grupo button svg, html.aria-lujo #faseNav.lujo-nav .fase3-pub__bt svg{
    width:16px !important; height:16px !important; }
  /* La fase 3 publicada: la pastilla de publicado queda en sus dos círculos (copiar, abrir), sin
     la frase, y va al PRINCIPIO: Publicar, la acción principal, sigue en el borde. */
  html.aria-lujo #faseNav.lujo-nav .fase3-pub{ gap:8px !important; flex-wrap:nowrap !important; }
  html.aria-lujo #faseNav.lujo-nav .fase3-pub > span{ display:none !important; }
  /* Ya publicada, la fase 3 tiene seis botones y no entran junto al Estado: copiar y abrir suben
     a la banda de foto, arriba a la derecha —en escritorio también van en la línea de arriba—,
     y el pie de estado se corre a la izquierda para dejarles sitio. */
  html.aria-lujo #faseNav.lujo-nav #fase3Publicado:has(.fase3-pub:not(.fase3-pub--vacio)){
    position:absolute !important; top:calc(var(--alto-barra) + 9px) !important; right:16px !important; }
  html.aria-lujo #faseNav.lujo-nav:has(#fase3Publicado .fase3-pub:not(.fase3-pub--vacio)) .lujo-nav__notas{
    left:16px; transform:none; max-width:calc(100% - 132px); top:calc(var(--alto-barra) + 20px); }
  html.aria-lujo #faseNav.lujo-nav #btnDatosItin{ order:1; }
  html.aria-lujo #faseNav.lujo-nav #btnDocHerr{ order:2; }
  html.aria-lujo #faseNav.lujo-nav #btnDocReleer{ order:3; }
  html.aria-lujo #faseNav.lujo-nav #btnPublicar{ order:4; }
  /* Los avisos de estado salen de la fila de botones, como en escritorio: el pie de estado los
     muestra sobre la foto. Metidos entre los botones partían la fila de la fase 3. */
  html.aria-lujo #faseNav.lujo-nav #fase3Estado, html.aria-lujo #faseNav.lujo-nav #docEstado,
  html.aria-lujo #faseNav.lujo-nav #tsHint, html.aria-lujo #faseNav.lujo-nav #tsProgreso,
  html.aria-lujo #faseNav.lujo-nav #saveHint,
  html.aria-lujo #faseNav.lujo-nav #fase3Publicado:not(:has(.fase3-pub:not(.fase3-pub--vacio))){
    position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  /* El pie de estado, centrado en la banda de foto. */
  html.aria-lujo #faseNav.lujo-nav .lujo-nav__notas{
    position:absolute; left:50%; transform:translateX(-50%); top:calc(var(--alto-barra) + 20px);
    max-width:calc(100% - 32px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font:400 9.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.82);
    padding:3px 9px; border-radius:99px; background:rgba(26,38,51,.45); }
  html.aria-lujo #faseNav.lujo-nav .lujo-nav__notas:empty{ display:none; }
}