/* ============================================================================
   SISTEMA DE DISEÑO — Traslados Puerto Iguazú
   ============================================================================

   Rediseño completo (2026-08-27). Ver docs/sistema-de-diseno.md para el
   porqué de cada decisión.

   REGLA QUE ORDENA TODO EL ARCHIVO
   --------------------------------
   Este proyecto no tiene build: el JS genera HTML con nombres de clase
   escritos a mano. Por eso el CSS es una API pública. Se reescribió la
   IMPLEMENTACIÓN entera (colores, escalas, formas) conservando el
   CONTRATO entero (los 213 nombres de clase que usan el HTML y el JS).
   Ningún archivo .js necesitó cambiar.

   => Si agregás una clase acá, es libre.
   => Si RENOMBRÁS o BORRÁS una, rompés el JS en silencio. No lo hagas sin
      buscar antes el nombre en web/js/.

   ORDEN DEL ARCHIVO
   -----------------
    1. Tokens              8. Alojamientos
    2. Base y tipografía   9. Tramos
    3. Layout             10. Ficha del chofer
    4. Formularios        11. Navegador de viajes
    5. Botones            12. Consultas y modal
    6. Badges y estados   13. Tablas
    7. Navegación         14. Tareas
                          15. Acceso (login / registro)
                          16. Utilidades
                          17. Impresión
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ============================================================================

   COLOR — "papel y señal".
   El sistema anterior teñía de verde TODO el fondo (#eef4f0, #e5eee7). El
   problema no era el gusto: si el verde es también el color del ambiente,
   deja de poder significar algo. Un botón verde sobre un fondo verde no
   grita "acción", y un badge verde no grita "confirmado".
   Acá los fondos son neutros de papel (apenas un grado de verde en el tono,
   no en la saturación) y los colores de Iguazú quedan reservados para
   señalar: catarata = información, selva = confirmado, oro = pendiente,
   tierra colorada = atención.

   Cada valor está medido contra WCAG 2.1 AA en LOS DOS temas: 4.5:1 para
   texto, 3:1 para bordes de control y anillos de foco (regla 1.4.11).
   Si tocás un color, volvé a medirlo — no lo estimes a ojo.

   light-dark() define cada token UNA sola vez. Antes había dos bloques de
   ~35 líneas idénticas (uno para [data-theme], otro para el media query)
   que había que editar a la par; olvidarse de uno era el bug esperable.
   El toggle manual de web/js/tema.js sigue funcionando igual, sin cambios:
   pone data-theme en <html> y acá eso mueve el color-scheme.
   ============================================================================ */

