/* ═══════════════════════════════════════════════════════════════════════
   VORTEX GTA VI — APLICACIÓN DE MAPA · SECCIÓN 3
   ---------------------------------------------------------------------
   Reimplementación propia (clean room) de la disposición observada en
   https://gtadb.net/gta-6-map/interactive/
   Escrita desde cero a partir de medidas renderizadas públicas; no
   contiene CSS de terceros.

   Las ÚNICAS diferencias buscadas frente a la referencia son:
     · logotipo GTADB → logotipo VORTEX / VORTEX GTA VI
     · tipografía de interfaz → Posterama 1984 (P1984)
     · idioma → español (con conmutador ES/EN)
     · acentos de marca → paleta VORTEX
   Geometría, jerarquía y comportamiento se mantienen.

   Medidas de referencia documentadas en docs/GTADB_VORTEX_PARITY.md
   Prefijo: .vgm-  (VORTEX GTA VI Map)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Posterama 1984 · tipografía de identidad VORTEX (local) ── */
@font-face{
  font-family:'P1984';font-weight:900;font-style:normal;font-display:swap;
  src:url('../fonts/P1984-900.woff2') format('woff2'),
      url('../fonts/P1984-900.woff') format('woff');
}
@font-face{
  font-family:'P1984';font-weight:100;font-style:normal;font-display:swap;
  src:url('../fonts/P1984-100.woff2') format('woff2'),
      url('../fonts/P1984-100.woff') format('woff');
}

.vgm{
  /* ── Tokens medidos sobre la referencia ── */
  --vgm-line:rgba(166,180,214,.13);
  --vgm-line-2:rgba(148,163,184,.24);
  --vgm-text:rgba(248,250,255,.95);
  --vgm-text-strong:#fff;
  --vgm-muted:rgba(203,211,231,.6);
  --vgm-faint:rgba(203,211,231,.42);
  --vgm-surface:rgba(255,255,255,.043);
  --vgm-surface-2:rgba(255,255,255,.055);
  --vgm-input:rgba(8,13,22,.76);
  --vgm-rail:rgba(8,12,20,.84);
  --vgm-coords:rgba(15,23,42,.86);
  --vgm-switch:#0b1220;
  --vgm-switch-line:#29384b;
  --vgm-switch-active:#172231;
  --vgm-sidebar-a:rgba(11,16,27,.984);
  --vgm-sidebar-b:rgba(7,10,18,.99);

  /* ── Acentos: sustitución de marca (única diferencia cromática) ── */
  --vgm-accent:#22e4ff;                    /* subrayado de pestaña activa */
  --vgm-accent-line:rgba(34,228,255,.48);  /* borde de interruptores */
  --vgm-accent-soft:rgba(34,228,255,.46);
  --vgm-brand:rgba(255,45,120,.45);        /* borde de idioma / estilo activo */
  --vgm-brand-glow:rgba(255,45,120,.16);
  --vgm-count-bg:rgba(139,92,246,.17);
  --vgm-count-fg:rgba(244,238,255,.82);
  --vgm-slider:#ff2d78;

  /* ── Acentos por categoría (identidad de dato) ── */
  --vgm-cat-landscape:#22e4ff;
  --vgm-cat-trailer:#ff2d78;
  --vgm-cat-leak:#8b5cf6;
  --vgm-cat-screenshot:#ffd166;

  --vgm-ui:'P1984','Posterama 1984','Barlow Condensed',system-ui,sans-serif;
  --vgm-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;

  --vgm-sidebar-w:400px;
  --vgm-header-h:56px;

  position:relative;
  display:block;
  /* Sangrado completo: la app reproduce el lienzo de viewport de la
     referencia dentro de la landing. */
  width:100vw;
  margin-left:calc(50% - 50vw);
  color:var(--vgm-text);
  font-family:var(--vgm-body);
  background:
    radial-gradient(circle at 18% 18%,rgba(14,165,233,.10),transparent 30%),
    radial-gradient(circle at 82% 12%,rgba(139,92,246,.12),transparent 34%),
    radial-gradient(circle at 18% 72%,rgba(6,182,212,.12),transparent 34%),
    radial-gradient(circle at 78% 88%,rgba(255,45,120,.10),transparent 36%),
    #070a12;
  isolation:isolate;
}
.vgm *{box-sizing:border-box}
/* Blindaje: la landing declara reglas globales por elemento (h1, h2, p,
   img, a…). Sin esto se filtran en la sección y rompen la geometría —
   `h1{max-width:24ch}` llegó a estrechar el subtítulo de 363 a 162 px.
   Va envuelto en :where() para que su especificidad sea 0 y NUNCA gane a
   las clases de componente: con `.vgm h1` (0,1,1) el reset pisaba el
   line-height de los títulos y los partía en dos líneas. */
.vgm :where(h1,h2,h3,p,ul,li){
  margin:0;padding:0;max-width:none;font:inherit;line-height:inherit;letter-spacing:normal;
}
.vgm :where(img){max-width:100%;height:auto;display:block}
.vgm [hidden]{display:none!important}
/* Sin `background`/`border` aquí: este reset tiene mayor especificidad
   (0,1,1) que las clases de componente (0,1,0) y les borraba el fondo. */
.vgm button{font:inherit;color:inherit;cursor:pointer}
.vgm a{color:inherit;text-decoration:none}

