/* ============================================
   LUZ VERDE - Estilos Globales Compartidos
   ============================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Lexend', sans-serif;
  min-height: max(884px, 100dvh);
  background: #f7f9ff;
  color: #091d2e;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Scrollbar ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Ambient Blobs ---------- */
.ambient-blob-1 {
  position: fixed; top: -10%; right: -10%;
  width: 50vw; height: 50vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(209,228,251,.6) 0%, rgba(247,249,255,0) 70%);
  z-index: -1; filter: blur(40px); pointer-events: none;
}
.ambient-blob-2 {
  position: fixed; bottom: -10%; left: -10%;
  width: 60vw; height: 60vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,239,255,.7) 0%, rgba(247,249,255,0) 70%);
  z-index: -1; filter: blur(50px); pointer-events: none;
}

/* ---------- Toast Notification ---------- */
#toast-container {
  position: fixed; bottom: 100px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  background: #006d37; color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,109,55,.35);
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #ba1a1a; }
.toast.info  { background: #006397; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(9,29,46,.5);
  backdrop-filter: blur(4px); z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-sheet {
  background: #fff; border-radius: 20px 20px 0 0;
  width: 100%; max-width: 600px;
  padding: 24px 20px 40px;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  max-height: 90vh; overflow-y: auto;
}
.modal-overlay.active .modal-sheet { transform: translateY(0); }

/* ---------- Map Containers ---------- */
/* isolation: isolate crea un nuevo stacking context
   para que las capas internas de Leaflet no "escapen" al z-index global */
#heatmap-container,
#report-map {
  isolation: isolate;
  position: relative;
  z-index: 0;
}

/* ---------- Leaflet overrides ---------- */
.leaflet-control-attribution { display: none !important; }

/* Controles de zoom siempre visibles dentro del mapa */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}
.leaflet-control-zoom a {
  border-radius: 8px !important;
  color: #006d37 !important;
  font-weight: 700 !important;
}

/* Popup personalizado */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
  font-family: 'Lexend', sans-serif !important;
}
.leaflet-popup-tip { display: none; }

/* ---------- Placa Input ---------- */
#input-placa {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 28px;
  font-weight: 700;
}

/* ---------- Chip selection ---------- */
.chip-radio:checked + .chip-label {
  border-color: #006d37;
  background: #d1fae5;
  color: #006d37;
}

/* ---------- Loading Spinner ---------- */
.spinner {
  width: 20px; height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Stat bar animation ---------- */
.stat-bar {
  height: 8px; border-radius: 999px;
  background: #006d37; transition: width .8s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

/* ---------- Card hover ---------- */
.report-card {
  transition: transform .18s, box-shadow .18s;
}
.report-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,109,55,.15);
}

/* ---------- Pulse badge ---------- */
.pulse-badge {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.pulse-badge::after {
  content: ''; position: absolute;
  width: 100%; height: 100%; border-radius: 50%;
  background: inherit; opacity: .6;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(2); opacity: 0; }
}

/* ---------- Leaflet map pin color ---------- */
.leaflet-marker-icon { filter: hue-rotate(100deg); }

/* ============================================================
   BOTTOM NAVBAR — z-index mayor a cualquier capa de Leaflet
   Leaflet usa hasta z-index ~1000 en popups y controles.
   El navbar debe estar por encima de todo eso.
   ============================================================ */
#bottom-nav {
  z-index: 1100 !important;
  position: fixed !important;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* El header también debe ganar a Leaflet */
header.fixed, header[class*="fixed"] {
  z-index: 1100 !important;
}