/* ==========================================================================
   Rento · css/base.css
   Sistema visual "blanco y azul" con patrones de interfaz estilo marketplace
   (ver dev/REDISENO.md y SPEC §7–§8). Tema claro y oscuro (dev/VERSION-FINAL.md §1):
   claro en :root; oscuro con el sistema (prefers-color-scheme, salvo data-theme="light")
   o forzado con <html data-theme="dark"> (App.tema). Los componentes usan SÓLO tokens.
   Tokens, reset, tipografía, layout, componentes compartidos y shell
   (banda de prueba, cabecera, menús, buscador, pie).

   Los tokens del concepto anterior ("catálogo de ruta": --acento, --asfalto,
   --celeste, --superficie-2…) quedan como ALIAS de la paleta nueva para que
   las páginas sigan funcionando hasta que se rediseñen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens (SPEC §7) — claro en :root; el oscuro los redefine más abajo (1b)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Paleta (dev/REDISENO.md) */
  --fondo: #ffffff;
  --fondo-2: #f7f7f7;
  --superficie: #ffffff;
  --borde: #dddddd;
  --borde-suave: #ebebeb;
  --tinta: #222222;
  --tinta-2: #6a6a6a;
  --tinta-3: #717171; /* 4,8:1 sobre blanco (AA) */
  --azul: #1b5ef2;
  --azul-hover: #1449c9;
  --logo-tinta: var(--tinta);
  --logo-q: var(--azul);
  --logo-estela: #74c7f5;
  --azul-suave: #edf3ff;
  --azul-gradiente: linear-gradient(90deg, #2f7bff 0%, #1b5ef2 50%, #1448d6 100%);
  --exito: #008a05;
  --alerta: #9e5d00;           /* 5,2:1 sobre blanco; 4,8:1 sobre --alerta-chip (AA) */
  --error: #c13515;
  --sombra-tarjeta: 0 6px 16px rgba(0, 0, 0, 0.12);
  --sombra-buscador: 0 3px 12px rgba(0, 0, 0, 0.1);
  --sombra-buscador-hover: 0 4px 16px rgba(0, 0, 0, 0.14);
  --radio-s: 8px;
  --radio-m: 12px;
  --radio-l: 16px;
  --radio-pill: 999px;

  /* Derivados */
  --borde-control: #b0b0b0;
  --tinta-inversa: #ffffff;      /* texto sobre fondos en --tinta (.btn-oscuro, contadores) */
  --tinta-fuerte: #000000;       /* hover de lo que está en --tinta */
  --sobre-azul: #ffffff;         /* texto sobre --azul-relleno / --azul-gradiente */
  --azul-relleno: #1b5ef2;       /* fondo azul con texto blanco (≥ 4,5:1 en los dos temas) */
  --azul-gradiente-hover: linear-gradient(90deg, #276ff0 0%, #1554de 50%, #123fbf 100%);
  --error-relleno: #c13515;      /* fondo de .btn-peligro (texto blanco) */
  --error-relleno-hover: #a62c10;
  --exito-texto: #006e04;        /* verde sobre --exito-suave (5,6:1) */
  --exito-suave: #eaf6ea;
  --exito-borde: #cfe9cf;
  --alerta-suave: #fff8ec;
  --alerta-chip: #fdf3e2;
  --alerta-borde: #f5e0bd;
  --error-suave: #fcece8;
  --control-invalido: #fff8f6;
  --skeleton-1: #f2f2f2;
  --skeleton-2: #e6e6e6;
  --superficie-elevada: #ffffff; /* segmento activo del buscador, menús */
  --buscador-gris: #ebebeb;      /* píldora con un segmento activo */
  --badge-foto: rgb(255 255 255 / 0.95);
  --avatar-anonimo: #717171;
  --capa: rgba(0, 0, 0, 0.45);
  --velo: rgba(0, 0, 0, 0.25);
  --toast-fondo: #222222;
  --toast-tinta: #ffffff;
  --toast-borde: transparent;
  --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --sombra-chica: 0 2px 6px rgb(0 0 0 / 0.14);
  --sombra-segmento: 0 6px 20px rgba(0, 0, 0, 0.2);
  --sombra-menu: 0 2px 16px rgba(0, 0, 0, 0.12);
  --sombra-modal: 0 8px 28px rgba(0, 0, 0, 0.28);
  --sombra-toast: 0 6px 20px rgba(0, 0, 0, 0.25);
  --foco: 0 0 0 2px var(--fondo), 0 0 0 4px var(--tinta);
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23222222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Mapas estilizados (App.ilustracion.mapa): mismos valores que trae el SVG */
  --mapa-tierra: #f3f4f1;
  --mapa-agua: #b9d8f7;
  --mapa-agua-texto: #3b73b9;
  --mapa-parque: #d3ebcc;
  --mapa-parque-texto: #3f7a45;
  --mapa-monte: #e3ead8;
  --mapa-calle: #ffffff;
  --mapa-avenida: #ffffff;
  --mapa-avenida-borde: #d9dde3;
  --mapa-autopista: #c9d6ea;
  --mapa-texto: #3c4043;
  --mapa-halo: #ffffff;
  --mapa-aeropuerto: #1b5ef2;
  --mapa-pista: #cfd4da;
  --mascara-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mascara-cruz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Tipografía y medidas */
  --fuente: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-placa: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-18: 18px; --t-22: 22px; --t-26: 26px; --t-32: 32px; --t-40: 40px;
  --gutter: clamp(16px, 4vw, 40px);
  --ancho-max: 1280px;
  --cabecera-alto: 80px;
  --aire-seccion: clamp(32px, 5vw, 48px);   /* aire arriba y abajo de cada divisor de sección */

  /* ---- Alias del sistema anterior (no usar en código nuevo) ---- */
  --superficie-2: var(--fondo-2);
  --borde-fuerte: var(--borde-control);
  --acento: var(--azul);
  --acento-tinta: #ffffff;
  --acento-fuerte: var(--azul-hover);
  --celeste: var(--azul);
  --celeste-suave: var(--azul-suave);
  --asfalto: var(--fondo-2);
  --asfalto-tinta: var(--tinta);
  --sombra-flotante: var(--sombra-tarjeta);
  --fuente-rotulo: var(--fuente);
  --radio-1: var(--radio-s);
  --radio-2: var(--radio-m);
  --radio-3: var(--radio-l);
  --t-20: 20px; --t-34: 32px; --t-46: 40px;
  --linea-ruta: linear-gradient(var(--borde-suave), var(--borde-suave));
}

/* --------------------------------------------------------------------------
   1b. Tema oscuro (dev/VERSION-FINAL.md §1). Automático: sigue al sistema salvo
   data-theme="light"; Oscuro: data-theme="dark". Los dos bloques son iguales.
   Las ilustraciones (paisajes de día) no se invierten: se ven como fotos.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0f1115;
    --fondo-2: #171a21;
    --superficie: #1b1f27;
    --borde: #2e3440;
    --borde-suave: #242a35;
    --borde-control: #5a6372;
    --tinta: #f2f4f7;            /* 17:1 sobre --fondo */
    --tinta-2: #b7bec9;          /* 8,8:1 sobre --superficie */
    --tinta-3: #9aa3b1;          /* 5,7:1 sobre --borde-suave */
    --azul: #5b95ff;             /* 5,6:1 sobre --superficie (texto, íconos, bordes) */
    --azul-hover: #7aa9ff;
    --logo-estela: #9ad8ff;
    --azul-suave: #16233d;       /* --azul-hover sobre esto: 6,7:1 */
    --azul-gradiente: linear-gradient(90deg, #3b7cff 0%, #2a6af5 50%, #1f58e0 100%);
    --azul-gradiente-hover: linear-gradient(90deg, #3270f5 0%, #2360e6 50%, #1a4fcc 100%);
    --azul-relleno: #2563eb;     /* blanco encima: 5,2:1 */
    --exito: #4cc463;
    --alerta: #f2b14c;
    --error: #ff8266;
    --error-relleno: #c13515;
    --error-relleno-hover: #a62c10;
    --exito-texto: #4cc463;
    --exito-suave: #14271a;
    --exito-borde: #24432b;
    --alerta-suave: #2a2214;
    --alerta-chip: #2a2214;
    --alerta-borde: #4a3a1c;
    --error-suave: #2a1a17;
    --control-invalido: #2a1a17;
    --skeleton-1: #1f242d;
    --skeleton-2: #2a303b;
    --superficie-elevada: #262b35;
    --buscador-gris: #14171d;
    --badge-foto: rgb(27 31 39 / 0.92);
    --avatar-anonimo: #5a6372;
    --tinta-inversa: #0f1115;
    --tinta-fuerte: #ffffff;
    --sobre-azul: #ffffff;
    --acento-tinta: #ffffff;
    --capa: rgba(0, 0, 0, 0.62);
    --velo: rgba(0, 0, 0, 0.5);
    --toast-fondo: #2b313c;
    --toast-tinta: #f2f4f7;
    --toast-borde: #3a414d;
    --sombra-tarjeta: 0 6px 18px rgba(0, 0, 0, 0.5);
    --sombra-buscador: 0 3px 14px rgba(0, 0, 0, 0.45);
    --sombra-buscador-hover: 0 4px 18px rgba(0, 0, 0, 0.6);
    --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
    --sombra-chica: 0 2px 6px rgb(0 0 0 / 0.5);
    --sombra-segmento: 0 6px 20px rgba(0, 0, 0, 0.6);
    --sombra-menu: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px #2e3440;
    --sombra-modal: 0 10px 36px rgba(0, 0, 0, 0.7), 0 0 0 1px #2e3440;
    --sombra-toast: 0 6px 24px rgba(0, 0, 0, 0.6);
    --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2f4f7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --mapa-tierra: #1c2028;
    --mapa-agua: #1b3352;
    --mapa-agua-texto: #8db8f0;
    --mapa-parque: #1d3323;
    --mapa-parque-texto: #8fcf97;
    --mapa-monte: #232a22;
    --mapa-calle: #262b34;
    --mapa-avenida: #3a414d;
    --mapa-avenida-borde: #14171d;
    --mapa-autopista: #34445e;
    --mapa-texto: #d5dae2;
    --mapa-halo: #1c2028;
    --mapa-aeropuerto: #2563eb;
    --mapa-pista: #3a414d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0f1115;
  --fondo-2: #171a21;
  --superficie: #1b1f27;
  --borde: #2e3440;
  --borde-suave: #242a35;
  --borde-control: #5a6372;
  --tinta: #f2f4f7;            /* 17:1 sobre --fondo */
  --tinta-2: #b7bec9;          /* 8,8:1 sobre --superficie */
  --tinta-3: #9aa3b1;          /* 5,7:1 sobre --borde-suave */
  --azul: #5b95ff;             /* 5,6:1 sobre --superficie (texto, íconos, bordes) */
  --azul-hover: #7aa9ff;
  --logo-estela: #9ad8ff;
  --azul-suave: #16233d;       /* --azul-hover sobre esto: 6,7:1 */
  --azul-gradiente: linear-gradient(90deg, #3b7cff 0%, #2a6af5 50%, #1f58e0 100%);
  --azul-gradiente-hover: linear-gradient(90deg, #3270f5 0%, #2360e6 50%, #1a4fcc 100%);
  --azul-relleno: #2563eb;     /* blanco encima: 5,2:1 */
  --exito: #4cc463;
  --alerta: #f2b14c;
  --error: #ff8266;
  --error-relleno: #c13515;
  --error-relleno-hover: #a62c10;
  --exito-texto: #4cc463;
  --exito-suave: #14271a;
  --exito-borde: #24432b;
  --alerta-suave: #2a2214;
  --alerta-chip: #2a2214;
  --alerta-borde: #4a3a1c;
  --error-suave: #2a1a17;
  --control-invalido: #2a1a17;
  --skeleton-1: #1f242d;
  --skeleton-2: #2a303b;
  --superficie-elevada: #262b35;
  --buscador-gris: #14171d;
  --badge-foto: rgb(27 31 39 / 0.92);
  --avatar-anonimo: #5a6372;
  --tinta-inversa: #0f1115;
  --tinta-fuerte: #ffffff;
  --sobre-azul: #ffffff;
  --acento-tinta: #ffffff;
  --capa: rgba(0, 0, 0, 0.62);
  --velo: rgba(0, 0, 0, 0.5);
  --toast-fondo: #2b313c;
  --toast-tinta: #f2f4f7;
  --toast-borde: #3a414d;
  --sombra-tarjeta: 0 6px 18px rgba(0, 0, 0, 0.5);
  --sombra-buscador: 0 3px 14px rgba(0, 0, 0, 0.45);
  --sombra-buscador-hover: 0 4px 18px rgba(0, 0, 0, 0.6);
  --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
  --sombra-chica: 0 2px 6px rgb(0 0 0 / 0.5);
  --sombra-segmento: 0 6px 20px rgba(0, 0, 0, 0.6);
  --sombra-menu: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px #2e3440;
  --sombra-modal: 0 10px 36px rgba(0, 0, 0, 0.7), 0 0 0 1px #2e3440;
  --sombra-toast: 0 6px 24px rgba(0, 0, 0, 0.6);
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2f4f7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mapa-tierra: #1c2028;
  --mapa-agua: #1b3352;
  --mapa-agua-texto: #8db8f0;
  --mapa-parque: #1d3323;
  --mapa-parque-texto: #8fcf97;
  --mapa-monte: #232a22;
  --mapa-calle: #262b34;
  --mapa-avenida: #3a414d;
  --mapa-avenida-borde: #14171d;
  --mapa-autopista: #34445e;
  --mapa-texto: #d5dae2;
  --mapa-halo: #1c2028;
  --mapa-aeropuerto: #2563eb;
  --mapa-pista: #3a414d;
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Sin scroll-padding-top: con la cabecera sticky, Chrome desplaza la página cada vez
   que un elemento de la cabecera recibe foco. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fondo);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.con-modal, html.con-menu, html.con-hoja { overflow: hidden; }
/* App.tema.elegir: el cambio de tema es instantáneo (sin fundidos de cada componente) */
html.cambiando-tema *, html.cambiando-tema *::before, html.cambiando-tema *::after { transition: none !important; }

#app, .app { overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; background: var(--fondo); }

/* Estilos de elementos con :where() (especificidad 0): cualquier clase de una página los pisa,
   aunque el selector de base tenga atributo o pseudoclase (input[type="checkbox"], a:hover). */
:where(img, svg, video, canvas) { max-width: 100%; }
:where(img, video, canvas) { display: block; height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button) { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
[inert] { user-select: none; }

:where(p) { margin: 0 0 1em; }
:where(ul, ol) { margin: 0 0 1em; padding-left: 1.25em; }

:where(a) { color: var(--tinta); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
:where(a:hover) { color: var(--tinta); text-decoration-thickness: 2px; }

::selection { background: var(--azul-suave); color: var(--tinta); }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* El router enfoca el <h1> (y las páginas, títulos, paneles o avisos) con tabindex="-1":
   ese foco programático no dibuja contorno. Los controles con tabindex="-1" (pestañas con
   foco itinerante, opciones) conservan su anillo. */
#vista [tabindex="-1"]:not(a, button, input, select, textarea, [role="tab"], [role="radio"], [role="option"], [role="menuitem"]):focus { outline: none; }

:where(hr) { border: 0; border-top: 1px solid var(--borde-suave); margin: 32px 0; }

/* --------------------------------------------------------------------------
   3. Tipografía — Figtree, títulos 500–700, sin anchos expandidos
   Escala común a todas las páginas: h1 32/600 (28 en < 744 px; la ficha de auto usa
   26 por su cuenta y las portadas de landing, 32–40), h2 22/600 (títulos de sección),
   h3 18/600, h4 16/600. Las páginas no redefinen peso ni tamaño de h1/h2 salvo esas excepciones.
   -------------------------------------------------------------------------- */
:where(h1, h2, h3, h4) {
  margin: 0 0 0.5em;
  color: var(--tinta);
  font-weight: 600;
  font-stretch: normal;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
:where(h1) { font-size: var(--t-32); line-height: 1.15; letter-spacing: -0.02em; }
:where(h2) { font-size: var(--t-22); line-height: 1.25; }
:where(h3) { font-size: var(--t-18); line-height: 1.3; }
:where(h4) { font-size: var(--t-16); line-height: 1.35; }
@media (max-width: 743px) {
  :where(h1) { font-size: 28px; }
}

.rotulo {
  display: inline-block;
  font-family: var(--fuente);
  font-weight: 700;
  font-size: var(--t-12);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.precio {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.muted { color: var(--tinta-2); }
.tabular { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.vista { display: block; flex: 1 0 auto; outline: none; }

.seccion { padding-block: var(--aire-seccion); }
.seccion + .seccion { border-top: 1px solid var(--borde-suave); }
.seccion-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 20px;
}
.seccion-cabecera h2 { margin: 0; }
.seccion-cabecera p { margin: 4px 0 0; color: var(--tinta-2); }

.grilla-autos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 40px 24px;
}

.fila-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

.divisor { border: 0; height: 0; border-top: 1px solid var(--borde-suave); margin: 32px 0; }
.divisor-ruta { border: 0; height: 0; border-top: 1px solid var(--borde-suave); margin: 32px 0; background: none; }

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.btn {
  --btn-alto: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-alto);
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--radio-s);
  background: var(--fondo-2);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn .icono { flex: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Conversión: Reservar, Confirmar y pagar, Buscar */
.btn-primario {
  background: var(--azul-gradiente);
  background-color: var(--azul-relleno);
  color: var(--sobre-azul);
}
.btn-primario:hover:not(:disabled) { color: var(--sobre-azul); background: var(--azul-gradiente-hover); }

/* Oscuro: Mostrar N autos, Siguiente, Guardar */
.btn-oscuro { background: var(--tinta); color: var(--tinta-inversa); }
.btn-oscuro:hover:not(:disabled) { background: var(--tinta-fuerte); color: var(--tinta-inversa); }

/* Contorno */
.btn-secundario { background: var(--superficie); border-color: var(--tinta); color: var(--tinta); }
.btn-secundario:hover:not(:disabled) { background: var(--fondo-2); }

.btn-fantasma { background: transparent; color: var(--tinta); }
.btn-fantasma:hover:not(:disabled) { background: var(--fondo-2); }

.btn-peligro { background: var(--error-relleno); border-color: var(--error-relleno); color: #fff; }
.btn-peligro:hover:not(:disabled) { background: var(--error-relleno-hover); }

.btn-chico { --btn-alto: 36px; padding: 6px 16px; font-size: 14px; }
.btn-bloque { display: flex; width: 100%; }

/* Link subrayado 600 ("Mostrar más", "Editar"). .btn-enlace es el nombre anterior. */
.btn-link, .btn-enlace {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  cursor: pointer;
}
.btn-link:hover, .btn-enlace:hover { color: var(--tinta-fuerte); text-decoration-thickness: 2px; }

/* Botón redondo sólo ícono */
.btn-icono { --btn-alto: 40px; width: 40px; padding: 0; border-radius: 50%; background: transparent; }
.btn-icono:hover:not(:disabled) { background: var(--fondo-2); }

/* --------------------------------------------------------------------------
   6. Formularios — caja con borde fino, rótulo chico
   -------------------------------------------------------------------------- */
.campo { display: grid; gap: 8px; min-width: 0; align-content: start; }
.campo > label, .campo-etiqueta { font-size: 14px; font-weight: 600; color: var(--tinta); }
.campo-ayuda { margin: 0; font-size: 14px; color: var(--tinta-2); }
.campo-error { display: flex; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; color: var(--error); }

.control {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 14px;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-s);
  background-color: var(--superficie);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.3;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.control::placeholder { color: var(--tinta-3); }
.control:hover { border-color: var(--tinta); }
.control:focus { outline: none; border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.control[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); background-color: var(--control-invalido); }
.control:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--fondo-2); }
select.control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: var(--flecha-select);
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
textarea.control { min-height: 120px; resize: vertical; }
input[type="date"].control, input[type="time"].control { min-width: 0; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--tinta); width: 20px; height: 20px; }
:where(input[type="range"]) { accent-color: var(--tinta); }
::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }

/* Caja con el rótulo adentro: mismo marcado que .campo. Rótulo en frase (12/600, gris) y
   valor a 16 px (con menos, Safari de iOS hace zoom al enfocar). */
.campo-caja { position: relative; gap: 0; }
.campo-caja > label {
  position: absolute;
  z-index: 1;
  top: 9px;
  left: 13px;
  right: 40px;
  color: var(--tinta-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campo-caja > .control { padding: 26px 13px 8px; min-height: 58px; font-size: 16px; }
.campo-caja > .campo-ayuda, .campo-caja > .campo-error { margin-top: 8px; }

/* Celdas pegadas, como la tarjeta de reserva (RETIRO | DEVOLUCIÓN / ENTREGA / PROTECCIÓN):
   sólo acá los rótulos van en MAYÚSCULAS. .celda-completa ocupa toda la fila.
   Por defecto: una fila de 2 celdas + filas completas. Para grillas de 2×2 o más filas,
   .grupo-celdas-grilla dibuja los bordes compartidos con el hueco de la grilla (sirve para
   cualquier cantidad de columnas; cada fila tiene que quedar completa). */
.grupo-celdas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-s);
  overflow: hidden;
}
.grupo-celdas > * { min-width: 0; }
.grupo-celdas > .campo-caja > label { color: var(--tinta); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.grupo-celdas > .campo-caja > .control { border: 0; border-radius: 0; }
.grupo-celdas > * + * { border-left: 1px solid var(--borde-control); }
.grupo-celdas > .celda-completa { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--borde-control); }
.grupo-celdas > .campo-caja > .control:focus { box-shadow: inset 0 0 0 2px var(--tinta); border-radius: var(--radio-s); }
.grupo-celdas-grilla { gap: 1px; background: var(--borde-control); }
.grupo-celdas-grilla > * { background: var(--superficie); }
.grupo-celdas-grilla > * + *, .grupo-celdas-grilla > .celda-completa { border-left: 0; border-top: 0; }

/* Aviso / nota informativa (checkout, ingreso) */
.nota-demo, .aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-m);
  background: var(--fondo-2);
  color: var(--tinta);
  font-size: 14px;
  line-height: 1.45;
}
.nota-demo p, .aviso p { margin: 0; }
.nota-demo .icono, .aviso .icono { flex: none; color: var(--azul); margin-top: 1px; }
.aviso-alerta { background: var(--alerta-suave); border-color: var(--alerta-borde); }
.aviso-alerta .icono { color: var(--alerta); }
.aviso-exito { background: var(--exito-suave); border-color: var(--exito-borde); }
.aviso-exito .icono { color: var(--exito); }

/* --------------------------------------------------------------------------
   7. Chips, badges y estados
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: var(--radio-pill);
  background: var(--fondo-2);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}
.chip .icono { flex: none; }
button.chip, a.chip, label.chip {
  min-height: 40px;
  padding: 8px 16px;
  border-color: var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
button.chip:hover, a.chip:hover, label.chip:hover { border-color: var(--tinta); }
.chip-activo, .chip[aria-pressed="true"], label.chip:has(input:checked) {
  background: var(--azul-suave);
  border-color: var(--azul);
  color: var(--azul-hover);
  box-shadow: inset 0 0 0 1px var(--azul);
}
button.chip.chip-activo:hover, button.chip[aria-pressed="true"]:hover { border-color: var(--azul-hover); }
.chip-celeste { background: var(--azul-suave); color: var(--azul-hover); }
.chip-acento { background: var(--azul-relleno); color: var(--sobre-azul); }
.chip-exito { background: var(--exito-suave); color: var(--exito-texto); } /* 5,6:1 sobre el verde claro */
.chip-alerta { background: var(--alerta-chip); color: var(--alerta); }
.chip-error { background: var(--error-suave); color: var(--error); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radio-pill);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 0 0 1px var(--borde-suave);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.badge .icono { flex: none; }
.badge-acento { background: var(--azul-relleno); color: var(--sobre-azul); box-shadow: none; }
.badge-celeste { background: var(--azul-suave); color: var(--azul-hover); box-shadow: none; }
.badge-exito { background: var(--exito-suave); color: var(--exito-texto); box-shadow: none; }
.badge-neutro { background: var(--fondo-2); color: var(--tinta-2); box-shadow: none; }

.estado {
  --estado-color: var(--tinta-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radio-pill);
  background: color-mix(in srgb, var(--estado-color) 10%, var(--superficie));
  color: var(--estado-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.estado::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado-pendiente { --estado-color: var(--alerta); }
.estado-confirmada { --estado-color: var(--azul); }
.estado-en-curso { --estado-color: var(--exito); }
.estado-en-curso::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--exito) 25%, transparent); }
.estado-finalizada { --estado-color: var(--tinta-2); }
.estado-cancelada, .estado-rechazada { --estado-color: var(--error); }

/* --------------------------------------------------------------------------
   8. Tarjeta, pestañas, migas, listas, vacío, skeleton
   -------------------------------------------------------------------------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: clamp(16px, 3vw, 24px);
  min-width: 0;
}
.tarjeta-flotante { border-color: var(--borde-suave); box-shadow: var(--sombra-tarjeta); }

.pestanas {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--borde-suave);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 24px;
  /* Cada pestaña tiene 6 px de padding lateral (aire para el anillo de foco) compensados con margen
     negativo: el gap sigue siendo la distancia entre textos. La pista suma esos 6 px para que el
     anillo de la primera no quede cortado, y los devuelve con su propio margen. */
  padding-inline: 6px;
  margin-inline: -6px;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  margin-inline: -6px;
  border: 0;
  background: none;
  color: var(--tinta-2);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.pestana::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px; bottom: -1px;
  height: 2px;
  background: transparent;
}
.pestana:hover { color: var(--tinta); text-decoration: none; }
.pestana:hover::after { background: var(--borde); }
.pestana-activa, .pestana[aria-selected="true"], .pestana[aria-current="page"] { color: var(--tinta); font-weight: 600; }
.pestana-activa::after, .pestana[aria-selected="true"]::after, .pestana[aria-current="page"]::after { background: var(--tinta); }
.pestana:focus-visible { outline-offset: -2px; border-radius: 6px; } /* 4 px de aire entre el anillo y el texto */
.pestana-contador {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radio-pill);
  background: var(--fondo-2);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.migas { margin-bottom: 16px; }
.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--tinta-2);
}
.migas li { min-width: 0; }
.migas li + li::before { content: '›'; margin-right: 8px; color: var(--tinta-3); }
.migas a { color: var(--tinta-2); text-decoration: none; }
.migas a:hover { color: var(--tinta); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--tinta); font-weight: 500; }

