/* ============================================================================
   rc-auxiliar.css — capa visual de la entrega del rol Auxiliar (2026-08-17)
   ============================================================================
   Va aparte de styles.css por la misma razón que rc-conductor.css: el rol
   auxiliar es una app dentro de la app, y mezclar sus reglas con las del admin
   ya nos costó una vez.

   Todo está scopeado a #auxiliar-ui. Los tokens --a-* los define styles.css;
   aquí solo se AÑADEN los que la entrega estrena y se redefinen bajo modo
   nocturno.
   ============================================================================ */

#auxiliar-ui {
  /* Superficie intermedia: styles.css tenía card y bg, faltaba el escalón de
     enmedio que la entrega usa para bloques informativos. */
  --a-surf2: #EFF2F5;
  --a-h2a-soft: #FDEDE4;
  --a-a2h-soft: #E6F7F1;
  --a-warn: #B4690E;
  --a-warn-soft: #FDF3E2;
  --a-info: #2563EB;
  --a-info-soft: #EAF1FE;
  --a-err: #B42318;
  --a-err-soft: #FDECEA;
}

/* ── A5 · Modo nocturno del módulo ──────────────────────────────────────────
   NO es el dark genérico del sistema. Palabras del diseñador: es para «una
   persona cansada, dentro de un carro oscuro, a las 11 p.m., con el brillo del
   teléfono al máximo». Negro CÁLIDO en vez de neutro (menos deslumbre en visión
   nocturna), texto marfil y no blanco puro (baja el contraste de ~19:1 a ~13:1,
   sigue sobre AAA pero deja de quemar), y acentos desaturados porque el naranja
   a tope satura demasiado en pupila dilatada.

   Va en #auxiliar-ui[data-ax-night="on"], NO en <html>: el mismo criterio que
   se usó con el conductor en agosto. Si se pusiera en la raíz, el wizard de
   inicio de turno y todo el admin quedarían a medio pintar.
   Los valores son los de tokens.css de la entrega, sin retocar.            */
#auxiliar-ui[data-ax-night="on"] {
  --a-bg:    #0B0A09;
  --a-card:  #16130F;
  --a-surf2: #1C1813;
  --a-text:  #EDE6DB;
  --a-t2:    #A29A8C;
  --a-t3:    #6E675C;
  --a-line:  #262119;
  --a-line2: #211C15;
  --a-accent:#FF8A4C;
  --a-h2a:   #FF8A4C;
  --a-h2a-soft: #2A1A10;
  --a-a2h:   #3DD9A0;
  --a-a2h-soft: #0F2820;
  --a-hotel: #F0B44A;
  --a-ok:    #3DD9A0;
  --a-warn:  #F0B44A;
  --a-warn-soft: #2B2113;
  --a-info:  #6FA8F5;
  --a-info-soft: #172232;
  --a-err:   #F58585;
  --a-err-soft: #2E1818;
}
/* El marco que rodea el "teléfono" también se apaga: si no, queda un halo gris
   claro alrededor de una pantalla negra. */
#auxiliar-root:has(#auxiliar-ui[data-ax-night="on"]) { background: #060505; }
/* Los mapas de Leaflet salen blanquísimos de noche. No se puede teñir el tile
   sin romper la lectura de calles, así que se baja el brillo y se calienta un
   poco: sigue legible y deja de ser una lámpara. */
#auxiliar-ui[data-ax-night="on"] .leaflet-tile-pane {
  filter: brightness(.62) saturate(.75) sepia(.12);
}

/* Fondos claros fijos que quedaron en styles.css antes de que existiera el modo
   nocturno. Son bloques pastel (verde menta, ámbar, rosa) escritos en
   hexadecimal: sin esto, de noche quedan siete parches luminosos sobre negro.
   Se remapean a los tokens suaves, que ya son los oscuros. */
#auxiliar-ui[data-ax-night="on"] .ax-chip.a2h,
#auxiliar-ui[data-ax-night="on"] .ax-opt.a2h .ax-opt-ic,
#auxiliar-ui[data-ax-night="on"] .ax-hint.ok,
#auxiliar-ui[data-ax-night="on"] .ax-success,
#auxiliar-ui[data-ax-night="on"] .ax-onboard-badge,
#auxiliar-ui[data-ax-night="on"] .ax-late.ok,
#auxiliar-ui[data-ax-night="on"] .ax-wait {
  background: var(--a-a2h-soft); color: var(--a-a2h);
}
#auxiliar-ui[data-ax-night="on"] .ax-chip.h2a,
#auxiliar-ui[data-ax-night="on"] .ax-opt.h2a .ax-opt-ic,
#auxiliar-ui[data-ax-night="on"] .ax-tag.on {
  background: var(--a-h2a-soft); color: var(--a-h2a);
}
#auxiliar-ui[data-ax-night="on"] .ax-onboard-badge.wait,
#auxiliar-ui[data-ax-night="on"] .ax-late.warn {
  background: var(--a-warn-soft); color: var(--a-warn);
}
#auxiliar-ui[data-ax-night="on"] .ax-late.late,
#auxiliar-ui[data-ax-night="on"] .ax-wait.over,
#auxiliar-ui[data-ax-night="on"] .ax-hint.bad {
  background: var(--a-err-soft); color: var(--a-err);
}
#auxiliar-ui[data-ax-night="on"] .ax-cancel-box {
  background: var(--a-err-soft); border-color: var(--a-err);
}
#auxiliar-ui[data-ax-night="on"] .ax-btn-ghost.ax-danger {
  color: var(--a-err); border-color: var(--a-err);
}
/* El hint neutro y el resto de superficies ya salen de tokens, así que no hay
   que tocarlos. */

/* La escala de demora puede traer una segunda línea: el icono se alinea arriba
   para no quedar centrado contra dos renglones. */
#auxiliar-ui .ax-late { align-items: flex-start; }
#auxiliar-ui .ax-late .icon { margin-top: 1px; }

/* ── Control de tema en Perfil (Automático · Claro · Nocturno) ───────────── */
#auxiliar-ui .axn-theme { display: flex; gap: 6px; margin: 4px 0 2px; }
#auxiliar-ui .axn-opt {
  flex: 1; padding: 11px 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--a-line); background: var(--a-card);
  color: var(--a-t2); font: inherit; font-size: 12.5px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
#auxiliar-ui .axn-opt.on {
  border-color: var(--a-accent); background: var(--a-h2a-soft); color: var(--a-accent);
}
#auxiliar-ui .axn-opt .icon { width: 16px; height: 16px; }
#auxiliar-ui .axn-note { font-size: 12px; color: var(--a-t3); margin: 8px 2px 0; line-height: 1.5; }

/* ── §7 · Paso 3 sobre el catálogo de residencias ────────────────────────── */
#auxiliar-ui .axr-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--a-t3); margin: 16px 2px 8px;
}
#auxiliar-ui .axr-load {
  display: flex; align-items: center; gap: 10px; padding: 18px 4px;
  color: var(--a-t2); font-size: 13.5px;
}
#auxiliar-ui .axr-spin {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--a-line); border-top-color: var(--a-accent);
  animation: axr-spin .7s linear infinite;
}
@keyframes axr-spin { to { transform: rotate(360deg); } }

/* El punto guardado. Es el atajo del rediseño: para 64 de los 102 tripulantes
   el paso 3 se resuelve aquí, sin buscar y sin pin. */
#auxiliar-ui .axr-saved {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 13px; padding: 14px 15px;
  border-radius: 14px; border: 1px solid var(--a-line); background: var(--a-card);
}
#auxiliar-ui .axr-saved-ic {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  background: var(--a-h2a-soft); color: var(--a-h2a);
  display: flex; align-items: center; justify-content: center;
}
#auxiliar-ui .axr-saved-txt { flex: 1; min-width: 0; }
#auxiliar-ui .axr-saved-txt b { display: block; font-size: 15.5px; font-weight: 700; color: var(--a-text); }
#auxiliar-ui .axr-saved-txt > span { display: block; font-size: 12.5px; color: var(--a-t2); margin-top: 1px; }
#auxiliar-ui .axr-saved-txt em {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 11px; font-style: normal; font-weight: 700; color: var(--a-a2h);
}
#auxiliar-ui .axr-saved-txt em .icon { width: 12px; height: 12px; }
#auxiliar-ui .axr-chev { width: 16px; height: 16px; color: var(--a-t3); flex: 0 0 auto; }

/* Buscador */
#auxiliar-ui .axr-search { position: relative; margin-bottom: 10px; }
#auxiliar-ui .axr-search > .icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--a-t3); pointer-events: none;
}
#auxiliar-ui .axr-search input {
  width: 100%; height: 50px; padding: 0 40px 0 42px; box-sizing: border-box;
  font: inherit; font-size: 15.5px; color: var(--a-text);
  border: 1px solid var(--a-line); border-radius: 12px;
  background: var(--a-card); outline: none;
}
#auxiliar-ui .axr-search input:focus { border-color: var(--a-accent); }
#auxiliar-ui .axr-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  color: var(--a-t3); display: flex; align-items: center; justify-content: center;
}

/* Lista del catálogo */
#auxiliar-ui .axr-list {
  border-radius: 14px; border: 1px solid var(--a-line);
  background: var(--a-card); overflow: hidden;
}
#auxiliar-ui .axr-row {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  border: 0; border-top: 1px solid var(--a-line); background: transparent;
  padding: 13px 15px; display: flex; align-items: center; gap: 12px;
}
#auxiliar-ui .axr-row.first { border-top: 0; }
#auxiliar-ui .axr-row:active { background: var(--a-surf2); }
#auxiliar-ui .axr-row-txt { flex: 1; min-width: 0; }
#auxiliar-ui .axr-row-txt b { display: block; font-size: 14.5px; font-weight: 650; color: var(--a-text); }
#auxiliar-ui .axr-row-txt span { display: block; font-size: 12px; color: var(--a-t2); margin-top: 1px; }
/* Buscador primero (15-sep-2026): sin texto la lista existe pero vacía —para
   que onQuery la llene sin repintar— y el marco vacío no se ve. */
#auxiliar-ui .axr-list:empty { display: none; }
#auxiliar-ui .axr-hint { font-size: 12.5px; color: var(--a-t2); margin: 0 2px 10px; line-height: 1.45; }
#auxiliar-ui .axr-hint[hidden] { display: none; }
#auxiliar-ui .axr-none { padding: 20px 16px; text-align: center; }
#auxiliar-ui .axr-none b { display: block; font-size: 14px; color: var(--a-text); }
#auxiliar-ui .axr-none span { display: block; font-size: 12.5px; color: var(--a-t2); margin-top: 4px; line-height: 1.5; }