.vgm :focus-visible{outline:2px solid var(--vgm-accent);outline-offset:2px}

/* ═══════════════════════════════════════════════════════════
   ARMAZÓN — referencia: #map-wrapper 100vw × 100vh, display flex
   ═══════════════════════════════════════════════════════════ */
.vgm-wrapper{
  display:flex;
  width:100%;
  height:100svh;
  overflow:hidden;
  position:relative;
}

/* ═══════════════════════════════════════════════════════════
   PANEL LATERAL — referencia: 400 × 100vh, z 2000
   ═══════════════════════════════════════════════════════════ */
.vgm-sidebar{
  position:relative;
  z-index:2000;
  width:var(--vgm-sidebar-w);
  flex:none;
  height:100%;
  border-right:1px solid var(--vgm-line);
  background-image:linear-gradient(var(--vgm-sidebar-a),var(--vgm-sidebar-b));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 22px 58px rgba(0,0,0,.54);
  display:flex;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.vgm-sidebar-inner{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(166,180,214,.3) transparent;
}
.vgm-sidebar-inner::-webkit-scrollbar{width:8px}
.vgm-sidebar-inner::-webkit-scrollbar-thumb{background:rgba(166,180,214,.28);border-radius:8px}

/* Pestaña de plegado — referencia: 28 × 48 en [399,132] */
.vgm-sidebar-toggle{
  position:absolute;
  left:100%;margin-left:-1px;
  top:132px;
  width:28px;height:48px;
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--vgm-line);
  border-left:0;
  border-radius:0 10px 10px 0;
  background:linear-gradient(180deg,rgba(34,228,255,.16),rgba(139,92,246,.2));
  color:var(--vgm-text);
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.vgm-sidebar-toggle svg{width:9px;height:14px;fill:currentColor;transition:transform .28s ease}
.vgm.is-sidebar-collapsed .vgm-sidebar{transform:translateX(calc(-1 * var(--vgm-sidebar-w)))}
.vgm.is-sidebar-collapsed .vgm-sidebar-toggle svg{transform:scaleX(-1)}

/* ── Cabecera — referencia: 399 × 123, padding 20 18 14 ── */
.vgm-header{
  position:relative;
  padding:20px 18px 14px;
}
.vgm-logo-link{
  display:block;
  width:140px;height:46px;
  margin:0 auto;
}
/* El logotipo de la referencia es apaisado (140×40). El lockup oficial de
   VORTEX GTA VI es cuadrado, así que se ajusta a la altura del hueco y se
   centra: la caja del logotipo conserva la geometría exacta. */
.vgm-logo{
  display:block;
  width:auto;height:40px;
  margin:0 auto;
  object-fit:contain;
}
.vgm-header-subtitle{
  margin:1px 0 0;
  font-family:var(--vgm-ui);
  font-size:10px;font-weight:900;
  letter-spacing:.045em;
  line-height:13px;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  color:var(--vgm-muted);
}
.vgm-header-meta{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;                /* con dos cifras el texto ya no cabe en una línea */
  gap:2px 6px;
  margin-top:12px;
  min-height:17px;               /* alto fijo → se cortaba la segunda línea */
  font-family:var(--vgm-ui);
  font-size:11px;font-weight:100;
  line-height:17px;
  text-align:center;
  color:var(--vgm-muted);
}
/* Cada dato es indivisible; lo que se parte es el conjunto, no la cifra. */
.vgm-header-meta > *{white-space:nowrap}
.vgm-header-chip{white-space:nowrap}
.vgm-header-sep{opacity:.55}

/* ── Conmutador de juego — referencia: 363 × 40 en [18,137] ── */
.vgm-game-switch{
  margin:14px 18px 0;
  height:40px;
}
.vgm-game-switch-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  height:40px;
  background:var(--vgm-switch);
  border:1px solid var(--vgm-switch-line);
}
.vgm-game-switch-item{
  display:flex;align-items:center;justify-content:center;
  padding:6px 5px;
  font-family:var(--vgm-ui);
  font-size:11px;font-weight:900;
  letter-spacing:.04em;
  color:#aab4c2;
  transition:background .2s ease,color .2s ease;
}
.vgm-game-switch-item:hover{color:var(--vgm-text)}
.vgm-game-switch-item.is-active{
  background:var(--vgm-switch-active);
  color:#eef2f7;
  box-shadow:inset 0 -2px 0 var(--vgm-accent);
}

/* ── Enlaces de exploración — referencia: 367 × 133 en [16,195] ── */
.vgm-explore{margin:18px 16px 0;padding-bottom:18px}
.vgm-block-title{
  display:block;
  font-family:var(--vgm-ui);
  font-size:11px;font-weight:900;
  letter-spacing:.075em;
  line-height:18px;
  text-transform:uppercase;
  color:var(--vgm-muted);
}
.vgm-explore-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:9px;
}
.vgm-explore-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:40px;
  padding:8px 10px;
  border:1px solid var(--vgm-line);
  border-radius:10px;
  background:var(--vgm-surface);
  color:rgba(255,255,255,.92);
  font-family:var(--vgm-ui);
  font-size:12px;font-weight:900;
  letter-spacing:.02em;
  transition:background .2s ease,border-color .2s ease;
}
.vgm-explore-link:hover{background:rgba(255,255,255,.08);border-color:var(--vgm-line-2)}
.vgm-explore-link svg{width:15px;height:15px;fill:var(--vgm-accent);flex:none}