.lista-check { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lista-check li { position: relative; padding-left: 32px; min-height: 22px; }
.lista-check li::after {
  content: '';
  position: absolute;
  left: 2px; top: 0.2em;
  width: 18px; height: 18px;
  background: var(--tinta);
  -webkit-mask: var(--mascara-check) center / contain no-repeat;
  mask: var(--mascara-check) center / contain no-repeat;
}
.lista-check li.no { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: var(--tinta-3); }
.lista-check li.no::after {
  background: var(--tinta-3);
  -webkit-mask-image: var(--mascara-cruz);
  mask-image: var(--mascara-cruz);
}

/* Estado vacío: ícono en círculo gris, título, texto y acción */
.vacio {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 480px;
  margin-inline: auto;
  padding: 48px 16px;
  text-align: center;
}
.vacio-senal {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--fondo-2);
  color: var(--tinta);
}
.vacio-titulo { margin: 0; font-size: var(--t-22); font-weight: 600; letter-spacing: -0.01em; }
h1.vacio-titulo { font-size: var(--t-26); }
.vacio-texto { margin: 0 0 12px; color: var(--tinta-2); }
.vacio-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.vacio-enlace { font-weight: 600; }

.skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--radio-s);
  background: linear-gradient(90deg, var(--skeleton-1) 0%, var(--skeleton-2) 45%, var(--skeleton-1) 90%);
  background-size: 220% 100%;
  animation: rd-brillo 1.3s ease-in-out infinite;
}
@keyframes rd-brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* --------------------------------------------------------------------------
   9. Piezas: íconos, avatar, estrellas, patente, foto, favorito
   -------------------------------------------------------------------------- */