/* La excepción: disponible, pero sin protagonismo (borde punteado, sin relleno) */
#auxiliar-ui .axr-manual {
  width: 100%; margin-top: 12px; padding: 13px 15px; border-radius: 14px;
  border: 1px dashed var(--a-line); background: transparent; font: inherit;
  cursor: pointer; text-align: left; display: flex; align-items: center; gap: 12px;
}
#auxiliar-ui .axr-manual-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: var(--a-surf2); color: var(--a-t2);
  display: flex; align-items: center; justify-content: center;
}
#auxiliar-ui .axr-manual-txt { flex: 1; }
#auxiliar-ui .axr-manual-txt b { display: block; font-size: 14px; font-weight: 650; color: var(--a-text); }
#auxiliar-ui .axr-manual-txt span { display: block; font-size: 12px; color: var(--a-t2); margin-top: 1px; }
/* Volver al catálogo desde el camino manual */
#auxiliar-ui .axr-back-cat {
  width: 100%; margin: 10px 0 0; padding: 12px; border-radius: 12px;
  border: 1px solid var(--a-line); background: var(--a-card); font: inherit;
  font-size: 13px; font-weight: 650; color: var(--a-accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* Confirmación del punto elegido: mapa con el pin FIJO */
#auxiliar-ui .axr-picked {
  border-radius: 16px; border: 1px solid var(--a-line);
  background: var(--a-card); overflow: hidden; margin-top: 4px;
}
#auxiliar-ui .axr-picked-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 14px 15px 12px;
}
#auxiliar-ui .axr-picked-head b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
#auxiliar-ui .axr-picked-head span { display: block; font-size: 12.5px; color: var(--a-t2); margin-top: 2px; }
#auxiliar-ui .axr-map { height: 150px; background: var(--a-surf2); }
/* Pin fijo: sin cursor de arrastre, para que nadie intente moverlo. */
#auxiliar-ui .axr-map .leaflet-marker-icon { cursor: default; }
#auxiliar-ui .axr-verified {
  display: flex; align-items: center; gap: 11px; padding: 12px 15px;
  background: var(--a-card);
}
#auxiliar-ui .axr-verified-ic {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--a-a2h-soft); color: var(--a-a2h);
  display: flex; align-items: center; justify-content: center;
}
#auxiliar-ui .axr-verified b {
  display: block; font-size: 11px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--a-a2h);
}
#auxiliar-ui .axr-verified span { display: block; font-size: 12.5px; color: var(--a-t2); margin-top: 1px; }
#auxiliar-ui .axr-save {
  width: 100%; margin-top: 10px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--a-line); background: var(--a-card); font: inherit;
  font-size: 13px; font-weight: 650; color: var(--a-t2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
#auxiliar-ui .axr-save.busy { opacity: .6; }

/* ── Bloque A · Presentación ─────────────────────────────────────────────── */
/* Primer ingreso: 3 pantallas a pantalla completa, dentro del mismo marco.
   REHECHAS el 7-sep-2026. Lo anterior era un icono de 30 px en un cuadrado
   redondeado, todo pegado arriba a la izquierda y un hueco muerto hasta el
   botón. La profa lo dijo sin rodeos: «muy estáticas, no están centradas, no
   muestran nada nuevo». Ahora:
     · el eje es el CENTRO — escena y texto centrados, botón abajo;
     · cada pantalla trae una escena SVG que se anima al entrar y cuenta lo
       mismo que el título (la ruta se traza, el pin cae, el carro llega);
     · el texto entra escalonado detrás de la escena, no de golpe.
   Todo es CSS: ni librerías ni imágenes. Y se apaga entero con «reducir
   movimiento» (al final del bloque), donde el estado base ya es el final —
   por eso ninguna regla de aquí deja algo invisible esperando su animación. */
#auxiliar-ui .axo {
  flex: 1; display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 22px 20px;
  overflow-y: auto;
}
/* Encabezado: en qué pantalla va y la salida. El conteo en texto es para quien
   no distinga los puntos (y para lectores de pantalla, que los ignoran). */
#auxiliar-ui .axo-top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 32px; flex: 0 0 auto;
}
#auxiliar-ui .axo-count {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--a-t3, var(--a-t2));
}
#auxiliar-ui .axo-skip {
  background: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 650;
  color: var(--a-t2); cursor: pointer; padding: 6px;
}
/* El escenario se come el espacio sobrante: es lo que centra la pantalla. */
#auxiliar-ui .axo-stage {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  min-height: 168px; padding: 8px 0;
}
#auxiliar-ui .axo-stage-sm { flex: 0 0 auto; min-height: 132px; }
#auxiliar-ui .axo-scene { width: 100%; max-width: 320px; height: auto; display: block; }
#auxiliar-ui .axo-copy { flex: 0 0 auto; text-align: center; }
#auxiliar-ui .axo-copy h1 {
  font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.18; margin: 0;
}
#auxiliar-ui .axo-copy p {
  font-size: 14.5px; color: var(--a-t2); line-height: 1.6; margin: 10px auto 0; max-width: 32ch;
}
/* Los puntos ahora son botones: tocarlos salta a esa pantalla. El activo se
   estira en vez de solo cambiar de color — se ve de reojo cuánto falta. */
#auxiliar-ui .axo-dots {
  display: flex; gap: 7px; justify-content: center; margin: 22px 0 0; flex: 0 0 auto;
}
#auxiliar-ui .axo-dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px;
  background: var(--a-line); cursor: pointer;
  transition: width .32s cubic-bezier(.2,.8,.3,1), background .32s ease;
}
#auxiliar-ui .axo-dot.seen { background: var(--a-accent); opacity: .45; }
#auxiliar-ui .axo-dot.on { width: 26px; background: var(--a-accent); }
#auxiliar-ui .axo-acts {
  margin-top: 18px; padding-bottom: 4px; display: flex; flex-direction: column; gap: 6px;
  flex: 0 0 auto;
}
/* El permiso conserva su lista, así que no se centra a la fuerza: la escena es
   más pequeña y el texto sigue centrado, pero las razones se leen alineadas. */
#auxiliar-ui .axo-ask .axo-copy h1 { font-size: 23px; }
#auxiliar-ui .axo-ask .axo-acts { margin-top: 14px; }

/* ── Entrada escalonada ──────────────────────────────────────────────────── */
@keyframes axo-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes axo-pop { from { opacity: 0; transform: scale(.9); } }
#auxiliar-ui .axo .axo-scene { animation: axo-pop .55s cubic-bezier(.2,.8,.3,1) both; }
#auxiliar-ui .axo .axo-copy h1 { animation: axo-in .5s .16s cubic-bezier(.2,.7,.3,1) both; }
#auxiliar-ui .axo .axo-copy p  { animation: axo-in .5s .26s cubic-bezier(.2,.7,.3,1) both; }
#auxiliar-ui .axo .axo-why     { animation: axo-in .5s .3s cubic-bezier(.2,.7,.3,1) both; }
#auxiliar-ui .axo .axo-dots    { animation: axo-in .45s .34s cubic-bezier(.2,.7,.3,1) both; }
#auxiliar-ui .axo .axo-acts    { animation: axo-in .45s .4s cubic-bezier(.2,.7,.3,1) both; }

/* ── Escenas ─────────────────────────────────────────────────────────────── */
/* Comunes */
/* El halo es ambiente, no un objeto: con relleno plano se veía como una mancha
   marrón detrás del dibujo. Es un degradado que se apaga en el borde, y respira
   despacio para que la pantalla no quede del todo quieta. */
#auxiliar-ui .axo-scene .ax-g0 { stop-color: var(--a-h2a); stop-opacity: .26; }
#auxiliar-ui .axo-scene .ax-g1 { stop-color: var(--a-h2a); stop-opacity: 0; }
#auxiliar-ui .axo-scene .ax-glow {
  fill: url(#axo-glow);
  transform-box: view-box; transform-origin: 50% 50%;
  animation: ax-breathe 7s ease-in-out infinite;
}
@keyframes ax-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
#auxiliar-ui .axo-scene { --ax-ink: var(--a-text); }

/* 1 · La ruta se traza sola y el avión la recorre
   El bloque de abajo a la izquierda es un GLOBO DE CHAT (idea de la profa,
   7-sep): lo que el tripulante hace es escribir lo que necesita — y de ese
   mensaje sale la ruta. El avión no es una flecha quieta al final: es una
   silueta que RECORRE la línea, una y otra vez, siguiendo su curva.
   El recorrido usa offset-path, que sigue la trayectoria de verdad (y gira el
   avión con ella). Donde no exista, queda la animación de reserva de más
   abajo: el avión hace el mismo viaje en línea recta. */
#auxiliar-ui .axo-ruta .ax-bub { fill: var(--a-card); stroke: var(--a-line); stroke-width: 2; }
#auxiliar-ui .axo-ruta .ax-card .ax-l1,
#auxiliar-ui .axo-ruta .ax-card .ax-l2,
#auxiliar-ui .axo-ruta .ax-card .ax-l3 { fill: var(--a-line); }
#auxiliar-ui .axo-ruta .ax-card .ax-l1 { animation: axo-in .4s .45s both; }
#auxiliar-ui .axo-ruta .ax-card .ax-l2 { animation: axo-in .4s .57s both; }
#auxiliar-ui .axo-ruta .ax-card .ax-l3 { animation: axo-in .4s .69s both; fill: var(--a-accent); opacity: .55; }
#auxiliar-ui .axo-ruta .ax-track {
  stroke: var(--a-line); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .5 9;
}
#auxiliar-ui .axo-ruta .ax-route {
  stroke: var(--a-accent); stroke-width: 3.5; stroke-linecap: round;
  /* 140,7 es el largo real del trazo (ver la nota del bloque @supports): con un
     número mayor la línea se queda quieta al principio, esperando a que el
     desfase baje del largo de verdad. */
  stroke-dasharray: 140.7; stroke-dashoffset: 0;
  animation: ax-draw 1.2s .3s cubic-bezier(.4,.1,.3,1) both;
}
@keyframes ax-draw { from { stroke-dashoffset: 140.7; } }
#auxiliar-ui .axo-ruta .ax-dot { fill: var(--a-accent); }

/* Reserva: sin offset-path el avión viaja en recta y la línea se dibuja sola
   una vez. Es el comportamiento de antes, para navegadores viejos. */