:root {
  color-scheme: light dark;

  /* --- Superficies, de la más al fondo a la más elevada --- */
  --surface-0: light-dark(#f1f3f2, #0f1211);  /* fondo de página */
  --surface-1: light-dark(#e7ebe9, #171c1a);  /* hundido: campos, zonas agrupadas */
  --surface-2: light-dark(#ffffff, #1d2422);  /* elevado: tarjetas, menús */
  --surface-3: light-dark(#f7f9f8, #252d2a);  /* hover sobre una superficie elevada */

  /* --- Bordes ---
     --border es decorativo (separadores, divisiones internas).
     --border-strong delimita CONTROLES (inputs, botones) y por eso cumple
     3:1 contra las tres superficies. Se ve más marcado que el anterior a
     propósito: el de antes daba 1.76:1, es decir, prácticamente invisible. */
  --border: light-dark(#d3dad7, #2c3532);
  --border-strong: light-dark(#7d8984, #656f69);

  /* --- Texto --- */
  --text-primary: light-dark(#101613, #e9edeb);
  --text-secondary: light-dark(#4a5551, #a7b2ad);
  --text-muted: light-dark(#606c67, #8a958f);

  /* --- Acción primaria ---
     Verde selva legible, no el casi-negro de antes (#12281f): un botón
     primario tiene que leerse como verde, no como negro. */
  --fill-primary: light-dark(#1c5738, #2f7d53);
  --fill-primary-hover: light-dark(#14432a, #379162);
  --on-primary: light-dark(#ffffff, #f3f8f5);

  /* --- Los cuatro colores de Iguazú, ahora como señal --- */
  --catarata: light-dark(#0d6b78, #45bccb);   /* neblina de la catarata: info */
  --selva: light-dark(#1c5738, #48b57e);      /* selva: confirmado */
  --oro: light-dark(#8a6f1c, #d6b055);        /* oro: pendiente */
  --laterite: light-dark(#ad4c1c, #e88349);   /* tierra colorada: atención */

  /* --- Pares fondo/texto por estado semántico --- */
  --bg-accent: light-dark(#dff0f2, #0e3238);
  --border-accent: light-dark(#0d6b78, #45bccb);
  --text-accent: light-dark(#0a5460, #7fd8e3);

  --bg-pro: light-dark(#f6f0d8, #372f16);
  --border-pro: light-dark(#8a6f1c, #d6b055);
  --text-pro: light-dark(#63510f, #e5c778);

  --bg-success: light-dark(#dcefe1, #143124);
  --text-success: light-dark(#1b5330, #6ed095);

  --bg-warning: light-dark(#fae5d3, #37240f);
  --text-warning: light-dark(#7c3a10, #eda370);

  --bg-danger: light-dark(#fbe2e0, #361511);
  --text-danger: light-dark(#8c281c, #ec8b7c);

  /* --- Espaciado: escala de 4px ---
     Antes convivían ~20 valores sueltos (2,3,5,6,9,14,18,22,26...). Con una
     escala, dos cosas separadas por el mismo aire se ven relacionadas; sin
     escala, todo queda "casi alineado", que es lo que el ojo lee como
     descuido sin poder señalar por qué. */
  --s-1: 0.25rem;   /*  4px */
  --s-2: 0.5rem;    /*  8px */
  --s-3: 0.75rem;   /* 12px */
  --s-4: 1rem;      /* 16px */
  --s-5: 1.25rem;   /* 20px */
  --s-6: 1.5rem;    /* 24px */
  --s-8: 2rem;      /* 32px */
  --s-10: 2.5rem;   /* 40px */
  --s-12: 3rem;     /* 48px */

  /* --- Tipografía ---
     Antes había 14 tamaños distintos, varios separados por medio píxel
     (12 / 12.5 / 13 / 13.5). Esa diferencia no se percibe: no crea
     jerarquía, solo hace imposible mantener la coherencia. Son 8 escalones,
     y el cuerpo subió de 14px a 15px: esta es una herramienta que se mira
     ocho horas por día. */
  --fs-2xs: 0.6875rem;  /* 11px — badges y eyebrows, siempre en mayúsculas */
  --fs-xs: 0.75rem;     /* 12px — hints y metadatos (antes 10.5px) */
  --fs-sm: 0.8125rem;   /* 13px — labels, texto secundario denso */
  --fs-md: 0.875rem;    /* 14px — texto de apoyo */
  --fs-base: 0.9375rem; /* 15px — cuerpo e inputs */
  --fs-lg: 1.0625rem;   /* 17px — títulos de sección */
  --fs-xl: 1.375rem;    /* 22px — h1 */
  --fs-2xl: 1.75rem;    /* 28px — títulos de las pantallas de acceso */

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Formas ---
     Antes: 8px y 16px como tokens, más 5, 6, 10, 20, 999 y 50% sueltos por
     el archivo. Ahora la escala es explícita y el radio crece con el tamaño
     del elemento, que es lo que hace que un sistema se vea intencional. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Alias de los nombres viejos: puede haber style="" en el HTML que los
     use. Cuestan nada y evitan una regresión silenciosa. */
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);

  /* --- Elevación ---
     Antes las sombras eran verdes (rgba(18,40,31,...)) y las mismas en modo
     oscuro, donde una sombra verde sobre fondo negro se lee como suciedad.
     Ahora son negras y cambian de opacidad según el tema. */
  --shadow-sm: light-dark(
    0 1px 2px rgba(16, 22, 19, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.4));
  --shadow-md: light-dark(
    0 1px 2px rgba(16, 22, 19, 0.05), 0 8px 20px -12px rgba(16, 22, 19, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 20px -12px rgba(0, 0, 0, 0.7));
  --shadow-lg: light-dark(
    0 2px 4px rgba(16, 22, 19, 0.05), 0 16px 36px -16px rgba(16, 22, 19, 0.26),
    0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 36px -16px rgba(0, 0, 0, 0.8));

  /* --- Movimiento --- */
  --t-fast: 0.12s ease;
  --t-base: 0.18s ease;

  /* --- Anchos de layout ---
     El cambio de layout más importante del rediseño. Ver sección 3. */
  --w-page: 640px;
  --w-wide: 1120px;
  --w-auth: 980px;
}

/* El toggle manual gana sobre la preferencia del sistema, en los dos
   sentidos. Al cambiar color-scheme, todos los light-dark() de arriba se
   reevalúan solos: por eso alcanza con estas dos líneas. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }


/* ============================================================================
   2. BASE Y TIPOGRAFÍA
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  background: var(--surface-0);
  color: var(--text-primary);
  margin: 0;
  padding: var(--s-6) var(--s-4) var(--s-12);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Foco visible, global y consistente.
   Antes solo lo tenían input/select/textarea: los botones y los enlaces no
   mostraban NADA al navegar con teclado. Para un operador que carga viajes
   a máquina todo el día, tabular a ciegas no es un detalle de
   accesibilidad, es velocidad de trabajo perdida.
   :focus-visible (y no :focus) => el anillo aparece con el teclado y no
   ensucia al hacer clic con el mouse. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-1);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-2);
}

.subtitle {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin: 0 0 var(--s-5);
}

/* Etiqueta de sección: el punto de tierra colorada antes del texto es la
   firma de marca más chica del sistema y aparece en todas las pantallas. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--catarata);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--laterite);
  display: inline-block;
  flex: none;
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--s-3);
}

/* 12px, no 10.5px. Un texto de ayuda que no se puede leer no ayuda. */
.hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--s-1) 0 0;
}

/* Datos: horas, patentes, montos, códigos.
   tabular-nums alinea las cifras en columna, que es justo lo que hace falta
   en un listado de precios o de horarios. */
input.mono, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

p.error, .error { color: var(--text-danger); font-size: var(--fs-sm); }
p.ok, .ok { color: var(--text-success); font-size: var(--fs-sm); }

.tachado { text-decoration: line-through; }

.tag {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
}


/* ============================================================================
   3. LAYOUT
   ============================================================================

   EL CAMBIO MÁS IMPORTANTE DEL REDISEÑO.

   Antes .page medía 480px y .page-wide 720px. 480px es el ancho de un
   teléfono: 13 de las 20 pantallas se veían como una columna de celular en
   el medio de un monitor, con el 70% de la pantalla vacío. En "Nuevo viaje"
   —la pantalla más usada, con varios tramos apilados— eso significaba
   scrollear de más todo el día para ver algo que entraba de sobra.

   Ahora:
     .page       640px  columna cómoda para formularios y lectura
     .page-wide 1120px  listados, tarifas, pagos, calendario
   El límite existe igual: una línea de texto de 1400px no se lee, se
   escanea mal. 640px no es "poco ancho", es el ancho correcto para leer.
   ============================================================================ */

.page {
  max-width: var(--w-page);
  margin: 0 auto;
}

.page-wide { max-width: var(--w-wide); }

.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-md);
}

@media (max-width: 560px) {
  body { padding: var(--s-4) var(--s-3) var(--s-10); }
  .card { padding: var(--s-4); border-radius: var(--r-md); }
}

.divider {
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
  margin-bottom: var(--s-5);
}

/* Agrupa campos sueltos en un bloque con nombre. Es solo el contenedor: no
   toca ningún id/class que lean app.js o ia-tramos.js. */
.form-card {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.form-card-header {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.form-card > .field:last-child,
.form-card > .row-2:last-child,
.form-card > .row-2-even:last-child,
.form-card > .row-3:last-child { margin-bottom: 0; }


/* ============================================================================
   4. FORMULARIOS
   ============================================================================ */

label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--s-1);
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-base);
  line-height: 1.4;
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--text-secondary);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-accent) 22%, transparent);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-1);
  color: var(--text-muted);
  cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
textarea { resize: vertical; min-height: 4.5em; }

.field { margin-bottom: var(--s-3); }
.campo-otro { margin-top: var(--s-2); }

.row-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.row-2-even { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }

/* En pantalla angosta las grillas se apilan: dos campos de 90px cada uno no
   son "compactos", son inutilizables. */
@media (max-width: 560px) {
  .row-2, .row-2-even, .row-3 { grid-template-columns: 1fr; }
}

.row-ruta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-2);
  align-items: end;
  margin-bottom: var(--s-3);
}
.ruta-arrow {
  font-family: var(--font-mono);
  color: var(--catarata);
  font-size: var(--fs-base);
  padding-bottom: 10px;
  text-align: center;
}
@media (max-width: 560px) {
  .row-ruta { grid-template-columns: 1fr; }
  .ruta-arrow { padding: 0 0 var(--s-1); text-align: left; }
}

/* El área clickeable incluye el texto: en un checkbox el label ES el
   control, y un blanco de 14px es un blanco chico en un celular. */
.checkbox-row {
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  color: var(--text-secondary);
  cursor: pointer;
}
.checkbox-row input {
  width: auto;
  min-width: 16px;
  height: 16px;
  accent-color: var(--fill-primary);
  cursor: pointer;
}


/* ============================================================================
   5. BOTONES Y ENLACES
   ============================================================================

   NOTA HEREDADA, a propósito: el botón base sigue siendo width:100%.
   Es al revés de lo que conviene (lo normal es que un botón mida lo que
   dice, y que el ancho completo sea la excepción), y por eso hay ~15 reglas
   más abajo que lo corrigen con width:auto. Se dejó así porque darlo vuelta
   obliga a revisar cada botón de los 20 HTML más los que genera el JS, y el
   riesgo de romper algo no compensa lo que se gana. Está anotado en
   docs/sistema-de-diseno.md como deuda conocida.
   ============================================================================ */

button {
  width: 100%;
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
button:hover:not(:disabled) { background: var(--surface-1); border-color: var(--text-secondary); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--fill-primary);
  color: var(--on-primary);
  border-color: var(--fill-primary);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.btn-primary:hover:not(:disabled) {
  background: var(--fill-primary-hover);
  border-color: var(--fill-primary-hover);
}

/* El margin-bottom de arriba existe para cuando el botón primario va
   apilado al final de un formulario. Dentro de una fila flex/grid ese
   margen lo desalinea con sus vecinos (se ve más alto que los demás).
   Pasaba de verdad en index.html, con "Completar tramos con IA". */
.ia-box-acciones .btn-primary,
.btn-ghost-row .btn-primary,
.tramos-acciones .btn-primary,
.alojamiento-form-botones .btn-primary,
.status-strip .btn-primary { margin-bottom: 0; }

.btn-danger {
  background: var(--bg-danger);
  color: var(--text-danger);
  border-color: transparent;
}
.btn-danger:hover:not(:disabled) {
  background: var(--bg-danger);
  border-color: var(--text-danger);
}

.btn-ghost-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

.baja-toggle-row { margin-top: var(--s-4); }
.baja-toggle-row button { width: auto; padding: var(--s-1) var(--s-3); font-size: var(--fs-sm); }

/* Enlace que se ve como botón (mismo aspecto, distinta semántica). */
a.link-button {
  display: block;
  width: 100%;
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
  transition: background-color var(--t-fast), border-color var(--t-fast);
  margin-bottom: var(--s-2);
}
a.link-button:hover { background: var(--surface-1); border-color: var(--text-secondary); }

/* Acción destructiva discreta: no compite con la acción principal, pero se
   pone roja al acercarse para que nadie la toque de casualidad. */
.danger-link {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--s-2);
  padding: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}
.danger-link:hover { color: var(--text-danger); background: none; }


/* ============================================================================
   6. BADGES Y ESTADOS
   ============================================================================ */

.badge {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px var(--s-2);
  border-radius: var(--r-xs);
  display: inline-block;
  white-space: nowrap;
}
.badge-accent { background: var(--bg-accent); color: var(--text-accent); }
.badge-pro { background: var(--bg-pro); color: var(--text-pro); }
.badge-success { background: var(--bg-success); color: var(--text-success); }
.badge-warning { background: var(--bg-warning); color: var(--text-warning); }
.badge-danger { background: var(--bg-danger); color: var(--text-danger); }

/* Falta un dato para poder operar el viaje. */
.badge-fecha-pendiente, .badge-hora-pendiente {
  font-size: var(--fs-xs);
  background: var(--bg-warning);
  color: var(--text-warning);
  border-radius: var(--r-full);
  padding: 2px var(--s-2);
  margin-left: var(--s-2);
  white-space: nowrap;
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin: 0 0 var(--s-4);
}


/* ============================================================================
   7. NAVEGACIÓN
   ============================================================================ */

.app-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.app-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.app-nav-brand {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--catarata);
  white-space: nowrap;
}
.app-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}
.app-nav-links a {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.app-nav-links a:hover {
  color: var(--text-primary);
  border-bottom-color: var(--catarata);
}
.app-nav-user {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.app-nav-user button { width: auto; padding: var(--s-1) var(--s-3); font-size: var(--fs-xs); }
.app-nav-alerta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-warning);
  white-space: nowrap;
}

.tema-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--r-full);
  font-size: var(--fs-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
  flex: none;
  line-height: 1;
}

/* En las pantallas sin barra (login, ficha, itinerario, comprobante) el
   toggle va flotando. Ver el final de web/js/tema.js. */
.tema-toggle-flotante {
  position: fixed;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 500;
  width: 40px;
  height: 40px;
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-md);
}


/* ============================================================================
   8. IA Y ALOJAMIENTOS
   ============================================================================ */

/* Caja de pegado de la conversación de WhatsApp. El borde punteado dice
   "esto es un borrador, todavía no es un dato del sistema". */
.ai-box {
  background: var(--surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
}
.ai-box textarea { resize: vertical; }
.ai-box button[disabled] {
  color: var(--text-pro);
  background: var(--bg-pro);
  border-color: var(--border-pro);
  cursor: default;
}
.ia-box-acciones {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}
.ia-box-acciones button { width: auto; }

.preview-imagenes-ia {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.preview-imagenes-ia:empty { margin-top: 0; }
.preview-imagen-ia { position: relative; width: 68px; height: 68px; }
.preview-imagen-ia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
}
.preview-imagen-ia button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 1;
  border-radius: var(--r-full);
  background: var(--bg-danger);
  color: var(--text-danger);
  border: 1px solid var(--text-danger);
  font-size: var(--fs-xs);
}

/* Campo que completó la IA. Se marca, y al tocarlo la marca se va: esa es
   la forma de aceptar/descartar la sugerencia. */
.campo-sugerido {
  background: var(--bg-accent) !important;
  border-color: var(--border-accent) !important;
}

/* El precio es la excepción deliberada: color propio (no el celeste de
   siempre) y aviso de texto fijo al lado, no solo al pasar el mouse.
   Un precio equivocado que pasa desapercibido cuesta plata. */
.campo-precio-ia {
  background: var(--bg-warning) !important;
  border: 2px solid var(--laterite) !important;
}
.badge-precio-ia {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--text-warning);
  font-weight: 600;
}

/* Avisos de la IA: atención para el staff. */
.aviso-ia {
  background: var(--bg-warning);
  color: var(--text-warning);
  border-radius: var(--r-md);
  border-left: 3px solid var(--laterite);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
  font-size: var(--fs-md);
}
.aviso-ia ul { margin: var(--s-1) 0 0; padding-left: var(--s-5); }
.aviso-ia li { margin-bottom: 2px; }

/* Borrador para el cliente: NO es una alerta, es texto listo para copiar.
   Por eso verde y no naranja. */
.borrador-ia {
  background: var(--bg-success);
  color: var(--text-success);
  border-radius: var(--r-md);
  border-left: 3px solid var(--selva);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
  font-size: var(--fs-md);
}
.borrador-ia p { margin: var(--s-1) 0 var(--s-2); white-space: pre-wrap; }
.borrador-ia button { width: auto; }

.bienvenida-operadores {
  background: var(--bg-accent);
  color: var(--text-accent);
  border-radius: var(--r-md);
  border-left: 3px solid var(--catarata);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  font-size: var(--fs-md);
}
.bienvenida-operadores ol { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.bienvenida-operadores li { margin-bottom: 2px; }

/* --- Panel "Para empezar" de la pantalla principal (backlog 60) --- */
/* Reusa el lenguaje de .bienvenida-operadores (fondo de acento + barra a
   la izquierda) para que se lea como "el sistema te esta hablando" y no
   como un formulario mas. Va arriba de la card de Nuevo viaje, sin
   taparla: el pedido era guiar, no bloquear. */
.onboarding {
  /* El tamano de la marca vive aca porque lo necesitan dos reglas: la marca
     misma y la sangria del CTA en pantalla angosta. Escrito a mano en los
     dos lados, se desalinean en silencio el dia que una cambie. */
  --onboarding-marca: 18px;
  background: var(--bg-accent);
  color: var(--text-accent);
  border-radius: var(--r-md);
  border-left: 3px solid var(--catarata);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.onboarding-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.onboarding-header .section-label { margin: 0; }
.onboarding-progreso {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
/* El boton de ocultar va al fondo a la derecha: presente, pero nunca
   compitiendo con los pasos, que son la accion real. Los botones de este
   sistema son width:100% por defecto (pensados para formularios), asi que
   hay que achicarlo a mano -- mismo criterio que .baja-toggle-row. */
.onboarding-header button {
  margin-left: auto;
  width: auto;
  margin-bottom: 0;
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-sm);
}

.onboarding-pasos {
  list-style: none;
  margin: var(--s-3) 0 var(--s-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.onboarding-paso {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.onboarding-paso-texto {
  /* flex:1 + min-width:0 es lo que le permite ENCOGERSE. Sin esto el bloque
     se dimensiona por su contenido y, con flex-wrap puesto abajo de 560px,
     en cuanto el texto no entraba al lado de la marca se iba al renglon
     siguiente y dejaba la marca sola arriba. El min-width:0 va junto con el
     flex:1 a proposito: un item flex no baja de su ancho minimo de
     contenido salvo que se le diga, asi que sin el una descripcion larga
     vuelve a empujar. */
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
}

/* El titulo y su etiqueta "opcional" van en la MISMA linea. Necesitan su
   propia fila flex porque el contenedor de arriba es una columna: ahi
   adentro, un <span> suelto se blockifica y se estira a todo el ancho (el
   tag pasaba a ser una caja vacia de 518px con la palabra a la izquierda,
   parecia un input deshabilitado). */
.onboarding-paso-titulo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* Clase propia en vez de un selector al <span>. El selector al elemento era
   fragil: le ganaba al color heredado del padre sin importar la
   especificidad, que fue justo el bug de la jerarquia dada vuelta. Con
   clases explicitas no hay herencia que pisar. */
.onboarding-paso-detalle { color: var(--text-secondary); }
/* Lo hecho se apaga en vez de desaparecer: ver lo ya conseguido es la mitad
   de para que sirve una lista asi. El detalle ya es --text-secondary
   siempre, asi que alcanza con bajar el titulo: quedan los dos iguales.
   Se apaga a --text-secondary y no a --text-muted porque muted sobre
   --bg-accent da 4.42:1 en oscuro, abajo del 4.5:1 de texto normal. El
   "esto ya esta" lo dicen el tilde, el circulo lleno y el peso, que no
   dependen del contraste. */
.onboarding-paso-hecho .onboarding-paso-texto { color: var(--text-secondary); }
.onboarding-paso-hecho .onboarding-paso-texto strong { font-weight: 500; }

.onboarding-marca {
  width: var(--onboarding-marca);
  height: var(--onboarding-marca);
  min-width: var(--onboarding-marca);
  margin-top: 2px;
  border-radius: var(--r-full);
  /* --text-muted y no --border-strong: sobre --bg-accent, border-strong da
     2.63:1 en oscuro, abajo del 3:1 que pide la seccion 4 para un borde de
     control. El anillo vacio es una de las senales que NO dependen del
     color, asi que tiene que leerse. Con --text-muted da 4.66:1 en claro y
     4.42:1 en oscuro. */
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
}
.onboarding-marca-hecha {
  background: var(--fill-primary);
  color: var(--on-primary);
  border-color: var(--fill-primary);
}
/* Mismo motivo que arriba: .hint es --text-muted, que sobre una tarjeta
   comun mide bien (seccion 4 del sistema de diseno) pero sobre --bg-accent
   se queda en 4.42:1 en oscuro. Los tokens se midieron contra las
   superficies, no contra el fondo de acento. */
.onboarding .hint { color: var(--text-secondary); }

.onboarding-cta {
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* En pantalla angosta el boton de cada paso baja debajo del texto: en el
   telefono, apretado al costado, quedaba en dos renglones y pisaba el
   detalle. */
/* Abajo de 560px el boton de cada paso baja debajo del texto. El sistema de
   diseno apila todo en ese ancho a proposito (seccion 7: "dos campos de
   90px cada uno no son compactos, son inutilizables"), y un CTA al costado
   deja la descripcion en una columna de 200px.
   La bajada se FUERZA, no se deja que ocurra sola: con el texto pudiendo
   encogerse hasta cero, el wrap natural no se dispara casi nunca y el
   comportamiento pasaria a depender del largo del texto de cada paso. Se le
   da al texto exactamente el ancho que sobra en el primer renglon (100%
   menos la marca y el gap), asi el CTA no tiene lugar y baja siempre. */
@media (max-width: 560px) {
  .onboarding-paso { flex-wrap: wrap; }
  .onboarding-paso-texto {
    flex-basis: calc(100% - var(--onboarding-marca) - var(--s-3));
  }
  /* Alineado con el texto, no con la marca: el ancho de la marca mas el gap
     de la fila. Calculado y no escrito a mano (era 30px) para que siga
     alineando si cambia cualquiera de los dos. */
  .onboarding-cta { margin-left: calc(var(--onboarding-marca) + var(--s-3)); }
}

/* --- Directorio compartido de alojamientos --- */
.alojamiento-resultados {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  margin-top: var(--s-1);
  overflow: hidden;
  background: var(--surface-2);
}
.alojamiento-resultado-item {
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--border);
}
.alojamiento-resultado-item:last-child { border-bottom: none; }
.alojamiento-resultado-item:hover { background: var(--surface-1); }
.alojamiento-resultado-item .barrio {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sin-verificar {
  font-size: var(--fs-2xs);
  color: var(--text-warning);
  margin-left: var(--s-2);
}
.alojamiento-agregar-link {
  display: block;
  width: auto;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--s-1) 0;
}
.alojamiento-agregar-link:hover { background: none; color: var(--text-primary); }
.alojamiento-agregar-link.link-danger { color: var(--text-danger); }

.alojamiento-acciones-mapa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--s-4);
}
.alojamiento-acciones-mapa .alojamiento-agregar-link {
  display: inline;
  width: auto;
  padding: 2px 0;
}
.alojamiento-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
}
.alojamiento-form-botones { display: flex; gap: var(--s-2); }
.alojamiento-form-botones button { flex: 1; }
.alojamiento-mapa {
  height: 200px;
  margin-top: var(--s-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}


/* ============================================================================
   9. TRAMOS
   ============================================================================
   Un viaje son varios tramos. La barra de color a la izquierda es lo que
   permite seguir uno con la vista cuando hay cinco apilados.
   ============================================================================ */

.tramo-block {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-accent);
  background: var(--surface-1);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}
.tramo-block.color-1 { border-left-color: var(--catarata); }
.tramo-block.color-2 { border-left-color: var(--oro); }
.tramo-block.color-3 { border-left-color: var(--selva); }
.tramo-block.color-4 { border-left-color: var(--laterite); }
.tramo-block.sortable-ghost { opacity: 0.4; }

.tramo-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  cursor: pointer;
}
.tramo-grip {
  cursor: grab;
  color: var(--text-muted);
  font-size: var(--fs-md);
  user-select: none;
  touch-action: none;
}
.tramo-grip:active { cursor: grabbing; }
.tramo-check { width: auto; margin: 0; flex: none; accent-color: var(--fill-primary); }
.tramo-resumen {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tramo-chevron {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  width: auto;
  flex: none;
  background: none;
  border: none;
  padding: 0;
}
.tramo-chevron:hover { background: none; color: var(--text-primary); }
.tramo-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  width: auto;
  padding: 0;
}
.tramo-remove:hover { background: none; color: var(--text-danger); }

.tramos-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.tramos-toolbar .field { flex: 1; min-width: 140px; margin-bottom: 0; }
.tramos-toolbar button { width: auto; white-space: nowrap; }

.tramos-acciones { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); flex-wrap: wrap; }
.tramos-acciones button { width: auto; }

.tramo-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-2) 0; }


/* ============================================================================
   10. FICHA DEL CHOFER
   ============================================================================
   La ficha es lo que el chofer abre en el celular, parado al lado del auto,
   posiblemente con sol de frente. Es la pantalla donde la legibilidad
   importa más que en ninguna otra del sistema.
   El formato de tarjeta de embarque no es decorativo: separa de un vistazo
   "el viaje" (arriba, grande) de "los detalles" (abajo).
   ============================================================================ */

.card.ticket { padding: 0 0 var(--s-5); overflow: hidden; }

.ticket-stub {
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.ticket-route {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.ticket-arrow {
  font-family: var(--font-mono);
  color: var(--catarata);
  font-size: var(--fs-md);
}
.ticket-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: var(--s-3);
}

/* La perforación de la tarjeta de embarque: los dos semicírculos se pintan
   del color del fondo de página para simular el troquelado. */
.ticket-perforation {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--border-strong);
  margin: 0 var(--s-5);
}
.ticket-perforation::before, .ticket-perforation::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--surface-0);
}
.ticket-perforation::before { left: calc(-1 * var(--s-5) - 10px); }
.ticket-perforation::after { right: calc(-1 * var(--s-5) - 10px); }

#tituloFicha { padding: var(--s-5) var(--s-5) 0; }
#contenidoFicha { padding: 0 var(--s-5); }

/* --- Timeline de tramos --- */
.timeline { padding-top: var(--s-1); }
.timeline-item { display: flex; gap: var(--s-3); align-items: stretch; }
.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 26px;
  flex: none;
}
.timeline-dot {
  width: 26px;
  height: 26px;
  min-height: 26px;
  border-radius: var(--r-full);
  background: var(--fill-primary);
  color: var(--on-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-dot-hecho { background: var(--text-muted); }
.timeline-line {
  flex: 1;
  width: 2px;
  min-height: 14px;
  background: var(--border-strong);
  margin: var(--s-1) 0;
}
.timeline-content {
  flex: 1;
  min-width: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
}

.tramo-detalle .tramo-header { margin-bottom: var(--s-3); }
.tramo-hecho {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  opacity: 0.65;
  font-size: var(--fs-md);
}
.tramo-hecho .tachado { flex: 1; }

.ruta-linea {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
  font-size: var(--fs-base);
}
.ruta-separador {
  margin-left: 7px;
  border-left: 1px dashed var(--border-strong);
  height: 12px;
}

.panel-edicion {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border-strong);
}
.panel-edicion .field { margin-bottom: var(--s-2); }
.panel-edicion button { margin-top: var(--s-2); }

/* --- Chip de confirmación desplegable --- */
.confirm-control { position: relative; }
.confirm-control > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
}
.confirm-control > summary::-webkit-details-marker { display: none; }
.confirm-control > summary .chev { font-size: 9px; opacity: 0.75; }
.confirm-control.state-success > summary { background: var(--bg-success); color: var(--text-success); }
.confirm-control.state-warning > summary { background: var(--bg-warning); color: var(--text-warning); }
.confirm-control.state-danger > summary { background: var(--bg-danger); color: var(--text-danger); }
/* state-accent: lo usa disponibilidad.html y no tenía estilo definido. */
.confirm-control.state-accent > summary { background: var(--bg-accent); color: var(--text-accent); }

.confirm-menu {
  position: absolute;
  left: 0;
  top: 38px;
  z-index: 6;
  min-width: 220px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.confirm-menu .hint {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  padding: var(--s-2) var(--s-3) var(--s-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.confirm-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  font-weight: 500;
  font-size: var(--fs-md);
  padding: var(--s-2) var(--s-3);
}
.confirm-item .bullet {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--border-strong);
  flex: none;
}
.confirm-item.active { font-weight: 700; background: var(--surface-1); }
.confirm-item.active .bullet { background: var(--selva); }

/* Formulario de oferta dentro del desplegable (disponibilidad.html).
   .confirm-menu no tiene padding propio, así que acá se lo damos. */
.oferta-form { padding: var(--s-3); }
.oferta-form .field { margin-bottom: var(--s-2); }
.oferta-form .of-estado { font-size: var(--fs-xs); margin: var(--s-2) 0 0; min-height: 1em; }

/* Aviso por WhatsApp: aparece dentro del formulario de oferta recién
   después de ofrecer el viaje (web/js/disponibilidad.js). Se separa con un
   borde arriba porque es un paso distinto del formulario -- el viaje ya
   quedó asignado, esto es el atajo para avisarle al chofer. */
.aviso-whatsapp {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.aviso-whatsapp .hint {
  padding: 0;
  margin: 0 0 var(--s-2);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.aviso-whatsapp .btn-primary {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-bottom: var(--s-2);
}
.aviso-whatsapp button { width: 100%; margin-bottom: var(--s-2); }
.aviso-whatsapp button:last-child { margin-bottom: 0; }

.accion-row { display: flex; gap: var(--s-2); align-items: center; margin: 0 0 var(--s-4); }
.accion-row .btn-primary { flex: 1; width: auto; margin-bottom: 0; }

/* Menú "⋯" de acciones secundarias. */
.kebab { position: relative; }
.kebab > summary {
  list-style: none;
  width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-lg);
  color: var(--text-secondary);
}
.kebab > summary::-webkit-details-marker { display: none; }
.kebab-menu {
  position: absolute;
  right: 0;
  top: 42px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  z-index: 5;
  overflow: hidden;
}
.kebab-menu button {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  padding: var(--s-3);
}
.kebab-menu button:last-child { border-bottom: none; }

/* Secciones plegables (pagos, detalle). */
.disclosure {
  border-top: 1px dashed var(--border-strong);
  padding-top: var(--s-3);
  margin: var(--s-1) 0 var(--s-4);
}
.disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  gap: var(--s-2);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "▾";
  color: var(--text-muted);
  font-size: var(--fs-xs);
  transition: transform var(--t-base);
  margin-left: auto;
}
.disclosure[open] > summary::after { transform: rotate(180deg); }
.disclosure-body { padding-top: var(--s-3); }

.registrar { margin-top: var(--s-3); }
.registrar > summary {
  list-style: none;
  cursor: pointer;
  color: var(--catarata);
  font-weight: 600;
  font-size: var(--fs-sm);
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
}
.registrar > summary::-webkit-details-marker { display: none; }
.registrar > summary::before { content: "+"; font-weight: 700; }
.registrar-body { padding-top: var(--s-3); }

/* Saldo: el dato que el chofer y el dueño buscan primero. */
.monto-box {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.monto-box p { margin: 0; }
.monto-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 2px !important;
}
.monto-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 600;
}


/* ============================================================================
   11. NAVEGADOR DE VIAJES
   ============================================================================ */

.viajes-filtros {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: var(--s-3);
  align-items: end;
  margin: var(--s-5) 0;
}
@media (max-width: 860px) { .viajes-filtros { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .viajes-filtros { grid-template-columns: 1fr; } }

#btnExportar {
  background: var(--bg-accent);
  color: var(--text-accent);
  border-color: var(--border-accent);
  white-space: nowrap;
}
#btnExportar:hover { background: var(--bg-accent); border-color: var(--text-accent); }

.viaje-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  margin-bottom: var(--s-2);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.viaje-row:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  border-left-color: var(--catarata);
}
.viaje-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.viaje-row-cliente {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
}
.viaje-row-ruta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viaje-row-meta { flex: none; }
.viaje-row-actions { display: flex; gap: var(--s-2); flex: none; }
.viaje-row-actions button { width: auto; padding: var(--s-1) var(--s-3); font-size: var(--fs-sm); }

#estadoViajes { text-align: center; margin: var(--s-6) 0; color: var(--text-secondary); }

/* --- Campanita de avisos --- */
.titulo-con-campanita {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.campanita {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-full);
  font-size: var(--fs-lg);
  flex: none;
  position: relative;
  background: var(--surface-1);
}
.campanita.campanita-roja { background: var(--bg-danger); border-color: var(--text-danger); }
.campanita.campanita-amarilla { background: var(--bg-warning); border-color: var(--text-warning); }
.campanita.campanita-accent { background: var(--bg-accent); border-color: var(--text-accent); }
.campanita.campanita-pro { background: var(--bg-pro); border-color: var(--text-pro); }
.campanita-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--laterite);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  border-radius: var(--r-full);
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.campanita-panel {
  position: absolute;
  right: var(--s-4);
  margin-top: var(--s-2);
  width: min(360px, calc(100vw - 32px));
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-3);
  z-index: 400;
}
.campanita-item {
  padding: var(--s-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.campanita-item:last-child { border-bottom: none; }
.campanita-item .cliente { font-weight: 600; }
.campanita-item .motivo { color: var(--text-secondary); display: block; margin-top: 2px; }

/* --- Toggle lista / calendario --- */
.vista-toggle {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  flex-wrap: wrap;
}
.vista-toggle button { width: auto; padding: var(--s-2) var(--s-4); font-size: var(--fs-md); }
.vista-toggle button.vista-toggle-activo,
.tabs-login button.vista-toggle-activo {
  background: var(--fill-primary);
  color: var(--on-primary);
  border-color: var(--fill-primary);
  font-weight: 600;
}

/* --- Vista calendario --- */
.calendario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--s-5) 0 var(--s-3);
}
.calendario-mes-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  text-transform: capitalize;
}
.calendario-nav { width: auto; padding: var(--s-1) var(--s-3); }
.calendario-grilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-2);
}
.calendario-diasemana {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: var(--s-1);
}
/* Alto fijo y contenido en escritorio: con aspect-ratio:1 dentro de una
   página de 1120px cada celda quedaba de ~150px y un mes no entraba en
   pantalla. En celular vuelve a ser cuadrada, que ahí sí es lo natural. */
.calendario-dia {
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  cursor: pointer;
  font-family: var(--font-mono);
  color: var(--text-primary);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.calendario-dia:hover { background: var(--surface-3); border-color: var(--border-strong); }
.calendario-dia.vacio { visibility: hidden; cursor: default; }
.calendario-dia.sin-viajes { color: var(--text-muted); background: var(--surface-1); }
/* Hoy: anillo completo, no solo un borde de otro color. Antes se perdía. */
.calendario-dia.hoy {
  border-color: var(--catarata);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--catarata) 30%, transparent);
}
@media (max-width: 700px) {
  .calendario-dia { aspect-ratio: 1; min-height: 0; }
  .calendario-grilla { gap: var(--s-1); }
}

.calendario-dia-num { font-size: var(--fs-md); font-weight: 500; }
.calendario-dia-count {
  font-size: var(--fs-2xs);
  font-weight: 700;
  background: var(--bg-accent);
  color: var(--text-accent);
  border-radius: var(--r-xs);
  padding: 1px var(--s-2);
}


/* ============================================================================
   12. CONSULTAS Y MODAL
   ============================================================================ */

/* OJO (bug real encontrado en la primera prueba): no reusar .viaje-row-ruta
   acá. Esa clase tiene white-space:nowrap porque está pensada para una ruta
   corta de una línea; el texto de una consulta puede ser largo y necesita
   cortar. */
.consulta-card {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
  font-family: inherit;
}
.consulta-card:hover { background: var(--surface-3); border-color: var(--border-strong); }
.consulta-card + .consulta-card { margin-top: var(--s-2); }
.consulta-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.consulta-card-cliente {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
}
.consulta-card-resumen {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  white-space: normal;
  overflow-wrap: break-word;
}
.consulta-card-badges { display: flex; gap: var(--s-2); flex-wrap: wrap; flex: none; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 10, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  z-index: 100;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-cerrar {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: var(--surface-1);
  border-radius: var(--r-full);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}
.modal-cerrar:hover { background: var(--border); }

.consulta-detalle-servicios {
  font-size: var(--fs-md);
  overflow-wrap: break-word;
  margin: 0 0 var(--s-3);
}
.consulta-detalle-servicios li { margin-bottom: 3px; }
.consulta-texto-original {
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin-top: var(--s-2);
}


/* ============================================================================
   13. TABLAS
   ============================================================================ */

.tabla-detalle {
  width: 100%;
  font-size: var(--fs-md);
  margin-bottom: var(--s-3);
  border-collapse: collapse;
}
.tabla-detalle td { padding: var(--s-1) 0; }
.tabla-detalle td:first-child { color: var(--text-secondary); }
.tabla-detalle td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Una tabla ancha nunca debe estirar la página: scrollea dentro suyo. */
.tabla-importar {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.tabla-importar th {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 600;
  padding: var(--s-2);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--surface-2);
}
.tabla-importar td {
  padding: var(--s-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.tabla-importar tbody tr:hover td { background: var(--surface-1); }
.tabla-importar .fila-import-error td {
  color: var(--text-danger);
  background: var(--bg-danger);
}


/* ============================================================================
   14. PANEL DE TAREAS (temporal — ver tareas-panel.js)
   ============================================================================ */

.tareas-icono {
  position: fixed;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 500;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-full);
  background: var(--fill-primary);
  color: var(--on-primary);
  border-color: var(--fill-primary);
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-md);
}
.tareas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 10, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-12) var(--s-4);
  z-index: 600;
  overflow-y: auto;
}
.tareas-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  max-width: 600px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.tareas-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.tareas-panel-header h1, .tareas-panel-header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
}
.tareas-panel-header button { width: auto; padding: var(--s-1) var(--s-3); font-size: var(--fs-sm); }
.tareas-lista { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.tarea-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}
.tarea-emoji { font-size: var(--fs-lg); line-height: 1.4; }
.tarea-texto { flex: 1; min-width: 0; }
.tarea-titulo { font-weight: 600; font-size: var(--fs-md); margin: 0 0 2px; }
.tarea-detalle { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }
.tarea-estado-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex: none;
}


