/* ═══════════════════════════════════════════════════════════════════════════
   consola.css · la piel compartida de las dos consolas
   ───────────────────────────────────────────────────────────────────────────
   La especificación completa está en System/marca/sistema_de_diseno.md.
   Referencia viva y funcionando: System/demo_consolas.html.

   POR QUÉ ESTE ARCHIVO EXISTE
   index.html y admin.html no compartían ni una línea de estilo, y sus dos
   configuraciones de Tailwind ya habían divergido: `white` valía #FFFFFF en una
   y #0E3A44 en la otra. Cualquier corrección había que hacerla dos veces, y la
   segunda se olvidaba. Acá vive lo común; en cada archivo queda solo lo suyo.

   CÓMO SE REPARTE EL TRABAJO CON TAILWIND
   · Los COLORES los pone `tailwind.config` en cada archivo. Ahí no hay pelea de
     especificidad: la clase `bg-slate-100` sigue existiendo y sigue haciendo lo
     mismo, solo que ahora pinta el color correcto.
   · Todo lo demás —tipografía, radios, movimiento, componentes— vive acá.

   REGLA DE ORO DE ESTE CAMBIO
   No se toca ni una línea de JavaScript, ni un id, ni un atributo `name`. Las
   clases de las que el código depende siguen existiendo con su nombre:
     index → bg-white · copiar-preg · drop-target · fase-on · flex · hidden
              opacity-40 · ring-2 · shadow-sm · tab-hidden · text-indigo-600
              text-slate-500 · ts-copiada
     admin → active · hidden · panel · provGuestFitCb · tab
   Cambia cómo se ven. No cambia qué son.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LOS TOKENS ────────────────────────────────────────────────────────
   Copiados del libro de marca, p.16. doc.css los transcribe igual; acá se
   suben a :root para que los alcance toda la consola y no solo el documento. */
:root {
  --ink:#1A2633; --deep:#005565; --teal:#006D82; --green:#7D9B5B;
  --cream:#EADFCE; --blanco:#FFFFFF;

  --green-txt:#4C6636;   /* el verde legible. El de marca es SOLO relleno */
  --error:#B3261E;       /* andamiaje de sistema · NO-MARCA · nunca se imprime */
  --aviso:#8A6A2F;       /* ídem: la paleta no tiene ámbar y un aviso hace falta */

  --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);
  --cream-70:rgba(234,223,206,.70); --cream-30:rgba(234,223,206,.30);
  --cream-16:rgba(234,223,206,.16);
  --white-80:rgba(255,255,255,.80); --white-55:rgba(255,255,255,.55);

  /* Pilas de reserva autorizadas por la lámina A3. PP Fragment entra en cuanto
     haya licencia web; hasta entonces esto es PROVISIONAL y está declarado. */
  --glare:'PP Fragment Glare', Marcellus, Optima, Georgia, serif;
  --sans:'PP Fragment Sans', Figtree, Outfit, Inter, system-ui, 'Segoe UI', sans-serif;

  /* ── EL SUELO ES CASI BLANCO, NO CREMA ───────────────────────────────────
     CORRECCIÓN DE FONDO, hecha con el dato a la vista. Esta consola usaba el
     crema del libro de marca como SUELO, y era la única del ecosistema que lo
     hacía: app1 y app2 declaran `--bg-main: #f8f9fa` para el fondo y
     `--bg-content: #ffffff` para los paneles. El crema (#ede1cf) lo usan sólo
     como `--text-on-dark`, o sea el color que se apoya SOBRE el verde oscuro.

     No es un capricho de estilo: un suelo arena le baja el contraste a todo lo
     que se apoya encima, y esto es una herramienta que se mira ocho horas
     seguidas. El crema se queda donde el ecosistema lo pone —sobre el verde de
     la barra— y el suelo pasa a ser el mismo casi-blanco de las demás apps, que
     es además lo que hace que entrar a la consola desde app1 no se sienta como
     entrar a otro sistema.

     Dos pasos y no uno: `--suelo` es el fondo general y `--suelo-2` es el relleno
     de lo que se anida DENTRO de una hoja blanca (una tarjeta adentro de un
     panel). Con un solo tono, eso último desaparecía contra su propio
     contenedor. */
  --suelo:#F8F9FA; --suelo-2:#F1F3F5; --filete:#E5E7E9;

  /* ── LOS VERDES DE LA HOJA ────────────────────────────────────────────────
     La identidad de ARIA: la hoja que recibe la luz y la transforma. Estaban
     escritos a mano dentro del botón del login, que era el único sitio que los
     usaba; ahora que la consola entera los usa hay UNA definición y varios
     consumidores — el día que el verde cambie, cambia en un renglón.
     Van del verde hondo de la sombra al verde vivo donde pega la luz. */
  --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));
  /* La luz que llega: una banda clara que cruza. Va en su propia capa para
     poder tener su propio ritmo, distinto al del verde. */
  --hoja-luz:linear-gradient(105deg,transparent 38%,rgba(255,240,178,.30) 50%,transparent 62%);

  --r:14px; --r-s:9px;
  --sal:.34s cubic-bezier(.22,.9,.24,1);
  --lento:.62s cubic-bezier(.22,.9,.24,1);
  --tinta:120ms linear;
}

/* ── 2 · BASE ──────────────────────────────────────────────────────────────
   Suelo crema con texto tinta: 11,65:1, el mejor contraste del sistema. */
body{font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}

/* NI NEGRITA NI ITÁLICA. El manual solo contempla Light y Regular, así que el
   énfasis se hace con tamaño, color o versalita — nunca con peso. Esto captura
   de una vez los ~253 font-semibold y font-bold repartidos por los dos archivos
   sin tener que tocarlos uno por uno.

   POR QUÉ LA CLASE VA DUPLICADA. Tailwind por CDN inyecta su hoja al final del
   <head>, DESPUÉS de este archivo. Con la misma especificidad gana la última, y
   `.font-bold{font-weight:700}` de Tailwind se imponía sobre el 400 de acá.
   Escribir `.font-bold.font-bold` sube la especificidad de (0,1,0) a (0,2,0) y
   gana sin recurrir a !important, que dejaría el peso inanulable para siempre.
   El mismo motivo vale para los radios, las sombras y las versalitas de abajo. */
b,strong{font-weight:400}
i,em{font-style:normal}
.font-bold.font-bold,.font-semibold.font-semibold,.font-extrabold.font-extrabold,
.font-black.font-black,.font-medium.font-medium{font-weight:400}
.italic.italic{font-style:normal}

/* ── 4 bis · LOS TONOS 300–500 SON RELLENO, NO TEXTO ───────────────────────
   Es la ley de color por fondo del estándar dicha en términos de la rampa. El
   verde de marca (#7D9B5B, el 500) mide 2,38 sobre crema y 3,13 sobre blanco;
   el rosa 400 mide 2,81; el ocre 400 y 500 miden 3,81 sobre crema. De fondo de
   una pastilla son correctos —ahí el color de marca va entero, que es su sitio—;
   de letra no llegan nunca a 4,5.

   Se midieron los 25 elementos que usan estos tonos como texto en las dos
   consolas: los 25 están sobre fondo claro, ninguno sobre oscuro. Por eso la
   regla puede ser global en vez de andar escogiendo contenedores, y por eso
   arregla de una vez los diez «Resolver» de la cola de validación en lugar de
   uno — perseguirlos de a uno es como se coló el anterior.

   Cada familia cae en su tono legible: verde al 700 (`--green-txt`, 5,74 sobre
   crema), rojo al 600 (`--error`, 5,42), ocre al 600 (#765A28, 4,89). El ocre
   merece su nota: `--aviso` (#8A6A2F) pasa sobre BLANCO con 5,02 y falla sobre
   CREMA con 3,81, así que el token se queda como está para rellenos y filetes,
   pero el texto usa el 600, que aguanta los dos suelos.

   Y el alfa: Tailwind permite `text-amber-500/90`, y ese 10% de transparencia
   bajaba el aviso a 3,25. Diluir un color de texto de esta paleta nunca mejora
   nada porque ya está calibrada al límite, así que los modificadores `/NN` caen
   en la misma regla. */
.text-emerald-300.text-emerald-300,.text-emerald-400.text-emerald-400,
.text-emerald-500.text-emerald-500,.text-green-300.text-green-300,
.text-green-400.text-green-400,.text-green-500.text-green-500,
[class*="text-emerald-300/"][class*="text-emerald-300/"],
[class*="text-emerald-400/"][class*="text-emerald-400/"],
[class*="text-emerald-500/"][class*="text-emerald-500/"]{color:var(--green-txt)}

.text-rose-300.text-rose-300,.text-rose-400.text-rose-400,.text-rose-500.text-rose-500,
.text-red-300.text-red-300,.text-red-400.text-red-400,.text-red-500.text-red-500,
[class*="text-rose-300/"][class*="text-rose-300/"],
[class*="text-rose-400/"][class*="text-rose-400/"],
[class*="text-rose-500/"][class*="text-rose-500/"],
[class*="text-red-400/"][class*="text-red-400/"],
[class*="text-red-500/"][class*="text-red-500/"]{color:var(--error)}