#auxiliar-ui .axo-ruta .ax-plane {
  fill: var(--a-accent);
  transform: translate(168px, 40px) rotate(-34deg);
  animation: ax-fly 3.6s .5s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ax-fly {
  0%   { transform: translate(44px, 100px) rotate(-18deg); opacity: 0; }
  10%  { opacity: 1; }
  60%  { transform: translate(168px, 40px) rotate(-34deg); opacity: 1; }
  74%  { transform: translate(196px, 26px) rotate(-34deg); opacity: 0; }
  100% { transform: translate(196px, 26px) rotate(-34deg); opacity: 0; }
}

/* Lo bueno: el avión va PEGADO a la curva, se inclina con ella y VA DEJANDO LA
   LÍNEA DETRÁS (profa, 7-sep: «que mientras ande trace la línea»). Antes la
   ruta se dibujaba una vez al entrar y después el avión pasaba por encima de
   algo ya hecho — que es lo que se veía estático.

   CÓMO QUEDAN SINCRONIZADOS, que es lo delicado: el avance del avión
   (offset-distance) y el largo dibujado de la línea (stroke-dashoffset) son dos
   animaciones distintas, así que solo van juntas si recorren la MISMA curva de
   progreso. Por eso las dos tienen igual duración, igual retardo, igual
   cubic-bezier y —clave— keyframes en los MISMOS porcentajes (0 y 60): un
   fotograma intermedio en una sola de ellas parte su interpolación en dos
   tramos y la punta de la línea se despega del avión. Las opacidades van en
   animaciones aparte justo por eso.

   140.7 = el largo real del trazo, medido con path.getTotalLength(). Si se
   cambia la curva de la ruta hay que volver a medirlo, o la línea termina antes
   o después que el avión. Comprobado en el navegador: la punta de la línea y el
   avión no se separan más de 0,03 de las 140,7 unidades del trazo. */
@supports (offset-path: path("M0 0L1 1")) {
  #auxiliar-ui .axo-ruta .ax-route {
    stroke-dasharray: 140.7; stroke-dashoffset: 140.7;
    animation: ax-trail 3.6s .5s cubic-bezier(.45,.05,.55,.95) infinite,
               ax-trailfade 3.6s .5s linear infinite;
  }
  @keyframes ax-trail { 0% { stroke-dashoffset: 140.7; } 60% { stroke-dashoffset: 0; } }
  /* La estela se borra al final del ciclo: si se quedara, la segunda vuelta
     sería otra vez un avión sobre una línea ya hecha. */
  @keyframes ax-trailfade { 0%, 72% { opacity: 1; } 88%, 100% { opacity: 0; } }

  #auxiliar-ui .axo-ruta .ax-plane {
    offset-path: path("M44 100C92 96 130 76 168 40");
    offset-rotate: auto;
    /* El avión se dibuja a tamaño de icono y se agranda aquí: así la silueta
       conserva el trazo fino y se lee como avión y no como mancha. */
    transform: scale(1.3);
    animation: ax-travel 3.6s .5s cubic-bezier(.45,.05,.55,.95) infinite,
               ax-planefade 3.6s .5s linear infinite;
  }
  @keyframes ax-travel { 0% { offset-distance: 0%; } 60% { offset-distance: 100%; } }
  @keyframes ax-planefade { 0%, 3% { opacity: 0; } 10%, 68% { opacity: 1; } 80%, 100% { opacity: 0; } }
}

/* 2 · El pin cae en la portería y queda verificado */
#auxiliar-ui .axo-punto .ax-map rect:first-child { fill: var(--a-surf2); stroke: var(--a-line); stroke-width: 2; }
#auxiliar-ui .axo-punto .ax-st { stroke: var(--a-line); stroke-width: 2.5; stroke-linecap: round; }
#auxiliar-ui .axo-punto .ax-blk { fill: var(--a-line); opacity: .75; }
#auxiliar-ui .axo-punto .ax-pin { fill: var(--a-accent); animation: ax-drop 1s .35s cubic-bezier(.3,1.3,.5,1) both; }
#auxiliar-ui .axo-punto .ax-pin-hole { fill: var(--a-card); }
@keyframes ax-drop {
  0%   { transform: translateY(-86px); opacity: 0; }
  30%  { opacity: 1; }
  62%  { transform: translateY(7px); }
  80%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
#auxiliar-ui .axo-punto .ax-ring {
  fill: none; stroke: var(--a-accent); stroke-width: 2.5; opacity: 0;
  transform-box: view-box; transform-origin: 140px 118px;
  animation: ax-ping 2.4s 1.2s ease-out infinite;
}
#auxiliar-ui .axo-punto .ax-ring2 { animation-delay: 2s; }
@keyframes ax-ping {
  0%   { transform: scale(.5); opacity: .75; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
#auxiliar-ui .axo-punto .ax-ok circle { fill: var(--a-a2h, #10B981); }
#auxiliar-ui .axo-punto .ax-tick { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
#auxiliar-ui .axo-punto .ax-ok {
  transform-box: view-box; transform-origin: 188px 82px;
  animation: axo-pop .5s 1.15s cubic-bezier(.2,1.4,.4,1) both;
}

/* 3 · El carro llega, con quién lo maneja */
#auxiliar-ui .axo-cond .ax-road { stroke: var(--a-line); stroke-width: 3; stroke-linecap: round; }
#auxiliar-ui .axo-cond .ax-dashes {
  stroke: var(--a-line); stroke-width: 3; stroke-linecap: round; opacity: .8;
  animation: ax-move 1.1s linear infinite;
}
@keyframes ax-move { from { transform: translateX(0); } to { transform: translateX(-40px); } }
#auxiliar-ui .axo-cond .ax-car { animation: ax-drivein 1.1s .25s cubic-bezier(.25,.9,.3,1) both; }
@keyframes ax-drivein {
  0%   { transform: translateX(-230px); opacity: 0; }
  20%  { opacity: 1; }
  82%  { transform: translateX(9px); }
  100% { transform: translateX(0); }
}
#auxiliar-ui .axo-cond .ax-body { fill: var(--a-accent); }
#auxiliar-ui .axo-cond .ax-win { fill: var(--a-card); stroke: var(--a-accent); stroke-width: 2; }
#auxiliar-ui .axo-cond .ax-wheel { fill: var(--a-text); }
#auxiliar-ui .axo-cond .ax-chip rect:first-child { fill: var(--a-card); stroke: var(--a-line); stroke-width: 2; }
#auxiliar-ui .axo-cond .ax-av { fill: var(--a-h2a-soft); stroke: var(--a-accent); stroke-width: 2; }
#auxiliar-ui .axo-cond .ax-chip .ax-l1 { fill: var(--a-line); }
#auxiliar-ui .axo-cond .ax-chip .ax-l2 { fill: var(--a-accent); opacity: .6; }
#auxiliar-ui .axo-cond .ax-chip {
  transform-box: view-box; transform-origin: 140px 66px;
  animation: axo-pop .5s 1.05s cubic-bezier(.2,1.35,.4,1) both;
}

/* 4 · La campana del permiso */
#auxiliar-ui .axo-bell .ax-bell {
  fill: var(--a-accent);
  transform-box: view-box; transform-origin: 140px 30px;
  animation: ax-swing 2.8s .4s ease-in-out infinite;
}
@keyframes ax-swing {
  0%, 62%, 100% { transform: rotate(0deg); }
  68% { transform: rotate(9deg); }
  74% { transform: rotate(-7deg); }
  80% { transform: rotate(5deg); }
  86% { transform: rotate(-3deg); }
}
#auxiliar-ui .axo-bell .ax-clap { fill: var(--a-accent); }
#auxiliar-ui .axo-bell .ax-wave {
  stroke: var(--a-accent); stroke-width: 3; stroke-linecap: round; fill: none;
  transform-box: view-box; transform-origin: 140px 73px;
  animation: ax-waves 2.8s .4s ease-out infinite;
}
#auxiliar-ui .axo-bell .ax-w2 { animation-delay: .5s; }
@keyframes ax-waves {
  0%, 55% { opacity: 0; transform: scale(.85); }
  70%     { opacity: .9; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1.15); }
}

/* El permiso de notificaciones, con el motivo delante */
#auxiliar-ui .axo-why {
  border: 1px solid var(--a-line); border-radius: 14px; background: var(--a-card);
  padding: 4px 15px; margin: 18px 0 0;
}
#auxiliar-ui .axo-why-row {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 0;
  border-top: 1px solid var(--a-line2);
}
#auxiliar-ui .axo-why-row:first-child { border-top: 0; }
#auxiliar-ui .axo-why-row .icon { color: var(--a-accent); margin-top: 2px; flex: 0 0 auto; }
#auxiliar-ui .axo-why-row b { display: block; font-size: 13.5px; font-weight: 650; }
#auxiliar-ui .axo-why-row span { display: block; font-size: 12.5px; color: var(--a-t2); margin-top: 1px; line-height: 1.45; }

/* Quien pidió menos movimiento ve las mismas pantallas, quietas. No se apaga
   solo el adorno: se apaga TODO, incluida la entrada del texto, porque el
   estado base de cada regla de arriba ya es el estado final. */
@media (prefers-reduced-motion: reduce) {
  #auxiliar-ui .axo *, #auxiliar-ui .axo-scene * { animation: none !important; }
  #auxiliar-ui .axo-dot { transition: none; }
  /* La ruta es la excepción: su estado base es «sin dibujar» porque la dibuja
     el avión. Quieta se muestra completa, con el avión ya al final. */
  #auxiliar-ui .axo-ruta .ax-route { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  #auxiliar-ui .axo-ruta .ax-plane { offset-distance: 100% !important; opacity: 1 !important; }
}

/* Estados adversos: sin señal / error / soporte */
#auxiliar-ui .axs {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 30px 26px;
}
#auxiliar-ui .axs-ic {
  width: 60px; height: 60px; border-radius: 18px; margin-bottom: 16px;
  background: var(--a-surf2); color: var(--a-t2);
  display: flex; align-items: center; justify-content: center;
}
#auxiliar-ui .axs-ic .icon { width: 26px; height: 26px; }
#auxiliar-ui .axs h2 { font-size: 19px; font-weight: 750; margin: 0; letter-spacing: -.01em; }
#auxiliar-ui .axs p { font-size: 13.5px; color: var(--a-t2); line-height: 1.6; margin: 8px 0 18px; max-width: 300px; }

/* Soporte: canales reales, sin WhatsApp (hay chat propio y llamada) */
#auxiliar-ui .axs-ch {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border-radius: 14px; border: 1px solid var(--a-line);
  background: var(--a-card); margin-bottom: 8px;
}
#auxiliar-ui .axs-ch-ic {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  background: var(--a-h2a-soft); color: var(--a-h2a);
  display: flex; align-items: center; justify-content: center;
}
#auxiliar-ui .axs-ch-txt { flex: 1; min-width: 0; }
#auxiliar-ui .axs-ch-txt b { display: block; font-size: 14px; font-weight: 650; }
#auxiliar-ui .axs-ch-txt span { display: block; font-size: 12px; color: var(--a-t2); margin-top: 1px; }

