/* Tarjeta tipo billete */
.billete{
  background:var(--blanco); border:1.5px solid var(--tinta); border-radius:var(--radio);
  padding:16px 16px 16px 26px; margin-bottom:12px; position:relative; overflow:hidden;
}
.billete::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:12px;
  border-right:1.5px dashed var(--tinta);
  background:repeating-linear-gradient(to bottom, transparent 0 7px, var(--papel) 7px 14px);
}
.billete h3{font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:-.01em}
.billete .ruta{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--tinta-suave); letter-spacing:.08em; text-transform:uppercase; margin-top:2px}
.fila{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.etiqueta{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--visado); border:1.5px solid var(--visado); border-radius:5px;
  padding:2px 7px; transform:rotate(-2deg); display:inline-block;
}
.etiqueta.rojo{color:var(--sello); border-color:var(--sello); transform:rotate(2deg)}
.etiqueta.ambar{color:#9a6a22; border-color:var(--ambar)}
.anio{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.2rem;
  margin:22px 0 10px; display:flex; align-items:center; gap:12px;
}
.anio::after{content:""; flex:1; height:1.5px; background:var(--tinta); opacity:.18}
.linea-viaje{
  display:flex; gap:12px; align-items:baseline; padding:9px 2px; border-bottom:1px dashed var(--linea);
}
.linea-viaje .mes{font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--tinta-suave); width:34px; flex-shrink:0; text-transform:uppercase}
.linea-viaje .dest{font-weight:600; font-size:.95rem; flex:1}
.linea-viaje .tipo{font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta-suave)}

/* ── Cronología (réplica de Been) ──
   Una tarjeta oscura con el mapa FIJO arriba (position:sticky) y la lista de
   viajes debajo, del más antiguo al más reciente. Al hacer scroll, eventos.js
   marca .on en la fila que queda bajo el mapa y .enc en los países visitados
   hasta ese viaje: el mapa se va encendiendo a medida que avanza la historia.
   El azul muy oscuro es el --tinta de la app llevado a fondo; el encendido es
   el ámbar de "próximo destino", que ya significa viaje en toda la app. */
.crono-been{
  background:#131C2A; border:1.5px solid var(--tinta); border-radius:var(--radio);
  overflow:clip; margin-top:10px;
}
/* Aquí hubo un imán de scroll (scroll-snap proximity hacia esta tarjeta) y se
   quitó: hacía el scroll menos fluido y ni siquiera cumplía su promesa — el
   modo proximity solo actúa si el dedo PARA cerca del anclaje, así que bajando
   con impulso pasaba de largo del título igualmente. Scroll libre y en paz.

   La cabecera se queda fija ARRIBA DEL TODO y el mapa se para justo debajo de
   ella: así, mientras recorres los años, sigue leyéndose de qué va lo que
   estás mirando. Antes el título se iba con el scroll y el mapa se pegaba al
   borde de la pantalla, sin nada que lo nombrara.
   `--cb-cab-alto` la mide eventos.js al pintar, porque el título parte en dos
   líneas en pantallas estrechas (52px en ancha, 81px a 360px). La reserva de
   82px es a propósito generosa: pasarse solo deja un hueco del mismo azul del
   fondo, invisible; quedarse corto metería el mapa por debajo del título. */