.text-amber-300.text-amber-300,.text-amber-400.text-amber-400,
.text-amber-500.text-amber-500,.text-yellow-300.text-yellow-300,
.text-yellow-400.text-yellow-400,.text-yellow-500.text-yellow-500,
[class*="text-amber-300/"][class*="text-amber-300/"],
[class*="text-amber-400/"][class*="text-amber-400/"],
[class*="text-amber-500/"][class*="text-amber-500/"],
[class*="text-yellow-400/"][class*="text-yellow-400/"],
[class*="text-yellow-500/"][class*="text-yellow-500/"]{color:#765A28}
[class*="text-amber-600/"][class*="text-amber-600/"],
[class*="text-amber-700/"][class*="text-amber-700/"],
[class*="text-yellow-600/"][class*="text-yellow-600/"],
[class*="text-yellow-700/"][class*="text-yellow-700/"]{color:#5E4720}

h1,h2,h3,h4{font-family:var(--glare);font-weight:300;letter-spacing:-.012em}

::selection{background-color:var(--deep);color:#fff}

/* ── 3 · ICONOS ────────────────────────────────────────────────────────────
   Un <svg> sin ancho declarado ocupa su tamaño natural y parte el texto. Ya
   pasó tres veces durante el diseño. Se ata al contenedor, no a una clase que
   alguien tenga que acordarse de poner. Las reglas por clase de Lucide y las
   utilidades w-N/h-N de Tailwind ganan por especificidad y siguen mandando. */
button svg:not([class*="w-"]), a svg:not([class*="w-"]),
label svg:not([class*="w-"]){width:1.05em;height:1.05em;flex:none}
svg[width="0"]{width:0;height:0}

/* ── 4 · LA BARRA DE DESPLAZAMIENTO ────────────────────────────────────────
   Era gris de fábrica sobre una consola de marca. Si es inevitable, es diseño. */
*{scrollbar-width:thin;scrollbar-color:var(--ink-14) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background-color:var(--ink-14);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background-color:var(--teal)}
/* Sobre superficies oscuras, la piel se invierte */
.bg-slate-900 ::-webkit-scrollbar-thumb,.bg-ink ::-webkit-scrollbar-thumb{background-color:var(--cream-16)}

/* AVISO SOBRE LAS DIECISÉIS REGLAS `::-webkit-scrollbar-*` DE ESTE ARCHIVO:
   DESDE CHROMIUM 121 NO SE APLICA NINGUNA. Un scroller cuyo `scrollbar-width` o
   `scrollbar-color` no sean los iniciales ignora los pseudoelementos heredados de
   WebKit, y la línea de arriba se los pone a `*`. Medido: un contenedor de prueba
   da 10 px de barra (thin) con `scrollbar-color` teal/crema en efecto, mientras
   que el `border-radius:99px` del pulgar no pinta nada. Se conservan porque siguen
   sirviendo en navegadores viejos, pero NO son la palanca: la palanca es
   `scrollbar-color`, y la forma del pulgar la decide el sistema.

   LA CANALETA DEL DOCUMENTO. En Windows la barra no flota encima: ocupa 10 px
   reales y los resta del ancho del documento. Comprobado en la página desplegada
   forzando `html{overflow-y:scroll}` con la ventana en 1456 — la cabecera pasa a
   terminar en 1446, y esos 10 px los pinta el lienzo, que viene de <body> porque
   <html> es transparente: CREMA. Al lado de la banda de tinta eso es una tira
   clara pegada al filo, rematada por el pulgar, que el sistema dibuja con las
   puntas redondeadas. En el admin no se nota porque su barra superior ya es crema.

   HONESTIDAD SOBRE EL ALCANCE: ese mecanismo está PROBADO, pero no se consiguió
   dispararlo en la consola a ningún tamaño medido — su raíz es `h-screen`, así que
   `scrollHeight` siempre iguala a `clientHeight` y no hay barra de documento. La
   regla de abajo cierra el mecanismo por si aparece; no se ha verificado que sea
   la causa de lo que el usuario ve, y eso hay que decirlo.

   Se le quita la barra de documento a la consola, que no la necesita: el
   desplazamiento es interno. Sólo con altura suficiente para que la cabecera y la
   fila de fases no dejen al contenido sin sitio; por debajo vale más una barra fea
   que contenido inalcanzable. Verificado a 1456×780 y a 375×640: el documento no
   desborda y el contenedor interno sigue desplazándose. */
@media (min-height:420px){
  html:has(.cab-marca),html:has(.cab-marca)>body{overflow:hidden}
}

/* ── 5 · CAMPOS ────────────────────────────────────────────────────────────
   Antes: fondo #16242E y texto hueso, porque la consola era oscura. Con suelo
   crema eso queda ilegible al revés. Blanco con tinta, filete tenue, y el foco
   en deep con halo — el teal solo sobre crema da 4,54 y sobre tinta FALLA. */
input,textarea,select,
input.input,textarea.textarea{background-color:var(--blanco);color:var(--ink);
  border-color:var(--ink-14);border-radius:var(--r-s);
  font-family:var(--sans);font-weight:300;
  transition:border-color var(--tinta),box-shadow var(--tinta)}
input::placeholder,textarea::placeholder{color:var(--ink-70);opacity:.75}
select option{background-color:var(--blanco);color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--deep);
  box-shadow:0 0 0 3px rgba(0,85,101,.13)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--deep);
  background-color:var(--blanco);box-shadow:none}

/* Foco visible en todo lo pulsable. El estándar lo exige por escrito y
   admin.html lo anulaba con outline:none. */
:focus-visible{outline:2px solid var(--deep);outline-offset:2px;border-radius:3px}
.bg-slate-900 :focus-visible,[class*="bg-ink"] :focus-visible{
  outline-color:var(--teal);box-shadow:0 0 0 4px rgba(234,223,206,.22)}

/* ── 5 bis · TEXTO SOBRE RELLENO OSCURO ────────────────────────────────────
   La ley de color por fondo del estándar, hecha regla: un elemento con relleno
   oscuro lleva texto claro, venga la clase de texto que venga.

   Resuelve de una vez los 57 `text-bone` que viven sobre botones teal, avisos y
   cabeceras de tinta —y que al pasar el suelo a crema se habrían quedado con
   tinta sobre tinta— sin tocar ni una clase del marcado. Y cubre por adelantado
   cualquier relleno oscuro que se agregue después.

   La clase va doblada porque la hoja de Tailwind se inyecta al final y con la
   misma especificidad ganaría ella.

   Y alcanza a los DESCENDIENTES, porque el texto casi nunca está en el mismo
   nodo que el relleno: en un botón teal la etiqueta vive en un <span> con su
   propia clase de color, y sin esto se quedaba en tinta sobre teal (3,15).
   La salvedad es lo que hace que la regla no se pase de lista: cualquier
   descendiente que traiga SU PROPIA superficie clara queda fuera, para que una
   tarjeta blanca dentro de un panel oscuro conserve su texto oscuro. */
.tw-oscuro,
[class*="bg-indigo-6"][class*="bg-indigo-6"],[class*="bg-indigo-7"][class*="bg-indigo-7"],
[class*="bg-indigo-8"][class*="bg-indigo-8"],[class*="bg-indigo-9"][class*="bg-indigo-9"],
[class*="bg-sky-6"][class*="bg-sky-6"],[class*="bg-sky-7"][class*="bg-sky-7"],
[class*="bg-emerald-6"][class*="bg-emerald-6"],[class*="bg-emerald-7"][class*="bg-emerald-7"],
[class*="bg-emerald-8"][class*="bg-emerald-8"],
[class*="bg-red-6"][class*="bg-red-6"],[class*="bg-red-7"][class*="bg-red-7"],
[class*="bg-rose-6"][class*="bg-rose-6"],[class*="bg-rose-7"][class*="bg-rose-7"],
[class*="bg-amber-6"][class*="bg-amber-6"],[class*="bg-amber-7"][class*="bg-amber-7"],
[class*="bg-slate-8"][class*="bg-slate-8"],[class*="bg-slate-9"][class*="bg-slate-9"],
[class*="bg-ink"][class*="bg-ink"],[class*="bg-deep"][class*="bg-deep"]{color:#fff}

[class*="bg-indigo-6"] *,[class*="bg-indigo-7"] *,[class*="bg-indigo-8"] *,
[class*="bg-sky-6"] *,[class*="bg-sky-7"] *,
[class*="bg-emerald-6"] *,[class*="bg-emerald-7"] *,[class*="bg-emerald-8"] *,
[class*="bg-red-6"] *,[class*="bg-red-7"] *,[class*="bg-rose-6"] *,[class*="bg-rose-7"] *,
[class*="bg-amber-6"] *,[class*="bg-amber-7"] *,
[class*="bg-slate-8"] *,[class*="bg-slate-9"] *,[class*="bg-ink"] *,[class*="bg-deep"] *{
  color:#fff}
/* La salvedad: un descendiente con superficie propia clara recupera su texto. */
[class*="bg-indigo-6"] [class*="bg-white"],[class*="bg-ink"] [class*="bg-white"],
[class*="bg-slate-9"] [class*="bg-white"],[class*="bg-deep"] [class*="bg-white"],
[class*="bg-indigo-6"] [class*="bg-slate-50"],[class*="bg-ink"] [class*="bg-slate-50"],
[class*="bg-indigo-6"] [class*="bg-slate-100"],[class*="bg-ink"] [class*="bg-slate-100"],
[class*="bg-ink"] input,[class*="bg-ink"] textarea,[class*="bg-ink"] select,
[class*="bg-slate-9"] input,[class*="bg-slate-9"] textarea,[class*="bg-slate-9"] select{
  color:var(--ink)}

/* ── Y LO QUE VIVE DENTRO DE LA TARJETA CLARA TAMPOCO ESTÁ SOBRE EL VELO ──────
   La salvedad de arriba le devuelve la tinta a la TARJETA, y ahí se quedaba corta: el color no
   se hereda si otra regla alcanza al hijo directamente, y `[class*="bg-ink"] *` alcanza a TODOS
   —(0,1,0) contra la nada de un elemento sin clase—. Resultado medido en la ficha de servicio
   del admin: el párrafo se leía —tiene `text-slate-400`, que se remapea con (0,2,0)— y las
   negritas de adentro salían BLANCAS SOBRE LA TARJETA CLARA. La frase «Y hoy la base no cumple
   esa regla, a propósito» desaparecía entera; el dueño de producto la encontró seleccionando el
   texto con el mouse, que es la peor forma de enterarse.

   El modal es un VELO: `fixed inset-0 bg-ink/70`. Nada de su contenido se lee sobre él —se lee
   sobre la tarjeta blanca que va encima—, así que pintar de blanco a sus descendientes es
   correcto para el velo y equivocado para todo lo que la tarjeta contiene.

   `:not([class*="text-"])` es la mitad que hace que esto no se pase de lista: recupera sólo lo
   que NO trae color propio. Un `<b>` sin clase vuelve a tinta; un `text-red-500` conserva el
   rojo que la sección de tonos le calibró. Sin ese `:not`, esta regla (0,2,1) le ganaría por
   orden a los remapeos de la sección 4 bis —que son (0,2,0) y están más arriba en la hoja— y
   apagaría todos los colores de estado dentro de cualquier modal. */
[class*="bg-ink"] [class*="bg-white"] :not([class*="text-"]),
[class*="bg-ink"] [class*="bg-slate-50"] :not([class*="text-"]),
[class*="bg-ink"] [class*="bg-slate-100"] :not([class*="text-"]),
[class*="bg-slate-9"] [class*="bg-white"] :not([class*="text-"]),
[class*="bg-slate-9"] [class*="bg-slate-50"] :not([class*="text-"]),
[class*="bg-deep"] [class*="bg-white"] :not([class*="text-"]),
[class*="bg-deep"] [class*="bg-slate-50"] :not([class*="text-"]){
  color:var(--ink)}

/* ── LA LISTA ABIERTA DE UN DESPLEGABLE NUNCA ESTÁ SOBRE LA SUPERFICIE OSCURA ──
   Es la excepción de verdad de la regla de arriba, y se descubrió usándolo: en la ficha de
   proveedor del admin la lista de «Tipo» se abría con las opciones EN BLANCO SOBRE BLANCO, y
   sólo se leía la que el sistema operativo resaltaba en azul.

   La causa es de especificidad y no de color. El modal es `bg-ink/70`, así que sus descendientes
   caen bajo `[class*="bg-ink"] *` —(0,1,0)— que los pinta blancos para que se lean sobre el
   velo. La salvedad de arriba recupera `select`, y por eso el campo CERRADO se lee bien; pero un
   `option` es hijo del select y lo alcanza la misma regla, mientras que `select option` de la
   sección de campos sólo suma (0,0,2) y pierde. Fondo blanco de una regla, texto blanco de la
   otra.

   Y la excepción no es un parche: la lista desplegada la dibuja el sistema operativo en una
   ventana propia, fuera del documento. NUNCA está sobre el velo oscuro, así que heredar su color
   es incorrecto en todos los casos, no sólo en éste. Va por especificidad —(0,1,1) contra
   (0,1,0)— y no con `!important`, que es lo que pide el sistema de diseño. Cubre cualquier
   contenedor con clase de fondo, no sólo `bg-ink`: son 80 desplegables entre las dos consolas y
   25 contenedores oscuros, y enumerarlos uno por uno es donde se queda alguno afuera. */
[class*="bg-"] option,[class*="bg-"] optgroup,
[class*="bg-"] select option,[class*="bg-"] select optgroup{
  background-color:var(--blanco);color:var(--ink)}

/* ── 6 · BOTONES ───────────────────────────────────────────────────────────
   Había cuatro dialectos conviviendo: pastillas con filete y texto teal,
   rectángulos rellenos, enlaces disfrazados de botón. Se unifican en TRES, y
   se hace sobre las clases que el marcado ya trae, sin renombrar nada.

     · PRIMARIO   relleno Deep, texto blanco. Es la acción de la pantalla.
     · SECUNDARIO transparente con filete tenue y texto tinta.
     · PELIGRO    relleno del rojo de sistema, declarado no-marca.

   Todos son PASTILLA. El rectángulo con esquinas de 8 px era lo que hacía que
   la interfaz se leyera como plantilla; la pastilla es lo que el demo usa y lo
   que convive con la tipografía ligera del manual. */
button,.btn{font-family:var(--sans);font-weight:400;border-radius:99px;
  transition:background var(--tinta),border-color var(--tinta),color var(--tinta)}

/* Relleno de acento → primario. Cubre bg-indigo-*, bg-sky-*, bg-emerald-* */
button[class*="bg-indigo-6"],button[class*="bg-indigo-7"],
button[class*="bg-sky-6"],button[class*="bg-sky-7"],
a[class*="bg-indigo-6"],a[class*="bg-sky-6"]{
  padding:11px 22px;border:0;color:#fff}
button[class*="bg-emerald-6"],button[class*="bg-emerald-7"],a[class*="bg-emerald-6"]{
  padding:11px 22px;border:0;color:#fff}

/* Superficie clara con filete → secundario. Es el caso del botón de
   Autoevaluación: era una pastilla con filete y texto teal, que compite con el
   primario sin serlo. Pasa a filete tenue y texto tinta; el teal se reserva
   para lo activo, que es lo que dice la doctrina del acento. */
button[class*="bg-slate-5"],button[class*="bg-white"],button[class*="bg-slate-1"],
a[class*="bg-slate-5"],a[class*="bg-white"],a[class*="bg-slate-1"]{
  padding:10px 18px;border:1px solid var(--ink-14);background-color:transparent;color:var(--ink)}
button[class*="bg-slate-5"]:hover,button[class*="bg-white"]:hover,
button[class*="bg-slate-1"]:hover,a[class*="bg-slate-5"]:hover,a[class*="bg-white"]:hover{
  border-color:var(--deep);color:var(--deep);background-color:var(--ink-04)}

button[class*="bg-red-6"],button[class*="bg-rose-6"]{padding:11px 22px;border:0;color:#fff}

/* Un icono dentro de un botón acompaña; no compite. */
button i[data-lucide],a i[data-lucide]{opacity:.85}

/* EL ENVIAR del compositor. Circular, relleno Deep, la flecha centrada. */
.bt-enviar{position:absolute;right:8px;bottom:8px;width:38px;height:38px;padding:0;
  border:0;border-radius:99px;background:var(--deep);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  transition:background .18s,transform .18s}
.bt-enviar:hover{background:#00697C;transform:scale(1.06)}
.bt-enviar:disabled{opacity:.45;transform:none;cursor:default}
.bt-enviar svg{width:17px;height:17px}

/* BOTÓN MENOR. Para acciones secundarias que se usan una vez por cotización:
   la autoevaluación tenía el alto de un primario y pesaba más de lo que vale. */
.bt-menor{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font:300 12px/1 var(--sans);padding:6px 12px;border-radius:99px;
  background:transparent;border:1px solid var(--ink-14);color:var(--ink-70);
  cursor:pointer;transition:border-color .18s,color .18s}
.bt-menor:hover{border-color:var(--deep);color:var(--deep)}
.bt-menor svg{width:13px;height:13px}

/* El tic genérico de plantilla: un botón que se levanta al pasar el mouse. */
.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{transform:none}

/* ── 6 bis · HOJAS Y PANELES ───────────────────────────────────────────────
   La elevación es MATERIAL: suelo crema, hoja blanca. El filete de 1 px que
   traían las tarjetas sobra cuando el material ya las separa, y sumado al
   radio pequeño era lo que las hacía leerse como cajas de plantilla. */
[class*="bg-slate-50"][class*="rounded"],[class*="bg-white"][class*="rounded"]{
  border-color:transparent;border-radius:var(--r)}
section[class*="bg-slate-50"],div[class*="bg-slate-50"][class*="border"]{
  border-color:var(--ink-08)}

/* ── 6 ter · EL MODAL ──────────────────────────────────────────────────────
   Tres cosas estaban mal y las tres se notan al usarlo:

   · Se anclaba ARRIBA (`items-start`), así que al abrirse quedaba pegado bajo la
     cabecera fija y la primera línea se veía cortada. Va centrado.
   · Los botones vivían al final de un formulario de cincuenta campos: para
     guardar había que desplazarse hasta abajo cada vez. Ahora el pie queda FIJO.
   · Llevaba filete y esquinas de 16 px como cualquier tarjeta. Es la única
     superficie del producto con sombra real, y teñida de tinta, nunca negra. */
/* Un modal se abre ENCIMA de todo: por encima de la cabecera pegajosa (30) y
   por encima del riel (70). Estaban en 40 y la cabecera los recortaba arriba. */
[id$="Form"],#fotoFicha,#fichaImprimible{align-items:center!important;z-index:90!important}
#tokenGate{z-index:95!important}
[id$="Form"]>div,#fotoFicha>div,#fichaImprimible>div{
  border-radius:18px;border-color:transparent;
  box-shadow:0 30px 70px -18px rgba(26,38,51,.55);
  max-height:86vh;position:relative}

/* El título se queda arriba mientras el formulario se desplaza: en una ficha
   larga uno pierde de vista qué está editando. */
[id$="Form"]>div>h3:first-of-type{position:sticky;top:-24px;z-index:3;
  margin:-24px -24px 14px;padding:20px 24px 14px;background:var(--blanco);
  border-bottom:1px solid var(--ink-08);
  font:300 20px/1.2 var(--glare);letter-spacing:-.01em;color:var(--deep)}

/* EL PIE FIJO. Los márgenes negativos lo llevan a los bordes del panel, que
   tiene 24 px de relleno. Solo se aplica si el último bloque tiene botones:
   así no se pega una nota suelta al fondo. */
[id$="Form"]>div>*:last-child:has(button),
#fotoFicha>div>*:last-child:has(button){
  position:sticky;bottom:-24px;z-index:3;
  margin:18px -24px -24px;padding:16px 24px;
  background:var(--blanco);border-top:1px solid var(--ink-08)}

#tokenGate{background:rgba(26,38,51,.62)!important;backdrop-filter:blur(3px)}

/* ── 6 quater · ICONOS DE ACCIÓN EN LAS TABLAS ─────────────────────────────
   «Editar» y «Borrar» repetidos en cada fila son ruido: el ojo los lee cientos
   de veces sin necesitarlos y empujan las columnas que sí importan. */
.acc-ico{width:32px;height:32px;padding:0;border:0;border-radius:99px;
  background:transparent;color:var(--ink-70);display:inline-grid;place-items:center;
  cursor:pointer;transition:background .16s,color .16s;vertical-align:middle}
.acc-ico svg{width:16px;height:16px}
.acc-ico:hover{background:var(--ink-08);color:var(--deep)}
.acc-ico--del:hover{background:color-mix(in srgb,var(--error) 10%,transparent);color:var(--error)}
.acc-ico+.acc-ico{margin-left:2px}

/* ── 6 quinquies · BOTONES DE ARCHIVO ──────────────────────────────────────
   El selector de archivo del navegador se pinta con las clases del botón que lo
   envuelve, y quedaba con relleno teal y letra oscura encima. Letra blanca. */
input[type="file"]::file-selector-button{
  font:400 13px/1 var(--sans);padding:9px 16px;border:0;border-radius:99px;
  background:var(--deep);color:#fff;cursor:pointer;margin-right:12px;
  transition:background .18s}
input[type="file"]::file-selector-button:hover{background:#00697C}
input[type="file"]{font:300 13px/1.4 var(--sans);color:var(--ink-70);
  background:transparent;border:0;padding:0}
input[type="file"]:focus{box-shadow:none}

/* ── 7 · RADIOS ────────────────────────────────────────────────────────────
   Eran nueve valores puestos en momentos distintos. Tres con papel, más la
   pastilla. Se mapean las utilidades que ya están en el marcado. */
.rounded.rounded,.rounded-md.rounded-md,.rounded-lg.rounded-lg{border-radius:var(--r-s)}
.rounded-xl.rounded-xl,.rounded-2xl.rounded-2xl,.rounded-3xl.rounded-3xl{border-radius:var(--r)}
.rounded-full.rounded-full{border-radius:99px}

/* ── 8 · SUPERFICIES ───────────────────────────────────────────────────────
   La elevación es MATERIAL, no sombra: suelo crema, hoja blanca. Las sombras
   de Tailwind eran negro al 5% sobre casi negro y no pintaban nada; ahora
   pintarían de más sobre crema. Se apagan salvo la del modal. */
.shadow-sm.shadow-sm,.shadow.shadow,.shadow-md.shadow-md{box-shadow:none}
.shadow-lg.shadow-lg,.shadow-xl.shadow-xl,.shadow-2xl.shadow-2xl{box-shadow:0 30px 70px -18px rgba(26,38,51,.42)}

/* ── 9 · VERSALITAS ────────────────────────────────────────────────────────
   `tracking-wide` son 0,025em: un cuarto de píxel sobre 10 px, invisible. La
   versalita ampliada es EL recurso de énfasis del sistema, y necesita aire. */
.uppercase.uppercase{letter-spacing:.16em}
.tracking-wide.tracking-wide,.tracking-wider.tracking-wider,.tracking-widest.tracking-widest{letter-spacing:.18em}

/* ── 10 · TABLAS ───────────────────────────────────────────────────────────
   Sobre blanco, que es la superficie que el estándar reserva para datos densos.
   Cebra tenue, cabecera pegajosa, y números a la derecha y tabulados: en un
   catálogo de 769 servicios los precios se comparan en columna. */
table{font-family:var(--sans);font-weight:300}
thead th{position:sticky;top:0;background-color:var(--blanco);z-index:2;
  font-weight:400;letter-spacing:.18em;text-transform:uppercase;font-size:11px;
  color:var(--deep);border-bottom:1px solid var(--ink-14)}
tbody tr{transition:background .16s}
tbody tr:hover{background-color:rgba(0,85,101,.045)}
tbody td{border-bottom:1px solid var(--ink-08)}
.text-right.text-right,td.num,th.num{text-align:right}
.font-mono,.tabular-nums,td.num{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum"}

/* ── 10 bis · LA CABECERA DE MARCA ─────────────────────────────────────────
   Banda de tinta a todo el ancho. Es el 11% de superficie oscura que pide el
   ritmo del estándar y lo que impide que la pantalla sea un plano único de
   crema. Sobre tinta: cuerpo en hueso, títulos en blanco, versalitas al 70%. */
.cab-marca{background:var(--ink);color:var(--cream);padding:14px 22px;
  border-bottom:1px solid var(--cream-16)}
.cab-marca__fila{max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* EL LOGO, A SU MEDIDA. El archivo es 650×136, o sea 4,78:1, y el manual fija
   el mínimo en 120 px de ancho —25 px de alto—. El mínimo no es la medida
   correcta: es el punto donde el logo deja de leerse. A 34 px de alto son
   163 px de ancho, que es la altura del bloque de texto que tiene al lado
   (título 19 px + bajada 12,5 px) y hace que la marca converse con él en vez
   de colgar debajo.
   Sin altura declarada el <img> salía a su tamaño natural y se comía la
   cabecera. */
.logo-marca{height:34px;width:auto;display:block;flex:0 0 auto}
/* EL TÍTULO NO SE APLASTA. Con `flex:1` y el `min-w-0` de Tailwind, el medio se
   encogía hasta 26 px entre 700 y 880 px de ancho y el título quedaba en «Asi…».
   Con un mínimo de 232 px —lo que mide «Asistente de Cotización» a 21 px— la fila
   prefiere bajar los botones a un segundo renglón antes que cortar el título.
   La clase va doblada porque la hoja de Tailwind se inyecta después que ésta y
   `.min-w-0` le ganaba por orden a igual especificidad. */
.cab-marca__medio.cab-marca__medio{flex:1 1 232px;min-width:232px}
/* El título va solo: la bajada («Agente IA para vendedores · Constructor
   determinista») describía la herramienta a quien ya está dentro usándola. */
.cab-marca__tit{font:300 21px/1.2 var(--glare);letter-spacing:-.01em;color:#fff;margin:0}
.cab-marca__acc{display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:wrap}
/* EL MODELO EN USO, YA EN EL ADMIN. Sobre crema, así que tinta al 70% para la
   etiqueta y deep para el valor: es un dato que se consulta, no una alarma. El
   monoespaciado es del sistema —el identificador del modelo lleva barras, puntos
   y guiones, y en proporcional se lee como una sola mancha—. */
.modelo-uso{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70)}
.modelo-uso code{font:400 12px/1 ui-monospace,'Cascadia Mono',Consolas,monospace;
  letter-spacing:0;text-transform:none;color:var(--deep);
  background:var(--ink-04);border:1px solid var(--ink-14);
  border-radius:99px;padding:5px 11px}
.bt-cab{display:inline-flex;align-items:center;gap:7px;font:300 12.5px/1 var(--sans);
  padding:9px 14px;border-radius:99px;background:transparent;color:var(--cream-70);
  border:1px solid var(--cream-16);cursor:pointer;transition:all .18s;white-space:nowrap}
.bt-cab:hover{color:var(--cream);border-color:var(--cream-70)}
.bt-cab--icono{padding:9px;border-radius:99px}
.cab-marca__idioma{display:flex;gap:2px;border:1px solid var(--cream-16);border-radius:99px;padding:2px}
/* LA TECLA DE IDIOMA ERA UN RECTÁNGULO DENTRO DE UNA PASTILLA. El marcado viejo
   trae `rounded bg-white shadow-sm` en los botones ES/EN, y `.rounded.rounded`
   —doblada, (0,2,0)— le ganaba a `.cab-marca__idioma button` —(0,1,1)—: el chip
   activo salía con 9 px de radio y esquinas visibles, rodeado de pastillas
   perfectas. Se sube la especificidad a (0,3,0) y de paso se apaga la sombra,
   que sobre una banda de tinta no se ve pero sí ensucia el borde. */
.cab-marca__idioma button{font:300 11.5px/1 var(--sans);padding:6px 11px;border-radius:99px;
  background:transparent;color:var(--cream-70);border:0;cursor:pointer;transition:all .18s}
.cab-marca__idioma .rounded.rounded,.cab-marca__idioma .rounded-md.rounded-md,
.cab-marca__idioma .rounded-lg.rounded-lg{border-radius:99px}
.cab-marca__idioma .shadow-sm.shadow-sm,.cab-marca__idioma .shadow.shadow{box-shadow:none}
.cab-marca__idioma button.on{background:var(--cream);color:var(--ink)}
@media(max-width:640px){
  .cab-marca{padding:12px 16px}
  .cab-marca__medio{order:3;flex:1 1 100%}
  .cab-marca__tit{font-size:17px}
}

/* ── 11 · EL PASO A PASO DE LAS 4 FASES ────────────────────────────────────
   Rediseño (el anterior seguía leyéndose "básico" en producción, y en pantalla
   angosta las 4 celdas se partían en dos filas — pedido explícito del dueño de
   producto de que NUNCA pase, porque esto es justo lo que se ve embebido desde
   Claude). Los `data-fase`, `fase-btn` y `fase-on` no se tocan: el JS los usa
   exactamente igual. Lo que cambia es la FORMA: de cuatro celdas con rótulo
   siempre visible a un riel de nodos —como un wizard real, no una barra de
   pestañas— donde SÓLO la fase activa imprime su texto. Eso es lo que hace que
   la fila nunca se parta: cuatro círculos de 30px más UN texto, nunca cuatro. */
.perfil{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;
  background:var(--blanco);border-bottom:1px solid var(--ink-14);
  padding:14px 20px}
.perfil>.bt-menor{margin-right:0}
/* LOS BOTONES DE CADA FASE, mudados acá desde el título que cada sección tenía (pedido del
   dueño de producto: "el título no es necesario, quita campo"). Los tres grupos conviven en
   el DOM siempre —setFase() no se tocó— y CSS decide cuál se ve, leyendo el mismo
   `data-fase-activa` que ya pinta la Fase 3 compacta. */
.perfil__grupo{display:none;align-items:center;gap:8px;flex-wrap:wrap}
[data-fase-activa="2"] .perfil__grupo[data-fase-botones="2"],
[data-fase-activa="3"] .perfil__grupo[data-fase-botones="3"],
[data-fase-activa="4"] .perfil__grupo[data-fase-botones="4"],
[data-fase-activa="5"] .perfil__grupo[data-fase-botones="5"]{display:flex}

/* EL RIEL DE NODOS. Nunca envuelve: es la fila que tiene que caber siempre. */
.perfil__pasos{display:flex;align-items:center;flex:0 0 auto}
.fase-btn{display:flex;align-items:center;border:0;background:transparent;
  padding:0;cursor:pointer;position:relative}
/* El tramo de riel ENTRE dos nodos. Nace apagado (ink-14) y se llena de tinta
   profunda en cuanto la fase que sigue quedó atrás o es la actual — es la
   misma idea del filete que crecía, pero como tramo de un riel real y no una
   línea sobre una celda. `:has()` lee la posición contra el hermano `.fase-on`
   sin que el JS tenga que marcar "completada" en ningún lado. */
.fase-btn:not(:first-child)::before{content:'';width:26px;height:2px;
  background:var(--ink-14);margin:0 3px;flex:0 0 auto;transition:background var(--sal)}
.fase-btn.fase-on::before,
.fase-btn:has(~ .fase-btn.fase-on)::before{background:var(--deep)}
.fase-num{width:30px;height:30px;border-radius:99px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--blanco);color:var(--ink-70);
  border:2px solid var(--ink-14);font:400 13px/1 var(--sans);
  font-variant-numeric:tabular-nums;
  transition:background var(--sal),border-color var(--sal),color var(--sal),box-shadow var(--sal)}
.fase-btn:hover .fase-num{border-color:var(--deep);color:var(--deep)}
/* Completada: relleno deep sólido — se leyó, no hace falta volver. */
.fase-btn:has(~ .fase-btn.fase-on) .fase-num{background:var(--deep);border-color:var(--deep);color:#fff}
/* Activa: relleno TINTA con halo — es la que manda ahora mismo, se distingue
   de una completada por el color, no sólo por el anillo. */
.fase-btn.fase-on .fase-num{background:var(--ink);border-color:var(--ink);color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 13%,transparent)}
/* EL TEXTO: SÓLO el de la fase activa existe en pantalla. Las otras tres
   siguen en el DOM —setFase()/refrescarDatosDeFase() las necesitan ahí— pero
   sin ocupar sitio. Es la pieza que hace que el riel quepa siempre en una
   fila: el ancho ya no depende de cuatro rótulos, depende de uno. */
.fase-txt{display:none}
.fase-btn.fase-on .fase-txt{display:block;margin-left:12px;white-space:nowrap}
.fase-lbl{display:block;font:400 10.5px/1.15 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--deep)}
.fase-dato{display:block;font:300 16px/1.25 var(--glare);color:var(--ink);margin-top:1px}
.fase-sep{display:none}

/* Y LA BARRA DEL EDITOR, MÁS PRIETA. Sus estilos viven dentro de doc-editor.js; esta hoja se
   carga antes, así que las sobreescrituras van con la clase doblada para ganar en especificidad
   sin `!important` — la misma técnica que el resto del archivo. Se recorta relleno, no botones:
   todos los mandos siguen ahí, en una sola fila más baja. */
.ed-raiz .ed-barra{padding:.3rem .75rem;gap:.4rem}
.ed-raiz .ed-barra .ed-btn{padding:.25rem .55rem}

/* BUG REAL: EN MÓVIL EL EDITOR NO DEJABA VER NI TOCAR NADA (reportado por el dueño de
   producto ya en producción), resuelto primero escondiendo tira e inspector bajo este mismo
   punto de corte. El dueño de producto pidió más: que el inspector flote sobre el lienzo en
   vez de desaparecer (la referencia que dio, app8.html, resuelve exactamente esto con su
   panel de propiedades), y que la tira de páginas —ahora con miniatura real— se siga viendo
   siempre, sólo más angosta. Ese tratamiento entero se movió a doc-editor.js
   (`.ed-tira-col`, `.ed-fab`, `[data-panel]`, mismo punto de corte 1023px): necesita
   coordinarse con el botón flotante y con `panelAbierto()`, que son JavaScript del editor, y
   quedaba frágil partido entre dos archivos. Acá no queda nada que hacer para esto. */

/* ── 11 bis · LA CONVERSACIÓN ──────────────────────────────────────────────
   El hilo va sobre crema: es lo que permite que la burbuja blanca del asistente
   se lea COMO burbuja. Con el hilo en blanco, una burbuja blanca es invisible.
   Lo del vendedor en Deep relleno (blanco encima, 8,44:1); lo del asistente en
   blanco con filete y la estrella de marca al lado, solo en el primero de una
   tanda. Los mensajes seguidos del mismo lado cambian el redondeo interior. */
#chat{background:var(--suelo);display:flex;flex-direction:column;gap:4px}
.msj{display:flex;gap:11px;max-width:88%}
.msj+.msj{margin-top:3px}
.msj+.msj.nuevo{margin-top:16px}
.msj--ia{align-self:flex-start}
.msj--yo{align-self:flex-end;flex-direction:row-reverse}
.msj__ast{width:30px;height:30px;flex:0 0 30px;border-radius:99px;background:var(--ink);
  display:grid;place-items:center;color:var(--cream);margin-top:2px}
.msj__ast svg{width:17px;height:17px}
.msj:not(.nuevo) .msj__ast{visibility:hidden}
.msj__col{min-width:0;display:flex;flex-direction:column}
.msj--yo .msj__col{align-items:flex-end}
.burb{padding:13px 18px;font:300 15px/1.62 var(--sans);position:relative}
.burb__txt{white-space:pre-wrap;overflow-wrap:anywhere}
.msj--ia .burb{background:var(--blanco);color:var(--ink);border:1px solid var(--ink-14);
  border-radius:16px 16px 16px 6px}
.msj--ia:not(.nuevo) .burb{border-radius:6px 16px 16px 6px}
/* La luz cenital de 1 px arriba: el mismo recurso con el que la marca trata la
   fotografía, aplicado a una superficie de color. No se ve; se nota. */
.msj--yo .burb{background:var(--deep);color:#fff;border-radius:16px 16px 6px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.msj--yo:not(.nuevo) .burb{border-radius:16px 6px 6px 16px}
/* La marca de intención: punto y versalita, no una cápsula de color. */
.msj__marca{display:inline-flex;align-items:center;gap:6px;margin-bottom:9px;
  font:400 10.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.marca--ok{color:var(--green-txt)}
.marca--neutra{color:var(--ink-70)}
.marca--info{color:var(--deep)}
.marca--error{color:var(--error)}
.msj--yo .msj__marca{color:var(--white-80)}

/* ── 11 ter · EL RIEL DEL ADMIN ────────────────────────────────────────────
   Once pestañas en una fila con scroll se cortaban y no se sabía qué había
   detrás del borde. Pasan a un riel lateral oscuro con los destinos en cuatro
   grupos, que además aporta el 11% de superficie oscura del ritmo.

   Es FIJO, no pegajoso: sticky se despega y se vuelve a pegar según el alto del
   contenido, y ese es el movimiento raro al hacer scroll. Fixed no se mueve.
   Tres anchos —completo, iconos, oculto— y la elección se recuerda. */
:root{--riel:262px; --riel-min:74px}
[data-riel=min]{--riel:var(--riel-min)}
[data-riel=off]{--riel:0px}

.riel{position:fixed;left:0;top:0;bottom:0;width:var(--riel);z-index:70;background:var(--ink);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .32s cubic-bezier(.22,.9,.24,1)}
.riel__cab{display:flex;align-items:center;gap:11px;padding:22px 20px 20px;min-height:70px}
/* El logo completo cuando hay sitio; la estrella sola cuando el riel se contrae.
   No es el logo encogido —que el manual prohíbe— sino la versión simplificada
   que él mismo manda usar por debajo del mínimo de 120 px. */
/* En el riel hay 262 px menos 40 de margen: 222 px útiles. El logo los ocupa
   casi enteros —40 px de alto son 191 px de ancho— y deja 31 px de aire. El
   riel es una banda de tinta de piso a techo y su cabecera es lo primero que
   se mira: ahí la marca sí protagoniza. */
.riel__logo{height:40px;width:auto;display:block;transition:opacity .2s}
.riel__icono{width:30px;height:30px;display:none}
[data-riel=min] .riel__cab{justify-content:center;padding:22px 0 20px}
[data-riel=min] .riel__logo{display:none}
[data-riel=min] .riel__icono{display:block}

.riel__cuerpo{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 13px 12px}
.riel__g{margin-bottom:20px}
.riel__t{display:block;font:400 11px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-70);padding:0 0 9px 12px;white-space:nowrap}
[data-riel=min] .riel__t{display:none}
[data-riel=min] .riel__g{margin:0 0 10px;padding-bottom:10px;position:relative}
[data-riel=min] .riel__g+.riel__g::before{content:'';position:absolute;top:-10px;left:50%;
  transform:translateX(-50%);width:26px;height:1px;background:var(--cream-16)}

/* El destino. `tab` y `active` son las clases que mueve el JavaScript: no se
   renombran, solo cambia cómo se ven. El activo va en hueso relleno con tinta
   encima — la inversión más fuerte que permite la paleta. */
.riel .tab,.riel__ir,.riel__col{display:flex;align-items:center;gap:12px;width:100%;
  font:300 14.5px/1.25 var(--sans);text-align:left;padding:10px 12px;border:0;cursor:pointer;
  background:transparent;color:var(--cream-70);border-radius:10px;
  transition:background .18s,color .18s;text-decoration:none}
.riel .tab:hover,.riel__ir:hover,.riel__col:hover{background:rgba(234,223,206,.08);color:var(--cream)}
.riel .tab svg,.riel__ir svg,.riel__col svg{width:18px;height:18px;flex:0 0 18px}
.riel .tab .nm,.riel__ir .nm,.riel__col .nm{flex:1;white-space:nowrap;overflow:hidden;transition:opacity .2s}
.riel .tab.active{background:var(--blanco);color:var(--ink)}
.riel .tab.active::after{display:none}       /* el filete de la versión anterior */
.riel .tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;box-shadow:none}
[data-riel=min] .riel .tab .nm,[data-riel=min] .riel__ir .nm,[data-riel=min] .riel__col .nm{
  opacity:0;position:absolute;width:0;overflow:hidden}
[data-riel=min] .riel .tab,[data-riel=min] .riel__ir,[data-riel=min] .riel__col{
  width:44px;height:44px;margin:2px auto;padding:0;gap:0;justify-content:center;border-radius:12px}

.riel__pie{padding:10px 13px 14px;border-top:1px solid var(--cream-16);display:flex;
  flex-direction:column;gap:1px}
[data-riel=min] .riel__pie{padding:10px 0 14px}
[data-riel=min] .riel__col svg{transform:rotate(180deg)}

/* El lienzo se corre para dejar sitio al riel */
.lienzo{margin-left:var(--riel);transition:margin-left .32s cubic-bezier(.22,.9,.24,1);min-width:0}
.marco-admin{max-width:1240px;margin:0 auto;padding:0 34px 90px}

/* La barra superior, pegada arriba. Sutil: fondo crema con degradado a nada,
   filete de 1 px y nada más. Antes llevaba una lista de secciones idéntica en
   las once pantallas —o sea, cero información— y un botón que repetía el título
   de al lado. Queda el título, que es lo único que cambia. */
/* Sólida, sin degradado. El desvanecido de abajo dejaba ver el contenido
   pasando por debajo y se leía como suciedad, no como profundidad. El filete
   se queda: es lo que separa la cabecera del contenido.
   Y z-index 30, por DEBAJO de los modales, que van en 40: la cabecera estaba en
   60 y tapaba la parte de arriba de cada modal que se abría. */
.abar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:16px 0 13px;margin-bottom:24px;
  background:var(--suelo);
  border-bottom:1px solid var(--ink-14)}
.abar__tit{font:300 22px/1.2 var(--glare);letter-spacing:-.012em;color:var(--ink);margin:0}
/* Círculo perfecto con el icono centrado de verdad.
   Estaba descentrado por tres cosas que se suman y ninguna se ve sola: el botón
   heredaba `line-height` del cuerpo, el <svg> es en línea por defecto y arrastra
   el espacio del descendente tipográfico, y los saltos de línea del marcado
   metían nodos de texto dentro del contenedor. Se fija el alto de línea a cero,
   el SVG pasa a bloque y el centrado es explícito en los dos ejes. */
.abar__menu{display:none;width:38px;height:38px;flex:0 0 38px;
  align-items:center;justify-content:center;line-height:0;font-size:0;
  border-radius:99px;background:var(--blanco);border:1px solid var(--ink-14);
  color:var(--ink);cursor:pointer;padding:0;transition:border-color .18s,color .18s}
.abar__menu:hover{border-color:var(--deep);color:var(--deep)}
.abar__menu>*{display:block;width:17px;height:17px;flex:0 0 17px}
[data-riel=off] .abar__menu{display:inline-flex}

.velo-riel{display:none;position:fixed;inset:0;background:rgba(26,38,51,.55);z-index:65;
  opacity:0;transition:opacity .26s}
.velo-riel.on{display:block;opacity:1}

@media(max-width:1080px){
  :root{--riel:0px}
  .riel{width:284px;max-width:86vw;transform:translateX(-101%);
    transition:transform .32s cubic-bezier(.22,.9,.24,1);box-shadow:0 0 70px rgba(26,38,51,.42)}
  [data-riel=on] .riel{transform:none}
  [data-riel=min] .riel{width:284px;transform:translateX(-101%)}
  .lienzo{margin-left:0}
  .abar__menu{display:inline-flex!important}
  .marco-admin{padding:0 18px 70px}
  [data-riel=min] .riel .tab,[data-riel=min] .riel__ir{width:100%;height:auto;padding:10px 12px;
    gap:12px;justify-content:flex-start;border-radius:10px}
  [data-riel=min] .riel .tab .nm,[data-riel=min] .riel__ir .nm{opacity:1;position:static;width:auto}
  [data-riel=min] .riel__t{display:block}
  [data-riel=min] .riel__col{display:none}
}

/* ── 11 quater · EL CONSTRUCTOR ────────────────────────────────────────────
   La tarjeta de día y la línea de servicio. Hoja blanca sobre suelo crema, sin
   filete duro: el material ya las separa. Los números de precio van tabulados
   porque se comparan en columna, y el ámbar del precio negociado es andamiaje
   de sistema declarado —la paleta no tiene ámbar— así que se usa el ocre.

   Nada de esto cambia el marcado que renderDays() produce: solo lo viste. */
.dia-tarj{background:var(--blanco);border-radius:var(--r);padding:18px 20px;
  transition:box-shadow var(--sal)}
.dia-tarj+.dia-tarj{margin-top:12px}
.dia-tarj:hover{box-shadow:0 2px 14px -6px rgba(26,38,51,.22)}
/* El número del día, mismo lenguaje que .fase-num del riel de arriba (§11): una
   cifra en círculo, no una etiqueta en versalita — consistencia entre las dos
   piezas de la consola que cuentan un avance por pasos. */
.dia-tarj__num{width:26px;height:26px;border-radius:99px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--ink);color:#fff;
  font:400 12px/1 var(--sans);font-variant-numeric:tabular-nums}
/* El título del día, como un titular de verdad — Glare, sin caja — y no un campo de
   formulario más entre los demás controles de la fila. */
.dia-tarj__tit{display:block;width:100%;border:0;border-bottom:1px solid transparent;
  border-radius:0;background:transparent;padding:2px 0 6px;margin-bottom:4px;
  font:300 20px/1.3 var(--glare);letter-spacing:-.008em;color:var(--ink)}
.dia-tarj__tit::placeholder{color:var(--ink-70);opacity:.55;font-family:var(--sans)}
.dia-tarj:hover .dia-tarj__tit{border-bottom-color:var(--ink-14)}
.dia-tarj__tit:focus{outline:0;border-bottom-color:var(--deep)}
.svc-linea{padding:11px 0;border-top:1px solid var(--ink-08)}
.svc-linea:first-child{border-top:0}
.svc-etq{font:400 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70)}
/* el aviso de estancia que abarca varios días */
.svc-tramo{font:300 12px/1.4 var(--sans);color:var(--deep);
  background:color-mix(in srgb,var(--teal) 9%,transparent);
  border-radius:8px;padding:6px 10px;margin-bottom:8px}
/* Costo y margen del servicio (Fase 2, keepCost) — separado del resto del desglose de venta
   por un filete punteado, y el margen en deep: es el número que de verdad se viene a
   consultar acá, así que no puede tener el mismo peso visual que el subtotal. */
.ficha-margen{margin-top:6px!important;padding-top:6px;border-top:1px dashed var(--ink-14)}
.ficha-margen b{color:var(--deep);font-weight:400}
/* precios */
.precio-calc{font:400 13px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.precio-sig{font:300 11px/1 var(--sans);color:var(--ink-70)}
/* «SIN PRECIO» SE ESCRIBE COMO PALABRA Y NO COMO NUMERO. Es la celda de un combo de precio
   calculado al que le falta la tarifa de una linea: pintar ahi un cero formateado seria el
   peor final, porque un cero no se pregunta. En el ocre de aviso, que es el que esta consola
   usa para lo que hay que resolver -no en rojo: no esta roto, falta un dato-. */
.precio-sin{font:400 13px/1 var(--sans);color:var(--aviso);white-space:nowrap}
.campo-precio{width:5.5rem;border:1px solid var(--ink-14);border-radius:var(--r-s);
  padding:6px 9px;font:300 12.5px/1.2 var(--sans);text-align:right;
  font-variant-numeric:tabular-nums;background:var(--blanco);color:var(--ink)}
.campo-precio:focus{outline:0;border-color:var(--deep);box-shadow:0 0 0 3px rgba(0,85,101,.13)}
.campo-precio--manual{border-color:var(--aviso);color:var(--aviso);
  background:color-mix(in srgb,#8A6A2F 7%,var(--blanco))}
.marca-manual{font-size:11px;color:var(--aviso)}
.ico-accion{padding:5px;border-radius:99px;color:var(--ink-70);border:0;background:transparent;
  cursor:pointer;transition:color var(--tinta),background var(--tinta)}
.ico-accion:hover{color:var(--deep);background:var(--ink-04)}
.ico-accion--aviso{color:var(--aviso)}
.ico-accion--aviso:hover{color:#5E4720;background:color-mix(in srgb,#8A6A2F 10%,transparent)}

/* ── 11 quinquies · TABLAS DEL ADMIN ───────────────────────────────────────
   Cabecera pegajosa, versalitas en teal profundo, cebra tenue y números a la
   derecha y tabulados: en un catálogo de 769 servicios los precios se comparan
   en columna, y sin tabular no se puede. */
/* La tabla del demo: hoja blanca sin filete exterior, cabecera en versalitas
   teal pegada arriba, filas separadas por un filete tenue y no por una caja,
   y aire de sobra. La estructura básica con otro color no alcanzaba: lo que la
   hace legible es el ritmo vertical y que la cabecera no se pierda al bajar. */
.tcaja,[class*="overflow-x-auto"]:has(>table){background:var(--blanco);
  border-radius:var(--r);border:0}
table{border-collapse:separate;border-spacing:0}
table th.p-2,table td.p-2{padding:13px 14px}
thead th{padding:16px 14px 12px;background:var(--blanco);
  font:400 10.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--deep);border-bottom:1px solid var(--ink-14);white-space:nowrap}
thead th:first-child{padding-left:22px}
thead th:last-child{padding-right:22px}
tbody td{padding:13px 14px;border-bottom:1px solid var(--ink-08);vertical-align:middle}
tbody td:first-child{padding-left:22px}
tbody td:last-child{padding-right:22px}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(26,38,51,.018)}
tbody tr:hover{background:rgba(0,85,101,.05)}
td:has(> input[type="number"]),td.num,th.num{text-align:right}
table input,table select{font-size:13px;padding:7px 10px}
/* La columna de acciones no compite: se alinea a la derecha y no se parte. */
tbody td:has(.acc-ico){text-align:right;white-space:nowrap;width:1%}
thead th:last-child:has(+ *){text-align:right}
/* el contenedor con desplazamiento propio, con la barra de marca */
[class*="overflow-x-auto"]{scrollbar-width:thin;scrollbar-color:var(--teal) var(--cream)}
[class*="overflow-x-auto"]::-webkit-scrollbar{height:8px}
[class*="overflow-x-auto"]::-webkit-scrollbar-track{background:var(--suelo-2);border-radius:99px}
[class*="overflow-x-auto"]::-webkit-scrollbar-thumb{background:var(--teal);border-radius:99px;
  border:2px solid var(--cream)}

/* ── 11 sexies · LA BANDA DE CIFRAS ────────────────────────────────────────
   Los indicadores se miran a distancia y de un vistazo. Sobre crema competían
   con las tablas; sobre tinta la cifra manda. Es además el 11% de superficie
   oscura que el ritmo del estándar pide y que este panel no tenía.
   Sobre Ink: cuerpo en hueso, títulos en blanco, versalitas al 70%. */
.banda-cifras{position:relative;background:var(--ink);border-radius:var(--r);
  padding:26px 28px;overflow:hidden}
.banda-cifras::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 88% -20%, rgba(0,109,130,.28) 0, transparent 62%)}
.banda-cifras__g{position:relative;display:grid;gap:24px 30px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cifra-t{position:relative;min-width:0}
.cifra-t__k{font:400 11px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-70);margin:0 0 10px}
.cifra-t__u{font:300 17px/1 var(--sans);color:var(--cream-70);margin-left:3px}
/* TODO lo que caiga dentro de la banda lleva texto claro, venga con la clase que
   venga. El código emite `text-slate-400` y compañía en los avisos de estado —
   «Cargando…», «Muestra corta»— y sobre tinta eso es tinta sobre tinta.
   La clase va doblada porque la hoja de Tailwind se inyecta al final. */
.banda-cifras.banda-cifras,.banda-cifras.banda-cifras *{color:var(--cream)}
.banda-cifras.banda-cifras h4,.banda-cifras.banda-cifras .cifra-t__k,
.banda-cifras.banda-cifras [class*="text-["],.banda-cifras.banda-cifras .text-xs{
  color:var(--cream-70)}
/* la cifra grande manda: blanco puro y ligera */
.banda-cifras.banda-cifras [class*="text-2xl"],.banda-cifras.banda-cifras [class*="text-3xl"],
.banda-cifras.banda-cifras [class*="text-4xl"]{color:#fff;font-weight:300;letter-spacing:-.02em}

/* LA SALVEDAD, y es la que hace que la regla de arriba no se pase de lista.
   Un descendiente con SU PROPIA superficie clara —el aviso de «muestra corta»
   sobre ocre, la nota de ventana sobre tinte teal— conserva texto oscuro. Sin
   esto quedaba crema sobre claro: 1,01, que es el mismo error del principio en
   espejo. Se enuncia para TODOS los tintes 50 y 100 de una vez y no familia por
   familia: perseguirlo de a uno significa que el próximo aviso vuelve a fallar. */
.banda-cifras.banda-cifras [class*="bg-amber-50"],
.banda-cifras.banda-cifras [class*="bg-amber-100"],
.banda-cifras.banda-cifras [class*="bg-white"],
.banda-cifras.banda-cifras [class*="bg-slate-50"],
.banda-cifras.banda-cifras [class*="bg-slate-100"],
.banda-cifras.banda-cifras [class*="bg-emerald-50"],
.banda-cifras.banda-cifras [class*="bg-emerald-100"],
.banda-cifras.banda-cifras [class*="bg-red-50"],
.banda-cifras.banda-cifras [class*="bg-red-100"],
.banda-cifras.banda-cifras [class*="bg-rose-50"],
.banda-cifras.banda-cifras [class*="bg-rose-100"],
.banda-cifras.banda-cifras [class*="bg-indigo-50"],
.banda-cifras.banda-cifras [class*="bg-indigo-100"],
.banda-cifras.banda-cifras [class*="bg-sky-50"],
.banda-cifras.banda-cifras [class*="bg-sky-100"],
.banda-cifras.banda-cifras [class*="bg-green-50"],
.banda-cifras.banda-cifras [class*="bg-green-100"],
.banda-cifras.banda-cifras [class*="bg-yellow-50"],
.banda-cifras.banda-cifras [class*="bg-yellow-100"],
.banda-cifras.banda-cifras [class*="bg-orange-50"],
.banda-cifras.banda-cifras [class*="bg-orange-100"],
.banda-cifras.banda-cifras [class*="bg-teal-50"],
.banda-cifras.banda-cifras [class*="bg-teal-100"],
.banda-cifras.banda-cifras [class*="bg-cyan-50"],
.banda-cifras.banda-cifras [class*="bg-cyan-100"],
.banda-cifras.banda-cifras [class*="bg-blue-50"],
.banda-cifras.banda-cifras [class*="bg-blue-100"],
.banda-cifras.banda-cifras [class*="bg-gray-50"],
.banda-cifras.banda-cifras [class*="bg-gray-100"],
.banda-cifras.banda-cifras [class*="bg-stone-50"],
.banda-cifras.banda-cifras [class*="bg-stone-100"],
.banda-cifras.banda-cifras [class*="bg-neutral-50"],
.banda-cifras.banda-cifras [class*="bg-neutral-100"],
.banda-cifras.banda-cifras [class*="bg-zinc-50"],
.banda-cifras.banda-cifras [class*="bg-zinc-100"],
.banda-cifras.banda-cifras [class*="bg-violet-50"],
.banda-cifras.banda-cifras [class*="bg-violet-100"],
.banda-cifras.banda-cifras [class*="bg-purple-50"],
.banda-cifras.banda-cifras [class*="bg-purple-100"]{color:var(--ink)}
.banda-cifras.banda-cifras [class*="bg-amber-50"] *,
.banda-cifras.banda-cifras [class*="bg-amber-100"] *,
.banda-cifras.banda-cifras [class*="bg-white"] *,
.banda-cifras.banda-cifras [class*="bg-slate-50"] *,
.banda-cifras.banda-cifras [class*="bg-slate-100"] *,
.banda-cifras.banda-cifras [class*="bg-emerald-50"] *,
.banda-cifras.banda-cifras [class*="bg-emerald-100"] *,
.banda-cifras.banda-cifras [class*="bg-red-50"] *,
.banda-cifras.banda-cifras [class*="bg-red-100"] *,
.banda-cifras.banda-cifras [class*="bg-rose-50"] *,
.banda-cifras.banda-cifras [class*="bg-rose-100"] *,
.banda-cifras.banda-cifras [class*="bg-indigo-50"] *,
.banda-cifras.banda-cifras [class*="bg-indigo-100"] *,
.banda-cifras.banda-cifras [class*="bg-sky-50"] *,
.banda-cifras.banda-cifras [class*="bg-sky-100"] *,
.banda-cifras.banda-cifras [class*="bg-green-50"] *,
.banda-cifras.banda-cifras [class*="bg-green-100"] *,
.banda-cifras.banda-cifras [class*="bg-yellow-50"] *,
.banda-cifras.banda-cifras [class*="bg-yellow-100"] *,
.banda-cifras.banda-cifras [class*="bg-orange-50"] *,
.banda-cifras.banda-cifras [class*="bg-orange-100"] *,
.banda-cifras.banda-cifras [class*="bg-teal-50"] *,
.banda-cifras.banda-cifras [class*="bg-teal-100"] *,
.banda-cifras.banda-cifras [class*="bg-cyan-50"] *,
.banda-cifras.banda-cifras [class*="bg-cyan-100"] *,
.banda-cifras.banda-cifras [class*="bg-blue-50"] *,
.banda-cifras.banda-cifras [class*="bg-blue-100"] *,
.banda-cifras.banda-cifras [class*="bg-gray-50"] *,
.banda-cifras.banda-cifras [class*="bg-gray-100"] *,
.banda-cifras.banda-cifras [class*="bg-stone-50"] *,
.banda-cifras.banda-cifras [class*="bg-stone-100"] *,
.banda-cifras.banda-cifras [class*="bg-neutral-50"] *,
.banda-cifras.banda-cifras [class*="bg-neutral-100"] *,
.banda-cifras.banda-cifras [class*="bg-zinc-50"] *,
.banda-cifras.banda-cifras [class*="bg-zinc-100"] *,
.banda-cifras.banda-cifras [class*="bg-violet-50"] *,
.banda-cifras.banda-cifras [class*="bg-violet-100"] *,
.banda-cifras.banda-cifras [class*="bg-purple-50"] *,
.banda-cifras.banda-cifras [class*="bg-purple-100"] *{color:var(--ink)}
/* la banda de referencia bajo cada indicador */
.banda-cifras [class*="bg-slate-2"],.banda-cifras [class*="bg-slate-3"]{
  background-color:var(--cream-16)!important}
.banda-cifras [class*="bg-emerald"],.banda-cifras [class*="bg-sage"]{
  background-color:var(--green)!important}

/* Rótulo de sección: la versalita ampliada es EL recurso de énfasis del sistema. */
.et-sec{font:400 11px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--deep)}

/* ── 11 septies · EL RECORRIDO ─────────────────────────────────────────────
   El viaje como objeto. Cada parada es un ecosistema con sus noches; entre dos
   paradas va el traslado, con la línea que los une. Aparece solo cuando hay más
   de un ecosistema: con uno hay un destino, no un recorrido. */
.recorrido{margin-bottom:16px}
.rec-cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:11px;flex-wrap:wrap}
.rec-resumen{font:300 12.5px/1.3 var(--sans);color:var(--ink-70)}
.rec-cinta{display:flex;align-items:stretch;overflow-x:auto;padding-bottom:8px;
  scrollbar-width:thin;scrollbar-color:var(--teal) var(--cream)}
.rec-cinta::-webkit-scrollbar{height:6px}
.rec-cinta::-webkit-scrollbar-track{background:var(--suelo-2);border-radius:99px}
.rec-cinta::-webkit-scrollbar-thumb{background-color:var(--teal);border-radius:99px}
.rec-parada{flex:0 0 auto;min-width:132px;max-width:210px;background:var(--blanco);
  border-radius:var(--r);padding:13px 16px;display:flex;flex-direction:column;gap:5px}
.rec-parada__n{font:400 10.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--deep)}
.rec-parada__eco{font:300 16px/1.25 var(--sans);color:var(--ink);overflow-wrap:anywhere}
/* El traslado: la línea que une, con su modo. Si no hay servicio de traslado
   entre dos paradas no se inventa un tiempo — se dice que falta, que es dato. */
.rec-tramo{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;padding:0 14px;position:relative;min-width:96px}
.rec-tramo::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--ink-14)}
.rec-tramo svg,.rec-tramo i{position:relative;z-index:1;background:var(--suelo);
  padding:0 5px;color:var(--deep)}