/* ============================================================================
   15. ACCESO (login / registro)
   ============================================================================
   Son las dos únicas pantallas que ve alguien que todavía no entró: una
   agencia evaluando si contrata el sistema. Por eso son las únicas con
   tratamiento de marca.

   ARREGLO DEL REDISEÑO: antes el panel de marca era #12281f fijo, y en modo
   oscuro quedaba casi igual al fondo de la página — los dos paneles se
   fundían y la idea entera del layout se perdía. Ahora el panel usa un
   degradé de marca propio que se despega en los dos temas.
   ============================================================================ */

.auth-shell {
  max-width: var(--w-auth);
  margin: var(--s-12) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 860px) {
  .auth-shell {
    grid-template-columns: 1fr;
    margin: var(--s-4) auto;
    max-width: 520px;
  }
}

/* Fijo a propósito, NO sigue el toggle de tema: es una franja de marca y
   tiene que verse igual siempre. El degradé va de selva a un verde más
   profundo para que el panel tenga profundidad propia. */
.auth-hero {
  display: flex;
  align-items: center;
  padding: var(--s-12) var(--s-10);
  background:
    radial-gradient(circle at 12% 8%, rgba(13, 107, 120, 0.5), transparent 55%),
    linear-gradient(155deg, #1a4d34, #0d2b1d 70%);
  color: #f2f7f4;
}
@media (max-width: 860px) { .auth-hero { padding: var(--s-8) var(--s-6); } }

.auth-hero-content { max-width: 420px; }
.auth-hero .eyebrow { color: #6fd4de; }
.auth-hero .eyebrow::before { background: #e88349; }

.auth-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #f2f7f4;
  margin: var(--s-2) 0 0;
}
@media (max-width: 860px) { .auth-hero-title { font-size: var(--fs-xl); } }

.auth-hero-timeline-card {
  margin-top: var(--s-8);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
@media (max-width: 860px) { .auth-hero-timeline-card { display: none; } }

.auth-hero-timeline-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 247, 244, 0.55);
  margin: 0 0 var(--s-4);
}

.auth-hero-stop {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  position: relative;
  padding-bottom: var(--s-6);
  animation: rise-in 0.5s ease-out both;
}
.auth-hero-stop:last-child { padding-bottom: 0; }
.auth-hero-stop:nth-child(2) { animation-delay: 0.12s; }
.auth-hero-stop:nth-child(3) { animation-delay: 0.24s; }
.auth-hero-stop::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: -2px;
  width: 0;
  border-left: 2px dashed rgba(255, 255, 255, 0.22);
}
.auth-hero-stop:last-child::before { display: none; }
.auth-hero-stop strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
  display: block;
  color: #f2f7f4;
}
.auth-hero-stop span { font-size: var(--fs-md); color: rgba(242, 247, 244, 0.72); }

