/* Contenedor principal */
.map-shell{ max-width:1200px; margin:16px auto; padding:0 20px; }

/* Mapa */
#map{
  height: clamp(560px, 100vh - var(--sticky-offset), 92vh);
  border-radius:16px; box-shadow: var(--shadow); overflow:hidden;
}

/* Banda explicativa ADR */
.adr-explain{
  background:var(--card); border:1px solid #eef1f6; border-radius:12px;
  padding:14px 16px; box-shadow:0 8px 24px rgba(16,24,40,.06);
  display:flex; gap:12px; align-items:flex-start; margin: 8px 0 14px;
}
.adr-badge{
  min-width:40px;height:40px;border-radius:10px; display:grid;place-items:center;
  font-weight:700; background:linear-gradient(180deg,#dbeafe,transparent);
  border:1px solid #e5efff; color:#1d4ed8; letter-spacing:.5px;
}
.adr-explain h3{margin:0 0 4px;font-size:15px}
.adr-explain p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}

/* Toolbar */
.map-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 10px; }
.map-search{
  height:36px; border-radius:999px; padding:0 12px;
  border:1px solid #e5e7eb; background:var(--card); color:var(--text);
  box-shadow: var(--shadow);
}
.map-search::placeholder{ color: var(--muted); }
:root.dark .map-search{ border-color:#253056; }
.map-select{
  height:36px;border-radius:999px;padding:0 28px 0 12px;border:1px solid #e5e7eb;
  background:var(--card);color:var(--text);box-shadow:var(--shadow);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#9aa0aa 50%),linear-gradient(135deg,#9aa0aa 50%,transparent 50%);
  background-position:right 10px top 14px,right 5px top 14px;background-size:5px 5px;background-repeat:no-repeat;
}
:root.dark .map-select{ border-color:#253056; }
.pill-ghost{ height:36px;border-radius:999px;padding:0 12px;border:1px dashed #c7cbe2;background:transparent; }

/* Leyenda Leaflet compacta (si la genera map.js) */
.legend{ background:var(--card); border:1px solid #e5e7eb; padding:10px 12px; border-radius:12px; box-shadow: var(--shadow); }
.legend h4{ margin:0 0 6px; font-size:13px; color:var(--muted); }
.legend .row{ display:flex; align-items:center; gap:8px; margin:4px 0; font-size:13px; }
.legend .sw{ width:14px; height:14px; border-radius:4px; border:1px solid #0001; }
:root.dark .legend{ border-color:#253056; }

/* Tooltip tipo tarjeta (lo usará map.js si className:'custom-tip') */
.leaflet-tooltip.custom-tip{
  background:var(--card); color:var(--text); border:1px solid #e5e7eb;
  padding:10px 12px; border-radius:10px; box-shadow:0 10px 24px rgba(16,24,40,.12);
}
.tip-title{font-weight:700;margin-bottom:2px}
.tip-sub{color:var(--muted);font-size:12px;margin-top:2px}

/* ======= Sección de gráficas ======= */
.charts-shell{ max-width:1200px; margin:18px auto 28px; padding:0 20px; display:grid; gap:16px; }
.charts-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; }
@media (max-width: 980px){ .charts-grid{ grid-template-columns: 1fr; } }

.chart-card{
  background:var(--card); border:1px solid #eef1f6; border-radius:12px;
  box-shadow:0 8px 24px rgba(16,24,40,.06); padding:16px 18px;
}
.chart-head{ display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; }
.chart-head h3{ margin:0; font-size:16px; }
.chart-note{ margin:6px 0 0; color:var(--muted); font-size:12px; }

.kpis{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
@media (max-width: 980px){ .kpis{ grid-template-columns: repeat(2,1fr); } }
.kpi{
  background:linear-gradient(180deg,var(--accent),transparent); border:1px solid #e8ecff;
  border-radius:12px; padding:14px; min-height:84px; display:flex; flex-direction:column; gap:4px;
}
.kpi .tag{ font-size:12px; color:var(--muted); }
.kpi .val{ font-size:22px; font-weight:800; line-height:1.1; }
.kpi .sub{ font-size:12px; color:var(--muted); }

/* Altura de los lienzos */
.chart-ctx{ width:100%; height:360px; }