.rec-tramo span{position:relative;z-index:1;background:var(--suelo);padding:2px 7px;
  font:400 10.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-70);text-align:center}
@media(max-width:640px){
  .rec-parada{min-width:118px;padding:11px 13px}
  .rec-parada__eco{font-size:14px}
  .rec-tramo{min-width:78px;padding:0 9px}
}

/* ── 11 octies · EL RITMO DEL DOCUMENTO ────────────────────────────────────
   Franja de UNA línea que dice si el documento cumple lo que el estándar del
   socio exige: que cada capítulo abra en A, que no haya dos A seguidas, que
   las C estén espaciadas y que las D vayan en un bloque al final. Antes tenía,
   además, una fila con una casilla por página — se quitó porque la tira del
   editor (`.ed-tira`, a la izquierda del documento) ya navega por página, con
   miniatura real; tenerlo dos veces sólo quitaba campo (pedido del dueño de
   producto: "esa fila de páginas... eso solo quita campo").
   El veredicto se dice con la PALABRA, no solo con color: el estándar prohíbe
   distinguir estados únicamente por tono. */
.espina-doc{padding:12px 14px;border-bottom:1px solid var(--ink-14);background:var(--blanco)}
.esp-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:9px;flex-wrap:wrap}
.esp-res{font:300 12.5px/1.3 var(--sans);color:var(--ink-70)}
.esp-ok{color:var(--green-txt)}
.esp-mal{color:var(--error)}
.esp-pie{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;
  font:300 11.5px/1.2 var(--sans);color:var(--ink-70)}
