/*
 * Mapa Arqueológico 5.0
 *
 * OJO: nada de reglas globales aquí. La versión 3.3 inyectaba
 *     .et_pb_code_0 { z-index: 10 !important; }
 * en TODAS las páginas del sitio — una clase de Divi que significa "el primer módulo de
 * código de cualquier página". Eso pisaba estilos fuera del terreno del plugin.
 *
 * Tampoco se fija aquí el alto ni el ancho: los pone el shortcode como estilo en línea,
 * para que el atributo `altura` funcione de verdad (en la 3.3 el !important de aquí lo
 * anulaba en silencio).
 *
 * 5.0: los colores de las CAPAS del mapa (agua, calles, edificios...) ya no se tocan aquí —
 * se eligen en Configuración y se pintan directamente en las teselas vectoriales (ver
 * mapa_arq_construir_estilo() en el .php). Lo que sigue viviendo aquí es el marcador y el
 * popup, que se quedan SIEMPRE en magenta/blanco de la web pase lo que pase con los colores
 * del mapa — así el punto de interés no se pierde encima de cualquier combinación.
 *
 * Colores: los de la web — magenta #b40068 · negro cálido #282827 · marrón #483628 ·
 * beige/tierra #c9af98 · blanco cálido #e6e6e3 (paleta de colores globales de Divi).
 */

.mapa-arq-canvas {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  background: #e6e6e3;
}

/*
 * 4.2: en un módulo Código de Divi 5 dentro de un grupo `display:flex`, el módulo es un
 * flex item sin ancho propio — solo nuestro <div style="width:100%"> por dentro. Como ese
 * 100% es circular (depende de un padre que a su vez depende de su contenido), el navegador
 * colapsa el flex item a 0px de ancho. Se le da ancho explícito SOLO al módulo Código que
 * contiene nuestro mapa — nunca a los demás módulos Código del sitio.
 */
.et_pb_code:has(.mapa-arq-canvas) {
  width: 100%;
}

/* El marcador: MapLibre lo pinta como un <div> normal, posicionado y centrado por la
 * librería — solo hace falta darle forma de círculo. */
.mapa-arq-marcador {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #b40068;
  border: 2px solid #f8f8f7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  cursor: pointer;
}

/* El yacimiento destacado (modo "ruta completa" en la página de una ruta): más grande, en
 * blanco con borde magenta — "estás aquí". */
.mapa-arq-marcador--destacado {
  width: 30px;
  height: 30px;
  background: #f8f8f7;
  border: 4px solid #b40068;
}

/* Popups en la paleta de la web. */
.mapa-arq-canvas .maplibregl-popup-content {
  background: #282827;
  color: #f8f8f7;
  border-radius: 4px;
  padding: 14px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* La punta del bocadillo es un triángulo hecho con bordes: da igual desde qué lado salga,
 * los cuatro colores son el mismo. */
.mapa-arq-canvas .maplibregl-popup-tip {
  border-top-color: #282827;
  border-bottom-color: #282827;
  border-left-color: #282827;
  border-right-color: #282827;
}

.mapa-arq-canvas .maplibregl-popup-content .mapa-arq-nombre {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #b40068;
  margin-bottom: 4px;
}

.mapa-arq-canvas .maplibregl-popup-content .mapa-arq-enlace {
  display: inline-block;
  margin-top: 8px;
  color: #f8f8f7;
  font-weight: 700;
  text-decoration: underline;
}

.mapa-arq-canvas .maplibregl-popup-content .mapa-arq-enlace:hover {
  color: #b40068;
}

.mapa-arq-canvas .maplibregl-popup-close-button {
  color: #f8f8f7;
  font-size: 18px;
  padding: 4px 8px;
}

/* La atribución (obligatoria por licencia) legible sobre cualquier combinación de colores
 * que se elija para el mapa. */
.mapa-arq-canvas .maplibregl-ctrl-attrib {
  background: rgba(40, 40, 39, .8);
  border-radius: 4px 0 0 0;
}

.mapa-arq-canvas .maplibregl-ctrl-attrib a,
.mapa-arq-canvas .maplibregl-ctrl-attrib {
  color: #d8d8d5;
  font-size: 11px;
}

.mapa-arq-canvas .maplibregl-ctrl-attrib a {
  color: #f8f8f7;
}