/* =====================================================================
   Súbase — la app del pasajero.

   Reglas que gobiernan este archivo (del brief de diseño):
   · El amarillo (#FFC400) es RELLENO: botón principal, pin propio,
     barra de estado. Encima siempre va Tinta (#1B1915), nunca blanco.
     Como TEXTO sobre fondo claro se usa Oro quemado (#8A6500); el
     amarillo como texto solo en tema oscuro.
   · Pantalla amarilla completa UNA sola vez por viaje: «llegó».
   · Vinotinto (#7A1B2E) para el logotipo, los nombres y el borde de
     la fila elegida. Nunca para una alerta y nunca más del 10 % de una
     pantalla.
   · Base 18 px, botones 56 px, todo lo tocable ≥ 48 px, filas de
     vehículo 72 px. «Letra grande» multiplica por 1,25.
   · Dos animaciones en toda la app: la barra que respira en
     «buscando» y la cinta carro → pasajero. Nada más se mueve, y con
     prefers-reduced-motion tampoco eso.
   ===================================================================== */

/* ---------- Fuentes autoalojadas ----------
   Chivo es un archivo variable (700 a 900) y sirve para las dos
   grosuras; Atkinson Hyperlegible 700 es para la placa y el código,
   porque distingue 0/O, 1/l/I y B/8 al sol y de noche. Subconjunto
   latino: incluye ñ, tildes, ¿¡ y $. La app NO llama a Google Fonts. */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fuentes/chivo-700-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fuentes/atkinson-hyperlegible-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

/* ---------- Paleta ---------- */
:root {
  --amarillo: #FFC400;
  --oro-texto: #8A6500;
  --vinotinto: #7A1B2E;
  --fondo: #FFFCF5;
  --superficie: #FFFFFF;
  --borde: #E8E2D6;
  --tinta: #1B1915;
  --apagado: #5A5650;
  --exito: #146C3A;
  --alerta: #C1271F;
  --cat-taxi: #FFC400;
  --cat-particular: #2F6FB3;
  --cat-moto: #0B7A7C;
  --sobre-amarillo: #1B1915;   /* el único texto que va sobre amarillo */
  --gris-boton: #EFEAE0;
  --sombra: 0 1px 2px rgba(27, 25, 21, 0.08);

  --alto-boton: 56px;
  --alto-tocable: 48px;
  --alto-fila: 72px;
  --radio: 12px;

  --display: 'Chivo', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --legible: 'Atkinson Hyperlegible', 'Roboto', system-ui, sans-serif;
  --cuerpo: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16140F;
    --superficie: #211E17;
    --borde: #3A352B;
    --tinta: #F4EFE2;
    --apagado: #B5AE9E;
    --exito: #4CD48A;
    --alerta: #FF6B6B;
    --oro-texto: #FFC400;      /* el amarillo como texto, solo aquí */
    /* El vinotinto de marca (#7A1B2E) sobre estos fondos medía 1,6:1:
       el logotipo, el nombre del conductor y el borde de la fila
       elegida desaparecían de noche. Un rosa vinotinto claro da 9,5:1
       sobre el fondo y 8,6:1 sobre la superficie. */
    --vinotinto: #E9A9B6;
    --gris-boton: #2C2820;
    --sombra: none;
  }
}

/* ---------- Base ---------- */
html {
  font-size: 18px;          /* base 18, no 16: se lee al sol y sin gafas */
  -webkit-text-size-adjust: 100%;
  background: var(--fondo);
}
/* «Letra grande»: todo por 1,25. Los botones pasan a 60 px como pide
   el brief (no a 70, que es lo que daría el rem). */
html.letra-grande {
  font-size: 22.5px;
  --alto-boton: 60px;
  --alto-tocable: 52px;
}

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

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
  min-height: 100vh;
  min-height: 100dvh;
  /* Mata el retardo del doble toque sin quitarle el pellizco a nadie. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--oro-texto); }
[hidden] { display: none !important; }
svg { display: inline-block; vertical-align: middle; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Armazón ---------- */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
}

