/* ── Página de sellos (imita una página de visados real) ── */
.pas-nav{display:flex; align-items:center; justify-content:space-between; margin:2px 0 10px; gap:10px}
.pas-nav .pas-info{font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave); text-align:center}
.pas-nav button{
  font-family:'IBM Plex Mono',monospace; font-weight:600; background:var(--blanco); border:1.5px solid var(--tinta);
  border-radius:9px; width:38px; height:38px; font-size:1rem; cursor:pointer; color:var(--tinta); flex-shrink:0;
}
.pas-nav button:disabled{opacity:.3; cursor:default}
.pagina-pasaporte{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(115deg, rgba(27,42,65,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(25deg, rgba(27,42,65,.04) 0 1px, transparent 1px 7px),
    #EDE6D2;
  border:1.5px solid var(--tinta); border-radius:6px;
  padding:18px 16px 20px; margin:2px 0 10px;
  box-shadow:inset 0 0 0 1px rgba(27,42,65,.15), 0 6px 16px rgba(27,42,65,.12);
  animation:voltea .4s ease;
}
.pagina-pasaporte::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:16px;
  background:linear-gradient(to right, rgba(27,42,65,.16), transparent);
  pointer-events:none;
}
@keyframes voltea{
  from{ transform:perspective(1000px) rotateY(-10deg); opacity:.3; }
  to{ transform:perspective(1000px) rotateY(0deg); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .pagina-pasaporte{animation:none} }
.pasaporte-cab{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  border-bottom:1.5px solid rgba(27,42,65,.3); padding-bottom:10px; margin-bottom:16px;
}
.pasaporte-cab h3{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1rem; letter-spacing:.01em; color:var(--tinta)}
.pasaporte-cab .bilingue{font-family:'IBM Plex Mono',monospace; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); margin-top:2px}
.pasaporte-cab .num-pagina{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.08em; color:var(--tinta-suave);
  border:1px solid rgba(27,42,65,.35); border-radius:5px; padding:4px 8px; flex-shrink:0;
}
/* Sellos de un tamaño fijo, tantos por fila como quepan. No un número de
 * columnas por cada tamaño de pantalla.
 *
 * Antes esto era `repeat(2,1fr)` y `repeat(3,1fr)` a partir de 560px, y en
 * escritorio se rompía por dos motivos a la vez:
 *
 * 1. El `1fr` a secas es `minmax(auto, 1fr)`, y ese mínimo `auto` lo marca el
 *    contenido. Los sellos llevan `aspect-ratio:1/1`: su alto lo decide la fila
 *    y su ancho se deduce del alto, así que en cuanto el alto crecía el ancho
 *    mínimo crecía con él y dejaba de caber. Medido en una columna de 925 px,
 *    las tres columnas salían de 305, 407 y 407 —1.121 en total— y los sellos
 *    de la derecha se salían de la página del pasaporte.
 *
 * 2. Aun cuadrando eso, tres columnas en 925 px dan sellos de 306 px. El diseño
 *    los piensa de unos 154 (dos columnas en una pantalla de móvil), así que en
 *    escritorio salían al doble de tamaño y solo entraban seis por página.
 *
 * `auto-fill` con un mínimo de 140 px arregla los dos de una vez: el mínimo ya
 * no lo negocia el contenido, y el número de columnas sale del ancho que haya.
 * Da 2 en un móvil, 3 hacia los 560 px —lo mismo que antes— y 6 en la columna de
 * escritorio, con sellos de 151 px: el tamaño que el diseño pedía.
 *
 * (Los sellos miden algo más que su columna si se les mide la caja envolvente:
 * van rotados a propósito, y una caja girada ocupa más. Eso es el efecto de
 * sellos torcidos, no un desbordamiento.) */
.pasaporte-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:8px 4px; position:relative; z-index:1;
}
.sello-pais{
  position:relative; display:block; width:100%; aspect-ratio:1/1;
  padding:6px; cursor:pointer; background:none; border:none;
  transform:rotate(var(--rot,0deg)) translateY(var(--desp,0px));
  transition:transform .15s; color:var(--visado);
}
.sello-pais.sello-rect{aspect-ratio:4/3}
.sello-pais:hover, .sello-pais.sel{ transform:rotate(0deg) translateY(0) scale(1.08); z-index:2; }
.sello-pais.sel .sello-svg{ outline:2px solid var(--ambar); outline-offset:3px; border-radius:50%; }
.sello-pais .sello-svg{ width:100%; height:100%; display:block; mix-blend-mode:multiply; opacity:.85; }
.sello-pais.sello-rojo{color:var(--sello)}
.sello-pais.sello-prox{color:#9a6a22; opacity:.7}
.sello-pais.sello-prox .sello-svg{ stroke-dasharray:3 2; }
.pasaporte-pie{font-family:'IBM Plex Mono',monospace; font-size:.56rem; letter-spacing:.06em; color:var(--tinta-suave); text-align:center; margin-top:14px; position:relative; z-index:1}
.mapa-caja{
  background:var(--blanco); border:1.5px solid var(--tinta); border-radius:var(--radio);
  padding:10px; margin:14px 0 10px; overflow:hidden; position:relative;
}
.tip-pais{position:absolute; z-index:5; pointer-events:none; background:var(--tinta); color:var(--blanco); border-radius:8px; padding:7px 11px; font-size:.78rem; max-width:230px; box-shadow:0 4px 14px rgba(27,42,65,.35)}
.tip-pais b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:.88rem; line-height:1.25}
.tip-pais span{font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:#C9CFC9; letter-spacing:.03em}
.mapa-caja svg{width:100%; height:auto; display:block}
.mapa-caja path{fill:#DFE4DF; stroke:var(--blanco); stroke-width:.5; cursor:pointer; transition:fill .12s}
.mapa-caja path.vis, .mapa-caja circle.vis{fill:var(--visado)}
.mapa-caja path.esc, .mapa-caja circle.esc{fill:#7E93AE}
.mapa-caja path.prox, .mapa-caja circle.prox{fill:var(--ambar)}
.mapa-caja path.sel, .mapa-caja circle.sel{fill:var(--sello) !important}
.mapa-caja path:hover, .mapa-caja circle:hover{opacity:.82}
.mapa-caja circle.chincheta{stroke:var(--blanco); stroke-width:1; cursor:pointer; vector-effect:non-scaling-stroke}

/* ── Zoom a un país ── */
/* Las ciudades selladas, visibles al acercarse a un país. El texto lleva halo
   blanco (paint-order pinta el trazo por detrás del relleno) para leerse tanto
   sobre el verde del país como sobre el gris del vecino. */
/* Sin pointer-events:none: el punto debe poder enseñar su <title> al pasar por
   encima, que es donde viven los nombres que no cupieron como etiqueta. */
.mapa-caja .pto-ciudad{fill:#F4C430; stroke:var(--blanco); stroke-width:1; vector-effect:non-scaling-stroke}
.mapa-caja .txt-ciudad{
  fill:var(--tinta); stroke:var(--blanco); paint-order:stroke; stroke-linejoin:round;
  font-family:'IBM Plex Mono',monospace; font-weight:600; pointer-events:none;
}
.mapa-volver{
  position:absolute; top:16px; right:16px; z-index:4;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--tinta); color:var(--blanco); border:none; border-radius:999px;
  padding:7px 12px; cursor:pointer; box-shadow:0 3px 10px rgba(27,42,65,.3);
}
.mapa-volver:hover{opacity:.88}
.leyenda{display:flex; flex-wrap:wrap; gap:12px; padding:8px 4px 0; font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-suave)}
.leyenda i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.panel-pais{min-height:120px}
/* Las visitas de la ficha del país: una línea por viaje, fecha y nombre. */
.visitas-pais{margin-top:10px; display:flex; flex-direction:column; gap:4px}
.visita-fila{
  display:flex; align-items:baseline; gap:10px; font-size:.8rem;
  padding:5px 8px; background:var(--papel); border:1px dashed var(--linea); border-radius:8px;
}
.visita-fila .mono{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tinta-suave); flex-shrink:0; width:64px;
}
.visita-fila b{font-family:'Bricolage Grotesque',sans-serif; font-size:.8rem}
.chip-ciudad b{font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--sello)}
.chip-ciudad{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.66rem;
  border:1.5px solid var(--linea); border-radius:999px; padding:4px 10px; margin:3px 3px 0 0;
  background:var(--papel);
}





/* Las visitas de la ficha de país se abren: misma página de viaje que desde
   la cronología o el cuaderno. La flecha lo delata sin leer nada. */
.visita-fila.toca{ cursor:pointer }
.visita-fila.toca:hover b{ text-decoration:underline }
.visita-fila .visita-ir{ margin-left:auto; color:var(--visado); font-weight:700 }