.mini-kpi{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  background: rgba(255,255,255,.65);
  padding: 12px 14px;
}
.mini-kpi .t{ font-size: .82rem; color: rgba(11,18,32,.72); }
.mini-kpi .v{ font-size: 1.4rem; font-weight: 900; margin-top: 2px; }

.person-card{
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.70);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
}
.person-card .t{
  font-weight: 900;
  margin-bottom: 2px;
}
.person-card .m{
  color: rgba(11, 18, 32, .72);
  font-size: .9rem;
}

/* ✅ Mapa (genérico) */
#map{
  width: 100%;
  height: 420px;
  max-height: 70vh;
  overflow: hidden;
}

/* =========================================================
   ✅ FIX FINAL Leaflet + Bootstrap modal (mapa NO cortado)
   - sin tocar app.css
   - evita mosaico por transform/transitions
   - evita img{max-width:100%} rompa tiles
========================================================= */

/* Evita que reglas globales rompan los tiles */
#mapaModal .leaflet-container img,
#mapaModal .leaflet-container img.leaflet-tile{
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
}

/* El modal del mapa debe poder crecer */
#mapaModal .modal-dialog{
  max-width: 980px;
  width: calc(100vw - 2rem);
}



/* Body del modal sin scroll raro */
#mapaModal .modal-body{
  position: relative;
  overflow: hidden;
}

/* Contenedor mapa dentro del modal */
#mapaModal #map{
  width: 100%;
  height: 60vh !important;
  min-height: 460px !important;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.6);
  position: relative;
}

/* Si tu mapaModal está dentro de otro modal */
#mapaModal{
  z-index: 2065;
}

/* ===== Leaflet FIX (tiles no se rompen por img{max-width:100%}) ===== */
#mapaModal .leaflet-container img,
#mapaModal .leaflet-container img.leaflet-tile{
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
}

/* Modal mapa más ancho */
#mapaModal .modal-dialog{
  max-width: 980px;
  width: calc(100vw - 2rem);
}

/* Mapa con tamaño real dentro del modal */
#mapaModal #map{
  width: 100%;
  height: 60vh !important;
  min-height: 460px !important;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.6);
}

/* Evita scroll raro */
#mapaModal .modal-body{
  overflow: hidden;
}

/* ✅ Stack correcto: mapaModal sobre personaModal */
#mapaModal{ z-index: 2065; }
.modal-backdrop.mapa-backdrop{ z-index: 2060; }


/* Estratificación visible */
.badge-estrat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  padding:.38rem .6rem;
  border-radius:999px;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.02em;
  border:1px solid transparent;
}
.badge-estrat-g0{ background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.badge-estrat-g1{ background:#ecfeff; color:#155e75; border-color:#a5f3fc; }
.badge-estrat-g2{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.badge-estrat-g3{ background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.badge-estrat-sd{ background:#f3f4f6; color:#374151; border-color:#d1d5db; }
.td-estrat, .td-cronicos{ white-space:nowrap; }


.pagination-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid rgba(15, 23, 42, .08);
  padding-top:14px;
}

#paginationNav .page-link{
  border-radius:10px;
  min-width:38px;
  text-align:center;
}

#paginationNav .page-item.active .page-link{
  font-weight:700;
}

@media (max-width: 767.98px){
  .pagination-wrap{
    flex-direction:column;
    align-items:stretch;
  }

  #paginationNav{
    justify-content:flex-start !important;
  }
}