.esp-pie span{display:inline-flex;align-items:center;gap:6px}
.esp-m{width:9px;height:9px;border-radius:2px;display:inline-block}
.esp-m--A{background:linear-gradient(150deg,#3d6350 0,#1b2f2c 100%)}
.esp-m--B{background:var(--suelo-2);box-shadow:inset 0 0 0 1px var(--ink-14)}
.esp-m--C{background:var(--ink)}
.esp-m--D{background:var(--blanco);box-shadow:inset 0 0 0 1px var(--ink-14)}
.esp-fallas{margin:8px 0 0;padding:0 0 0 16px;font:300 12px/1.5 var(--sans);color:var(--error)}

/* ── 11 nonies · LA FASE 3 ─────────────────────────────────────────────────
   El editor del documento tenía tres cosas que lo hacían inusable:

   1. El panel de avisos ocupaba 11 rem FIJOS abajo. Con 35 avisos y la cabecera
      arriba, al documento le quedaba una franja donde no cabe ni una página. Y
      no se podía plegar: solo desplazarse dentro de él.
   2. La cabecera de la Fase 3 y la espina pesaban demasiado para lo que dicen.
   3. La espina de páginas no hacía nada al tocarla, aunque parecía que sí.

   Se arregla desde acá, sin tocar doc-editor.js: sus clases son estables y el
   plegado se hace con un atributo en la raíz. */

/* La cabecera de la Fase 3: más sutil. Era una franja con botones grandes que
   competía con el documento, que es lo único que importa en esa pantalla. */
/* ── EL AIRE DE ARRIBA, RECORTADO ──────────────────────────────────────────
   El dueño de producto lo dijo mirando la pantalla: «lo de arriba es demasiado, deja muy poco
   campo para la visualización de las páginas». Tenía razón y se puede contar: sobre el
   documento se apilan la cabecera global, estas tres franjas, la barra del editor y su pie. Al
   documento —lo ÚNICO que esa pantalla existe para mostrar— le quedaba una tira donde no cabe
   una página.
   No se quita información: se le quita relleno a lo que ya estaba, y lo que se lee una sola vez
   se pliega. Lo que se USA —los números de página, que son pulsables, y el veredicto de ritmo—
   se queda siempre a la vista. */
/* LA CABECERA VIEJA DE LA FASE 3 SE FUE ENTERA (título + "Traer cambios"/"Publicar") — esos
   dos botones y el estado viven ahora en #faseNav (.perfil__grupo, arriba). `#fase3` ya no
   tiene una franja propia arriba del documento. */

/* EL ENLACE PUBLICADO, EN UN BOTÓN QUE COPIA — no un texto para leer, y no una fila propia.
   Traía la URL completa impresa, con el uuid adentro, en su propio renglón siempre encima
   del documento (pedido del dueño de producto: "el link puede ser un botón que al tocarlo
   copie" y luego "el punto de poner el botón es que se acomode en otro lado para eliminar
   esa fila"). Ahora `#fase3Publicado` vive DENTRO de `.perfil__grupo[data-fase-botones="3"]`,
   al lado de "Traer cambios"/"Publicar": ni fila ni franja, un grupo más del riel de fases. */
.fase3-pub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font:300 12px/1.4 var(--sans);color:var(--ink-70)}
.fase3-pub--vacio{color:var(--ink-70);opacity:.85}
.fase3-pub__bt{display:inline-flex;align-items:center;gap:5px;font:400 11.5px/1 var(--sans);
  padding:5px 10px;border-radius:99px;background:var(--blanco);border:1px solid var(--ink-14);
  color:var(--ink);cursor:pointer;transition:border-color var(--tinta),color var(--tinta)}
.fase3-pub__bt:hover{border-color:var(--deep);color:var(--deep)}

.espina-doc{padding:7px 16px}
.esp-pie{margin-top:5px}

/* LA ESPINA, EN EL PIE DE LA TIRA DE PÁGINAS (doc-editor.js la mueve ahí, ver
   `ponerEspinaEnTira` en el <script> de esta página). Ese pie mide 11rem de ancho — nada
   que ver con la franja completa para la que se diseñó arriba —, así que acá va apretada:
   cabecera en columna, sin la palabra "El ritmo del documento" (el lugar ya lo dice), y el
   plegador de Fondos sin su etiqueta de texto. Bajo 1023px la tira se encoge a solo
   miniaturas (ver doc-editor.js) y ya no hay sitio ni para esto: se esconde entera, el
   veredicto vuelve a estar a un toque en escritorio. */
.ed-tira-pie .espina-doc{padding:8px 10px;border-bottom:0;border-top:1px solid var(--ink-14);
  background:var(--suelo-2)}
.ed-tira-pie .esp-cab{flex-direction:column;align-items:flex-start;gap:3px}
.ed-tira-pie .esp-cab .et-sec{display:none}
.ed-tira-pie .esp-res{font-size:11px}
.ed-tira-pie .esp-plegar{margin-left:0;padding:2px 8px}
.ed-tira-pie .esp-plegar span{display:none}
.ed-tira-pie .esp-pie{gap:8px;font-size:10px;margin-top:5px}
.ed-tira-pie .esp-fallas{font-size:10.5px;margin-top:5px}
@media (max-width:1023px){.ed-tira-pie{display:none}}

/* LA LEYENDA DE FONDOS SE PLIEGA, y arranca plegada. «A foto 25% · B crema 50% · C oscura 10% ·
   D blanca 15%» es una referencia que se lee una vez para entender los colores de las casillas,
   no un dato sobre el que se actúe; ocupaba un renglón entero en cada pantalla. Se abre con el
   mismo gesto que los avisos —un botón en la cabecera— y la elección se recuerda. */
[data-espina="off"] .esp-pie{display:none}
.esp-plegar{margin-left:10px;display:inline-flex;align-items:center;gap:6px;
  font:300 11.5px/1 var(--sans);padding:4px 10px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--ink-14);color:var(--ink-70);
  transition:border-color .18s,color .18s}
.esp-plegar:hover{border-color:var(--deep);color:var(--deep)}
.esp-plegar svg{width:12px;height:12px;transition:transform .28s}
[data-espina="off"] .esp-plegar svg{transform:rotate(180deg)}

/* MÁS COMPACTO TODAVÍA EN PANTALLA ANGOSTA (reportado por el dueño de producto: "un
   montón de barras que quitan campo"). La misma franja que ya se recortó arriba
   —la espina de páginas—, un paso más de relleno menos. No se esconde NADA que ya
   se viera: ni un aviso, ni un número de página, sólo el aire alrededor. */
@media (max-width:820px) {
  .espina-doc{padding:5px 12px}
  .esp-cab{margin-bottom:5px;gap:8px}
  .esp-pie{margin-top:3px;gap:10px}
  .esp-fallas{margin-top:5px;font-size:11px;line-height:1.4}
}

/* EL PANEL DE AVISOS, PLEGABLE. Plegado deja solo su cabecera —el conteo y el
   botón—, y el documento recupera todo el alto. La elección se recuerda. */
.ed-pie{max-height:11rem;transition:max-height .28s cubic-bezier(.22,.9,.24,1)}
[data-avisos="off"] .ed-pie{max-height:2.9rem;overflow:hidden}
[data-avisos="off"] .ed-pie .ed-avisos{display:none}
.ed-pie__cab{position:sticky;top:0;background:var(--blanco);z-index:2;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ed-plegar{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font:300 12px/1 var(--sans);padding:6px 12px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--ink-14);color:var(--ink-70);
  transition:border-color .18s,color .18s}
.ed-plegar:hover{border-color:var(--deep);color:var(--deep)}
.ed-plegar svg{width:13px;height:13px;transition:transform .28s}
[data-avisos="off"] .ed-plegar svg{transform:rotate(180deg)}

/* El lienzo manda: es lo que el vendedor mira. */
.ed-lienzo{background:var(--suelo)}
.ed-barra{padding:8px 12px;background:var(--blanco);border-bottom:1px solid var(--ink-08)}
.ed-tira,.ed-insp{background:var(--blanco)}
.ed-etq{font:400 10.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--deep)}

/* ── 11 decies · LAS TARJETAS DE FOTO ──────────────────────────────────────
   El botón de quitar iba en -top-2 -right-2, o sea FUERA de la miniatura, y
   como las tarjetas van pegadas se montaba sobre la vecina. Ahora va dentro,
   con un velo detrás para que se lea sobre cualquier fotografía. Y los rótulos
   de zona compartían 80 px: se les da aire y la tarjeta crece a 96. */
.foto-t{position:relative;display:flex;flex-direction:column;gap:6px;width:96px}
.foto-t__img{width:96px;height:96px;object-fit:cover;border-radius:10px;display:block}
.foto-t__x{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;border:0;
  border-radius:99px;background:rgba(26,38,51,.72);color:#fff;cursor:pointer;
  display:grid;place-items:center;line-height:0;
  backdrop-filter:blur(2px);transition:background .18s,transform .18s}
