/* Vista de mapa */
.vista-mapa { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.mapa-marco { position: relative; background: #0f0d0c; border-radius: var(--radio); overflow: hidden; }
#mapa-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 487; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.tierra { fill: #26211d; stroke: #0f0d0c; stroke-width: .5; vector-effect: non-scaling-stroke; }
.pais { stroke: #0f0d0c; stroke-width: .5; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .2s, filter .2s; }
.pais-sin { cursor: pointer; }
.pais:hover, .pais-sin:hover { filter: brightness(1.25); }
.pais-punto { stroke: #0f0d0c; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.region-punto { fill: #f0c062; stroke: #0f0d0c; stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .2s; }
.region-punto:hover { fill: #ffe0a0; }
/* foco: al elegir un lugar, el resto se apaga un poco */
.con-sel .pais:not(.es-sel), .con-sel .pais-punto:not(.es-sel) { opacity: .45; }
.con-sel .region-punto:not(.es-sel) { opacity: .55; }
.es-sel { stroke: #f1e9df; stroke-width: 1.8; }
.es-sel-suave { stroke-width: 1; opacity: .8; }
.region-punto.es-sel { fill: #fff2cf; stroke: #0f0d0c; stroke-width: 2.4; }
/* siluetas de regiones: invisibles salvo al elegir su país, al pasar por encima o al elegirlas */
.region-silueta { fill: #f0c062; fill-opacity: 0; stroke: #f0c062; stroke-opacity: 0; stroke-width: 1; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; pointer-events: none; transition: fill-opacity .2s, stroke-opacity .2s; }
.region-silueta.visible { stroke: #1a1411; stroke-opacity: .75; stroke-width: 1.2; pointer-events: visiblePainted; cursor: pointer; }
.region-silueta.hover, .region-silueta.visible:hover { fill: #fff2cf; fill-opacity: .22; stroke: #fff2cf; stroke-opacity: 1; stroke-width: 1.6; }
.region-silueta.es-sel { fill: #f0c062; fill-opacity: .55; stroke: #fff2cf; stroke-opacity: 1; stroke-width: 2.2; opacity: 1; }

.mapa-zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 6px; }
.mapa-zoom .btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; background: #1e1a17e6; }
.mapa-leyenda { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 6px; background: #0f0d0cd9; padding: 10px 12px; border-radius: 8px;
  color: var(--texto-2); font-size: 12.5px; pointer-events: none; }
.mapa-leyenda p { margin: 4px 0 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mapa-leyenda i { width: 20px; height: 10px; border-radius: 2px; display: inline-block; }
.mapa-leyenda small { margin-right: 6px; }
.leyenda-punto { width: 10px; height: 10px; border-radius: 50%; background: #f0c062; display: inline-block; margin-right: 2px; }
.mapa-pista { position: absolute; z-index: 2; pointer-events: none; background: var(--texto); color: var(--fondo); font-size: 13px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap; }

.mapa-panel { background: var(--superficie); border-radius: var(--radio); padding: 18px; position: sticky; top: 150px;
  max-height: calc(100vh - 170px); overflow-y: auto; }
.mapa-panel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mapa-panel-sub { margin: 0; color: var(--acento-2); font-size: 13px; }
.mapa-panel h2 { font: 600 24px/1.15 var(--serif); margin: 2px 0 4px; }
.mapa-panel-num { margin: 0; color: var(--texto-2); font-size: 14px; }
.mapa-panel h3 { font-size: 13px; color: var(--texto-2); margin: 16px 0 0; font-weight: 600; }
.mapa-panel .chips { margin-top: 8px; }
.cerrar-sel { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--superficie-2); font-size: 18px; cursor: pointer; }
.mapa-ayuda { color: var(--texto-2); margin: 0; }
.mapa-muestra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; margin-top: 16px; }
.mapa-ficha { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; display: grid; gap: 4px; }
.mapa-ficha-img { aspect-ratio: 3 / 2; background: var(--superficie-2); border-radius: 6px; display: grid; place-items: center; padding: 6px; transition: background .15s; }
.mapa-ficha:hover .mapa-ficha-img, .mapa-ficha:focus-visible .mapa-ficha-img { background: var(--borde); }
.mapa-ficha img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mapa-ficha-nom { font-size: 11.5px; line-height: 1.25; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mapa-ver { margin-top: 16px; width: 100%; }

@media (max-width: 1100px) {
  .vista-mapa { grid-template-columns: 1fr; }
  .mapa-panel { position: static; max-height: none; }
  .mapa-leyenda { position: static; background: none; padding: 10px 2px 0; display: flex; gap: 6px 18px; flex-wrap: wrap; }
  .mapa-marco { overflow: visible; background: none; }
  #mapa-svg { background: #0f0d0c; border-radius: var(--radio); }
  .mapa-muestra { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
@media (max-width: 760px) {
  .mapa-marco { margin: 0 -16px; }
  #mapa-svg { aspect-ratio: 4 / 3; border-radius: 0; }
  .mapa-leyenda { padding: 10px 16px 0; font-size: 11.5px; }
  .mapa-muestra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}