/* ═══════════════════ mapa del mundo: imagen + polígonos ═══════════════════ */

#panel-mundo { margin: 0 -20px; }              /* rompe el padding de main */

.mundo {
  position: relative;
  display: grid; grid-template-columns: 290px 1fr;
  /* la altura de la cabecera la mide app.js: si se cambia el menú de arriba,
     esto se ajusta solo y no aparece una franja negra abajo */
  height: calc(100vh - var(--topbar, 64px));
  border-top: 1px solid var(--line);
  transition: grid-template-columns .28s cubic-bezier(.2,.8,.3,1);
}
/* Plegado: el mapa se queda con todo el ancho. */
.mundo.plegado { grid-template-columns: 0 1fr; }
.mundo.plegado .mundo-menu { opacity: 0; pointer-events: none; }

#mm-toggle {
  position: absolute; z-index: 6; top: 10px; left: 300px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(18,21,29,.9); border: 1px solid var(--line);
  color: var(--txt-dim); border-radius: 9px; cursor: pointer; font-size: 15px;
  transition: left .28s cubic-bezier(.2,.8,.3,1), color .15s, border-color .15s;
  backdrop-filter: blur(6px);
}
#mm-toggle:hover { color: var(--txt); border-color: var(--accent-2); }
.mundo.plegado #mm-toggle { left: 10px; }

/* ── menú lateral ── */
.mundo-menu {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--bg-2); border-right: 1px solid var(--line);
  transition: opacity .2s;
}
.mm-buscar { padding: 12px; border-bottom: 1px solid var(--line); }
.mm-buscar input {
  width: 100%; box-sizing: border-box; background: var(--bg);
  border: 1px solid var(--line); color: var(--txt);
  padding: 8px 11px; border-radius: 8px; font: inherit; font-size: 13px;
}
.mm-tipos { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mm-tipos button {
  flex: 1; background: transparent; border: 1px solid var(--line); color: var(--txt-dim);
  padding: 6px 4px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 11px;
}
.mm-tipos button[aria-pressed="true"] { background: var(--bg-3); color: var(--txt); border-color: var(--accent-2); }

/* 12 px a los lados: misma columna que el buscador y que los filtros */
.mm-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px; }
.mm-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
}

/* ── cuánto llevas de un sitio ──────────────────────────────────────────────
   Un anillo que se rellena y el número. Ocupa lo que una palabra corta y se
   lee sin leerlo: si está verde, ese sitio ya está hecho. */
.mm-pct {
  display: flex; align-items: center; gap: 5px; flex: none;
  font: 10px/1 var(--mono); font-synthesis: none; color: var(--txt-dim);
}
.mm-pct > i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--accent-2) calc(var(--p) * 1%), var(--line) 0);
}
.mm-pct.vacio > i { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.mm-pct.lleno { color: var(--ok); }
.mm-pct.lleno > i { background: var(--ok); }
.mm-item:hover { background: var(--bg-3); }
.mm-item .tipo { font: 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-dim); }
.mm-vacio { padding: 26px 14px; color: var(--txt-dim); font-size: 12px; line-height: 1.6; text-align: center; }

.mm-pie { display: flex; gap: 5px; padding: 10px 12px; border-top: 1px solid var(--line); }
.mm-pie button {
  flex: 1; background: var(--bg-3); border: 1px solid var(--line); color: var(--txt-dim);
  padding: 7px 5px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 11px;
}
.mm-pie button:hover { color: var(--txt); border-color: var(--accent-2); }
.mm-pie button[aria-pressed="true"] { color: var(--txt); border-color: var(--accent-2); }

/* ── panel del editor (solo en local) ── */
.mm-editor { border-top: 1px solid var(--line); padding: 12px; max-height: 52vh; overflow-y: auto;
             overscroll-behavior: contain; }