.foto-t__x:hover{background:var(--error);transform:scale(1.08)}
.foto-t__x svg{width:12px;height:12px;display:block}
.foto-t__zonas{display:flex;gap:4px;width:96px}
.foto-t__zonas>*{flex:1;min-width:0;font-size:10.5px;padding:5px 4px;border-radius:7px;
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* la rejilla que las contiene: que respiren y se alineen */
[id$="Fotos"],[id*="fotos"],[id*="Photos"]{display:flex;flex-wrap:wrap;gap:12px}

/* ── 12 · ARRASTRE Y ACUSES ────────────────────────────────────────────────
   Clases que el JS enciende y apaga. Nombres intactos, aspecto nuevo. */
.drop-target{outline:2px dashed var(--teal);outline-offset:2px;border-radius:var(--r-s)}
.ts-copiable{cursor:pointer}
.ts-copiable:hover{background-color:var(--ink-04)}
.ts-copiada{background:color-mix(in srgb,var(--green) 26%,transparent)!important}

/* ── 13 · MOVIMIENTO ───────────────────────────────────────────────────────
   Las cosas se levantan o se trazan. Nada rebota, nada escala, nada brilla. */
.fade-up{animation:fadeUp .38s cubic-bezier(.22,.9,.24,1) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* Cristal esmerilado: se deja solo donde de verdad hay algo detrás que se mueve. */
.backdrop-blur.backdrop-blur,.backdrop-blur-sm.backdrop-blur-sm{backdrop-filter:none}
header.backdrop-blur-md,nav.backdrop-blur{backdrop-filter:blur(12px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── 14 · QUE TODO PUEDA ENCOGER ───────────────────────────────────────────
   Un hijo de flex o de rejilla tiene min-width:auto y se niega a bajar del
   ancho de su contenido: basta un botón junto a un campo para que aparezca
   desplazamiento lateral en el teléfono. */
.flex>*,.grid>*{min-width:0}
img,svg,video{max-width:100%}

/* ── 15 · EL DOCUMENTO DEL CLIENTE ─────────────────────────────────────────
   doc.css manda dentro de `.doc` y no se toca. Esto solo evita que las reglas
   de campo de arriba se metan en el inspector del editor. */
.doc input,.doc textarea,.doc select{border-radius:0}

/* ── 24 · LA PANTALLA DE ENTRADA Y LA PASTILLA DE SESIÓN ───────────────────
   Es lo primero que ve cualquiera que abra el sistema, así que es donde la marca tiene
   que estar mejor puesta: banda de tinta a sangre, el logo por encima del mínimo, y una
   sola caja centrada. Nada más — una pantalla de login con opciones es una pantalla que
   hace dudar. */
#pantallaLogin{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:24px;overflow-y:auto}
/* UNA FOTO DE COSTA RICA, como en todas las apps del ecosistema, y el mismo panel de
   cristal. Para ARIA la foto es una hoja en macro: si el sistema es un arbol, ARIA son las
   hojas. El velo oscuro encima cumple dos cosas — deja el panel legible sobre cualquier
   zona de la foto, y baja el contraste para que la foto acompane en vez de competir. */
.lg-fondo{position:fixed;inset:0;z-index:-1;
  background:url('./marca/login-aria.jpg') no-repeat center center;background-size:cover}
.lg-fondo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(0,20,10,.34),rgba(0,40,20,.46))}

/* EL CRISTAL: un velo de blanco al 8% con desenfoque detras. No oscurece ni lava la foto,
   y el texto blanco encima se lee. Es el mismo panel de las demas apps. */
.lg-caja{width:100%;max-width:21.5rem;border-radius:1.5rem;padding:clamp(1.5rem,4vw,2rem);
  background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 25px 50px -12px rgba(0,0,0,.45);
  text-align:center;color:#fff}
.lg-estrella{height:56px;width:auto;display:block;margin:0 auto 1rem;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.lg-tit{font:300 27px/1.15 var(--glare);letter-spacing:.02em;color:#fff;margin:0 0 .35rem;
  text-shadow:0 2px 8px rgba(0,0,0,.35)}
.lg-sub{font:400 9px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin:0 0 1.5rem;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.lg-form{display:grid;gap:.7rem;text-align:left}

/* Los campos: fondo blanco, icono a la izquierda, y el ojo a la derecha en el de la clave. */
.lg-campo{position:relative;display:block}
.lg-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;
  align-items:center;color:var(--deep);pointer-events:none;z-index:2}
.lg-inp{width:100%;font:500 14px/1.3 var(--sans);color:var(--ink);background:#fff;
  border:0;border-radius:.75rem;padding:11px 16px 11px 42px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.06)}
.lg-inp--clave{padding-right:44px}
.lg-inp::placeholder{color:rgba(26,38,51,.42);font-weight:400}
.lg-inp:focus{outline:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.06),0 0 0 4px rgba(0,109,130,.45)}
.lg-ojo{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;
  align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;
  border-radius:8px;background:transparent;color:rgba(26,38,51,.45);cursor:pointer;z-index:3}
.lg-ojo:hover{color:var(--deep)}
.lg-ojo:focus-visible{outline:2px solid #fff;outline-offset:1px}

.lg-cambio{display:grid;gap:.7rem;margin-top:.4rem;padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.16)}
.lg-aviso{font:600 11px/1.4 var(--sans);color:#fcd34d;margin:0;text-align:center}

/* Mantener la sesion iniciada y recuperar la contrasena, en la misma linea. */
.lg-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  margin-top:.2rem;padding:0 2px}
.lg-recordar{display:flex;align-items:center;gap:6px;cursor:pointer;
  font:500 11px/1.35 var(--sans);color:rgba(255,255,255,.92)}
.lg-recordar input{width:14px;height:14px;accent-color:var(--teal);cursor:pointer;flex:none}
.lg-link{border:0;background:transparent;padding:0;cursor:pointer;text-align:right;
  font:700 11px/1.35 var(--sans);color:#7fd1cf}
.lg-link:hover{text-decoration:underline}
.lg-link:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}

.lg-error{font:500 12px/1.4 var(--sans);color:#fca5a5;margin:.2rem 0 0;text-align:center}
.lg-error--bien{color:#86efac}

/* EL DEGRADADO EN MOVIMIENTO DE ARIA: «fotosintesis».
   Cada app del ecosistema tiene el suyo —oceanBreeze en app1, natureBlendFlow en app2,
   forestMist en app5, oroShift en app7—: misma tecnica, distinta paleta y distinto ritmo.
   El de ARIA cuenta lo que hace una hoja: RECIBE y TRANSFORMA.
   Por eso son dos movimientos y no uno, y esa es toda la idea:
     · LA LUZ QUE LLEGA — una banda calida que cruza en diagonal, siempre en la misma
       direccion y a ritmo parejo, porque la luz no va y vuelve: viene del sol.
     · LA TRANSFORMACION — los verdes por debajo, respirando mas lento y de ida y vuelta,
       porque lo que pasa adentro de la hoja es ciclico y no tiene prisa.
   La luz tarda 7s; el verde, 18s. Al no ser multiplos, nunca coinciden igual dos veces
   y el boton no se siente en bucle. */
@keyframes ariaLuzQueLlega{
  0%{background-position:-60% 50%,0% 50%}
  100%{background-position:160% 50%,0% 50%}
}
@keyframes ariaTransforma{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.lg-bt{position:relative;overflow:hidden;isolation:isolate;
  margin-top:.5rem;width:100%;font:700 13px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;padding:14px 18px;color:#fff;
  /* Los verdes de la hoja, que ahora viven en :root — acá se usan, no se repiten. */
  background-image:var(--hoja);
  background-size:300% 300%;
  animation:ariaTransforma 18s ease-in-out infinite;
  border:1px solid rgba(255,255,255,.2);border-radius:.75rem;cursor:pointer;
  box-shadow:0 15px 25px rgba(0,0,0,.3);transition:transform .2s;
  transform:translateZ(0)}
/* La luz va en su propia capa para poder tener su propio ritmo. Encima del verde y
   debajo del texto, y sin tapar el clic. */
.lg-bt::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--hoja-luz);
  background-size:180% 100%;background-repeat:no-repeat;
  animation:ariaLuzQueLlega 7s linear infinite}
.lg-bt:hover{transform:scale(1.02) translateZ(0)}
/* Quien pidio menos movimiento no recibe ninguna ola: el degradado se queda quieto y la
   luz desaparece, en vez de quedar congelada a mitad de camino. */
@media (prefers-reduced-motion:reduce){
  .lg-bt{animation:none}
  .lg-bt::before{display:none}
}
.lg-bt:active{transform:scale(.99)}
.lg-bt:disabled{opacity:.6;cursor:default;transform:none}

.lg-raya{border:0;border-top:1px solid rgba(255,255,255,.2);width:75%;margin:1.7rem auto .8rem}
.lg-pie{margin:0;font:700 8.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.8)}
/* La pastilla de sesión: quién está adentro, el paso a la otra consola y la salida.
   Vive en las dos cabeceras, y por eso se estila una sola vez. */
.ses{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ses__yo{font:300 12.5px/1 var(--sans);color:var(--cream-70);white-space:nowrap}
.ses__ir,.ses__salir{font:300 12px/1 var(--sans);padding:8px 13px;border-radius:99px;
  background:transparent;color:var(--cream-70);border:1px solid var(--cream-16);
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .18s}
.ses__ir:hover,.ses__salir:hover{color:var(--cream);border-color:var(--cream-70)}
/* Sobre la barra clara del administrador la misma pastilla se lee al revés. */
.abar .ses__yo{color:var(--ink-70)}
.abar .ses__ir,.abar .ses__salir{color:var(--ink-70);border-color:var(--ink-14)}
.abar .ses__ir:hover,.abar .ses__salir:hover{color:var(--deep);border-color:var(--deep)}

/* ── 25 · LOS DOS AVISOS DE TARIFA ────────────────────────────────────────
   Aparecen bajo la línea del servicio cuando el precio NO sale de un contrato cargado para
   esa fecha: o se proyectó del año anterior, o no se pudo ni proyectar. Los dos usan el
   ocre de aviso de la paleta —#765A28 sobre crema mide 4,89 y sobre blanco 6,44, que es lo
   que el manual exige para texto— y NO el rojo: no es un error del sistema, es una tarifa
   que todavía no llegó. El rojo se reserva para lo que está roto.
   Filete a la izquierda y no recuadro completo: la fila del servicio ya tiene sus bordes, y
   una caja dentro de otra caja hace que la tabla se lea como un formulario. */
/* `.aviso-consola` es el MISMO tratamiento para un aviso que no es de tarifa —un cruce de
   destino sin traslado resuelto, lo que un total deja afuera—. Comparte la regla y no la copia:
   dos hojas de estilo para el mismo ocre es como se llega a dos ocres. */
.aviso-consola,
.aviso-proyectada,
.aviso-sin-tarifa{font:400 11.5px/1.5 var(--sans);color:#765A28;
  background:color-mix(in srgb,#765A28 7%,var(--blanco));
  border-left:2px solid #765A28;border-radius:0 6px 6px 0;
  padding:.5rem .7rem;margin:.45rem 0 0}
.aviso-consola b,
.aviso-proyectada b,
.aviso-sin-tarifa b{font-weight:400;letter-spacing:.01em}
/* La que no tiene precio pesa más que la proyectada: ahí no hay número que conservar. */
.aviso-sin-tarifa{background:color-mix(in srgb,#765A28 12%,var(--blanco))}

/* ── 26 · LA HOJA DE CALIFICACIÓN (Fase 1) ─────────────────────────────────
   Los once campos quedaron afuera de la pasada de diseño que ya recibió el resto de la
   consola: seguían con el row de plantilla —punto de color, input con caja completa,
   columna de origen a la derecha— que es justamente el "recoloreado sobre un dashboard
   genérico" que el §8 del estándar señala como el error de fondo. Es, además, la única
   pantalla que queda ENTERA cuando el interruptor de Admin apaga el resto de la consola
   (Bloque «apagar la consola interna»), así que es la que más rinde pulir.

   Se lee como FICHA, no como formulario: etiqueta en versalita chica arriba, el dato
   abajo grande y sin caja —el valor manda cuando existe—. Lo que falta se dice con la
   palabra "Sin dato todavía" en el mismo tono apagado que un placeholder, no con un
   recuadro vacío que parece un campo roto. Y el estado se distingue por FORMA además de
   color: un supuesto lleva una pastilla de contorno punteado —nunca ámbar sólido, la
   paleta no lo tiene (§1)— porque un dato y un supuesto que solo se distinguen por un
   matiz de color fallan igual que "el ocre medido sobre el suelo equivocado" del §8.

   SEGUNDA PASADA (el dueño de producto, ya viéndola en producción: "muy blanca y muy
   poco demarcada"). Tenía razón — una lista de filas separadas por un hairline es
   demasiado quieta para leerse de un vistazo. Cada grupo pasa a ser una TARJETA con
   fondo propio (un tinte de teal al 5%, no blanco ni crema) y sus campos adentro en
   grilla — "El viaje" con 5 datos se acomoda solo en 2-3 columnas; "Alojamiento" con 1
   dato ocupa una sola celda. Es demarcación real, no una etiqueta flotando. */
.cal-lista{display:flex;flex-direction:column;gap:14px}
.cal-grupo{background:color-mix(in srgb,var(--teal) 6%,var(--blanco));
  border:1px solid var(--ink-08);border-radius:var(--r);padding:16px 20px}
/* El punto antes del rótulo: mismo recurso que .rec-parada__n, ancla el ojo antes de
   leer versalitas chicas — sin él, cuatro rótulos idénticos en tono se confunden con
   el resto del texto apagado de la ficha. */
.cal-grupo__tit{display:flex;align-items:center;gap:8px;font:400 10.5px/1.2 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--deep);margin-bottom:14px}
.cal-grupo__tit::before{content:'';width:6px;height:6px;border-radius:99px;
  background:var(--teal);flex:0 0 auto}
.cal-grupo__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px 28px}
.cal-fila{min-width:0}
.cal-fila__lbl{display:block;font:400 11px/1.3 var(--sans);color:var(--ink-70);margin-bottom:5px}
.cal-fila__campo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cal-fila__input{flex:1 1 auto;min-width:80px;border:0;border-radius:0;background:transparent;
  padding:1px 0 4px;font:300 15px/1.35 var(--sans);color:var(--ink);
  border-bottom:1px solid var(--ink-14);transition:border-color var(--tinta)}
.cal-fila__input::placeholder{color:var(--ink-70);opacity:.65}
.cal-fila__input:hover{border-bottom-color:var(--ink-70)}
.cal-fila__input:focus{outline:0;border-bottom-color:var(--deep)}
/* La pastilla de "a confirmar": SOLIDA, no de contorno — el pedido explícito fue MÁS
   color y demarcación, y un supuesto es justo el estado que más conviene que salte a
   la vista. Ocre de aviso —la única familia cálida que la paleta autoriza (§1)—, nunca
   un ámbar inventado. */
.cal-fila__tag{flex:0 0 auto;font:400 9.5px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:#5E4720;background:color-mix(in srgb,#8A6A2F 16%,var(--blanco));
  border-radius:99px;padding:4px 9px 3px;white-space:nowrap}
.cal-fila__origen{flex:0 0 auto;font:300 10.5px/1 var(--sans);color:var(--ink-70);
  opacity:.72;white-space:nowrap}
/* El contador "N/11 datos": pasa de texto suelto a una pastilla, coherente con el resto
   de los indicadores de la consola (fase-dato, cifra-t). */
#qualScore{font:400 11px/1 var(--sans);letter-spacing:.06em;color:var(--deep);
  background:color-mix(in srgb,var(--teal) 10%,transparent);border-radius:99px;
  padding:4px 10px}

/* ── 27 · EL INTERRUPTOR ───────────────────────────────────────────────────
   Un solo interruptor en todo el producto por ahora —apagar la consola interna del
   vendedor—, así que es SU PROPIO componente y no un checkbox de formulario: lo que
   apaga o prende una pantalla entera merece leerse distinto de una casilla cualquiera.
   Pastilla de dos estados, sin rebote ni brillo — el mismo `--sal` del resto del
   sistema para el deslizamiento. */
.interruptor{position:relative;display:inline-flex;flex:0 0 auto;width:44px;height:26px;
  border-radius:99px;background:var(--ink-14);cursor:pointer;border:0;padding:0;
  transition:background var(--sal)}
.interruptor::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:99px;background:var(--blanco);transition:transform var(--sal)}
.interruptor[aria-checked="true"]{background:var(--deep)}
.interruptor[aria-checked="true"]::after{transform:translateX(18px)}
.interruptor:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

/* ── 28 · MODO "SOLO CALIFICACIÓN" (consola interna apagada) ────────────────
   Ver /api/console-status y adminConsolaInterna en src/index.js: es un interruptor de
   Admin, no un modo que la consola elija sola.

   CORREGIDO (el alcance original apagaba de más). El dueño de producto, mirándolo ya en
   producción: «Apagar la consola sólo significa quitar el chat y la parte del botón de
   crear el correo con IA, pero todas las fases deben ser visibles — eso no es la
   consola, es el cotizador como tal, donde se hace todo el core de todo; sin eso esto no
   tiene sentido». O sea: "consola" son DOS COSAS PUNTUALES —la conversación libre y la
   redacción de correos con IA (la propuesta de Fase 1, el correo de Fase 2, el
   seguimiento de la bandeja)—, nunca las 4 fases ni la calificación, que quedan SIEMPRE
   visibles y editables, prendida o apagada. `renderCalificacion()` ya no distingue el
   modo para nada — ver el <script> de index.html. */
[data-consola="apagada"] #chatSection,
[data-consola="apagada"] #btnToggleChat,
[data-consola="apagada"] #btnRedactar,
[data-consola="apagada"] #propuestaBox,
[data-consola="apagada"] #btnEmail,
[data-consola="apagada"] [data-seguir],
/* Y el correo del cliente con «Analizar» / «Leer captura» (Fase 1): también es la IA — Luis,
   2026-09-21: «este correo debe estar oculto porque es parte de la IA que está oculta». */
[data-consola="apagada"] #intakeBox,
[data-consola="apagada"] #btnToggleIntake{display:none!important}
/* SIN EL AVISO DE TEXTO: el dueño de producto pidió sacarlo — con el alcance ya corregido
   (sólo chat + redacción con IA), casi nada cambia a la vista, y una franja repetida en
   las cuatro fases para avisar algo tan chico era más ruido que ayuda.

   LA PESTAÑA MÓVIL "CONVERSACIÓN" YA NO TIENE SENTIDO SIN CHAT. `setMobileTab()` (el
   <script>) sigue repartiendo `tab-hidden` entre chatSection/fase1panel/builderSection
   exactamente igual que siempre —no se le tocó una línea—, pero con la consola apagada
   nunca hay nada que "conversación" pudiera mostrar. Se esconde el selector de pestañas
   y se le gana a `tab-hidden` por especificidad (mismo truco que ya usa el resto del
   archivo) SOLO en el panel que de verdad es la fase activa — `:not(.hidden)` es lo que
   evita mostrar el panel equivocado si `tab-hidden` cayó del lado que no toca. */
[data-consola="apagada"] #mobileTabs{display:none!important}
[data-consola="apagada"] #fase1panel.tab-hidden:not(.hidden),
[data-consola="apagada"] #builderSection.tab-hidden:not(.hidden){display:flex!important}

/* ── 29 · EL INICIO (Cotizaciones como pantalla de entrada) ────────────────
   Es la PRIMERA pantalla que ve cualquiera que entra — si acá se repite la tarjeta
   blanca-flotando-con-sombra-sobre-crema del resto de las plantillas de panel, todo lo
   demás da lo mismo. La tabla nace del crema directo a blanco, sin caja ni sombra: es la
   elevación por MATERIAL que pide el §5 del libro de marca (suelo crema → hoja blanca),
   no una tarjeta más. El título va en Glare grande — es la primera palabra que se lee
   cada mañana, y "lo más grande de la pantalla es siempre una cifra o un título, nunca
   un botón" (§4). */
.hoja-inicio{max-width:1120px;margin:0 auto;padding:44px 28px 60px}
.hoja-inicio__cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:28px}
.hoja-inicio__tit{font:300 42px/1.1 var(--glare);letter-spacing:-.016em;color:var(--ink);margin:0}
.hoja-inicio__buscar{width:300px;max-width:100%;background:var(--blanco);border:1px solid var(--ink-14);
  border-radius:99px;padding:10px 18px;font:300 13.5px/1 var(--sans);color:var(--ink);
  transition:border-color var(--tinta),box-shadow var(--tinta)}
.hoja-inicio__buscar::placeholder{color:var(--ink-70);opacity:.7}
.hoja-inicio__buscar:focus{outline:0;border-color:var(--deep);box-shadow:0 0 0 3px rgba(0,85,101,.13)}
.hoja-inicio__sel{background:var(--blanco);border:1px solid var(--ink-14);border-radius:99px;
  padding:10px 16px;font:300 13.5px/1 var(--sans);color:var(--ink)}
@media(max-width:640px){
  .hoja-inicio{padding:24px 16px 40px}
  .hoja-inicio__tit{font-size:32px}
}
/* La lista de cotizaciones (ya NO es <table>, ver el porqué en el HTML): un solo filete
   de tinta separa crema de blanco, y cada fila es una tarjeta en flex que REACOMODA sus
   datos en vez de recortarlos o abrir scroll lateral. */
.hoja-inicio__lista{background:var(--blanco);border-radius:var(--r) var(--r) 0 0;
  border-top:1px solid var(--ink-14);overflow:hidden}
/* Las cabeceras de columna: sólo tienen sentido cuando hay ancho para leerlas alineadas
   con los datos de abajo. Bajo ese punto cada fila ya se explica sola. */
.hoja-inicio__cabezas{display:flex;gap:16px;padding:0 20px 8px;
  font:400 10.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--deep)}
.hoja-inicio__cabezas span:nth-child(1){flex:1 1 240px}
.hoja-inicio__cabezas span:nth-child(2){flex:0 0 200px}
.hoja-inicio__cabezas span:nth-child(3){flex:0 0 100px;text-align:right}
.hoja-inicio__cabezas span:nth-child(4){flex:0 0 130px}
@media(max-width:820px){.hoja-inicio__cabezas{display:none}}
/* Los filtros de la bandeja y la barra de páginas (2026-09-21). */
.hoja-inicio__filtros{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-12px 0 22px}
.hoja-inicio__filtros .hoja-inicio__sel{padding:8px 14px;font-size:12.5px}
.hoja-inicio__mes{display:inline-flex;align-items:center;gap:8px;font:400 12px/1 var(--sans);color:var(--ink-70)}
.hoja-inicio__limpiar{background:none;border:0;padding:6px 4px;font:400 12.5px/1 var(--sans);color:var(--deep);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hoja-inicio__cuenta{margin-left:auto;font:400 12px/1 var(--sans);color:var(--ink-70);font-variant-numeric:tabular-nums}
.hoja-inicio__paginas{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:18px 16px;background:var(--blanco);border-top:1px solid var(--ink-14);border-radius:0 0 var(--r) var(--r)}
.hoja-inicio__pagina{font:400 12.5px/1 var(--sans);color:var(--ink-70);font-variant-numeric:tabular-nums}
.hoja-inicio__paginas .bt-menor:disabled{opacity:.4;cursor:default}
.hoja-inicio__paginas .hoja-inicio__sel{padding:7px 12px;font-size:12px}
@media(max-width:640px){.hoja-inicio__cuenta{margin-left:0;width:100%}}

.fila-cotiz{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;
  padding:14px 20px;border-top:1px solid var(--ink-08);cursor:pointer;
  transition:background var(--tinta)}
.hoja-inicio__lista>.fila-cotiz:first-child{border-top:0}
.fila-cotiz:hover{background:var(--ink-04)}
.fila-cotiz__principal{flex:1 1 220px;min-width:0}
.fila-cotiz__tit{font:400 14px/1.3 var(--sans);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-cotiz__cliente{font:300 12px/1.3 var(--sans);color:var(--ink-70)}
.fila-cotiz__estado{flex:0 0 auto;font:400 11px/1 var(--sans);border-radius:99px;padding:4px 10px}
.fila-cotiz__fase{flex:0 0 auto;font:300 12px/1 var(--sans);color:var(--ink-70);white-space:nowrap}
.fila-cotiz__total{flex:0 0 auto;font:400 13px/1 var(--sans);color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:70px;text-align:right}
.fila-cotiz__fecha{flex:0 0 auto;font:300 11.5px/1 var(--sans);color:var(--ink-70);white-space:nowrap}
.fila-cotiz__acciones{flex:0 0 auto;margin-left:auto;display:flex;gap:2px}
/* En una fila que ya envuelve, el bloque de acciones se separa a su PROPIA línea en vez
   de flotar pegado al último dato — más fácil de tocar en touch, y no se confunde con la
   fecha de al lado. */
@media(max-width:480px){.fila-cotiz__acciones{flex-basis:100%;margin-left:0;justify-content:flex-end}}
.fila-cotiz__seguim{margin:0 20px 12px;padding:10px 14px}

/* ── 30 · EL ESPACIO DE TRABAJO (Conversación + Fase 1/2) ───────────────────
   Antes: dos tarjetas blancas —`bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg
   border`— flotando con aire alrededor sobre el crema. Es LA plantilla de cualquier
   panel-con-chat-de-IA armado en un fin de semana, y es lo que hacía que la consola se
   leyera genérica aunque cada color estuviera bien puesto. Acá la elevación es la del
   §5: cambio de MATERIAL —crema de fondo, hoja blanca de punta a punta—, nunca sombra.
   Las dos superficies se tocan; un solo filete de tinta al 14% las separa, como el que
   ya separa el riel del admin de su contenido. */
.ws-panel{background:var(--blanco)}
.ws-filete{border-right:1px solid var(--ink-14)}
@media(max-width:1023px){.ws-filete{border-right:0}}
.ws-panel__tit{font:300 21px/1.2 var(--glare);letter-spacing:-.012em;color:var(--ink);margin:0}

/* ═══════════════════════════════════════════════════════════════════════════
   §33 · FASE 4 — DOCUMENTOS
   Dos columnas y la proporcion no es casual: los interruptores angostos a la
   izquierda porque se tocan poco, el documento ancho a la derecha porque es lo
   que se mira. No hay boton de «aplicar»: cada interruptor redibuja, porque un
   boton de aplicar es una forma de que alguien mande algo que no vio.
   ═══════════════════════════════════════════════════════════════════════════ */
.doc-panel{background:var(--suelo);border:1px solid var(--ink-14);border-radius:var(--r);
  padding:14px;display:flex;flex-direction:column;gap:14px}
.doc-grupo{display:flex;flex-direction:column;gap:6px}
.doc-grupo + .doc-grupo{padding-top:12px;border-top:1px solid var(--ink-14)}
.doc-tit{margin:0 0 2px;font:400 10px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-70)}
.doc-lbl{margin-top:4px;font:400 10px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-70)}
.doc-sel,.doc-inp{width:100%;font:300 13.5px/1.3 var(--sans);color:var(--ink);
  background:var(--blanco);border:1px solid var(--ink-14);border-radius:9px;padding:8px 10px}
.doc-sel:focus,.doc-inp:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.doc-sw{display:flex;align-items:center;gap:7px;cursor:pointer;
  font:300 13px/1.35 var(--sans);color:var(--ink);padding:2px 0}