.auth-hero-dot {
  width: 11px;
  height: 11px;
  border-radius: var(--r-full);
  flex: none;
  margin-top: var(--s-1);
  box-shadow: 0 0 0 4px rgba(242, 247, 244, 0.09);
}
.auth-hero-dot.dot-1 { background: #45bccb; }
.auth-hero-dot.dot-2 { background: #d6b055; }
.auth-hero-dot.dot-3 { background: #e88349; }

.auth-hero-caption {
  margin-top: var(--s-8);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 247, 244, 0.45);
}
@media (max-width: 860px) { .auth-hero-caption { display: none; } }

.auth-hero .pasos-registro {
  margin-top: var(--s-8);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.auth-hero .paso-registro { color: rgba(242, 247, 244, 0.8); }
.auth-hero .paso-registro-num {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #93dbe0;
}

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-10);
  background: var(--surface-2);
}
@media (max-width: 860px) { .auth-form-panel { padding: var(--s-6) var(--s-6) var(--s-8); } }
/* (el resto del aspecto de .card-acceso dentro del shell se define junto al
   componente, más abajo) */

/* .card-acceso se usa de dos formas distintas y necesita verse distinto en
   cada una:

   a) SUELTA, sobre una tarjeta propia (aceptar-invitacion.html): ahí la
      franja de degradé corona el borde superior de la tarjeta y funciona,
      porque tiene un borde donde apoyarse.
   b) DENTRO del panel del formulario (login/registro): la tarjeta no es
      tarjeta, es medio shell. Antes la franja quedaba flotando en el aire
      arriba del texto y se leía como un error de render. Y desde que el
      panel de marca de al lado carga con la identidad, la franja acá
      sobra: se saca. */
.card-acceso {
  position: relative;
  overflow: hidden;
  padding-top: var(--s-5);
  box-shadow: none;
  border: none;
}
.card-acceso::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--catarata), var(--selva) 55%, var(--laterite));
}

