/* ===========================================================
   Mapa de líneas de alta velocidad (MapLibre) — elDiario.es
   Prefijo de clases: -av  (para poder convivir con otras piezas)
   =========================================================== */

/* Mapa a pantalla completa: sin márgenes del documento (si no, un <body> con
   margen por defecto desborda el 100vh y recorta el mapa por abajo). */
html,
body {
  margin: 0;
  padding: 0;
}

/* ===== Tokens de marca (copiados de la plantilla: shared/styles/tokens.css) ===== */
:root {
  --ed-fuente: "Encode Sans", "Helvetica Neue", Arial, sans-serif;
  --ed-negro: #1a1a1a;
  --ed-texto-suave: #4a4a4a;
  --ed-gris-500: #939393;
}

/* ===== Cabecera de la casa: título, subtítulo y fuente (de base.css) ===== */
.ed-titulo {
  font-family: var(--ed-fuente);
  font-weight: 700;
  color: var(--ed-negro);
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 4px;
}
.ed-subtitulo {
  font-family: var(--ed-fuente);
  color: var(--ed-texto-suave);
  font-size: 14px;
  margin: 0 0 16px;
}
.ed-fuente {
  font-family: var(--ed-fuente);
  color: var(--ed-gris-500);
  font-size: 12px;
  margin-top: 8px;
}

/* Cada mapa con su cabecera es una sección de la pieza */
.seccion-mapa-av {
  margin-bottom: 32px;
  text-align: left; /* el gestor centra el texto del artículo; lo forzamos a la izquierda */
}
.seccion-mapa-av:first-of-type {
  margin-top: 12px;
}
/* Refuerzo por si el gestor alinea los h3/p directamente (más especificidad). */
.seccion-mapa-av .ed-titulo,
.seccion-mapa-av .ed-subtitulo,
.seccion-mapa-av .ed-fuente,
.seccion-mapa-av .mini-mapa-titulo-av,
.seccion-mapa-av .leyenda-estatica-av {
  text-align: left;
}

/* ---- Mini-mapas por continente (small multiples) ---- */
.mapas-multiples-av {
  display: grid;
  grid-template-columns: 1fr; /* móvil: 1 columna */
  gap: 14px;
}
@media (min-width: 600px) {
  .mapas-multiples-av {
    grid-template-columns: 1fr 1fr; /* escritorio: 2 columnas */
  }
}
.mini-mapa-titulo-av {
  display: block;
  font-family: var(--ed-fuente);
  font-weight: 600;
  font-size: 13px;
  color: var(--ed-negro);
  margin: 0 0 4px;
}
.mini-mapa-caja-av {
  width: 100%;
  height: 300px;
  background: #e9e9e7;
}

/* Leyenda estática compartida por los mini-mapas */
.leyenda-estatica-av {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0 14px; /* leyenda encima de los mini-mapas */
  font-family: var(--ed-fuente);
  font-size: 13px;
  color: #1a1a1a;
}

.cont-mapa-av {
  position: relative;
  font-family: "Encode Sans", system-ui, sans-serif;
}
/* separación entre los dos mapas de la pieza */
.cont-mapa-av + .cont-mapa-av {
  margin-top: 10px;
}

.mapa-caja-av {
  width: 100%;
  height: 72vh; /* alto de cada mapa dentro de la pieza (hay dos apilados) */
  min-height: 420px;
  background: #e9e9e7;
}

/* ---- Leyenda flotante ---- */
.leyenda-av {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.6;
  color: #1a1a1a;
}
.leyenda-item-av {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.leyenda-linea-av {
  display: inline-block;
  width: 22px;
  height: 0;
  margin-right: 8px;
  border-top-width: 3px;
  border-top-style: solid;
}
.leyenda-servicio-av {
  border-top-color: #005695;
}
.leyenda-construccion-av {
  border-top-color: #4A90E2;
  border-top-style: dotted;
}

/* ---- Botón "volver a la vista inicial" (se inyecta en el grupo del zoom) ---- */
.ctrl-volver-av {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9 9 0 0 0-9 9'/%3E%3Cpolyline points='3 4 3 9 8 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  display: none;
}

/* ---- Spinner de carga ---- */
.cargando-av {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity 0.5s;
}
.cargando-spinner-av {
  width: 34px;
  height: 34px;
  border: 3px solid #d7d7d5;
  border-top-color: #d0021b;
  border-radius: 50%;
  animation: giro-av 0.8s linear infinite;
}
@keyframes giro-av {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .leyenda-av {
    font-size: 12px;
  }
}