/* ============================================================
   NOVA PLATFORM · sistema de diseño de la app: «Titanio» (oct 2026)
   La app es la de Nova para TODAS las agencias: suelo de titanio claro, tarjetas casi blancas con raya fina, grafito para lo principal
   (botones, la pantalla abierta del menú) y el plasma celeste para lo que se toca y se resalta (el foco, los anillos, los avisos de
   «listo»). Archivo para el texto y los títulos (más ancho en los títulos), JetBrains Mono para las cifras y Syncopate solo para la
   palabra NOVA. La marca de cada agencia va solo en sus documentos (PDF, kit, vouchers, recibo); en la app, su nombre al lado de NOVA.
   Los colores entran SOLO por los tokens de abajo (--accion, --accion-texto, --accion-tinta, --acento, --titulos, los neutros,
   --barra-*, --pase-*, --tablero-*…), que calcula core/marca-modelo.js (tokensApp, con el contraste garantizado) y pone
   core/agencia.js (aplicarMarcaEn). Ningún componente de la app lee --marca ni un color fijo (pruebas/colores-estaticos.test.js): lo
   fijo de Nova va entre los comentarios «@nova» y «@fin-nova», y lo de los documentos (PDF), entre «@documento» y «@fin-documento».
   Las piezas del juego (la guía de cada paso, la jugada al frente, el camino del cliente y el anillo de la meta) están al final, en
   "Tranquillum".
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..800&family=JetBrains+Mono:wght@400..600&family=Syncopate:wght@700&display=swap');

:root {
  /* Los colores de la app (core/marca-modelo.js tokensApp: los de Nova, iguales para todas las agencias; pruebas/colores-estaticos.test.js
     comprueba que son los de tokensApp sin marca).
     --accion / --accion-texto     relleno de lo principal (botón primario, chip, pestaña-segmento y opción seleccionados): el grafito
     --accion-hover                el relleno al pasar el mouse
     --accion-suave / -tenue       tintes (íconos, avatares, etiquetas; filas al pasar el mouse)
     --accion-tinta                la letra "de marca" (enlaces, pestaña activa, íconos, cifras): 4.5:1 sobre el fondo, tarjetas y tintes
     --accion-borde / --foco       bordes de lo seleccionado, foco, casillas, interruptores, barras de progreso, gráficas y puntos (3:1)
     --acento / -texto / -tinta    el plasma: la franja de las tarjetas de acción, leyendas en pastilla, el botón de acento; su tinta, letra
     --acento-suave / -fuerte      el tinte del plasma (avisos «listo») y el plasma para anillos, líneas de avance y puntos (3:1)
     --titulos                     los títulos de cada pantalla (la letra del modo) */
  --accion: #0F1114; --accion-texto: #F2F2F2; --accion-hover: #313235; --accion-suave: #DFE0E1; --accion-tenue: #EDEEEF;
  --accion-tinta: #0F1114; --accion-borde: #0F1114; --foco: #0F1114; --foco-halo: rgba(143, 211, 255, 0.55);
  --acento: #8FD3FF; --acento-texto: #0F1114; --acento-tinta: #0A5C8A; --acento-suave: #DDF3FF; --acento-fuerte: #1D8CCB; --titulos: #0F1114;
  /* Los dos colores de la marca tal cual: solo los leen los documentos (PDF) y sus ilustraciones; y la letra sobre cada relleno de los
     documentos (core/marca-modelo.js letrasDocumento; aquí, la de Nova). */
  --marca: #0F1114; --marca-2: #000000;
  --doc-marca-texto: #FFFFFF; --doc-marca-2-texto: #FFFFFF; --doc-acento-texto: #FFFFFF; --doc-titulos-texto: #FFFFFF; --doc-resalte-texto: #FFFFFF; --doc-degradado-texto: #FFFFFF;
  /* Neutros y estados: los del modo claro (core/marca-modelo.js NEUTROS.claro, la tabla de Titanio). Las hojas de los documentos NO
     usan estos: vuelven a los suyos (NEUTROS_HOJA, abajo en «.documento, .kit-hoja, .recibo»): siempre blancas y como siempre. */
  --fondo: #F2F2F2; --superficie: #FBFCFD; --hundido: #E6E8EB;
  --borde: #D9D9D9; --borde-fuerte: #80858C;
  --texto: #0F1114; --texto-2: #5C6068; --texto-3: #5C6068; --texto-invertido: #F2F2F2;
  --velo: rgba(15, 17, 20, .36);
  --ok: #17784A; --ok-suave: #DDF2E7; --alerta: #8A5806; --alerta-suave: #FBEBCF; --alerta-texto: #8A5806; --error: #B3302F; --error-suave: #F8DEDE;
  --semaforo-amarillo: #C99405; --semaforo-amarillo-suave: #FFF5D1; --aviso-texto: #7A5A00;
  --info: #0A5C8A; --info-suave: #DDF3FF;
  --sombra: 0 1px 0 rgba(15, 17, 20, .04), 0 10px 28px -14px rgba(15, 17, 20, .22);
  /* El panel lateral (la tarjeta abierta), el pase de abordar de la tarjeta y la pantalla de salidas (oscura). */
  --fondo-2: #F5F6F7; --sombra-alta: 0 30px 80px -30px rgba(15, 17, 20, .45);
  --pase-fondo: #FBFCFD; --pase-borde: #D9D9D9; --pase-muesca: #F2F2F2; --pase-perforado: #A5A5A5;
  --tablero-fondo: #0F1114; --tablero-raya: #2A2F36; --tablero-texto: #F2F2F2; --tablero-texto-2: #A5A5A5;
  --tablero-ok: #5BD39A; --tablero-alerta: #E9B04A; --tablero-error: #FF7A7A; --tablero-acento: #8FD3FF;
  /* Lo propio de Nova (las guías, la insignia, la franja de Nova): nunca en lo de la agencia. */
  --sol: #E8962B; --sol-suave: #FCEFD9;
  --negro: #000; --acero: #A5A5A5; --titanio: #F2F2F2; --plasma: #8FD3FF;
  --radio: 10px; --alto-barra: 64px;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display: var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --brand: "Syncopate", "Arial Black", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
body.cargando > *:not(#login-overlay):not(#cargador):not(.avisos) { visibility: hidden; }
/* El modo oscuro de la agencia (core/agencia.js pone data-modo y los neutros del modo en <html>, o en el contenedor de una muestra):
   los controles del navegador (casillas, listas, barras de scroll) también en oscuro. */
[data-modo="oscuro"] { color-scheme: dark; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
/* Los títulos en Archivo más ancho (como el pase de abordar): firmes sin ser pesados. */
h1, h2 { font-family: var(--display); font-weight: 700; font-stretch: 110%; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accion-tinta); }
[hidden] { display: none !important; }
main { flex: 1; }

/* ---------- barra ----------
   La misma barra para la agencia (core/layout.js) y para el panel de Nova (admin/nav.js): NOVA y el nombre de la agencia, las
   herramientas por grupos y la persona. En el computador (1024 px o más) es una columna fija a la izquierda con los nombres a la vista;
   en el celular y la tableta, la marca arriba y las herramientas abajo (las principales y «Más»). Una copia de la barra dentro de otra
   pantalla (la vista previa del panel) se ve como franja: las reglas de columna y de abajo solo aplican a la barra de la página
   (body > .barra-lateral).
   Titanio: el menú es claro, del mismo suelo de la página con una raya fina; todas las opciones (lo principal, lo de cada grupo, «Más»
   y su hoja) con la misma letra, tamaño, peso, color e ícono, y la pantalla abierta, una pastilla grafito (--barra-activo con
   --barra-activo-texto). Sin el logo de la agencia: la barra dice NOVA (Syncopate) y el nombre de la agencia en texto. Los colores los
   pone core/marca-modelo.js (tokensApp, por core/agencia.js); sin agencia (el panel de Nova), los de abajo.
   Abajo en el celular angosto (menos de 520 px) caben cinco opciones de unos 56 px: las de nombre largo dicen su nombre corto
   (.barra-corto: «Docs», «Agencia», «Estación», «Ajustes»); en la columna, la hoja de «Más» y la tableta, el nombre completo. */
:root {
  --barra-efectivo: var(--fondo); --barra-texto: var(--texto); --barra-texto-suave: var(--texto-2);
  --barra-borde: var(--borde); --barra-contorno: var(--borde-fuerte);
  --barra-hover: var(--hundido); --barra-activo: var(--accion); --barra-activo-texto: var(--accion-texto);
  --barra-inicial: var(--accion); --barra-inicial-texto: var(--accion-texto);
  --radio-boton: 4px; --radio-campo: 4px;
}
.barra { position: sticky; top: 0; z-index: 100; background: var(--barra-efectivo); color: var(--barra-texto); border-bottom: 1px solid var(--barra-borde); height: var(--alto-barra); font-family: var(--sans); }
/* Arriba (celular y tableta), el suelo se ve a través de la barra con un velo de vidrio, como en el pase de abordar. El vidrio va en
   una capa de atrás (::before), nunca en la barra: un backdrop-filter en la barra la volvería el marco de lo que va fijo adentro (la
   barra de abajo del celular quedaría pegada a la de arriba). */
@supports (backdrop-filter: blur(8px)) {
  .barra { background: color-mix(in srgb, var(--barra-efectivo) 86%, transparent); }
  .barra::before { content: ''; position: absolute; inset: 0; z-index: -1; backdrop-filter: saturate(1.3) blur(12px); }
}
.barra-interior { max-width: 1180px; margin: 0 auto; padding: 0 20px; height: 100%; display: flex; align-items: center; gap: 16px; }
.barra-marca { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--barra-texto); flex-shrink: 0; min-width: 0; }
/* NOVA: la palabra de la marca, en Syncopate y espaciada (el último espacio se devuelve para que quede centrada). */
.barra-nova { font-family: var(--brand); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .34em; margin-right: -.34em; color: var(--barra-texto); flex-shrink: 0; }
.barra-marca strong { font-weight: 500; font-size: 12.5px; color: var(--barra-texto-suave); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El logo de la agencia en cualquier lugar (core/logo.js logoHtml: entrar no, la barra no; las muestras, Mi agencia, los PDF, el kit, los
   vouchers y el recibo): el ancho por área (--logo-w) y el alto por su proporción (aspect-ratio en su style), nunca object-fit
   (html2canvas no lo entiende: la caja del logo tiene siempre su proporción); si todavía no se sabe su proporción, que quepa en la caja
   (--logo-max-w, --logo-max-h). Con relleno (una tarjeta detrás), content-box: la proporción es la de la imagen. */
.logo-agencia { display: block; width: var(--logo-w, auto); height: auto; max-width: min(100%, var(--logo-max-w, 100%)); max-height: var(--logo-max-h, none); }
/* La inicial (el panel de Nova y Seguridad sin agencia: «N»). */
.barra-inicial { width: 36px; height: 36px; border-radius: var(--radio-boton); font-size: 16px; background: var(--barra-inicial); color: var(--barra-inicial-texto); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; align-self: center; }
.barra-marca:has(.barra-inicial) { align-items: center; }
.barra-marca:has(.barra-inicial) strong { font-weight: 600; font-size: 14px; color: var(--barra-texto); }
.barra-nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.barra-nav::-webkit-scrollbar { display: none; }
.barra-grupo { display: contents; }
.barra-grupo-titulo { display: none; }
/* Cada opción: la misma letra, tamaño, peso, color e ícono; la abierta, la pastilla grafito. */
.barra-nav a, .barra-mas { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 12px; border-radius: var(--radio-boton); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--barra-texto); text-decoration: none; transition: background .15s, color .15s; }
.barra-nav a:hover, .barra-mas:hover { background: var(--barra-hover); color: var(--barra-texto); }
.barra-nav a.activo, .barra-nav a.activo:hover { background: var(--barra-activo); color: var(--barra-activo-texto); font-weight: 600; }
.barra-nav a svg, .barra-mas svg { width: 18px; height: 18px; flex-shrink: 0; }
.barra-corto { display: none; }
.barra-mas { display: none; border: 0; background: transparent; cursor: pointer; }
.barra :is(a, button):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; box-shadow: 0 0 0 5px var(--foco-halo); }
.barra-usuario { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; }
.barra-botones { display: flex; align-items: center; gap: 6px; }
.barra-nombre { font-size: 12.5px; color: var(--barra-texto-suave); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-barra { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radio-boton); border: 1px solid var(--barra-contorno); background: var(--superficie); color: var(--barra-texto); text-decoration: none; transition: border-color .15s, background .15s; }
.btn-barra:hover { background: var(--barra-hover); color: var(--barra-texto); border-color: var(--barra-texto); }
.btn-barra.activo { background: var(--barra-activo); color: var(--barra-activo-texto); border-color: var(--barra-activo); }
.btn-barra svg { width: 16px; height: 16px; }
.btn-crm { width: auto; padding: 0 10px; gap: 6px; grid-auto-flow: column; font-size: 12px; font-weight: 600; line-height: 1; font-family: inherit; cursor: pointer; }
@media (max-width: 640px) { .btn-crm { width: 32px; padding: 0; } .btn-crm span { display: none; } }
.pastilla-prueba { font-family: var(--mono); font-size: 11px; padding: 4px 8px; border-radius: 100px; background: var(--alerta-suave); color: var(--alerta-texto); white-space: nowrap; }
.barra-hoja[hidden] { display: none; }
/* La herramienta abierta que no está en la barra (Cotizador, Pre-reserva, Confirmación), debajo de la marca. */
.barra-donde { flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--barra-activo-texto); background: var(--barra-activo); padding: 4px 10px; border-radius: var(--radio-boton); white-space: nowrap; }

/* Computador: la columna de la izquierda (el mismo suelo, con su raya a la derecha). */
@media (min-width: 1024px) {
  :root { --ancho-barra: 236px; }
  body:has(> header.barra-lateral) { padding-left: var(--ancho-barra); }
  body:has(> header.barra-lateral) { --alto-barra: 0px; }
  body > .barra-lateral { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ancho-barra); height: auto; border-bottom: 0; border-right: 1px solid var(--barra-borde); background: var(--barra-efectivo); }
  body > .barra-lateral::before { display: none; }
  body > .barra-lateral .barra-interior { flex-direction: column; align-items: stretch; height: 100%; max-width: none; padding: 22px 12px 14px; gap: 4px; }
  /* NOVA arriba y, debajo, el nombre de la agencia (hasta dos líneas). */
  body > .barra-lateral .barra-marca { flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 10px 16px; }
  body > .barra-lateral .barra-nova { font-size: 17px; }
  body > .barra-lateral .barra-marca strong { font-size: 13px; white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body > .barra-lateral .barra-donde { align-self: flex-start; margin: 0 10px 8px; }
  body > .barra-lateral .barra-nav { flex-direction: column; align-items: stretch; flex: 1; overflow-x: hidden; overflow-y: auto; margin: 4px 0 0; gap: 14px; }
  body > .barra-lateral .barra-grupo { display: flex; flex-direction: column; gap: 2px; }
  /* Lo principal arriba, separado de los grupos por una raya fina (solo si hay grupos debajo). */
  body > .barra-lateral .barra-grupo[data-grupo="principal"]:has(~ .barra-grupo) { padding-bottom: 14px; border-bottom: 1px solid var(--barra-borde); }
  /* Los títulos de grupo: etiquetas pequeñas, espaciadas y anchas (como los rótulos del pase). */
  body > .barra-lateral .barra-grupo-titulo { display: block; font-size: 10.5px; font-weight: 650; font-stretch: 115%; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--barra-texto-suave); padding: 0 10px 6px; }
  body > .barra-lateral .barra-nav a { padding: 9px 10px; font-size: 14px; gap: 12px; }
  body > .barra-lateral .barra-nav a svg { width: 18px; height: 18px; }
  body > .barra-lateral .barra-usuario { flex-direction: column; align-items: stretch; gap: 10px; border-top: 1px solid var(--barra-borde); padding: 12px 6px 0; }
  body > .barra-lateral .barra-nombre { max-width: none; font-size: 13px; }
  body > .barra-lateral .pastilla-prueba { align-self: flex-start; }
  /* Lo que en la página iba bajo la barra de arriba (franjas, avisos) va arriba del contenido: no hay barra arriba. */
  body > .barra-lateral ~ .franja-practica { top: 0; }
}

