/* Página del mapa de barrios: el mapa ocupa casi toda la pantalla; el resto flota encima. */
body.mapa { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.mapa #stage { position: relative; flex: 1; min-height: 0; background: var(--bg); }
#view { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; background: var(--bg); }
#view.panning { cursor: grabbing; }
.lyr { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lyr img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; image-rendering: auto; }
#vec { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

/* paneles flotantes */
.float { position: absolute; z-index: 5; background: var(--bg); border: 1px solid var(--rule); box-shadow: 3px 3px 0 var(--rule); }
#layers { top: 10px; left: 10px; width: 290px; max-height: calc(100% - 150px); overflow: auto; padding: 6px 10px 8px; font-size: 12.5px; }
#layers > details > summary { cursor: pointer; list-style: none; }
#layers > details > summary::-webkit-details-marker { display: none; }
#layers > details > summary .kicker { font-size: 13px; }
#layers > details > summary::after { content: " [−]"; color: var(--ink-2); }
#layers > details:not([open]) > summary::after { content: " [+]"; }
.lyr-row { display: flex; gap: 6px; align-items: baseline; padding: 3px 0 1px; cursor: pointer; }
.lyr-row input { accent-color: var(--accent); margin: 0; }
.lyr-sub { margin: 2px 0 4px 21px; }
.lyr-sub select { font: inherit; max-width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); padding: 1px 2px; }
.lyr-sub p { margin: 4px 0 0; }
.bar-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bar-keys li { display: flex; gap: 6px; align-items: baseline; }
.bar-ico { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); opacity: 0.7; position: relative; top: 1px; }
.bar-ico.near { background: var(--st-warning); opacity: 1; }
.bar-ico.wet { background: var(--st-critical); opacity: 1; }
.bar-ico.na { opacity: 0.3; }
.rt-ico { display: inline-block; flex: none; width: 14px; height: 4px; margin-top: 7px; border-radius: 2px; background: var(--ink); opacity: 0.6; }
.rut-of { margin: 8px 0 3px; }
#card ul { margin: 4px 0 0; padding-left: 16px; }
.rt-ico.total { background: var(--st-critical); opacity: 1; } .rt-ico.parcial { background: var(--st-warning); opacity: 1; } .rt-ico.restr { background: #3b82f6; opacity: 1; }
.legend-line { margin: 2px 0 0; line-height: 1.5; }
.legend-line .bar-ico, .legend-line .rt-ico { margin: 0 3px 0 6px; }
.legend-line .bar-ico:first-child, .legend-line .rt-ico:first-child { margin-left: 0; }
.lnk { font: inherit; color: var(--link); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }

.search { position: absolute; z-index: 6; top: 10px; left: 50%; transform: translateX(-50%); width: min(340px, calc(100% - 440px)); }
.search input { width: 100%; box-sizing: border-box; font: inherit; padding: 4px 8px; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); box-shadow: 3px 3px 0 var(--rule); border-radius: 0; }
.search ul { list-style: none; margin: 0; padding: 0; background: var(--bg); border: 1px solid var(--rule); border-top: 0; max-height: 50vh; overflow: auto; }
.search li { padding: 4px 8px; cursor: pointer; font-size: 12.5px; }
.search li:hover, .search li.on { background: var(--code-bg); color: var(--code-ink); }
.search li small { color: var(--ink-2); }
.search li:hover small, .search li.on small { color: inherit; }

.zoom-ctl { position: absolute; z-index: 5; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; background: var(--bg); border: 1px solid var(--rule); box-shadow: 3px 3px 0 var(--rule); padding: 2px 6px; }
.zoom-ctl .btn { line-height: 1.6; }

/* ficha del barrio elegido */
#card { top: 100px; right: 10px; width: 310px; max-height: calc(100% - 200px); overflow: auto; padding: 8px 12px 10px; font-size: 12.5px; }
#card h2 { font-size: 15px; margin: 0 0 2px; }
#card .x { float: right; }
#card dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 8px 0 4px; }
#card dt { color: var(--ink-2); }
#card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
#card .st { font-weight: 600; }
#card .st.wet { color: var(--st-critical); } #card .st.near { color: var(--st-warning); }
#card .strip { width: 100%; height: 22px; display: block; margin-top: 4px; }
#card .strip rect.wet { fill: var(--st-critical); } #card .strip rect.near { fill: var(--st-warning); } #card .strip rect.dry { fill: var(--band); } #card .strip rect.na { fill: none; }
#card .strip .now { stroke: var(--ink); stroke-width: 1.5; }
#card p { margin: 6px 0 0; }

/* barra de fecha */
#timebar { left: 50%; bottom: 26px; transform: translateX(-50%); width: min(620px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.tb-mid { flex: 1; min-width: 0; }
.tb-label { font-size: 13px; }
#slider { width: 100%; margin: 2px 0 0; accent-color: var(--accent); }
.attrib { position: absolute; z-index: 4; left: 10px; bottom: 4px; right: 10px; margin: 0; font-size: 11px; line-height: 1.3; pointer-events: none; text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg); color: var(--ink); }