/* ── B2 · Escala de demora medida contra la presentación ─────────────────── */
/* Cuatro niveles con número concreto. El nivel se decide en auxiliar.js; acá
   solo vive el color. `ok` reusa .ax-late de styles.css. */
#auxiliar-ui .ax-late.margin {
  background: var(--a-info-soft); color: var(--a-info); border-color: transparent;
}
#auxiliar-ui .ax-late.tight {
  background: var(--a-warn-soft); color: var(--a-warn); border-color: transparent;
}
#auxiliar-ui .ax-late.miss {
  background: var(--a-err-soft); color: var(--a-err); border-color: transparent;
}
#auxiliar-ui .ax-late-sub {
  display: block; font-size: 12px; font-weight: 500; opacity: .85; margin-top: 3px;
}

/* ── B3 · La política, antes de confirmar ────────────────────────────────── */
#auxiliar-ui .axp {
  border: 1px solid var(--a-line); border-radius: 14px;
  background: var(--a-card); padding: 4px 15px; margin-top: 12px;
}
#auxiliar-ui .axp-row {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 0;
  border-top: 1px solid var(--a-line2);
}
#auxiliar-ui .axp-row:first-child { border-top: 0; }
#auxiliar-ui .axp-row .icon { color: var(--a-t3); margin-top: 2px; flex: 0 0 auto; }
#auxiliar-ui .axp-row b { display: block; font-size: 13.5px; font-weight: 650; }
#auxiliar-ui .axp-row span { display: block; font-size: 12.5px; color: var(--a-t2); margin-top: 1px; line-height: 1.45; }

/* ── Premium I · «Repetir el de siempre» ─────────────────────────────────── */
#auxiliar-ui .axq {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  border-radius: 16px; border: 1px solid var(--a-line);
  background: var(--a-card); padding: 14px 15px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 12px;
}
#auxiliar-ui .axq-ic {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
  background: var(--a-h2a-soft); color: var(--a-h2a);
  display: flex; align-items: center; justify-content: center;
}
#auxiliar-ui .axq-txt { flex: 1; min-width: 0; }
#auxiliar-ui .axq-txt b { display: block; font-size: 14.5px; font-weight: 700; }
#auxiliar-ui .axq-txt span {
  display: block; font-size: 12.5px; color: var(--a-t2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#auxiliar-ui .axr-ok{color:var(--a-a2h)}

/* ============================================================================
   0069 · Traslado privado
   ============================================================================
   Piel «Rendio Select» (15-sep-2026): sigue a LevelCard (aux-service-levels.jsx)
   y VipIntro (aux-vip.jsx) del diseñador. Dos capas distintas a propósito:
   · La tarjeta COMPARTIDA del paso sale de los tokens del rol y se apaga de
     noche como todo lo demás: no es una isla de otro color en mitad del flujo.
   · La tarjeta PRIVADA, la portada, la franja del resumen y el botón de latón
     usan paleta FIJA — "papel y tinta" (espresso + latón + serif), decisión del
     diseñador. Es el único bloque del rol que no cambia de noche: es la pieza
     que vende el servicio y su carácter no depende de la hora. Por eso aquí SÍ
     hay hexadecimales: son los --vip-* de tokens.css, no un descuido.
   ============================================================================ */

/* Los tokens --r-vip-* de la entrega, con prefijo propio. Van en #auxiliar-ui y
   no en cada pieza para que la franja del resumen y el botón del CTA (que viven
   fuera de .axp-lvl/.axp-intro) los vean también. Sin versión nocturna. */
#auxiliar-ui {
  --vip-ink: #221D18; --vip-ink-2: #2E2720;
  --vip-paper: #F4EFE4; --vip-paper-2: #FBF8F1;
  --vip-brass: #8A6A3A; --vip-brass-lt: #C7A971;
  --vip-line: rgba(138,106,58,.26); --vip-line-dk: rgba(199,169,113,.26);
  --vip-text: #F6F1E7; --vip-text-2: rgba(246,241,231,.62);
  --vip-serif: 'Newsreader', ui-serif, Georgia, serif;
  --vip-mono: 'Space Mono', ui-monospace, Menlo, monospace;
}
/* El eyebrow del módulo (VipEyebrow): 10px, mayúsculas, muy abierto. Latón
   oscuro sobre papel; .lt (latón claro) y .t2 (texto secundario) sobre tinta. */
#auxiliar-ui .axp-eyebrow {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--vip-brass);
}
#auxiliar-ui .axp-eyebrow.lt { color: var(--vip-brass-lt); }
#auxiliar-ui .axp-eyebrow.t2 { color: var(--vip-text-2); }

/* ── El paso: compartido o privado (LevelCard) ───────────────────────────── */
/* La tarjeta es un <button> sin relleno propio: el relleno va en .axp-lvl-main
   para que el pie de la privada pueda ir de borde a borde con su regla. */
#auxiliar-ui .axp-lvl {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: block; padding: 0; margin-bottom: 10px; overflow: hidden;
  border-radius: 16px; color: var(--a-text);
  transition: border-color .15s, background .15s;
}
#auxiliar-ui .axp-lvl.off { opacity: .5; cursor: not-allowed; }
#auxiliar-ui .axp-lvl-main { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; }
#auxiliar-ui .axp-lvl-ic {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
#auxiliar-ui .axp-lvl-ic .icon { width: 20px; height: 20px; }
#auxiliar-ui .axp-lvl-t { display: block; flex: 1; min-width: 0; }
#auxiliar-ui .axp-lvl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#auxiliar-ui .axp-lvl-name { font-size: 16.5px; font-weight: 600; }
#auxiliar-ui .axp-lvl-price { font-size: 14px; font-weight: 600; white-space: nowrap; }
#auxiliar-ui .axp-lvl-tag { display: block; font-size: 13px; margin-top: 2px; line-height: 1.35; }
#auxiliar-ui .axp-lvl-inc { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
#auxiliar-ui .axp-lvl-inc > span { display: flex; align-items: center; gap: 6px; font-size: 12px; }
#auxiliar-ui .axp-lvl-inc .icon { width: 12px; height: 12px; }
#auxiliar-ui .axp-lvl-pnote { display: block; font-size: 10.5px; margin-top: 6px; }
#auxiliar-ui .axp-lvl-chk {
  width: 22px; height: 22px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
#auxiliar-ui .axp-lvl-chk .icon { width: 13px; height: 13px; }

/* Compartido: tokens del rol, tono a2h (el verde de «llegada a casa»). */
#auxiliar-ui .axp-lvl.sh { border: 1.5px solid var(--a-line); background: var(--a-card); }
#auxiliar-ui .axp-lvl.sh.on { border-color: var(--a-a2h); background: var(--a-a2h-soft); }
#auxiliar-ui .axp-lvl.sh .axp-lvl-ic { background: var(--a-a2h-soft); color: var(--a-a2h); }
#auxiliar-ui .axp-lvl.sh.on .axp-lvl-ic { background: var(--a-a2h); color: #fff; }
#auxiliar-ui .axp-lvl.sh.on .axp-lvl-name { color: var(--a-a2h); }
#auxiliar-ui .axp-lvl.sh .axp-lvl-price { color: var(--a-a2h); }
#auxiliar-ui .axp-lvl.sh .axp-lvl-tag,
#auxiliar-ui .axp-lvl.sh .axp-lvl-inc > span { color: var(--a-t2); }
#auxiliar-ui .axp-lvl.sh .axp-lvl-inc .icon { color: var(--a-a2h); }
#auxiliar-ui .axp-lvl.sh .axp-lvl-pnote { color: var(--a-t3); }
#auxiliar-ui .axp-lvl.sh .axp-lvl-chk { background: var(--a-a2h); color: #fff; }

/* Privado: la piel Select. Espresso en degradado, latón, serif en el nombre. */
#auxiliar-ui .axp-lvl.vip {
  border: 1px solid rgba(199,169,113,.34);
  background: linear-gradient(152deg, var(--vip-ink-2) 0%, var(--vip-ink) 62%);
  box-shadow: 0 8px 16px rgba(34,29,24,.16); color: var(--vip-text);
}
#auxiliar-ui .axp-lvl.vip.on { border-color: var(--vip-brass-lt); }
#auxiliar-ui .axp-lvl.vip .axp-lvl-ic { background: rgba(199,169,113,.16); color: var(--vip-brass-lt); }
#auxiliar-ui .axp-lvl.vip.on .axp-lvl-ic { background: var(--vip-brass-lt); color: var(--vip-ink); }
#auxiliar-ui .axp-lvl.vip .axp-eyebrow { margin-bottom: 3px; }
#auxiliar-ui .axp-lvl.vip .axp-lvl-name {
  font-family: var(--vip-serif); font-size: 17.5px; font-weight: 500;
  letter-spacing: .3px; color: var(--vip-text);
}
/* Ya no es una cifra («Con costo»), así que va en la tipografía del módulo y no
   en la monoespaciada de los números. */
#auxiliar-ui .axp-lvl.vip .axp-lvl-price { color: var(--vip-brass-lt); font-size: 13px; }
#auxiliar-ui .axp-lvl.vip .axp-lvl-tag,
#auxiliar-ui .axp-lvl.vip .axp-lvl-inc > span,
#auxiliar-ui .axp-lvl.vip .axp-lvl-pnote { color: var(--vip-text-2); }
#auxiliar-ui .axp-lvl.vip .axp-lvl-inc .icon { color: var(--vip-brass-lt); }
#auxiliar-ui .axp-lvl.vip .axp-lvl-chk { background: var(--vip-brass-lt); color: var(--vip-ink); }
/* El pie: disponibilidad a la izquierda (lo que se SABE del cupo, sin cifras),
   «Ver qué incluye» a la derecha. */
/* PRIMICIA: la tarjeta se ve, se puede tocar para leer de qué se trata, y se
   nota que no está activa. No lleva `.off` (que es para la camioneta ocupada y
   apaga el cursor): aquí el toque SÍ hace algo, abre la portada. */