/* Celular y tableta: la marca arriba, las herramientas abajo (con el mismo suelo y la misma letra que arriba). */
@media (max-width: 1023.98px) {
  :root { --alto-abajo: 62px; }
  body:has(> header.barra-lateral:not(.barra-sola)) { padding-bottom: calc(var(--alto-abajo) + env(safe-area-inset-bottom, 0px)); }
  /* Los botones fijos de los formularios (Generar, Guardar…) quedan encima de la barra de abajo, no debajo. */
  body:has(> header.barra-lateral:not(.barra-sola)) .acciones-fijas { bottom: calc(var(--alto-abajo) + env(safe-area-inset-bottom, 0px)); }
  /* Con una sola herramienta (Inicio) no hay barra de abajo: la marca de arriba ya lleva a Inicio. */
  body > .barra-lateral.barra-sola .barra-nav { display: none; }
  body > .barra-lateral .barra-interior { padding: 0 16px; gap: 10px; }
  body > .barra-lateral .barra-marca strong { max-width: 46vw; }
  body > .barra-lateral .barra-usuario { margin-left: auto; }
  body > .barra-lateral .barra-nombre { display: none; }
  body > .barra-lateral .barra-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 101; margin: 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); gap: 2px;
    height: calc(var(--alto-abajo) + env(safe-area-inset-bottom, 0px)); background: var(--barra-efectivo); border-top: 1px solid var(--barra-borde); box-shadow: 0 -6px 18px -12px rgba(15, 17, 20, .22); overflow: visible; }
  body > .barra-lateral .barra-nav a, body > .barra-lateral .barra-mas { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; font-size: 11px; border-radius: var(--radio-boton); height: 100%; }
  body > .barra-lateral .barra-nav a span, body > .barra-lateral .barra-mas span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }   /* «…» solo por si acaso: todo cabe */
  body > .barra-lateral .barra-nav a svg, body > .barra-lateral .barra-mas svg { width: 21px; height: 21px; }
  body > .barra-lateral .barra-nav a:not(.principal) { display: none; }
  body > .barra-lateral .barra-mas { display: inline-flex; }
  body > .barra-lateral.barra-abierta .barra-mas { background: var(--barra-hover); }   /* abierta: el resalte suave (no la pastilla de la pantalla abierta) */
  /* La hoja de «Más»: lo que no cupo abajo, en cuadros grandes, sobre las tarjetas. */
  body > .barra-lateral .barra-hoja { position: fixed; left: 0; right: 0; bottom: calc(var(--alto-abajo) + env(safe-area-inset-bottom, 0px)); z-index: 102; background: var(--superficie); color: var(--barra-texto);
    border-top: 1px solid var(--barra-borde); border-radius: var(--radio) var(--radio) 0 0; box-shadow: var(--sombra-alta); padding: 14px 12px 12px; max-height: 70vh; overflow-y: auto; }
  body > .barra-lateral .barra-hoja-interior { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  body > .barra-lateral .barra-hoja a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 4px; border-radius: var(--radio); background: var(--barra-efectivo); border: 1px solid var(--barra-borde); min-width: 0;
    color: var(--barra-texto); text-decoration: none; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center; }
  body > .barra-lateral .barra-hoja a:hover { background: var(--barra-hover); }
  body > .barra-lateral .barra-hoja a svg { width: 22px; height: 22px; }
  body > .barra-lateral .barra-hoja a span { max-width: 100%; overflow-wrap: break-word; }
  body > .barra-lateral .barra-hoja a.activo { background: var(--barra-activo); color: var(--barra-activo-texto); border-color: var(--barra-activo); font-weight: 600; }
  /* Los avisos y la pastilla de las guías, por encima de la barra de abajo. */
  body:has(> header.barra-lateral:not(.barra-sola)) .avisos { bottom: calc(var(--alto-abajo) + 14px + var(--guia-hoja-abajo, 0px)); }
}
@media (max-width: 519.98px) {
  body > .barra-lateral .barra-nav a .barra-largo { display: none; }
  body > .barra-lateral .barra-nav a .barra-corto { display: block; }
}
@media (max-width: 1023.98px) and (min-width: 641px) { body > .barra-lateral .barra-nombre { display: inline; } }
/* Arriba, en el celular y la tableta: la marca se encoge (el nombre con «…») para que los botones de la persona siempre quepan. */
@media (max-width: 1023.98px) {
  body > .barra-lateral .barra-marca { flex: 0 1 auto; overflow: hidden; }
  body > .barra-lateral .barra-usuario { flex-shrink: 0; }
}
@media (max-width: 640px) {
  body > .barra-lateral .barra-donde { display: none; }
  body > .barra-lateral .barra-botones { gap: 4px; }
}
@media (max-width: 379.98px) { body > .barra-lateral .barra-marca strong { display: none; } }

/* ---------- página ---------- */
.pagina { max-width: 1180px; margin: 0 auto; padding: 32px 20px 64px; width: 100%; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
/* El rótulo sobre el título (como los del pase de abordar): pequeño, ancho y espaciado. */
.ojo { font-family: var(--sans); font-size: 10.5px; line-height: 1.3; letter-spacing: .14em; font-weight: 650; font-stretch: 115%; text-transform: uppercase; color: var(--texto-2); margin-bottom: 6px; }
.encabezado h1 { font-size: 26px; font-weight: 700; }
/* Los títulos de cada pantalla (h1 y h2 de la página y de los diálogos) con el color de títulos de la agencia (--titulos: el suyo, ya
   legible, o la tinta). Sin peso (:where): una etiqueta pequeña (.columna h2) o lo de Nova ponen el suyo encima. Los documentos (PDF)
   y las hojas de los documentos de Nova (.hoja, admin/) tienen sus colores. */
:where(.pagina, .dialogo) :where(h1, h2):not(:where(.documento, .kit-hoja, .doc-reserva, .hoja) *) { color: var(--titulos); }
.encabezado .sub { color: var(--texto-2); margin-top: 4px; max-width: 60ch; }

.atajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 28px; }
/* Las tarjetas de acción: la misma forma en todas las agencias, con la franja degradada de su color de acción a su acento arriba. */
.atajo { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 20px 18px 16px; background: var(--superficie); border: 1px solid transparent; border-radius: var(--radio); text-decoration: none; color: var(--texto); box-shadow: 0 4px 15px rgba(0, 0, 0, .05); transition: border-color .15s, transform .15s, box-shadow .15s; }
.atajo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--accion), var(--acento)); }
/* El degradado, en oklch: entre dos colores opuestos (un naranja y un turquesa) el centro conserva su color en vez de pasar por un gris
   sucio (en sRGB). Con @supports: un navegador que no lo entiende se queda con el de arriba (con var() no habría respaldo). */
@supports (background: linear-gradient(90deg in oklch, red, blue)) { .atajo::before { background: linear-gradient(90deg in oklch, var(--accion), var(--acento)); } }
.atajo:hover { border-color: var(--accion-borde); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
.atajo .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accion-suave); color: var(--accion-tinta); flex-shrink: 0; }
.atajo .ic svg { width: 28px; height: 28px; }
.atajo b { display: block; font-weight: 600; }
.atajo small { color: var(--texto-3); font-size: 12.5px; }
.atajo.apagado { opacity: .45; pointer-events: none; }
/* Atajos menores (Academia, seguridad de la cuenta): debajo del trabajo, más chicos. */
.atajos-menores { margin-top: 28px; }
/* «Más datos» en un formulario (Nuevo cliente): lo que no hace falta el primer día, plegado. */
.mas-datos { margin: 4px 0 12px; }
.mas-datos summary { cursor: pointer; font-size: 13px; color: var(--accion-tinta); padding: 6px 0; list-style: none; }
.mas-datos summary::before { content: '+ '; font-weight: 700; } .mas-datos[open] summary::before { content: '– '; }
.mas-datos summary::-webkit-details-marker { display: none; }
.mas-datos .campos { margin-top: 8px; }
/* Equipo → «Ajustes de la agencia»: debajo de la gente; si no hay nada que mostrar (asesora), no sale. */
.ajustes-agencia { margin-top: 36px; }
.ajustes-agencia .ajustes-titulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); margin: 0 0 12px; }
.ajustes-agencia:not(:has(.tarjeta:not([hidden]), .nota)) { display: none; }
.cotizador-equipo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cotizador-equipo h2 { font-size: 16px; margin-bottom: 4px; } .cotizador-equipo p { color: var(--texto-2); font-size: 14px; }
/* Frases sugeridas bajo un campo (la validez del Cotizador): un clic y queda escrita. */
.sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sugerencia { border: 1px dashed var(--borde-fuerte); background: transparent; color: var(--texto-2); font-size: 12px; padding: 3px 9px; border-radius: 100px; cursor: pointer; }
.sugerencia:hover { border-color: var(--accion-borde); color: var(--accion-tinta); }
.atajos-menores .atajo { padding: 20px 14px 10px; }
.atajos-menores .atajo .ic { width: 32px; height: 32px; } .atajos-menores .atajo .ic svg { width: 18px; height: 18px; }
.atajos-menores .atajo b { font-size: 14px; }

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
/* La cifra nunca se parte: la letra se acomoda al ancho de la tarjeta (unidades del contenedor) hasta 22 px. */
.metrica { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; container-type: inline-size; min-width: 0; }
.metrica .valor { display: block; font-family: var(--mono); font-size: clamp(14px, 10.5cqi, 22px); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.metrica .nombre { font-size: 12px; color: var(--texto-3); margin-top: 2px; }

.lista { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.fila { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.fila:last-child { border-bottom: none; }
.fila-titulo { font-weight: 500; }
.fila-sub { font-size: 12.5px; color: var(--texto-3); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.etiqueta { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 100px; background: var(--hundido); color: var(--texto-2); margin-right: 6px; }
.vacio { padding: 40px 20px; text-align: center; color: var(--texto-3); }

/* ---------- formularios y botones ---------- */
label { display: block; font-size: 13px; font-weight: 500; color: var(--texto-2); margin-bottom: 12px; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--borde); border-radius: var(--radio-campo, 4px); background: color-mix(in srgb, var(--fondo) 55%, var(--superficie)); color: var(--texto); font-size: 14px; }
label input:focus, label select:focus, label textarea:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 4px var(--foco-halo); background: var(--superficie); }
.fila-check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.fila-check input { width: auto; margin: 0; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radio-boton, 4px); border: 1px solid transparent; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.btn svg { width: 16px; height: 16px; }
/* El botón principal: la pastilla grafito; al pasar el mouse, un anillo de plasma (Titanio). */
.btn-primario { background: var(--accion); color: var(--accion-texto); font-weight: 700; border-radius: 100px; padding-inline: 20px; transition: background .15s, box-shadow .15s; }
.btn-primario:hover { background: var(--accion-hover); box-shadow: 0 0 0 3px var(--acento); }
.btn-primario.btn-chico { padding-inline: 14px; }
.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.btn-secundario:hover { background: var(--hundido); }
.btn-peligro { background: var(--error-suave); color: var(--error); }
.btn-bloque { width: 100%; }
.btn-chico { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; box-shadow: 0 0 0 5px var(--foco-halo); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; margin-bottom: 16px; }
.tarjeta h2 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }

/* ---------- el panel de Nova ---------- */
/* @nova: el panel de Nova (admin/, <body class="panel-nova">) conserva su forma de siempre: no es una agencia. Lo de una agencia dentro
   del panel (las muestras del alta, con [data-barra-tono] de core/agencia.js) va con la forma de las agencias; la vista previa
   (admin/vista-previa.html) no es panel-nova: se ve como la ve el equipo. */
.panel-nova .ojo:not(:where([data-barra-tono], .login-caja) *) { letter-spacing: .3em; font-weight: 400; }
.panel-nova .encabezado h1:not(:where([data-barra-tono], .login-caja) *) { font-weight: 600; }
.panel-nova .btn-primario:not(:where([data-barra-tono], .login-caja) *) { font-weight: 600; }
.panel-nova .btn-primario:not(:where([data-barra-tono], .login-caja) *):hover { background: var(--accion); filter: brightness(1.08); }
.panel-nova .etiqueta:not(:where([data-barra-tono], .login-caja) *) { border-radius: 3px; }
.panel-nova :is(label, .campo) :is(input, select, textarea):not(:where([data-barra-tono], .login-caja) *) { background: var(--superficie); border-color: var(--borde-fuerte); }
.panel-nova :is(label, .campo) :is(input, select, textarea):not(:where([data-barra-tono], .login-caja) *):focus { outline: 2px solid var(--foco); outline-offset: 1px; border-color: transparent; box-shadow: none; }
/* @fin-nova */

/* ---------- login: la pantalla de entrar es de Nova (Titanio) ----------
   El suelo de titanio con un brillo de plasma arriba, la tarjeta de Nova con la palabra NOVA (y, si en este equipo ya entró alguien de
   una agencia, su nombre en texto: core/auth.js) y el formulario de la app. Sin el logo de ninguna agencia. Solo tokens. */
#login-overlay { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(ellipse 60% 50% at 70% 12%, color-mix(in srgb, var(--acento) 26%, transparent), transparent 70%), var(--fondo); display: grid; place-items: center; padding: 20px; visibility: visible; }
.login-caja { width: 100%; max-width: 392px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 30px 28px 22px; color: var(--texto); box-shadow: var(--sombra-alta); }
.login-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 26px; }
.login-nova { font-family: var(--brand); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: .34em; margin-right: -.34em; color: var(--texto); }
/* La agencia que entró la última vez en este equipo: solo su nombre, al lado de NOVA como en la barra. */
.login-agencia { font-size: 13px; color: var(--texto-2); }
.login-caja h1 { font-size: 26px; font-weight: 750; font-stretch: 110%; color: var(--titulos); }
.login-caja .sub { color: var(--texto-2); margin: 4px 0 20px; }
.login-caja .btn-primario { margin-top: 6px; }
.login-caja .error { color: var(--error); font-size: 13px; min-height: 18px; margin-top: 10px; }
.login-caja .pie { text-align: center; font-size: 13px; margin-top: 6px; }
.login-caja .pie a { color: var(--texto-2); }
.login-firma { text-align: center; font-size: 11px; color: var(--texto-3); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }
.login-firma b { font-family: var(--brand); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--texto); font-weight: 700; }

/* ---------- pie Nova ---------- */
.pie-nova { padding: 18px 20px; text-align: center; }
.pie-nova a { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--texto-3); text-decoration: none; letter-spacing: .04em; }
.pie-nova b { font-weight: 600; color: var(--texto-3); }

/* ---------- avisos y cargador ---------- */
.avisos { position: fixed; bottom: calc(20px + var(--guia-hoja-abajo, 0px)); left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 8px; }
.aviso { display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 4px; background: var(--texto); color: var(--texto-invertido); font-size: 14px; box-shadow: var(--sombra); animation: subir .2s ease-out; }
.aviso-ok { background: var(--ok); } .aviso-error { background: var(--error); }
/* El botón de un aviso («Deshacer», «Recuperar»): con la letra del aviso, sobre su mismo fondo. */
.aviso button { flex: none; margin: 0; min-height: 32px; padding: 4px 12px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.aviso button:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.aviso button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.aviso.salir { opacity: 0; transition: opacity .3s; }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } }
#cargador { position: fixed; inset: 0; z-index: 1050; background: color-mix(in srgb, var(--fondo) 70%, transparent); display: grid; place-items: center; visibility: visible; }
.cargador-caja { display: flex; align-items: center; gap: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 18px; box-shadow: var(--sombra); }
.giro { width: 18px; height: 18px; border: 2px solid var(--borde); border-top-color: var(--accion-borde); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aviso, .giro { animation: none; } }

/* ============================================================
   FORMULARIOS DE HERRAMIENTAS (Tiza, Aparta, Sella)
   ============================================================ */