/* ── Panel de capas — referencia: 367 × 361 en [16,341] ── */
.vgm-layer-panel{margin:13px 16px 0}
.vgm-layer-card{padding:14px 0}
.vgm-layer-card + .vgm-layer-card{border-top:1px solid var(--vgm-line)}
.vgm-layer-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:38px;
}
.vgm-layer-title-wrap{display:flex;flex-direction:column;gap:4px;min-width:0}
.vgm-layer-kicker{
  font-family:var(--vgm-ui);
  font-size:10px;font-weight:100;
  letter-spacing:.08em;
  line-height:16px;
  text-transform:uppercase;
  color:var(--vgm-muted);
}
.vgm-layer-title{
  font-family:var(--vgm-ui);
  font-size:15px;font-weight:900;
  letter-spacing:.01em;
  line-height:18px;
  color:var(--vgm-text-strong);
}

/* Interruptor — referencia: 58 × 32, pomo 24 × 24, recorrido 25px */
.vgm-toggle{position:relative;width:58px;height:32px;flex:none}
.vgm-toggle input{
  position:absolute;width:13px;height:13px;margin:3px 0 0 4px;opacity:0;
}
.vgm-toggle-slider{
  position:absolute;inset:0;
  border:1px solid var(--vgm-accent-line);
  border-radius:999px;
  background:transparent;
  transition:background .22s ease,border-color .22s ease;
}
.vgm-toggle-slider::before{
  content:"";position:absolute;
  left:4px;top:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.vgm-toggle input:checked + .vgm-toggle-slider{
  background:linear-gradient(100deg,rgba(34,228,255,.5),rgba(139,92,246,.6));
  border-color:transparent;
}
.vgm-toggle input:checked + .vgm-toggle-slider::before{transform:translateX(25px)}
.vgm-toggle input:focus-visible + .vgm-toggle-slider{outline:2px solid var(--vgm-accent);outline-offset:2px}

/* ── Estilo — referencia: 367 × 101, segmento 2 × 180 × 40 ── */
.vgm-style-block{border-top:1px solid var(--vgm-line);padding:16px 0}
.vgm-style-segment{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-top:10px;
  height:40px;
}
.vgm-style-option{
  display:flex;align-items:center;justify-content:center;
  height:40px;
  padding:8px 12px;
  background:transparent;
  border:1px solid var(--vgm-accent-soft);
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
  font-family:var(--vgm-ui);
  font-size:12px;font-weight:900;
  letter-spacing:.03em;
  color:#fff;
  transition:background .2s ease,border-color .2s ease;
}
.vgm-style-option.is-active{
  background:linear-gradient(100deg,rgba(255,45,120,.28),rgba(139,92,246,.3));
  border-color:var(--vgm-brand);
}

/* ── Intensidad — referencia: 367 × 80, pista 309 × 6, valor 42 ── */
.vgm-opacity-block{border-top:1px solid var(--vgm-line);padding:16px 0}
.vgm-opacity-control{
  display:flex;align-items:center;gap:16px;
  margin-top:10px;
  height:19px;
  padding:0 2px;
}
.vgm-opacity-control input[type=range]{
  flex:1;min-width:0;
  -webkit-appearance:none;appearance:none;
  height:6px;border-radius:999px;
  background:rgba(255,255,255,.16);
  accent-color:var(--vgm-slider);
}
.vgm-opacity-control input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--vgm-slider);border:2px solid #0b1220;
}
.vgm-opacity-control input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--vgm-slider);border:2px solid #0b1220;
}
.vgm-opacity-value{
  width:42px;flex:none;text-align:right;
  font-family:var(--vgm-ui);
  font-size:12px;font-weight:900;
  line-height:19px;
  color:var(--vgm-faint);
  font-variant-numeric:tabular-nums;
}

/* ── Idioma — referencia: 367 × 48, 2 × 180 × 31 ── */
.vgm-lang-block{border-top:1px solid var(--vgm-line);padding:16px 0 0}
.vgm-lang-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:31px}
.vgm-lang-btn{
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--vgm-brand);
  border-radius:12px;
  background:rgba(20,26,38,.92);
  color:var(--vgm-text);
  font-family:var(--vgm-ui);
  font-size:12px;font-weight:900;
  letter-spacing:.06em;
}
.vgm-lang-btn.is-active{
  background:linear-gradient(100deg,rgba(255,45,120,.3),rgba(139,92,246,.32));
  box-shadow:0 10px 28px var(--vgm-brand-glow);
}

/* ── Panel de filtros — referencia: 367 × 449 en [16,718] ── */
.vgm-filter-panel{margin:16px 16px 0;border-top:1px solid var(--vgm-line);padding:16px 0 21px}
.vgm-search{position:relative}
.vgm-search input{
  width:100%;height:48px;
  padding:0 14px 0 42px;
  border:1px solid var(--vgm-line);
  border-radius:12px;
  background:var(--vgm-input);
  color:var(--vgm-text);
  font-family:var(--vgm-body);
  font-size:14px;font-weight:500;
}
.vgm-search input::placeholder{color:var(--vgm-faint)}
.vgm-search input:focus{border-color:var(--vgm-accent);outline:none}
.vgm-search-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;fill:var(--vgm-faint);pointer-events:none;
}
.vgm-search-hint{
  margin-top:8px;padding-left:2px;
  font-family:var(--vgm-body);
  font-size:11px;font-weight:400;line-height:15px;
  color:var(--vgm-faint);
}
.vgm-filter-quick{margin-top:17px;padding-top:17px}
.vgm-filter-box-title{margin-bottom:9px}
/* Con datos reales las categorías las decide el conjunto de datos, no el
   HTML: pueden ser 5 u 11. Se limita la altura y se desplaza dentro. */
