/* GENERADO por 5 herramientas/generar-tema-teal.py desde vivero-aria-lujo.css — NO SE EDITA A MANO.
   Es la misma hoja con la tinta cambiada por teal (54 colores traducidos); cada regla
   traducida lleva su gemela oscura para lo que va sobre la foto ([data-pz-foto]). Lo que
   el teal necesita de más va a mano en su archivo de ajustes. */
/* ═══════════════════════════════════════════════════════════════════════════
   ARIA · LA LÍNEA DE LUJO — COPIA PARA VIVERO (app7)
   (Original: app-agentecotizador/public/aria-lujo.css. Si allá cambia, se vuelve a copiar;
   lo propio de VIVERO va en vivero-lujo.css, que se carga después.)
   ───────────────────────────────────────────────────────────────────────────
   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:#005565; --suelo:#046477; --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 #006d82 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:#006d82; --hoja-honda:#EADFCE; --hoja-viva:#006D82; --hoja-fondo:#006d82;
  --hoja:linear-gradient(#006d82,#006d82); --hoja-luz:linear-gradient(transparent,transparent);
  background-color:#046477 !important; color:#EADFCE;
}
html.aria-lujo body[data-pz-foto]{--blanco:#222E3A;--suelo:#1A2633;--hoja-sombra:#005565;--hoja-fondo:#005565;--hoja:linear-gradient(#005565,#005565);background-color:#1A2633 !important}
/* 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:#046477; }
html.aria-lujo .doc-papel[data-pz-foto], html.aria-lujo .pagina[data-pz-foto], html.aria-lujo .ed-raiz[data-pz-foto]{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:#046477 !important; border-color:rgba(4,100,119,.14) !important; }
html.aria-lujo .ed-raiz input[data-pz-foto], html.aria-lujo .ed-raiz select[data-pz-foto], html.aria-lujo .ed-raiz textarea[data-pz-foto]{color:#1A2633 !important;border-color:rgba(26,38,51,.14) !important}
html.aria-lujo ::selection{ background-color:#006d82; color:#FFFFFF; }
html.aria-lujo [data-pz-foto]::selection{background-color:#005565}
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 *):not(#login-screen *){ background-color:#005565; }
html.aria-lujo .bg-white.bg-white:not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(#pantallaLogin *):not(#login-screen *)[data-pz-foto]{background-color:#222E3A}
html.aria-lujo [class*="bg-slate-900/"]{ background-color:rgba(4,100,119,.72) !important; }
html.aria-lujo [class*="bg-slate-900/"][data-pz-foto]{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:#046477 !important; }
html.aria-lujo .fase-btn:has(~ .fase-btn.fase-on) .fase-num[data-pz-foto]{color:#1A2633 !important}
html.aria-lujo .fase-btn.fase-on .fase-num{ background-color:#006d82 !important; border-color:#EADFCE !important; color:#FFFFFF !important; box-shadow:none !important; }
html.aria-lujo .fase-btn.fase-on .fase-num[data-pz-foto]{background-color:#005565 !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:#006d82 !important; background-image:none !important; color:#FFFFFF !important; border-color:#006d82 !important; box-shadow:none !important; }
html.aria-lujo [class*="bg-indigo-6"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *)[data-pz-foto], html.aria-lujo [class*="bg-indigo-7"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *)[data-pz-foto], html.aria-lujo [class*="bg-emerald-6"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *)[data-pz-foto], html.aria-lujo [class*="bg-emerald-7"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *)[data-pz-foto], html.aria-lujo [class*="bg-teal-6"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *)[data-pz-foto], html.aria-lujo [class*="bg-teal-7"]:not(.doc *):not(.doc-papel *):not(.ed-raiz *)[data-pz-foto]{background-color:#005565 !important;border-color:#005565 !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:#006d82; color:#FFFFFF; }
html.aria-lujo input[type="file"]::file-selector-button[data-pz-foto]{background-color:#005565}

/* ── 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:#006d82 !important; border-color:#006d82 !important; color:#FFFFFF !important; }
html.aria-lujo .bt-enviar[data-pz-foto], html.aria-lujo .interruptor[aria-checked="true"][data-pz-foto], html.aria-lujo .doc-bt[data-pz-foto], html.aria-lujo .com-sw[aria-pressed="true"][data-pz-foto], html.aria-lujo [class*="bg-deep"][data-pz-foto]{background-color:#005565 !important;border-color:#005565 !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(#login-screen *):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(#login-screen *):not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(.border-0):not(.bg-transparent),
html.aria-lujo body select:not(#pantallaLogin *):not(#login-screen *):not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(.border-0):not(.bg-transparent){
  background-color:#0b6576 !important; color:#EADFCE !important; border-color:rgba(234,223,206,.16) !important; }
html.aria-lujo body input:not(#pantallaLogin *):not(#login-screen *):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)[data-pz-foto], html.aria-lujo body textarea:not(#pantallaLogin *):not(#login-screen *):not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(.border-0):not(.bg-transparent)[data-pz-foto], html.aria-lujo body select:not(#pantallaLogin *):not(#login-screen *):not(.doc *):not(.doc-papel *):not(.ed-raiz *):not(.border-0):not(.bg-transparent)[data-pz-foto]{background-color:#2A3541 !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 *):not(#login-screen *):focus-visible, html.aria-lujo body textarea:not(#pantallaLogin *):not(#login-screen *):focus-visible,
html.aria-lujo body select:not(#pantallaLogin *):not(#login-screen *):focus-visible, html.aria-lujo body button:not(#pantallaLogin *):not(#login-screen *):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:#005565; color:#EADFCE; }
html.aria-lujo select option[data-pz-foto]{background-color:#222E3A}
html.aria-lujo input::placeholder, html.aria-lujo textarea::placeholder{ color:rgba(234,223,206,.70) !important; opacity:.75; }
html.aria-lujo input[type=checkbox], html.aria-lujo input[type=radio]{ accent-color:#006d82; }
html.aria-lujo input[type=checkbox][data-pz-foto], html.aria-lujo input[type=radio][data-pz-foto]{accent-color:#005565}
html.aria-lujo #tsBody input[type="checkbox"]{ background-color:#0b6576; accent-color:#006d82; }
html.aria-lujo #tsBody input[type="checkbox"][data-pz-foto]{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; }
.lujo-banda{ position:absolute; inset:-44px calc(50% - 50vw) 0; z-index:-1; overflow:hidden; isolation:isolate; }
.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; }
.lujo-banda__puntos{ display:flex; gap:6px; }
.lujo-banda__puntos i{ width:6px; height:6px; border-radius:99px; background-color:rgba(255,255,255,.45); transition:width .18s, background-color .12s linear; }
.lujo-banda__puntos i.activo{ width:18px; background-color:#FFFFFF; }
/* 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:#0b6576 !important; }
html.aria-lujo .hoja-inicio__buscar[data-pz-foto], html.aria-lujo .hoja-inicio__sel[data-pz-foto]{background-color:#2A3541 !important}
html.aria-lujo .hoja-inicio__lista{ background-color:#005565; border-top:1px solid #006D82; }
html.aria-lujo .hoja-inicio__lista[data-pz-foto]{background-color:#222E3A}
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:#0b6576 !important; }
html.aria-lujo .fila-cotiz:hover[data-pz-foto]{background-color:#2A3541 !important}
html.aria-lujo .hoja-inicio__paginas{ background-color:#005565; border-top-color:rgba(234,223,206,.16); }
html.aria-lujo .hoja-inicio__paginas[data-pz-foto]{background-color:#222E3A}

/* ── 8 · LA CONVERSACIÓN ─────────────────────────────────────────────────── */
html.aria-lujo #chat{ background-color:#046477; }
html.aria-lujo #chat[data-pz-foto]{background-color:#1A2633}
html.aria-lujo .msj__ast{ background-color:#006d82; color:#FFFFFF; }
html.aria-lujo .msj__ast[data-pz-foto]{background-color:#005565}
html.aria-lujo .msj--ia .burb{ background-color:#0b6576; color:#EADFCE; border-color:rgba(234,223,206,.16); }
html.aria-lujo .msj--ia .burb[data-pz-foto]{background-color:#2A3541}
html.aria-lujo .msj--yo .burb{ background-color:#006d82; color:#FFFFFF; }
html.aria-lujo .msj--yo .burb[data-pz-foto]{background-color:#005565}

/* ── 9 · TABLAS, DÍAS, CIFRAS, MODALES ──────────────────────────────────── */
html.aria-lujo thead th:not(.doc *):not(.doc-papel *):not(.ed-raiz *){ background-color:#005565 !important; color:rgba(234,223,206,.70) !important; border-bottom-color:#006D82 !important; }
html.aria-lujo thead th:not(.doc *):not(.doc-papel *):not(.ed-raiz *)[data-pz-foto]{background-color:#222E3A !important}
html.aria-lujo .dia-tarj{ background-color:#005565; }
html.aria-lujo .dia-tarj[data-pz-foto]{background-color:#222E3A}
html.aria-lujo .banda-cifras{ background-color:#006d82 !important; }
html.aria-lujo .banda-cifras[data-pz-foto]{background-color:#005565 !important}
html.aria-lujo .rec-parada{ background-color:#0b6576; }
html.aria-lujo .rec-parada[data-pz-foto]{background-color:#2A3541}
html.aria-lujo .rec-tramo svg, html.aria-lujo .rec-tramo i, html.aria-lujo .rec-tramo span{ background-color:#046477; }
html.aria-lujo .rec-tramo svg[data-pz-foto], html.aria-lujo .rec-tramo i[data-pz-foto], html.aria-lujo .rec-tramo span[data-pz-foto]{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(4,100,119,.62); }
html.aria-lujo [id$="Modal"] > div:not(.hidden)[data-pz-foto], html.aria-lujo .nc-hoja__caja[data-pz-foto]{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:#046477 !important; }
html.aria-lujo .ed-lienzo[data-pz-foto], html.aria-lujo .doc-hoja[data-pz-foto]{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:#005565; border-color:rgba(234,223,206,.16); }
html.aria-lujo .cal-grupo[data-pz-foto]{background-color:#222E3A}

@media (prefers-reduced-motion:reduce){
  .lujo-banda__foto, .lujo-banda__puntos i{ transition:opacity .12s linear; }
}

/* ── 12 · LA BARRA DE FORMATO, en tinta ──────────────────────────────────── */
html.aria-lujo .bf{ background-color:#005565; border-color:rgba(234,223,206,.16); }
html.aria-lujo .bf[data-pz-foto]{background-color:#222E3A}
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:#006d82; border-color:#006d82; color:#FFFFFF; }
html.aria-lujo .bf-bt--on[data-pz-foto]{background-color:#005565;border-color:#005565}
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:#005565; 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; }
html.aria-lujo .hoja-inicio__filtros[data-pz-foto]{background-color:#222E3A}
}
.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{ 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{ 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: foto + velo de tinta (≤ 45 %, desde el 45 % de la altura). */
.lujo-fase{ position:relative; flex:0 0 auto; height:150px; display:flex; align-items:flex-end; gap:24px;
  padding:0 clamp(16px,3vw,40px) 22px; overflow:hidden; isolation:isolate; border-bottom:1px solid #006D82; }
.lujo-fase[hidden]{ display:none; }
.lujo-fase[data-fase="3"], .lujo-fase[data-fase="4"]{ height:112px; padding-bottom:16px; }
.lujo-fase__fotos{ position:absolute; inset:0; z-index:-1; }
.lujo-fase__foto{ position:absolute; inset:0; background-size:cover; background-position:center 45%; opacity:0;
  transition:opacity .62s cubic-bezier(.22,.9,.24,1); }
.lujo-fase__foto.activa{ opacity:1; }
.lujo-fase__velo{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(26,38,51,0) 0%, rgba(26,38,51,0) 45%, rgba(26,38,51,.45) 100%); }
.lujo-fase__txt{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.lujo-fase__ojo{ font:400 11px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.80); }
.lujo-fase__tit{ margin:0; font:300 46px/1 var(--glare); letter-spacing:-.016em; color:#FFFFFF; }
.lujo-fase[data-fase="3"] .lujo-fase__tit, .lujo-fase[data-fase="4"] .lujo-fase__tit{ font-size:36px; }
.lujo-fase__cifras{ margin-left:auto; display:flex; gap:28px; align-items:flex-end; }
.lujo-fase__cifra{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; color:#FFFFFF; }
.lujo-fase__cifra b{ font:300 52px/.9 var(--glare); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.lujo-fase[data-fase="3"] .lujo-fase__cifra b, .lujo-fase[data-fase="4"] .lujo-fase__cifra b{ font-size:40px; }
.lujo-fase__cifra small{ font:400 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.80); }
.lujo-fase__estado{ font:300 22px/1.1 var(--glare); color:#FFFFFF; }
.lujo-fase__lugar{ position:absolute; right:clamp(16px,3vw,40px); top:14px; font:400 10px/1 var(--sans); letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.80); padding:5px 10px; border-radius:99px; background-color:rgba(26,38,51,.45); }
@media (max-width:700px){
  .lujo-fase{ height:112px; }
  .lujo-fase__tit{ font-size:32px; }
  .lujo-fase__cifra b{ font-size:36px; }
  .lujo-fase__cifras{ gap:16px; }
}

/* 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:#046477 !important; }
html.aria-lujo .ws-panel[data-pz-foto]{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:#006d82; }
html.aria-lujo #qualScore[data-pz-foto]{background-color:#005565}

/* Las secciones plegables: la ficha, las notas, las comisiones, la plantilla. */
html.aria-lujo #builderSection details.bg-white{ background-color:#005565 !important; border-color:rgba(234,223,206,.16) !important; border-radius:14px !important; }
html.aria-lujo #builderSection details.bg-white[data-pz-foto]{background-color:#222E3A !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:#006d82 !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__num[data-pz-foto]{background:#005565 !important}
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:#005565 !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[data-pz-foto]{background-color:#222E3A !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:#0b6576 !important; }
html.aria-lujo .ts-copiable:hover[data-pz-foto]{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:#0b6576; }
html.aria-lujo tbody tr:not(.doc *):not(.doc-papel *):not(.ed-raiz *):hover[data-pz-foto]{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:#005565; border:1px solid rgba(234,223,206,.16); border-radius:14px; }
html.aria-lujo .doc-panel[data-pz-foto]{background-color:#222E3A}
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; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA TABLA DE RESERVAS: QUE ENTRE, Y QUE EN EL TELÉFONO SEA UNA LÍNEA
   (Luis, 2026-09-23: «la tabla de reservas sigue con desplazamiento lateral en escritorio, y
   en el celular hace líneas con muchos datos, muy altas, se ve horrible»)
   ───────────────────────────────────────────────────────────────────────────
   Son TRECE columnas —BK, cliente, oficina, fechas y nueve cifras—, y trece no entran ni en un
   escritorio con el menú abierto ni, muchísimo menos, en una mano. Dos respuestas distintas
   para dos problemas distintos:
     · EN ESCRITORIO se aprieta: la letra baja a once, el aire de cada celda se reduce, las
       cifras no se parten nunca y los textos largos —cliente, oficina— se cortan con puntos
       suspensivos en vez de estirar su columna. Con eso la tabla cabe y el desplazamiento
       lateral desaparece. No se esconde ninguna columna: en el escritorio se ven las trece.
     · EN EL TELÉFONO la tabla deja de ser tabla. Cada reserva es UNA LÍNEA: el BK y el cliente
       a la izquierda, las fechas debajo en voz baja y la venta a la derecha. Las otras nueve
       cifras no desaparecen —viven en el detalle del BK, que es donde se estudian— y la fila
       entera ya abría ese detalle al tocarla.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ESCRITORIO: que quepan las trece ────────────────────────────────────────────────────── */
@media (min-width:901px){
  html.aria-lujo #fin-tabla-resumen{ table-layout:auto; width:100%; font-size:11px; }
  html.aria-lujo #fin-tabla-resumen th,
  html.aria-lujo #fin-tabla-resumen td{ padding:.45rem .38rem !important; }
  html.aria-lujo #fin-tabla-resumen th{ font-size:9.5px; letter-spacing:.04em; white-space:nowrap; }
  /* las cifras nunca se parten */
  html.aria-lujo #fin-tabla-resumen td.text-right,
  html.aria-lujo #fin-tabla-resumen td.font-mono{ white-space:nowrap; }
  html.aria-lujo #fin-tabla-resumen .fin-cell-money small{ font-size:8.5px; }
  /* los textos largos se cortan en vez de estirar su columna */
  html.aria-lujo #fin-tabla-resumen td:nth-child(2){ max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html.aria-lujo #fin-tabla-resumen td:nth-child(3){ max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* las fechas ya no exigen 150 px: con el guion en medio parten solas si hace falta */
  html.aria-lujo #fin-tabla-resumen th:nth-child(4),
  html.aria-lujo #fin-tabla-resumen td:nth-child(4){ min-width:0 !important; max-width:118px; white-space:normal; line-height:1.25; }
}

/* ── TELÉFONO Y TABLETA ANGOSTA: una línea por reserva ───────────────────────────────────── */
@media (max-width:900px){
  html.aria-lujo #fin-tabla-resumen thead{ display:none !important; }
  html.aria-lujo #fin-tabla-resumen,
  html.aria-lujo #fin-tabla-resumen tbody{ display:block !important; width:100% !important; }
  html.aria-lujo #fin-tabla-resumen tbody tr{
    display:grid !important; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:.1rem .8rem;
    padding:.85rem .95rem !important;
    border-bottom:1px solid rgba(234,223,206,.10) !important; }
  html.aria-lujo #fin-tabla-resumen tbody td{
    display:none !important; padding:0 !important; border:0 !important; }
  /* el BK */
  html.aria-lujo #fin-tabla-resumen tbody td:nth-child(1){
    display:block !important; grid-column:1; grid-row:1;
    font-size:.86rem; font-weight:700; }
  /* el cliente */
  html.aria-lujo #fin-tabla-resumen tbody td:nth-child(2){
    display:block !important; grid-column:1; grid-row:2;
    font-size:.76rem; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* las fechas, en voz baja */
  html.aria-lujo #fin-tabla-resumen tbody td:nth-child(4){
    display:block !important; grid-column:1; grid-row:3;
    font-size:.64rem; opacity:.55; letter-spacing:.02em; }
  /* la venta, a la derecha, ocupando las tres filas */
  html.aria-lujo #fin-tabla-resumen tbody td:nth-child(5){
    display:flex !important; align-items:center; justify-content:flex-end;
    grid-column:2; grid-row:1 / span 3; text-align:right !important; }
  html.aria-lujo #fin-tabla-resumen tbody td:nth-child(5) .fin-cell-money{ align-items:flex-end; }
  html.aria-lujo #fin-tabla-resumen tbody td:nth-child(5) small{ display:none; }
  /* la fila entera se toca y abre el detalle, donde están las otras nueve cifras */
  html.aria-lujo #fin-tabla-resumen tbody tr.fin-row-clickable{ cursor:pointer; }
  /* el mensaje de «sin resultados» vuelve a ocupar el ancho */
  html.aria-lujo #fin-tabla-resumen tbody tr td[colspan]{
    display:block !important; grid-column:1 / -1; text-align:center; }
  /* y el contenedor deja de desplazarse de lado */
  html.aria-lujo .fin-table-wrap{ overflow-x:hidden !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL RESUMEN, OTRA CAPA: QUE NO CANSE (Luis, 2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   No sobra información —no se quita ni un dato—, sobra RUIDO. Lo que cansaba, mirándolo:
     · cuatro cifras enormes del mismo tamaño, una al lado de la otra, peleando por la vista.
       Ninguna mandaba, así que había que leer las cuatro para saber cuál importa;
     · y nueve bloques encerrados —cuatro tarjetas y tres desgloses— cada uno con su borde, su
       fondo y su esquina redonda. Nueve recuadros en media pantalla es un tablero de ajedrez.
   La respuesta no es quitar sino ordenar:
     · la VENTA TOTAL manda: crece y las otras tres bajan un punto. Se lee una, no cuatro;
     · las tarjetas aflojan su caja —el borde baja a la mitad, el fondo casi desaparece— y
       ganan aire por dentro;
     · los tres desgloses PIERDEN la caja: se sostienen con un filete arriba, bajo su título, y
       cada línea se separa de la siguiente con un hilo apenas visible. La información queda
       igual de ordenada y el ojo descansa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* LAS CUATRO CIFRAS: una manda */
html.aria-lujo #view-resumen .fin-kpi{
  background:rgba(234,223,206,.016) !important;
  border-color:rgba(234,223,206,.05) !important;
  border-radius:14px !important;
  padding:1.05rem 1.15rem !important; }
html.aria-lujo #view-resumen .fin-kpi-label{
  font-size:8.5px !important; letter-spacing:.2em !important;
  color:rgba(234,223,206,.55) !important; margin-bottom:.35rem !important; }
html.aria-lujo #view-resumen .fin-kpi-value{
  font-size:23px !important; font-weight:300 !important; letter-spacing:-.01em !important;
  color:rgba(255,255,255,.92) !important; }
html.aria-lujo #view-resumen .fin-kpi-sub{
  font-size:9px !important; color:rgba(234,223,206,.45) !important; margin-top:.3rem !important; }
/* la primera —la venta total— es la que se lee primero */
html.aria-lujo #view-resumen .fin-kpi:first-child .fin-kpi-value{
  font-size:30px !important; color:#FFFFFF !important; }
html.aria-lujo #view-resumen .fin-kpi:first-child{
  background:rgba(234,223,206,.032) !important; border-color:rgba(234,223,206,.10) !important; }

/* LOS TRES DESGLOSES: sin caja, sostenidos por un filete */
html.aria-lujo #view-resumen .fin-desglose{
  background:transparent !important;
  border:0 !important; border-radius:0 !important;
  padding:0 !important; }
html.aria-lujo #view-resumen .fin-desglose-head{
  font-size:8.5px !important; letter-spacing:.22em !important;
  color:rgba(234,223,206,.55) !important;
  padding-bottom:.6rem !important; margin-bottom:.15rem !important;
  border-bottom:1px solid rgba(234,223,206,.12) !important; }
/* cada línea, separada por un hilo; la última sin él */
html.aria-lujo #view-resumen .fin-desglose-row{
  font-size:11.5px !important;
  padding:.5rem 0 !important;
  border-bottom:1px solid rgba(234,223,206,.055) !important; }
html.aria-lujo #view-resumen .fin-desglose-row:last-of-type{ border-bottom:0 !important; }
/* el rótulo se retira para que la cifra mande */
html.aria-lujo #view-resumen .fin-desglose-row > span:first-child{
  color:rgba(234,223,206,.62) !important; }
html.aria-lujo #view-resumen .fin-desglose-row > span:last-child{
  color:rgba(255,255,255,.94) !important; font-variant-numeric:tabular-nums; }

/* aire entre el bloque de cifras y el de desgloses, que venían pegados */
html.aria-lujo #view-resumen .fin-kpi:first-child{ margin-top:0; }
html.aria-lujo #view-resumen .fin-desglose{ margin-top:.35rem !important; }

/* el aviso de la sincronización, en voz baja */
html.aria-lujo #view-resumen #fin-resumen-banner{
  font-size:10px !important; color:rgba(234,223,206,.42) !important; line-height:1.6 !important; }

/* En el telefono las cifras no caben: a 30 y 23 px se salian de su tarjeta y quedaban
   cortadas a media cifra. Bajan de tamano y se ajustan al ancho disponible, sin perder la
   jerarquia —la venta total sigue siendo la mas grande—. */
@media (max-width:640px){
  html.aria-lujo #view-resumen .fin-kpi-value{ font-size:17px !important; letter-spacing:-.02em !important; }
  html.aria-lujo #view-resumen .fin-kpi:first-child .fin-kpi-value{ font-size:20px !important; }
  html.aria-lujo #view-resumen .fin-kpi{ padding:.85rem .9rem !important; min-width:0 !important; }
  html.aria-lujo #view-resumen .fin-kpi-label{ font-size:8px !important; letter-spacing:.14em !important; }
  html.aria-lujo #view-resumen .fin-kpi-sub{ font-size:8.5px !important; }
  html.aria-lujo #view-resumen .fin-desglose-row{ font-size:11px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOS NEUTROS QUE QUEDABAN (Luis, 2026-09-23: repaso de Finanzas y Operadores)
   ───────────────────────────────────────────────────────────────────────────
   El refresco anterior tradujo los neutros 200 y 300, pero la app usa 210 veces la escala de
   grises del framework y los tonos 400 a 600 —el texto secundario de casi todas las fichas—
   seguian saliendo en gris frio. Medido seccion por seccion aparecian como 172,168,160 /
   189,182,171 / 207,198,184, que no son la crema de la casa. Y en Actualizacion de proveedores
   habia ademas un azul violaceo (138,147,184) de la escala indigo.
   Se traducen todos a la crema con su opacidad, y los de color a la paleta: indigo y sky al
   teal, emerald a la salvia, amber al ocre. EL LOGIN QUEDA FUERA: no se toca.
   ═══════════════════════════════════════════════════════════════════════════ */
html.aria-lujo [class*="text-slate-4"]:not(.doc-papel *):not(#login-screen *),
html.aria-lujo [class*="text-slate-5"]:not(.doc-papel *):not(#login-screen *),
html.aria-lujo [class*="text-gray-4"]:not(.doc-papel *):not(#login-screen *),
html.aria-lujo [class*="text-gray-5"]:not(.doc-papel *):not(#login-screen *){ color:rgba(234,223,206,.58) !important; }
html.aria-lujo [class*="text-slate-6"]:not(.doc-papel *):not(#login-screen *),
html.aria-lujo [class*="text-slate-7"]:not(.doc-papel *):not(#login-screen *),
html.aria-lujo [class*="text-gray-6"]:not(.doc-papel *):not(#login-screen *){ color:rgba(234,223,206,.72) !important; }
html.aria-lujo [class*="text-slate-8"]:not(.doc-papel *):not(#login-screen *),
html.aria-lujo [class*="text-slate-9"]:not(.doc-papel *):not(#login-screen *){ color:rgba(255,255,255,.92) !important; }
/* los de color que quedaban sueltos */
html.aria-lujo [class*="text-indigo-"]:not(.doc-papel *):not(#login-screen *),
html.aria-lujo [class*="text-sky-"]:not(.doc-papel *):not(#login-screen *){ color:#2A93A8 !important; }
html.aria-lujo [class*="text-emerald-"]:not(.doc-papel *):not(#login-screen *){ color:#7D9B5B !important; }
html.aria-lujo [class*="text-amber-"]:not(.doc-papel *):not(#login-screen *){ color:#B8904F !important; }
/* y los fondos neutros que aun asomaban */
html.aria-lujo [class*="bg-slate-1"]:not(.doc-papel *):not(#login-screen *),
html.aria-lujo [class*="bg-slate-2"]:not(.doc-papel *):not(#login-screen *),
html.aria-lujo [class*="bg-gray-1"]:not(.doc-papel *):not(#login-screen *){ background-color:rgba(234,223,206,.05) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOS NUEVE ACENTOS, A LA PALETA (Luis, 2026-09-23 · repaso de Finanzas y Operadores)
   ───────────────────────────────────────────────────────────────────────────
   Perseguir íconos uno por uno era tratar el síntoma. La raíz está en nueve variables: cada
   tarjeta lleva una clase «fin-acc-…» que define --acc, y esas nueve venían con los colores
   crudos del framework —esmeralda #10b981, cielo #0ea5e9, violeta #8b5cf6, rosa #f43f5e…—,
   que no son de esta casa. Se redefinen las nueve de una vez, y con eso cae en su sitio todo
   lo que dependa de --acc, ahora y lo que se agregue mañana.
   El reparto sigue el sentido de cada cosa, no el nombre del color:
     · lo que ENTRA (ventas, cobrado, al día) → salvia;
     · lo que INFORMA (recibido, servicios, listas) → teal;
     · lo que ESPERA (pendiente, por pagar) → ocre;
     · lo que ALERTA (costos, diferencias) → el rojo de andamiaje, que sí está en el libro;
     · lo NEUTRO → crema.
   ═══════════════════════════════════════════════════════════════════════════ */
html.aria-lujo .fin-acc-emerald{ --acc:#7D9B5B !important; }   /* salvia: lo que entra */
html.aria-lujo .fin-acc-teal{    --acc:#7D9B5B !important; }
html.aria-lujo .fin-acc-sky{     --acc:#2A93A8 !important; }   /* teal: lo que informa */
html.aria-lujo .fin-acc-indigo{  --acc:#2A93A8 !important; }
html.aria-lujo .fin-acc-violet{  --acc:#2A93A8 !important; }
html.aria-lujo .fin-acc-amber{   --acc:#B8904F !important; }   /* ocre: lo que espera */
html.aria-lujo .fin-acc-rose{    --acc:#B8904F !important; }
html.aria-lujo .fin-acc-red{     --acc:#B3261E !important; }   /* rojo de andamiaje: lo que alerta */
html.aria-lujo .fin-acc-slate{   --acc:rgba(234,223,206,.72) !important; }

/* el pie de cada tarjeta venía en un gris de sistema (#94a3b8) */
html.aria-lujo .fin-kpi-sub{ color:rgba(234,223,206,.45) !important; font-weight:400 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAS TABLAS DE OPERADORES, QUE TAMBIEN ENTREN (Luis, 2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   Tres tablas seguian desplazandose de lado, y no por tener muchas columnas sino por vivir en
   columnas estrechas: «Ventas por proveedor» parte la pantalla en dos y mete ahi tablas de
   ocho y nueve columnas (778 y 833 px dentro de 456), y «Actualizacion de proveedores» tiene
   diez (1062 dentro de 758). Se aprietan con la misma receta que la de reservas: letra mas
   chica, menos aire por celda, las cifras sin partirse y los nombres cortados con puntos
   suspensivos en vez de estirar su columna.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  html.aria-lujo #fin-tabla-vp,
  html.aria-lujo #fin-tabla-vp-tipos,
  html.aria-lujo #fin-tabla-actualizacion{ table-layout:auto; width:100%; font-size:10.5px; }
  html.aria-lujo #fin-tabla-vp th, html.aria-lujo #fin-tabla-vp td,
  html.aria-lujo #fin-tabla-vp-tipos th, html.aria-lujo #fin-tabla-vp-tipos td,
  html.aria-lujo #fin-tabla-actualizacion th, html.aria-lujo #fin-tabla-actualizacion td{
    padding:.35rem .3rem !important; }
  html.aria-lujo #fin-tabla-vp th, html.aria-lujo #fin-tabla-vp-tipos th,
  html.aria-lujo #fin-tabla-actualizacion th{ font-size:9px; letter-spacing:.03em; white-space:nowrap; }
  html.aria-lujo #fin-tabla-vp td.text-right, html.aria-lujo #fin-tabla-vp-tipos td.text-right,
  html.aria-lujo #fin-tabla-actualizacion td.text-right,
  html.aria-lujo #fin-tabla-vp td.font-mono, html.aria-lujo #fin-tabla-vp-tipos td.font-mono,
  html.aria-lujo #fin-tabla-actualizacion td.font-mono{ white-space:nowrap; }
  /* el nombre no estira la columna */
  html.aria-lujo #fin-tabla-vp td:first-child,
  html.aria-lujo #fin-tabla-vp-tipos td:first-child,
  html.aria-lujo #fin-tabla-actualizacion td:first-child{
    max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html.aria-lujo #fin-tabla-actualizacion td:nth-child(2),
  html.aria-lujo #fin-tabla-actualizacion td:nth-child(3){
    max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* en el telefono, una linea por fila, como en reservas */
@media (max-width:900px){
  html.aria-lujo #fin-tabla-vp thead, html.aria-lujo #fin-tabla-vp-tipos thead,
  html.aria-lujo #fin-tabla-actualizacion thead{ display:none !important; }
  html.aria-lujo #fin-tabla-vp, html.aria-lujo #fin-tabla-vp tbody,
  html.aria-lujo #fin-tabla-vp-tipos, html.aria-lujo #fin-tabla-vp-tipos tbody,
  html.aria-lujo #fin-tabla-actualizacion, html.aria-lujo #fin-tabla-actualizacion tbody{
    display:block !important; width:100% !important; }
  html.aria-lujo #fin-tabla-vp tbody tr, html.aria-lujo #fin-tabla-vp-tipos tbody tr,
  html.aria-lujo #fin-tabla-actualizacion tbody tr{
    display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    gap:.1rem .7rem; padding:.7rem .9rem !important;
    border-bottom:1px solid rgba(234,223,206,.10) !important; }
  html.aria-lujo #fin-tabla-vp tbody td, html.aria-lujo #fin-tabla-vp-tipos tbody td,
  html.aria-lujo #fin-tabla-actualizacion tbody td{ display:none !important; padding:0 !important; border:0 !important; }
  html.aria-lujo #fin-tabla-vp tbody td:nth-child(1), html.aria-lujo #fin-tabla-vp-tipos tbody td:nth-child(1),
  html.aria-lujo #fin-tabla-actualizacion tbody td:nth-child(1){
    display:block !important; grid-column:1; grid-row:1; font-size:.84rem; font-weight:600; }
  html.aria-lujo #fin-tabla-vp tbody td:nth-child(2), html.aria-lujo #fin-tabla-vp-tipos tbody td:nth-child(2),
  html.aria-lujo #fin-tabla-actualizacion tbody td:nth-child(2){
    display:block !important; grid-column:1; grid-row:2; font-size:.72rem; opacity:.75; }
  html.aria-lujo #fin-tabla-vp tbody td:nth-child(5), html.aria-lujo #fin-tabla-vp-tipos tbody td:nth-child(4),
  html.aria-lujo #fin-tabla-actualizacion tbody td:nth-child(10){
    display:flex !important; justify-content:flex-end; grid-column:2; grid-row:1 / span 2; text-align:right !important; }
  html.aria-lujo #fin-tabla-vp tbody tr td[colspan], html.aria-lujo #fin-tabla-vp-tipos tbody tr td[colspan],
  html.aria-lujo #fin-tabla-actualizacion tbody tr td[colspan]{ display:block !important; grid-column:1 / -1; text-align:center; }
}

/* Las dos que faltaban en el telefono: «Reporte de ventas» apilaba sus nueve celdas y cada
   vendedor ocupaba cuatrocientos pixeles de alto; «Reporte para cotizaciones» hacia lo mismo
   con cinco. Mismo trato que las demas: una linea por fila, con el nombre a la izquierda y la
   cifra que importa a la derecha. */
@media (max-width:900px){
  html.aria-lujo #fin-tabla-ventas thead, html.aria-lujo #fin-tabla-cotizaciones thead{ display:none !important; }
  html.aria-lujo #fin-tabla-ventas, html.aria-lujo #fin-tabla-ventas tbody,
  html.aria-lujo #fin-tabla-cotizaciones, html.aria-lujo #fin-tabla-cotizaciones tbody{
    display:block !important; width:100% !important; }
  html.aria-lujo #fin-tabla-ventas tbody tr, html.aria-lujo #fin-tabla-cotizaciones tbody tr{
    display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    gap:.1rem .7rem; padding:.75rem .9rem !important;
    border-bottom:1px solid rgba(234,223,206,.10) !important; }
  html.aria-lujo #fin-tabla-ventas tbody td, html.aria-lujo #fin-tabla-cotizaciones tbody td{
    display:none !important; padding:0 !important; border:0 !important; }
  /* Ventas: el vendedor y su venta */
  html.aria-lujo #fin-tabla-ventas tbody td:nth-child(1){ display:block !important; grid-column:1; grid-row:1; font-size:.84rem; font-weight:600; }
  html.aria-lujo #fin-tabla-ventas tbody td:nth-child(2){ display:block !important; grid-column:1; grid-row:2; font-size:.7rem; opacity:.7; }
  html.aria-lujo #fin-tabla-ventas tbody td:nth-child(4){ display:flex !important; justify-content:flex-end; grid-column:2; grid-row:1 / span 2; text-align:right !important; }
  /* Cotizaciones: el BK, el cliente y el total */
  html.aria-lujo #fin-tabla-cotizaciones tbody td:nth-child(1){ display:block !important; grid-column:1; grid-row:1; font-size:.84rem; font-weight:600; }
  html.aria-lujo #fin-tabla-cotizaciones tbody td:nth-child(2){ display:block !important; grid-column:1; grid-row:2; font-size:.72rem; opacity:.78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html.aria-lujo #fin-tabla-cotizaciones tbody td:nth-child(3){ display:block !important; grid-column:1; grid-row:3; font-size:.64rem; opacity:.55; }
  html.aria-lujo #fin-tabla-cotizaciones tbody td:nth-child(4){ display:flex !important; justify-content:flex-end; grid-column:2; grid-row:1 / span 3; text-align:right !important; }
  html.aria-lujo #fin-tabla-ventas tbody tr td[colspan], html.aria-lujo #fin-tabla-cotizaciones tbody tr td[colspan]{
    display:block !important; grid-column:1 / -1; text-align:center; }
}