.auth-form-panel .card-acceso {
  width: 100%;
  max-width: 400px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.auth-form-panel .card-acceso::before { display: none; }

.tabs-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin: var(--s-1) 0 var(--s-5);
}
.tabs-login button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3);
  font-size: var(--fs-md);
  font-weight: 500;
}
.tabs-login button i { font-size: var(--fs-lg); }

.auth-switch {
  text-align: center;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin: var(--s-4) 0 0;
}
.auth-switch a { color: var(--catarata); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* Ingresar / registrarse con Google (backlog 83). Es el botón neutro de
   siempre con el logo: las pautas de Google piden fondo claro u oscuro
   liso, no el color de la marca propia. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-weight: 600;
}
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* "o con tu mail": separa el botón de Google del formulario de siempre. */
.auth-separador {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.auth-separador::before,
.auth-separador::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* Los 3 pasos de registro.html: esto SÍ es una secuencia real, por eso va
   numerado (a diferencia de una lista decorativa). */
.pasos-registro {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-1);
  border-radius: var(--r-md);
}
.paso-registro {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.paso-registro-num {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--catarata);
}


/* ============================================================================
   16. UTILIDADES, ESTADOS Y MOVIMIENTO
   ============================================================================ */

.hidden { display: none !important; }

/* Renglones de estado de guardado, uno por pantalla. Comparten forma. */
#estado-guardado, #estadoLogin, #estadoChofer, #estadoVehiculo,
#estadoTarifa, #estadoImportar {
  font-size: var(--fs-md);
  text-align: center;
  margin-top: var(--s-3);
  min-height: 1.4em;
}
#estado-guardado.ok, #estadoLogin.ok, #estadoChofer.ok, #estadoVehiculo.ok,
#estadoTarifa.ok, #estadoImportar.ok { color: var(--text-success); }
#estado-guardado.error, #estadoLogin.error, #estadoChofer.error, #estadoVehiculo.error,
#estadoTarifa.error, #estadoImportar.error { color: var(--text-danger); }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.tramo-detalle, .tramo-hecho, .tramo-block, .viaje-row, .calendario-dia, .campo-revelado {
  animation: rise-in 0.22s ease-out;
}