#auxiliar-ui .axp-lvl.primicia { opacity: .68; }
#auxiliar-ui .axp-lvl.primicia .axp-lvl-price {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px; background: rgba(199,169,113,.16);
}
#auxiliar-ui .axp-lvl-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  padding: 8px 16px; border-top: 1px solid var(--vip-line-dk);
}
#auxiliar-ui .axp-lvl-avail {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 100px; white-space: nowrap;
  background: rgba(199,169,113,.16); color: var(--vip-brass-lt);
}
#auxiliar-ui .axp-lvl-more {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--vip-brass-lt);
}
#auxiliar-ui .axp-lvl-more .icon { width: 13px; height: 13px; }

/* La nota de la aprobación sigue en tokens del rol (es texto del flujo, no de
   la pieza de venta); solo el icono va en latón para que se lea del módulo. */
#auxiliar-ui .axp-note {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--a-surf2);
}
#auxiliar-ui .axp-note .icon { color: var(--vip-brass); margin-top: 2px; flex: 0 0 auto; }
#auxiliar-ui .axp-note b { display: block; font-size: 13.5px; font-weight: 700; }
#auxiliar-ui .axp-note span { display: block; font-size: 12.5px; color: var(--a-t2); margin-top: 2px; line-height: 1.5; }
/* El <b> de énfasis DENTRO del párrafo de la nota sigue en línea: el `b {
   display:block }` de arriba es para el título y partía «…aquí mismo, en tu
   traslado» en dos renglones. */
#auxiliar-ui .axp-note span b { display: inline; font-size: inherit; }
#auxiliar-ui .axp-under { font-size: 11px; color: var(--a-t3); text-align: center; line-height: 1.5; margin: 14px 0 0; }

/* ── La portada (VipIntro) · paleta fija, no hereda el nocturno ──────────── */
/* Tres hijos directos de la columna flex de #auxiliar-ui: la cabecera en tinta
   (fija), el cuerpo en pergamino (desplaza, reutiliza .ax-body) y el pie con la
   tarifa (fijo). El resplandor de latón de la esquina va en ::before para no
   meter un <div> vacío en el HTML. */
#auxiliar-ui .axp-ink {
  flex: 0 0 auto; position: relative; overflow: hidden; padding-bottom: 30px;
  background: linear-gradient(168deg, var(--vip-ink-2) 0%, var(--vip-ink) 68%);
  color: var(--vip-text);
}
#auxiliar-ui .axp-ink::before {
  content: ''; position: absolute; top: -60px; right: -50px; width: 220px; height: 220px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(199,169,113,.14) 0%, rgba(199,169,113,0) 70%);
}
#auxiliar-ui .axp-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 0;
}
#auxiliar-ui .axp-back {
  width: 38px; height: 38px; border-radius: 19px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--vip-line-dk); background: transparent; color: var(--vip-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#auxiliar-ui .axp-bar-gap { width: 38px; flex: 0 0 auto; }
#auxiliar-ui .axp-hero { position: relative; padding: 26px 24px 0; }
#auxiliar-ui .axp-wordmark {
  font-family: var(--vip-serif); font-size: 56px; font-weight: 500;
  letter-spacing: .5px; line-height: .98; margin-top: 4px;
}
#auxiliar-ui .axp-rule { width: 46px; height: 1px; background: var(--vip-brass-lt); margin: 18px 0; }
#auxiliar-ui .axp-hero h1 {
  font-family: var(--vip-serif); font-size: 24px; font-weight: 500;
  line-height: 1.3; letter-spacing: .2px; margin: 0; color: var(--vip-text);
}
#auxiliar-ui .axp-hero p {
  font-size: 13.5px; color: var(--vip-text-2); line-height: 1.6;
  margin: 12px 0 0; max-width: 300px;
}
#auxiliar-ui .ax-body.axp-intro { background: var(--vip-paper); color: var(--vip-ink); padding: 0 24px 22px; }
/* Pilares: numeral romano en serif y latón, título serif, descripción en tinta
   al 62 %. Salen de INCLUYE: si la lista crece, crecen solos. */
#auxiliar-ui .axp-pillars { padding-top: 8px; }
#auxiliar-ui .axp-pillar { display: flex; gap: 18px; padding: 17px 2px; align-items: flex-start; }
#auxiliar-ui .axp-pillar-n {
  font-family: var(--vip-serif); font-size: 15px; color: var(--vip-brass);
  letter-spacing: 1px; width: 24px; flex: 0 0 auto; padding-top: 3px;
}
#auxiliar-ui .axp-pillar b { display: block; font-family: var(--vip-serif); font-size: 19px; font-weight: 400; letter-spacing: .2px; }
#auxiliar-ui .axp-pillar span { display: block; font-size: 13px; color: rgba(34,29,24,.62); margin-top: 3px; line-height: 1.5; }
#auxiliar-ui .axp-rule-ln { height: 1px; background: var(--vip-line); opacity: .7; }
#auxiliar-ui .axp-avail {
  margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--vip-line); background: rgba(138,106,58,.06);
  display: flex; gap: 12px; align-items: flex-start;
}
#auxiliar-ui .axp-avail .icon { width: 16px; height: 16px; color: var(--vip-brass); margin-top: 1px; flex: 0 0 auto; }
#auxiliar-ui .axp-avail b { display: block; font-size: 13.5px; font-weight: 600; }
#auxiliar-ui .axp-avail span { display: block; font-size: 12px; color: rgba(34,29,24,.6); margin-top: 3px; line-height: 1.5; }
#auxiliar-ui .axp-shared {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(34,29,24,.045); font-size: 12.5px; color: rgba(34,29,24,.66); line-height: 1.6;
}
/* El pie fijo: tarifa real en serif y el botón de latón (VipButton). */
#auxiliar-ui .axp-foot {
  flex: 0 0 auto; padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--vip-line); background: var(--vip-paper); color: var(--vip-ink);
}
/* La fila «Tarifa» con la cifra grande se fue el 17-sep (ver aux-privado.js):
   queda solo la nota que dice que tiene costo y quién lo confirma. */
#auxiliar-ui .axp-fare-note { font-size: 11.5px; color: rgba(34,29,24,.55); line-height: 1.45; margin: 0 0 10px; }
#auxiliar-ui .axp-btn {
  width: 100%; height: 54px; border-radius: 13px; border: none; font: inherit;
  font-size: 15.5px; font-weight: 600; letter-spacing: .2px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--vip-brass); color: var(--vip-paper-2);
}
#auxiliar-ui .axp-btn:disabled { background: rgba(34,29,24,.12); color: rgba(34,29,24,.4); cursor: not-allowed; }
#auxiliar-ui .axp-btn.ghost {
  height: 46px; margin-top: 6px; background: none;
  color: var(--vip-brass); border: 1px solid var(--vip-brass);
}

/* ── Estado de la solicitud, dentro del viaje ────────────────────────────── */
#auxiliar-ui .axp-st {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px; border-radius: 13px; margin: 0 0 12px;
}
#auxiliar-ui .axp-st-ic {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
#auxiliar-ui .axp-st b { display: block; font-size: 13.5px; font-weight: 750; }
#auxiliar-ui .axp-st span.axp-st-ic { margin: 0; }
#auxiliar-ui .axp-st div span { display: block; font-size: 12.5px; margin-top: 2px; line-height: 1.5; opacity: .9; }
#auxiliar-ui .axp-st.wait { background: var(--a-warn-soft); color: var(--a-warn); }
#auxiliar-ui .axp-st.wait .axp-st-ic { background: var(--a-warn); color: var(--a-card); }
#auxiliar-ui .axp-st.ok { background: var(--a-a2h-soft); color: var(--a-a2h); }
#auxiliar-ui .axp-st.ok .axp-st-ic { background: var(--a-a2h); color: var(--a-card); }
#auxiliar-ui .axp-st.no { background: var(--a-surf2); color: var(--a-t2); }
#auxiliar-ui .axp-st.no .axp-st-ic { background: var(--a-t3); color: var(--a-card); }

/* Etiqueta en la tarjeta de la lista */
#auxiliar-ui .axp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
#auxiliar-ui .axp-chip .icon { width: 12px; height: 12px; }
#auxiliar-ui .axp-chip.wait { background: var(--a-warn-soft); color: var(--a-warn); }
#auxiliar-ui .axp-chip.ok { background: var(--a-h2a-soft); color: var(--a-h2a); }
#auxiliar-ui .axp-chip.no { background: var(--a-surf2); color: var(--a-t3); }

/* ============================================================================
   0069 · La cola de privados del jefe (#privados-ui)
   ============================================================================
   Vive en este archivo y no en styles.css a propósito: es la otra mitad de la
   misma función, y styles.css lo está editando otra rama. Si algún día se
   consolida, este bloque se mueve entero sin tocar nada más.
   ============================================================================ */
#privados-ui .pv-sec {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink3); margin: 20px 2px 10px;
}
#privados-ui .pv-empty {
  border: 1px dashed var(--line); border-radius: 14px; padding: 30px 20px;
  text-align: center; color: var(--ink2);
}
#privados-ui .pv-empty b { display: block; font-size: 15px; color: var(--ink); }
#privados-ui .pv-empty span { display: block; font-size: 13px; margin: 6px auto 0; max-width: 380px; line-height: 1.5; }
#privados-ui .pv-empty .set-btn { margin-top: 14px; }

#privados-ui .pv-card {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 14px; background: #fff; padding: 15px 16px; margin-bottom: 10px;
}
#privados-ui .pv-card.wait { border-left-color: #B7791F; }
#privados-ui .pv-card.ok   { border-left-color: #0B7A5C; }
#privados-ui .pv-card.no   { border-left-color: var(--ink3); opacity: .8; }

#privados-ui .pv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#privados-ui .pv-top b { display: block; font-size: 15.5px; font-weight: 750; }
#privados-ui .pv-top > div > span { display: block; font-size: 13px; color: var(--ink2); margin-top: 2px; }
#privados-ui .pv-tag {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
}
#privados-ui .pv-tag.wait { background: #FEF6E7; color: #B7791F; }
#privados-ui .pv-tag.ok   { background: #E7F8F1; color: #0B7A5C; }
#privados-ui .pv-tag.no   { background: #F1F2F4; color: var(--ink3); }

#privados-ui .pv-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
#privados-ui .pv-meta span { font-size: 13px; color: var(--ink); }
#privados-ui .pv-meta b {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 2px;
}
#privados-ui .pv-notes {
  margin-top: 11px; padding: 10px 12px; border-radius: 10px;
  background: #F7F8FA; font-size: 13px; color: var(--ink2); line-height: 1.5;
}
#privados-ui .pv-warn {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 11px;
  padding: 11px 13px; border-radius: 10px; background: #FEF6E7;
  color: #8A5A0B; font-size: 12.5px; line-height: 1.5;
}
#privados-ui .pv-warn .icon { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
#privados-ui .pv-reason {
  margin-top: 11px; font-size: 12.5px; color: var(--ink2); line-height: 1.5;
}
#privados-ui .pv-acts, #privados-ui .pv-rej-acts {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
}
#privados-ui .pv-rej { margin-top: 12px; }
#privados-ui .pv-rej .set-input { width: 100%; }