.vgm-category-group{
  display:flex;flex-direction:column;
  max-height:342px;                 /* 7 filas de 48 + separaciones */
  overflow-y:auto;overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(139,92,246,.5) transparent;
}
.vgm-category-group::-webkit-scrollbar{width:6px}
.vgm-category-group::-webkit-scrollbar-thumb{
  background:rgba(139,92,246,.5);border-radius:999px;
}
.vgm-category-group::-webkit-scrollbar-track{background:transparent}
/* Las filas no deben encogerse al desbordar el contenedor. */
.vgm-category{flex:none}

/* Fila de categoría — referencia: 367 × 48, pad 0 10 0 14, radio 10 */
.vgm-category{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:48px;
  padding:0 10px 0 14px;
  border:1px solid var(--vgm-line);
  border-radius:10px;
  background:var(--vgm-surface);
  cursor:pointer;
  overflow:hidden;
}
.vgm-category + .vgm-category{margin-top:8px}
.vgm-category-master{margin-bottom:6px}
.vgm-category::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:3px;
  background:var(--vgm-cat,var(--vgm-accent));
}
.vgm-category-master::before{background:var(--vgm-accent)}
.vgm-category-title{
  display:flex;align-items:center;gap:10px;min-width:0;
  font-family:var(--vgm-ui);
  font-size:14px;font-weight:900;
  letter-spacing:.02em;
  line-height:19px;
  color:#fff;
}
.vgm-category-title svg{width:14px;height:14px;fill:var(--vgm-cat,var(--vgm-accent));flex:none}
.vgm-category-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vgm-count{
  flex:none;
  padding:0 8px;
  border-radius:999px;
  background:var(--vgm-count-bg);
  color:var(--vgm-count-fg);
  font-family:var(--vgm-body);
  font-size:11px;font-weight:650;line-height:17px;
  font-variant-numeric:tabular-nums;
}
.vgm-cat-landscape{--vgm-cat:var(--vgm-cat-landscape)}
.vgm-cat-trailer{--vgm-cat:var(--vgm-cat-trailer)}
.vgm-cat-leak{--vgm-cat:var(--vgm-cat-leak)}
.vgm-cat-screenshot{--vgm-cat:var(--vgm-cat-screenshot)}

/* ── Pie legal — referencia: 399 × 199, legal 359 × 154 ── */
.vgm-sidebar-footer{margin-top:24px;padding:37px 20px}
.vgm-legal{
  font-family:var(--vgm-body);
  font-size:9px;font-weight:400;line-height:1.55;
  color:var(--vgm-faint);
  text-align:center;
}
.vgm-legal p + p{margin-top:9px}
.vgm-legal a{font-weight:600;color:var(--vgm-muted);text-decoration:underline;text-underline-offset:2px}
.vgm-legal a:hover{color:var(--vgm-accent)}
.vgm-legal-sep{opacity:.5;margin:0 5px}

/* ═══════════════════════════════════════════════════════════
   VISOR — referencia: #map ocupa el resto del ancho, 100% alto
   ═══════════════════════════════════════════════════════════ */
.vgm-map{
  position:relative;
  flex:1;min-width:0;
  height:100%;
  overflow:hidden;
  touch-action:none;
  cursor:grab;
}
.vgm-map.is-panning{cursor:grabbing}
.vgm-map-viewport{position:absolute;inset:0;overflow:hidden}

/* La referencia dibuja su propia retícula dentro del mapa. No añadimos
   una decorativa nuestra: el lienzo va limpio. */
.vgm-map-grid{display:none}

/* Capa transformable: aquí entra la fuente autorizada sin tocar el resto */
.vgm-map-world{
  position:absolute;top:50%;left:50%;
  width:var(--vgm-w,600px);height:var(--vgm-h,600px);
  margin-left:calc(var(--vgm-w,600px) / -2);
  margin-top:calc(var(--vgm-h,600px) / -2);
  transform:translate3d(var(--vgm-tx,0px),var(--vgm-ty,0px),0) scale(var(--vgm-s,1));
  transform-origin:50% 50%;
  will-change:transform;
  opacity:var(--vgm-intensity,1);
}
.vgm-map-world.is-animating{transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.vgm-map-world img,
.vgm-map-world canvas{width:100%;height:100%;display:block}
.vgm-map.is-style-black .vgm-map-world{filter:grayscale(1) contrast(1.12) brightness(.82)}

/* Marcador interno de origen pendiente — ocupa EXACTAMENTE los límites
   del mapa. No es el producto: es el aviso de que la capa no cargó. */
.vgm-source-placeholder{position:absolute;inset:0}
/* A la espera de fuente autorizada: fondo liso, sin adornos. */
.vgm-map.is-awaiting-source{background:#0a1020}
.vgm-source-notice{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100% - 40px));
  z-index:60;pointer-events:none;
}
.vgm-source-placeholder-inner{
  max-width:420px;padding:26px 28px;text-align:center;
  border:1px solid var(--vgm-line);border-radius:14px;
  background:rgba(8,12,20,.88);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.vgm-source-placeholder code{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:12px;letter-spacing:.08em;
  color:#ffd166;
  margin-bottom:12px;
}
.vgm-source-placeholder h3{
  margin:0 0 8px;
  font-family:var(--vgm-ui);
  font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vgm-text-strong);
}
.vgm-source-placeholder p{
  margin:0;font-family:var(--vgm-body);
  font-size:12px;line-height:1.6;color:var(--vgm-muted);
}

