/**
 * charts.css — Estilos especificos de graficas, mapa y timeline
 */

/* ═══ Chart containers ═══ */
.chart-container {
  width: 100%;
  min-height: 200px;
}

/* ═══ Map info box (reemplaza tooltips individuales) ═══ */
.map-info-box {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  padding: 10px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  min-width: 120px;
  pointer-events: none;
}
.map-info-box b {
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}
.map-info-box .muni-count {
  color: var(--brand);
  font-weight: 600;
}

/* ═══ Leaflet dark mode ═══ */
.dark .leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* ═══ Map fullscreen ═══ */
#mapContainer[style*="fixed"] {
  display: flex;
  flex-direction: column;
}
#mapContainer[style*="fixed"] #map {
  flex: 1;
}
#mapContainer[style*="fixed"] .flex {
  padding: 12px 16px;
  position: relative;
  z-index: 10;
}

/* ═══ Timeline chips ═══ */
.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: transform .15s ease;
}
.timeline-dot:hover {
  transform: scale(1.4);
}