/* ── Registro del tripulante (aux-registro.js) ───────────────────────────────
   Vive en el mismo contenedor que el rol auxiliar y reusa casi todo (ax-input,
   ax-btn, ax-opt, axr-search/list…). Lo de abajo es solo lo que estrena: el
   error en rojo del formulario, las casillas del código y la bienvenida.
   Hereda el modo nocturno solo: todo sale de los tokens --a-*.             */

/* El campo mal llenado. El jefe lo pidió textual — «que si no llenan nombres y
   apellidos, pues les salga como rojo». */
#auxiliar-ui .ax-input.bad { border-color: var(--a-err); background: var(--a-err-soft); }
#auxiliar-ui .rg-err {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--a-err);
  margin: 6px 2px 0; line-height: 1.4;
}
#auxiliar-ui .rg-err .icon { width: 14px; height: 14px; margin-top: 1px; flex: 0 0 auto; }
/* El contenedor del error existe siempre (para poder llenarlo sin repintar);
   vacío no debe ocupar ni un píxel. */
#auxiliar-ui .rg-err.vacio { display: none; }
#auxiliar-ui .rg-tip { font-size: 11.5px; color: var(--a-t3); margin: 6px 2px 0; line-height: 1.45; }

/* Contraseña con el botón de ver/ocultar dentro del campo. */
#auxiliar-ui .rg-pw { position: relative; display: block; }
#auxiliar-ui .rg-pw .ax-input { padding-right: 68px; }
#auxiliar-ui .rg-pw-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--a-accent);
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px;
}

/* ── El medidor de fuerza de la contraseña (2026-09-11) ──────────────────────
   Cuatro segmentos, y AL LADO lo que le falta escrito con palabras. La barra
   sola no sirve: «amarillo» no le dice a nadie qué tiene que cambiar, y el que
   la mira de noche con el brillo al máximo no distingue ámbar de rojo.

   Todos los colores salen de los tokens --a-* (err / warn / ok), que ya tienen
   su versión nocturna arriba en este mismo archivo. Ni un hexadecimal suelto:
   eso es exactamente lo que hubo que salir a remapear en agosto.             */
#auxiliar-ui .rg-meter { margin: 9px 2px 0; }
#auxiliar-ui .rg-meter-bar { display: flex; gap: 4px; }
#auxiliar-ui .rg-meter-seg {
  flex: 1 1 0; height: 5px; border-radius: 999px;
  background: var(--a-line); transition: background .18s ease;
}
#auxiliar-ui .rg-meter.n1 .rg-meter-seg.on { background: var(--a-err); }
#auxiliar-ui .rg-meter.n2 .rg-meter-seg.on { background: var(--a-warn); }
#auxiliar-ui .rg-meter.n3 .rg-meter-seg.on,
#auxiliar-ui .rg-meter.n4 .rg-meter-seg.on { background: var(--a-ok); }
#auxiliar-ui .rg-meter-txt { font-size: 11.5px; color: var(--a-t2); margin-top: 7px; line-height: 1.45; }
#auxiliar-ui .rg-meter-txt b { font-weight: 800; }
#auxiliar-ui .rg-meter.n1 .rg-meter-txt b { color: var(--a-err); }
#auxiliar-ui .rg-meter.n2 .rg-meter-txt b { color: var(--a-warn); }
#auxiliar-ui .rg-meter.n3 .rg-meter-txt b,
#auxiliar-ui .rg-meter.n4 .rg-meter-txt b { color: var(--a-ok); }

/* «Coinciden»: el verde de la repetición. Es el hermano bueno de .rg-err —
   misma forma, mismo sitio, color contrario— y se esconde igual de limpio
   cuando no hay nada que decir (vacío no puede ocupar ni un píxel, o el
   formulario brinca en cada tecla). */
#auxiliar-ui .rg-match {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--a-ok);
  margin: 7px 2px 0; line-height: 1.4;
}
#auxiliar-ui .rg-match .icon { width: 14px; height: 14px; flex: 0 0 auto; }
#auxiliar-ui .rg-match.vacio { display: none; }

/* ── El fondo de marca de cada aerolínea (2026-09-11) ────────────────────────
   Los hexadecimales NO están aquí: viven en MARCAS_AEROLINEA (aux-registro.js),
   que es donde se explican y se miden, y llegan como --air-1 / --air-2 /
   --air-ink en el style= de cada botón. El CSS no puede saber cuántas
   aerolíneas hay ni de qué color es la que agreguen mañana.

   SOBRE EL MODO NOCTURNO. Este archivo tiene arriba un bloque entero dedicado a
   apagar fondos claros que se escribieron en hexadecimal ANTES de que existiera
   el tema oscuro. Aquí no se repite ese error, pero tampoco se puede resolver
   con tokens: el rojo de Avianca tiene que seguir siendo el rojo de Avianca a
   las 11 p.m. Se hace lo mismo que con los mapas de Leaflet unas líneas más
   arriba —bajarles el brillo con filter, no cambiarles el color— y la regla
   nocturna se deja PEGADA a la clara, tres líneas más abajo, para que quien
   toque una vea la otra sin buscarla.

   Nada de sombras ni brillos por encima: un velo blanco sobre el rojo le sube
   la luminancia al fondo y le tumba el contraste al texto blanco justo donde
   está la sigla. El degradado limpio es lo único que se dibuja.             */
#auxiliar-ui .ax-opt.rg-air {
  position: relative; overflow: hidden;
  color: var(--air-ink);
  border-color: rgba(0, 0, 0, .16);
  background-color: var(--air-2);
  background-image: linear-gradient(135deg, var(--air-1) 0%, var(--air-2) 100%);
  /* Sin elegir, más apagada. saturate() —y no opacity ni un velo— porque
     conserva la luminancia: el contraste medido del texto no se mueve. */
  filter: saturate(.74);
  transition: filter .16s ease, box-shadow .16s ease;
}
#auxiliar-ui .ax-opt.rg-air:hover { filter: saturate(1); }

/* La sigla IATA es el elemento gráfico: ocupa el hueco donde antes iba el
   avioncito, que era el mismo en las cuatro y por tanto no ayudaba a elegir. */
#auxiliar-ui .ax-opt.rg-air .rg-air-sigla {
  flex: 0 0 auto; min-width: 48px; text-align: center; white-space: nowrap;
  font-size: 23px; font-weight: 900; letter-spacing: .01em; line-height: 1;
}
#auxiliar-ui .ax-opt.rg-air div span { color: currentColor; opacity: .85; }
#auxiliar-ui .ax-opt.rg-air .ax-radio { border-color: currentColor; color: var(--air-1); }

/* ELEGIDA. No es «solo un borde»: sube a color pleno, se le mete un anillo de
   su propia tinta POR DENTRO y el círculo queda macizo con el chulo en el color
   de la marca. Por dentro y no por fuera a la fuerza — .ax-body lleva
   overflow-x:hidden y cualquier anillo exterior sale cortado por los lados. */
#auxiliar-ui .ax-opt.rg-air.sel {
  filter: none;
  border-color: transparent;
  box-shadow: inset 0 0 0 3px var(--air-ink);
}
#auxiliar-ui .ax-opt.rg-air.sel .ax-radio { background: var(--air-ink); border-color: var(--air-ink); }
#auxiliar-ui .ax-opt.rg-air.sel div span { opacity: 1; font-weight: 700; }

/* Foco de teclado: un anillo del naranja de Rendio separado del fondo de marca
   por una franja del color de la pantalla, para que se vea sobre el ámbar de
   JetSMART igual que sobre el índigo de LATAM. También por dentro, por lo
   mismo del overflow. */
#auxiliar-ui .ax-opt.rg-air:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--a-bg), inset 0 0 0 6px var(--a-accent);
}

/* De noche: mismo color, menos lámpara (ver arriba). */
#auxiliar-ui[data-ax-night="on"] .ax-opt.rg-air {
  border-color: rgba(255, 255, 255, .10);
  filter: saturate(.64) brightness(.9);
}
#auxiliar-ui[data-ax-night="on"] .ax-opt.rg-air:hover,
#auxiliar-ui[data-ax-night="on"] .ax-opt.rg-air.sel { filter: saturate(.92) brightness(.94); }

/* Las casillas del código.
   Se reparten el ancho con flex en vez de medir 48px fijos: el código de este
   proyecto trae 8 dígitos y ocho casillas fijas no caben en un teléfono de
   360 px — se salían de la pantalla. */
#auxiliar-ui .rg-otp { display: flex; gap: 6px; margin-top: 18px; }
#auxiliar-ui .rg-otp-box {
  flex: 1 1 0; min-width: 0; height: 56px;
  text-align: center; font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 20px; font-weight: 700; color: var(--a-text);
  background: var(--a-card); border: 2px solid var(--a-line); border-radius: 11px;
  box-sizing: border-box; padding: 0; transition: border-color .14s, color .14s;
}
#auxiliar-ui .rg-otp-box:focus { outline: none; border-color: var(--a-accent); }
#auxiliar-ui .rg-otp-box.on { border-color: var(--a-accent); }
#auxiliar-ui .rg-otp-box.bad { border-color: var(--a-err); color: var(--a-err); }

#auxiliar-ui .rg-otp-state { min-height: 22px; margin-top: 14px; text-align: center; }
#auxiliar-ui .rg-otp-msg { font-size: 12.5px; color: var(--a-t2); display: inline-flex; align-items: center; gap: 6px; }
#auxiliar-ui .rg-otp-msg.bad { color: var(--a-err); font-weight: 600; }
#auxiliar-ui .rg-otp-msg.ok  { color: var(--a-ok); font-weight: 700; }
#auxiliar-ui .rg-otp-msg.tip { color: var(--a-t3); }
#auxiliar-ui .rg-otp-msg .icon { width: 15px; height: 15px; }

#auxiliar-ui .rg-resend { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--a-t2); }
#auxiliar-ui .rg-resend-wait { color: var(--a-t3); }
#auxiliar-ui .rg-center { display: block; margin: 10px auto 0; text-align: center; font-size: 12.5px; }
#auxiliar-ui .rg-soft { color: var(--a-t3); font-weight: 600; }