/* La barra: SÚBASE a la izquierda, «Central» a la derecha, en TODAS
   las pantallas. En «llegó» se pone amarilla con el resto. */
.barra {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 6px 12px;
  padding-top: max(6px, env(safe-area-inset-top));
  background: var(--fondo);
}
.barra__volver {
  min-width: var(--alto-tocable);
  min-height: var(--alto-tocable);
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-size: 1rem;
  padding: 0 6px;
  border-radius: var(--radio);
}
.barra__logo {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.333rem;
  letter-spacing: 0.04em;
  color: var(--vinotinto);
  text-decoration: none;
  flex: 1;
}
.barra__central {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--alto-tocable);
  padding: 0 14px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta);
  text-decoration: none;
  font-weight: 700;
}
.barra__central svg { width: 20px; height: 20px; }

.pantalla {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 16px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  gap: 12px;
}
.pantalla--con-mapa { padding-top: 0; }

/* Lo tocable vive en la mitad baja: el bloque empuja hacia abajo. */
.abajo { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
/* Y en las pantallas que sí desplazan (precio, viene, viaje) se queda
   pegado al borde inferior: el botón de pedir o de cancelar no puede
   depender de que la persona baje hasta el final. */
.abajo--pegado {
  position: sticky;
  bottom: 0;
  margin-left: -16px; margin-right: -16px;
  padding: 8px 16px max(12px, env(safe-area-inset-bottom));
  background: var(--fondo);
}
body[data-pantalla="llego"] .abajo--pegado { background: var(--amarillo); }

.centrado {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* ---------- Texto ---------- */
.titulo {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.556rem;    /* 28 px */
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.titulo--grande { font-size: 1.889rem; }   /* 34 px */
.subtitulo { font-weight: 700; font-size: 1.111rem; }
.apagado { color: var(--apagado); }
.pequeno { font-size: 0.889rem; }          /* 16 px: el mínimo absoluto */
.exito { color: var(--exito); }
.alerta { color: var(--alerta); }
.error {
  color: var(--alerta);
  font-weight: 700;
  padding: 8px 12px;
  border: 2px solid var(--alerta);
  border-radius: var(--radio);
}
.nota { font-size: 0.889rem; color: var(--apagado); }

/* El precio: Chivo con cifras tabulares para que $6.500 y $13.300
   alineen. 40 px cuando es el protagonista, 28 en filas y franjas. */
.precio {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.556rem;     /* 28 px */
  line-height: 1.1;
  white-space: nowrap;
}
/* 40 px. Puede partirse en dos líneas («$6.500,» / «ni un peso más.»):
   en una sola no cabe en 360 px y el nowrap del precio corriente
   la sacaba de la pantalla. */
.precio--grande { font-size: 2.222rem; font-weight: 900; white-space: normal; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--alto-boton);
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radio);
  font-weight: 700;
  font-size: 1.111rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  background: var(--gris-boton);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.boton:disabled { opacity: 0.55; cursor: default; }
.boton--primario { background: var(--amarillo); color: var(--sobre-amarillo); }
.boton--verde { background: var(--exito); color: #FFFFFF; }
.boton--rojo { background: var(--alerta); color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  /* En oscuro el verde y el rojo son claros: el texto vuelve a Tinta. */
  .boton--verde, .boton--rojo { color: #16140F; }
}
.boton--gris { background: var(--gris-boton); }
.boton--plano {
  background: transparent;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: var(--alto-tocable);
}
.boton--plano.alerta { color: var(--alerta); }
.boton--borde { background: var(--superficie); border: 2px solid var(--borde); }
.boton--enorme { min-height: 72px; font-size: 1.222rem; }
.boton--chico { width: auto; min-height: var(--alto-tocable); font-size: 1rem; padding: 6px 14px; }

/* Botón con relleno que se llena mientras se mantiene pulsado. La
   barra de progreso es un span que crece por transform; sin él nadie
   sabe que hay que seguir apretando. */
.boton--mantener { position: relative; overflow: hidden; }
.boton--mantener .progreso {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: rgba(27, 25, 21, 0.18);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s linear;
  pointer-events: none;
}
.boton--mantener.pulsando .progreso { transform: scaleX(1); }
.boton--mantener > span:not(.progreso) { position: relative; }
.boton--rojo.boton--mantener .progreso { background: rgba(255, 255, 255, 0.3); transition-duration: 2s; }

.fila-botones { display: flex; gap: 10px; }
.fila-botones > * { flex: 1; }

/* ---------- Campos ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.campo__nombre { font-weight: 700; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="search"] {
  min-height: var(--alto-boton);
  padding: 0 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: 1.111rem;   /* 20 px */
  width: 100%;
}
.campo input:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; border-color: var(--tinta); }
.campo input::placeholder { color: var(--apagado); opacity: 1; }
.campo--grande input { font-size: 1.111rem; min-height: 56px; }
.campo--error input { border-color: var(--alerta); }

/* La casilla: 48 px de zona tocable, cuadro de 28 px, SIN premarcar. */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--alto-tocable);
  padding: 6px 0;
}
.casilla input {
  width: 28px; height: 28px; margin: 2px 0 0;
  accent-color: var(--vinotinto);
  flex: none;
}