.pagina-estrecha { max-width: 920px; }
.encabezado-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
fieldset.bloque { background: var(--superficie); border: 1px solid transparent; border-radius: var(--radio); padding: 26px 24px 24px; margin: 0 0 16px; position: relative; min-width: 0; box-shadow: 0 4px 15px rgba(0, 0, 0, .04); }
fieldset.bloque legend { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--acento-texto); background: var(--acento); padding: 5px 15px; border-radius: 20px; }
fieldset.bloque > .ayuda, .ayuda { font-size: 12.5px; color: var(--texto-3); margin: -2px 0 14px; }
.sub-bloque { border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); padding: 16px; margin-top: 12px; position: relative; grid-column: 1 / -1; }
.sub-bloque > .titulo { display: block; font-family: var(--mono); color: var(--texto-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.campo { display: flex; flex-direction: column; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo > label { font-size: 12px; font-weight: 500; color: var(--texto-2); margin-bottom: 5px; }
.campo > label small { font-weight: 400; color: var(--texto-3); margin-left: 4px; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 9px 11px; border-radius: var(--radio-campo, 4px); border: 1px solid var(--borde); background: color-mix(in srgb, var(--fondo) 55%, var(--superficie)); color: var(--texto); font-size: 14px; margin: 0; }
.campo textarea { resize: vertical; min-height: 70px; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px var(--foco-halo); background: var(--superficie); }
/* Cualquier campo de la app de la agencia (también los sueltos, sin un label alrededor ni .campo: el buscador de Clientes, los del
   Cotizador, Equipo, Reportes, Configuración, Citas, la pre-reserva…): la misma forma que todos —el fondo tintado, el borde, las esquinas
   y el foco con su halo—. Sin peso (:where): cada pantalla pone su tamaño y lo suyo encima (un [readonly], un :disabled, una pastilla
   para buscar). El panel de Nova (body.panel-nova) conserva la suya (en su zona «@nova»). */
:where(body:not(.panel-nova)) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]), select, textarea) { border: 1px solid var(--borde); border-radius: var(--radio-campo, 4px); background: color-mix(in srgb, var(--fondo) 55%, var(--superficie)); color: var(--texto); }
:where(body:not(.panel-nova)) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]), select, textarea):focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px var(--foco-halo); background: var(--superficie); }
.campo input[readonly] { background: var(--hundido); color: var(--texto-2); cursor: default; }
.campo input:user-invalid, .campo select:user-invalid { border-color: var(--error); }
.campo .pista { font-size: 11.5px; color: var(--texto-3); margin-top: 5px; }
.campo.campo-privado > label { color: var(--alerta); }
.campo.atenuado { opacity: .5; }
.con-prefijo { position: relative; }
.con-prefijo input { padding-left: 28px; }
.con-prefijo::before { content: attr(data-prefijo); position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--texto-3); font-family: var(--mono); font-size: 13px; pointer-events: none; }
.moneda { display: flex; gap: 8px; }
.moneda .con-prefijo { flex: 1; }
.moneda select { width: 88px; flex-shrink: 0; }
.opcion-check { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 13.5px; color: var(--texto); cursor: pointer; margin: 0; }
.opcion-check input { width: 16px; height: 16px; accent-color: var(--accion-borde); margin: 0; }
.btn-suave { background: var(--superficie); color: var(--acento-tinta); border: 1px solid var(--acento-tinta); font-weight: 600; }
.btn-suave:hover { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.btn-acento { background: var(--acento); color: var(--acento-texto); }
.btn-grande { padding: 14px 22px; font-size: 16px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acciones .btn { flex: 1 1 auto; }
.acciones-fijas { position: sticky; bottom: 0; z-index: 50; margin: 20px -20px -64px; padding: 12px 20px 20px; background: linear-gradient(to top, var(--fondo) 75%, transparent); }
.acciones-fijas .acciones { margin: 0; }
.quitar { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--error-suave); color: var(--error); border: none; font-size: 17px; line-height: 1; display: grid; place-items: center; z-index: 2; }
.quitar:hover { background: var(--error); color: var(--texto-invertido); }
.botonera-componentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; padding: 12px; background: var(--hundido); border-radius: var(--radio); margin-bottom: 16px; }
.resumen-precio { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 8px; }
.resumen-precio > div { background: var(--hundido); border-radius: 4px; padding: 10px 14px; }
.resumen-precio small { display: block; font-size: 11px; color: var(--texto-3); }
.resumen-precio b { font-family: var(--mono); font-size: 18px; font-weight: 500; }
.resumen-precio .privado { background: var(--alerta-suave); }
.resumen-precio .privado b { color: var(--alerta); }
.nivel { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 10px; background: var(--superficie); }
.nivel.inactivo { opacity: .55; }
.nivel-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.panel-hotel { background: var(--hundido); border-radius: var(--radio); padding: 12px 14px; }
.panel-cargando { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-2); }
.candidatos { display: grid; gap: 8px; }
.candidato { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: 4px; padding: 8px; cursor: pointer; }
.candidato:hover { border-color: var(--accion-borde); }
.candidato img, .candidato .sin-foto { width: 64px; height: 48px; object-fit: cover; border-radius: 3px; background: var(--hundido); flex-shrink: 0; }
.candidato b { display: block; font-size: 13.5px; } .candidato small { display: block; color: var(--texto-3); font-size: 12px; } .candidato em { display: block; color: var(--accion-tinta); font-size: 12px; font-style: normal; }
.nota { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 4px; background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--alerta); font-size: 13px; color: var(--texto-2); }
.nota.ok { border-left-color: var(--ok); }
.comparacion-viva .bien { color: var(--ok); font-weight: 600; } .comparacion-viva .mal { color: var(--alerta); font-weight: 600; }
.vuelos { display: grid; gap: 8px; }
.vuelo { display: flex; justify-content: space-between; gap: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 4px; padding: 10px 12px; flex-wrap: wrap; }
.vuelo.mejor { border-color: var(--accion-borde); }
.vuelo-info { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; } .vuelo-info img { width: 28px; height: 28px; object-fit: contain; }
.vuelo-info b { display: block; } .vuelo-info span, .vuelo-info small { display: block; color: var(--texto-3); font-size: 12px; }
.vuelo-precio { text-align: right; } .vuelo-precio strong { font-family: var(--mono); font-size: 16px; display: block; } .vuelo-precio small, .vuelo-precio em { display: block; font-size: 11.5px; color: var(--texto-3); font-style: normal; }
.vuelo-botones { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; flex-wrap: wrap; }
.referencia-vuelos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); } .etiqueta.pendiente { background: var(--alerta-suave); color: var(--alerta-texto); }