/* Camino de rescate mientras la plantilla del correo mande enlace y no código. */
#auxiliar-ui .rg-link-box { background: var(--a-surf2); border-radius: 12px; padding: 12px 14px; }
#auxiliar-ui .rg-link-box p { font-size: 12px; color: var(--a-t2); margin: 0 0 8px; line-height: 1.45; }
#auxiliar-ui .rg-link-box .ax-btn-ghost { margin-top: 10px; }

/* El conjunto ya elegido, con su botón de cambiar. */
#auxiliar-ui .rg-picked {
  display: flex; align-items: center; gap: 12px;
  background: var(--a-card); border: 1.5px solid var(--a-accent);
  border-radius: 12px; padding: 13px 14px;
}
#auxiliar-ui .rg-picked-txt b { display: block; font-size: 14.5px; font-weight: 800; }
#auxiliar-ui .rg-picked-txt span { display: block; font-size: 12px; color: var(--a-t2); margin-top: 2px; }
#auxiliar-ui .rg-picked .ax-link { margin-left: auto; font-size: 12.5px; flex: 0 0 auto; }

/* Sol / luna del encabezado del registro. */
#auxiliar-ui .rg-head-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
#auxiliar-ui .rg-tema { width: 38px; height: 38px; color: var(--a-t2); }
#auxiliar-ui .rg-tema .icon { width: 17px; height: 17px; }
#auxiliar-ui .rg-tema:active { transform: scale(.94); }
/* En la bienvenida el encabezado es solo el botón, alineado a la derecha. */
#auxiliar-ui .rg-head-solo { padding-bottom: 0; }

/* Bienvenida. */
#auxiliar-ui .rg-listo { padding-top: 18px; }
#auxiliar-ui .rg-listo-ic {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--a-a2h-soft); color: var(--a-ok);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
#auxiliar-ui .rg-listo-ic .icon { width: 30px; height: 30px; }
#auxiliar-ui .rg-listo .axp { margin-top: 20px; }

/* El registro no tiene barra inferior de navegación, así que su CTA va pegado
   abajo. NO se hace con .ax-cta-bar:last-child: en el formulario del rol
   auxiliar la barra TAMBIÉN es el último hijo, y la regla le movería el botón
   62 px encima de su propia navegación.

   El env() de abajo es el mismo cuidado que el de arriba en .ax-form-head: sin
   él, en el iPhone el botón queda encima de la barra del gesto de inicio y se
   toca a medias. */
#auxiliar-ui .rg-cta {
  /* Apilados, no en fila.
     .ax-cta-bar es flex por defecto (styles.css) porque en el rol auxiliar la
     usan parejas de botones del mismo peso — «Cancelar / Confirmar». Acá no:
     «Continuar» es la acción y «Ya tengo cuenta» es una salida. En fila, el
     primario quedaba MÁS PEQUEÑO que el secundario (flex:1 contra width:100%)
     y encima a la izquierda, que es el peor sitio para el pulgar de una
     persona diestra. Apilados, el primario ocupa todo el ancho, va arriba y
     cae justo bajo el pulgar. */
  display: block;
}
#auxiliar-ui .rg-cta .ax-btn-primary { width: 100%; }

/* ============================================================================
   0075 · El padrón de tripulantes (#tripulantes-ui)
   ============================================================================
   Mismo criterio que el bloque de privados de arriba: vive acá y no en
   styles.css porque es la otra mitad de una función nueva. Reusa .set-btn y
   repite el encabezado .sh-phead, que es como está resuelto en los demás
   paneles (cada uno lo redefine bajo su propio id).

   Nace responsive: el jefe pidió poder usar el admin desde el celular, y esta
   es la primera pantalla que se escribe después de ese pedido. En escritorio es
   una tabla de cinco columnas; por debajo de 900 px cada tripulante se apila
   como ficha, que es la única forma de que cinco datos quepan en 360 px sin
   letra de 9 puntos.
   ============================================================================ */
#tripulantes-ui .sh-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
#tripulantes-ui .sh-phead h1 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; display: flex; align-items: center; gap: 11px; color: var(--ink); }
#tripulantes-ui .sh-phead h1 .sh-ct { font-size: 13px; font-weight: 800; font-family: var(--mono); background: var(--amber-soft); color: var(--amber); border-radius: 999px; padding: 3px 11px; }
#tripulantes-ui .sh-phead p { font-size: 13px; color: var(--ink2); margin-top: 8px; max-width: 660px; line-height: 1.5; }
#tripulantes-ui .sh-phead p b { color: var(--ink); font-weight: 700; }
#tripulantes-ui .tp-acts { display: flex; gap: 8px; flex-wrap: wrap; }

#tripulantes-ui .tp-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
#tripulantes-ui .tp-search { position: relative; flex: 1 1 260px; min-width: 0; }
#tripulantes-ui .tp-search > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink3); pointer-events: none; }
#tripulantes-ui .tp-search input { width: 100%; box-sizing: border-box; padding: 10px 12px 10px 36px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--ink); background: #fff; }
#tripulantes-ui .tp-search input:focus { outline: none; border-color: var(--amber); }
#tripulantes-ui .tp-filters { display: flex; gap: 6px; flex-wrap: wrap; }
#tripulantes-ui .tp-filters button { border: 1px solid var(--line); background: #fff; color: var(--ink2); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
#tripulantes-ui .tp-filters button.on { background: var(--ink); color: #fff; border-color: var(--ink); }

#tripulantes-ui .tp-nota { display: flex; gap: 10px; align-items: flex-start; background: var(--amber-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
#tripulantes-ui .tp-nota .icon { width: 17px; height: 17px; color: var(--amber); flex: 0 0 auto; margin-top: 1px; }
#tripulantes-ui .tp-nota b { display: block; font-size: 13.5px; color: var(--ink); }
#tripulantes-ui .tp-nota span { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 2px; }

#tripulantes-ui .tp-list { display: flex; flex-direction: column; gap: 8px; }
#tripulantes-ui .tp-row { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
#tripulantes-ui .tp-row.open { border-color: var(--amber); }
#tripulantes-ui .tp-main {
  display: grid; align-items: center; gap: 14px; padding: 13px 15px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1fr) auto;
}
#tripulantes-ui .tp-who b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
#tripulantes-ui .tp-who span { display: block; font-size: 12px; color: var(--ink3); margin-top: 2px; word-break: break-word; }
#tripulantes-ui .tp-air { font-size: 13px; font-weight: 700; color: var(--ink2); }
#tripulantes-ui .tp-punto { font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
#tripulantes-ui .tp-punto b { color: var(--ink); font-weight: 700; }
#tripulantes-ui .tp-punto2 { margin-top: 3px; color: var(--ink3); }
#tripulantes-ui .tp-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--line); color: var(--ink2); border-radius: 4px; padding: 1px 5px; margin-right: 6px; }
#tripulantes-ui .tp-ant b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
#tripulantes-ui .tp-ant b.falta { color: var(--amber); }
#tripulantes-ui .tp-ant b.raro { color: #C53030; }
#tripulantes-ui .tp-ant span { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 2px; }
#tripulantes-ui .tp-edit { white-space: nowrap; }

#tripulantes-ui .tp-editor { border-top: 1px solid var(--line); padding: 13px 15px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#tripulantes-ui .tp-editor label { font-size: 12.5px; font-weight: 700; color: var(--ink2); display: flex; align-items: center; gap: 8px; }
#tripulantes-ui .tp-editor input { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 14px; color: var(--ink); }
#tripulantes-ui .tp-editor p { flex: 1 1 260px; font-size: 11.5px; color: var(--ink3); line-height: 1.5; margin: 0; }

#tripulantes-ui .tp-empty { border: 1px dashed var(--line); border-radius: 14px; padding: 30px 20px; text-align: center; color: var(--ink2); }
#tripulantes-ui .tp-empty b { display: block; font-size: 15px; color: var(--ink); }
#tripulantes-ui .tp-empty span { display: block; font-size: 13px; margin: 6px auto 0; max-width: 400px; line-height: 1.5; }
#tripulantes-ui .tp-empty .set-btn { margin-top: 14px; }

#tripulantes-ui #tp-air-box { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; background: #FBFBFC; }
#tripulantes-ui .tp-air-head b { font-size: 14.5px; color: var(--ink); }
#tripulantes-ui .tp-air-head span { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 3px; line-height: 1.5; }
#tripulantes-ui .tp-air-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
#tripulantes-ui .tp-air-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
#tripulantes-ui .tp-air-row b { font-size: 13.5px; color: var(--ink); }
#tripulantes-ui .tp-air-row.off { opacity: .55; }
#tripulantes-ui .tp-air-row .set-btn { margin-left: auto; }
#tripulantes-ui .tp-air-new { display: flex; gap: 8px; flex-wrap: wrap; }
#tripulantes-ui .tp-air-new input { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-family: inherit; font-size: 13.5px; color: var(--ink); }
#tripulantes-ui .tp-air-new input:first-child { flex: 1 1 200px; min-width: 0; }
#tripulantes-ui .tp-air-new input:nth-child(2) { width: 90px; }
#tripulantes-ui .tp-air-nota { font-size: 11.5px; color: var(--ink3); margin: 10px 0 0; line-height: 1.5; }

/* El celular: cada tripulante como ficha apilada, no como fila de tabla. */
@media (max-width: 900px) {
  #tripulantes-ui .tp-main { grid-template-columns: 1fr auto; row-gap: 10px; align-items: start; }
  #tripulantes-ui .tp-who { grid-column: 1; }
  #tripulantes-ui .tp-edit { grid-column: 2; grid-row: 1; }
  #tripulantes-ui .tp-air { grid-column: 1 / -1; }
  #tripulantes-ui .tp-punto { grid-column: 1 / -1; }
  #tripulantes-ui .tp-ant { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
  #tripulantes-ui .tp-ant span { margin-top: 0; }
  #tripulantes-ui .tp-editor { flex-direction: column; align-items: stretch; }
  #tripulantes-ui .tp-editor label { flex-direction: column; align-items: flex-start; gap: 6px; }
  #tripulantes-ui .tp-editor input { width: 100%; box-sizing: border-box; }
}

/* ── Atajos de fecha del vuelo (7-sep-2026) ──────────────────────────────────
   La fecha entra puesta en MAÑANA. Estos tres botones existen para que eso se
   VEA (el que está puesto va encendido) y para cambiarla sin abrir el
   calendario del sistema, que en iOS es una rueda y cuesta tres gestos.       */
#auxiliar-ui .ax-daychips { display: flex; gap: 8px; margin: -6px 0 14px; flex-wrap: wrap; }
#auxiliar-ui .ax-daychip {
  flex: 1 1 0; min-width: 84px; padding: 9px 10px; border-radius: 12px;
  border: 1px solid var(--a-line); background: var(--a-card); font: inherit;
  cursor: pointer; text-align: center; display: block;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