/* ---------- Fichas (chips) ---------- */
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--alto-tocable);
  padding: 6px 14px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta);
  font-weight: 700;
  font-size: 1rem;
  max-width: 100%;
}
.ficha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha[aria-pressed="true"], .ficha.elegida {
  border-color: var(--vinotinto);
  border-width: 3px;
  padding: 5px 13px;
}
html.letra-grande .fichas--columna { flex-direction: column; }
html.letra-grande .fichas--columna .ficha { width: 100%; justify-content: flex-start; }

/* ---------- Tarjeta ---------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tarjeta--amable { border-style: dashed; }

/* ---------- Filas de vehículo (72 px, apiladas) ---------- */
.vehiculos { display: flex; flex-direction: column; gap: 8px; }
/* Dos renglones en rejilla: arriba el nombre y el precio, abajo el
   para quién y la nota del precio. En 360 px el rango del taxi
   («$13.300 a $14.700») no cabe junto al nombre en una línea: se parte
   en dos a propósito, y la columna del texto puede encoger (minmax 0)
   para que nada se salga con letra grande. */
.vehiculo {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  min-height: var(--alto-fila);
  padding: 8px 12px;
  width: 100%;
  text-align: left;
  border: 3px solid transparent;   /* el ancho no cambia al elegir */
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra);
  outline: 1px solid var(--borde);
}
.vehiculo[aria-pressed="true"] { border-color: var(--vinotinto); outline-color: transparent; }
.vehiculo--sin-carros { opacity: 0.62; }
.vehiculo__icono { grid-row: 1 / 3; width: 40px; height: 31px; }
.vehiculo__nombre { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 1.111rem; line-height: 1.15; }
.vehiculo__precio { grid-column: 3; grid-row: 1; text-align: right; }
.vehiculo__precio .precio { font-size: 1.556rem; }
.vehiculo__precio .precio--rango { font-size: 1.111rem; line-height: 1.1; white-space: normal; display: block; }
.vehiculo__detalle { grid-column: 2; grid-row: 2; font-size: 0.889rem; color: var(--apagado); line-height: 1.3; }
.vehiculo__nota { grid-column: 3; grid-row: 2; font-size: 0.889rem; color: var(--apagado); text-align: right; max-width: 8em; line-height: 1.3; }
.vehiculo__aviso { grid-column: 2 / -1; grid-row: 3; font-size: 0.889rem; color: var(--oro-texto); font-weight: 700; }

/* ---------- Placa con la forma y el color reales ----------
   Taxi: blanca con letras negras. Carro particular y moto: amarilla con
   letras negras. Siempre Atkinson Hyperlegible: es lo que se lee de
   noche contra el carro que llega. */