/* pegar imágenes */
.pegar { border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); min-height: 110px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; text-align: center; padding: 10px; }
.pegar:hover, .pegar.sobre { border-color: var(--accion-borde); }
.pegar.activa { border-color: var(--accion-borde); border-style: solid; box-shadow: 0 0 0 3px var(--foco-halo); }
.pegar p { color: var(--texto-3); font-size: 11.5px; line-height: 1.4; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; }
.pegar p b { color: var(--texto-2); font-size: 12.5px; }
.pegar.activa .pista-pegar { color: var(--accion-tinta); font-weight: 600; }
.pegar .elegir { margin-top: 4px; border: none; background: transparent; color: var(--accion-tinta); font-size: 11px; text-decoration: underline; padding: 2px 4px; }
.pegar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pegar .borrar-img { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--texto) 80%, transparent); color: var(--texto-invertido); font-size: 13px; display: none; place-items: center; z-index: 2; }
.pegar.con-imagen .borrar-img { display: grid; } .pegar.con-imagen p { display: none; }
.pegar.con-imagen.activa::after { content: "Ctrl+V reemplaza"; position: absolute; left: 6px; bottom: 6px; font-size: 10px; color: var(--texto-invertido); background: color-mix(in srgb, var(--texto) 80%, transparent); padding: 2px 7px; border-radius: 3px; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.galeria .pegar { min-height: 118px; }

/* ============================================================
   DOCUMENTO DEL CLIENTE (lo que se vuelve PDF). Marca de la agencia.
   ============================================================ */
.doc-herramientas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); margin: 0 auto 16px; max-width: 820px; }
.doc-herramientas .titulo { font-size: 12.5px; color: var(--texto-3); }
.doc-herramientas .btn.activo { background: var(--accion); color: var(--accion-texto); border-color: var(--accion); }
.doc-acciones { display: flex; gap: 10px; flex-wrap: wrap; max-width: 820px; margin: 20px auto 0; }
.doc-acciones .btn { flex: 1 1 180px; }
/* Dos niveles (Tiza): arriba lo que se manda al cliente; abajo, chico, lo demás. */
.doc-acciones:has(.doc-acciones-principal) { flex-direction: column; gap: 12px; }
.doc-acciones-principal { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-acciones-principal .btn { flex: 1 1 180px; }
.doc-acciones-secundarias { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.doc-acciones-secundarias .btn { flex: 0 1 auto; font-size: 13px; padding: 8px 14px; }
/* @documento: las hojas de los documentos y la muestra del documento de la vista previa de Nova (admin/alta-comun.js muestraDocumento,
   con la marca tal cual y su letra calculada); los PDF de las agencias van en documento.css (y documento-reserva.css, documento-viaje.css) */
/* Las hojas de los documentos (el PDF, el kit, los vouchers y el recibo) son blancas SIEMPRE y con los valores de siempre, también en
   el modo oscuro y aunque la app cambie: vuelven a los neutros de las hojas (core/marca-modelo.js NEUTROS_HOJA; pruebas/
   colores-estaticos.test.js lo compara). !important: le ganan a los de la app puestos en <html> o en el contenedor de una muestra. */
.documento, .kit-hoja, .recibo { color-scheme: light;
  --fondo: #EEF3F4 !important; --superficie: #FFFFFF !important; --hundido: #E3EAEC !important; --borde: #D5DFE2 !important; --borde-fuerte: #B4C2C7 !important;
  --texto: #0F2129 !important; --texto-2: #465963 !important; --texto-3: #56676F !important; --texto-invertido: #FFFFFF !important;
  --ok: #2A7A4B !important; --ok-suave: #E1F2E7 !important; --alerta: #B4540A !important; --alerta-suave: #FBEEDD !important; --alerta-texto: #9A4708 !important;
  --error: #B3261E !important; --error-suave: #FCE8E6 !important; --info: #2560C0 !important; --info-suave: #E5EEFB !important;
  --sombra: 0 1px 2px rgba(21, 24, 29, .05), 0 6px 20px -10px rgba(21, 24, 29, .18) !important; }
.documento { background: #fff; color: #1b1e24; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; box-shadow: var(--sombra); width: 100%; max-width: 820px; margin: 0 auto; font-family: var(--sans); }
.doc-cabecera { padding: 40px 30px 24px; text-align: center; }
.doc-cabecera .logo-agencia { margin: 0 auto; }
.doc-cabecera .marca { display: block; margin-top: 8px; font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--marca); }
.doc-cuerpo { padding: 0 30px 30px; text-align: left; }
.doc-centrado { text-align: center; }
.doc-pastilla { display: inline-flex; margin: 0 auto 20px; padding: 9px 24px; border-radius: 100px; background: var(--marca); color: var(--doc-marca-texto); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.doc-intro { font-size: 14.5px; color: #555c68; text-align: center; max-width: 58ch; margin: 0 auto 18px; }
.doc-caja { background: #f5f6f8; border: 1px solid #e3e6eb; border-radius: 8px; padding: 14px 18px; margin-bottom: 16px; }
.doc-caja p { font-size: 13.5px; color: #555c68; margin: 0; } .doc-caja p + p { margin-top: 5px; } .doc-caja strong { color: var(--marca); }
.doc-seccion { border: 1px solid #e3e6eb; border-radius: 8px; overflow: hidden; margin-top: 16px; background: #fff; }
.doc-seccion > h3 { background: var(--marca); color: var(--doc-marca-texto); padding: 11px 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin: 0; }
.doc-seccion > h3 svg { width: 16px; height: 16px; }
.doc-seccion .cuerpo { padding: 18px; }
.doc-seccion h4 { font-size: 21px; font-weight: 600; color: var(--marca-2); margin: 0 0 12px; letter-spacing: -.01em; }
.estrellas { color: #E0A82E; font-size: .8em; letter-spacing: .05em; }
.doc-item { background: #f5f6f8; border-left: 3px solid var(--marca); border-radius: 4px; padding: 11px 13px; margin-top: 10px; font-size: 14px; }
.doc-item b { color: var(--marca); }
.precio-destacado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.precio-destacado > div { border-radius: 8px; padding: 18px 20px; text-align: center; }
.precio-destacado .por-persona { background: var(--marca); color: var(--doc-marca-texto); } .precio-destacado .total { background: #eef0f3; color: var(--marca-2); }
.precio-destacado.solo { grid-template-columns: 1fr; }
.precio-destacado small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.precio-destacado strong { display: block; font-family: var(--mono); font-size: 30px; font-weight: 500; line-height: 1.15; margin: 4px 0; }
.precio-destacado span { font-size: 12.5px; opacity: .85; }
.doc-cta { text-align: center; padding: 24px; margin-top: 24px; background: #f5f6f8; border: 1px solid #e3e6eb; border-radius: 10px; }
.doc-cta h3 { font-size: 20px; font-weight: 600; color: var(--marca-2); margin: 0 0 14px; }
.doc-cta a { display: block; text-decoration: none; padding: 13px; border-radius: 100px; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.doc-cta a.aceptar { background: var(--marca); color: var(--doc-marca-texto); } .doc-cta a.modificar { background: var(--marca-2); color: var(--doc-marca-2-texto); font-size: 13.5px; padding: 11px; }
.doc-pie { padding: 22px 20px 8px; text-align: center; border-top: 1px solid #e3e6eb; margin-top: 22px; }
.doc-pie .titulo-pago { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #7d8592; margin: 0; }
.doc-pie .medios { font-size: 13px; margin: 8px 0 0; color: #1b1e24; font-weight: 500; }
.doc-pie .terminos { display: inline-block; margin-top: 14px; padding: 9px 20px; border: 1.5px solid var(--marca); border-radius: 6px; color: var(--marca); font-weight: 600; font-size: 13px; text-decoration: none; }
.doc-legal { background: var(--marca-2); color: var(--doc-marca-2-texto); padding: 20px 30px; margin-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.doc-legal .nombre strong { font-size: 14px; letter-spacing: .08em; font-weight: 700; text-transform: uppercase; }
.doc-legal .datos { display: flex; gap: 22px; text-align: right; }
.doc-legal .datos small { display: block; font-size: 9px; letter-spacing: .1em; opacity: .6; } .doc-legal .datos span { font-size: 11.5px; font-weight: 500; } .doc-legal .datos em { display: block; font-style: normal; font-size: 10.5px; opacity: .75; }
/* @fin-documento */
@media (max-width: 760px) {
  .grid, .grid-3, .precio-destacado { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr 1fr; }
  fieldset.bloque { padding: 26px 14px 18px; }
  .doc-cabecera { padding: 28px 18px 18px; } .doc-cuerpo { padding: 0 16px 20px; }
  .doc-legal { flex-direction: column; text-align: center; } .doc-legal .datos { text-align: center; flex-direction: column; gap: 8px; }
  .acciones-fijas { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}

/* novedades en Órbita */
.novedades { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--info); border-radius: var(--radio); padding: 14px 18px; margin-bottom: 20px; }
.novedades-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.novedad { padding: 8px 0; border-top: 1px dashed var(--borde); }
.novedad b { display: block; } .novedad p { margin: 2px 0 0; color: var(--texto-2); font-size: 14px; } .novedad small { color: var(--texto-3); font-size: 11.5px; }

/* planes precargados en Tiza: panel para elegir, aviso de plan cargado y diálogo del nombre */
.panel-planes { box-shadow: var(--sombra); }
.panel-planes-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.panel-planes-cab h2 { margin-bottom: 4px; }
.panel-planes-cab .ayuda { margin: 0; }
.buscar-plan { display: block; width: 100%; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
.lista-planes { max-height: 420px; overflow-y: auto; }
.plan-datos { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.plan-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-cargado { margin-bottom: 16px; }
.dialogo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; width: min(460px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.dialogo::backdrop { background: var(--velo); }
.dialogo h2 { font-size: 17px; margin-bottom: 6px; }
.dialogo .ayuda { margin: 0 0 14px; }
.dialogo .acciones { justify-content: flex-end; }
.dialogo .acciones .btn { flex: 0 0 auto; }

/* visor de adjuntos: la imagen llega con la sesión del usuario a un enlace blob: local (core/archivos.js) */
.visor-adjunto { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden; }
.visor-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.visor-cab b { font-weight: 500; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-botones { display: flex; gap: 6px; flex-shrink: 0; }
.visor-imagen { padding: 12px; background: var(--hundido); display: grid; place-items: center; }
.visor-imagen img { display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }

/* exportar datos en Órbita (solo admin de la agencia) */
.exportar-lineas { display: grid; gap: 4px; margin: 0 0 12px; font-size: 13.5px; color: var(--texto-2); }
.exportar-lineas b { color: var(--texto); font-family: var(--mono); font-weight: 500; }
.exportar-progreso { display: block; width: 100%; height: 6px; margin: 0 0 6px; accent-color: var(--accion-borde); }
.exportar-error { margin: 0 0 8px; }

/* ---------- Insignia "Cliente fundador" (sello de Nova: paleta de Nova, nunca --marca) ---------- */
.ojo-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ojo-fila .ojo { margin-bottom: 0; }
/* @nova: la insignia de cliente fundador es un sello de Nova */
.insignia-fundador { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border: 0; border-radius: 999px; background: #000; color: #F2F2F2;
  font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
.insignia-fundador:focus-visible { outline: 2px solid var(--plasma); outline-offset: 2px; }
.insignia-sello { width: 16px; height: 16px; flex-shrink: 0; }
.insignia-num { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; }
.insignia-punto { width: 6px; height: 6px; border-radius: 50%; background: #8FD3FF; flex-shrink: 0; }
/* @fin-nova */

/* ---------- Órbita por cargo ---------- */
.lista-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.lista-cab h2 { font-size: 15px; font-weight: 600; }
.filtro-asesor { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.filtro-asesor select { width: auto; max-width: 240px; margin: 0; padding: 6px 10px; }
.equipo-mes { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); margin: 0 0 20px; }
.equipo-mes summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; }
.equipo-mes > div { padding: 0 16px 14px; }
.equipo-mes .ayuda { margin: 8px 0 0; }
.tabla-envoltura { overflow-x: auto; }
.tabla-equipo-mes { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-equipo-mes th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--borde-fuerte); white-space: nowrap; }
.tabla-equipo-mes td { padding: 8px; border-bottom: 1px solid var(--borde); }
.tabla-equipo-mes td small { display: block; color: var(--texto-3); font-size: 11.5px; }
.tabla-equipo-mes .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* La tabla de la app (Mis pagos y Clientes): una sola forma; Clientes le suma lo suyo abajo (.tabla-clientes). */
.tabla-pagos, .tabla-clientes { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-pagos th, .tabla-clientes th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--borde-fuerte); white-space: nowrap; }
.tabla-pagos td, .tabla-clientes td { padding: 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-pagos .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.consejos { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; color: var(--texto-2); }
.consejos b { color: var(--texto); }
.gracias { font-size: 15px; color: var(--texto); }
.firma-gracias { margin-top: 10px; font-size: 12.5px; color: var(--texto-3); }
.gracias-insignia { margin-top: 14px; }

/* ---------- Equipo ---------- */
.dialogo-ancho { width: min(560px, calc(100vw - 32px)); }
.dialogo .error { color: var(--error); font-size: 13px; min-height: 18px; margin: 4px 0 0; }
.persona { align-items: flex-start; }
.persona.inactiva { background: var(--hundido); }
.persona-inicial { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accion-suave); color: var(--accion-tinta); font-weight: 600; flex-shrink: 0; }
.persona-datos { flex: 1 1 220px; min-width: 0; }
.persona-datos .fila-sub span { overflow-wrap: anywhere; }
.persona-cargo { flex: 1 1 220px; display: grid; gap: 4px; }
.persona-cargo select { width: auto; max-width: 100%; padding: 6px 10px; font-size: 13.5px; }
.persona-cargo small { color: var(--texto-3); font-size: 12px; }
.cargo-fijo { font-size: 13.5px; font-weight: 600; }
.persona-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.interruptor { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 12.5px; font-weight: 500; color: var(--texto-2); cursor: pointer; }
.interruptor input { width: 16px; height: 16px; margin: 0; accent-color: var(--accion-borde); }
.etiqueta.apagado { background: var(--hundido); color: var(--texto-2); border: 1px solid var(--borde); }
#avisos-equipo { display: grid; gap: 10px; margin-bottom: 16px; }
#avisos-equipo:empty { display: none; }
.cargos-tarjetas { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; min-width: 0; }
.cargos-tarjetas legend { font-size: 13px; font-weight: 500; color: var(--texto-2); margin-bottom: 6px; padding: 0; }
.cargo-tarjeta { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); cursor: pointer; }
.cargo-tarjeta input { grid-row: span 2; width: 16px; height: 16px; margin: 0; accent-color: var(--accion-borde); }
.cargo-tarjeta b { font-size: 14px; color: var(--texto); }
.cargo-tarjeta small { font-weight: 400; color: var(--texto-3); font-size: 12.5px; }
.cargo-tarjeta:has(input:checked) { border-color: var(--accion-borde); box-shadow: 0 0 0 1px var(--accion-borde); }
.historial-equipo { margin-top: 20px; }
/* Equipo → Cuentas oficiales de la agencia (el gerente las cambia; el supervisor las ve). */
.cuentas-equipo label { display: block; font-size: 12px; font-weight: 500; color: var(--texto-2); margin-bottom: 5px; }
.cuentas-equipo textarea { width: 100%; padding: 9px 11px; font: inherit; font-size: 14px; line-height: 1.45; resize: vertical; min-height: 90px; }
.cuentas-equipo textarea[readonly] { background: var(--hundido); color: var(--texto-2); resize: none; }
.cuentas-equipo .pista { font-size: 12px; color: var(--texto-3); margin: 6px 0 0; }
.cuentas-equipo .error { color: var(--error); font-size: 13px; min-height: 18px; margin: 4px 0 0; }
.cuentas-equipo .acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.historial-equipo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.historial-equipo li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--borde); padding-top: 8px; }
.historial-equipo li small { color: var(--texto-3); font-family: var(--mono); font-size: 11.5px; }
/* Equipo → Poderes (core/poderes-modelo.js): el resumen de arriba (lema, quién cambia qué, el último cambio) y, en cada persona, sus
   casillas en una rejilla que se acomoda sola (una columna a 390 px). Cada casilla tiene su zona de toque de 44 px y el foco visible. */
.poderes-resumen { display: grid; gap: 6px; }
.poderes-resumen h2 { margin: 0; }
.poderes-lema { margin: 0; font-size: 15px; font-weight: 700; color: var(--titulos); }
.poderes-quien, .poderes-ultimo { margin: 0; font-size: 13.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.poderes-ultimo b { font-weight: 600; color: var(--texto); }
.poderes-ultimo small { color: var(--texto-3); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.poderes-resumen .nota { margin-top: 6px; }
.persona-poderes { flex: 1 1 100%; min-width: 0; border-top: 1px dashed var(--borde); padding-top: 4px; }
.persona-poderes > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 0; border-radius: 4px; font-size: 13.5px; font-weight: 600; color: var(--accion-tinta); }
.persona-poderes > summary::-webkit-details-marker { display: none; }
.persona-poderes > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
.persona-poderes[open] > summary::before { transform: rotate(45deg); }
.persona-poderes > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.poderes-nota { margin: 0 0 8px; font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.lista-poderes { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.poder-item { display: grid; align-content: start; gap: 0; min-width: 0; padding: 0 10px 8px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.poder-item.marcada { border-color: var(--accion-borde); }
.poder { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--texto); cursor: pointer; overflow-wrap: anywhere; }
.poder span { min-width: 0; }
.poder input { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--accion-borde); cursor: pointer; }
.poder input:focus { box-shadow: none; }
.poder input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.poder:has(input:disabled) { cursor: default; }
.poder input:disabled { cursor: default; }
.poder-item small { font-size: 12px; line-height: 1.4; color: var(--texto-3); overflow-wrap: anywhere; }
.poder-item small.sin-efecto { color: var(--texto-2); font-weight: 600; }
/* Equipo → Sedes de la agencia (el gerente las maneja; el supervisor las ve) y la sede de cada persona. */
.sedes-equipo { margin-bottom: 16px; }
.sedes-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.sedes-lista li { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; border-top: 1px dashed var(--borde); padding-top: 8px; }
.sedes-lista li:first-child { border-top: 0; padding-top: 0; }
.sedes-lista li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sedes-lista small { display: block; color: var(--texto-3); font-size: 12px; }
.sedes-lista .sedes-vacio { color: var(--texto-3); font-size: 13px; }
.sedes-botones { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.form-sede { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; }
.form-sede label { flex: 1 1 200px; min-width: 0; }
.form-sede .acciones { display: flex; gap: 8px; margin: 0 0 12px; }
.form-sede .error { flex-basis: 100%; color: var(--error); font-size: 13px; min-height: 0; margin: 0; }
.persona-sede, .persona-area { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); margin: 2px 0 0; }
.persona-sede select, .persona-area select { width: auto; max-width: 100%; padding: 5px 8px; font-size: 13px; margin: 0; }

/* ============================================================
   ACADEMIA (capacitación de asesores): recorrido guiado, modo práctica, página de la Academia
   El recorrido y la práctica son de Nova (acento plasma); las herramientas siguen con la marca de la agencia.
   ============================================================ */
.mono { font-family: var(--mono); overflow-wrap: anywhere; }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* En el celular la barra necesita el espacio para las herramientas: la Academia se abre desde Órbita. */
@media (max-width: 640px) { .btn-academia { display: none; } }

/* Modo práctica sin recorrido: franja fija bajo la barra con la salida a la herramienta de verdad. */
/* @nova: la práctica de la Academia es de Nova (la franja y la cinta del documento de práctica, también en el PDF) */
.franja-practica { position: sticky; top: var(--alto-barra); z-index: 90; background: #0F1114; color: #D9D9D9; border-bottom: 1px solid #24282E; }
.franja-practica-interior { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.franja-practica .btn-secundario { background: transparent; color: var(--titanio); border-color: #3A3F47; }
.franja-practica .btn-secundario:hover { background: #24282E; }
@media (max-width: 640px) { .franja-practica-interior { padding: 8px 16px; grid-template-columns: 1fr; } }

/* Documento de práctica: la cinta sale también en el PDF. */
.doc-practica { background: repeating-linear-gradient(-45deg, #0F1114, #0F1114 12px, #24282E 12px, #24282E 24px); color: var(--titanio); text-align: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; padding: 8px 12px; }
/* @fin-nova */
.mensaje-whatsapp { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); font-size: 13.5px; background: var(--hundido); border-radius: var(--radio); padding: 12px; margin: 0 0 12px; max-height: 45vh; overflow-y: auto; }

/* Órbita: aviso de la capacitación y pestañas "Tu trabajo" / "Práctica" */
.aviso-academia { align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; border-left-color: var(--info); }
.aviso-academia.vencida { border-left-color: var(--error); }
.aviso-academia-texto { flex: 1 1 260px; display: grid; gap: 2px; }
.aviso-academia-texto b { color: var(--texto); }
.aviso-academia-recordatorio { color: var(--alerta); font-weight: 500; }
.pestanas { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.pestanas a { padding: 8px 14px; font-size: 13.5px; font-weight: 500; color: var(--texto-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas a.activa { color: var(--accion-tinta); border-bottom-color: var(--accion-borde); }

/* Equipo: capacitación de cada persona y plazo para las nuevas */
.persona-capacitacion, .persona-doble-factor { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; }
.persona-capacitacion small { color: var(--texto-3); }
.persona-capacitacion-botones { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.plazo-capacitacion { align-items: center; flex-wrap: wrap; gap: 8px 12px; border-left-color: var(--info); }
.plazo-capacitacion label { margin: 0; font-weight: 500; color: var(--texto-2); }
.plazo-campo { display: inline-flex; align-items: center; gap: 6px; }
.plazo-campo input { width: 72px; padding: 6px 8px; font-family: var(--mono); }

/* Página de la Academia */
.academia-estado-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.academia-nombre { display: block; font-size: 17px; }
.academia-cargo { color: var(--texto-3); font-size: 13px; }
.academia-plazo { margin-top: 8px; color: var(--texto-2); }
.academia-estado .nota { margin-top: 10px; }
.academia-modulos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.academia-modulos li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio); font-size: 14px; }
.academia-modulos li.hecho { background: var(--ok-suave); border-color: transparent; }
.marca-modulo { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--borde-fuerte); display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--texto-3); flex-shrink: 0; }
.academia-modulos li.hecho .marca-modulo { border-color: var(--ok); background: var(--superficie); color: var(--ok); }
.academia-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 14px 0; }
.academia-columnas h3 { font-size: 14px; margin-bottom: 8px; }
.academia-columnas ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--texto-2); }
.academia-no { border-left: 3px solid var(--error); padding-left: 12px; }
.academia-si { border-left: 3px solid var(--ok); padding-left: 12px; }
.academia-cierre { margin: 0; }
#datos-ia > p:first-child { color: var(--texto-2); font-size: 14px; }
.pregunta { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; margin: 0 0 12px; min-width: 0; }
.pregunta legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.pregunta.bien { border-color: var(--ok); } .pregunta.mal { border-color: var(--error); }
.opcion { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; color: var(--texto); margin: 6px 0 0; cursor: pointer; }
.opcion input { width: 16px; height: 16px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accion-borde); }
#resultado-recorrido .nota, #resultado-examen .nota { margin-top: 12px; }
#resultado-examen ul, #resultado-recorrido ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
/* Academia con estética de juego: mapa de niveles, bloques numerados, barras de avance y examen de una pregunta por pantalla. */
.academia-mapa { list-style: none; margin: 18px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(var(--niveles, 4), minmax(0, 1fr)); }
.academia-bloque .acciones .etiqueta { align-self: center; flex: 0 0 auto; }
.academia-guias-nova { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.academia-guias-nova a { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio); text-decoration: none; color: var(--texto); font-size: 14px; }
.academia-guias-nova a:hover { border-color: var(--borde-fuerte); background: var(--hundido); }
.academia-guias-nova small { color: var(--texto-3); font-size: 12px; }
.academia-mapa li { position: relative; }
.academia-mapa li:not(:first-child)::before { content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--borde); }
.academia-mapa li.hecho + li::before { background: var(--ok); }
.academia-mapa a { position: relative; display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--texto-2); font-size: 12.5px; font-weight: 500; text-align: center; }
.academia-mapa-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--borde-fuerte); background: var(--superficie); font-family: var(--mono); font-size: 14px; }
.academia-mapa li.hecho a { color: var(--texto-2); }
.academia-mapa li.hecho .academia-mapa-num { background: var(--ok); border-color: var(--ok); color: var(--texto-invertido); }
.academia-mapa li.ahora a { color: var(--texto); font-weight: 600; }
.academia-mapa li.ahora .academia-mapa-num { border-color: var(--accion-borde); color: var(--accion-tinta); box-shadow: 0 0 0 4px var(--foco-halo); animation: academia-latido 2s ease-in-out infinite; }
@keyframes academia-latido { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accion-borde) 6%, transparent); } }
.academia-bloque-cab { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.academia-bloque-cab h2 { margin-bottom: 4px; font-size: 18px; }
.academia-bloque-cab .ayuda { margin: 0; }
.academia-nivel { width: 34px; height: 34px; border-radius: 10px; background: var(--accion); color: var(--accion-texto); display: grid; place-items: center; font-family: var(--mono); font-weight: 600; flex-shrink: 0; }
.academia-bloque.bloqueado .academia-nivel { background: var(--hundido); color: var(--texto-3); }
.academia-avance { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--mono); font-size: 12px; color: var(--texto-2); }
.academia-avance progress, .examen-progreso { flex: 1; width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px; background: var(--hundido); overflow: hidden; accent-color: var(--accion-borde); }
.academia-avance progress::-webkit-progress-bar, .examen-progreso::-webkit-progress-bar { background: var(--hundido); border-radius: 99px; }
.academia-avance progress::-webkit-progress-value, .examen-progreso::-webkit-progress-value { background: var(--accion-borde); border-radius: 99px; transition: width .3s ease; }
.academia-avance progress::-moz-progress-bar, .examen-progreso::-moz-progress-bar { background: var(--accion-borde); border-radius: 99px; }
.academia-modulo-texto { display: grid; flex: 1; min-width: 0; }
.academia-modulo-texto small { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.academia-cert { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; }
.academia-cert > div { display: grid; gap: 4px; min-width: 0; }
/* @nova: el trofeo del certificado, como el de las celebraciones de las guías (una ilustración de Nova) */
.academia-cert-icono { width: 44px; height: 44px; fill: #FFD166; stroke: #C99405; stroke-width: 1.5; stroke-linejoin: round; flex-shrink: 0; }
/* @fin-nova */
.examen-cab { display: grid; gap: 6px; margin-bottom: 16px; }
.examen-contador { font-family: var(--mono); font-size: 12px; color: var(--texto-2); }
.examen .pregunta { border: 0; padding: 0; margin: 0; }
.examen .pregunta legend { display: grid; gap: 6px; font-size: 18px; font-weight: 600; line-height: 1.3; padding: 0; margin-bottom: 14px; }
.examen .pregunta legend .etiqueta { justify-self: start; }
.pregunta-num { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.examen .pregunta.mal .pregunta-num::after { content: ' · a revisar'; color: var(--error); }
.examen .opcion { border: 1.5px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; font-size: 15px; background: var(--superficie); transition: border-color .15s, background .15s; }
.examen .opcion:hover { border-color: var(--borde-fuerte); }
.examen .opcion:has(input:checked) { border-color: var(--accion-borde); background: var(--accion-tenue); }
.examen .opcion:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.examen-botones { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.examen-espacio { flex: 1; }
.examen-resultado { border: 1px solid var(--borde); border-left: 4px solid var(--alerta); border-radius: var(--radio); padding: 14px 16px; display: grid; gap: 8px; font-size: 14px; margin-top: 4px; }
.examen-puntaje b { font-family: var(--mono); font-size: 28px; font-weight: 500; }
.examen-fallas { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pregunta-mal { border-top: 1px dashed var(--borde); padding-top: 8px; display: grid; gap: 2px; }
.pregunta-mal-porque { color: var(--texto-2); }
@media (max-width: 640px) {
  .academia-mapa a { font-size: 11.5px; }
  .examen .pregunta legend { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .academia-mapa li.ahora .academia-mapa-num { animation: none; } }

/* ============================================================
   CLIENTES (Tranquillum): lista con buscador, ficha 360, autorizaciones, notas, recordatorios y línea de tiempo del historial.
   Móvil primero: todo se apila en 360-390 px; la marca de la agencia entra por sus tokens (--accion…).
   ============================================================ */
.buscador-clientes { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.buscador-clientes input[type="search"] { flex: 1 1 260px; min-width: 0; padding: 11px 12px; font-size: 15px; }
.solo-mios { margin: 0; font-size: 13px; white-space: nowrap; }
.lista-estado { font-size: 12.5px; color: var(--texto-3); min-height: 18px; margin: 0 0 8px; }
.fila-cliente { color: var(--texto); text-decoration: none; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.fila-cliente:hover { background: var(--accion-tenue); }
.fila-cliente:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.fila-cliente-datos { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.fila-cliente-datos .fila-titulo { overflow-wrap: anywhere; }
.fila-cliente-datos .fila-sub span { overflow-wrap: anywhere; }
.fila-cliente-lado { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: flex-end; align-items: center; max-width: 360px; font-size: 12.5px; color: var(--texto-2); }
.fila-cliente-lado .etiqueta { margin-right: 0; }
.fila-cliente-lado small { color: var(--texto-3); width: 100%; text-align: right; }
/* La tabla de Clientes (clientes.html): la caja se corre de lado (nunca la página) y la columna del cliente queda fija a la izquierda.
   Ordenar: el botón de cada encabezado (th con aria-sort). Cambiar: la celda con línea punteada es un botón (.celda-editable) que se
   vuelve su campo (.celda-editor). En el celular, todo toque de 44 px. */
.herramientas-tabla { display: flex; gap: 8px; margin-left: auto; }
.menu-columnas { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; margin: 0 0 10px; }
.menu-columnas-titulo { font-size: 13px; font-weight: 600; color: var(--texto); margin: 0 0 6px; }
.menu-columnas-titulo small { font-weight: 400; color: var(--texto-3); }
.menu-columnas-casillas { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.menu-columnas-casillas .fila-check { margin: 0; min-height: 32px; font-size: 13.5px; color: var(--texto); }
.menu-columnas-casillas input { width: 18px; height: 18px; accent-color: var(--accion-borde); }
.lista-nota { font-size: 12.5px; color: var(--texto-2); margin: -4px 0 8px; }
.tabla-clientes-caja { max-width: 100%; overscroll-behavior-x: contain; }
.tabla-clientes-caja:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.tabla-clientes { background: var(--superficie); }
.tabla-clientes td { padding: 4px 8px; white-space: nowrap; }
.tabla-clientes thead th { padding: 2px 6px; }
/* La fila es <tr class="fila-cliente"> (las pruebas y la guía la buscan así): una fila de tabla, no la cuadrícula de la lista de antes. */
.tabla-clientes .fila-cliente { display: table-row; }
.tabla-clientes tbody tr:last-child > * { border-bottom: 0; }
.tabla-clientes tbody tr:hover > * { background: var(--accion-tenue); }
.tabla-clientes .orden { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: 0; padding: 6px 4px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tabla-clientes .orden:hover { color: var(--texto); }
.tabla-clientes .orden:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.tabla-clientes th[aria-sort] .orden { color: var(--accion-tinta); }
.orden-flecha { font-family: var(--mono); font-size: 12px; }
/* La columna del cliente: fija al correrse de lado, con su línea a la derecha. */
.tabla-clientes .col-cliente { position: sticky; left: 0; z-index: 1; background: var(--superficie); min-width: 160px; max-width: 240px; white-space: normal; box-shadow: inset -1px 0 0 var(--borde); }
.tabla-clientes tbody th.col-cliente { padding: 4px 10px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texto); border-bottom: 1px solid var(--borde); }
.tabla-clientes .fila-titulo { display: inline-block; padding: 4px 0; color: var(--accion-tinta); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.tabla-clientes .fila-titulo:hover { text-decoration: underline; }
.tabla-clientes .fila-titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
/* «Abrir tarjeta»: un botón chico aparte del nombre (debajo cuando no cabe). */
.tabla-clientes .ver-tarjeta { margin: 2px 0 6px; white-space: nowrap; }
.tabla-clientes td[data-tipo="numero"], .tabla-clientes td[data-tipo="dinero"] { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.celda-texto, .celda-editable { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celda-editable { width: 100%; min-width: 72px; min-height: 34px; margin: 0; padding: 5px 6px; border: 1px solid transparent; border-bottom: 1px dashed var(--borde-fuerte); border-radius: 6px 6px 0 0; background: transparent; color: var(--texto); font: inherit; text-align: inherit; cursor: pointer; }
.celda-editable:hover { border-color: var(--borde-fuerte); border-radius: 6px; background: var(--superficie); }
.celda-editable:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.celda-editable:disabled { cursor: progress; color: var(--texto-2); }
.celda-editor { display: block; width: 100%; min-width: 150px; min-height: 34px; margin: 0; padding: 5px 8px; border: 1px solid var(--foco); border-radius: 6px; background: var(--superficie); color: var(--texto); font: inherit; box-shadow: 0 0 0 3px var(--foco-halo); }
.celda-editor:focus { outline: none; }
.celda-editor[type="checkbox"] { width: 20px; min-width: 0; min-height: 20px; accent-color: var(--accion-borde); box-shadow: none; }
.valor-vacio { color: var(--texto-3); }
.celda-etiquetas { display: inline-flex; gap: 4px; }
.celda-etiquetas .etiqueta { margin-right: 0; }
/* Las columnas de la agencia (el gerente): cada una con su nombre, su tipo (fijo después de crearla), sus opciones y sus botones. */
.dialogo-columnas { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; }
.lista-columnas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.columna-def { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.columna-def.archivada { background: var(--hundido); }
.columna-def-cab { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 12px; align-items: end; }
.columna-def-cab label { margin: 0; }
p.columna-def-tipo { display: grid; gap: 5px; margin: 0; font-size: 13px; font-weight: 500; color: var(--texto-2); }
p.columna-def-tipo b { padding: 9px 0; font-size: 14px; font-weight: 600; color: var(--texto); }
.columna-def-botones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.opciones-def { border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); padding: 8px 10px; margin: 0; min-width: 0; }
.opciones-def legend { font-size: 12.5px; font-weight: 600; color: var(--texto-2); padding: 0 4px; overflow-wrap: anywhere; }
.opciones-def ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.opcion-def { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.opcion-def input { flex: 1 1 160px; min-width: 0; padding: 7px 10px; border: 1px solid var(--borde); border-radius: var(--radio-campo, 4px); background: color-mix(in srgb, var(--fondo) 55%, var(--superficie)); color: var(--texto); font-size: 14px; }
.opcion-def input:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px var(--foco-halo); background: var(--superficie); }
/* La ficha 360 y el nuevo cliente: las columnas de la agencia (las archivadas con valor, solo para leer). */
.propios { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px 2px; margin: 4px 0 8px; min-width: 0; }
.propios legend { font-size: 13.5px; font-weight: 600; padding: 0 4px; }
.campo-casilla { align-self: end; min-height: 40px; color: var(--texto); }
.campo-casilla input { width: 18px; height: 18px; accent-color: var(--accion-borde); }
.propios-archivadas { border-top: 1px dashed var(--borde); padding: 10px 0; }
.propios-archivadas-titulo { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.propios-archivadas-titulo small { font-weight: 400; letter-spacing: 0; text-transform: none; }
.propios-archivadas-lista { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 16px; }
.propios-archivadas-lista dt { font-size: 12.5px; color: var(--texto-3); }
.propios-archivadas-lista dd { margin: 0; font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.sin-modulo b { color: var(--texto); }
.sin-modulo .btn { margin: 4px; }
#avisos-clientes, #avisos-cliente { display: grid; gap: 10px; margin-bottom: 16px; }
#avisos-clientes:empty, #avisos-cliente:empty { display: none; }
.acciones-centro { display: flex; justify-content: center; margin-top: 14px; }
.migas { margin: 0 0 12px; font-size: 13.5px; }
.migas a { text-decoration: none; }
.etiqueta.vencido { background: var(--error-suave); color: var(--error); }

/* Nuevo cliente y autorizaciones */
.dialogo-cliente { width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; }
.autorizaciones { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px 4px; margin: 4px 0 8px; min-width: 0; }
.autorizaciones legend { font-size: 13.5px; font-weight: 600; padding: 0 4px; }
.autorizacion { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-weight: 400; color: var(--texto); margin: 0 0 12px; cursor: pointer; }
.autorizacion input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accion-borde); }
.autorizacion b { display: block; font-size: 14px; }
.texto-aviso { display: block; font-size: 12.5px; line-height: 1.45; color: var(--texto-2); margin-top: 2px; overflow-wrap: anywhere; }
.aviso-version { font-family: var(--mono); font-size: 11px; color: var(--texto-3); margin: 0 0 12px; }
.canal-autorizacion select:disabled { opacity: .6; }
.abrir-duplicado { margin-left: 6px; vertical-align: middle; }
.lista-autorizaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.autorizacion-estado { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; display: grid; gap: 4px; }
.autorizacion-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.autorizacion-estado small { color: var(--texto-3); font-size: 12px; }
.autorizacion-estado summary { cursor: pointer; font-size: 12.5px; color: var(--texto-2); }
.autorizacion-botones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* Notas y recordatorios */
.form-en-linea { display: flex; gap: 0 12px; flex-wrap: wrap; align-items: flex-end; }
.form-en-linea .crece { flex: 1 1 240px; }
.form-en-linea > .btn { margin-bottom: 12px; }
.lista-seguimiento { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-seguimiento > li { border-top: 1px dashed var(--borde); padding-top: 10px; display: grid; gap: 4px; }
.lista-seguimiento > li:first-child { border-top: 0; padding-top: 0; }
.lista-seguimiento small { color: var(--texto-3); font-size: 12px; }
.nota-texto, .recordatorio p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.nota-cliente.suprimida .nota-texto, .recordatorio.resuelto p { color: var(--texto-3); }
.recordatorio-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recordatorio .btn { justify-self: start; }
.ficha-cliente .tarjeta .acciones { justify-content: flex-end; }
.ficha-cliente .tarjeta .acciones .btn { flex: 0 0 auto; }

/* Historial ("El Chismoso") y bitácora: línea de tiempo */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--borde); display: grid; gap: 14px; }
.linea-tiempo > .vacio { border: 0; }
.evento { position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; }
.evento::before { content: ''; position: absolute; left: -21px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--accion-borde); box-shadow: 0 0 0 3px var(--fondo); }
.evento[data-accion="papelera"]::before, .evento[data-accion="suprimir"]::before { background: var(--error); }
.evento[data-accion="restaurar"]::before, .evento[data-accion="resolver"]::before { background: var(--ok); }
.evento-cab { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 13.5px; }
.evento-quien { font-weight: 600; color: var(--texto); }
.evento-cliente { font-weight: 500; }
.evento-cab time { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); margin-left: auto; }
.cambios { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.cambios li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; overflow-wrap: anywhere; }
.cambio-campo { color: var(--texto-3); min-width: 110px; }
.cambio-antes { color: var(--texto-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--error) 60%, transparent); }
.cambio-flecha { color: var(--texto-3); }
.cambio-despues { color: var(--texto); font-weight: 500; }
@media (max-width: 640px) {
  .herramientas-tabla { width: 100%; margin-left: 0; }
  .herramientas-tabla .btn { flex: 1 1 auto; min-height: 44px; }
  .tabla-clientes .orden, .celda-editable, .celda-editor { min-height: 44px; }
  .celda-editor[type="checkbox"] { min-height: 24px; }
  .tabla-clientes .fila-titulo { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .tabla-clientes .col-cliente { min-width: 120px; max-width: 150px; }
  .celda-texto, .celda-editable { max-width: 200px; }
  .menu-columnas-casillas .fila-check { min-height: 44px; }
  .columna-def-cab { grid-template-columns: minmax(0, 1fr); }
  .dialogo-columnas .btn, .aviso button { min-height: 44px; }
  .fila-cliente { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
  .fila-cliente-lado { grid-column: 2; max-width: none; justify-content: flex-start; }
  .fila-cliente-lado small { text-align: left; }
  .evento-cab time { margin-left: 0; width: 100%; }
  .cambio-campo { min-width: 0; width: 100%; }
  .ficha-cliente .encabezado-acciones .btn { flex: 1 1 auto; }
}

/* ============================================================
   LA LÍNEA (Tranquillum): tablero de 6 columnas, tarjetas con semáforo, barra "estás aquí → sigue esto", ficha del viaje
   (carriles, documentos, responsables, tramos) y "Vincular a un viaje" en Tiza, Aparta y Sella.
   Móvil primero: en el celular se ve una columna a la vez (pestañas) y nada se sale de la pantalla. La marca entra por sus tokens;
   los colores del semáforo son los de estado (verde, amarillo, rojo, gris), iguales en todas las agencias.
   ============================================================ */
.pagina-linea { max-width: 1440px; }
.filtros-linea { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px 0; margin: 0 0 10px; }
.filtros-linea label { flex: 1 1 160px; min-width: 0; }
.filtros-linea label input, .filtros-linea label select { padding: 7px 9px; font-size: 13.5px; }
.filtros-linea .btn { margin-bottom: 12px; }
#avisos-linea, #avisos-viaje { display: grid; gap: 10px; margin-bottom: 16px; }
#avisos-linea:empty, #avisos-viaje:empty { display: none; }
.cuenta { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--hundido); color: var(--texto-2); font-family: var(--mono); font-size: 11px; text-align: center; }
.pestanas-etapas a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; }
.pestanas-etapas a.activa .cuenta { background: var(--accion-suave); color: var(--accion-tinta); }
.tablero { display: block; }
.columna { display: none; background: var(--hundido); border-radius: var(--radio); padding: 10px; min-width: 0; }
.columna.visible { display: block; }
.columna h2 { display: none; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); margin: 2px 2px 10px; }
.columna-tarjetas { display: grid; gap: 8px; }
.columna-vacia { color: var(--texto-3); font-size: 13px; text-align: center; padding: 18px 6px; margin: 0; }
@media (min-width: 1000px) {
  .pestanas-etapas { display: none; }
  .tablero { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .columna, .columna.visible { display: block; }
  .columna h2 { display: flex; justify-content: space-between; align-items: center; }
}
.tarjeta-viaje { display: grid; gap: 4px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 11px; color: var(--texto); text-decoration: none; box-shadow: var(--sombra); min-width: 0; overflow-wrap: anywhere; }
.tarjeta-viaje:hover { border-color: var(--accion-borde); }
.tarjeta-viaje:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.tv-cliente { font-weight: 600; font-size: 14px; }
.tv-destino { font-size: 13.5px; color: var(--texto-2); }
.tv-destino small { color: var(--texto-3); }
.tv-fechas { font-size: 12px; color: var(--texto-3); }
.tv-loc { font-family: var(--mono); color: var(--texto-2); white-space: nowrap; }
.tv-plata { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--texto-2); }
.tv-plata b { font-family: var(--mono); font-weight: 500; color: var(--texto); }
.tv-plata .debe b { color: var(--alerta); }
.tv-plata .paz b { color: var(--ok); }
.tv-pie { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; color: var(--texto-2); }
.tv-pie .etiqueta { margin-right: 0; }
.tv-vende { margin-right: auto; }
/* Semáforo de los carriles */
.semaforo { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; padding: 0; }
.semaforo .punto, .carril-cab .punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); flex-shrink: 0; }
.luz-verde .punto { background: var(--ok); }
.luz-amarillo .punto { background: var(--semaforo-amarillo); }
.luz-rojo .punto { background: var(--error); box-shadow: 0 0 0 2px var(--error-suave); }
.luz-gris .punto { background: var(--borde-fuerte); }
.semaforo.con-texto { display: grid; gap: 4px; }
.semaforo.con-texto li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
/* Barra "estás aquí → sigue esto" */
.barra-progreso { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--accion-borde); border-radius: var(--radio); padding: 14px 16px; margin: 0 0 16px; min-width: 0; }
.barra-progreso.especial-perdido { border-left-color: var(--borde-fuerte); }
.barra-progreso.especial-devolucion { border-left-color: var(--error); }
.barra-progreso.compacta { padding: 10px 12px; margin: 8px 0 0; }
.etapas { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 12px; padding: 0; counter-reset: etapa; }
.etapas li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 11.5px; color: var(--texto-3); min-width: 0; }
.etapas li::before { content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--borde); z-index: 0; }
.etapas li:first-child::before { display: none; }
.etapa-punto { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borde-fuerte); background: var(--superficie); }
.etapas .etapa-hecho { color: var(--texto-2); }
.etapas .etapa-hecho .etapa-punto { background: var(--ok); border-color: var(--ok); }
.etapas .etapa-hecho::before, .etapas .etapa-actual::before { background: var(--ok); }
.etapas .etapa-actual { color: var(--accion-tinta); font-weight: 600; }
.etapas .etapa-actual .etapa-punto { background: var(--accion-borde); border-color: var(--accion-borde); box-shadow: 0 0 0 3px var(--foco-halo); }
.etapa-nombre { overflow-wrap: anywhere; line-height: 1.2; }
.progreso-texto { display: grid; gap: 6px; font-size: 14px; }
.progreso-texto p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.progreso-texto .rotulo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); min-width: 90px; }
.progreso-texto .falta summary { cursor: pointer; font-size: 13px; color: var(--texto-2); }
.progreso-texto .falta ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.barra-viaje-cliente { margin: 0 0 14px; }
.barra-viaje-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; color: var(--texto-2); }
.barra-viaje-cab .btn { margin-left: auto; }
@media (max-width: 640px) {
  .etapas li:not(.etapa-actual) .etapa-nombre { display: none; }
  .etapas .etapa-actual .etapa-nombre { position: absolute; top: 20px; white-space: nowrap; }
  .etapas { margin-bottom: 30px; }
  .etapas .etapa-actual:first-child .etapa-nombre { left: 0; } .etapas .etapa-actual:last-child .etapa-nombre { right: 0; }
  .progreso-texto .rotulo { min-width: 0; width: 100%; }
  .barra-viaje-cab .btn { margin-left: 0; }
}
/* Ficha del viaje */
.lista-carriles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.carril { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; display: grid; gap: 6px; min-width: 0; }
.carril.luz-rojo { border-color: color-mix(in srgb, var(--error) 45%, var(--borde)); }
.carril-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.carril-estado { margin-left: auto; font-size: 13px; color: var(--texto-2); }
.carril small { color: var(--texto-3); font-size: 12px; overflow-wrap: anywhere; }
.carril-nota { font-size: 13.5px; overflow-wrap: anywhere; }
.carril-form { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: flex-end; }
.carril-form label { margin-bottom: 6px; flex: 0 1 190px; min-width: 0; }
.carril-form label.crece { flex: 1 1 200px; }
.carril-form label input, .carril-form label select { padding: 7px 9px; font-size: 13.5px; }
.carril-form .btn { margin-bottom: 6px; }
.botones-documentos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.botones-documentos:empty { display: none; }
.documento-viaje { min-width: 0; }
.documento-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; overflow-wrap: anywhere; }
.documento-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#form-vincular { margin-top: 14px; border-top: 1px dashed var(--borde); padding-top: 12px; }
.lista-responsables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.lista-responsables li { display: grid; gap: 2px; background: var(--hundido); border-radius: 4px; padding: 8px 10px; overflow-wrap: anywhere; }
.lista-responsables .rol { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.tramos-viaje { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; margin: 4px 0 8px; min-width: 0; }
.tramos-viaje legend { font-size: 13.5px; font-weight: 600; padding: 0 4px; }
.tramos-viaje legend small { font-weight: 400; color: var(--texto-3); }
.tramo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 10px; align-items: end; border-bottom: 1px dashed var(--borde); padding: 6px 0 4px; margin-bottom: 8px; }
.tramo .tramo-detalle { grid-column: span 2; }
.tramo .btn { margin-bottom: 12px; justify-self: start; }
.ficha-viaje .tarjeta .acciones { justify-content: flex-end; }
.ficha-viaje .tarjeta .acciones .btn { flex: 0 0 auto; }
/* «Por etapa» en Clientes (core/tablero-clientes.js): las mismas columnas y tarjetas de La Línea, siete (Nuevo → Regresó). En el
   celular, una columna a la vez con sus pestañas; cada columna dice qué la mueve (nadie arrastra). */
.pagina.clientes:has(#vista-etapas:not([hidden])) { max-width: 1440px; }
.filtros-etapas label.crece { flex: 2 1 220px; }
.filtros-etapas .fila-check { flex: 0 1 auto; align-self: center; margin-bottom: 12px; }
#etapas-fuera:empty { display: none; }
.columna-ayuda { font-size: 12px; color: var(--texto-2); margin: 0 2px 10px; overflow-wrap: anywhere; }
@media (min-width: 1000px) { .tablero-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } }
.tarjeta-cliente:hover { border-color: var(--borde); }
.tarjeta-cliente:focus-within { border-color: var(--accion-borde); }
.tarjeta-cliente .tv-cliente { margin: 0; font-size: 14px; line-height: 1.3; }
.tarjeta-cliente .tv-cliente a { color: var(--texto); text-decoration: none; }
.tarjeta-cliente .tv-cliente a:hover, .tarjeta-cliente .tv-cliente a:focus-visible { text-decoration: underline; }
.tc-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tc-botones .btn { flex: 1 1 auto; }
/* La etapa del cliente en su ficha y la pestaña Documentos */
.etapa-cliente { margin-top: 8px; }
#documentos-cliente { display: grid; gap: 14px; }
.documentos-activo h2 { font-size: 16px; overflow-wrap: anywhere; }
.documentos-activo-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--texto-2); margin: 4px 0 10px; }
.documentos-activo-sub .etiqueta { margin-right: 0; }
.documentos-viaje h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 15px; margin: 0 0 4px; overflow-wrap: anywhere; }
.documentos-viaje h3 small { font-weight: 400; font-size: 12.5px; color: var(--texto-3); }
.documento-cab .etiqueta { margin-right: 0; }
.documento-anterior { color: var(--texto-3); }
/* Viajes en la ficha del cliente */
.fila-viaje { color: var(--texto); text-decoration: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.fila-viaje:hover { background: var(--accion-tenue); }
.fila-viaje-lado { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: flex-end; align-items: center; max-width: 320px; }
.fila-viaje-lado .etiqueta { margin-right: 0; }
.fila-viaje-lado .semaforo { margin: 0; }
.evento-viaje { font-weight: 500; font-size: 12.5px; }
.evento[data-coleccion="viajes"]::before { background: var(--acento-tinta); }
/* "Vincular a un viaje" en Tiza, Aparta y Sella */
.nota-vinculo { align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 16px; }
.nota-vinculo p { flex: 1 1 240px; }
.dialogo-vincular { max-height: calc(100vh - 24px); overflow-y: auto; }
.opciones-vincular { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.opcion-vincular { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: 4px; padding: 8px 10px; cursor: pointer; overflow-wrap: anywhere; }
.opcion-vincular:hover, .opcion-vincular:focus-visible { border-color: var(--accion-borde); outline: none; }
.opcion-vincular small { color: var(--texto-3); font-size: 12px; }
.vincular-cliente { font-weight: 600; margin: 6px 0; }
@media (max-width: 640px) {
  .fila-viaje { grid-template-columns: minmax(0, 1fr); }
  .fila-viaje-lado { justify-content: flex-start; max-width: none; }
  .ficha-viaje .encabezado-acciones .btn { flex: 1 1 auto; }
  .tramo .tramo-detalle { grid-column: auto; }
  .carril-estado { margin-left: 0; width: 100%; }
}

/* ============================================================
   CARTERA (Tranquillum): por cobrar y por pagar a operadores (cartera.html), pagos y costos en la ficha del viaje.
   Móvil primero: en 390 px las filas se apilan y nada se sale de la pantalla. Colores del semáforo = los de La Línea.
   ============================================================ */
.pagina-cartera { max-width: 1180px; }
#avisos-cartera { display: grid; gap: 10px; margin-bottom: 16px; }
#avisos-cartera:empty { display: none; }
.horario-cobranza { display: grid; gap: 4px; padding: 10px 12px; margin: 0 0 16px; border-radius: 4px; background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--ok); font-size: 13px; color: var(--texto-2); }
.horario-cobranza.cerrado { border-left-color: var(--alerta); }
.horario-cobranza .horario-ahora { font-weight: 600; color: var(--texto); }
.horario-cobranza.cerrado .horario-ahora { color: var(--alerta); }
.metricas-cartera { margin-bottom: 16px; }
.metricas-cartera .metrica .valor { font-size: clamp(14px, 10.5cqi, 20px); }
.metrica-rojo .valor { color: var(--error); }
.metrica-amarillo .valor { color: var(--alerta); }
.fila-cartera { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; }
.fila-cartera-datos { display: grid; gap: 4px; min-width: 0; }
.fila-cartera-datos .fila-titulo { color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.fila-cartera-datos a.fila-titulo:hover { color: var(--accion-tinta); }
.fila-cartera-datos .fila-sub span, .fila-cartera-datos .fila-sub a { overflow-wrap: anywhere; }
.fila-cartera-datos .fila-titulo small { color: var(--texto-3); font-weight: 400; }
.fila-cartera-lado { display: grid; justify-items: end; gap: 4px; text-align: right; }
.fila-cartera-lado small { color: var(--texto-3); font-size: 12px; }
.saldo-cartera { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--texto); }
.motivo-recordar { max-width: 260px; }
.luz-chip { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 12.5px; color: var(--texto-2); }
/* El color del punto lo pone .luz-verde|amarillo|rojo|gris .punto (arriba, La Línea): aquí solo la forma. */
.luz-chip .punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.luz-chip.luz-rojo { color: var(--error); font-weight: 500; }
/* Pagos y costos en la ficha del viaje */
.resumen-cobro { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0 0 10px; }
.resumen-cobro > div { display: grid; gap: 2px; background: var(--hundido); border-radius: 4px; padding: 8px 10px; min-width: 0; }
.resumen-cobro .rotulo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.resumen-cobro b { font-family: var(--mono); font-weight: 500; overflow-wrap: anywhere; }
.luz-linea { margin: 0 0 6px; }
#avisos-cobro { display: grid; gap: 8px; margin: 10px 0; }
#avisos-cobro:empty { display: none; }
.form-pago { margin-top: 12px; border-top: 1px dashed var(--borde); padding-top: 12px; }
.form-pago label, #form-costo label { flex: 1 1 150px; min-width: 0; }
.form-pago label.crece, #form-costo label.crece { flex: 2 1 220px; }
.moneda-pago { font-family: var(--mono); font-size: 11px; color: var(--texto-3); }
.subtitulo-lista { font-size: 14px; margin: 16px 0 4px; }
.pago { min-width: 0; }
.pago-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; overflow-wrap: anywhere; }
.pago-monto { font-family: var(--mono); font-weight: 500; }
.pago.anulado .pago-monto, .pago.anulado .pago-cab > span, .costo.anulado small, .pago-operador.anulado span { color: var(--texto-3); }
.pago-nota { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pago-anulacion { color: var(--error) !important; }
.lista-costos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.costo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; display: grid; gap: 6px; min-width: 0; }
.costo.luz-rojo { border-color: color-mix(in srgb, var(--error) 45%, var(--borde)); }
.costo-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.costo-cab .punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.costo small { color: var(--texto-3); font-size: 12px; overflow-wrap: anywhere; }
.pagos-operador { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--borde); display: grid; gap: 4px; font-size: 13px; }
.pago-operador { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; overflow-wrap: anywhere; }
.costo-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.resumen-cobro.utilidad > div:last-child b { color: var(--ok); }
@media (max-width: 640px) {
  .fila-cartera { grid-template-columns: minmax(0, 1fr); }
  .fila-cartera-lado { justify-items: start; text-align: left; }
  .motivo-recordar { max-width: none; }
}

/* ============================================================
   DOBLE FACTOR: aviso bajo la barra, pantalla "Seguridad de mi cuenta" (seguridad.html) y el paso del código al entrar.
   ============================================================ */
@media (max-width: 640px) { .btn-seguridad { display: none; } }   /* en el celular: desde Órbita (atajo) o el aviso */
.franja-doble-factor { background: var(--alerta-suave); border-bottom: 1px solid color-mix(in srgb, var(--alerta) 35%, var(--borde)); color: var(--texto); }
.franja-doble-factor-botones { display: inline-flex; gap: 8px; align-items: center; flex-shrink: 0; }
.franja-doble-factor-interior { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.franja-doble-factor-texto { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 320px; min-width: 0; }
.franja-doble-factor-texto svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--alerta); margin-top: 1px; }
.login-caja[hidden] { display: none; }
/* La ayuda bajo el formulario de entrar (la pantalla de entrar es de Nova). */
.login-ayuda { font-size: 12px; color: var(--texto-2); margin-top: 10px; line-height: 1.45; }
.seguridad-estado { display: flex; gap: 14px; align-items: flex-start; }
.seguridad-estado > svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--texto-3); margin-top: 2px; }
.seguridad-estado.activo > svg { color: var(--ok); }
.seguridad-estado p { margin: 2px 0 0; color: var(--texto-2); font-size: 14px; }
.seguridad-pasos { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: var(--texto-2); }
.seguridad-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin: 8px 0 16px; }
.seguridad-qr canvas { width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); }
.seguridad-clave { font-family: var(--mono); font-size: 15px; letter-spacing: .06em; background: var(--hundido); border: 1px solid var(--borde); border-radius: 4px; padding: 10px 12px; overflow-wrap: anywhere; user-select: all; }
.seguridad-codigo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.seguridad-codigo label { flex: 0 1 220px; margin: 0; }
.seguridad-codigo input { font-family: var(--mono); font-size: 20px; letter-spacing: .25em; }
.seguridad .error { color: var(--error); font-size: 13px; min-height: 18px; margin-top: 8px; }
.seguridad .acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.seguridad-barra-simple .barra-interior { justify-content: space-between; }
@media (max-width: 640px) {
  .franja-doble-factor-interior { padding: 10px 16px; }
  .seguridad-qr { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .seguridad-qr canvas { width: 180px; height: 180px; }
  .seguridad-codigo label { flex: 1 1 100%; }
}

/* ============================================================
   EL GUARDIÁN: "Mi día" en Órbita (core/mi-dia.js) y la franja roja bajo la barra (core/guardian.js).
   Móvil primero: en 390 px cada alerta apila sus botones debajo y nada se sale de la pantalla. Rojo = urgente, amarillo = hoy y
   esta semana, el color de la agencia = sugerencia; el color siempre va con su texto (título del grupo y de la alerta).
   ============================================================ */
.franja-guardian { background: var(--error); color: var(--texto-invertido); border-bottom: 1px solid color-mix(in srgb, var(--error) 70%, var(--texto)); }
.franja-guardian-interior { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; font-size: 13.5px; }
.franja-guardian-texto { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 280px; min-width: 0; }
.franja-guardian-texto svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.franja-guardian-texto b { font-weight: 700; }
.franja-guardian-ir { background: var(--superficie); color: var(--error); border-color: var(--superficie); font-weight: 600; }
.franja-guardian-ir:hover { background: var(--error-suave); }
.franja-guardian-ir:focus-visible, .franja-guardian-sonido:focus-visible { outline: 2px solid var(--texto-invertido); outline-offset: 2px; }
.franja-guardian-sonido { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--texto-invertido) 55%, transparent); background: transparent; color: var(--texto-invertido); flex-shrink: 0; }
.franja-guardian-sonido:hover { background: color-mix(in srgb, var(--texto-invertido) 14%, transparent); }
.franja-guardian-sonido svg { width: 16px; height: 16px; }
.franja-guardian-sonido .tachado, .franja-guardian-sonido.silenciado .onda { display: none; }
.franja-guardian-sonido.silenciado .tachado { display: inline; }

