/* =========================================================
   VENEZUELA MAP — estilos Leaflet acordes a la marca
   Colores base:
   --verde        #7abf43
   --azul         #100d42
   --naranja      #f05423
   --verde-acento #b1ed81
   --azul-acento  #817ccc
   --naranja-acento #fbbfac
   ========================================================= */

.mapa-cobertura-wrap{
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(122,191,67,.35);
  box-shadow: 0 10px 30px rgba(16,13,66,.08);
  background: #f4f6f9;
}

@media (max-width: 640px){
  .mapa-cobertura-wrap{ height: 360px; }
}

#mapaCobertura .leaflet-container{
  width: 100%;
  height: 100%;
  background: #eef1f6;
  font-family: 'Inter', sans-serif;
}

/* Loader mientras carga el GeoJSON */
.mapa-loading{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8a94a3;
  background: #f4f6f9;
  z-index: 2;
}
.mapa-loading i{ font-size: 3.5rem; margin-bottom: 12px; color: #100d42; }
.mapa-loading.d-none{ display: none; }

/* Controles zoom */
.leaflet-control-zoom a{
  color: #100d42 !important;
  border-color: rgba(16,13,66,.15) !important;
}
.leaflet-control-zoom a:hover{
  background: #7abf43 !important;
  color: #fff !important;
}
.leaflet-control-attribution{
  font-size: .68rem;
  opacity: .7;
}

/* -------- Estados del GeoJSON -------- */
/* Estado NO cubierto (default) */
.estado-inactivo{
  fill: #d7dce3;
  stroke: #ffffff;
  stroke-width: 1.2;
  fill-opacity: .55;
  transition: fill-opacity .25s ease, fill .25s ease;
}
.estado-inactivo:hover{
  fill: #817ccc;
  fill-opacity: .35;
}

/* Estado CON cobertura */
.estado-activo{
  fill: #7abf43;
  stroke: #ffffff;
  stroke-width: 1.4;
  fill-opacity: .75;
  transition: fill-opacity .25s ease, fill .25s ease, transform .2s ease;
  cursor: pointer;
}
.estado-activo:hover{
  fill: #f05423;
  fill-opacity: .9;
}

/* -------- Popups -------- */
.leaflet-popup-content-wrapper{
  background: #100d42;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(16,13,66,.35);
}
.leaflet-popup-tip{ background: #100d42; }
.leaflet-popup-content{
  margin: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  line-height: 1.4;
}
.popup-estado-title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #b1ed81;
  margin: 0 0 4px;
  font-size: .95rem;
}
.popup-estado-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .8rem;
}
.popup-estado-status.cubierto{ color: #b1ed81; }
.popup-estado-status.no-cubierto{ color: #fbbfac; }
.popup-ciudad-list{
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: #cfd8e3;
  font-size: .8rem;
}
.popup-ciudad-list li{ margin-bottom: 2px; }
.leaflet-popup-close-button{ color: #fbbfac !important; }

/* -------- Marcadores de ciudad (DivIcon pin) -------- */
.city-pin{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f05423;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(240,84,35,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}
.city-pin::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(240,84,35,.4);
  animation: cityPulse 2.2s ease-out infinite;
}

/* Oficina con retiro — naranja fuerte (máxima prioridad visual) */
.city-pin.tipo-oficina{
  background: #f05423;
  box-shadow: 0 4px 10px rgba(240,84,35,.55);
}

/* Almacén / entrega directa sin retiro — azul-acento */
.city-pin.tipo-almacen{
  background: #817ccc;
  box-shadow: 0 4px 10px rgba(129,124,204,.55);
}

/* Cobertura vía aliado — verde */
.city-pin.tipo-aliado{
  background: #7abf43;
  box-shadow: 0 4px 10px rgba(122,191,67,.5);
}

/* Actualiza también la leyenda para reflejar los 3 tipos de ciudad */
.mapa-leyenda .dot.oficina{ background: #f05423; }
.mapa-leyenda .dot.almacen{ background: #817ccc; }
.mapa-leyenda .dot.aliado{ background: #7abf43; }


@keyframes cityPulse{
  0%   { transform: scale(.6); opacity: .8; }
  80%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* -------- Clúster de marcadores -------- */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large{
  background: rgba(129,124,204,.35);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div{
  background: #100d42;
  color: #fff;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}

/* -------- Leyenda flotante -------- */
.mapa-leyenda .leyenda-item{
  display: flex;
  align-items: flex-start; /* antes: center — evita que el texto multilinea
                               "empuje" la altura del punto */
  gap: 8px;
  color: #100d42;
  font-weight: 500;
}

.mapa-leyenda .dot{
  width: 12px;
  height: 12px;
  min-width: 12px;      /* evita que el flex lo comprima en el eje principal */
  min-height: 12px;     /* evita que se estire en el eje transversal */
  aspect-ratio: 1 / 1;   /* fuerza proporción 1:1 sin importar el contenedor */
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;        /* el flex no puede achicarlo/agrandarlo */
  align-self: center;    /* se centra respecto al bloque de texto, aunque
                             ese texto tenga 2-3 líneas */
  margin-top: 2px;       /* ajuste fino para que quede alineado con la
                             primera línea del texto, no con todo el bloque */
}

/* Si el texto de la leyenda se ve muy ancho y por eso hace wrap
   (como en tu captura), puedes además darle más ancho al contenedor: */
.mapa-leyenda{
  min-width: 190px;
}
.mapa-leyenda .dot.cubierto{ background: #7abf43; }
.mapa-leyenda .dot.no-cubierto{ background: #d7dce3; }
.mapa-leyenda .dot.ciudad{ background: #f05423; }


/* coordenadas */
.mapa-coords-box{
  background: #100d42;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Inter', monospace;
  font-size: .78rem;
  box-shadow: 0 4px 12px rgba(16,13,66,.3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  cursor: pointer;
  opacity:15%;
}
.mapa-coords-box .coords-value{
  color: #b1ed81;
  font-weight: 700;
}
.mapa-coords-box .coords-hint{
  color: #cfd8e3;
  font-size: .68rem;
}