/*///////////////// DONDE ENCONTRARNOS ////////////////////////*/

.donde-encontrarnos-info {
  padding-left: 35px;                              /* Separa el contenido del mapa en escritorio. */
}

.donde-encontrarnos-mapa {
  position: relative;                              /* Mantiene el tooltip relacionado con el mapa. */
}

/*///////////////// MAPA INTERACTIVO DE ARGENTINA ////////////////////////*/

.mapa-argentina {
  position: relative;                              /* Mantiene el SVG dentro de su columna. */
  width: 100%;                                     /* Usa todo el ancho disponible. */
  max-width: 560px;                                /* Limita el tamaño máximo del mapa. */
  margin: 0 auto;                                  /* Centra horizontalmente el mapa. */
}

.mapa-argentina svg {
  display: block;                                  /* Elimina el espacio inferior propio del SVG inline. */
  width: 100%;                                     /* Adapta el SVG al ancho del contenedor. */
  height: auto;                                    /* Conserva las proporciones originales. */
}

.mapa-argentina .provincia-mapa,
.mapa-argentina .provincia-mapa path {
  fill: #fff;                                      /* Define el color normal de las provincias. */
  stroke: #acabb5;                                 /* Mantiene las divisiones políticas. */
  stroke-width: 1;                                 /* Define un borde fino. */
  cursor: pointer;                                 /* Indica que la provincia es interactiva. */
  pointer-events: all;                             /* Permite hacer clic sobre toda la superficie. */
  transition: fill 0.2s ease;                      /* Suaviza el cambio de color. */
  outline: none;                                   /* Elimina el contorno predeterminado. */
}

.mapa-argentina .provincia-mapa:hover,
.mapa-argentina .provincia-mapa:hover path,
.mapa-argentina .provincia-mapa:focus-visible,
.mapa-argentina .provincia-mapa:focus-visible path {
  fill: #d8eef8;                                   /* Aplica celeste claro al pasar el cursor. */
}

.mapa-argentina .provincia-mapa.activa,
.mapa-argentina .provincia-mapa.activa path {
  fill: #8dcbe8;                                   /* Pinta la provincia seleccionada. */
}

.mapa-argentina #contorno_argentina,
.mapa-argentina #contorno_argentina path {
  pointer-events: none;                            /* Evita que el contorno general intercepte clics. */
}

/*///////////////// TOOLTIP DEL MAPA ////////////////////////*/

.mapa-tooltip {
  position: fixed;                                 /* Permite que siga la posición del cursor. */
  z-index: 1080;                                   /* Lo coloca por encima del mapa en escritorio. */
  padding: 7px 11px;                               /* Agrega espacio interior. */
  color: #fff;                                     /* Define el texto blanco. */
  background-color: #223874;                       /* Usa el azul principal del sitio. */
  border-radius: 6px;                              /* Redondea las esquinas. */
  font-size: 13px;                                 /* Define un tamaño compacto. */
  line-height: 1.2;                                /* Mantiene el tooltip compacto. */
  white-space: nowrap;                             /* Evita saltos de línea. */
  pointer-events: none;                            /* Evita que interfiera con el mouse. */
  transform: translate(12px, 12px);                /* Lo separa ligeramente del cursor. */
}

/*///////////////// CONTENIDO DE PROVINCIAS ////////////////////////*/

.provincias-contenido {
  margin-top: 40px;                                /* Separa los datos del contenido introductorio. */
}

.dist-provincia {
  position: relative;                              /* Permite ubicar la X dentro del bloque. */
  padding: 28px 30px;                              /* Agrega espacio interior. */
  border: 1px solid #dee2e6;                       /* Delimita visualmente el contenido. */
  border-radius: 20px;                             /* Redondea las esquinas. */
  background-color: #fff;   
  max-height: 590px;
  overflow-y: auto;
                       /* Mantiene un fondo blanco. */
}

.dist-provincia h3 {
  margin: 0 0 18px;                               /* Separa el título de la lista. */
  color: var(--heading-color);                     /* Usa el color principal de títulos. */
}

.dist-provincia ul {
  margin: 0;                                       /* Elimina márgenes innecesarios. */
  padding-left: 20px;                              /* Reserva espacio para las viñetas. */
  list-style: none;
}
.dist-provincia ul li {
  border-bottom: solid 1px #dee2e6;
  padding: 6px 0;
}
.dist-provincia ul li:last-child {
  border-bottom: 0;                   /* Elimina el borde del último elemento. */
}

.dist-provincia-cerrar {
  position: absolute;                              /* Ubica el botón independientemente del contenido. */
  top: 14px;                                       /* Lo separa del borde superior. */
  right: 18px;                                     /* Lo separa del borde derecho. */
  padding: 0;                                      /* Elimina espacios internos predeterminados. */
  color: #223874;                                  /* Usa el azul principal. */
  background: transparent;                         /* Elimina el fondo del botón. */
  border: 0;                                       /* Elimina el borde predeterminado. */
  font-size: 30px;                                 /* Define el tamaño de la X. */
  line-height: 1;                                  /* Centra visualmente la X. */
  cursor: pointer;                                 /* Indica que se puede cerrar. */
}