.mm-editor h3 { margin: 0 0 8px; font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--warn); }
.mm-ayuda { font-size: 11px; line-height: 1.6; color: var(--txt-dim); margin: 0 0 12px; }
.mm-editor label { display: block; font-size: 11px; color: var(--txt-dim); margin-bottom: 9px; }
.mm-editor input, .mm-editor select {
  width: 100%; box-sizing: border-box; margin-top: 4px; background: var(--bg);
  border: 1px solid var(--line); color: var(--txt);
  padding: 7px 9px; border-radius: 7px; font: inherit; font-size: 13px;
}
.mm-acciones { display: flex; gap: 6px; }
.mm-acciones button {
  flex: 1; border: 0; border-radius: 7px; padding: 8px; cursor: pointer; font: inherit; font-size: 12px;
}
.mm-acciones button[type="submit"] { background: var(--accent-2); color: #fff; }
.mm-acciones #mm-cancelar { background: var(--bg-3); color: var(--txt-dim); }
.mm-marcadas { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.mm-marcadas div {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 4px 6px; border-radius: 5px; font-size: 12px; cursor: pointer;
}
.mm-marcadas div:hover { background: var(--bg-3); }
.mm-marcadas button { background: none; border: 0; color: var(--txt-dim); cursor: pointer; }
.mm-marcadas button:hover { color: var(--accent); }

/* ── el mapa ── */
.mundo-mapa { position: relative; overflow: hidden; background: #0a0c11; }
#mapa-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#mapa-svg.arrastrando { cursor: grabbing; }
#mapa-svg.editando { cursor: crosshair; }
#mapa-svg image { image-rendering: pixelated; }
/* La bola del jugador y las flechas del rastreo, en un svg aparte encima del
   mapa (ver montar() en mapa-mundo.js). `will-change` le da su propia capa: así
   su animación repinta solo su trocito y no la imagen del mapa entera. No
   recibe clics: el mapa de debajo sigue siendo el que se pulsa y se arrastra. */
.mapa-encima {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; will-change: transform;
}

.poli { cursor: pointer; }
/* non-scaling-stroke: el trazo se mide en píxeles de pantalla y NO engorda al
   acercar el zoom. Sin esto, marcar con precisión es imposible. */
/* Los recuadros no se ven: lo que se enseña al pasar por encima es un halo
   difuminado, para que el resalte siga la forma del sitio y no cante que es
   una caja. La forma sigue ahí, invisible, para poder pulsarla. */
.poli .forma { fill: transparent; stroke: none; }
.poli .halo {
  fill: var(--halo, #8cc8ff); opacity: 0;
  /* el trazo engorda la mancha: sin él, una cueva de cuatro píxeles no se ve */
  stroke: var(--halo, #8cc8ff); stroke-width: var(--grosor-halo, 8px);
  stroke-linejoin: round;
  filter: blur(var(--desenfoque, 6px));
  transition: opacity .22s ease;
  pointer-events: none;
}
.poli.t-ciudad { --halo: #ff9a86; }
.poli.t-lugar  { --halo: #ffcc70; }
.poli:hover .halo { opacity: .55; }
/* la que se está mirando se queda encendida */
.poli.sel .halo { opacity: .8; --halo: #ffd76a; }
.poli.destacada .halo { opacity: .85; --halo: var(--rastro-col, #b478ff); }
.poli.destacada:hover .halo { opacity: 1; }
.poli.apagada { pointer-events: none; }

/* ── flechas del borde: hacia dónde está lo que se sigue ── */
.capa-flechas { pointer-events: none; }
.flecha-rastro path {
  fill: var(--rastro-col, #b478ff); stroke: #1c0a33;
  stroke-width: var(--etq-borde, 2px); stroke-linejoin: round;
  animation: flecha-empuja 1.5s ease-in-out infinite;
}
/* el empujón va en el eje X LOCAL, que tras el rotate() apunta a la zona */
@keyframes flecha-empuja {
  50% { translate: var(--empuje, 6px) 0; }
}
.flecha-n {
  fill: #fff; stroke: #1c0a33; paint-order: stroke;
  font-family: var(--mono); font-synthesis: none;
  text-anchor: middle; dominant-baseline: central;
}
@media (prefers-reduced-motion: reduce) { .flecha-rastro path { animation: none; } }

/* ── bocadillo del GPS cuando no hay posición ── */
.gps-caja { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; }
.gps-caja .gps { position: static; }
.gps-globo {
  font: 11px/1 var(--mono); font-synthesis: none; white-space: nowrap;
  background: var(--bg-2); color: var(--txt); border: 1px solid var(--line);
  padding: 9px 12px; border-radius: 9px; position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transform-origin: right center;
}
/* el pico, apuntando a la flecha */
.gps-globo::after {
  content: ''; position: absolute; right: -5px; top: 50%; margin-top: -5px;
  width: 9px; height: 9px; background: var(--bg-2);
  border-right: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.gps-globo.sale { animation: globo-sale 2.6s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes globo-sale {
  0%   { opacity: 0; transform: translateX(14px) scale(.7); }
  12%  { opacity: 1; transform: translateX(0) scale(1.04); }
  20%  { transform: translateX(0) scale(1); }
  82%  { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(10px) scale(.85); }
}

/* chincheta del rastreo: lo que de verdad se ve cuando la zona es diminuta */
.poli .pin {
  fill: var(--rastro-col, #b478ff); stroke: #1c0a33;
  stroke-width: var(--etq-borde, 2px); pointer-events: none;
}
.poli.destacada:hover .pin { fill: #fff; }

/* El latido va en cada zona DESTACADA y solo en ellas. Estaba en la capa entera
   y corría siempre, siguieras o no a un Pokémon: animar una variable que se
   hereda obligaba a recalcular el estilo de los 1300 nodos del mapa en cada
   fotograma (medido con el mapa quieto: 1,6 s de cada 3 s). Los 25 sitios de un
   Rattata siguen latiendo a la vez porque dibujar() los crea todos de golpe, en
   el mismo fotograma, y sus relojes arrancan juntos. */
.poli.destacada { animation: rastro-late 2.2s ease-in-out infinite; }
@keyframes rastro-late { 50% { --rastro-alfa: .45; } }
@property --rastro-alfa { syntax: '<number>'; inherits: true; initial-value: 1; }
.poli.destacada .halo, .poli.destacada .pin { opacity: var(--rastro-alfa, 1); }
.poli.destacada:hover .halo, .poli.destacada:hover .pin { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .poli.destacada { animation: none; } }
.poli.apagada .halo, .poli.apagada .etq { opacity: 0; }
/* El nombre solo aparece al pasar por encima de la zona: con 500 zonas marcadas
   el mapa sería ilegible. Tamaño relativo a la vista para que no crezca al
   hacer zoom. */
.poli .etq {
  fill: #fff; font-size: var(--etq, 15px); font-weight: 600; text-anchor: middle;
  paint-order: stroke; stroke: rgba(0,0,0,.8); stroke-width: var(--etq-borde, 3px);
  pointer-events: none; opacity: 0; transition: opacity .18s;
}
.poli:hover .etq, .poli.sel .etq { opacity: 1; }
/* La bola del jugador va clavada en el centro de su recuadro, justo donde cae
   el nombre. Es el nombre el que baja a la línea de debajo, y no la bola la que
   sube: subirla la descuadraba al alejar el zoom. */
.poli.aqui .etq { translate: 0 var(--bajo-bola, 0); }

/* trazado en curso */
.boceto {
  fill: rgba(240,168,60,.14); stroke: var(--warn); stroke-width: 1.25;
  stroke-dasharray: 5 4; vector-effect: non-scaling-stroke;
}
.vertice { fill: var(--warn); stroke: #0b0d12; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vertice.inicio { fill: #fff; stroke: var(--warn); stroke-width: 1.5; }

/* marcador de posición */
/* La pokéball del jugador. Gira sobre sí misma y respira: quieta se confundía
   con cualquier otro punto del mapa. La sombra la despega del fondo, que por
   debajo puede haber tanto mar azul como hierba.

   Es HTML encima del mapa y no parte del svg (ver montar() en mapa-mundo.js):
   todo lo que se anima aquí es `rotate`, `scale`, `translate` u `opacity`, que
   la GPU mueve sola sin pasar por el hilo principal. Dentro del svg, las mismas
   animaciones se llevaban un 30 % del tiempo de la página con el mapa quieto.
   --r es el radio en píxeles; lo pone escalarMarcador() según el zoom. */
.marca-jugador {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  pointer-events: none; will-change: transform;
}
.marca-jugador[hidden] { display: none; }
.marca-jugador .bola, .marca-jugador .pulso {
  position: absolute; left: calc(var(--r, 20px) * -1); top: calc(var(--r, 20px) * -1);
  width: calc(var(--r, 20px) * 2); height: calc(var(--r, 20px) * 2);
}
.marca-jugador .bola {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
  animation: mk-gira 4.5s linear infinite, mk-late 2.1s ease-in-out infinite;
}
.marca-jugador .bola svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes mk-gira { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes mk-late { 0%, 100% { scale: 1; } 50% { scale: 1.22; } }

/* Pulso: anillos que salen del centro y se apagan. */
.marca-jugador .pulso {
  box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid #cfe3ff; opacity: 0;
  animation: mk-pulso 2.4s cubic-bezier(.2,.6,.35,1) infinite;
}
.marca-jugador .pulso.tarde { animation-delay: 1.2s; }
@keyframes mk-pulso {
  0%   { scale: .75; opacity: .6; }
  70%  { scale: 2.6; opacity: 0; }
  100% { scale: 2.6; opacity: 0; }
}

/* Última posición conocida (el emulador ya no manda nada): se deja puesta pero
   apagada y echando zetas, para no dar a entender que hay alguien jugando ahí. */
.marca-jugador.frio { opacity: .6; }
.marca-jugador.frio .bola { animation-duration: 9s, 4.5s; }

/* Las zetas suben en diagonal y se apagan, una detrás de otra. Mismo sitio y
   tamaño que tenían dentro del svg, medidos en radios de la bola. */
.marca-jugador .zzz b {
  position: absolute; line-height: 1; translate: 0 0;
  color: #eaf1ff; font-family: var(--f-titulo, ui-monospace, monospace); font-weight: 700;
  -webkit-text-stroke: calc(var(--r, 20px) * .07) #0b0d12; paint-order: stroke fill;
  opacity: 0; animation: mk-zzz 3s ease-in-out infinite;
}
.marca-jugador .zzz .z1 { left: calc(var(--r, 20px) * .95); top: calc(var(--r, 20px) * -1.85); font-size: calc(var(--r, 20px) * .85); }
.marca-jugador .zzz .z2 { left: calc(var(--r, 20px) * 1.55); top: calc(var(--r, 20px) * -2.8);  font-size: calc(var(--r, 20px) * 1.05); animation-delay: 1s; }
.marca-jugador .zzz .z3 { left: calc(var(--r, 20px) * 2.2);  top: calc(var(--r, 20px) * -3.9);  font-size: calc(var(--r, 20px) * 1.3);  animation-delay: 2s; }
/* el desplazamiento va en % de la propia letra: dentro del svg eran ~0,4 radios
   y una zeta mide casi un radio */
@keyframes mk-zzz {
  0%   { opacity: 0;   translate: 0 35%; }
  22%  { opacity: 1; }
  70%  { opacity: .85; }
  100% { opacity: 0;   translate: 45% -110%; }
}

@media (prefers-reduced-motion: reduce) {
  .marca-jugador .bola, .marca-jugador .pulso, .marca-jugador .zzz b { animation: none; }
  .marca-jugador .pulso { opacity: .35; }
  .marca-jugador .zzz b { opacity: .9; }
}

/* ── selector de modo del editor ── */
.mm-modos { display: flex; gap: 5px; margin-bottom: 10px; }
.mm-modos button {
  flex: 1; background: transparent; border: 1px solid var(--line); color: var(--txt-dim);
  padding: 6px 4px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 11px;
}
.mm-modos button[aria-pressed="true"] { background: var(--bg-3); color: var(--warn); border-color: var(--warn); }

/* ── con el editor activo, las zonas ya guardadas enseñan borde y vértices ── */
#mapa-svg.editando .poli .forma {
  stroke-width: 1.25; stroke-dasharray: 5 4;
  fill: rgba(255,255,255,.06);
}
#mapa-svg.editando .poli.t-ciudad .forma { stroke: #ff8c78; }
#mapa-svg.editando .poli.t-lugar  .forma { stroke: #ffc86e; }
#mapa-svg.editando .poli.sel .forma { stroke: var(--warn); stroke-width: 2; stroke-dasharray: none; }
.vert-guardado {
  fill: #fff; stroke: #0b0d12; stroke-width: .75; pointer-events: none;
  vector-effect: non-scaling-stroke;
}
#mapa-svg.modo-rect { cursor: crosshair; }

/* el boceto sirve para figura libre y para caja */
rect.boceto {
  fill: rgba(240,168,60,.14); stroke: var(--warn); stroke-width: 1.25;
  stroke-dasharray: 5 4; vector-effect: non-scaling-stroke;
}

/* El radio también se recalcula contra la vista (lo pone aplicar() en --vr):
   la propiedad CSS `r` gana al atributo, así que al hacer zoom no crecen. */
.vertice, .vert-guardado { r: var(--vr, 4px); }
.vertice.inicio { r: calc(var(--vr, 4px) * 1.5); }

/* aviso de guardado del editor */
.mm-guardado {
  margin: 6px 0 2px; padding: 0 6px; height: 0; overflow: hidden;
  font: 11px/1.6 var(--font); color: var(--ok);
  opacity: 0; transform: translateY(-3px);
  transition: opacity .2s, transform .2s, height .2s;
}
.mm-guardado.visible { height: 20px; opacity: 1; transform: none; }

/* segunda fila de filtros: región */
.mm-regiones { margin-top: -4px; }
.mm-regiones button { font-size: 10px; padding: 5px 3px; }
.mm-regiones button[aria-pressed="true"] { color: var(--accent-2); border-color: var(--accent-2); }

/* ── menú de encuadrar: todo o una región ── */
.mm-encuadrar-menu {
  margin: 0 10px 6px; padding: 5px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.mm-encuadrar-menu button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: transparent; border: 0; border-radius: 7px;
  color: var(--txt-dim); cursor: pointer; font: inherit; font-size: 12px;
  padding: 8px 10px; text-align: left;
  transition: background .15s, color .15s;
}
.mm-encuadrar-menu button:hover { background: rgba(255,255,255,.06); color: var(--txt); }
.mm-encuadrar-menu button i {
  font-style: normal; font: 10px/1 var(--mono); font-synthesis: none;
  color: var(--txt-dim); background: rgba(0,0,0,.35); padding: 4px 7px; border-radius: 99px;
}

/* ═══════════════ ficha de zona: panel lateral, no ventana ═══════════════════
   Se mira lo que hay en la ruta SIN perder el mapa de vista: la zona sigue
   resaltada al lado y se puede saltar a la de al lado sin cerrar nada. */
.zona-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 7;
  width: min(430px, 42vw);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(19,23,33,.97), rgba(13,16,23,.97));
  backdrop-filter: blur(10px);
  border-left: 2px solid #05070d;
  box-shadow: -18px 0 46px rgba(0,0,0,.55), inset 1px 0 0 rgba(150,190,255,.18);
  animation: zp-entra .28s cubic-bezier(.2,.9,.25,1);
}
.zona-panel[hidden] { display: none; }
@keyframes zp-entra { from { transform: translateX(24px); opacity: 0; } }

.zp-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.zp-cerrar {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: rgba(0,0,0,.35); border: 0; border-radius: 8px; cursor: pointer;
  color: #c9dcff; font-size: 22px; line-height: .9; padding: 4px 9px;
  transition: background .18s, transform .18s;
}
.zp-cerrar:hover { background: rgba(0,0,0,.6); color: #fff; transform: rotate(90deg); }

/* dentro del panel el contenido va más apretado que en una ventana grande */
.zona-panel .cabecera { padding: 18px 18px 16px; gap: 14px; }
.zona-panel .cabecera img { width: 62px; height: 62px; }
.zona-panel .seccion { padding: 14px 16px; }
.zona-panel .ze { grid-template-columns: 38px 1fr auto; gap: 9px; padding: 6px 9px; }
/* el panel del rastreo no lleva sprite: sin esto el nombre cae en la columna
   de 38 px y "Nv 47" se parte en dos líneas */
.zona-panel .ze:not(:has(img)) { grid-template-columns: 1fr auto; }
.zona-panel .ze img { width: 36px; height: 36px; }
.zona-panel .ze-tipos { display: none; }          /* no cabe: va en la ficha */
.zona-panel .zp-barra { width: 44px; }

@media (max-width: 860px) {
  .zona-panel { width: 100%; }
}

/* ── la zona que se está mirando, resaltada ── */
@keyframes latido-zona { 50% { opacity: 1; } }
.poli.sel .halo { animation: latido-zona 2.1s ease-in-out infinite; }
.poli.sel .etq { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .poli.sel .forma { animation: none; }
}

/* de qué parte del sitio sale el encuentro (Casa Fantasma dentro de la Ruta 10) */
.ze-sub { color: var(--accent-2); font-weight: 400; }

/* ── tiradores de la zona seleccionada: mover y estirar ── */
.tirador {
  fill: var(--warn); stroke: #0b0d12; stroke-width: 1.5;
  vector-effect: non-scaling-stroke; cursor: grab;
}
.tirador:hover { fill: #fff; }
#mapa-svg.editando .poli.sel { cursor: move; }
#mapa-svg.manipulando, #mapa-svg.manipulando * { cursor: grabbing !important; }

/* el modo mover pinta el cursor de agarre sobre las zonas */
#mapa-svg.modo-mover .poli { cursor: move; }
#mapa-svg.modo-mover { cursor: default; }

/* borrar desde la ficha del editor */
#mm-borrar { border-color: var(--accent); color: #ffb8bf; }
#mm-borrar:hover { background: rgba(238,43,59,.18); color: #fff; }

/* ═══════════════════ cajas de región cuando el mapa está lejos ═════════════ */
.capa-region { pointer-events: none; }
#mapa-svg.por-region .capa-region { pointer-events: auto; }
/* Con las cajas de región puestas las zonas se apagan para no competir con
   ellas, pero el atenuado va POR ZONA y no en la capa: si fuera en la capa, lo
   que se está siguiendo no podría recuperar su opacidad (un hijo no puede
   pasarse de la del padre) y las chinchetas se perdían al alejarse. */
#mapa-svg.por-region .capa-poli { pointer-events: none; }
#mapa-svg.por-region .poli { opacity: .25; }
#mapa-svg.por-region .poli.destacada { opacity: 1; }

.reg { cursor: pointer; }
.reg-caja {
  fill: rgba(120,180,255,.07); stroke: rgba(160,205,255,.5);
  stroke-width: 1.5; stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
  transition: fill .2s, stroke .2s;
}
.reg:hover .reg-caja { fill: rgba(120,180,255,.16); stroke: #cfe4ff; stroke-dasharray: none; }
.reg-txt {
  fill: #fff; text-anchor: middle; dominant-baseline: middle;
  font-family: var(--mono); font-synthesis: none; letter-spacing: .08em;
  paint-order: stroke; stroke: rgba(0,0,0,.8);
  pointer-events: none;
}
.reg:hover .reg-txt { fill: #ffe9a8; }

/* ══════════════════════════ brújula del jugador ════════════════════════════ */
.gps {
  position: absolute; right: 18px; bottom: 18px; z-index: 6;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #2f7fe0, #1b5bb0);
  border: 2px solid #0a1830; color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 0 3px rgba(47,127,224,.18);
  transition: transform .18s var(--curva, ease), box-shadow .2s, filter .2s;
}
.gps svg { width: 22px; height: 22px; fill: currentColor; transform: rotate(-8deg); }
.gps:hover { transform: scale(1.08); }
.gps[data-on="false"] {
  background: linear-gradient(180deg, #2a2f3c, #1c2029);
  color: #6b7488; box-shadow: 0 4px 12px rgba(0,0,0,.4);
  cursor: default;
}
.gps[data-on="false"]:hover { transform: none; }

/* ═════════════════════ cápsula de lo que se está siguiendo ═════════════════ */
.rastro {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 6px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(24,30,44,.96), rgba(15,19,28,.96));
  border: 1px solid #3a5580;
  box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(150,190,255,.15) inset;
  animation: rastro-entra .25s cubic-bezier(.2,.9,.25,1);
}
.rastro[hidden] { display: none; }
@keyframes rastro-entra { from { opacity: 0; transform: translate(-50%, -8px); } }
.rastro img { width: 34px; height: 34px; image-rendering: pixelated; }
.rastro span { font: .82em/1 var(--font); color: var(--txt); white-space: nowrap; }
.rastro button {
  background: rgba(255,255,255,.06); border: 0; border-radius: 50%;
  width: 24px; height: 24px; color: var(--txt-dim); cursor: pointer;
  font-size: 16px; line-height: 1; transition: background .15s, color .15s;
}
.rastro button:hover { background: var(--accent); color: #fff; }

/* ══════════════════ Pokémon encontrados en el buscador ═════════════════════ */
.mm-pokemon { padding: 0 10px 8px; display: flex; flex-direction: column; gap: 4px; }
.mm-pokemon[hidden] { display: none; }
.mm-mon {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: rgba(125,252,176,.07); border: 1px solid #2f6b45; border-radius: 9px;
  color: var(--txt); cursor: pointer; padding: 5px 9px; font: inherit; text-align: left;
  transition: background .15s, border-color .15s;
}
.mm-mon:hover { background: rgba(125,252,176,.16); border-color: #7dfcb0; }
.mm-mon img { width: 32px; height: 32px; }
.mm-mon .tipo { font: 10px/1.5 var(--mono); color: var(--txt-dim); font-synthesis: none; }

/* ── en qué región estás mirando ─────────────────────────────────────────────
   Abajo a la izquierda, fuera del camino del menú y de la brújula. Negra con
   letra blanca: se lee sobre el mar y sobre la hierba igual de bien. */
.reg-actual {
  position: absolute; left: 18px; bottom: 18px; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(8,10,14,.88); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font: 12px/1 var(--mono); font-synthesis: none; letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  transition: opacity .2s;
}
/* la chapa no se pulsa, pero las medallas y la copa sí explican qué son */
.reg-actual { pointer-events: none; }
.reg-actual [title] { pointer-events: auto; }
/* sin región clara el rótulo sigue ahí, pero sin robar atención */
.reg-actual[data-global="true"] { color: var(--txt-dim); }

/* ── medallas de la región: los sprites de verdad, apagados hasta ganarlas ──
   Mismo tratamiento que en la cabecera de la lista: en gris y a media luz las
   que faltan, a color y con brillo las conseguidas. */
.ra-meds { display: flex; gap: 3px; }
.ra-med {
  width: 18px; height: 18px; object-fit: contain;
  filter: grayscale(1) brightness(.45); opacity: .45;
  transition: filter .35s ease, opacity .35s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.ra-med.on {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--med) 70%, transparent));
  opacity: 1; transform: translateY(-1px);
}

/* ── la Liga de esa región ── */
.ra-liga svg { display: block; width: 15px; height: 15px; fill: rgba(255,255,255,.22); stroke: rgba(255,255,255,.22); }
.ra-liga.on svg { fill: var(--pk-oro); stroke: var(--pk-oro); filter: drop-shadow(0 0 6px rgba(240,168,60,.55)); }
/* con el menú desplegado la card se aparta para no quedar debajo */
.mundo:not(.plegado) .reg-actual { left: 308px; }


/* ═══════════════════════ Salón de la Fama ══════════════════════════════════
   Sale al pulsar la copa de una región ya ganada. Reutiliza el panel lateral de
   las zonas: es el mismo sitio y el mismo gesto de cerrar. */
.hof-cab { align-items: center; }
.hof-copa {
  width: 54px; height: 54px; flex: none; display: grid; place-items: center;
  color: #ffc83d; filter: drop-shadow(0 0 10px rgba(255,200,61,.45));
}
.hof-copa svg { width: 100%; height: 100%; }

.hof-quien { display: flex; align-items: center; gap: 12px; }
.hof-quien img {
  width: 46px; height: 46px; border-radius: 50%; image-rendering: pixelated;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.hof-quien div { display: flex; flex-direction: column; }
.hof-quien b { font-size: 1.05em; }
.hof-quien span { font-size: .78em; color: var(--txt-dim); }

.hof-mon {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center;
  gap: 10px; padding: 7px 8px; border-radius: 9px;
}
.hof-mon:nth-child(even) { background: rgba(255,255,255,.035); }
.hof-mon img { width: 44px; height: 44px; image-rendering: pixelated; }
.hof-n { display: flex; flex-direction: column; min-width: 0; }
.hof-n b { font-size: .96em; }
.hof-n span { font-size: .74em; color: var(--txt-dim); }
.hof-nv { font: .8em/1 var(--mono); color: #ffc83d; white-space: nowrap; }

/* la copa ganada invita a pulsarla */
.ra-liga.on { cursor: pointer; }
.ra-liga.on:hover { transform: scale(1.12); }
.ra-liga.on:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── el mapa en un móvil ─────────────────────────────────────────────────────
   Con el menú en su columna de 290 px, en un móvil el mapa se quedaba en una
   tira de 90 px. Aquí el menú se abre POR ENCIMA del mapa, que sigue entero
   debajo, y se cierra con el mismo botón. */
@media (max-width: 700px) {
  .mundo, .mundo.plegado { grid-template-columns: 0 1fr; }
  /* el menú ya no ocupa su celda: sin esto el mapa caería en la de 0 px */
  .mundo-mapa { grid-column: 2; }
  .mundo-menu {
    position: absolute; z-index: 5; top: 0; bottom: 0; left: 0;
    width: min(290px, 82vw);
    box-shadow: 12px 0 30px rgba(0,0,0,.55);
  }
  .mundo:not(.plegado) #mm-toggle { left: calc(min(290px, 82vw) + 10px); }
  .mundo:not(.plegado) .reg-actual { display: none; }   /* taparía la lista */
}

/* Mientras llega el mapa, o si no ha llegado (ver montarMapa en app.js) */
.mapa-aviso {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 10px;
  margin: 0; color: var(--txt-dim); font-size: 14px; text-align: center;
}
.mapa-aviso button {
  justify-self: center; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borde, #2a3142); background: transparent; color: inherit; font: inherit;
}