/* Respeta a quien pidió menos movimiento en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================================
   17. IMPRESIÓN
   ============================================================================
   El comprobante y el itinerario son documentos que el cliente imprime o
   guarda como PDF. Antes solo comprobante.html tenía unas reglas sueltas en
   un <style> propio; itinerario.html y la ficha no tenían ninguna, así que
   salían con la barra de navegación, los botones y el fondo de color.
   .no-imprimir ya se usaba en el HTML sin estar definida en ningún lado.
   ============================================================================ */

@media print {
  /* Forzar tema claro: nadie quiere imprimir un fondo verde oscuro. */
  :root { color-scheme: light only; }

  body {
    background: #ffffff;
    color: #000000;
    padding: 0;
    font-size: 11pt;
  }

  .no-imprimir,
  .app-nav,
  .tema-toggle,
  .tema-toggle-flotante,
  .tareas-icono,
  .campanita,
  .campanita-panel,
  .modal-overlay,
  .kebab,
  .accion-row,
  .panel-edicion,
  .danger-link,
  .vista-toggle { display: none !important; }

  .page, .page-wide { max-width: 100%; }

  .card, .card.ticket {
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
  }

  /* Que no se parta un tramo por la mitad entre dos hojas. */
  .timeline-item, .tramo-block, .tramo-detalle, .monto-box, .viaje-row {
    break-inside: avoid;
  }

  .ticket-perforation::before, .ticket-perforation::after { display: none; }

  /* Los desplegables se imprimen abiertos: en papel no se puede hacer clic. */
  details > summary { display: none; }
  details .disclosure-body, details .registrar-body { display: block !important; }

  a { text-decoration: none; color: inherit; }
}