/* Anfitrión de OpenLayers para la cartografía. Ocupa exactamente los
   límites del visor: la referencia se comporta como mapa, no como imagen. */
.vgm-ol-host{position:absolute;inset:0}
.vgm-ol-host .ol-viewport{border-radius:0}
/* NEGRO · presentación en escala de grises sobre las MISMAS teselas.

   Esta regla decía `filter:none`, o sea que anulaba el modo Negro justo en
   el motor que usa producción: el control cambiaba de estado y no pasaba
   nada. No hay una segunda pirámide de teselas en negro —ni la va a haber,
   son 32.748 archivos— y el SVG alternativo sigue con la licencia sin
   resolver, así que no se usa. Negro se resuelve como derivado de
   presentación de la cartografía licenciada.

   El filtro va sobre el contenedor, no sobre el canvas: así las teselas se
   ven en gris pero los marcadores conservan su color, que es lo que los
   hace legibles. Coordenadas, zoom, marcador seleccionado y vista no se
   tocan: es sólo pintura. */
.vgm-map.is-style-black .vgm-ol-host .ol-layer:first-child canvas{
  filter:grayscale(1) contrast(1.12) brightness(.82)
}

/* Aviso de build bloqueado por el guardián de despliegue */
.vgm-source-notice.is-blocked .vgm-source-placeholder-inner{
  border-color:rgba(255,77,77,.55);background:rgba(38,6,6,.92);
}
.vgm-source-notice.is-blocked code{color:#ff6b6b}
.vgm-source-notice.is-soft .vgm-source-placeholder-inner{
  background:rgba(8,12,20,.72);
}

/* Marcadores y agrupaciones */
.vgm-markers{position:absolute;inset:0;pointer-events:none}
.vgm-marker{
  position:absolute;
  left:calc(var(--mx) * 100%);top:calc(var(--my) * 100%);
  transform:translate(-50%,-50%);
  pointer-events:auto;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(125,200,247,.92);
  border:2px solid rgba(255,255,255,.86);
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  color:#06263a;
  font-family:var(--vgm-body);
  font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.vgm-marker-dot{width:10px;height:10px}
.vgm-marker-cluster{border-color:rgba(255,255,255,.9)}
.vgm-marker:hover,.vgm-marker:focus-visible{filter:brightness(1.12)}
.vgm-marker.is-selected{background:#ffd166;color:#2b1a00}

/* ═══════════════════════════════════════════════════════════
   RAÍL DE CONTROLES — referencia: 52 × 418 en [1368,20], z 1200
   ═══════════════════════════════════════════════════════════ */
.vgm-control-panel{
  position:absolute;
  right:20px;top:20px;
  z-index:1200;
  width:52px;
  display:flex;flex-direction:column;gap:8px;
  padding:8px;
  border:1px solid var(--vgm-line);
  border-radius:14px;
  background:var(--vgm-rail);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 34px rgba(0,0,0,.44);
}
.vgm-control-section{display:flex;flex-direction:column;gap:8px}
.vgm-control-section:first-child{padding-bottom:7px}
.vgm-control-section + .vgm-control-section{margin-top:16px}
.vgm-control-btn{
  width:34px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--vgm-line);
  border-radius:10px;
  background:var(--vgm-surface-2);
  color:var(--vgm-text);
  transition:background .18s ease,border-color .18s ease;
}
.vgm-control-btn:hover{background:rgba(255,255,255,.12);border-color:var(--vgm-line-2)}
.vgm-control-btn svg{width:15px;height:15px;fill:currentColor}
.vgm-control-btn.is-zoom{font-family:var(--vgm-ui);font-size:17px;font-weight:900;line-height:1}
.vgm-control-btn[disabled]{opacity:.4;cursor:not-allowed}
.vgm-control-btn.is-on{border-color:var(--vgm-accent);color:var(--vgm-accent)}

/* ── Coordenadas — referencia: 144 × 30, abajo-derecha, 18px ── */
.vgm-coords{
  position:absolute;right:18px;bottom:18px;z-index:900;
  padding:7px 11px;
  border:1px solid var(--vgm-line-2);
  border-radius:8px;
  background:var(--vgm-coords);
  color:#e2e8f0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:12px;line-height:14px;
  white-space:nowrap;
  pointer-events:none;
}

/* Distintivo de estado del visor (no existe en la referencia; es el
   aviso de que esto no debe publicarse). Se retira con la autorización. */
.vgm-staging-badge{
  position:absolute;left:18px;bottom:18px;z-index:900;
  display:flex;align-items:center;gap:7px;
  padding:7px 11px;
  border:1px solid rgba(255,209,102,.4);
  border-radius:8px;
  background:rgba(40,30,5,.86);
  color:#ffd166;
  font-family:var(--vgm-ui);
  font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
}
.vgm-staging-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#ffd166;
}
/* Modo pitch: un solo indicador, sobrio, sin gritar. */
.vgm-staging-badge.is-discreet{
  border-color:var(--vgm-line);background:rgba(8,12,20,.84);color:var(--vgm-muted);
  font-weight:100;letter-spacing:.12em;
}
.vgm-staging-badge.is-discreet::before{background:var(--vgm-muted);opacity:.7}

/* ═══════════════════════════════════════════════════════════
   FICHA DE MARCADOR — referencia: #popup, min 300 / max 380,
   radio 20, borde 1px rgba(255,255,255,.08), z 100
   ═══════════════════════════════════════════════════════════ */
.vgm-popup{
  position:absolute;z-index:100;
  min-width:300px;max-width:380px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(14,19,32,.97),rgba(8,11,20,.98));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 55px rgba(0,0,0,.42),0 4px 14px rgba(0,0,0,.22);
  transform:translate(-50%,calc(-100% - 18px));
  overflow:hidden;
}
.vgm-popup-header{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 16px 12px;
}
.vgm-popup-heading{min-width:0;flex:1}
.vgm-popup-title{
  margin:0;
  font-family:var(--vgm-ui);
  font-size:16px;font-weight:900;letter-spacing:.02em;line-height:1.2;
  color:#fff;
}
.vgm-popup-status{
  display:inline-block;margin-top:7px;
  padding:3px 8px;border-radius:999px;
  background:var(--vgm-count-bg);color:var(--vgm-count-fg);
  font-family:var(--vgm-body);font-size:11px;font-weight:650;
}
.vgm-popup-controls{display:flex;align-items:center;gap:6px;flex:none}
.vgm-popup-action,
.vgm-popup-close{
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--vgm-line);border-radius:9px;
  background:var(--vgm-surface-2);color:var(--vgm-text);
}
.vgm-popup-action svg{width:13px;height:13px;fill:currentColor}
.vgm-popup-close{font-size:18px;line-height:1}
.vgm-popup-action:hover,.vgm-popup-close:hover{background:rgba(255,255,255,.12)}
.vgm-popup-action.is-done{border-color:#3fd8a4;color:#3fd8a4}
.vgm-popup-content{
  padding:0 16px 16px;
  font-family:var(--vgm-body);
  font-size:14px;line-height:1.6;color:#f4f7ff;
}
.vgm-popup-content img{width:100%;height:auto;border-radius:12px;display:block;margin-bottom:10px}
.vgm-popup-pending{
  font-size:12px;line-height:1.6;color:var(--vgm-faint);
  border-left:2px solid rgba(255,209,102,.5);padding-left:10px;
}
.vgm-popup-meta{margin-top:10px;font-size:11px;color:var(--vgm-faint);font-family:ui-monospace,monospace}

/* ── Ficha de landmark real (YANIS v14 · CC BY 4.0) ───────────────── */

/* Zona: «Stockyard, Vice City» */
.vgm-popup-area{
  font-size:13px;line-height:1.5;color:rgba(244,247,255,.72);
}

/* Distintivos de fiabilidad. El aviso (sin confirmar, puede no existir)
   va en ámbar; lo meramente informativo, apagado. */
.vgm-popup-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.vgm-popup-badge{
  padding:2px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(244,247,255,.74);
  font-family:var(--vgm-body);font-size:11px;font-weight:650;line-height:16px;
}
.vgm-popup-badge[data-status="unconfirmed"],
.vgm-popup-badge[data-status="may-not-exist"]{
  border-color:rgba(255,209,102,.45);
  background:rgba(255,209,102,.12);
  color:#ffd166;
}

/* Referencia del mundo real en la que se basa el punto. */
.vgm-popup-real{
  margin-top:10px;padding-top:9px;
  border-top:1px solid var(--vgm-line);
  font-size:12px;line-height:1.55;color:rgba(244,247,255,.66);
}
.vgm-popup-real-label{display:block;font-weight:700;color:var(--vgm-faint);font-size:11px}

/* ═══════════════════════════════════════════════════════════
   MODALES — referencia: #credits-modal / #map-about-modal, z 5000
   ═══════════════════════════════════════════════════════════ */
.vgm-modal{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center}
.vgm-modal-backdrop{position:absolute;inset:0;background:rgba(3,5,11,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:0}
.vgm-modal-dialog{
  position:relative;z-index:1;
  width:min(906px,92vw);max-height:86svh;
  border:1px solid var(--vgm-line);border-radius:20px;
  background:linear-gradient(180deg,rgba(12,17,29,.98),rgba(7,10,18,.99));
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  overflow:auto;
}
.vgm-modal-close{
  position:absolute;right:19px;top:19px;z-index:5;
  width:41px;height:41px;display:grid;place-items:center;
  border:1px solid var(--vgm-line);border-radius:12px;
  background:var(--vgm-surface-2);color:var(--vgm-text);font-size:20px;line-height:1;
}
.vgm-modal-content{padding:32px}
.vgm-modal-header h2{
  margin:0 0 10px;
  font-family:var(--vgm-ui);
  font-size:22px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#fff;
}
.vgm-modal-content p{font-family:var(--vgm-body);font-size:14px;line-height:1.7;color:var(--vgm-muted)}
.vgm-modal-pending{
  margin-top:18px;padding:16px 18px;
  border:1px dashed rgba(255,209,102,.4);border-radius:12px;
  background:rgba(40,30,5,.4);
  font-family:var(--vgm-body);font-size:13px;line-height:1.6;color:#ffd7a0;
}
.vgm-modal-pending code{font-family:ui-monospace,monospace;font-size:12px;color:#ffd166}
.vgm-modal-disclaimer{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--vgm-line);
  font-family:var(--vgm-body);font-size:11px;line-height:1.6;color:var(--vgm-faint);
}

/* Contenido de los modales — misma arquitectura que la referencia */
.vgm-modal-kicker{
  font-family:var(--vgm-ui);font-size:11px;font-weight:100;
  letter-spacing:.22em;text-transform:uppercase;color:var(--vgm-muted);
  margin-bottom:8px;
}
.vgm-credit-card{
  margin-top:22px;padding:16px 18px;
  border:1px solid var(--vgm-line);border-radius:14px;background:var(--vgm-surface);
}
.vgm-credit-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;
}
.vgm-about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;
}
.vgm-credit-item{
  padding:16px 18px;border:1px solid var(--vgm-line);border-radius:14px;
  background:var(--vgm-surface);
}
.vgm-credit-card h3,.vgm-credit-item h3,.vgm-contributors h3,.vgm-about-faq h3{
  margin:0 0 6px;font-family:var(--vgm-ui);
  font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#fff;
}
.vgm-credit-card p,.vgm-credit-item p{font-size:13px;line-height:1.6;color:var(--vgm-muted)}
.vgm-contributors{margin-top:22px}
.vgm-contributor-list{
  display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none;
}
.vgm-contributor-list li{
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--vgm-line);background:var(--vgm-surface);
  font-family:var(--vgm-body);font-size:12px;font-weight:650;color:var(--vgm-text);
}
.vgm-contributors-note{margin-top:10px;font-size:11px;line-height:1.6;color:var(--vgm-faint)}
.vgm-about-faq{margin-top:26px}
.vgm-faq{margin:12px 0 0}
.vgm-faq-item{padding:14px 0;border-top:1px solid var(--vgm-line)}
.vgm-faq dt{
  font-family:var(--vgm-ui);font-size:13px;font-weight:900;
  letter-spacing:.04em;color:#fff;margin-bottom:6px;
}
.vgm-faq dd{margin:0;font-family:var(--vgm-body);font-size:13px;line-height:1.65;color:var(--vgm-muted)}