.doc-sw input{width:14px;height:14px;accent-color:var(--teal);cursor:pointer;flex:none}
.doc-fila{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* La hoja. Fondo gris para que el papel blanco se lea como papel y no como pantalla. */
.doc-hoja{background:var(--ink-06,rgba(26,38,51,.06));border-radius:var(--r);padding:16px}
.doc-papel{background:#fff;max-width:860px;margin:0 auto;padding:26px;
  border-radius:6px;box-shadow:0 6px 24px rgba(26,38,51,.12)}
.doc-vacio{margin:0;text-align:center;padding:48px 12px;
  font:300 14px/1.5 var(--sans);color:var(--ink-70)}
.doc-aviso{margin:0;padding:22px;border-radius:10px;background:#FDF6E3;
  border:1px solid #E6D9B8;font:300 13.5px/1.6 var(--sans);color:#6B5426}
.doc-aviso strong{font-weight:500}

/* El panel plegable. En pantalla ancha no existe el boton y el cuerpo esta siempre
   abierto; en angosta el panel se reduce a una barra y el documento se queda con la
   pantalla, que es lo que se vino a mirar. */
.doc-plegar{display:none}
.doc-panel__cuerpo{display:flex;flex-direction:column;gap:14px}
@media (max-width:1023px){
  .doc-panel{padding:0}
  .doc-plegar{display:flex;align-items:center;justify-content:space-between;width:100%;
    gap:10px;padding:12px 14px;border:0;background:transparent;cursor:pointer;
    font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-70)}
  .doc-plegar i{transition:transform .2s}
  .doc-panel__cuerpo{display:none;padding:0 14px 14px}
  .doc-panel--abierto .doc-panel__cuerpo{display:flex}
  .doc-panel--abierto .doc-plegar i{transform:rotate(180deg)}
  .doc-panel--abierto .doc-plegar{color:var(--ink)}
  /* El papel deja de tener margenes de escritorio: en un telefono cada milimetro de
     ancho es texto que no se corta. */
  .doc-hoja{padding:8px}
  .doc-papel{padding:14px}
}

/* §33b · Los cuatro apartados de la fase 4. */
.doc-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  border-bottom:1px solid var(--ink-14);padding-bottom:0}
.doc-tab{border:0;background:transparent;cursor:pointer;padding:9px 13px;
  font:300 13.5px/1 var(--sans);color:var(--ink-70);border-bottom:2px solid transparent;
  margin-bottom:-1px}
.doc-tab:hover{color:var(--ink)}
.doc-tab--on{color:var(--ink);border-bottom-color:var(--teal)}
.doc-tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:6px}
/* El numero de Toursys, a la derecha y siempre a la vista: es la llave de los tres
   apartados que necesitan carpeta, y no tenerlo explica todo lo que falta. */
.doc-bk{margin-left:auto;padding:0 6px;font:400 10.5px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-70)}
.doc-seccion{min-height:0}
section.doc-seccion:not(#docDocumento){overflow-y:auto}

.doc-form{display:flex;flex-direction:column;gap:12px;max-width:900px}
.doc-card{background:var(--suelo-2);border:1px solid var(--ink-14);border-radius:var(--r);
  padding:14px;display:flex;flex-direction:column;gap:8px}
.doc-card__cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.doc-cuenta{font:400 11px/1 var(--sans);color:var(--ink-70)}
.doc-mini{border:1px solid var(--ink-14);background:var(--blanco);border-radius:8px;
  padding:5px 11px;cursor:pointer;font:300 12.5px/1 var(--sans);color:var(--ink)}
.doc-mini:hover{border-color:var(--teal);color:var(--teal)}
.doc-lista{display:flex;flex-direction:column;gap:8px}
.doc-item{background:var(--blanco);border:1px solid var(--ink-14);border-radius:10px;
  padding:10px;display:flex;flex-direction:column;gap:8px}
.doc-item__cab{cursor:pointer;font:400 13px/1.3 var(--sans);color:var(--ink);
  list-style:none;padding:2px 0}
.doc-item__cab::-webkit-details-marker{display:none}
.doc-fila-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:700px){.doc-fila-2,.doc-fila{grid-template-columns:1fr}}
.doc-quitar{align-self:flex-start;border:0;background:transparent;cursor:pointer;padding:2px 0;
  font:300 12px/1 var(--sans);color:var(--error);text-decoration:underline;text-underline-offset:3px}
.doc-acciones{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:4px 0 20px}
.doc-estado{font:300 12.5px/1 var(--sans);color:var(--ink-70)}
.doc-bt{border:0;border-radius:10px;padding:11px 20px;cursor:pointer;
  font:300 14px/1 var(--sans);color:var(--cream);background:var(--deep)}
.doc-bt:hover{background:var(--ink)}
.doc-nota{margin:0 0 12px;font:300 13px/1.5 var(--sans);color:var(--ink-70);max-width:70ch}
.doc-vacio-mini{margin:0;font:300 12.5px/1.5 var(--sans);color:var(--ink-70)}
.doc-aviso-bk{margin:0 0 12px;padding:18px;border-radius:10px;background:#FDF6E3;
  border:1px solid #E6D9B8;font:300 13.5px/1.6 var(--sans);color:#6B5426;max-width:70ch}

.doc-archivos{display:flex;flex-wrap:wrap;gap:6px}
.doc-archivo{display:inline-block;padding:6px 11px;border-radius:8px;background:var(--blanco);
  border:1px solid var(--ink-14);font:300 12.5px/1.2 var(--sans);color:var(--teal);
  text-decoration:none;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-archivo:hover{border-color:var(--teal)}
.doc-archivo--sin{color:var(--ink-70)}

.doc-historial{display:flex;flex-direction:column;gap:8px;max-width:900px}
.doc-hist{background:var(--suelo-2);border:1px solid var(--ink-14);border-radius:10px;
  padding:12px;display:flex;flex-direction:column;gap:7px}
.doc-hist__cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.doc-hist__serv{font:400 13.5px/1.3 var(--sans);color:var(--ink)}
.doc-hist__prov{font:300 12px/1.3 var(--sans);color:var(--ink-70)}
.doc-hist__datos{display:flex;flex-wrap:wrap;gap:5px}
.doc-chip{padding:3px 9px;border-radius:999px;background:var(--blanco);
  border:1px solid var(--ink-14);font:300 11.5px/1.4 var(--sans);color:var(--ink-70)}
.doc-hist__papeles{display:flex;flex-wrap:wrap;gap:5px}
.doc-papel-link{padding:4px 10px;border-radius:8px;background:var(--blanco);
  border:1px solid var(--ink-14);font:300 12px/1.2 var(--sans);color:var(--teal);text-decoration:none}
.doc-papel-link:hover{border-color:var(--teal)}

/* ── 34 · NOTAS DE CRÉDITO ─────────────────────────────────────────────────
   Una hoja que se pone encima de la bandeja, no una caja flotante. El fondo se
   vela con el crema de la casa en vez de negro: lo de abajo sigue siendo la
   consola, no desaparece, y el §5 del libro de marca separa por MATERIAL
   —crema de suelo, hoja blanca— y no por sombra.
   La hoja es alta y con una sola columna porque acá se BUSCA un nombre: leer una
   lista es más rápido en una columna angosta que en una cuadrícula ancha. */
.nc-hoja{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;
  justify-content:center;padding:32px 20px;overflow-y:auto;
  background:rgba(234,223,206,.82);backdrop-filter:blur(7px)}
.nc-hoja.hidden{display:none}
.nc-sin-scroll{overflow:hidden}
.nc-hoja__caja{position:relative;width:100%;max-width:840px;background:var(--blanco);border-radius:var(--r);
  border:1px solid var(--ink-14);box-shadow:0 18px 50px rgba(26,38,51,.13);
  padding:26px 26px 30px;animation:ncEntra .22s ease-out}
@keyframes ncEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nc-hoja__caja{animation:none}}

/* La salida va CLAVADA en la esquina, fuera del flujo. Dentro de la fila que envuelve
   se bajaba sola a una linea propia en cuanto el buscador pedia su ancho, y una × suelta
   bajo el titulo no se lee como «cerrar». El hueco de la derecha se lo reserva la fila. */
.nc-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-right:46px}
.nc-tit{font:300 30px/1.1 var(--glare);letter-spacing:-.014em;color:var(--ink);margin:0}
.nc-switch{display:inline-flex;gap:2px;padding:3px;border-radius:99px;
  background:var(--suelo-2);border:1px solid var(--ink-14)}
.nc-switch__bt{border:0;background:transparent;border-radius:99px;cursor:pointer;
  padding:6px 14px;font:300 12.5px/1 var(--sans);color:var(--ink-70)}
.nc-switch__bt--on{background:var(--blanco);color:var(--ink);box-shadow:0 1px 2px rgba(26,38,51,.08)}
.nc-switch__bt:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.nc-buscar{flex:1 1 200px;min-width:150px;background:var(--blanco);border:1px solid var(--ink-14);
  border-radius:99px;padding:9px 16px;font:300 13px/1 var(--sans);color:var(--ink)}
.nc-buscar:focus{outline:0;border-color:var(--deep);box-shadow:0 0 0 3px rgba(0,85,101,.13)}
.nc-cerrar{position:absolute;top:22px;right:22px;border:1px solid var(--ink-14);
  background:var(--blanco);border-radius:99px;padding:8px;cursor:pointer;
  color:var(--ink-70);display:inline-flex}
.nc-cerrar:hover{border-color:var(--deep);color:var(--deep)}

.nc-nota{margin:14px 0 4px;font:300 13px/1.55 var(--sans);color:var(--ink-70);max-width:66ch}
.nc-cuenta{display:block;font:400 10.5px/1.6 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--deep)}

.nc-lista{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.nc-ficha{background:var(--suelo-2);border:1px solid var(--ink-14);border-radius:10px;
  padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.nc-ficha__cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nc-ficha__nom{font:400 14px/1.3 var(--sans);color:var(--ink)}
.nc-ficha__dato{font:300 12px/1.3 var(--sans);color:var(--ink-70);font-variant-numeric:tabular-nums}
/* «Provisional» = la nota está, la ficha del proveedor todavía no. Se dice, porque
   explica por qué ese nombre se ve distinto a los demás. */
.nc-ficha__marca{padding:2px 8px;border-radius:999px;background:var(--blanco);
  border:1px solid var(--ink-14);font:300 10.5px/1.5 var(--sans);color:var(--aviso)}
.nc-ficha__cuenta{margin-left:auto;font:400 10.5px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-70)}
.nc-vacio{margin:18px 0;font:300 13.5px/1.6 var(--sans);color:var(--ink-70)}
.nc-vacio--mal{color:var(--error)}

@media (max-width:640px){
  .nc-hoja{padding:0}
  .nc-hoja__caja{max-width:none;min-height:100%;border:0;border-radius:0;padding:20px 16px 34px}
  .nc-tit{font-size:24px}
  /* En un teléfono la fila del encabezado es demasiada cosa para una línea: el título y
     la salida arriba, el interruptor y la búsqueda debajo, cada uno en su ancho. */
  .nc-cerrar{top:16px;right:14px}
  .nc-ficha__cuenta{margin-left:0}
}

/* ── 35 · LOS INTERRUPTORES DE COMISIÓN (fase 2) ───────────────────────────
   Un interruptor que se lee de un vistazo: apagado es un contorno, prendido es
   tinta llena. No hay palomita ni «ON/OFF» — el estado se ve en el peso, que es
   lo que se distingue sin leer cuando hay nueve seguidos.
   `aria-pressed` es lo que de verdad dice el estado; la clase sólo lo pinta. */
.com-sw{display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--ink-14);background:var(--blanco);border-radius:9px;
  padding:7px 11px;font:300 12.5px/1.25 var(--sans);color:var(--ink-70);
  transition:background var(--tinta),border-color var(--tinta),color var(--tinta)}
.com-sw:hover{border-color:var(--deep);color:var(--deep)}
.com-sw[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--cream)}
.com-sw:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
/* La nota explica POR QUÉ ese porcentaje es el que es —de dónde sale el 0,30%, que el
   monto ya trae IVA—. Va pegada al nombre porque leerla aparte no serviría de nada. */
.com-sw__nota{display:block;font:300 10px/1.3 var(--sans);opacity:.72;margin-top:1px}

/* La cabecera plegable de las comisiones. El triángulo nativo se va: en su lugar hay una
   cruz que gira, que es lo que ya hace el resto de la consola. */
.com-cab{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;padding:13px 16px;border-radius:12px}
.com-cab::-webkit-details-marker{display:none}
.com-cab:hover{background:var(--ink-04)}
.com-cab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.com-cab__tit{font:400 13px/1.2 var(--sans);color:var(--ink)}
/* Los nombres de las que están puestas. Con ninguna, queda en gris y se lee como lo que
   es: una tarjeta que todavía no decide nada. */
.com-cab__resumen{flex:1 1 auto;min-width:0;font:300 11.5px/1.3 var(--sans);color:var(--ink-70);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.com-card--puestas .com-cab__resumen{color:var(--deep)}
.com-cab__cifra{font:400 13px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.com-cab::after{content:'+';font:300 17px/1 var(--sans);color:var(--ink-70);
  transition:transform var(--sal)}
details[open] > .com-cab::after{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.com-cab::after{transition:none}}


/* ═══════════════════════════════════════════════════════════════════════════
   §37 · LA CAPA DE ARIA — LA HOJA QUE RECIBE Y TRANSFORMA
   ───────────────────────────────────────────────────────────────────────────
   La consola ya vestía los colores de la casa: el `tailwind.config` remapea
   slate, indigo y emerald a crema, teal y verde, así que no había nada que
   repintar. Lo que le faltaba era lo de ARIA — el concepto propio, el mismo
   que el login ya cuenta: una hoja recibe algo en bruto y devuelve algo vivo.

   DÓNDE SE PONE Y DÓNDE NO, que es la única decisión de verdad acá.
   El degradado va SÓLO en las dos cosas que son literalmente la
   transformación:

     · EL RIEL DE LAS FASES. Una cotización entra en bruto por la fase 1 y sale
       cargada en el ERP por la 5. El riel no es un adorno de progreso: es el
       recorrido mismo. Lo ya recorrido queda en los verdes de la hoja, y el
       nodo activo lleva el degradado VIVO con la luz cruzándolo, porque es
       donde la transformación está ocurriendo ahora.

     · EL BOTÓN QUE COMPROMETE EL TRABAJO — guardar y publicar. Es el instante
       en que lo que estaba en pantalla pasa a existir para los demás.

   En todo lo demás NO va, y eso es lo que lo hace significar algo. Un degradado
   animado en cada botón es un fondo de pantalla: deja de decir «acá pasa algo»
   y pasa a decir «esta app tiene degradados». El resto de la consola se queda
   como está —crema de suelo, hoja blanca, tinta y teal— que es su trabajo.

   Y NADA DE ESTO SE MUEVE PARA QUIEN PIDIÓ QUIETO. Con
   `prefers-reduced-motion` el verde se congela en una posición legible y la
   luz desaparece, en vez de quedar a mitad de camino.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EL RIEL: lo recorrido, en los verdes de la hoja ─────────────────────────
   LO RECORRIDO NO SE MUEVE, Y ESA ES LA MITAD DEL SIGNIFICADO. El primer intento
   animaba también los pasos completados, y el resultado decía «acá sigue pasando
   algo» justo donde ya no pasa nada — cinco degradados latiendo a la vez que
   además se robaban la atención del único que importa. Quedan quietos, en el
   verde hondo de la hoja: se leyó, se transformó, no hace falta volver.
   Se congelan con `background-position` y no con un color plano para que sean el
   MISMO verde que el nodo activo atraviesa al moverse: es una sola hoja, no un
   degradado en un sitio y una pintura en otro. */
.fase-btn.fase-on::before,
.fase-btn:has(~ .fase-btn.fase-on)::before{
  background:var(--hoja);background-size:300% 300%;background-position:35% 50%}

.fase-btn:has(~ .fase-btn.fase-on) .fase-num{
  background:var(--hoja);background-size:300% 300%;background-position:35% 50%;
  border-color:var(--hoja-sombra);color:#fff}

/* ACTIVA: el degradado vivo Y la luz encima. Es el ÚNICO nodo que se mueve, y
   por eso el movimiento significa algo: dice «acá, ahora». Si se movieran todos,
   el movimiento sería el fondo de pantalla de la consola y no señalaría nada. El halo se queda: distingue la activa de las completadas de un
   vistazo, sin tener que comparar verdes. */
.fase-btn.fase-on .fase-num{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--hoja);background-size:300% 300%;border-color:var(--hoja-viva);color:#fff;
  animation:ariaTransforma 18s ease-in-out infinite;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--hoja-viva) 22%,transparent)}
.fase-btn.fase-on .fase-num::after{content:'';position:absolute;inset:0;z-index:-1;
  pointer-events:none;background-image:var(--hoja-luz);
  background-size:180% 100%;background-repeat:no-repeat;
  animation:ariaLuzQueLlega 7s linear infinite}

/* ── LA ACCIÓN QUE COMPROMETE EL TRABAJO ───────────────────────────────────
   Guardar y publicar. La clase doblada gana sin `!important` a las utilidades
   de Tailwind del marcado, que es la misma técnica que usa todo este archivo:
   así los botones conservan sus clases —el JavaScript las lee— y sólo cambia
   cómo se ven.
   MÁS QUIETO QUE EL DEL LOGIN, a propósito: aquél es una pantalla entera con un
   solo botón; éste convive con una barra de mandos y un itinerario. Misma
   identidad, a un volumen que se pueda tener delante ocho horas. */
[data-save="new"].bg-emerald-600,
#btnPublicar.bg-indigo-600{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:transparent;background-image:var(--hoja);background-size:300% 300%;
  color:#fff;border:1px solid rgba(255,255,255,.18);
  animation:ariaTransforma 18s ease-in-out infinite;
  transition:transform .18s ease,box-shadow .18s ease}
[data-save="new"].bg-emerald-600::before,
#btnPublicar.bg-indigo-600::before{content:'';position:absolute;inset:0;z-index:-1;
  pointer-events:none;background-image:var(--hoja-luz);
  background-size:180% 100%;background-repeat:no-repeat;
  animation:ariaLuzQueLlega 7s linear infinite}
[data-save="new"].bg-emerald-600:hover,
#btnPublicar.bg-indigo-600:hover{transform:translateY(-1px);
  box-shadow:0 8px 18px color-mix(in srgb,var(--hoja-sombra) 28%,transparent)}
[data-save="new"].bg-emerald-600:disabled,
#btnPublicar.bg-indigo-600:disabled{animation:none;opacity:.45;transform:none}
[data-save="new"].bg-emerald-600:disabled::before,
#btnPublicar.bg-indigo-600:disabled::before{display:none}

/* GUARDAR ENCIMA SE QUEDA EN OCRE, y no es un olvido: es la que pisa lo que ya
   estaba guardado. El ocre es el aviso de esta paleta, y vestirla con la hoja
   la volvería idéntica a la que no destruye nada. */

/* ── QUIEN PIDIÓ QUIETO NO RECIBE NINGUNA OLA ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  /* Lo recorrido ya estaba quieto; acá se para lo que sí se movía, en la misma
     posición del degradado que usa el resto — así quieto y en movimiento son el
     mismo verde, no dos. */
  .fase-btn.fase-on .fase-num,
  [data-save="new"].bg-emerald-600,
  #btnPublicar.bg-indigo-600{animation:none;background-position:35% 50%}
  .fase-btn.fase-on .fase-num::after,
  [data-save="new"].bg-emerald-600::before,
  #btnPublicar.bg-indigo-600::before{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   §38 · EL CROMO VIVO — la consola vestida de hoja
   ───────────────────────────────────────────────────────────────────────────
   El §37 puso la hoja donde SIGNIFICA (el riel, el botón que compromete). Esto
   es lo otro que hacía falta y que faltaba: que la consola PAREZCA de esta
   casa. Estaba correcta y muerta — una banda de tinta plana, un suelo crema y
   tarjetas blancas, sin una sola seña de ARIA en toda la pantalla.

   DE DÓNDE SALE. De app1, que ya resolvió esto y lo resolvió bien: el degradado
   no vive en un adorno, vive en el CROMO de la aplicación —la barra, el menú—,
   y todas las superficies que lo llevan comparten UN SOLO LIENZO gracias a
   `background-attachment: fixed`. Eso es lo que hace que no se vea como cuatro
   cajas pintadas de verde, sino como una sola hoja por debajo de la que la app
   está recortada. Encima van pastillas de cristal, no botones con borde.

   LO QUE CAMBIA RESPECTO DE app1 SON LOS VERDES. Los de app1 son los suyos
   (#083331 → #0f766e); ARIA lleva los propios, los de su hoja, que ya viven en
   `:root` desde el §37. Misma gramática, distinta voz — que es exactamente lo
   que el dueño de producto pidió cuando dijo que el degradado de la app 1 es de
   la app 1.

   DOS LIENZOS, Y LA DIFERENCIA IMPORTA:
     · Las superficies GRANDES (la barra) usan el lienzo fijo de 200vw × 200vh:
       una ventana grande sobre un degradado enorme muestra un barrido real.
     · Las superficies CHICAS (un botón, un nodo de 30 px) usan su propio lienzo
       de 300% × 300%. Con el lienzo fijo, un círculo de 30 px es una ventana
       diminuta sobre un degradado gigante: se vería de UN color plano, que es
       justo lo contrario de lo que se busca.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA BARRA: una sola hoja bajo la que la app está recortada ─────────────── */
.cab-marca{
  background-color:var(--hoja-sombra);
  background-image:var(--hoja);
  background-size:200vw 200vh;
  background-attachment:fixed;
  animation:ariaTransforma 22s ease-in-out infinite;
  border-bottom:1px solid rgba(255,255,255,.14);
  /* La sombra la separa del suelo crema sin necesidad de un filete duro: es una
     hoja sobre otra, no dos bandas pegadas. */
  box-shadow:0 10px 30px -12px rgba(4,41,31,.45);
  transform:translateZ(0)}

/* LAS PASTILLAS DE LA BARRA, DE CRISTAL. Un borde crema al 16% sobre un
   degradado en movimiento se lee como un rayón; un cristal se apoya encima.
   Es la misma pieza que app1 llama `user-glass-pill`. */
.bt-cab{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--cream);border-radius:99px;
  transition:background var(--sal),border-color var(--sal),color var(--sal),transform var(--sal)}