#auxiliar-ui .ax-daychip b { display: block; font-size: 13.5px; font-weight: 700; color: var(--a-text); }
#auxiliar-ui .ax-daychip span { display: block; font-size: 11.5px; color: var(--a-t2); margin-top: 1px; }
#auxiliar-ui .ax-daychip.on { border-color: var(--a-accent); background: var(--a-h2a-soft); }
#auxiliar-ui .ax-daychip.on b { color: var(--a-accent); }
#auxiliar-ui .ax-daychip.otro { cursor: default; }

/* El punto que pusimos nosotros lo dice, y dice cómo cambiarlo. */
#auxiliar-ui .axr-auto {
  display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 2px;
  font-size: 12.5px; line-height: 1.45; color: var(--a-t2);
}
#auxiliar-ui .axr-auto .icon { width: 16px; height: 16px; color: var(--a-a2h, #10B981); flex: 0 0 auto; margin-top: 1px; }

/* ── La ruta con iconos: Casa → Aeropuerto / Aeropuerto → Casa (15-sep-2026) ──
   Es el título de las tarjetas del paso 1 y la cabecera del resumen. Se scopea
   a `span.ax-route` porque `.axo-ruta .ax-route` (más arriba) es OTRA cosa: el
   <path> de la estela en la escena de operación. */
/* Puede partirse: en 360 px «Aeropuerto → Casa» con tres iconos roza el ancho
   del título, y sin esto empujaba el radio fuera de la tarjeta (que .ax-body
   recorta). Si no cabe, «→ Casa» baja de renglón. El bloque del texto necesita
   poder encogerse (min-width:0) para que el flex-wrap actúe. */
#auxiliar-ui .ax-opt div { flex: 1; min-width: 0; }
#auxiliar-ui span.ax-route { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
#auxiliar-ui span.ax-route .icon { width: 15px; height: 15px; flex: 0 0 auto; }
/* La flecha va en el color del tono; los demás iconos heredan el del texto. */
#auxiliar-ui .ax-opt.h2a .ax-route-arw { color: var(--a-h2a); }
#auxiliar-ui .ax-opt.a2h .ax-route-arw { color: var(--a-ok); }
/* «Cambiar» al lado del punto en el resumen: el valor sigue alineado a la
   derecha y el botón no se estira ni se parte. */
#auxiliar-ui .ax-sum-row b { flex: 1; min-width: 0; }
#auxiliar-ui .ax-sum-row .ax-link { flex: 0 0 auto; margin-left: 8px; padding: 0; font-size: 12.5px; }

/* ANCLA-SELECT */
/* ── Select fuera del paso (15-sep-2026) ──────────────────────────────────
   La franja debajo del resumen y el botón de latón del CTA cuando se eligió el
   privado. Paleta fija como el resto del módulo (variables --vip-* arriba, en
   el bloque «0069 · Traslado privado»). */
#auxiliar-ui .axp-sum-vip {
  margin-top: 10px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(152deg, var(--vip-ink-2) 0%, var(--vip-ink) 62%);
  border: 1px solid rgba(199,169,113,.34); color: var(--vip-text);
}
#auxiliar-ui .axp-sum-vip b {
  display: block; font-family: var(--vip-serif); font-size: 17px; font-weight: 500;
  letter-spacing: .2px; margin-top: 4px;
}
#auxiliar-ui .axp-sum-vip > span:not(.axp-eyebrow) {
  display: block; font-size: 12px; color: var(--vip-text-2); margin-top: 4px; line-height: 1.5;
}
/* El primario de siempre, en latón. Deshabilitado se ve igual que el primario
   (styles.css) — la clase extra no puede ganarle a ese estado. */
#auxiliar-ui .ax-btn-primary.ax-btn-brass {
  background: var(--vip-brass); color: var(--vip-paper-2);
  box-shadow: 0 8px 20px rgba(138,106,58,.28);
}
#auxiliar-ui .ax-btn-primary.ax-btn-brass:disabled { background: var(--a-line); color: var(--a-t3); box-shadow: none; }

/* ANCLA-CELEBRACION */

/* ── La celebración al confirmar (15-sep-2026, aux-celebracion.js) ────────
   El avión sale de la loseta de la izquierda, recorre la curva UNA vez dejando
   la estela, aterriza en la de la derecha y ahí cae el sello. Misma técnica que
   .axo-ruta (más arriba): offset-path para que el avión vaya pegado a la curva y
   stroke-dashoffset para que la línea aparezca detrás de él. Lo que cambia es
   que aquí no hay bucle: el ESTADO BASE de cada regla es el estado FINAL (ruta
   completa, avión ya aterrizado, sello puesto) y la animación con `both` parte
   del principio. Así, quien pidió menos movimiento —abajo, animation:none— ve
   directamente la escena terminada, sin reglas extra.

   201.8 = el largo real de la curva M44 104C110 100 160 80 236 46, calculado
   muestreando la cúbica de Bézier en 20 000 puntos (201,821). Si se cambia la
   curva en aux-celebracion.js hay que volver a medirlo, o la estela termina
   antes o después que el avión.

   Los tiempos que tienen que cuadrar entre sí:
     ruta y avión   1.35 s con .25 s de espera → aterriza a 1.6 s
     sello          aparece a 1.55 s (justo cuando el avión se funde)
     título y lead  entran a 1.3 s
     sonido         a 1.5 s (aux-celebracion.js)                                */
#auxiliar-ui .axc { width: 100%; max-width: 320px; margin: 0 auto; }
#auxiliar-ui .axc-scene { width: 100%; height: auto; display: block; }
#auxiliar-ui .axc-pad { fill: var(--a-card); stroke: var(--a-line); stroke-width: 2; }
#auxiliar-ui .axc-glyph { fill: none; stroke: var(--a-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#auxiliar-ui .axc-glyph-fill { fill: var(--a-text); }
#auxiliar-ui .axc-track {
  stroke: var(--a-line); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .5 9;
}
#auxiliar-ui .axc-route {
  stroke: var(--a-accent); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 201.8; stroke-dashoffset: 0;
  animation: axc-draw 1.35s .25s cubic-bezier(.4,.1,.3,1) both;
}
@keyframes axc-draw { from { stroke-dashoffset: 201.8; } }
/* El avión termina fundido en la loseta de llegada: «aterrizó». Por eso su
   opacidad final es 0 y lo que queda a la vista es el sello. */
#auxiliar-ui .axc-plane { fill: var(--a-accent); opacity: 0; }
@keyframes axc-planefade { 0%, 4% { opacity: 0; } 12%, 90% { opacity: 1; } 100% { opacity: 0; } }
#auxiliar-ui .axc-ok circle { fill: var(--a-a2h, var(--a-ok)); }
#auxiliar-ui .axc-ok .axc-tick { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#auxiliar-ui .axc-ok {
  transform-box: view-box; transform-origin: 249px 33px;
  animation: axc-pop .5s 1.55s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes axc-pop { from { opacity: 0; transform: scale(.4); } }
/* El título y el lead entran cuando el avión ya casi llega: si aparecieran de
   una, nadie miraría el viaje. */
#auxiliar-ui .axc-in { animation: axc-in .5s 1.3s cubic-bezier(.2,.8,.3,1) both; }
@keyframes axc-in { from { opacity: 0; transform: translateY(10px); } }

/* Reserva: sin offset-path el avión hace el viaje en recta (misma duración,
   misma espera, misma curva de tiempo que la estela, que se dibuja igual). Los
   ángulos son la tangente de la curva en cada extremo (-3° y -24°). */
#auxiliar-ui .axc-plane {
  transform: translate(236px, 46px) rotate(-24deg);
  animation: axc-fly 1.35s .25s cubic-bezier(.4,.1,.3,1) both,
             axc-planefade 1.35s .25s linear both;
}
@keyframes axc-fly { from { transform: translate(44px, 104px) rotate(-3deg); } }

/* Lo bueno: pegado a la curva y girando con ella. Igual que en .axo-ruta, la
   estela y el avión SOLO van juntos porque comparten duración, espera,
   cubic-bezier y porcentajes (aquí 0 y 100, sin fotogramas intermedios); la
   opacidad va en una animación aparte por eso mismo. */
@supports (offset-path: path("M0 0L1 1")) {
  #auxiliar-ui .axc-plane {
    offset-path: path("M44 104C110 100 160 80 236 46");
    offset-rotate: auto; offset-distance: 100%;
    transform: none;
    animation: axc-travel 1.35s .25s cubic-bezier(.4,.1,.3,1) both,
               axc-planefade 1.35s .25s linear both;
  }
  @keyframes axc-travel { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
}

/* La versión Rendio Select: panel espresso, estela y avión en latón, sello de
   latón con el chulo en tinta. Paleta FIJA como toda la piel del privado (no
   cambia de noche, decisión del diseñador): por eso aquí sí hay hexadecimales. */
#auxiliar-ui .axc.vip {
  --axc-ink: #221D18; --axc-ink2: #2E2720; --axc-brass: #C7A971; --axc-text: #F6F1E7;
  background: linear-gradient(152deg, #2E2720 0%, #221D18 62%);
  border: 1px solid rgba(199,169,113,.34); border-radius: 16px; padding: 8px 10px;
  /* Sombra corta: .ax-body recorta lo que sobresalga del relleno lateral. */
  box-shadow: 0 8px 16px rgba(34,29,24,.16);
}
#auxiliar-ui .axc.vip .axc-pad { fill: var(--axc-ink2); stroke: rgba(199,169,113,.34); }
#auxiliar-ui .axc.vip .axc-glyph { stroke: var(--axc-text); }
#auxiliar-ui .axc.vip .axc-glyph-fill { fill: var(--axc-text); }
#auxiliar-ui .axc.vip .axc-track { stroke: rgba(199,169,113,.26); }
#auxiliar-ui .axc.vip .axc-route { stroke: var(--axc-brass); }
#auxiliar-ui .axc.vip .axc-plane { fill: var(--axc-brass); }
#auxiliar-ui .axc.vip .axc-ok circle { fill: var(--axc-brass); }
#auxiliar-ui .axc.vip .axc-ok .axc-tick { stroke: var(--axc-ink); }

/* Menos movimiento: nada se mueve ni entra; como el estado base de cada regla
   ya es el final, basta con apagar las animaciones. El sonido lo apaga el
   módulo por su cuenta (mira la misma media query). */
@media (prefers-reduced-motion: reduce) {
  #auxiliar-ui .axc *, #auxiliar-ui .axc-in { animation: none !important; }
}