/* ============================================================================
   VIAJES PARECIDOS (backlog 79) — aviso en "Nuevo viaje" y modal
   "¿Es el mismo viaje?". Lo arma web/js/app.js.
   ============================================================================ */
.aviso-parecido { color: var(--text-warning); }
.link-boton {
  display: inline;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text-accent);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}
.link-boton:hover { background: none; }
.parecido-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin: 0 0 var(--s-3);
  background: var(--surface-1);
}
.parecido-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  flex-wrap: wrap;
}
.parecido-tabla-scroll { overflow-x: auto; }
.parecido-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.parecido-tabla th,
.parecido-tabla td {
  text-align: left;
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.parecido-tabla thead th { color: var(--text-muted); font-weight: 500; }
.parecido-tabla tbody th { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.coincide { text-align: center; font-weight: 700; width: 1.5rem; }
.coincide-igual { color: var(--text-success); }
.coincide-parecido { color: var(--text-warning); }
.coincide-distinto { color: var(--text-danger); }
.coincide-sin_dato { color: var(--text-muted); }
.parecido-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}


/* ============================================================================
   18. PRESENTACIÓN (web/index.html, 2026-10-31)
   ============================================================================
   La página pública antes del login. Misma franja de marca que el login
   (.auth-hero: degradé fijo, no sigue el tema) y el resto en superficies
   del sistema, así el salto a Ingresar no cambia de mundo. Todo con
   prefijo lp- para no pisar el contrato de clases del JS.
   Celular primero: una columna, 16px de margen, nada se desborda.
   ============================================================================ */

.lp-body { margin: 0; background: var(--surface-0); }

.lp-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.lp-brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--text-primary); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); }
.lp-brand-mark { width: 28px; height: 28px; border-radius: var(--r-sm); background: linear-gradient(155deg, #2f7d53, #0d2b1d); display: grid; place-items: center; color: #93dbe0; font-size: 16px; }
.lp-top-actions { display: flex; gap: var(--s-2); }
.lp-top-actions .btn-primary, .lp-top-actions .btn-outline { padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); }
@media (max-width: 520px) { .lp-top-actions .lp-oculta-chico { display: none; } }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-primary);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-outline:hover { background: var(--surface-3); border-color: var(--text-secondary); }

.lp-hero {
  padding: var(--s-12) var(--s-4);
  background:
    radial-gradient(circle at 12% 8%, rgba(13, 107, 120, 0.5), transparent 55%),
    radial-gradient(circle at 90% 90%, rgba(232, 131, 73, 0.18), transparent 45%),
    linear-gradient(155deg, #1a4d34, #0d2b1d 70%);
  color: #f2f7f4;
}
.lp-hero-inner { max-width: var(--w-wide); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-10); align-items: center; }
@media (max-width: 860px) { .lp-hero { padding: var(--s-8) var(--s-4); } .lp-hero-inner { grid-template-columns: 1fr; gap: var(--s-6); } }
.lp-hero .eyebrow { color: #6fd4de; }
.lp-hero .eyebrow::before { background: #e88349; }
.lp-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; margin: var(--s-2) 0 var(--s-4); color: #f2f7f4; }
.lp-hero p { font-size: var(--fs-lg); line-height: 1.55; color: rgba(242, 247, 244, 0.8); margin: 0 0 var(--s-6); max-width: 560px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.lp-hero .btn-outline { border-color: rgba(242, 247, 244, 0.45); color: #f2f7f4; }
.lp-hero .btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #f2f7f4; }
.lp-hero .auth-hero-timeline-card { margin-top: 0; }
@media (max-width: 860px) { .lp-hero .auth-hero-timeline-card { display: block; } }

.lp-section { max-width: var(--w-wide); margin: 0 auto; padding: var(--s-12) var(--s-4); }
@media (max-width: 860px) { .lp-section { padding: var(--s-8) var(--s-4); } }
.lp-section + .lp-section { border-top: 1px solid var(--border); }
.lp-section h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); letter-spacing: -0.015em; margin: var(--s-2) 0 var(--s-3); color: var(--text-primary); }
.lp-section > p, .lp-lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--text-secondary); max-width: 720px; margin: 0; }