.bt-cab:hover{background:rgba(255,255,255,.20);border-color:rgba(237,225,207,.45);
  color:#fff;transform:translateY(-1px)}
.cab-marca__idioma{background:rgba(0,0,0,.20);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cab-marca__idioma button.on{background:rgba(255,255,255,.92);color:var(--hoja-sombra)}
/* El logo sobre verde: el archivo claro ya es blanco, pero una sombra corta lo
   despega del degradado en los tramos más claros. */
.logo-marca{filter:drop-shadow(0 1px 3px rgba(4,41,31,.5))}
.cab-marca__tit{text-shadow:0 1px 3px rgba(4,41,31,.45)}

/* La pastilla de sesión (nombre · ir a · salir) vive dentro de la barra y venía
   con el mismo borde duro. */
.ses__ir,.ses__salir{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:99px}
.ses__ir:hover,.ses__salir:hover{background:rgba(255,255,255,.20);color:#fff}

/* ── LA FRANJA DEL PASO A PASO: el suelo, no otra hoja blanca ───────────────
   Era blanca, o sea del mismo material que las tarjetas que vienen abajo, y eso
   aplanaba la pantalla: tres superficies distintas con el mismo aspecto. Pasa a
   crema —el suelo del §5— y así queda la escalera completa: cromo vivo arriba,
   suelo crema, hojas blancas encima. */
.perfil{background:var(--suelo);border-bottom:1px solid var(--ink-14)}

/* ── LA BANDEJA ────────────────────────────────────────────────────────────
   La lista deja de nacer del suelo y pasa a ser una HOJA apoyada en él: bordes
   redondeados de verdad y una sombra suave. El §5 dice que la elevación es por
   material y no por sombra, y se respeta —el material sigue siendo crema→blanco—;
   la sombra acá es apenas el aire entre las dos, no el recurso que las separa. */
.hoja-inicio__lista{border-radius:var(--r);border:1px solid var(--ink-08);
  box-shadow:0 18px 40px -28px rgba(26,38,51,.55)}
/* Cada cotización, con su nervadura. El filete verde a la izquierda crece al
   pasar por encima: es la hoja asomando por debajo de la fila, no un adorno
   nuevo. */
.fila-cotiz{position:relative;transition:background var(--tinta),transform var(--tinta)}
.fila-cotiz::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--hoja);background-size:300% 300%;background-position:35% 50%;
  transform:scaleY(0);transform-origin:center;transition:transform var(--sal)}
.fila-cotiz:hover::before{transform:scaleY(1)}
.fila-cotiz:hover{background:var(--ink-04)}
/* El buscador y el filtro: el foco se marca con el verde de la hoja, no con el
   teal genérico — es el mismo gesto que el botón que compromete el trabajo. */
.hoja-inicio__buscar:focus,.hoja-inicio__sel:focus{outline:0;border-color:var(--hoja-viva);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--hoja-viva) 16%,transparent)}
/* El título de la bandeja, con su nervadura debajo: una línea corta con los
   verdes de la hoja. Es la firma, y va una sola vez por pantalla. */
.hoja-inicio__tit{position:relative;padding-bottom:10px}
.hoja-inicio__tit::after{content:'';position:absolute;left:0;bottom:0;width:72px;height:3px;
  border-radius:2px;background:var(--hoja);background-size:300% 300%;background-position:35% 50%}

/* ── EL ESPACIO DE TRABAJO: suelo crema, hojas blancas ──────────────────────
   El constructor era blanco sobre blanco: el área que se desplaza, las tarjetas
   y el panel, los tres del mismo material. Se le devuelve el suelo para que las
   tarjetas se vean apoyadas en algo. Se hace por el contenedor que ya existe
   —no se toca una clase del marcado— subiendo la especificidad como en el resto
   del archivo. */
#builderSection .bg-slate-50\/50,
#fase1panel .bg-slate-50\/50{background:var(--suelo)}
/* Las tarjetas del constructor pasan a ser hojas: mismo radio que el resto del
   sistema y el aire justo para despegarse del suelo. */
#builderSection .bg-white.rounded-xl,
#fase1panel .bg-white.rounded-xl{border-color:var(--ink-08);
  box-shadow:0 10px 26px -22px rgba(26,38,51,.5)}
/* Y los días del itinerario, que son las hojas que más se miran. */
.dia-tarj{box-shadow:0 10px 26px -22px rgba(26,38,51,.5)}

/* ── EL FOCO, EN TODA LA CONSOLA, ES VERDE HOJA ────────────────────────────
   Tailwind pone `focus:ring-indigo-500` por todo el marcado y el remapeo lo
   volvió teal. Teal es el acento de la casa; la hoja es el de ARIA, y el foco
   —que aparece cien veces al día mientras se teclea— es el sitio donde esa
   diferencia se nota sin gritar. */
#builderSection input:focus,#builderSection textarea:focus,#builderSection select:focus,
#fase1panel input:focus,#fase1panel textarea:focus,#fase1panel select:focus,
.doc-inp:focus,.doc-sel:focus{outline:0;border-color:var(--hoja-viva);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--hoja-viva) 15%,transparent)}

/* ── QUIEN PIDIÓ QUIETO ────────────────────────────────────────────────────
   La barra es la superficie más grande de la pantalla: si algo no puede
   moverse para quien pidió quieto, es ésta. */
@media (prefers-reduced-motion:reduce){
  .cab-marca{animation:none;background-position:35% 50%}
  .fila-cotiz::before{transition:none}
}

/* En pantallas angostas el lienzo fijo se comporta mal en varios navegadores
   móviles (la barra se repinta en cada scroll y el degradado salta). Se le da su
   propio lienzo, que ahí se ve igual de bien porque la barra ocupa casi todo el
   ancho. */
@media (max-width:820px){
  .cab-marca{background-attachment:scroll;background-size:300% 300%}
}

/* ── LA CONVERSACIÓN, LA FASE 5 Y LOS MODALES ──────────────────────────────
   El mismo material en las tres superficies que faltaban. La regla es una sola
   y ya está dicha arriba: suelo crema, hoja blanca encima. Donde había blanco
   sobre blanco no había jerarquía, sólo un plano. */

/* LA CONVERSACIÓN SÓLO NECESITABA EL SUELO. El primer intento le puso además
   una hoja a cada burbuja —fondo blanco, filete y radio del sistema— y eso PISÓ
   el tratamiento que ya tenía: `#chat .burb` (1,0,1) le gana a `.msj--yo .burb`
   (0,2,0), así que la burbuja del vendedor, que es Deep con texto blanco,
   quedaba blanca y con el radio equivocado. El diálogo ya estaba resuelto —los
   dos lados, el agrupado por tanda, la estrella de marca, las esquinas
   asimétricas—; lo único que le faltaba era no ser blanco sobre blanco.
   Es la lección de este pase: revisar antes de mejorar. */
#chat.bg-slate-50{background:var(--suelo)}
/* Sobre el suelo, la burbuja del asistente necesita un pelo más de separación:
   su blanco ya no contrasta contra un panel blanco sino contra el suelo. */
.msj--ia .burb{box-shadow:0 6px 18px -16px rgba(26,38,51,.5)}

/* La tabla de carga: la cabecera es SUELO y las filas son la hoja. Así se
   distingue de un vistazo dónde empieza lo que hay que teclear. */
#fase5 thead.bg-slate-50{background:var(--suelo-2)}
#fase5 thead th{color:var(--deep);letter-spacing:.12em}
#tsCabecera.bg-white{border-color:var(--ink-08);
  box-shadow:0 10px 26px -22px rgba(26,38,51,.5)}

/* Los modales: la cabecera de cada uno pasa a crema, que es lo que la separa
   del cuerpo sin una línea más. Y la hoja flota sobre el velo con el aire del
   resto del sistema, no con la sombra genérica de la plantilla. */
#pickerModal .bg-slate-50\/50,#emailModal .bg-slate-50\/50{background:var(--suelo-2)}
#pickerModal>div,#emailModal>div{box-shadow:0 24px 60px -30px rgba(4,41,31,.55)}

/* EL PANEL DE OPCIONES DEL DOCUMENTO Y LAS PESTAÑAS DE LA FASE 4 ya vestían el
   sistema (crema y filete de tinta, §33): no se tocan. Repetir el tratamiento
   donde ya estaba puesto es como se rompe lo que funcionaba. */


/* ═══════════════════════════════════════════════════════════════════════════
   §39 · LA PASADA FINA — lo que quedaba flojo
   ───────────────────────────────────────────────────────────────────────────
   Tres cosas concretas, ninguna decorativa:
     · el aviso de seguimiento aplastaba a la fila a la que pertenece;
     · los modales eran la plantilla genérica en medio de un sistema que ya no
       lo es;
     · la bandeja tenía todos sus datos al mismo peso, así que no había dónde
       posar el ojo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA BANDEJA: una jerarquía, no seis datos iguales ──────────────────────
   El título manda, el cliente lo acompaña, el TOTAL es la cifra —y es lo que
   se compara entre filas, así que va en cifras de ancho fijo— y la fecha se
   retira. Antes los seis competían y la fila se leía entera cada vez. */
.fila-cotiz__tit{font:400 15px/1.35 var(--sans)}
.fila-cotiz__total{font:400 15px/1 var(--sans);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.fila-cotiz__fecha{font-size:11px;opacity:.75}
/* La fila se levanta al pasar por encima. Con la nervadura verde a la izquierda
   (§38) alcanza para que se lea como un objeto que se puede abrir. */
.fila-cotiz:hover{box-shadow:0 10px 24px -20px rgba(26,38,51,.6);z-index:1}

/* EL SEGUIMIENTO, SUBORDINADO A SU FILA. Era un bloque beige del alto de la
   fila misma, uno por cotización: la lista se volvía una pared de avisos y la
   cotización —que es lo que se viene a buscar— quedaba debajo del aviso.
   Ahora es una línea fina colgada de su fila, con la nervadura que las une. */
.fila-cotiz__seguim.aviso-consola{margin:0 20px 10px 34px;padding:7px 12px;
  background:transparent;border:0;border-left:2px solid var(--hoja-viva);
  border-radius:0;font:300 11.5px/1.5 var(--sans);color:var(--ink-70)}
.fila-cotiz__seguim.aviso-consola b{color:var(--hoja-honda);font-weight:400}
.fila-cotiz__seguim.aviso-consola button{color:var(--hoja-viva)}
.fila-cotiz__seguim:not(.aviso-consola){margin:0 20px 10px 34px;padding:0}

/* Las pastillas de estado: un punto y el nombre, no una cápsula rellena. Seis
   cápsulas de color en una lista de veinte filas es un semáforo; el punto dice
   lo mismo sin gritar y deja que el título mande. */
.fila-cotiz__estado{display:inline-flex;align-items:center;gap:6px;
  background:transparent!important;color:var(--ink-70)!important;padding:4px 2px}
.fila-cotiz__estado::before{content:'';width:7px;height:7px;border-radius:99px;
  background:currentColor;flex:0 0 auto;opacity:.9}
/* Y el color vuelve, pero sólo en el punto: se hereda del que traía la cápsula.
   Se recupera leyendo la clase que el JavaScript ya pone — no se toca una línea
   de código para esto. */
.fila-cotiz__estado.bg-emerald-100,.fila-cotiz__estado.bg-emerald-50{color:var(--green-txt)!important}
.fila-cotiz__estado.bg-sky-100,.fila-cotiz__estado.bg-sky-50,
.fila-cotiz__estado.bg-indigo-100,.fila-cotiz__estado.bg-indigo-50{color:var(--deep)!important}
.fila-cotiz__estado.bg-amber-100,.fila-cotiz__estado.bg-amber-50{color:var(--aviso)!important}
.fila-cotiz__estado.bg-rose-100,.fila-cotiz__estado.bg-red-100{color:var(--error)!important}

/* ── LOS MODALES ───────────────────────────────────────────────────────────
   El velo con el verde de la hoja en vez de negro: lo que queda detrás sigue
   siendo la consola, no un agujero. Y la hoja del modal con el aire del resto
   del sistema. */
#pickerModal,#emailModal{background:rgba(4,41,31,.32)!important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#pickerModal>div,#emailModal>div{border:1px solid var(--ink-08);
  box-shadow:0 30px 70px -35px rgba(4,41,31,.6)}
/* La cabecera del modal lleva la nervadura arriba: es la firma, la misma que el
   título de la bandeja, y dice de qué casa es la ventana que se abrió. */
#pickerModal>div>div:first-child,#emailModal>div>div:first-child{position:relative}
#pickerModal>div>div:first-child::before,#emailModal>div>div:first-child::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--hoja);background-size:300% 300%;background-position:35% 50%}
/* La hoja de notas de crédito ya tenía su tratamiento (§34); sólo se le pone el
   mismo velo verde para que las tres ventanas de la consola abran igual. */
.nc-hoja{background:rgba(4,41,31,.30)}

/* ── LA FICHA PLEGADA DE LA FASE 2 ─────────────────────────────────────────
   Usa la misma cabecera que comisiones y notas: tres tarjetas plegables
   seguidas tienen que abrir y cerrar igual, o cada una parece otra cosa. */
#fichaCard .com-cab__resumen{font-style:normal}

/* ═══════════════════════════════════════════════════════════════════════════
   §40 · SEGUNDA RONDA — las cinco pantallas
   ───────────────────────────────────────────────────────────────────────────
   La primera ronda vistió la consola. Ésta trabaja sobre lo que cada pantalla
   hace: qué se mira, qué se teclea y qué estorba mientras tanto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FASE 5 · LA TABLA DE CARGA ─────────────────────────────────────────────
   Es la pantalla donde el vendedor pasa más rato, y la más dura: trece columnas
   que se leen de izquierda a derecha mientras se teclea en OTRO sistema, con la
   cabeza yendo y viniendo entre dos ventanas. Cada arreglo de acá sale de eso.  */

/* 1 · LA CABECERA NO SE VA. Al bajar a la línea veinte, las columnas quedaban
   arriba fuera de pantalla: «este número, ¿era costo o venta?» se resolvía
   subiendo. Ahora la cabecera se queda pegada y se despega con una sombra
   cuando hay tabla por encima. */
#fase5 thead{position:sticky;top:0;z-index:5}
#fase5 thead th{background:var(--suelo-2);
  box-shadow:inset 0 -1px 0 var(--ink-14),0 6px 12px -10px rgba(26,38,51,.5)}

/* 2 · LA FILA ENTERA SE ILUMINA AL PASARLE POR ENCIMA. Con trece columnas, el
   ojo se cae de renglón a mitad de camino: la banda es la regla bajo el dedo. */
#tsBody tr:hover{background:color-mix(in srgb,var(--hoja-viva) 5%,transparent)}

/* 3 · EL CORTE DE DÍA, CON LA NERVADURA. Era una banda gris más; ahora abre el
   día como lo abre el itinerario de la fase 2. */
#tsBody tr.bg-slate-100\/70 td{background:var(--suelo-2);
  border-left:3px solid var(--hoja-viva);color:var(--deep)}

/* 4 · LO YA TECLEADO SE RETIRA. Marcar la casilla decía «hecho» en un cuadrito
   de 14 px y la línea seguía igual de presente que las que faltan — que son las
   únicas que importan cuando quedan tres de dieciséis. Ahora la fila hecha se
   apaga, y al pasar por encima vuelve entera por si hay que comprobarla. */
#tsBody tr:has(input[data-transcrita]:checked){opacity:.42}
#tsBody tr:has(input[data-transcrita]:checked):hover{opacity:1}
#tsBody tr:has(input[data-transcrita]:checked) .font-medium{text-decoration:line-through;
  text-decoration-color:var(--ink-14)}

/* 5 · EL DINERO, EN CIFRAS QUE SE PUEDEN COMPARAR DE UN VISTAZO, y con el costo
   retirado: el número que se teclea del otro lado es la VENTA. */
#fase5 td:nth-last-child(2),#fase5 td:nth-last-child(3){font-variant-numeric:tabular-nums}
#fase5 td:nth-last-child(3){color:var(--ink-70)}

/* ── FASE 2 · LOS DÍAS ──────────────────────────────────────────────────────
   El número del día era tinta plana, igual que cualquier otro círculo de la
   pantalla. Pasa a los verdes de la hoja: es el mismo lenguaje del riel de
   fases —una cifra en círculo que marca un avance— y así el día se reconoce
   como parte del recorrido y no como un adorno de tarjeta. */
.dia-tarj__num{background:var(--hoja);background-size:300% 300%;
  background-position:35% 50%;color:#fff}
/* Y la tarjeta del día se levanta de verdad al pasarle por encima: es el objeto
   que se arrastra para reordenar, así que tiene que sentirse agarrable. */
.dia-tarj:hover{box-shadow:0 14px 30px -22px rgba(26,38,51,.6)}

/* ── FASE 3 · EL EDITOR ─────────────────────────────────────────────────────
   El inspector flota sobre el lienzo y era una caja blanca sin material. Se le
   da la hoja del sistema: filete de tinta, radio y el aire que la despega del
   documento que tiene debajo. */
.ed-raiz [data-panel]{border:1px solid var(--ink-08);border-radius:var(--r);
  box-shadow:0 24px 50px -28px rgba(4,41,31,.5)}
/* La barra de abajo es un estado, no un mando: se retira de peso y se ordena en
   versalita, que es como el resto del sistema dice «esto es un dato». */
.ed-raiz .ed-pie,.ed-raiz .ed-estado{font-variant-numeric:tabular-nums}

/* ── FASE 4 · EL PAPEL ──────────────────────────────────────────────────────
   El documento del cliente es una HOJA DE PAPEL y se veía como un div blanco.
   La sombra baja y ancha es lo que lo separa del suelo sin inventarle un borde
   que el papel no tiene. */
.doc-papel{box-shadow:0 20px 45px -30px rgba(26,38,51,.65),0 2px 6px -4px rgba(26,38,51,.25)}

/* ── LA BANDEJA · LAS CABECERAS SE QUEDAN ──────────────────────────────────
   Con veinte cotizaciones, los rótulos de columna se iban al primer scroll. */
.hoja-inicio__cabezas{position:sticky;top:0;z-index:4;background:var(--suelo);
  padding-top:10px}

/* ═══════════════════════════════════════════════════════════════════════════
   §41 · LA FASE 5 DEJA DE SER UNA TABLA CUANDO NO CABE
   ───────────────────────────────────────────────────────────────────────────
   Trece columnas no entran en una pantalla angosta, y el panel donde esto se
   usa de verdad —el de Claude, al lado de la conversación— es angosto SIEMPRE.
   Lo que pasaba es lo peor de las dos opciones: scroll horizontal. El vendedor
   teclea en Toursys con la cabeza yendo y viniendo entre dos ventanas, y encima
   tenía que arrastrar la tabla de lado para ver el precio de la línea que
   estaba leyendo — y al volver, ya no sabía en qué renglón iba.

   ES LA MISMA DECISIÓN QUE YA SE TOMÓ PARA LA BANDEJA, y por el mismo motivo
   escrito allá: «una tabla obliga a elegir entre recortar columnas o dejar que
   se salga de la pantalla, que es justo lo que el dueño de producto pidió que
   no pasara más». Una tabla sirve para comparar columnas alineadas; esto es una
   lista de cosas que se teclean UNA POR UNA, y de cada una se necesita todo.

   CADA LÍNEA PASA A SER UNA FICHA con el orden en que se teclea del otro lado:
   qué es y cómo se llama, de quién y con qué código, cuándo, cuánto, y los
   avisos al final. El rótulo de cada dato se pone acá porque la cabecera de la
   tabla desaparece — y un número sin nombre en una ficha es peor que en una
   columna, donde al menos el rótulo está arriba.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  #fase5 .overflow-x-auto{overflow-x:visible}
  #fase5 table,#fase5 tbody,#fase5 tr,#fase5 td{display:block;width:auto}
  #fase5 thead{display:none}

  /* LA FICHA. El filete de la izquierda queda para las familias de servicio, que
     ya lo traen del marcado y son la señal de color de esta pantalla. */
  #tsBody tr{position:relative;border:1px solid var(--ink-08);border-radius:var(--r);
    margin:0 0 10px;padding:12px 14px 12px 42px;background:var(--blanco);
    box-shadow:0 10px 26px -24px rgba(26,38,51,.55)}
  #tsBody tr:hover{background:var(--blanco);box-shadow:0 14px 30px -22px rgba(26,38,51,.6)}

  /* La casilla y el número, en la esquina: son el sitio donde se marca y el
     orden en que se teclea, no dos datos más de la ficha. */
  #tsBody td:nth-child(1){position:absolute;left:12px;top:12px;padding:0}
  #tsBody td:nth-child(2){position:absolute;left:10px;top:38px;padding:0;
    font:400 11px/1 var(--sans);color:var(--ink-70);width:22px;text-align:center}

  /* El servicio manda: es lo que se busca del otro lado. */
  #tsBody td:nth-child(6){padding:0 0 6px;font-size:14px}
  /* Proveedor y código, juntos en una línea de identificación. */
  #tsBody td:nth-child(4),#tsBody td:nth-child(5){display:inline-block;padding:0 12px 6px 0;
    vertical-align:top}
  /* El tipo se va con ellos: su pastilla ya dice de qué familia es. */
  #tsBody td:nth-child(3){display:inline-block;padding:0 12px 6px 0}
  /* Fechas, cantidad y pax en una tira de datos cortos. */
  #tsBody td:nth-child(7),#tsBody td:nth-child(8),
  #tsBody td:nth-child(9),#tsBody td:nth-child(10){display:inline-block;padding:0 14px 6px 0;
    font-size:12px;color:var(--ink-70);text-align:left}
  /* El dinero, al final y destacado: es el número que se teclea. */
  #tsBody td:nth-child(11),#tsBody td:nth-child(12){display:inline-block;
    padding:6px 16px 0 0;text-align:left;font-variant-numeric:tabular-nums}
  #tsBody td:nth-child(12){font-size:15px;color:var(--ink)}
  #tsBody td:nth-child(13){padding:8px 0 0}
  #tsBody td:nth-child(13):empty{display:none}

  /* LOS RÓTULOS. Sin cabecera, un «2027-03-14» suelto no dice si es la entrada o
     la salida, y «1 520,00» no dice si es costo o venta. Van en versalita chica,
     que es como el resto del sistema nombra un dato. */
  #tsBody td:nth-child(7)::before{content:'desde '}
  #tsBody td:nth-child(8)::before{content:'hasta '}
  #tsBody td:nth-child(9)::before{content:'cant. '}
  #tsBody td:nth-child(11)::before{content:'costo '}
  #tsBody td:nth-child(12)::before{content:'venta '}
  #tsBody td:nth-child(7)::before,#tsBody td:nth-child(8)::before,
  #tsBody td:nth-child(9)::before,#tsBody td:nth-child(11)::before,
  #tsBody td:nth-child(12)::before{font:400 9.5px/1 var(--sans);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-70);display:block;margin-bottom:2px}

  /* El corte de día y la cabecera de comisiones: siguen siendo bandas, pero
     ahora son el encabezado de un grupo de fichas. */
  #tsBody tr.bg-slate-100\/70,#tsBody tr.bg-indigo-50\/40{border:0;background:transparent;
    box-shadow:none;padding:14px 0 6px;margin:0}
  #tsBody tr.bg-slate-100\/70 td,#tsBody tr.bg-indigo-50\/40 td{position:static;
    padding:6px 10px;border-radius:8px;background:var(--suelo-2);
    border-left:3px solid var(--hoja-viva);width:auto}
  #tsBody tr.bg-slate-100\/70 td::before,#tsBody tr.bg-indigo-50\/40 td::before{content:none}

  /* Los componentes de un combo se sangran bajo su ficha en vez de fingir una
     fila más: son parte de la línea de arriba, no líneas que se teclean. */
  #tsBody tr.bg-indigo-50\/20{margin-left:22px;background:var(--suelo);border-style:dashed}
  #tsBody tr.bg-indigo-50\/20 td:nth-child(1),
  #tsBody tr.bg-indigo-50\/20 td:nth-child(2){display:none}
  #tsBody tr.bg-indigo-50\/20{padding-left:14px}
}

