:root{
--primary:#0066cc;
--secondary:#f5f7fa;
--accent:#ff6b6b;
--text:#222;
--text-light:#555;
--bg:#ffffff;
--shadow:0 18px 20px rgba(0,0,0,.08);
--radius:12px;
--transition:.3s ease;
}

body{
  background-color: #ffffff00;
}


.cuerpo-general{
  height: 300px !important;
  background-color: none;
}

.container-mapa{   
width: 100% !important; 
display:flex;
height:auto;
overflow:hidden;
background-color: #0EA5E9;

}

.card{
background:var(--bg);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:20px;
display:flex;
flex-direction:column;
gap:12px;
transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.card h3{
font-size:1.1rem;
font-weight:600;
color:var(--primary);
display:flex;
align-items:center;
gap:8px;
}
.card h3 span{
font-size:1.6rem;
color:var(--accent);
}
.row{
display:flex;
justify-content:space-between;
align-items:center;
font-size:.95rem;
}
.row .label{
color:var(--text-light);
}
.row .value{
font-weight:600;
}
.badge{
background:var(--primary);
color:#fff;
padding:2px 8px;
border-radius:20px;
font-size:.75rem;
}
/* ---------- Map ---------- */
#map{
flex:1;
height:100%;
background-color: transparent !important;  /* Fondo transparente */

}
/* ---------- Mobile ---------- */
.toggle-btn{
display:none;
position:absolute;
top:16px;
left:16px;
z-index:1000;
background:var(--primary);
color:#fff;
border:none;
border-radius:6px;
padding:8px 12px;
cursor:pointer;
font-size:1rem;
}
@media (max-width:768px){
.toggle-btn{display:block;}
.sidebar{
position:absolute;
top:0;
left:-100%;
height:100%;
z-index:999;
}
.sidebar.open{left:0;}
#map{width:100%;}
}

/* Fijar altura del mapa */
#map {
  width: 100%;
  height: 60vh;   /* ← importante */
  min-height: 100vh;
}

/* En móvil */
@media (max-width: 768px) {
  #map {
    width: 100%;
    height: 100vh;
  }
}

.grupo-1{
  background-color: rgb(241, 249, 255);
  padding: 5px;
  border-radius: 7px;
  margin-bottom: 3px;
}

.grupo-2{
  background-color: rgba(255, 234, 250, 0.726);
  padding: 5px;
  border-radius: 7px;
  margin-bottom: 3px;
}

.progress-fondo{
  margin-top: 5px;
  background-color: #d2f2fc;
  border-radius: 50px;
  height: 4px;
}

.valores{
  display: flex;
  align-items: center;
  justify-content: center;
}

.valores .porcentaje-lg{
  margin-left: 5px;
  font-size: 1.2em;
  font-weight: 600;
}

.valores .cantidad-lg{
  margin-left: 5px;
  font-size: 1em;
  font-weight: normal;
}

.valores .porcentaje-md{
  margin-left: 5px;
  font-size: 1em;
  font-weight: 600;
}

.valores .cantidad-md{
  margin-left: 5px;
  font-size: .8em;
  font-weight: normal;
}

.valores .porcentaje-sm{
  margin-left: 5px;
  font-size: .8em;
  font-weight: 600;
}

.valores .cantidad-sm{
  margin-left: 5px;
  font-size: .6em;
  font-weight: normal;
}



/* ===== ESTILOS PARA EL MAPA LEAFLET ===== */

/* Eliminar bordes negros del popup */
.leaflet-popup-content-wrapper {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: white !important;
  
}

.leaflet-popup-tip {
    background: white !important;
    box-shadow: none !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
}

/* Estilos para el tooltip */
.leaflet-tooltip {
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    color: #333 !important;
}

.leaflet-tooltip-top:before {
    border-top-color: rgba(255, 255, 255, 0.95) !important;
}

.leaflet-tooltip-bottom:before {
    border-bottom-color: rgba(255, 255, 255, 0.95) !important;
}

/* Estilos para los controles del mapa */
.leaflet-control-zoom a {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    color: #4a5568 !important;
    border-radius: 6px !important;
    margin: 4px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
}

.leaflet-control-zoom a:hover {
    background: #f7fafc !important;
    color: #0EA5E9 !important;
}

/* Leyenda del mapa */
.info.legend {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(4px) !important;
    margin-bottom: 10px;
}

/* Clase personalizada para popup */
.custom-popup .leaflet-popup-content-wrapper {
    border: none !important;
}

/* Eliminar cualquier borde de selección en los distritos */
.leaflet-interactive {
    outline: none !important;
}

/* Asegurar que no haya bordes negros en hover */
.leaflet-interactive:focus {
    outline: none !important;
}

.card-simple{
  background-color: #d3f1ff;
  padding: 15px;
  border-radius: 10px;
}

.card-diferente{
  background-color: #1789be;
  color: #f7fafc;
  padding: 15px;
  border-radius: 10px;
}