.lp-problema { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
@media (max-width: 860px) { .lp-problema { grid-template-columns: 1fr; } }
.lp-problema-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); }
.lp-problema-card .lp-chat { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-secondary); display: grid; gap: var(--s-2); }
.lp-problema-card .lp-chat span { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface-1); width: fit-content; max-width: 100%; }
.lp-problema-card .lp-chat span.lp-chat-ellos { margin-left: auto; background: var(--bg-accent); color: var(--text-accent); }
.lp-problema-card .lp-chat em { font-style: normal; color: var(--laterite); font-weight: 600; }

.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
@media (max-width: 960px) { .lp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lp-grid { grid-template-columns: 1fr; } }
.lp-feature { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); transition: transform .15s, box-shadow .15s; }
.lp-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lp-feature i { font-size: 26px; color: var(--catarata); }
.lp-feature h3 { margin: var(--s-1) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); color: var(--text-primary); }
.lp-feature p { margin: 0; color: var(--text-secondary); line-height: 1.5; font-size: var(--fs-base); }

.lp-filosofia { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
@media (max-width: 700px) { .lp-filosofia { grid-template-columns: 1fr; } }
.lp-principio { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.lp-principio .auth-hero-dot { margin-top: 7px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--border) 60%, transparent); }
.lp-principio strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--text-primary); margin-bottom: var(--s-1); }
.lp-principio span { color: var(--text-secondary); line-height: 1.5; }

.lp-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); align-items: stretch; }
@media (max-width: 860px) { .lp-planes { grid-template-columns: 1fr; max-width: 460px; } }
.lp-plan { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); position: relative; }
.lp-plan.destacado { border-color: var(--border-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-accent) 18%, transparent); }
.lp-plan .lp-plan-tag { position: absolute; top: -11px; left: var(--s-5); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; padding: 2px var(--s-2); border-radius: var(--r-full); background: var(--catarata); color: #fff; }
.lp-plan h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-primary); }
.lp-plan .lp-precio { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); line-height: 1.1; }
.lp-plan .lp-precio small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-top: var(--s-1); letter-spacing: .02em; }
.lp-plan .lp-mult { font-weight: 600; color: var(--text-accent); background: var(--bg-accent); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); width: fit-content; }
.lp-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); color: var(--text-secondary); font-size: var(--fs-base); }
.lp-plan ul li { display: flex; gap: var(--s-2); align-items: flex-start; }
.lp-plan ul li::before { content: "\2713"; color: var(--selva); font-weight: 700; flex: none; }
.lp-plan .btn-primary, .lp-plan .btn-outline { margin-top: auto; width: 100%; box-sizing: border-box; }

.lp-cierre { background: linear-gradient(155deg, #1a4d34, #0d2b1d 70%); color: #f2f7f4; border-radius: var(--r-xl); padding: var(--s-10) var(--s-6); text-align: center; display: grid; gap: var(--s-4); justify-items: center; }
.lp-cierre h2 { color: #f2f7f4; margin: 0; }
.lp-cierre p { color: rgba(242, 247, 244, 0.8); margin: 0; max-width: 560px; }
.lp-cierre .btn-outline { border-color: rgba(242, 247, 244, 0.45); color: #f2f7f4; }
.lp-contacto { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; font-size: var(--fs-sm); }
.lp-contacto a { color: #93dbe0; text-decoration: none; display: inline-flex; gap: var(--s-1); align-items: center; }
.lp-contacto a:hover { text-decoration: underline; }

.lp-footer { max-width: var(--w-wide); margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-10); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; color: var(--text-muted); font-size: var(--fs-sm); }
.lp-footer a { color: var(--text-secondary); }

/* --- Pulido de "Mi plan" y "Empresas (admin)" (cobro, etapa A) --- */
.estado-suscripcion { margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--border); display: grid; gap: var(--s-2); }
.estado-suscripcion p { margin: 0; }
.estado-suscripcion .principal { font-size: var(--fs-md); color: var(--text-primary); }
.estado-suscripcion.gracia { background: var(--bg-warning); border-color: var(--text-warning); }
.estado-suscripcion.gracia .principal { color: var(--text-warning); }
.plan-card { display: flex; flex-direction: column; gap: var(--s-2); background: var(--surface-2); box-shadow: var(--shadow-sm); }
.plan-card .plan-acciones { margin-top: auto; padding-top: var(--s-3); display: grid; gap: var(--s-2); }
.plan-card .plan-acciones .btn-primary, .plan-card .plan-acciones .btn-outline { width: 100%; box-sizing: border-box; text-align: center; }
.plan-card .plan-acciones .hint { margin: 0; }
.admin-sub { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.form-pago { margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--border); display: grid; gap: var(--s-3); }
.form-pago .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 600px) { .form-pago .row-2 { grid-template-columns: 1fr; } }
.form-pago label { display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--text-secondary); }
.form-pago .ok { color: var(--text-success); font-weight: 600; }

/* Links con aspecto de botón en la presentación y en "Mi plan": .btn-primary
   solo pinta colores (la forma la da el selector de <button>), así que un <a>
   necesita la forma acá. El toggle de tema no va en la presentación: sigue
   el tema del sistema. */
.lp-body a.btn-primary, .plan-acciones a.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); margin: 0;
  border: 1px solid var(--fill-primary); border-radius: var(--r-md);
  text-decoration: none; font-weight: 600; line-height: 1.2;
}
.lp-body a.btn-primary:hover { background: var(--fill-primary-hover); border-color: var(--fill-primary-hover); }
/* El botón de tema va adentro de la barra de arriba (presentacion.js lo
   agrega); el flotante que crea tema.js en páginas sin nav se oculta acá
   para no tener dos. */
.lp-body .tema-toggle-flotante { display: none; }
.lp-top .tema-toggle { margin-right: var(--s-1); }

.lp-section > p.hint { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }

/* Avisos honestos (2026-10-31): franja bajo la barra de la presentación y bloque en el registro. */
.lp-aviso { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: center; padding: var(--s-2) var(--s-4); background: var(--bg-warning); color: var(--text-warning); font-size: var(--fs-sm); line-height: 1.4; border-bottom: 1px solid color-mix(in srgb, var(--text-warning) 35%, transparent); }
.lp-aviso span { display: inline-flex; gap: var(--s-1); }
@media (max-width: 700px) { .lp-aviso { flex-direction: column; gap: var(--s-1); } }
.aviso-honesto { margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-warning); color: var(--text-warning); font-size: var(--fs-sm); display: grid; gap: var(--s-1); }
.aviso-honesto p { margin: 0; line-height: 1.45; }

/* Olvidé mi contraseña (2026-11-01): link chico bajo el campo, y "Volver a ingresar". */
.auth-olvide { margin: var(--s-1) 0 0; text-align: right; font-size: var(--fs-sm); }
.auth-olvide a { color: var(--catarata); font-weight: 600; text-decoration: none; }
.auth-olvide a:hover { text-decoration: underline; }
#formRecuperar .hint { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; }

/* "Olvidé mi contraseña": qué pasó después de enviar el mail (2026-11-01). */
.aviso-enviado { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-success); color: var(--text-success); font-size: var(--fs-sm); display: grid; gap: var(--s-1); text-align: left; }
.aviso-enviado p { margin: 0; line-height: 1.45; }