/* capa vectorial */
#vec .rt, #vec .rt-case { fill: none; stroke: var(--bg); stroke-width: 9px; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; pointer-events: none; }
#vec .rt { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#vec .rt.total { stroke: var(--st-critical); stroke-width: 6px; }
#vec .rt.parcial { stroke: var(--st-warning); stroke-width: 6px; }
#vec .rt.restr { stroke: #3b82f6; stroke-width: 6px; }
#vec .rt.sel { stroke: #ffd400; stroke-width: 9px; stroke-opacity: 0.8; }
#vec text { font: 11px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
#vec .riv { fill: none; stroke: #4aa3ff; stroke-width: 1.6; stroke-opacity: 0.75; stroke-linejoin: round; pointer-events: none; }
#vec .riv.obs { stroke: var(--ink-3); stroke-dasharray: 6 5; stroke-opacity: 0.8; }
#vec .riv.cau { stroke-width: 1.1; stroke-opacity: 0.6; }
#view.sat #vec .riv.cau { stroke-opacity: 0.8; }
#vec .gd { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1.5px; cursor: default; }
#vec .gd.pna { stroke-width: 1.2px; }
#view.sat #vec .gd { fill: #000; stroke: #fff; }
#view.sat #vec .riv.obs { stroke: #fff; }
#vec .st-pt { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
#vec .bp { cursor: pointer; }
#vec .bp-halo { fill: none; stroke: var(--bg); stroke-linecap: round; opacity: 0.85; pointer-events: none; }
#vec .bp-halo.off { display: none; }
#vec .bp.dot { fill: none; stroke-linecap: round; pointer-events: stroke; }
#vec .bp.poly { stroke-width: 1.6; stroke-linejoin: round; fill-opacity: 0.28; pointer-events: all; }
/* sin inundación en la fecha elegida: el color es la altura sobre el agua (violeta oscuro = bajo, claro = alto) */
#vec .bp.dry, #vec .bp.na { --lv: #5b21b6; --lo: 0.9; stroke: var(--lv); stroke-opacity: var(--lo); }
#vec .bp.poly.dry, #vec .bp.poly.na { fill: var(--lv); fill-opacity: 0.22; }
#vec .bp.l0 { --lv: #4c1d95; --lo: 0.95; } #vec .bp.l1 { --lv: #7c3aed; --lo: 0.9; } #vec .bp.l2 { --lv: #a78bfa; --lo: 0.85; }
#vec .bp.l3 { --lv: #c4b5fd; --lo: 0.75; } #vec .bp.l4 { --lv: #ddd6fe; --lo: 0.55; } #vec .bp.lx { --lv: var(--ink-3); --lo: 0.4; }
#vec .bp.near { stroke: var(--st-warning); } #vec .bp.poly.near { fill: var(--st-warning); fill-opacity: 0.4; }
#vec .bp.wet { stroke: var(--st-critical); } #vec .bp.poly.wet { fill: var(--st-critical); fill-opacity: 0.5; }
#vec .bp.sel { stroke: #ffd400; stroke-width: 3; }
#view.sat #vec .bp.l3 { --lv: #ddd6fe; --lo: 0.6; } #view.sat #vec .bp.l4 { --lv: #ede9fe; --lo: 0.35; } #view.sat #vec .bp.poly.dry, #view.sat #vec .bp.poly.na { fill-opacity: 0.3; }
#view.sat #vec .riv { stroke: #8fd0ff; }
#view.sat #vec text { fill: #fff; stroke: #000; }
#view.sat #vec .st-pt { fill: #000; stroke: #fff; }

@media (max-width: 760px) {
  .mapa .sb-right a[target] { display: none; }
  .search { top: 8px; left: 8px; right: 8px; width: auto; transform: none; }
  .search ul { position: absolute; top: 100%; left: 0; right: 0; }
  .zonas { margin-top: 4px; }
  #layers { top: 78px; left: 8px; width: auto; max-width: calc(100% - 70px); max-height: 42%; }
  .zoom-ctl { top: 78px; right: 8px; }
  #card { top: auto; left: 8px; right: 8px; bottom: 98px; width: auto; max-height: 42%; }
  #timebar { bottom: 26px; }
  .attrib { font-size: 10px; }
}
#vec .loc-pt { fill: var(--ink-2); stroke: var(--bg); stroke-width: 1px; }
#vec .loc text { font-size: 10.5px; fill: var(--ink-2); }
#view.sat #vec .loc-pt { fill: #fff; stroke: #000; }
#view.sat #vec .loc text { fill: #fff; }
.grad { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.gbar { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #4c1d95, #7c3aed, #a78bfa, #c4b5fd, #ddd6fe); }
.lg-note { margin: 0 0 6px; }
#view.sat #vec .bp-halo { stroke: #000; opacity: 0.35; }
.zonas { display: flex; gap: 6px; margin-top: 6px; }
.chip { font: 11px var(--mono); color: var(--ink-2); background: var(--bg); border: 1px solid var(--rule); padding: 2px 8px; cursor: pointer; box-shadow: 2px 2px 0 var(--rule); }
.chip:hover { color: var(--ink); border-color: var(--ink); }
#vec text.area { font-size: 13px; font-style: italic; letter-spacing: 0.04em; fill: #b45309; }
#view.sat #vec text.area { fill: #fcd34d; }
#vec .dm { fill: #0e7490; stroke: var(--bg); stroke-width: 2px; cursor: default; }
#vec .dm-t { font-size: 10.5px; fill: #0e7490; font-weight: bold; }
#view.sat #vec .dm { fill: #22d3ee; stroke: #000; stroke-width: 1.5px; }
#view.sat #vec .dm-t { fill: #67e8f9; }