@media (max-width:768px){
  .vgm-credit-grid,.vgm-about-grid{grid-template-columns:1fr}
  .vgm-modal-content{padding:22px 18px}
}

/* ═══════════════════════════════════════════════════════════
   ESTADOS
   ═══════════════════════════════════════════════════════════ */
.vgm-state{
  position:absolute;inset:0;z-index:1100;
  display:grid;place-items:center;text-align:center;padding:24px;
  background:rgba(7,10,18,.9);
}
.vgm-state h3{
  margin:0 0 8px;font-family:var(--vgm-ui);
  font-size:14px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.vgm-state p{margin:0;font-family:var(--vgm-body);font-size:13px;color:var(--vgm-muted)}
.vgm-state button{
  margin-top:16px;padding:10px 20px;
  border:1px solid var(--vgm-line);border-radius:10px;background:var(--vgm-surface-2);
  font-family:var(--vgm-ui);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
.vgm-spinner{
  width:34px;height:34px;margin:0 auto 14px;border-radius:50%;
  border:2px solid rgba(34,228,255,.25);border-top-color:var(--vgm-accent);
  animation:vgmSpin 1s linear infinite;
}
@keyframes vgmSpin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════
   CABECERA MÓVIL — referencia: fixed 100% × 56, z 1000
   Sólo existe a ≤768px, igual que en la referencia.
   ═══════════════════════════════════════════════════════════ */
.vgm-mobile-header{
  display:none;
  position:absolute;left:0;right:0;top:0;
  height:var(--vgm-header-h);
  z-index:1000;
  align-items:center;
  padding:0 12px;
  border-bottom:1px solid var(--vgm-line);
  background:rgba(8,12,20,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}
.vgm-mobile-left{display:flex;align-items:center;height:46px}
.vgm-mobile-left img{height:40px;width:auto;display:block}
.vgm-mobile-lang{display:flex;gap:8px;margin-left:auto}
.vgm-mobile-lang .vgm-lang-btn{width:41px;height:40px;border-radius:10px}
.vgm-mobile-icon{
  width:56px;height:56px;display:grid;place-items:center;margin-right:-12px;
}
.vgm-mobile-icon button{
  width:34px;height:32px;display:grid;place-items:center;
  color:var(--vgm-text);background:transparent;border:0;
}
.vgm-mobile-icon svg{width:22px;height:22px;fill:currentColor}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — punto de corte medido en la referencia: 768px
   ≤768px  → cabecera fija + mapa a pantalla completa +
             panel lateral a ancho completo fuera de lienzo
   ═══════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .vgm-mobile-header{display:flex}

  .vgm-wrapper{height:100svh}

  .vgm-sidebar{
    position:absolute;
    left:0;top:var(--vgm-header-h);
    width:100%;
    height:calc(100svh - var(--vgm-header-h));
    z-index:9999;
    transform:translateX(-100%);
    border-right:0;
  }
  .vgm-sidebar.is-open{transform:translateX(0)}
  .vgm-sidebar-toggle{display:none}

  .vgm-map{position:absolute;left:0;top:var(--vgm-header-h);width:100%;height:calc(100svh - var(--vgm-header-h))}

  /* El raíl de controles no cambia de sitio: sólo se ajusta el margen y
     los botones de zoom son 4px más bajos, igual que en la referencia
     (allí queda en y=76 con la cabecera de 56 → 20 por debajo de ella). */
  .vgm-control-panel{right:10px;top:calc(var(--vgm-header-h) + 20px)}
  .vgm-control-btn.is-zoom{height:36px}

  /* La referencia oculta la lectura de coordenadas en móvil. */
  .vgm-coords{display:none}
  .vgm-staging-badge{left:10px;bottom:10px}

  /* Ficha: ancho contenido, anclada sobre el marcador igual que en escritorio */
  .vgm-popup{max-width:min(340px,calc(100vw - 32px))}
}

/* ═══════════════════════════════════════════════════════════
   ENLACE DESDE LA SECCIÓN 2 (no forma parte de la app de mapa)
   ═══════════════════════════════════════════════════════════ */
.vgm-anchor-cue{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:44px;padding:.7rem 1.1rem;border-radius:999px;
  font-family:'P1984','Posterama 1984','Barlow Condensed',sans-serif;
  font-weight:900;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:#9fb2d8;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(8,11,26,.5);
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.vgm-anchor-cue:hover{color:#22e4ff;border-color:rgba(34,228,255,.5);background:rgba(34,228,255,.08)}
.vgm-anchor-cue svg{width:13px;height:13px;fill:currentColor}

@media (prefers-reduced-motion:reduce){
  .vgm *,.vgm *::before,.vgm *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* Procedencia de la cartografía dentro del modal de créditos. */
.vgm-credit-meta{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:7px;margin:13px 0 0;
}
.vgm-credit-meta div{
  padding:8px 11px;border:1px solid var(--vgm-line);border-radius:9px;
  background:rgba(255,255,255,.035);
}
.vgm-credit-meta dt{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vgm-faint);margin-bottom:3px;
}
.vgm-credit-meta dd{
  margin:0;font-size:12.5px;font-weight:650;color:#e9eefc;
  font-variant-numeric:tabular-nums;
}
.vgm-credit-meta code{
  font-family:ui-monospace,monospace;font-size:11.5px;color:#22e4ff;
}
.vgm-credit-card a{color:#7de3ff;text-decoration:underline;text-underline-offset:2px}
.vgm-modal-pending code{font-family:ui-monospace,monospace;font-size:11.5px}

/* Enlaces de la ficha del marcador hacia la wiki. */
.vgm-popup-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.vgm-popup-link{
  display:inline-flex;align-items:center;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--vgm-line);background:rgba(255,255,255,.05);
  color:#e9eefc;font-family:var(--vgm-body);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.vgm-popup-link:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28)}
.vgm-popup-link.is-primary{
  border-color:transparent;color:#04121a;
  background:linear-gradient(120deg,#22e4ff,#7de3ff);
}


/* ═══════════════════════════════════════════════════════════════════════
   MOTOR OPENLAYERS · el mundo heredado no puede interceptar el puntero
   ---------------------------------------------------------------------
   .vgm-map-world es la capa transformable del motor interno. Cuando manda
   OpenLayers sigue en el DOM pero pintada por encima del .ol-viewport, y
   como recibía los eventos, el mapa se veía pero no se podía manipular:
   ni arrastre, ni rueda, ni clic en los círculos numerados.

   No se borra el elemento —el motor interno sigue siendo el respaldo si OL
   no carga—, sólo se le quitan los eventos mientras OL esté al mando.
   ═══════════════════════════════════════════════════════════════════════ */
.vgm-map.is-engine-ol .vgm-map-world{pointer-events:none}
.vgm-map.is-engine-ol .vgm-markers{pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════════
   FOTOS DE LANDMARK · en la ficha del marcador
   El contenedor nace oculto y sólo aparece si ese landmark tiene fotos.
   Un landmark sin material no enseña hueco ni texto de carencia: 243 de
   1.531 no tienen foto y eso es un estado válido, no un fallo.
   ═══════════════════════════════════════════════════════════════════════ */
.vgm-popup-media[hidden]{display:none}
.vgm-media-fig{margin:0 0 10px;position:relative;background:#070b14;
  border:1px solid rgba(255,255,255,.1);overflow:hidden}
.vgm-media-fig img{display:block;width:100%;height:auto;max-height:190px;object-fit:cover}
.vgm-media-fig figcaption{padding:5px 8px;font-size:10px;line-height:1.4;
  color:rgba(255,255,255,.5);letter-spacing:.01em}
.vgm-media-nav{position:absolute;left:0;right:0;top:calc(50% - 30px);
  display:flex;align-items:center;justify-content:space-between;padding:0 6px;pointer-events:none}
.vgm-media-nav button{pointer-events:auto;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(6,10,18,.78);color:#e9eefc;
  font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vgm-media-nav button:hover{background:rgba(14,20,32,.94);border-color:rgba(255,255,255,.4)}
.vgm-media-pos{pointer-events:none;font-size:10px;font-weight:700;letter-spacing:.05em;
  color:#e9eefc;background:rgba(6,10,18,.78);border-radius:999px;padding:2px 8px}
@media (max-width:768px){.vgm-media-fig img{max-height:150px}}