:root {
  --qh-ink: #13222e; --qh-muted: #5a6b78; --qh-line: #d9e2e8; --qh-bg: #f6f9fb; --qh-card: #fff;
  --qh-accent: #0e639c; --qh-official: #1b6e3a; --qh-calc: #8a5a00;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--qh-ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--qh-bg); }
body { display: flex; flex-direction: column; }
.qh-header { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--qh-card); border-bottom: 1px solid var(--qh-line); }
.qh-brand { font-weight: 700; font-size: 17px; }
.qh-brand span { display: block; font-weight: 400; font-size: 12px; color: var(--qh-muted); }
.qh-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.qh-controls select { padding: 6px 8px; border: 1px solid var(--qh-line); border-radius: 6px; font: inherit; }
.qh-horizon { display: inline-flex; border: 1px solid var(--qh-line); border-radius: 6px; overflow: hidden; }
.qh-horizon button { border: 0; padding: 6px 10px; background: var(--qh-card); font: inherit; font-size: 13px; }
.qh-horizon button + button { border-left: 1px solid var(--qh-line); }
.qh-horizon button.active { background: var(--qh-accent); color: #fff; }
.qh-horizon button:disabled { color: #a9b5be; cursor: not-allowed; }
.qh-main { position: relative; flex: 1; display: flex; min-height: 0; }
#qh-map { flex: 1; min-height: 320px; }
#qh-panel { width: 360px; max-width: 100%; overflow-y: auto; background: var(--qh-card);
  border-left: 1px solid var(--qh-line); padding: 16px; }
.qh-hint { color: var(--qh-muted); }
#qh-panel h2 { margin: 0 0 2px; font-size: 20px; }
#qh-panel .qh-sub { color: var(--qh-muted); font-size: 13px; margin-bottom: 12px; }
.qh-ind { border: 1px solid var(--qh-line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.qh-ind .qh-name { font-size: 13px; color: var(--qh-muted); }
.qh-ind .qh-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qh-ind .qh-value small { font-size: 13px; font-weight: 400; color: var(--qh-muted); }
.qh-src { font-size: 12px; color: var(--qh-muted); margin-top: 4px; }
.qh-ind details { font-size: 12px; color: var(--qh-muted); margin-top: 4px; }
.qh-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 2px 6px;
  border-radius: 4px; border: 1px solid currentColor; margin-left: 6px; vertical-align: middle; }
.qh-badge.OFFICIAL { color: var(--qh-official); }
.qh-badge.CALCULATED { color: var(--qh-calc); }
.qh-na { font-size: 16px; font-weight: 600; color: var(--qh-muted); }
#qh-legend { position: absolute; left: 12px; bottom: 28px; background: var(--qh-card); border: 1px solid var(--qh-line);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; max-width: 240px; }
#qh-legend .qh-row { display: flex; align-items: center; gap: 6px; }
#qh-legend i { display: inline-block; width: 14px; height: 10px; }
.qh-footer { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 16px; font-size: 12px; color: var(--qh-muted);
  background: var(--qh-card); border-top: 1px solid var(--qh-line); }
.qh-footer a { color: var(--qh-accent); }
@media (max-width: 760px) {
  .qh-main { flex-direction: column; }
  #qh-map { min-height: 55vh; }
  #qh-panel { width: 100%; border-left: 0; border-top: 1px solid var(--qh-line); }
  #qh-legend { bottom: auto; top: 8px; left: 8px; padding: 6px 8px; font-size: 11px; }
}
/* --- Sprint 2: navegación, capas y acuíferos --- */
.qh-nav { display: flex; gap: 14px; font-size: 14px; }
.qh-nav a { color: var(--qh-accent); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.qh-nav a[aria-current="page"] { color: var(--qh-ink); border-bottom-color: var(--qh-accent); font-weight: 600; }
.qh-layers { display: inline-flex; gap: 10px; align-items: center; border: 1px solid var(--qh-line); border-radius: 6px;
  padding: 4px 10px; margin: 0; }
.qh-layers legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.qh-layers label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
/* Muestras de la leyenda de acuíferos: patrón + borde, no solo color */
:root { --qh-deficit: #b4442c; --qh-positive: #1f7a8c; --qh-nodata: #8a949b; }
#qh-legend .qh-sec + .qh-sec { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--qh-line); }
#qh-legend i.aq { width: 22px; height: 14px; }
#qh-legend i.aq-deficit { border: 2px solid var(--qh-deficit);
  background: repeating-linear-gradient(45deg, rgba(180,68,44,.55) 0 2px, rgba(180,68,44,.12) 2px 6px); }
#qh-legend i.aq-non_negative { border: 1.5px solid var(--qh-positive); background: rgba(31,122,140,.35); }
#qh-legend i.aq-no_data { border: 1.5px dashed var(--qh-nodata);
  background: radial-gradient(circle, rgba(138,148,155,.8) 1px, transparent 1.5px) 0 0 / 5px 5px; }
.qh-status { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; margin: 2px 0 8px; }
.qh-status.deficit { color: #fff; background: var(--qh-deficit); }
.qh-status.non_negative { color: #fff; background: var(--qh-positive); }
.qh-status.no_data { color: var(--qh-ink); background: #e3e7ea; }
.qh-section { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--qh-muted); margin: 16px 0 6px; }
.qh-note { font-size: 13px; background: var(--qh-bg); border-left: 3px solid var(--qh-line); padding: 6px 10px; margin: 6px 0 10px; }
.qh-list { list-style: none; margin: 0; padding: 0; }
.qh-list li { border-bottom: 1px solid var(--qh-line); padding: 6px 0; font-size: 14px; }
.qh-list button, .qh-link { background: none; border: 0; padding: 0; color: var(--qh-accent); font: inherit; cursor: pointer;
  text-align: left; text-decoration: underline; }
.qh-list small { color: var(--qh-muted); display: block; }
.qh-btn { display: inline-block; margin-top: 6px; padding: 7px 12px; border: 1px solid var(--qh-accent); border-radius: 6px;
  background: var(--qh-card); color: var(--qh-accent); font: inherit; font-size: 14px; cursor: pointer; }
.qh-also { font-size: 13px; margin-top: 14px; padding-top: 8px; border-top: 1px dashed var(--qh-line); }
@media (max-width: 760px) { .qh-nav { order: 3; } }