@charset "UTF-8";
/**
 * @file
 * Minsait Map Spain — Velantis Figma-aligned styles.
 * Figma Desktop: 241:2390 (popup: 241:2466).
 * Figma Mobile: 241:2765 (popup: 241:2835).
 */
/* ==========================================================================
   SVG container
   ========================================================================== */
.minsait-map-spain-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: visible;
}

.mapa-svg-wrapper {
  text-align: center;
  background: transparent;
  padding: 0;
  position: relative;
  overflow: hidden;
}

@media (max-width: 991px) {
  .mapa-svg-wrapper {
    touch-action: none; /* Prevent browser zoom/scroll on pinch — mobile only */
  }
}
.mapa-svg-wrapper svg {
  width: 100%;
  height: auto;
  max-width: 1597px;
  display: block;
  margin: 0 auto;
  /* Pan/zoom handled via viewBox manipulation, not CSS transforms. */
}

/* Laptop (1366–1599px) — Card #109.
   En el Figma laptop el mapa se escala a 834px y queda centrado. En código NO
   hace falta el "truco" de offset/overflow de Figma: el mapa ya renderiza
   centrado y sin desborde, basta acotar el ancho. El popup se posiciona vía
   getBoundingClientRect en JS, así que escala con él. */
@media (min-width: 1366px) and (max-width: 1599px) {
  .mapa-svg-wrapper svg {
    max-width: 834px;
  }
}
/* ==========================================================================
   Province elements (polygon, path, or g with ES-XX ids)
   ========================================================================== */
.mapa-svg-wrapper svg [id^=ES-] {
  cursor: pointer;
  transition: fill 0.2s ease;
}

/* Province colors — !important needed to override SVG inline <style> */
.mapa-svg-wrapper svg .vel-map-province--inactive,
.mapa-svg-wrapper svg .vel-map-province--inactive polygon,
.mapa-svg-wrapper svg .vel-map-province--inactive path {
  fill: var(--vel-primary, #00466E) !important;
}

.mapa-svg-wrapper svg .vel-map-province--active,
.mapa-svg-wrapper svg .vel-map-province--active polygon,
.mapa-svg-wrapper svg .vel-map-province--active path {
  fill: var(--vel-secondary, #0085AC) !important;
}

.mapa-svg-wrapper svg [id^=ES-]:hover,
.mapa-svg-wrapper svg [id^=ES-]:hover polygon,
.mapa-svg-wrapper svg [id^=ES-]:hover path {
  fill: var(--vel-accent, #00BDFB) !important;
}

.mapa-svg-wrapper svg .vel-map-selected,
.mapa-svg-wrapper svg .vel-map-selected polygon,
.mapa-svg-wrapper svg .vel-map-selected path {
  fill: var(--vel-accent, #00BDFB) !important;
}

/* ==========================================================================
   Popup — Mobile base (Figma 241:2835)
   padding: 32px, gap: 16px, radius: 24px, mobile shadow
   ========================================================================== */
.vel-map-popup {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: 32px;
  background: linear-gradient(0deg, rgba(0, 70, 110, 0.05) 0%, rgba(0, 70, 110, 0) 100%), #FFFFFF;
  border: 0.619px solid #E4E4E4;
  border-radius: 24px;
  box-shadow: 0 0 10px -12px rgba(0, 0, 0, 0.2);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.vel-map-popup.vel-map-popup--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Province name — mobile: 36px, height ~26px (Figma h-25.991px) */
.vel-map-popup__name {
  font-family: "Funnel Display", sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--vel-accent, #00BDFB);
  letter-spacing: -2.97px;
  line-height: 1;
  margin: 0;
}

/* Data container — no gap, label and value stacked tight */
.vel-map-popup__data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Label — mobile: 16px Funnel Display Regular */
.vel-map-popup__label {
  font-family: "Funnel Display", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--vel-primary, #00466E);
  letter-spacing: -0.5px;
  line-height: 24px;
}

/* Value — mobile: 26px Funnel Display ExtraBold */
.vel-map-popup__value {
  font-family: "Funnel Display", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--vel-primary, #00466E);
  letter-spacing: -0.5px;
  line-height: 24px;
}

/* Mobile: popup is static (in-flow), centered with margin:auto via JS.
   display:flex + width:fit-content makes margin:auto work. */
@media (max-width: 991px) {
  .vel-map-popup.vel-map-popup--visible {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
  }
}
/* ==========================================================================
   Laptop (1366–1599px) — Card #109. Figma laptop popup 272:3210 (261×159px).
   El popup está escalado uniforme ×0.709 respecto a desktop (no como el resto
   de la sección, que tiene escalado irregular). Debe ir tras el bloque ≥992
   para ganar por orden de cascada.
   ========================================================================== */
@media (min-width: 1366px) and (max-width: 1599px) {
  .vel-map-popup {
    gap: 24.6px;
    padding: 24.6px;
    border-radius: 10.6px;
    box-shadow: 0 17.7px 17.7px 0 rgba(0, 0, 0, 0.25);
  }
}
/* ========================================================================== 
  Desktop (≥1600px) — Card #110. Figma desktop popup 241:2466 (300×175px).
   El popup está escalado uniforme ×0.803 respecto a desktop (no como el resto
   de la sección, que tiene escalado irregular). Debe ir tras el bloque ≥992
   para ganar por orden de cascada. 
   ========================================================================== */
@media (min-width: 1600px) {
  .vel-map-popup {
    gap: 35px;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .vel-map-popup__name {
    font-size: 56px;
    letter-spacing: -4.8px;
    line-height: 1;
  }
  .vel-map-popup__label {
    font-size: 26px;
    line-height: 39px;
    letter-spacing: -0.81px;
  }
  .vel-map-popup__value {
    font-size: 43px;
    line-height: 39px;
  }
}
/*# sourceMappingURL=minsait-map-spain.css.map */