.mi-dia { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; margin: 0 0 24px; box-shadow: var(--sombra); min-width: 0; }
.mi-dia-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; }
.mi-dia-cab h2 { font-size: 19px; font-weight: 700; }
.mi-dia-fecha { font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }
.mi-dia-herramientas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mi-dia-sonido svg { width: 15px; height: 15px; }
.mi-dia-sonido[aria-pressed="false"] { color: var(--texto-3); }
.mi-dia-resumen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 4px; font-size: 13.5px; color: var(--texto-2); }
.mi-dia-cuenta { display: inline-flex; align-items: center; gap: 6px; }
.mi-dia-cuenta::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); flex-shrink: 0; }
.mi-dia-cuenta b { font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--texto); }
.mi-dia-cuenta.cuenta-rojo::before { background: var(--error); }
.mi-dia-cuenta.cuenta-rojo:not(.cero) b { color: var(--error); }
.mi-dia-cuenta.cuenta-amarillo::before { background: var(--semaforo-amarillo); }
.mi-dia-cuenta.cuenta-sugerencia::before { background: var(--accion-borde); }
.mi-dia-cuenta.cero { color: var(--texto-3); }
.mi-dia-equipo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 4px; background: var(--hundido); font-size: 13px; }
.mi-dia-equipo-titulo { font-weight: 600; color: var(--texto); margin-right: 4px; }
.mi-dia-equipo-nadie { color: var(--texto-3); }
.mi-dia-persona-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--superficie); font-size: 13px; }
.mi-dia-persona-chip b { font-family: var(--mono); font-weight: 500; color: var(--error); }
.mi-dia-persona-chip:hover { border-color: var(--accion-borde); }
.mi-dia-listas { min-width: 0; }
.mi-dia-listas > .vacio { padding: 22px 12px; }
.mi-dia-grupo { margin-top: 14px; }
.mi-dia-grupo h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 8px; }
.grupo-rojo h3 { color: var(--error); }
.grupo-amarillo h3 { color: var(--alerta); }
.mi-dia-grupo summary { cursor: pointer; list-style-position: inside; }
.mi-dia-grupo summary h3 { margin: 0; }
details.mi-dia-grupo[open] summary { margin-bottom: 8px; }
.mi-dia-n { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alerta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); min-width: 0; }
.alerta-rojo { border-left-color: var(--error); background: color-mix(in srgb, var(--error-suave) 45%, var(--superficie)); }
.alerta-amarillo { border-left-color: var(--semaforo-amarillo); }
.alerta-sugerencia { border-left-color: var(--accion-borde); }
.alerta-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); align-self: start; margin-top: 6px; }
.alerta-rojo .alerta-punto { background: var(--error); box-shadow: 0 0 0 2px var(--error-suave); }
.alerta-amarillo .alerta-punto { background: var(--semaforo-amarillo); }
.alerta-sugerencia .alerta-punto { background: var(--accion-borde); }
.alerta-datos { display: grid; gap: 2px; min-width: 0; }
.alerta-que { font-weight: 600; overflow-wrap: anywhere; }
.alerta-rojo .alerta-que { color: var(--error); }
.alerta-quien { font-size: 13.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.alerta-quien a { color: var(--texto); font-weight: 500; }
.alerta-detalle, .alerta-de { font-size: 12.5px; color: var(--texto-3); overflow-wrap: anywhere; }
.alerta-motivo { font-size: 12px; color: var(--alerta); overflow-wrap: anywhere; }
.alerta-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.btn-whatsapp svg { width: 14px; height: 14px; }
.mi-dia-gestionadas { margin-top: 14px; font-size: 13px; color: var(--texto-2); }
.mi-dia-gestionadas summary { cursor: pointer; font-weight: 600; }
.mi-dia-gestionadas ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.mi-dia-gestionadas li { padding: 6px 10px; border-radius: 4px; background: var(--hundido); overflow-wrap: anywhere; }
.mi-dia-gestionadas .alerta-que { font-weight: 500; }
.mi-dia-gestionadas small { display: block; color: var(--texto-3); }
.mi-dia-recorte { margin-top: 10px; }
.gestionar-que { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .franja-guardian-interior { padding: 10px 16px; }
  .mi-dia { padding: 14px 12px; }
  .alerta { grid-template-columns: auto minmax(0, 1fr); }
  .alerta-acciones { grid-column: 1 / -1; justify-content: flex-start; }
  .mi-dia-herramientas { width: 100%; }
  .mi-dia-herramientas .filtro-asesor { flex: 1 1 auto; }
  .mi-dia-herramientas .filtro-asesor select { max-width: none; width: 100%; }
}

/* ============================================================
   GUÍAS (core/guia.js): tutoriales como los de los juegos.
   Velo oscuro con un recorte que pulsa sobre el elemento exacto, globo con flecha (hoja abajo en el celular), pastilla de pausa,
   celebración con confeti liviano y bienvenida de pantalla completa. Legible en claro y oscuro; sin movimiento si se pide.
   ============================================================ */
/* @nova: las guías son de Nova (su propia paleta, en claro y en oscuro) */
:root {
  --guia-velo: rgba(8, 10, 14, .66); --guia-anillo: #8FD3FF;
  --guia-fondo: #FFFFFF; --guia-texto: #15181D; --guia-suave: #4A515C; --guia-borde: #D6DAE1;
  --guia-primario: #15181D; --guia-primario-texto: #FFFFFF; --guia-punto: #D6DAE1; --guia-punto-hecho: #15181D; --guia-punto-actual: #2E8FD0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --guia-velo: rgba(0, 0, 0, .74);
    --guia-fondo: #16191E; --guia-texto: #F2F2F2; --guia-suave: #C4C8CF; --guia-borde: #2F343C;
    --guia-primario: #F2F2F2; --guia-primario-texto: #000000; --guia-punto: #3A3F47; --guia-punto-hecho: #C4C8CF; --guia-punto-actual: #8FD3FF;
  }
}
.guia-raiz { position: fixed; inset: 0; z-index: 1040; pointer-events: none; color: var(--guia-texto); font-family: var(--sans); }
/* Dentro de un diálogo abierto va como popover (capa superior): sin los estilos de fábrica del popover. */
.guia-raiz[popover] { width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; inset: 0; }
.guia-raiz:empty { display: none; }
.guia-velo { position: fixed; inset: 0; background: var(--guia-velo); }
.guia-foco { position: fixed; border-radius: 10px; box-shadow: 0 0 0 200vmax var(--guia-velo); transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease; }
.guia-foco::after { content: ''; position: absolute; inset: -4px; border-radius: 13px; border: 3px solid var(--guia-anillo); animation: guia-latido 1.8s ease-in-out infinite; }
@keyframes guia-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 211, 255, .55); } 55% { box-shadow: 0 0 0 12px rgba(143, 211, 255, 0); } }
.guia-tapa { position: fixed; pointer-events: auto; background: transparent; }
/* Globo */
.guia-globo { position: fixed; pointer-events: auto; width: min(360px, calc(100vw - 24px)); background: var(--guia-fondo); color: var(--guia-texto);
  border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 0 0 1px var(--guia-borde), 0 22px 60px -14px rgba(0, 0, 0, .6); outline: none;
  animation: guia-aparecer .22s ease-out; }