.placa {
  display: inline-block;
  font-family: var(--legible);
  font-weight: 700;
  font-size: 2.222rem;         /* 40 px en la tarjeta */
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.22em 0.4em 0.18em;
  border: 3px solid #1B1915;
  border-radius: 0.18em;
  background: #FFFFFF;
  color: #1B1915;
  white-space: nowrap;
}
.placa--particular, .placa--moto { background: #FFC400; }
/* 64 px. El tope en vw y el relleno más corto son para que «KVX 123»
   quepa en 360 px sin salirse; con letra grande se queda en el tope. */
.placa--grande { font-size: min(3.556rem, 18vw); border-width: 4px; padding: 0.2em 0.25em 0.16em; }

/* ---------- Código de subida: dos pares en Atkinson 48 px ---------- */
.codigo-subida {
  font-family: var(--legible);
  font-weight: 700;
  font-size: 2.667rem;
  letter-spacing: 0.08em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Las seis casillas del código ---------- */
.otp { position: relative; }
.otp__casillas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.otp__casilla {
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  font-family: var(--legible);
  font-weight: 700;
  font-size: 1.556rem;
}
.otp__casilla.activa { border-color: var(--tinta); }
.otp--error .otp__casilla { border-color: var(--alerta); }
/* El campo real va encima, invisible, y recibe el foco, el pegado y el
   autocompletado del SMS. Dibujar seis campos rompe el one-time-code. */
.otp__real {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.01; font-size: 1.556rem; letter-spacing: 1em; border: 0; background: transparent;
}

/* ---------- Estrellas ---------- */
.estrellas { display: flex; justify-content: center; gap: 4px; }
.estrella {
  width: 52px; height: 52px;
  border: 0; background: transparent; padding: 0;
  /* Vacías en gris apagado, no en el color del borde: con el borde
     medían 1,3 de contraste y no se veían como algo que se toca. */
  color: var(--apagado);
}
.estrella svg { width: 48px; height: 48px; }
.estrella[aria-checked="true"] { color: var(--amarillo); }
@media (prefers-color-scheme: light) { .estrella[aria-checked="true"] { color: var(--oro-texto); } }

/* En «viene» el titular es más corto que en «llegó»: lo que se mira
   es la línea de cuadras, y la tarjeta con la placa tiene que caber
   encima de los botones sin desplazar. */
#pantalla-viene .titulo { font-size: 1.333rem; }
#pantalla-viene .fila-botones .boton { padding-left: 6px; padding-right: 6px; font-size: 1rem; }

/* ---------- Conductor ---------- */
.conductor { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.conductor__inicial {
  width: 64px; height: 64px; border-radius: 50%;
  /* Literal a propósito: en tema oscuro --vinotinto pasa a rosa claro
     y la letra blanca del círculo dejaría de leerse. Este círculo es
     el vinotinto de marca en los dos temas (10,4:1 con el blanco). */
  background: #7A1B2E; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: 1.778rem;
}
.conductor__nombre { font-weight: 700; font-size: 1.222rem; color: var(--vinotinto); }
.sello {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--exito); font-weight: 700; font-size: 0.889rem;
}
.sello svg { width: 18px; height: 18px; }

/* ---------- Mapa ---------- */
.ranura-mapa {
  position: relative;
  /* Un tercio de la pantalla: el mapa es contexto, y con 42 % la
     tarjeta del conductor y los botones quedaban bajo el pliegue. */
  height: 33vh;
  min-height: 180px;
  margin: 0 -16px;
  background: var(--borde);
}
.ranura-mapa--alta { height: 55vh; }
#mapa { position: absolute; inset: 0; }
.ranura-mapa__pin {
  position: absolute; left: 50%; top: 50%;
  /* La punta del alfiler queda EXACTAMENTE en el centro del mapa, que
     es el punto que se va a confirmar. Por eso el desplazamiento es del
     100 % del alto: si fuera la mitad, el pasajero confirmaría un punto
     y el carro iría a otro, unos veinte metros más al norte. */
  width: 24px; height: 40px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 800;
}
.ranura-mapa__pildora {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 800;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px;
  padding: 8px 14px; text-align: center; font-weight: 700; font-size: 0.889rem;
}
.ranura-mapa__gps {
  position: absolute; right: 12px; bottom: 12px; z-index: 800;
  width: var(--alto-tocable); height: var(--alto-tocable);
  border-radius: 50%; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--tinta);
}
.ranura-mapa__gps svg { width: 24px; height: 24px; }
.sin-mapa {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px; color: var(--apagado);
}

/* Pines del mapa y el carro */
.pin-mapa { border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px #1B1915; }
.pin-mapa--origen { background: var(--amarillo); }
.pin-mapa--destino { background: var(--vinotinto); }
.carro-marcador {
  /* La ÚNICA transición del marcador: Leaflet lo mueve con transform y
     así el carro avanza 3 s entre posiciones en vez de saltar. */
  transition: transform 3s linear;
}
.carro-flecha { display: block; width: 30px; height: 30px; transform-origin: 50% 50%; }
.carro-flecha--taxi { color: var(--cat-taxi); }
.carro-flecha--particular { color: var(--cat-particular); }
.carro-flecha--moto { color: var(--cat-moto); }

/* La cinta carro → pasajero (animación 2 de 2) */
.cinta {
  stroke: var(--amarillo);
  stroke-dasharray: 12 10;
  stroke-linecap: round;
  animation: cinta-consume 1.2s linear infinite;
}
/* La ruta por calles: entera y quieta, porque SÍ es un camino. La recta
   de respaldo se queda a rayas y andando (regla de arriba), que es la
   señal de que ahí no hay camino calculado sino una dirección. */
.cinta--ruta { stroke-dasharray: none; animation: none; }

.cinta--apagada { stroke: var(--apagado); animation: none; }
@keyframes cinta-consume { to { stroke-dashoffset: -22; } }

/* Tema oscuro sobre las teselas. Se apaga con poca memoria. */
@media (prefers-color-scheme: dark) {
  html:not(.sin-filtros-mapa) .leaflet-tile { filter: brightness(0.7) contrast(1.1) grayscale(0.2); }
}

/* ---------- La barra que respira (animación 1 de 2) ---------- */
.respira {
  height: 10px;
  border-radius: 999px;
  background: var(--amarillo);
  transform-origin: center;
  animation: respira 2.4s ease-in-out infinite;
}
@keyframes respira {
  0%, 100% { transform: scaleX(0.55); opacity: 0.6; }
  50% { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .respira, .cinta { animation: none; }
  .carro-marcador { transition: none; }
  .boton--mantener .progreso { transition-duration: 0.01s; }
}

/* ---------- Franjas y avisos ---------- */
.franja {
  padding: 12px 16px;
  border-radius: var(--radio);
  background: var(--superficie);
  border: 2px solid var(--amarillo);
  display: flex; flex-direction: column; gap: 4px;
}
.franja--gris { border-color: var(--borde); }
.aviso-amable {
  padding: 12px 14px;
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1px solid var(--borde);
}
.contador { font-variant-numeric: tabular-nums; }

/* ---------- Lista de destinos y viajes ---------- */
.lista { display: flex; flex-direction: column; gap: 8px; }
.resultado {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 64px; padding: 8px 14px; text-align: left; width: 100%;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie);
}
.resultado b { font-size: 1.111rem; }
.resultado span { color: var(--apagado); font-size: 0.889rem; }
.viaje { gap: 4px; }
.viaje__cabeza { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.viaje__estado { font-weight: 700; }
.viaje__estado--cancelada { color: var(--alerta); }
.viaje__estado--terminada { color: var(--exito); }
.viaje .placa { font-size: 1.222rem; border-width: 2px; }

/* ---------- Ajustes ---------- */
.ajuste {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--alto-boton); padding: 8px 0; border-bottom: 1px solid var(--borde);
}
.interruptor { width: 52px; height: 32px; accent-color: var(--vinotinto); }

/* ---------- Hoja (diálogo desde abajo) ---------- */
.hoja {
  border: 0; padding: 0; margin: 0;
  width: 100%; max-width: 560px;
  background: var(--superficie); color: var(--tinta);
  border-radius: 20px 20px 0 0;
  position: fixed; left: 50%; bottom: 0; top: auto; transform: translateX(-50%);
  max-height: 90vh;
}
.hoja::backdrop { background: rgba(27, 25, 21, 0.5); }
.hoja__cuerpo { padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- Pantalla «llegó»: todo amarillo, una vez por viaje ---------- */
body[data-pantalla="llego"] { background: var(--amarillo); color: var(--sobre-amarillo); }
body[data-pantalla="llego"] .barra { background: var(--amarillo); }
body[data-pantalla="llego"] .barra__logo { color: var(--sobre-amarillo); }
body[data-pantalla="llego"] .barra__central { background: transparent; border-color: var(--sobre-amarillo); color: var(--sobre-amarillo); }
/* Fuera de cualquier @media a propósito: la pantalla es amarilla en
   los dos temas, y en oscuro `.nota` heredaba el apagado claro
   (1,4:1 sobre el amarillo) y `.aviso-amable` tomaba la superficie
   oscura con texto casi negro (1,06:1): «No se suba…», la instrucción
   de seguridad más importante de la app, no se leía de noche. */
body[data-pantalla="llego"] .apagado, body[data-pantalla="llego"] .nota { color: #4A4000; }
body[data-pantalla="llego"] .aviso-amable { background: #FFFFFF; color: #1B1915; border: 2px solid #1B1915; }
/* Espacios más cortos que en el resto: con letra grande todo (frase,
   placa, código, precio y los dos botones) tiene que caber en 640 px
   sin que el precio quede debajo de los botones. */
#pantalla-llego { color: var(--sobre-amarillo); gap: 6px; }
#pantalla-llego .abajo--pegado { padding-top: 6px; }
#pantalla-llego .titulo--grande { font-size: 1.889rem; }
#pantalla-llego .boton--plano { color: var(--sobre-amarillo); }

/* ---------- Pictogramas ---------- */
.pict-taxi .cuerpo { fill: var(--cat-taxi); }
.pict-particular .cuerpo { fill: var(--cat-particular); }
.pict-moto .cuerpo { fill: var(--cat-moto); }
.pict-detalle { fill: #1B1915; }
.pict-vidrio { fill: #FFFFFF; opacity: 0.85; }

/* ---------- Pantalla de arranque ---------- */
.marca-grande {
  font-family: var(--display); font-weight: 900; font-size: 2.222rem;
  color: var(--vinotinto); letter-spacing: 0.06em;
}
.icono-arranque { width: 96px; height: 96px; border-radius: 22px; }


/* ------------------------------------------------------------------ */
/* Los carros libres del mapa                                          */
/* ------------------------------------------------------------------ */
/* Más chicos y más apagados que el carro que viene por uno: son
   ambiente, no información que haya que seguir. Si pesaran lo mismo, el
   pasajero no distinguiría cuál es SU carro, que es justo lo que no se
   puede confundir. */
.carro-libre {
  display: block;
  line-height: 0;
  /* 0,8 y no 0,55: por debajo de eso, sobre un mapa claro, los carros
     se pierden entre las calles. Siguen siendo más discretos que la
     flecha del carro que viene por uno, que es lo que importa. */
  opacity: 0.8;
  color: var(--cat-taxi, #FFC400);
}
.carro-libre--particular { color: var(--cat-particular, #2F6FED); }
.carro-libre--moto { color: var(--cat-moto, #C1271F); }


/* ------------------------------------------------------------------ */
/* La caja con la dirección del punto                                  */
/* ------------------------------------------------------------------ */
/* Debajo del mapa y encima del botón, que es el orden en que se lee:
   dónde estoy parado, y solo entonces confirmo. */
.punto-caja {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  min-height: 62px;
}
.punto-caja__pin {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--vinotinto);
}
.punto-caja__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.punto-caja__texto b { font-size: 1.05rem; line-height: 1.25; }
.punto-caja__texto span { font-size: 0.92rem; line-height: 1.3; }