/* ============================================================================
   GTA VI COMPANION — MAPA INTERACTIVO
   ============================================================================
   Va en su propia hoja y no en styles.css a proposito: el mapa no se publica
   hasta el 19 de noviembre, y no tiene sentido que las 40 paginas carguen
   estilos de algo que todavia no existe. Cuando la pagina del mapa se
   publique, enlazara esta hoja ella sola.

   Usa las variables de color de styles.css, asi que va siempre despues.
   ========================================================================= */

.mapa {
  position: relative;
  display: grid;
  gap: .75rem;
  margin: 1.5rem 0;
}

/* ------------------------------------------------------------------ panel -- */
.mapa__panel {
  display: grid;
  gap: .6rem;
}

.mapa__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.mapa__filtro {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  font: inherit;
  font-size: .85rem;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.mapa__filtro:hover { border-color: var(--border-hi); }

/* Apagada: se ve que sigue ahi pero que no esta activa. No se oculta, porque
   entonces no sabrias que puedes volver a encenderla. */
.mapa__filtro--off { opacity: .45; }
.mapa__filtro--off .mapa__punto { background: var(--fg-dim); }

.mapa__punto {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--marca-color, var(--gold));
}

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

.mapa__buscar {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  color: var(--fg);
  background: var(--bg-2, var(--card));
  border: 1px solid var(--border);
  border-radius: .5rem;
}

.mapa__progreso {
  margin: 0;
  font-size: .9rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- lienzo -- */
.mapa__lienzo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-2, #110E1B);
  border: 1px solid var(--border);
  border-radius: .75rem;
  cursor: grab;
  touch-action: none;   /* el arrastre lo gestionamos nosotros */
}

.mapa__lienzo:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mapa__lienzo--arrastrando { cursor: grabbing; }

.mapa__capa {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.mapa__imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* --------------------------------------------------------------- marcador -- */
.mapa__marca {
  position: absolute;
  width: 18px;
  height: 18px;
  padding: 0;
  background: var(--marca-color, var(--gold));
  border: 2px solid rgba(0, 0, 0, .55);
  border-radius: 50%;
  cursor: pointer;
  /* La contraescala evita que los marcadores crezcan con el zoom: a 8x
     taparian medio mapa. El translate los centra en su coordenada. */
  transform: translate(-50%, -50%) scale(var(--contra-escala, 1));
  transform-origin: center;
}

.mapa__marca:hover,
.mapa__marca:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
  z-index: 2;
}

/* Encontrado: se vacia en vez de desaparecer, para que sepas que ya pasaste
   por ahi y no vuelvas a buscarlo. */
.mapa__marca--hecha {
  background: transparent;
  border-color: var(--marca-color, var(--gold));
  opacity: .6;
}

/* ------------------------------------------------------------------ ficha -- */
.mapa__ficha {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  max-width: min(320px, calc(100% - 1.5rem));
  padding: .9rem 2.2rem .9rem .9rem;
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-radius: .6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.mapa__ficha h3 { margin: 0 0 .25rem; font-size: 1rem; }
.mapa__ficha p { margin: 0 0 .5rem; font-size: .9rem; color: var(--fg-muted); }
.mapa__ficha-cat { color: var(--marca-color, var(--gold)) !important; }

.mapa__cerrar {
  position: absolute;
  top: .35rem;
  right: .45rem;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--fg-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

/* ----------------------------------------------------------------- mandos -- */
.mapa__mandos {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: grid;
  gap: .3rem;
}

.mapa__mando {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .4rem;
  cursor: pointer;
}

.mapa__mando:hover { border-color: var(--border-hi); }

@media (max-width: 640px) {
  .mapa__lienzo { aspect-ratio: 4 / 5; }
  .mapa__ficha { left: .75rem; right: .75rem; max-width: none; }
}

/* Ocultar lo ya encontrado. Con cuatrocientos puntos y doscientos tachados,
   es lo primero que quiere alguien: ver solo lo que le queda. */
.mapa__ocultar{
  display:flex; align-items:center; gap:.45rem;
  font-size:.85rem; color:var(--fg-muted); cursor:pointer;
}
.mapa__ocultar input{ width:auto; margin:0; accent-color:var(--gold); cursor:pointer; }

/* Copiar el enlace a un punto. Es lo que hace que alguien pueda poner en un
   foro «esto esta aqui» con una direccion que abre el mapa en ese punto. */
.mapa__copiar{
  display:block; width:100%; margin-top:.4rem; padding:.35rem .6rem;
  font:inherit; font-size:.8rem; color:var(--fg-muted);
  background:none; border:1px dashed var(--border-hi); border-radius:.4rem;
  cursor:pointer;
}
.mapa__copiar:hover{ color:var(--fg); border-style:solid; }