.guia-globo:focus-visible { box-shadow: 0 0 0 3px var(--guia-anillo), 0 22px 60px -14px rgba(0, 0, 0, .6); }
@keyframes guia-aparecer { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.guia-flecha { position: absolute; width: 14px; height: 14px; background: var(--guia-fondo); transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--guia-borde); }
.guia-globo[data-lado="abajo"] .guia-flecha { top: -7px; }
.guia-globo[data-lado="arriba"]:not(.hoja) .guia-flecha { bottom: -7px; box-shadow: 1px 1px 0 0 var(--guia-borde); }
.guia-globo[data-lado="derecha"] .guia-flecha { left: -7px; box-shadow: -1px 1px 0 0 var(--guia-borde); }
.guia-globo[data-lado="izquierda"] .guia-flecha { right: -7px; box-shadow: 1px -1px 0 0 var(--guia-borde); }
.guia-globo[data-lado="centro"] .guia-flecha, .guia-globo[data-lado="dentro"] .guia-flecha, .guia-confirmando .guia-flecha { display: none; }
.guia-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding-right: 26px; min-height: 18px; }
.guia-ojo { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--guia-suave); }
.guia-contador { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--guia-texto); margin-left: auto; font-variant-numeric: tabular-nums; }
.guia-cerrar { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--guia-suave); font-size: 20px; line-height: 1; display: grid; place-items: center; }
.guia-cerrar:hover { background: color-mix(in srgb, var(--guia-texto) 8%, transparent); }
.guia-cerrar:focus-visible, .guia-btn:focus-visible { outline: 2px solid var(--guia-anillo); outline-offset: 2px; }
.guia-titulo { font-size: 17px; font-weight: 600; line-height: 1.25; margin: 2px 0 4px; color: var(--guia-texto); }
.guia-texto { font-size: 15px; line-height: 1.45; color: var(--guia-texto); }
.guia-hazlo { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--guia-suave); }
.guia-hazlo-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--guia-anillo); box-shadow: 0 0 0 0 rgba(143, 211, 255, .6); animation: guia-latido 1.8s ease-in-out infinite; flex-shrink: 0; }
.guia-puntos { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0; padding: 0; }
.guia-puntos li { width: 7px; height: 7px; border-radius: 50%; background: var(--guia-punto); transition: width .2s; }
.guia-puntos li.hecho { background: var(--guia-punto-hecho); }
.guia-puntos li.actual { width: 18px; border-radius: 4px; background: var(--guia-punto-actual); }
.guia-botones { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.guia-espacio { flex: 1; }
.guia-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 14px; border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; background: transparent; color: var(--guia-texto); }
.guia-btn-primario { background: var(--guia-primario); color: var(--guia-primario-texto); }
.guia-btn-primario:hover { filter: brightness(1.12); }
.guia-btn-texto { padding: 7px 8px; color: var(--guia-suave); font-weight: 500; }
.guia-btn-texto:hover { color: var(--guia-texto); background: color-mix(in srgb, var(--guia-texto) 7%, transparent); }
.guia-btn-grande { min-height: 48px; padding: 12px 26px; font-size: 16px; }
.guia-sacudir { animation: guia-sacudir .38s ease-in-out; }
@keyframes guia-sacudir { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* Celular: hoja pegada abajo (o arriba si abajo tapa el elemento). */
.guia-globo.hoja { left: 0; right: 0; width: auto; bottom: 0; top: auto; border-radius: 16px 16px 0 0; padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); animation-name: guia-subir; }
.guia-globo.hoja.arriba { top: 0; bottom: auto; border-radius: 0 0 16px 16px; padding-top: calc(12px + env(safe-area-inset-top)); animation-name: guia-bajar; }
.guia-globo.hoja .guia-flecha { top: -7px; }
.guia-globo.hoja.arriba .guia-flecha { top: auto; bottom: -7px; box-shadow: 1px 1px 0 0 var(--guia-borde); }
.guia-globo.hoja[data-lado="centro"] { border-radius: 16px 16px 0 0; }
@keyframes guia-subir { from { transform: translateY(24px); opacity: 0; } }
@keyframes guia-bajar { from { transform: translateY(-24px); opacity: 0; } }
/* Pausa: una pastilla para seguir. */
.guia-pastilla { position: fixed; right: 16px; bottom: 20px; z-index: 1040; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px;
  border: 1px solid #2F343C; background: #0F1114; color: #F2F2F2; font: inherit; font-size: 13px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55); cursor: pointer; }
.guia-pastilla b { color: #8FD3FF; font-weight: 600; }
.guia-pastilla:focus-visible { outline: 2px solid #8FD3FF; outline-offset: 2px; }
.guia-pastilla-punto { width: 8px; height: 8px; border-radius: 50%; background: #8FD3FF; }
@media (max-width: 640px) { .guia-pastilla { right: 12px; bottom: 96px; } }
/* Celebración */
.guia-fiesta { position: fixed; inset: 0; pointer-events: auto; display: grid; place-items: center; padding: 20px; background: var(--guia-velo); overflow: hidden; }
.guia-fiesta-tarjeta { position: relative; z-index: 1; width: min(380px, 100%); text-align: center; background: var(--guia-fondo); color: var(--guia-texto); border-radius: 18px;
  padding: 26px 22px 20px; box-shadow: 0 0 0 1px var(--guia-borde), 0 30px 80px -20px rgba(0, 0, 0, .7); animation: guia-rebote .5s cubic-bezier(.2, 1.5, .4, 1); }
.guia-fiesta-icono { width: 54px; height: 54px; fill: #FFD166; stroke: #C99405; stroke-width: 1.5; stroke-linejoin: round; margin: 0 auto 8px; display: block; animation: guia-giro .7s ease-out; }
.guia-fiesta-ojo { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--guia-suave); margin-bottom: 4px; }
.guia-fiesta h2 { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--guia-texto); }
.guia-fiesta-texto { margin-top: 6px; font-size: 15px; color: var(--guia-suave); }
.guia-fiesta .guia-btn { margin-top: 16px; min-width: 140px; }
@keyframes guia-rebote { from { transform: scale(.7); opacity: 0; } }
@keyframes guia-giro { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }
.guia-confeti { position: absolute; inset: 0; pointer-events: none; }
.guia-confeti i { position: absolute; top: -16px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; background: var(--c); opacity: 0;
  animation: guia-caer var(--d) cubic-bezier(.25, .6, .5, 1) var(--r) forwards; }
.guia-confeti i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
@keyframes guia-caer { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: .9; transform: translate(var(--dx), 105vh) rotate(var(--g)); } }
/* Bienvenida de pantalla completa (mundo Nova: negro y acero; igual en claro y oscuro). */
.guia-bienvenida { position: fixed; inset: 0; pointer-events: auto; overflow-y: auto; display: grid; place-items: center; padding: 28px 16px;
  background: radial-gradient(ellipse 60% 50% at 70% 15%, rgba(143, 211, 255, .14), transparent 70%), #000; color: #F2F2F2; animation: guia-aparecer .3s ease-out; }
.guia-bienvenida-caja { width: min(560px, 100%); }
.guia-bienvenida-ojo { font-family: var(--brand); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: #A5A5A5; margin-bottom: 18px; }
.guia-bienvenida h1 { font-size: clamp(28px, 7vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #F2F2F2; }
.guia-bienvenida-texto { margin-top: 12px; font-size: 17px; color: #D9D9D9; }
.guia-bienvenida-partes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.guia-bienvenida-partes li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #D9D9D9; }
.guia-bienvenida-num { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #3A3F47; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: #8FD3FF; flex-shrink: 0; }
.guia-bienvenida-botones { display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.guia-bienvenida .guia-btn-primario { background: #F2F2F2; color: #000; }
.guia-bienvenida .guia-btn-primario:hover { background: #DDF3FF; filter: none; }
.guia-bienvenida .guia-btn-texto { color: #A5A5A5; }
.guia-bienvenida .guia-btn-texto:hover { color: #F2F2F2; background: #15181D; }
html.guia-sin-scroll { overflow: hidden; }
/* Botón "?" de la barra: repite la guía de la pantalla. */
.btn-guia { font-weight: 700; font-size: 15px; font-family: var(--sans); }
/* @fin-nova */
/* Sin movimiento cuando la persona lo pide. */
@media (prefers-reduced-motion: reduce) {
  .guia-foco { transition: none; }
  .guia-foco::after, .guia-hazlo-punto { animation: none; }
  .guia-globo, .guia-globo.hoja, .guia-fiesta-tarjeta, .guia-fiesta-icono, .guia-bienvenida, .guia-sacudir { animation: none; }
  .guia-confeti { display: none; }
}
@media (forced-colors: active) {
  .guia-foco::after { border-color: Highlight; }
  .guia-globo, .guia-fiesta-tarjeta { border: 2px solid CanvasText; }
}

/* ---------- Tiza F1b: edad de cada niño, TRM del día, ajustes del cotizador y "cuánto es por pasajero" ---------- */
.grupo-edades .etiqueta-campo { font-size: 12px; font-weight: 500; color: var(--texto-2); margin-bottom: 5px; }
.edades-ninos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.edad-nino { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; color: var(--texto-3); }
.edad-nino select { width: 100%; padding: 8px 10px; font-size: 14px; }
.trm-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; padding: 9px 12px; border-radius: 4px; background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--ok); font-size: 13px; color: var(--texto-2); }
.trm-estado.alerta { border-left-color: var(--alerta); }
.trm-estado span { flex: 1 1 260px; min-width: 0; }
#dialogo-ajustes .campo.ajuste { margin-bottom: 14px; gap: 6px; }
#dialogo-ajustes .campo.ajuste > label.opcion-check { font-size: 14px; color: var(--texto); margin: 0; }
#dialogo-ajustes .aj-edad { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#dialogo-ajustes .aj-edad input { width: 80px; }
#dialogo-ajustes .aj-edad small { color: var(--texto-3); }
#dialogo-ajustes textarea:disabled { opacity: .55; }

/* ---------- Formulario de tu web (leads.html, Tranquillum F1b) y la tarjeta del lead en La Línea ---------- */
.etiqueta.lead-web { background: var(--accion-suave); color: var(--accion-tinta); font-weight: 600; }
.leads-enlace-equipo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.leads-enlace-equipo p { color: var(--texto-2); font-size: 13.5px; max-width: 62ch; }
.leads .ayuda { color: var(--texto-2); font-size: 13.5px; margin-bottom: 12px; max-width: 72ch; }
.leads .pista { color: var(--texto-3); font-size: 12.5px; margin: 4px 0 12px; }
.leads .error { color: var(--error); font-size: 13px; min-height: 0; margin: 6px 0; }
.leads .acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.leads .acciones .btn { flex: 0 0 auto; }
.leads-sub { font-size: 14px; margin: 18px 0 6px; }
.leads-sin { color: var(--texto-2); margin-bottom: 4px; }
.leads-clave-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.leads-clave-fila code { background: var(--hundido); padding: 3px 8px; border-radius: 4px; font-size: 13.5px; overflow-wrap: anywhere; }
.leads-activo { margin-bottom: 4px; }
.leads label[for] { display: block; font-size: 12px; font-weight: 500; color: var(--texto-2); margin: 10px 0 5px; }
.leads textarea, .leads input[type="url"] { width: 100%; padding: 9px 11px; font: inherit; font-size: 14px; }
.leads textarea:disabled, .leads input:disabled { background: var(--hundido); color: var(--texto-2); }
.leads-receptores { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.leads-receptor { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.leads-receptor small { color: var(--texto-3); font-weight: 400; }
.leads-receptor.inactiva { color: var(--texto-3); background: var(--hundido); }
.leads-dias { display: flex; gap: 4px; flex-wrap: wrap; }
.leads-dia { position: relative; display: inline-flex; }
.leads-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.leads-dia span { display: inline-grid; place-items: center; min-width: 38px; padding: 4px 6px; border: 1px solid var(--borde-fuerte); border-radius: 999px; font-size: 12px; color: var(--texto-3); cursor: pointer; user-select: none; }
.leads-dia input:checked + span { background: var(--accion); border-color: var(--accion); color: var(--accion-texto); }
.leads-dia input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.leads-dia input:disabled + span { cursor: default; opacity: .7; }
/* Quien no recibe leads: sus días quedan apagados (se guardan solo si la marcan). */
.leads-receptor:not(.recibe) .leads-dias { opacity: .35; }
.leads-fragmento { font-family: var(--mono); font-size: 12px !important; line-height: 1.4; white-space: pre; overflow: auto; background: var(--hundido) !important; }
.leads-enlace a { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
#leads-cambios ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#leads-cambios li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--texto-2); flex-wrap: wrap; }
#leads-cambios li small { color: var(--texto-3); }
/* Google Ads (leads.html): la dirección y la clave para copiar (fila de campo + botón; en el celular el botón, que dice qué copia, baja
   debajo del campo para que se lea la dirección), los pasos, el estado con sus notas una debajo de otra y el ejemplo del enlace con utm
   (se parte donde sea: es una dirección larga). */
.leads-copiar { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.leads-copiar input { flex: 1 1 14rem; min-width: 0; width: auto; padding: 9px 11px; font-family: var(--mono); font-size: 13px; background: var(--hundido); color: var(--texto); }
.leads-copiar .btn { flex: 0 0 auto; }
.leads-pasos { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 6px; font-size: 13.5px; color: var(--texto-2); max-width: 72ch; }
#leads-google .nota { flex-direction: column; gap: 4px; margin-bottom: 10px; }
#leads-google .nota small { color: var(--texto-3); }
.leads-ejemplo { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; background: var(--hundido); color: var(--texto-2); padding: 1px 5px; border-radius: 4px; }

/* ==========================================================
   PRUEBA Y AUTOSERVICIO: la franja discreta de la prueba con «Cómo pagar» (core/prueba.js) y la tarjeta "Configura tu agencia" de
   Órbita (core/configuracion.js). El asistente tiene lo suyo en configurar.css.
   ========================================================== */
.franja-prueba { background: var(--hundido); border-bottom: 1px solid var(--borde); color: var(--texto-2); }
.franja-prueba.cerrada { background: var(--alerta-suave); border-bottom-color: color-mix(in srgb, var(--alerta) 35%, var(--borde)); color: var(--texto); }
.franja-prueba-interior { max-width: 1180px; margin: 0 auto; padding: 6px 20px; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; }
.franja-prueba-texto { flex: 1 1 240px; min-width: 0; }
@media (max-width: 640px) { .franja-prueba-interior { padding: 6px 16px; } }
.dialogo-pago .pago-plan { display: grid; gap: 2px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radio); background: var(--hundido); font-size: 14px; }
.dialogo-pago .pago-plan span { color: var(--texto-2); font-size: 13px; }
.dialogo-pago .pago-texto { white-space: pre-line; margin: 0 0 12px; overflow-wrap: anywhere; }
.dialogo-pago .acciones { flex-wrap: wrap; }
.configurar-tarjeta { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; border-left: 3px solid var(--accion-borde); }
.configurar-tarjeta-texto { flex: 1 1 320px; min-width: 0; }
.configurar-tarjeta h2 { font-size: 17px; margin: 0 0 10px; }
.configurar-tarjeta .ojo { margin-bottom: 4px; }
.configurar-barra { height: 6px; border-radius: 3px; background: var(--hundido); overflow: hidden; max-width: 360px; }
.configurar-barra i { display: block; height: 100%; background: var(--ok); }
.configurar-cuenta { font-family: var(--mono); font-size: 12px; color: var(--texto-3); margin: 6px 0 10px; }
.configurar-faltan { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.configurar-faltan li { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; font-size: 14px; }
.configurar-faltan a { font-weight: 600; color: var(--texto); }
.configurar-faltan small { color: var(--texto-3); font-size: 12.5px; }
.configurar-tarjeta > .btn { flex: 0 0 auto; }
@media (max-width: 640px) { .configurar-tarjeta > .btn { flex: 1 1 100%; } }

/* ============================================================
   Fondo del encabezado de los documentos (data-fondo-barra = 'marca' | 'oscuro'; 'claro' no pone nada). Para logos blancos o muy
   claros. core/agencia.js (aplicarMarcaEn) lo escribe en <html data-fondo-barra>; la muestra del alta y de "Configura tu agencia" lo
   llevan en su propio contenedor (marcaEn). Hoy vale solo para la muestra del documento de la vista previa de Nova (admin/vista-previa,
   admin/alta-comun.js muestraDocumento): los PDF de las agencias tienen su diseño (documento.css y el editor del PDF de Nova). El menú
   no se pinta aquí (sus colores son los --barra-* de arriba).
   ============================================================ */
/* @documento: el fondo del encabezado de los PDF */
/* Encabezado de la muestra del documento. */
[data-fondo-barra="marca"] .doc-cabecera { background: var(--marca); }
[data-fondo-barra="oscuro"] .doc-cabecera { background: var(--marca-2); }
[data-fondo-barra="marca"] .doc-cabecera .marca { color: var(--doc-marca-texto); }
[data-fondo-barra="oscuro"] .doc-cabecera .marca { color: var(--doc-marca-2-texto); }
/* @fin-documento */

/* ============================================================
   Mis pagos (pagos.html): lo que la agencia le paga a Nova. Cifras, el pago pendiente y la tabla del historial.
   ============================================================ */
.pagos-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 12px 0 14px; }
.pagos-cifras div { padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--hundido); }
.pagos-cifras small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 4px; }
.pagos-cifras b { font-size: 15px; }
.pago-pendiente h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pago-valor { font-family: var(--mono); font-size: 26px; font-weight: 700; margin: 6px 0 12px; }
.pago-transferencia { margin-top: 12px; padding: 12px 14px; border-radius: var(--radio); background: var(--hundido); border: 1px solid var(--borde); }
.pagos .acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pagos .error { color: var(--error); font-size: 13px; min-height: 18px; margin-top: 8px; }
.campos-tarjeta { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
/* La tabla del historial (.tabla-pagos): la forma de la tabla de la app, arriba junto a .tabla-equipo-mes. */
/* Órbita: la tarjeta "Tu plan en Nova" del gerente. */
.atajo.atajo-pagos .ic { background: var(--alerta-suave); color: var(--alerta-texto); }
.atajo.atajo-pagos.al-dia .ic { background: var(--ok-suave); color: var(--ok); }

/* @documento: la muestra del documento con el estilo moderno (data-tema="si", que core/agencia.js pone): esquinas, pastilla de resalte,
   secciones con el acento y pie de la agencia. */
[data-tema="si"] .documento { border-radius: 24px; border-color: transparent; box-shadow: 0 20px 70px rgba(0, 0, 0, .1); }
[data-tema="si"] .doc-pastilla { background: var(--marca-resalte, var(--marca)); color: var(--doc-resalte-texto); font-size: 16px; font-weight: 900; letter-spacing: .02em; padding: 12px 30px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0, 0, 0, .1); }
[data-tema="si"] .doc-caja { border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); border-color: #eee; }
[data-tema="si"] .doc-caja strong { color: var(--marca-acento, var(--marca)); }
[data-tema="si"] .doc-seccion { border-radius: 16px; border-color: transparent; box-shadow: 0 4px 20px rgba(0, 0, 0, .05); }
[data-tema="si"] .doc-seccion > h3 { background: var(--marca-acento, var(--marca)); color: var(--doc-acento-texto); font-size: 16px; text-transform: none; letter-spacing: 0; padding: 14px 22px; }
[data-tema="si"] .doc-seccion h4 { color: var(--marca); font-weight: 800; }
[data-tema="si"] .doc-item { border-radius: 10px; border-left-width: 4px; }
[data-tema="si"] .doc-cta { border-radius: 16px; }
[data-tema="si"] .doc-cta h3 { color: var(--marca-titulos, var(--marca-2)); font-size: 22px; font-weight: 700; }
[data-tema="si"] .doc-cta a.aceptar { font-size: 18px; padding: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, .18); }   /* sin color-mix: html2canvas (PDF) no lo entiende */
[data-tema="si"] .doc-cta a.modificar { background: var(--marca-titulos, var(--marca-2)); color: var(--doc-titulos-texto); }
[data-tema="si"] .doc-legal { background: var(--marca-titulos, var(--marca-2)); color: var(--doc-titulos-texto); }
/* @fin-documento */

/* ---------- Inicio: cifras del mes, filtros de la lista y el trabajo agrupado por asesor ---------- */
.cifras { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 22px; }
.cifras .metrica .valor { font-size: clamp(14px, 10.5cqi, 21px); }
.lista-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); border-radius: 100px; padding: 5px 12px; font-size: 13px; cursor: pointer; font-family: inherit; display: inline-flex; gap: 6px; align-items: center; }
.chip b { font-weight: 600; color: var(--texto-3); font-size: 12px; }
.chip.activo { background: var(--accion); border-color: var(--accion); color: var(--accion-texto); } .chip.activo b { color: var(--accion-texto); }
.buscar-lista { flex: 1 1 220px; min-width: 180px; margin: 0; }
.buscar-lista input { width: 100%; margin: 0; padding: 7px 12px; border-radius: 100px; font-size: 13.5px; }
.grupo-asesor { border-bottom: 1px solid var(--borde); }
.grupo-asesor:last-child { border-bottom: none; }
.grupo-asesor > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--hundido); font-size: 14px; }
.grupo-asesor > summary::-webkit-details-marker { display: none; }
.grupo-asesor > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
.grupo-asesor[open] > summary::before { transform: rotate(45deg); }
.grupo-asesor > summary b { font-weight: 600; }
.grupo-asesor > summary small { color: var(--texto-3); margin-left: auto; font-size: 12.5px; white-space: nowrap; }
.grupo-asesor .persona-inicial { width: 28px; height: 28px; font-size: 12px; }

/* Formulario de tu web (leads.html) con la función «Formulario de tu web» apagada: solo queda Facebook e Instagram. */
.sin-web :is(#leads-clave, #form-leads, #leads-pegar) { display: none !important; }
/* Inicio: «Abrir» y el siguiente paso de cada documento. */
.fila-botones { display: flex; gap: 6px; flex-wrap: wrap; }
/* Inicio en el celular: los tres atajos para vender en una fila de cuadros (antes ocupaban toda la pantalla, uno debajo del otro). */
@media (max-width: 640px) {
  #atajos.atajos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
  #atajos .atajo { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 6px 12px; }
  #atajos .atajo .ic { width: 44px; height: 44px; border-radius: 12px; }
  #atajos .atajo .ic svg { width: 24px; height: 24px; }
  #atajos .atajo b { font-size: 13px; line-height: 1.25; }
  #atajos .atajo small { display: none; }
  #atajos .atajo.atajo-pagos { grid-column: 1 / -1; flex-direction: row; text-align: left; padding: 12px 14px; }
  #atajos .atajo.atajo-pagos small { display: block; }
}

/* Nova dentro de una agencia (demo o soporte): franja oscura de Nova con «Volver a Nova» (core/layout.js), arriba de cada pantalla (en el
   computador, a la derecha de la columna). */
/* @nova: la franja «Estás en … como Nova» */
.franja-nova { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px;
  background: #0F1114; color: #D9D9D9; font-size: 13px; border-bottom: 1px solid #24282E; }
.franja-nova b { color: #fff; font-weight: 600; }
.franja-nova span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.franja-nova .btn { flex-shrink: 0; background: #fff; color: #0F1114; border-color: #fff; gap: 6px; }
.franja-nova .btn svg { width: 14px; height: 14px; }
.franja-nova .btn:hover { background: #E6E8EB; }
/* @fin-nova */

/* Tipificación de la llamada: una pastilla con el color que eligió la agencia (core/estaciones.js → chipTipificacion). */
.chip-tip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--texto) 8%, transparent); vertical-align: middle; }
/* El estado de una cita (agendada, asistió, venta…) y lo que no es una tipificación: colores de estado de Nova, iguales en todas las
   agencias (core/viajes-modelo.js CLASE_ESTADO_CITA). */
.chip-tip.neutro, .chip-tip.estado-agendada { background: var(--hundido); color: var(--texto); }
.chip-tip.estado-no_show { background: var(--error-suave); color: var(--error); }
.chip-tip.estado-show { background: var(--info-suave); color: var(--info); }
.chip-tip.estado-venta { background: var(--ok-suave); color: var(--ok); }
.chip-tip.estado-reagendada { background: var(--semaforo-amarillo-suave); color: var(--aviso-texto); }
.gestion-cliente { display: inline-flex; gap: 6px; align-items: center; }
.gestion-cliente small { color: var(--texto-3); font-size: 11.5px; }

/* ============================================================
   TRANQUILLUM — las piezas del juego (core/juego.js): cada persona ve una sola jugada al frente, una línea que le dice qué hacer
   ahora, el camino del cliente (el tablero: Nuevo → Postventa) y el anillo de su meta del día.
   ============================================================ */
.saludo-hoy { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.saludo-hoy h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; }
.saludo-hoy p { color: var(--texto-2); margin-top: 4px; }
.guia-paso { display: flex; gap: 10px; align-items: center; background: var(--accion-suave); border-radius: 14px; padding: 10px 14px; font-size: 14.5px; margin: 0 0 14px; }
.guia-paso .paso { font-family: var(--mono); font-size: 11.5px; background: var(--accion); color: var(--accion-texto); border-radius: 100px; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; }
.jugada { background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px; padding: 26px; box-shadow: 0 22px 48px -30px color-mix(in srgb, var(--texto) 45%, transparent); position: relative; overflow: hidden; }
/* La escena de la jugada: donde la tarjeta entra o sale de lado (Llamar y Reservar: .lead-tarjeta.entra/.sale; Mi estación: .foco.sale).
   Recorta de lado lo que se mueve: sin esto, mientras la tarjeta entraba (40 px) o salía (60 px) hacia la derecha, la página se corría de
   lado en el celular (la e2e lo dejaba pasar: medía contra innerWidth). clip y no hidden: no vuelve la caja un scroll ni corta la sombra
   de abajo. */
.escena-tarjeta { overflow-x: clip; }
.jugada h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 800; }
.anillo-meta { display: flex; align-items: center; gap: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 10px 14px; }
.anillo-meta .anillo { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(var(--accion-borde) calc(var(--p, 0) * 1%), var(--hundido) 0); }
.anillo-meta .anillo b { width: 34px; height: 34px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; font-family: var(--mono); font-size: 11.5px; font-weight: 500; }   /* el hueco del anillo es la caja de la cifra (su fondo de verdad) */
.anillo-meta strong { display: block; font-size: 14.5px; }
.anillo-meta small { display: block; color: var(--texto-3); font-size: 12px; }
.camino { display: flex; align-items: flex-start; margin-top: 20px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.camino .e { display: grid; justify-items: center; gap: 6px; flex: 1 0 62px; position: relative; font-size: 11px; color: var(--texto-3); text-align: center; line-height: 1.2; }
.camino .e::before { content: ''; position: absolute; top: 7px; left: -50%; right: 50%; height: 2px; background: var(--borde); }
.camino .e:first-child::before { display: none; }
.camino .e i { width: 16px; height: 16px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--borde); position: relative; z-index: 1; }
.camino .e.ya i { background: var(--accion-borde); border-color: var(--accion-borde); }
.camino .e.ya::before, .camino .e.ahora::before { background: var(--accion-borde); }
.camino .e.ahora i { background: var(--superficie); border: 4px solid var(--accion-borde); box-shadow: 0 0 0 5px var(--foco-halo); }
.camino .e.ahora { color: var(--texto); font-weight: 700; }
.festejo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.festejo i { position: absolute; top: 40%; left: 50%; width: 9px; height: 14px; border-radius: 2px; animation: festejo-vuela 1s ease-out forwards; }
@keyframes festejo-vuela { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
@media (max-width: 640px) { .jugada { padding: 20px 18px; border-radius: 18px; } .saludo-hoy h1 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .festejo { display: none; } }
/* Los logos de los medios de pago (core/ui.js → logosPago): una fila en el pie de la cotización y de la pre-reserva. */
.logos-pago { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 10px; }
.logos-pago img { height: 26px; width: auto; max-width: 70px; object-fit: contain; }