.dist-provincia-cerrar:hover {
  opacity: 0.7;                                    /* Genera una respuesta visual al pasar el cursor. */
}

.dist-provincia-cerrar:focus-visible {
  outline: 2px solid #223874;                      /* Mantiene una señal visible para teclado. */
  outline-offset: 3px;                             /* Separa el contorno del botón. */
}

.provincia-backdrop {
  display: none;                                   /* No se utiliza en escritorio. */
}

/*///////////////// TABLET Y MOBILE ////////////////////////*/

@media (max-width: 991.98px) {
  .donde-encontrarnos-info {
    padding-left: calc(var(--bs-gutter-x) * 0.5);  /* Recupera el padding normal de Bootstrap. */
    margin-bottom: 35px;                           /* Separa el contenido del mapa inferior. */
    text-align: center;                            /* Centra el contenido introductorio. */
  }

  .donde-encontrarnos-info .btn {
    display: inline-flex;                          /* Permite centrar icono y texto. */
    align-items: center;                           /* Centra verticalmente el contenido. */
    justify-content: center;                       /* Centra horizontalmente el contenido. */
  }

  .donde-encontrarnos-mapa {
    margin-top: 10px;                              /* Agrega una pequeña separación superior. */
  }

  .provincias-contenido {
    margin-top: 0;                                 /* Evita espacio innecesario bajo el encabezado. */
  }
}

/*///////////////// MOBILE ////////////////////////*/

@media (max-width: 767.98px) {
  .donde-encontrarnos-info {
    margin-top: 0;                                 /* Elimina cualquier margen superior previo. */
    margin-bottom: 30px;                           /* Separa el texto del mapa. */
  }

  .donde-encontrarnos-info h2 {
    text-align: center;                            /* Centra el título en mobile. */
  }

  .donde-encontrarnos-info p {
    text-align: center;                            /* Centra los párrafos en mobile. */
  }

  .donde-encontrarnos-info .btn {
    width: 100%;                                   /* Hace el botón cómodo en pantallas pequeñas. */
    max-width: 320px;                              /* Evita que sea excesivamente ancho. */
  }

  .mapa-tooltip {
    z-index: 1040;                                 /* Lo coloca debajo del backdrop y del modal. */
  }

  .dist-provincia {
    position: fixed;                               /* Convierte el bloque en una ventana modal. */
    top: 50%;                                      /* Lo posiciona desde el centro vertical. */
    left: 50%;                                     /* Lo posiciona desde el centro horizontal. */
    z-index: 1060;                                 /* Lo coloca por encima del fondo oscuro. */
    width: calc(100% - 30px);                      /* Mantiene espacio respecto de los laterales. */
    max-width: 480px;                              /* Evita que sea demasiado ancho. */
    max-height: calc(100vh - 40px);                 /*Evita que supere la altura disponible. */
    padding: 30px 25px;                            /* Ajusta el espacio interior. */
    overflow-y: auto;                              /* Permite desplazamiento si hay muchas localidades. */
    border: 0;                                     /* Elimina el borde en modo modal. */
    border-radius: 22px;                           /* Redondea el modal. */
    box-shadow: 0 8px 30px rgb(0 0 0 / 25%);       /* Agrega profundidad visual. */
    transform: translate(-50%, -50%);              /* Centra completamente el bloque. */
    text-align: center;                            /* Centra el contenido general del modal. */
  }

  .dist-provincia ul {
    width: 100%;                                   /* Hace que la lista use todo el ancho disponible. */
    margin: 0;                                     /* Elimina los márgenes predeterminados. */
    padding-left: 0;                               /* Elimina la sangría izquierda del ul. */
    list-style: none;                              /* Elimina las viñetas. */
    text-align: center;                            /* Centra el texto de las localidades. */
  }

  .dist-provincia ul li {
    width: 100%;                                   /* Hace que cada localidad ocupe toda la fila. */
    padding: 8px 0;                                /* Mantiene el espacio vertical. */
    text-align: center;                            /* Centra cada texto de forma explícita. */
  }



  .provincia-backdrop {
    position: fixed;                               /* Cubre toda la ventana. */
    inset: 0;                                      /* Equivale a top, right, bottom y left en cero. */
    z-index: 1050;                                 /* Queda debajo del modal. */
    display: block;                                /* Activa el fondo oscuro en mobile. */
    background-color: rgb(0 0 0 / 55%);            /* Oscurece el contenido de fondo. */
  }

  body.provincia-modal-abierto {
    overflow: hidden;                              /* Impide desplazar la página detrás del modal. */
  }
}