/* ====== Huella Hídrica: World Picker (namespaced) ====== */
:root {
  /* Colores del componente (podés cambiarlos) */
  --hh-map-stroke: #0b2b38;
  --hh-map-fill: #ffffff;
  /* gris base */
  --hh-map-fill-h: #d4e9f7;
  /* hover */
  --hh-map-active: #02558b;
  /* país activo */
  --hh-map-act-st: #02558b;
  /* borde activo */
  --hh-map-focus: rgba(13, 110, 253, .55);
}

/* Contenedor general */
.hh-map {
  color: inherit;
}

/* Marco y fondo del componente */
.hh-map__wrap {
  background: #02558b;
  border: 3px solid #02558b;
  border-radius: 12px;
  padding: 12px;
}

/* Escenario del SVG: responsivo con aspect-ratio */
.hh-map__stage {
  background: linear-gradient(180deg, #02558b 0%, #00aed9 100%);
  width: 100%;
  aspect-ratio: 16 / 9;
  /* cambia a 4/3 si te gusta más alto */
  overflow: hidden;
}

.hh-map__stage svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Estilo de países (paths o grupos con data-country) */
.hh-map__stage [data-country] {
  fill: var(--hh-map-fill);
  stroke: var(--hh-map-stroke);
  stroke-width: .5;
  cursor: pointer;
  transition: fill .12s ease, stroke .12s ease, stroke-width .12s ease;
}

.hh-map__stage [data-country]:hover {
  fill: var(--hh-map-fill-h);
}

/* País seleccionado (exclusivo) */
.hh-map__stage [data-country].is-active {
  fill: var(--hh-map-active);
  stroke: var(--hh-map-act-st);
  stroke-width: 1.25;
}

/* Accesibilidad: foco por teclado */
.hh-map__stage [data-country]:focus {
  outline: 3px solid var(--hh-map-focus);
  outline-offset: 2px;
  background: #02558b;
}

/* Panel inferior */
.hh-map__panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Botón propio del componente (sin chocar con Bootstrap) */
.hh-map__btn {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: .55rem 1rem;
  background: #02558b;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.hh-map__btn:hover {
  background: #5d9ac4;
}

.hh-map__current {
  opacity: .95;
}

/* Dark-on-light / light-on-dark helpers (opcional) */
.bg-white-app .hh-map__wrap {
  /*background: #f8fafb;*/
  background: linear-gradient(180deg, #02558b 0%, #00aed9 100%);
  border-color: #02558b;
}

.bg-dark .hh-map__wrap {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
}

.bg-dark .hh-map__stage [data-country] {
  stroke: rgba(255, 255, 255, .35);
}

.hh-map__stage [data-country]:focus {
  outline: none !important;
}

.hh-map__controls {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Dejá que svg-pan-zoom maneje los gestos; no el navegador */
.hh-map__stage svg { touch-action: none; }

/* Asegurá que los países reciban eventos */
.hh-map__stage [data-country] { pointer-events: auto; }

/* Por si algún reset puso pointer-events:none en SVG */
.hh-map__stage svg { pointer-events: auto; }