/* ── Y EL RESTO DE LA CONSOLA, REVISADO A ESE MISMO ANCHO ──────────────────
   El objetivo es el panel angosto, así que lo que se parta ahí está roto. */
@media (max-width:1180px){
  /* La barra de mandos de cada fase envuelve en vez de empujar la fila fuera. */
  .perfil{gap:8px 12px;padding:10px 14px}
  .perfil__grupo{flex-wrap:wrap}
  /* El panel de opciones del documento y su hoja dejan de competir por el ancho:
     el papel manda, que es lo que se está revisando. */
  #docDocumento{flex-direction:column}
  .doc-panel{width:100%;max-width:none}
}

/* ── AFINADO DE LA FICHA: el dinero junto y la venta mandando ──────────────
   En la primera versión el costo y la venta caían en renglones distintos según
   lo que midieran los datos de al lado, y la VENTA —que es el número que se
   teclea del otro lado— quedaba abajo del todo como si fuera una nota al pie.
   Se les da ancho fijo para que vayan siempre juntos y en ese orden. */
@media (max-width:1180px){
  #tsBody tr{padding-bottom:10px}
  /* La tira de datos cortos y el dinero, cada uno en su renglón, separados por
     un filete: arriba el cuándo y el cuánto, abajo la plata. */
  #tsBody td:nth-child(10){margin-right:0}
  #tsBody td:nth-child(11){padding-top:8px;border-top:1px solid var(--ink-08);
    width:48%;margin-top:2px}
  #tsBody td:nth-child(12){padding-top:8px;border-top:1px solid var(--ink-08);
    width:48%;margin-top:2px;font-size:17px;letter-spacing:-.01em}
  #tsBody td:nth-child(12) .font-semibold{font-weight:400}
  /* La venta lleva su rótulo en el verde de la casa: es el dato que se busca. */
  #tsBody td:nth-child(12)::before{color:var(--hoja-honda)}
}

/* ── 36 · LA BARRA DE FORMATO DEL DOCUMENTO (traída de app1, 2026-09-21) ──────
   La de la «Vista previa editable» de app1: fuente, tamaño, deshacer, formato, color,
   copiar formato, alineación y filas/columnas de tabla. Queda pegada arriba mientras
   se recorre el documento. */
.bf{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:8px 10px;margin:0 0 10px;background:var(--blanco);border:1px solid var(--ink-14);border-radius:var(--r)}
.bf-bt,.bf-color{width:32px;height:32px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--ink-14);
  border-radius:var(--r-s);background:transparent;color:var(--ink);cursor:pointer;position:relative;overflow:hidden;
  transition:background-color 120ms linear,border-color 120ms linear}
.bf-bt svg,.bf-color svg{width:16px;height:16px;flex:none}
.bf-bt:hover,.bf-color:hover{border-color:var(--ink-70)}
.bf-bt--on{background:var(--deep);border-color:var(--deep);color:#fff}
.bf-color input{position:absolute;inset:-50%;width:200%;height:200%;opacity:0;cursor:pointer}
.bf-sel{height:32px;max-width:150px;border:1px solid var(--ink-14);border-radius:var(--r-s);padding:0 8px;
  font:300 12.5px/1 var(--sans);background:transparent;color:var(--ink)}
.bf-tam{display:inline-flex;align-items:center;gap:4px;font:400 11px/1 var(--sans);color:var(--ink-70)}
.bf-num{width:46px;height:32px;border:1px solid var(--ink-14);border-radius:var(--r-s);text-align:center;
  font:300 12.5px/1 var(--sans);background:transparent;color:var(--ink);-moz-appearance:textfield}
.bf-num::-webkit-outer-spin-button,.bf-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bf-sep{width:1px;height:22px;background:var(--ink-14);margin:0 4px}
.bf-esp{flex:1}
.bf-estado{font:300 11.5px/1 var(--sans);color:var(--ink-70)}
.bf-restaurar{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--ink-14);
  border-radius:99px;background:transparent;color:var(--ink);font:400 12px/1 var(--sans);cursor:pointer}
.bf-restaurar svg{width:14px;height:14px}
.bf-pincel,.bf-pincel *{cursor:copy!important}
.doc-papel [contenteditable="true"]:focus,.doc-papel[contenteditable="true"]:focus{outline:none}

/* ── 37 · BRIEF, EVIDENCIA E HISTORIAL COMO EN APP1 (2026-09-21) ───────────────
   Luis: «que se vea como la app1, con miniaturas, nombres en orden, todo igual». Los
   mismos bloques de app1 con la piel de ARIA: paneles con cabecera y botón, galerías de
   miniaturas con el nombre debajo, pasajeros plegables numerados, historial en columnas
   con pilas de papeles, y un visor de pantalla completa. Todo por variables: sirve igual
   en la hoja clara y en la de lujo. */
.ob{display:flex;flex-direction:column;gap:16px;max-width:1100px}
.ob-panel{background:var(--suelo-2);border:1px solid var(--ink-14);border-radius:var(--r);overflow:hidden}
.ob-panel__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--ink-14)}
.ob-panel__cab h3{margin:0;display:flex;align-items:center;gap:9px;font:400 11px/1 var(--sans);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.ob-panel__cab h3 svg{width:16px;height:16px;color:var(--ink-70)}
.ob-panel__cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px}
.ob-cuenta{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:99px;
  border:1px solid var(--ink-14);font:400 11px/1 var(--sans);letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.ob-cuenta:empty{display:none}
.ob-acciones{display:flex;gap:8px;flex-wrap:wrap}
.ob-bt{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:99px;cursor:pointer;
  border:1px solid #005565;background:#005565;color:#fff;font:400 12.5px/1 var(--sans);white-space:nowrap}
.ob-bt:hover{background:#006D82;border-color:#006D82;color:#fff}
.ob-bt:disabled{opacity:.6;cursor:progress}
.ob-bt svg{width:15px;height:15px}
.ob-bt--suave{background:transparent;color:var(--ink);border-color:var(--ink-14)}
.ob-bt--suave:hover{background:transparent;color:var(--ink);border-color:var(--ink-70)}
.ob-sub{margin:4px 0 0;display:flex;align-items:center;gap:7px;font:400 10.5px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70)}
.ob-sub svg{width:14px;height:14px}
.ob-rejilla{display:grid;gap:10px}
.ob-rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ob-rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ob-rejilla .doc-lbl{display:block;margin:0 0 5px}
.ob-ancho{grid-column:1/-1}
.ob-separa{margin-top:8px;padding-top:14px;border-top:1px solid var(--ink-14);align-items:end}
.ob-nota{margin:0;font:300 13px/1.5 var(--sans);color:var(--ink-70);max-width:70ch}
.ob-vacio{margin:0;padding:18px;text-align:center;border:1px dashed var(--ink-14);border-radius:var(--r-s,9px);
  font:300 13px/1.5 var(--sans);color:var(--ink-70)}
.ob-lista{display:flex;flex-direction:column;gap:8px}
.ob-lista:empty{display:none}
.ob-borrar{flex:none;width:34px;height:34px;display:inline-grid;place-items:center;border-radius:99px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--ink-70)}
.ob-borrar:hover{border-color:var(--ink-14);color:var(--ink)}
.ob-borrar svg{width:15px;height:15px}
/* El interruptor de white label, como el de app1. */
.ob-interruptor{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
  padding:9px 12px;border:1px solid var(--ink-14);border-radius:var(--r-s,9px);background:var(--blanco);
  font:300 13.5px/1.3 var(--sans);color:var(--ink)}
.ob-interruptor input{position:absolute;opacity:0;pointer-events:none}
.ob-interruptor i{position:relative;flex:none;width:40px;height:22px;border-radius:99px;background:var(--ink-14);transition:background-color .15s}
.ob-interruptor i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(26,38,51,.3);transition:transform .15s}
.ob-interruptor input:checked + i{background:#006D82}
.ob-interruptor input:checked + i::after{transform:translateX(18px)}
.ob-interruptor input:focus-visible + i{outline:2px solid var(--teal);outline-offset:2px}
/* Agentes: nombre, teléfono y papelera en una fila. */
.ob-agente{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center}
/* Pasajeros: tarjeta plegable con su número. */
.ob-pax{background:var(--blanco);border:1px solid var(--ink-14);border-radius:var(--r-s,9px)}
.ob-pax[open]{border-color:var(--ink-70)}
.ob-pax__cab{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 12px;cursor:pointer;list-style:none}
.ob-pax__cab::-webkit-details-marker{display:none}
.ob-pax__num{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:#006D82;color:#fff;font:400 12px/1 var(--sans);font-variant-numeric:tabular-nums}
.ob-pax__nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 14px/1.3 var(--sans);color:var(--ink)}
.ob-pax__campos{padding:12px 14px 14px;border-top:1px solid var(--ink-14)}

/* LA GALERÍA: miniatura cuadrada, nombre debajo, en orden alfabético (lo ordena el script). */
.ga{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:16px 14px}
.ga > .ob-vacio{grid-column:1/-1}
.ga-item{position:relative;margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.ga-cara{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:1px solid var(--ink-14);
  border-radius:var(--r-s,9px);overflow:hidden;cursor:zoom-in;background:var(--blanco)}
.ga-cara img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ga-cara:hover img{transform:scale(1.04)}
.ga-cara:hover{border-color:var(--ink-70)}
.ga-cara:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ga-lupa{position:absolute;right:6px;bottom:6px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:rgba(26,38,51,.62);color:#fff;opacity:0;transition:opacity .15s}
.ga-lupa svg{width:13px;height:13px}
.ga-cara:hover .ga-lupa,.ga-cara:focus-visible .ga-lupa{opacity:1}
.ga-tipo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-70)}
.ga-tipo svg{width:34px;height:34px;stroke-width:1.25}
.ga-tipo b{font-weight:400;font-size:10.5px;letter-spacing:.16em}
.ga-sin{position:absolute;inset:0;background:var(--ink-14)}
.ga-item figcaption{font:300 12px/1.35 var(--sans);color:var(--ink);word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ga-borrar{position:absolute;top:-8px;right:-8px;z-index:2;width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--ink-14);background:var(--blanco);color:var(--ink);cursor:pointer;
  box-shadow:0 2px 6px rgba(26,38,51,.25);opacity:0;transition:opacity .15s}
.ga-borrar svg{width:13px;height:13px}
.ga-item:hover .ga-borrar,.ga-borrar:focus-visible{opacity:1}
.ga-borrar:hover{background:#1A2633;border-color:#EADFCE;color:#fff}
@media (hover:none){.ga-borrar,.ga-lupa{opacity:1}}
.ga-gira{animation:ga-gira 1s linear infinite}
@keyframes ga-gira{to{transform:rotate(360deg)}}

/* EL HISTORIAL: las columnas de app1; en pantalla angosta cada fila se vuelve ficha. */
.hi-cabezas,.hi-fila{display:grid;grid-template-columns:minmax(0,1.6fr) 110px minmax(0,1fr) repeat(3,minmax(0,.9fr));gap:14px;align-items:center}
.hi-cabezas{padding:0 14px 4px;font:400 10px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70)}
.hi-cabezas span:nth-child(2){text-align:right}
.hi{display:flex;flex-direction:column;border:1px solid var(--ink-14);border-radius:var(--r-s,9px);overflow:hidden;background:var(--blanco)}
.hi > .ob-vacio{border:0}
.hi-fila{padding:14px}
.hi-fila + .hi-fila{border-top:1px solid var(--ink-14)}
.hi-fila:hover{background:var(--suelo-2)}
.hi-quien{display:flex;flex-direction:column;gap:3px;min-width:0}
.hi-quien b{font:400 14px/1.3 var(--sans);color:var(--ink)}
.hi-quien small{font:300 12px/1.35 var(--sans);color:var(--ink-70)}
.hi-costo{text-align:right;font:300 17px/1 var(--glare,var(--sans));color:var(--ink);font-variant-numeric:tabular-nums}
.hi-conf{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.hi-num{font:400 12.5px/1.2 var(--sans);letter-spacing:.06em;color:var(--ink);word-break:break-all}
.hi-estado{padding:4px 9px;border-radius:99px;border:1px solid var(--ink-14);font:400 10px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70)}
.hi-estado--ok{background:#006D82;border-color:#006D82;color:#fff}
.hi-estado--parcial{border-color:var(--ink-70);color:var(--ink)}
.hi-vacio{font:300 12px/1.3 var(--sans);color:var(--ink-70)}
.hi-pila{display:flex;align-items:center;position:relative;z-index:0}
.hi-mini{position:relative;width:38px;height:38px;flex:none;padding:0;border-radius:8px;overflow:hidden;cursor:zoom-in;
  border:2px solid var(--blanco);background:var(--suelo-2);box-shadow:0 2px 6px rgba(26,38,51,.22);
  display:grid;place-items:center;color:var(--ink-70);transition:transform .15s}
.hi-mini + .hi-mini,.hi-mini + .hi-mas{margin-left:-12px}
.hi-mini:hover{transform:translateY(-3px);z-index:20!important}
.hi-mini img{width:100%;height:100%;object-fit:cover}
.hi-mini svg{width:17px;height:17px}
.hi-mas{width:38px;height:38px;flex:none;border-radius:8px;border:2px solid var(--blanco);background:#006D82;color:#fff;
  font:400 12px/1 var(--sans);cursor:pointer;position:relative;z-index:0}
@media (max-width:900px){
  .ob-rejilla--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hi-cabezas{display:none}
  .hi-fila{grid-template-columns:1fr 1fr;gap:12px 14px}
  .hi-quien{grid-column:1/-1}
  .hi-costo{text-align:left}
  .hi-fila > [data-rot]::before{content:attr(data-rot);display:block;margin-bottom:6px;font:400 9.5px/1 var(--sans);
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70)}
  .hi-conf::before{margin-bottom:0!important}
}
@media (max-width:560px){
  .ob-rejilla--2,.ob-rejilla--4{grid-template-columns:1fr}
  .ob-panel__cab,.ob-panel__cuerpo{padding-left:14px;padding-right:14px}
  .ob-agente{grid-template-columns:1fr auto}
  .ob-agente input:nth-child(2){grid-row:2;grid-column:1}
  .ga{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 12px}
}

/* EL VISOR: pantalla completa sobre tinta, como el de app1. */
html.vi-abierto{overflow:hidden!important}
.vi{position:fixed;inset:0;z-index:200;background:rgba(26,38,51,.94);display:grid;
  grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:auto minmax(0,1fr)}
.vi.hidden{display:none}
.vi-barra{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;color:#EADFCE}
.vi-nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:300 14px/1.3 var(--sans);color:#fff}
.vi-cuenta{font:400 11px/1 var(--sans);letter-spacing:.16em;color:rgba(234,223,206,.7);font-variant-numeric:tabular-nums}
.vi-protegido{display:inline-flex;align-items:center;gap:6px;font:400 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#EADFCE}
.vi-protegido svg{width:14px;height:14px}
.vi-bt{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:99px;cursor:pointer;
  border:1px solid rgba(234,223,206,.3);background:transparent;color:#EADFCE;font:400 12.5px/1 var(--sans);text-decoration:none}
.vi-bt:hover{border-color:#EADFCE;color:#fff}
.vi-bt svg{width:15px;height:15px}
.vi-cerrar{width:34px;padding:0;justify-content:center}
.vi-flecha{align-self:center;justify-self:center;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(234,223,206,.3);background:rgba(26,38,51,.6);color:#EADFCE}
.vi-flecha:hover{border-color:#EADFCE}
.vi-flecha[hidden]{display:none}
.vi-medio{position:relative;min-height:0;display:grid;place-items:center;padding:0 0 calc(16px + env(safe-area-inset-bottom,0px))}
.vi-medio img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;user-select:none}
.vi-medio iframe{width:100%;height:100%;border:0;border-radius:6px;background:#fff}
.vi-medio [hidden]{display:none}
.vi-marca{position:absolute;inset:0;pointer-events:none;background-repeat:repeat}
@media (max-width:640px){
  .vi{grid-template-columns:0 minmax(0,1fr) 0}
  .vi-flecha{position:fixed;top:50%;transform:translateY(-50%);z-index:2}
  .vi-ant{left:8px}.vi-sig{right:8px}
  .vi-bt:not(.vi-cerrar){padding:0 10px}
  .vi-medio{padding:0 8px calc(12px + env(safe-area-inset-bottom,0px))}
}
.ga-falla{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-70)}
.ga-falla svg{width:34px;height:34px}
.hi-mini .ga-falla svg{width:17px;height:17px}
.doc-bt{display:inline-flex;align-items:center;gap:8px}
.doc-bt svg{width:16px;height:16px}

/* ── 38 · LA VENTANA DE CORREO CON LA IA APAGADA (2026-09-21) ─────────────────
   «Redactar con IA» y el tono son de la IA de la consola, que está apagada: el borrador lo
   trae Claude (preparar_correo_en_aria) o lo escribe el vendedor. */
[data-consola="apagada"] #btnCompose,
[data-consola="apagada"] #emailModal .grid > div:has(#emailTone){ display:none !important; }
[data-consola="apagada"] #emailModal .grid:has(#emailTone){ grid-template-columns:1fr !important; }

/* Brief, Evidencia e Historial: centrados en la hoja (quedaban pegados a la izquierda). */
.ob{ margin-left:auto; margin-right:auto; width:100%; max-width:1180px; }
#docBrief, #docEvidencia, #docHistorial{ padding-left:clamp(12px,2vw,24px); padding-right:clamp(12px,2vw,24px); }

/* La barra de formato en UNA fila en computadora (Luis: «ahorrar esa fila que tapa el
   Restaurar»). Un poco más compacta; en pantallas angostas sigue bajando de renglón. */
@media (min-width:1100px){
  .bf{ flex-wrap:nowrap; gap:3px; padding:6px 8px; }
  .bf-bt,.bf-color{ width:30px; height:30px; }
  .bf-sel{ height:30px; max-width:120px; }
  .bf-num{ height:30px; width:40px; }
  .bf-sep{ margin:0 2px; }
  .bf-esp{ flex:1 1 0; min-width:0; }
  .bf-restaurar{ height:30px; padding:0 10px; flex:none; white-space:nowrap; }
}