.cb-cab{
  position:sticky; top:0; z-index:3; background:#131C2A;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:14px 16px 8px;
}
.cb-cab h2{color:#fff; font-family:'Bricolage Grotesque',sans-serif; font-size:1.55rem; letter-spacing:-.02em}
.cb-cab span{color:#8FA0B5; font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase}
.cb-mapa{position:sticky; top:var(--cb-cab-alto,82px); z-index:2; background:#131C2A; padding:6px 10px 10px}
.cb-mapa svg{width:100%; height:auto; display:block}
.cb-mapa path{fill:#2B3A4F; stroke:#131C2A; stroke-width:.4; transition:fill .3s}
.cb-mapa circle{fill:#2B3A4F; transition:fill .3s}
.cb-mapa path.enc, .cb-mapa circle.enc{fill:var(--ambar)}
/* El hueco grande del final permite que la ÚLTIMA fila también llegue a
   ponerse bajo el mapa: sin él, el scroll se acaba antes y los últimos viajes
   nunca serían la fila activa (en Been pasa igual: su vídeo acaba con la última
   entrada activa y la pantalla vacía debajo). */
.cb-lista{padding:2px 0 55vh}
/* Filas altas a propósito: la fila activa es lo que se lee mientras el mapa se
   enciende, y con filas bajas pasaba demasiado deprisa para leerla. */
.cb-fila{display:flex; align-items:center; gap:10px; padding:16px; cursor:pointer}
.cb-fila:hover{background:rgba(255,255,255,.05)}
.cb-bandera{flex-shrink:0; font-size:1.15rem; line-height:1}
.cb-cuerpo{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.cb-cuerpo b{color:#fff; font-size:1rem; font-weight:600; line-height:1.3}
.cb-cuerpo span{color:#8FA0B5; font-family:'IBM Plex Mono',monospace; font-size:.7rem}
.cb-fila .borrar{flex-shrink:0; color:#8FA0B5}
/* La fila activa: banda ámbar a sangre completo, texto oscuro, como en Been. */
.cb-fila.on{background:var(--ambar)}
.cb-fila.on b{color:#131C2A}
.cb-fila.on span{color:rgba(19,28,42,.62)}
.cb-fila.on .borrar{color:rgba(19,28,42,.62)}
.resumen{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
.dato{
  background:var(--blanco); border:1.5px solid var(--tinta); border-radius:var(--radio);
  padding:12px 10px; text-align:center;
}
.dato b{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.7rem; display:block; line-height:1}
.dato span{font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave)}
.aviso{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--tinta-suave);
  padding:10px 2px 2px; line-height:1.6;
}
form.alta{
  background:var(--blanco); border:1.5px dashed var(--tinta); border-radius:var(--radio);
  padding:14px; margin:18px 0 8px; display:grid; gap:8px;
}
form.alta strong{font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave)}
form.alta input, form.alta select{
  font-family:'Instrument Sans',sans-serif; font-size:.9rem; padding:9px 11px;
  border:1.5px solid var(--linea); border-radius:9px; background:var(--papel); color:var(--tinta); width:100%;
}
form.alta input:focus, form.alta select:focus{outline:2px solid var(--ambar); outline-offset:1px}
form.alta button{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.74rem; letter-spacing:.1em;
  padding:11px; background:var(--tinta); color:var(--papel); border:none; border-radius:9px; cursor:pointer;
  text-transform:uppercase;
}
form.alta button:focus-visible{outline:2px solid var(--ambar); outline-offset:2px}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.borrar{
  background:none; border:none; color:var(--sello); font-family:'IBM Plex Mono',monospace;
  font-size:.62rem; cursor:pointer; padding:2px 4px;
}
.vacio{
  text-align:center; padding:26px 16px; color:var(--tinta-suave);
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; line-height:1.7;
  border:1.5px dashed var(--linea); border-radius:var(--radio); background:var(--blanco);
}
footer{
  position:fixed; bottom:0; left:0; right:0; background:var(--tinta); color:var(--papel);
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 18px; display:flex; justify-content:space-between; gap:10px;
}
footer span b{color:var(--ambar)}


/* ── Estadísticas y mapa ── */
.banner-stats{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--tinta); color:var(--papel); border-radius:var(--radio);
  padding:14px 16px; margin-bottom:14px; cursor:pointer; border:1.5px solid var(--tinta);
}
.banner-stats h3{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.05rem}
.banner-stats span{font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ambar)}
.banner-pasaporte{background:var(--sello); border-color:var(--sello)}
.banner-pasaporte span{color:var(--papel); opacity:.85}