.icono { display: inline-block; flex: none; vertical-align: middle; }

.avatar {
  --avatar-tam: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--avatar-tam);
  height: var(--avatar-tam);
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar-fondo, var(--tinta));
  color: var(--avatar-tinta, #fff);
  font-family: var(--fuente);
  font-size: calc(var(--avatar-tam) * 0.4);
  font-weight: 600;
  line-height: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.estrellas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.estrellas .icono { color: var(--tinta); }
.estrellas-valor { font-weight: 500; }
.estrellas-cantidad { color: var(--tinta-2); }
.estrellas-nuevo { font-weight: 600; }
.estrellas-fila { gap: 1px; }
.estrellas-fila .estrella-off { color: var(--borde); }

/* Placa Mercosur: blanca, franja azul con "REPÚBLICA ARGENTINA" y bandera.
   Única pieza con tipografía propia (Barlow Semi Condensed). */
.patente {
  display: inline-block;
  font-size: 26px;
  vertical-align: middle;
  line-height: 1;
}
.patente-interior {
  display: inline-flex;
  flex-direction: column;
  min-width: 5.4em;
  overflow: hidden;
  border: 0.06em solid #222;
  border-radius: 0.22em;
  background: #fff;
  color: #222;
  font-family: var(--fuente-placa);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.patente-franja {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  padding: 0.14em 0.9em 0.1em;
  background: #1c3f94;
  color: #fff;
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.patente-merco {
  position: absolute;
  left: 0.5em; top: 50%;
  width: 1.1em; height: 1.1em;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 0.14em solid rgb(255 255 255 / 0.85);
  border-right-color: transparent;
}
.patente-bandera {
  position: absolute;
  right: 0.55em; top: 50%;
  width: 1.7em; height: 1.1em;
  transform: translateY(-50%);
  background:
    radial-gradient(circle, #f6b40e 0 0.16em, transparent 0.19em),
    linear-gradient(#74acdf 0 33.3%, #fff 33.3% 66.6%, #74acdf 66.6%);
}
.patente-texto {
  padding: 0.14em 0.4em 0.16em;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Placa vieja (ABC 123): negra con letras blancas, así era de verdad */
.patente-vieja .patente-interior { background: #16191d; color: #f1f3f5; border-color: #9aa3ad; }
.patente-vieja .patente-franja { background: transparent; color: #c9d0d6; padding-bottom: 0; }
.patente-chica { font-size: 18px; }

.foto-auto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fondo-2);
}
.foto-auto > img, .foto-auto > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-auto-placeholder { display: grid; place-items: center; color: var(--tinta-3); }
.foto-auto-placeholder > svg.icono { width: 26%; height: auto; stroke-width: 1.4; }
.foto-auto-color {
  position: absolute;
  left: 32%; right: 32%; bottom: 18%;
  height: 8px;
  border-radius: 4px;
  background: var(--color-auto, var(--tinta-3));
  box-shadow: 0 0 0 1px var(--borde);
}

/* Corazón: contorno blanco sobre relleno translúcido; guardado = relleno azul */
.fav-boton {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s;
}
.fav-boton .icono { width: 26px; height: 26px; overflow: visible; }
.fav-boton .icono path { fill: rgb(0 0 0 / 0.5); stroke: #fff; stroke-width: 2; }
.fav-boton:hover { transform: scale(1.06); }
.fav-boton:active { transform: scale(0.92); }
.fav-boton.fav-activo .icono path, .fav-boton[aria-pressed="true"] .icono path { fill: var(--azul); }

/* Variante con texto ("Guardar" subrayado, como en la ficha) */
.fav-con-texto {
  display: inline-flex;
  gap: 8px;
  width: auto;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radio-s);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
}
.fav-con-texto:hover { background: var(--fondo-2); transform: none; }
.fav-con-texto .icono { width: 16px; height: 16px; }
.fav-con-texto .icono path { fill: none; stroke: var(--tinta); stroke-width: 2; }
.fav-con-texto.fav-activo .icono path, .fav-con-texto[aria-pressed="true"] .icono path { fill: var(--azul); stroke: var(--azul); }
.fav-con-texto .fav-texto { text-decoration: underline; text-underline-offset: 0.16em; }

/* --------------------------------------------------------------------------
   10. Tarjeta de auto (App.ui.tarjetaAuto): sin borde, foto 4:3 radio 12
   -------------------------------------------------------------------------- */
.tarjeta-auto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  background: transparent;
  color: var(--tinta);
}
.tarjeta-auto-media { position: relative; border-radius: var(--radio-m); overflow: hidden; isolation: isolate; }
.tarjeta-auto-foto > svg, .tarjeta-auto-foto > img { transition: transform 0.4s ease; }
.tarjeta-auto:hover .tarjeta-auto-foto > svg, .tarjeta-auto:hover .tarjeta-auto-foto > img { transform: scale(1.02); }
.tarjeta-auto-badge {
  position: absolute;
  left: 12px; top: 12px;
  max-width: calc(100% - 72px);
  padding: 5px 10px;
  border-radius: var(--radio-pill);
  background: var(--badge-foto);
  color: var(--tinta);
  box-shadow: var(--sombra-chica);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.tarjeta-auto-badge-pausado { background: var(--tinta); color: var(--tinta-inversa); }
.tarjeta-auto-fav { position: absolute; top: 8px; right: 8px; z-index: 2; }

.tarjeta-auto-cuerpo { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.35; }
.tarjeta-auto-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.tarjeta-auto-titulo {
  margin: 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tarjeta-auto-link { color: inherit; text-decoration: none; }
.tarjeta-auto-link:hover { color: inherit; }
.tarjeta-auto-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radio-m); }
.tarjeta-auto-link:focus-visible { outline: none; }
.tarjeta-auto-link:focus-visible::after { outline: 2px solid var(--tinta); outline-offset: 4px; }
.tarjeta-auto-anio { font-weight: 600; }
.tarjeta-auto-fila .estrellas { flex: none; font-size: 14px; }
.tarjeta-auto-lugar, .tarjeta-auto-specs, .tarjeta-auto-extra {
  margin: 0;
  min-width: 0;
  color: var(--tinta-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tarjeta-auto-extra { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.tarjeta-auto-extra .icono { color: var(--tinta); }
.tarjeta-auto-precios { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: 4px; }
.tarjeta-auto-dia { margin: 0; }
.tarjeta-auto-dia .precio { font-weight: 600; }
.tarjeta-auto-unidad { color: var(--tinta); }
.tarjeta-auto-total { margin: 0; color: var(--tinta-2); }
.tarjeta-auto-total::before { content: '·'; margin-right: 6px; color: var(--tinta-2); }
.tarjeta-auto-total .precio { color: var(--tinta-2); font-weight: 400; text-decoration: underline; text-underline-offset: 0.16em; }
.tarjeta-auto-descuento { margin-left: 4px; color: var(--exito); font-weight: 600; }
.tarjeta-auto-compacta { gap: 10px; }
.tarjeta-auto-compacta .tarjeta-auto-cuerpo { font-size: 14px; }
.tarjeta-auto-compacta .tarjeta-auto-titulo { font-size: 14px; }
.tarjeta-auto-compacta .tarjeta-auto-badge { left: 10px; top: 10px; padding: 4px 9px; font-size: 12px; }
/* En tarjetas angostas el total va en su propia línea (sin el punto separador) */
.tarjeta-auto-compacta .tarjeta-auto-precios { display: grid; gap: 0; }
.tarjeta-auto-compacta .tarjeta-auto-total::before { content: none; }

/* --------------------------------------------------------------------------
   11. Buscador — píldora grande (hero) y compacta (barra)
   -------------------------------------------------------------------------- */
.buscador { position: relative; min-width: 0; }
.buscador-campos {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--superficie);
  box-shadow: var(--sombra-buscador);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.buscador-campos:hover { box-shadow: var(--sombra-buscador-hover); }
/* Con un segmento activo, el resto de la píldora pasa a gris */
.buscador-campos:has(.buscador-segmento:focus-within) { background: var(--buscador-gris); }

.buscador-hoja-cabecera { display: none; }

.buscador-segmento {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 24px 14px 32px;
  border-radius: var(--radio-pill);
  transition: background-color 0.15s, box-shadow 0.15s;
}
.buscador-segmento + .buscador-segmento::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  border-left: 1px solid var(--borde);
}
.buscador-segmento:hover { background: var(--borde-suave); }
.buscador-segmento:hover::before,
.buscador-segmento:hover + .buscador-segmento::before,
.buscador-segmento:focus-within::before,
.buscador-segmento:focus-within + .buscador-segmento::before { opacity: 0; }
.buscador-segmento:focus-within { background: var(--superficie-elevada); box-shadow: var(--sombra-segmento); z-index: 1; }
.buscador-seg-lugar { flex-grow: 1.15; }
.buscador-rotulo {
  display: block;
  margin: 0;
  color: var(--tinta);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
/* El select del lugar ocupa todo el segmento: tocar en cualquier parte lo abre */
.buscador-seg-lugar .buscador-rotulo { pointer-events: none; }
.buscador-control {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.buscador-control:focus { outline: none; color: var(--tinta); }
.buscador-control:focus-visible { outline: none; }
.buscador-segmento:has(.buscador-control:focus-visible) { box-shadow: var(--sombra-segmento), inset 0 0 0 2px var(--tinta); }
.buscador-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  background-image: var(--flecha-select);
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 10px auto;
  text-overflow: ellipsis;
  cursor: pointer;
}
.buscador-select option, .buscador-select optgroup { color: var(--tinta); background: var(--superficie); font-weight: 400; }
.buscador-select optgroup { font-weight: 600; }
.buscador-fecha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.buscador-dia { cursor: text; }
.buscador-hora { width: auto; padding-left: 8px; border-left: 1px solid var(--borde); }
.buscador-dia::-webkit-calendar-picker-indicator { margin-left: 2px; opacity: 0.55; }

/* Botón circular con lupa; se estira y dice "Buscar" cuando hay un segmento activo */
.buscador-boton {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  min-width: 48px;
  margin: 0 9px 0 4px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radio-pill);
  background: var(--azul-gradiente);
  background-color: var(--azul-relleno);
  color: var(--sobre-azul);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: padding 0.2s, transform 0.1s;
}
.buscador-boton:active { transform: scale(0.96); }
.buscador-boton .icono { stroke-width: 2.6; }
.buscador-boton-texto { display: none; }
.buscador-campos:focus-within .buscador-boton { padding: 0 20px 0 16px; }
.buscador-campos:focus-within .buscador-boton-texto { display: inline; }
.buscador-error {
  margin: 10px 24px 0;
  color: var(--error);
  font-size: 14px;
  font-weight: 500;
}

/* Hero: píldora grande (~66 px) */
.buscador-hero { max-width: 880px; margin-inline: auto; }
.buscador-hero .buscador-campos { min-height: 66px; }

/* Barra: píldora compacta (~56 px) */
.buscador-barra .buscador-campos { min-height: 56px; box-shadow: var(--sombra-suave); }
.buscador-barra .buscador-segmento { padding: 8px 16px 8px 24px; }
.buscador-barra .buscador-rotulo { font-size: 11px; }
.buscador-barra .buscador-control { font-size: 14px; min-height: 22px; }
.buscador-barra .buscador-boton { height: 40px; min-width: 40px; margin-right: 8px; padding: 0 10px; }
.buscador-barra .buscador-campos:focus-within .buscador-boton { padding: 0 16px 0 12px; }

/* Resumen tocable (móvil): "¿A dónde vas?" */
.buscador-resumen { display: none; }
.buscador-resumen-texto { display: grid; flex: 1; min-width: 0; line-height: 1.25; text-align: left; }
.buscador-resumen-texto strong,
.buscador-resumen-texto > span:not(.sr-only) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buscador-resumen-texto strong { font-size: 14px; font-weight: 600; }
.buscador-resumen-texto > span:not(.sr-only) { color: var(--tinta-2); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Tablet (744–949 px): el lugar cede ancho a las fechas, así la fecha no queda pegada (ni
   cortada) contra el ícono del calendario. */
@media (max-width: 949px) and (min-width: 744px) {
  .buscador-seg-lugar { flex-grow: 0.8; }
  .buscador-segmento { padding-inline: 16px 10px; }
  .buscador-hora { padding-left: 4px; }
  .buscador-dia::-webkit-calendar-picker-indicator { margin-left: 6px; }
}

/* Móvil: la píldora "¿A dónde vas?" abre una hoja a pantalla completa */
@media (max-width: 743px) {
  .buscador-resumen {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 20px;
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-pill);
    background: var(--superficie);
    color: var(--tinta);
    box-shadow: var(--sombra-buscador);
    cursor: pointer;
  }
  .buscador-resumen > .icono { flex: none; stroke-width: 2.4; }
  .buscador-campos { display: none; }
  .buscador-error { margin-inline: 8px; }

  .buscador-abierto .buscador-campos {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: var(--fondo-2);
    box-shadow: none;
    animation: rd-hoja 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .buscador-abierto .buscador-campos:has(.buscador-segmento:focus-within) { background: var(--fondo-2); }
  .buscador-abierto .buscador-hoja-cabecera {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    margin-bottom: 4px;
  }
  .buscador-hoja-cerrar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--tinta);
    cursor: pointer;
  }
  .buscador-hoja-titulo { margin: 0; text-align: center; font-size: 16px; font-weight: 600; }
  .buscador-abierto .buscador-segmento {
    flex: none;
    padding: 16px 20px;
    border-radius: var(--radio-l);
    background: var(--superficie);
    box-shadow: 0 0 0 1px var(--borde-suave), var(--sombra-suave);
  }
  .buscador-abierto .buscador-segmento::before { display: none; }
  .buscador-abierto .buscador-segmento:focus-within { box-shadow: 0 0 0 2px var(--tinta), var(--sombra-suave); }
  .buscador-abierto .buscador-rotulo { font-size: 20px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
  .buscador-abierto .buscador-control {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--borde-control);
    border-radius: var(--radio-s);
    color: var(--tinta);
    font-size: 16px;
  }
  .buscador-abierto .buscador-select { padding-right: 34px; background-position: right 14px center; }
  .buscador-abierto .buscador-fecha { grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
  .buscador-abierto .buscador-hora { border-left: 1px solid var(--borde-control); padding-left: 12px; }
  .buscador-abierto .buscador-boton {
    width: 100%;
    height: 52px;
    margin: auto 0 0;
    border-radius: var(--radio-s);
  }
  .buscador-abierto .buscador-boton-texto { display: inline; }
}

/* --------------------------------------------------------------------------
   12. Barra de familias de vehículos (App.ui.categorias)
       Fila 1: pestañas con pictograma a color + rótulo y "Filtros".
       Fila 2 (.categorias-subs): chips de la familia elegida.
   -------------------------------------------------------------------------- */
.categorias {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-top: 12px;
}
.categorias-fila {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.categorias-marco { position: relative; flex: 1 1 auto; min-width: 0; }
.categorias-pista {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Aire para que el anillo de foco (2 px + 2 px de separación) no quede cortado por el overflow;
     el margen negativo deja las categorías en el mismo lugar. */
  padding: 6px;
  margin: -6px -4px;
}
.categorias-pista::-webkit-scrollbar { display: none; }
.categoria {
  position: relative;
  flex: none;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 56px;
  padding: 4px 0 10px;
  border: 0;
  background: none;
  color: var(--tinta-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.15s, color 0.15s;
}
.categoria::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: transparent;
  transition: background-color 0.15s;
}
.categoria .icono { width: 24px; height: 24px; stroke-width: 1.6; }
/* Pictograma a color (App.ilustracion.icono o el respaldo): 32 px, un poco apagado si no está activa */
.categoria-picto { display: grid; place-items: center; width: 32px; height: 32px; transition: transform 0.15s, filter 0.15s; filter: saturate(0.85); }
.categoria-picto > svg { display: block; width: 32px; height: 32px; }
.categoria:hover .categoria-picto { transform: translateY(-1px); }
.categoria:hover { opacity: 1; color: var(--tinta); }
.categoria:hover::after { background: var(--borde); }
.categoria[aria-pressed="true"] { opacity: 1; color: var(--tinta); }
.categoria[aria-pressed="true"] .categoria-picto { filter: none; }
.categoria[aria-pressed="true"]::after { background: var(--tinta); }
.categoria:focus-visible { outline-offset: 2px; border-radius: 4px; }

/* Fila de chips de la familia elegida */
.categorias-subs { min-width: 0; padding: 10px 0 2px; border-top: 1px solid var(--borde-suave); }
.categorias-subs[hidden] { display: none; }
.categorias-subpista {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px;
  margin: -4px;
}
.categorias-subpista::-webkit-scrollbar { display: none; }
.categoria-sub { flex: none; }
button.chip.categoria-sub { min-height: 36px; padding: 6px 14px; font-size: 13px; font-weight: 500; }
.categoria-sub .icono { stroke-width: 1.7; }
.categorias-marco-subs .categorias-flecha { margin-top: -16px; }

.categorias-flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 0 0 6px var(--fondo), var(--sombra-chica);
  cursor: pointer;
}
.categorias-flecha:hover { box-shadow: 0 0 0 6px var(--fondo), var(--sombra-tarjeta); }
.categorias-prev { left: 0; }
.categorias-next { right: 0; }
/* Desvanecido en los bordes que desbordan: máscara sobre la pista (no un degradé encima, que
   con el scroll compuesto dejaba asomar una franja de la categoría cortada junto a "Filtros"). */
.categorias-marco.con-next .categorias-pista,
.categorias-marco.con-next .categorias-subpista {
  -webkit-mask-image: linear-gradient(270deg, transparent 12px, #000 56px);
  mask-image: linear-gradient(270deg, transparent 12px, #000 56px);
}
.categorias-marco.con-prev .categorias-pista,
.categorias-marco.con-prev .categorias-subpista {
  -webkit-mask-image: linear-gradient(90deg, transparent 12px, #000 56px);
  mask-image: linear-gradient(90deg, transparent 12px, #000 56px);
}
.categorias-marco.con-prev.con-next .categorias-pista,
.categorias-marco.con-prev.con-next .categorias-subpista {
  -webkit-mask-image: linear-gradient(90deg, transparent 12px, #000 56px, #000 calc(100% - 56px), transparent calc(100% - 12px));
  mask-image: linear-gradient(90deg, transparent 12px, #000 56px, #000 calc(100% - 56px), transparent calc(100% - 12px));
}
.categorias-filtros {
  --btn-alto: 48px;
  flex: none;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
  font-size: 12px;
  font-weight: 600;
}
.categorias-filtros:hover:not(:disabled) { border-color: var(--tinta); background: var(--fondo-2); }
.categorias-contador {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radio-pill);
  background: var(--tinta);
  color: var(--tinta-inversa);
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 743px) {
  .categorias-fila { gap: 12px; }
  .categorias-pista { gap: 24px; }
  .categoria-picto, .categoria-picto > svg { width: 28px; height: 28px; }
  .categorias-subs { padding-top: 8px; }
  .categorias-flecha { display: none; }
  .categorias-filtros { --btn-alto: 40px; padding: 6px 12px; }
  .categorias-filtros > span:not(.categorias-contador) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --------------------------------------------------------------------------
   13. Carrusel (scroll horizontal con snap y botones)
   -------------------------------------------------------------------------- */
/* Columnas visibles = min(--carrusel-cols, --carrusel-cols-max). Las media queries (y las
   páginas) ajustan --carrusel-cols según el ancho; App.ui.carrusel({ columnas: n }) sólo pone
   el tope --carrusel-cols-max, así nunca pisa el responsive. */
.carrusel {
  --carrusel-cols: 4;
  --carrusel-cols-max: 12;
  --carrusel-gap: 24px;
  --carrusel-min: 220px;
  position: relative;
  min-width: 0;
}
.carrusel-denso { --carrusel-cols: 4; --carrusel-gap: 16px; --carrusel-min: 180px; }
@media (min-width: 950px) { .carrusel-denso { --carrusel-cols: 5; } }
@media (min-width: 1128px) { .carrusel-denso { --carrusel-cols: 6; } }
@media (min-width: 1440px) { .carrusel-denso { --carrusel-cols: 7; } }
.carrusel-pista {
  --carrusel-n: min(var(--carrusel-cols), var(--carrusel-cols-max));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(var(--carrusel-min), calc((100% - (var(--carrusel-n) - 1) * var(--carrusel-gap)) / var(--carrusel-n)));
  gap: var(--carrusel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* 8 px de aire (compensados con margen negativo): el anillo de foco de las tarjetas se dibuja
     4 px afuera y el overflow de la pista lo cortaba arriba y a la izquierda. */
  padding: 8px 8px 12px;
  margin: -8px;
  scroll-padding-inline: 8px;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista:focus-visible { outline-offset: -2px; border-radius: var(--radio-m); }
.carrusel-item { min-width: 0; scroll-snap-align: start; }
.carrusel-item > * { height: 100%; }
.carrusel-btn {
  position: absolute;
  top: calc(var(--carrusel-top, 30%) - 16px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: var(--sombra-chica);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
}
.carrusel-btn .icono { width: 16px; height: 16px; stroke-width: 2.4; }
.carrusel-btn:hover { box-shadow: var(--sombra-tarjeta); transform: scale(1.04); }
.carrusel-prev { left: -14px; }
.carrusel-next { right: -14px; }
.carrusel-btn:disabled { opacity: 0; pointer-events: none; }
.carrusel-sin-desborde .carrusel-btn { display: none; }

@media (max-width: 743px) {
  .carrusel-pista {
    grid-auto-columns: min(78%, 300px);
    gap: 16px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .carrusel-denso .carrusel-pista { grid-auto-columns: min(46%, 220px); gap: 12px; }
  .carrusel-btn { display: none; }
}

/* --------------------------------------------------------------------------
   14. Modal (× a la izquierda, título centrado, footer con divisor) y toasts
   -------------------------------------------------------------------------- */
.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--capa);
  animation: rd-aparecer 0.18s ease-out;
}
.modal-fondo.modal-saliendo { opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--modal-ancho, 568px);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  border-radius: var(--radio-l);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: var(--sombra-modal);
  animation: rd-subir 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal:focus { outline: none; }
.modal-cabecera {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde-suave);
}
.modal-cerrar {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}
.modal-cerrar .icono { width: 16px; height: 16px; stroke-width: 2.6; }
.modal-cerrar:hover { background: var(--fondo-2); }
.modal-titulo {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
}
.modal-cuerpo { padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.modal-texto { margin: 0; color: var(--tinta-2); }
.modal-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--borde-suave);
}
.modal-acciones .btn:only-child { margin-left: auto; }
/* Acciones "secundarias" del pie se ven como link subrayado (p. ej. "Quitar todo", "Cancelar") */
.modal-acciones .btn-secundario,
.modal-acciones .btn-fantasma {
  min-height: 40px;
  padding: 8px 10px;
  margin-left: -10px;
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.modal-acciones .btn-secundario:hover:not(:disabled),
.modal-acciones .btn-fantasma:hover:not(:disabled) { background: var(--fondo-2); }
.modal-confirmar .modal-cuerpo { padding-block: 20px 24px; }

/* Formulario de ingreso (demo) */
.ingreso { display: grid; gap: 16px; }
.ingreso .btn-enlace { justify-self: start; font-size: 14px; }

@media (max-width: 743px) {
  .modal-fondo { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: var(--radio-l) var(--radio-l) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation-name: rd-subir-hoja;
  }
  .modal-cuerpo { padding: 20px; }
  .modal-acciones { padding: 12px 20px; }
}

.toasts {
  position: fixed;
  z-index: 1100;
  left: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100% - 48px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 10px 14px 16px;
  border-radius: var(--radio-s);
  background: var(--toast-fondo);
  color: var(--toast-tinta);
  border: 1px solid var(--toast-borde);
  box-shadow: var(--sombra-toast);
  pointer-events: auto;
  animation: rd-toast 0.22s ease-out;
}
.toast-icono { flex: none; display: grid; place-items: center; margin-top: 1px; color: var(--toast-tinta); }
.toast-ok .toast-icono { color: #6fd08c; }
.toast-error .toast-icono { color: #ff8f73; }
.toast-info .toast-icono { color: #9dbcff; }
.toast-texto { flex: 1; margin: 0; padding-top: 1px; font-size: 14px; line-height: 1.4; }
.toast-accion {
  flex: none;
  align-self: center;
  color: var(--toast-tinta);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  white-space: nowrap;
}
.toast-accion:hover { color: var(--toast-tinta); }
.toast-cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
}
.toast-cerrar:hover { opacity: 1; background: rgb(255 255 255 / 0.12); }
.toast :focus-visible { outline-color: var(--toast-tinta); }
.toast-saliendo { opacity: 0; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s; }

/* En móvil, arriba (las fichas tienen barras fijas abajo) */
@media (max-width: 743px) {
  .toasts {
    left: 12px;
    right: 12px;
    width: auto;
    /* ui.js mide el borde inferior real de la cabecera (la banda de prueba la corre hacia abajo) */
    top: var(--toasts-top, calc(var(--cabecera-alto) + 8px + env(safe-area-inset-top, 0px)));
    bottom: auto;
  }
}

@keyframes rd-aparecer { from { opacity: 0; } }
@keyframes rd-subir { from { opacity: 0; transform: translateY(24px); } }
@keyframes rd-subir-hoja { from { transform: translateY(48px); opacity: 0.5; } }
@keyframes rd-hoja { from { transform: translateY(32px); } }
@keyframes rd-toast { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   15. Shell: saltar, banda de prueba, cabecera, menús y pie
   -------------------------------------------------------------------------- */
.saltar {
  position: fixed;
  left: 12px;
  top: -100px;
  z-index: 2000;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radio-s);
  background: var(--tinta);
  color: var(--tinta-inversa);
  font-weight: 600;
  cursor: pointer;
}
.saltar:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.banda-prueba {
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde-suave);
  color: var(--tinta-2);
  font-size: 12px;
  line-height: 1.35;
}
.banda-prueba-fila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding-block: 6px;
  text-align: center;
}
.banda-prueba p { margin: 0; }
.banda-prueba strong { color: var(--tinta); font-weight: 600; }
.banda-prueba .icono { color: var(--azul); }

.cabecera {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde-suave);
}
/* Hoja de búsqueda (móvil) abierta: sticky siempre crea contexto de apilamiento, así que si la
   hoja es la de la cabecera, la cabecera sube por encima de la página; si es la de la página
   (p. ej. el buscador de #inicio), la cabecera se oculta para no taparla. */
html.con-hoja .cabecera-expandida { z-index: 1200; }
html.con-hoja .cabecera:not(.cabecera-expandida) { visibility: hidden; }
.cabecera-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  height: var(--cabecera-alto);
}

/* Logo: isotipo propio (llave con flecha de avance en un cuadrado azul con degradé) y wordmark
   "Rento" en tinta con el "&" en azul */
.logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  margin-left: -4px;
  border-radius: var(--radio-s);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.logo:hover { color: var(--tinta); text-decoration: none; }
.logo:hover .logo-amp { color: var(--azul-hover); }
/* Marca "la estela": en escritorio va el logotipo "rento" dibujado; en móvil, sólo el isotipo (la q). */
.logo-isotipo { flex: none; width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 2px 6px rgb(27 94 242 / 0.28); display: none !important; }
.logo-texto { display: inline-flex; align-items: center; }
.logo-letras { display: block; height: 40px; width: auto; }
.logo:hover .logo-letras { --logo-q: var(--azul-hover); }
.logo-amp { color: var(--azul); }

/* Píldora compacta de búsqueda (rutas que no son #inicio) */
.cabecera-centro { justify-self: center; min-width: 0; }
.cabecera-pildora {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  height: 48px;
  padding: 0 7px 0 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: var(--sombra-suave);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.cabecera-pildora:hover { box-shadow: var(--sombra-buscador-hover); }
.cabecera-pildora-seg { min-width: 0; padding: 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera-pildora-seg + .cabecera-pildora-seg { border-left: 1px solid var(--borde); }
.cabecera-pildora-fechas { color: var(--tinta); font-variant-numeric: tabular-nums; }
.cabecera-pildora-lupa {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--azul-gradiente);
  background-color: var(--azul-relleno);
  color: var(--sobre-azul);
}
.cabecera-pildora-lupa .icono { stroke-width: 2.8; }
.cabecera-pildora-movil { display: none; }
.cabecera-sin-pildora .cabecera-centro { visibility: hidden; }
.cabecera-expandida .cabecera-centro { visibility: hidden; }

/* Buscador grande desplegado debajo de la cabecera */
.cabecera-buscador {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 2;
  padding: 8px var(--gutter) 28px;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde-suave);
  animation: rd-bajar 0.2s ease-out;
}
.cabecera-velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--velo);
  animation: rd-aparecer 0.2s ease-out;
}
@keyframes rd-bajar { from { opacity: 0; transform: translateY(-12px); } }

.cabecera-acciones { justify-self: end; display: flex; align-items: center; gap: 8px; }
.cabecera-publicar {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radio-pill);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cabecera-publicar:hover { background: var(--fondo-2); color: var(--tinta); text-decoration: none; }
.cabecera-publicar[aria-current="page"] { background: var(--fondo-2); }

/* Píldora de usuario: menú + avatar */
.menu-usuario { position: relative; }
.menu-usuario-boton, .menu-lateral-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 5px 0 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.menu-usuario-boton:hover, .menu-usuario-boton[aria-expanded="true"],
.menu-lateral-boton:hover { box-shadow: var(--sombra-chica); }
.menu-usuario-boton > .icono-menu, .menu-lateral-boton > .icono-menu { stroke-width: 2.2; }
.menu-usuario-nombre {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.menu-usuario-anonimo {
  display: grid;
  place-items: end center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-anonimo);
  color: #fff;
}
.menu-usuario-anonimo .icono { width: 30px; height: 30px; margin-bottom: -5px; stroke: none; fill: currentColor; }
.menu-usuario-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 260px;
  padding: 8px 0;
  border-radius: var(--radio-m);
  background: var(--superficie);
  box-shadow: var(--sombra-menu);
  animation: rd-aparecer 0.14s ease-out;
}
.menu-cuenta { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-width: 0; }
.menu-cuenta-datos { min-width: 0; }
.menu-cuenta-nombre { margin: 0; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-cuenta-email { margin: 0; color: var(--tinta-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-cuenta-anonima { display: grid; gap: 12px; }
.menu-cuenta-anonima p { margin: 0; color: var(--tinta-2); font-size: 14px; line-height: 1.4; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover { background: var(--fondo-2); color: var(--tinta); text-decoration: none; }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item .icono { color: var(--tinta); }
.menu-item-fuerte { font-weight: 600; }
.menu-item[aria-current="page"] { font-weight: 600; }
.menu-item[aria-current="page"] .icono { color: var(--azul); }
.menu-contador {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radio-pill);
  background: var(--azul-relleno);
  color: var(--sobre-azul);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.menu-separador { height: 1px; margin: 8px 0; background: var(--borde-suave); }

/* Menú lateral / hoja (móvil) */
.menu-lateral-boton { display: none; }
.menu-lateral-capa { position: fixed; inset: 0; z-index: 900; }
.menu-lateral-fondo { position: absolute; inset: 0; background: var(--capa); opacity: 0; transition: opacity 0.22s; }
.menu-lateral {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(360px, 90vw);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.menu-lateral:focus { outline: none; }
.menu-lateral-capa.abierto .menu-lateral-fondo { opacity: 1; }
.menu-lateral-capa.abierto .menu-lateral { transform: none; }
.menu-lateral-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px 8px 20px;
  border-bottom: 1px solid var(--borde-suave);
}
.menu-lateral-nav { display: grid; padding: 8px 0; }
.menu-lateral-publicar { margin: 8px 16px 4px; width: auto; }
.menu-lateral-cuenta { padding: 8px 0; border-top: 1px solid var(--borde-suave); }
.menu-lateral-cuenta .menu-cuenta-anonima { padding: 12px 16px; }
.menu-lateral-nota {
  display: flex;
  gap: 8px;
  margin: auto 16px 16px;
  padding-top: 12px;
  color: var(--tinta-2);
  font-size: 13px;
  line-height: 1.4;
}
.menu-lateral-nota .icono { margin-top: 1px; color: var(--azul); }
.cabecera-icono {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}
.cabecera-icono:hover { background: var(--fondo-2); }

@media (max-width: 1127px) {
  .cabecera-pildora-seg { padding: 0 12px; }
}
@media (max-width: 949px) {
  .cabecera-publicar { display: none; }
}
@media (max-width: 743px) {
  :root { --cabecera-alto: 72px; }
  .cabecera-fila { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .logo-texto { display: none; }
  .logo-isotipo { display: inline-block !important; }
  .cabecera-sin-pildora .logo-texto { display: inline-flex; }
  .cabecera-sin-pildora .logo-isotipo { display: none !important; }
  .cabecera-centro { justify-self: stretch; }
  .cabecera-sin-pildora .cabecera-centro { visibility: hidden; }
  .cabecera-pildora { width: 100%; height: 52px; padding: 0 16px; gap: 12px; box-shadow: var(--sombra-buscador); border-color: var(--borde-suave); }
  .cabecera-pildora-escritorio { display: none; }
  .cabecera-pildora-movil { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
  .cabecera-pildora-movil .buscador-resumen-texto { flex: 1; }
  .cabecera-pildora-lupa { display: none; }
  .menu-usuario { display: none; }
  .menu-lateral-boton { display: inline-flex; padding: 0 5px 0 10px; gap: 8px; }
  /* En móvil el buscador desplegado es una hoja a pantalla completa (sin panel) */
  .cabecera-buscador { position: static; padding: 0; border: 0; animation: none; }
  .cabecera-buscador .buscador-resumen, .cabecera-buscador .buscador-error { display: none; }
  .cabecera-velo { display: none; }
}

/* Pie: gris claro, destinos, 3 columnas y barra inferior */
.pie {
  margin-top: 64px;
  border-top: 1px solid var(--borde-suave);
  background: var(--fondo-2);
  color: var(--tinta);
  font-size: 14px;
}
.pie-destinos { padding-block: 40px 32px; border-bottom: 1px solid var(--borde); }
.pie-titulo { margin: 0 0 16px; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.pie-ciudades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie-ciudades a { display: grid; gap: 1px; color: var(--tinta); font-weight: 500; text-decoration: none; }
.pie-ciudades a:hover { text-decoration: underline; }
.pie-ciudades small { color: var(--tinta-2); font-size: 14px; font-weight: 400; }
.pie-grilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-block: 40px;
}
.pie-columna ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pie a { color: var(--tinta); text-decoration: none; }
.pie a:hover { color: var(--tinta); text-decoration: underline; }
.pie-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px 26px;
  border-top: 1px solid var(--borde);
  color: var(--tinta);
}
.pie-legal p { margin: 0; }
.pie-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pie-legal-links > * + *::before { content: '·'; margin-right: 8px; color: var(--tinta); }
.pie-idioma { display: flex; align-items: center; gap: 16px; font-weight: 600; }
.pie-idioma span { display: inline-flex; align-items: center; gap: 6px; }
.pie-demo { flex-basis: 100%; color: var(--tinta-2); font-size: 13px; }
.bandera-ar {
  flex: none;
  display: inline-block;
  width: 20px;
  height: 13px;
  border-radius: 2px;
  background:
    radial-gradient(circle, #f6b40e 0 1.6px, transparent 2.1px),
    linear-gradient(#74acdf 0 33.3%, #fff 33.3% 66.6%, #74acdf 66.6%);
  box-shadow: 0 0 0 1px var(--borde);
}

@media (max-width: 743px) {
  .pie-grilla { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 8px; }
  .pie-columna { padding-block: 24px; }
  .pie-columna + .pie-columna { border-top: 1px solid var(--borde); }
  .pie-ciudades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-legal { flex-direction: column-reverse; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   15b. Selector de tema, badge de anfitrión y flujos de identidad / pago
        (dev/VERSION-FINAL.md §1–§3)
   -------------------------------------------------------------------------- */
/* "Tema: Automático · Claro · Oscuro": radios reales (accesibles) con aspecto de control segmentado */
.selector-tema { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.selector-tema-titulo { float: left; margin: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--tinta); }
.selector-tema-opciones {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--fondo-2);
}
.selector-tema-opcion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--radio-pill);
  color: var(--tinta-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.selector-tema-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.selector-tema-opcion:hover { color: var(--tinta); }
.selector-tema-opcion:has(input:checked) { background: var(--superficie-elevada); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-chica); }
.selector-tema-opcion:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 1px; }
.selector-tema-compacto .selector-tema-opcion { padding-inline: 10px; }
.menu-tema { padding: 8px 16px 6px; }
.menu-tema .selector-tema { display: grid; gap: 8px; }
.menu-tema .selector-tema-titulo { float: none; font-weight: 400; }
.menu-tema .selector-tema-opciones { display: flex; }
.menu-tema .selector-tema-opcion { flex: 1 1 0; justify-content: center; padding-inline: 6px; font-size: 12px; }
.pie-preferencias { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Agencia / Particular */
.badge-anfitrion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 7px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--superficie);
  color: var(--tinta-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-anfitrion-agencia { border-color: color-mix(in srgb, var(--azul) 35%, var(--borde)); background: var(--azul-suave); color: var(--azul-hover); }
.tarjeta-auto-agencia { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-2); }
.tarjeta-auto-extra .tarjeta-auto-agencia .icono { color: var(--tinta-2); }

/* Modales en pasos (App.ui.flujoIdentidad / flujoMedioPago) */
.flujo { display: grid; gap: 20px; }
.flujo-pasos { display: flex; gap: 6px; }
.flujo-paso { flex: 1; height: 4px; border-radius: var(--radio-pill); background: var(--borde-suave); }
.flujo-paso-hecho { background: var(--tinta); }
.flujo-paso-actual { background: var(--azul); }
.flujo-intro, .flujo-validando, .flujo-exito { display: grid; justify-items: center; gap: 10px; text-align: center; }
.flujo-intro-icono, .flujo-exito-icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--azul-suave);
  color: var(--azul);
}
.flujo-exito-icono { width: 64px; height: 64px; background: var(--exito-suave); color: var(--exito-texto); }
.flujo-titulo { margin: 0; font-size: 20px; font-weight: 600; }
.flujo-titulo:focus { outline: none; }
.flujo-texto { margin: 0; color: var(--tinta-2); }
.flujo-lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.flujo-lista li { display: flex; gap: 12px; align-items: flex-start; }
.flujo-lista .icono { flex: none; margin-top: 1px; color: var(--tinta); }
.flujo-requisito { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio-m); background: var(--fondo-2); }
.flujo-requisito > .icono { flex: none; color: var(--azul); }
.flujo-requisito-titulo { margin: 0 0 2px; font-weight: 600; }
.flujo-requisito-texto { margin: 0; color: var(--tinta-2); font-size: 14px; }
.flujo-opciones { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.flujo-opciones-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flujo-legend { grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 2px; padding: 0; font-size: 14px; font-weight: 600; }
.flujo-opcion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-m);
  background: var(--superficie);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.flujo-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.flujo-opcion:hover { border-color: var(--tinta); }
.flujo-opcion:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); background: var(--fondo-2); }
.flujo-opcion:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.flujo-opcion-texto { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.flujo-opcion-texto strong { font-size: 16px; font-weight: 600; }
.flujo-opcion-texto span { color: var(--tinta-2); }
.flujo-opcion > .icono { flex: none; color: var(--tinta); }
.flujo-subidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.flujo-subida {
  position: relative;
  aspect-ratio: 1.586;
  overflow: hidden;
  border: 1px dashed var(--borde-control);
  border-radius: var(--radio-m);
  background: var(--fondo-2);
}
.flujo-subida:hover { border-color: var(--tinta); }
.flujo-subida:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.flujo-subida input[type="file"] { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.flujo-subida img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flujo-subida-rotulo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 12px;
  color: var(--tinta-2);
  font-size: 13px;
  text-align: center;
}
.flujo-subida-rotulo strong { color: var(--tinta); font-size: 15px; font-weight: 600; }
.flujo-subida-lista { border-style: solid; border-color: var(--exito); }
.flujo-subida-lista .flujo-subida-rotulo { place-content: end stretch; justify-items: start; padding: 8px; }
.flujo-subida-ok, .flujo-subida-cambiar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radio-pill);
  background: var(--badge-foto);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--sombra-chica);
}
.flujo-subida-ok .icono { color: var(--exito); }
.flujo-subida-cambiar { position: absolute; top: 8px; right: 8px; text-decoration: underline; }
.flujo-ejemplo { justify-self: start; font-size: 14px; }
.flujo-form { display: grid; gap: 16px; }
.flujo-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.flujo-check input { flex: none; margin: 1px 0 0; }
.flujo-progreso { width: 100%; height: 8px; overflow: hidden; border-radius: var(--radio-pill); background: var(--borde-suave); }
.flujo-progreso-barra { display: block; height: 100%; border-radius: inherit; background: var(--azul-gradiente); background-color: var(--azul-relleno); transition: width 0.45s ease; }
.flujo-etapas { display: grid; gap: 10px; justify-self: stretch; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
.flujo-etapa { display: flex; align-items: center; gap: 10px; color: var(--tinta-3); font-size: 14px; }
.flujo-etapa-hecha { color: var(--tinta); }
.flujo-etapa-hecha .icono { color: var(--exito); }
.flujo-resumen { display: grid; gap: 0; margin: 0; border: 1px solid var(--borde); border-radius: var(--radio-m); overflow: hidden; }
.flujo-resumen > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; font-size: 14px; }
.flujo-resumen > div + div { border-top: 1px solid var(--borde-suave); }
.flujo-resumen dt { color: var(--tinta-2); }
.flujo-resumen dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.flujo-nota { display: flex; gap: 8px; margin: 0; color: var(--tinta-2); font-size: 13px; line-height: 1.4; }
.flujo-nota .icono { flex: none; margin-top: 1px; }
.flujo-campos { display: grid; gap: 16px; }
.flujo-campos[hidden] { display: none; }
.modal-flujo .nota-demo .icono { color: var(--tinta); }
@media (max-width: 479px) {
  .flujo-subidas, .flujo-opciones-dos { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   16. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tarjeta-auto:hover .tarjeta-auto-foto > svg,
  .tarjeta-auto:hover .tarjeta-auto-foto > img { transform: none; }
}