:root{
  --ground:#e9edf1; --surface:#ffffff; --surface-2:#eff3f6;
  --ink:#08161e; --ink-2:#37525f; --muted:#7b929e;
  --line:#d8e1e6; --line-2:#e8eef1;
  --blue:#1667c4; --orange:#e2592a;
  --water-top:#4a9ae8; --water-bot:#1156a8;
  --s100:#d3e5fb; --s200:#a6c9f5; --s300:#75aaec;
  --s400:#428ce3; --s500:#1f6cc4; --s600:#15519a; --s700:#0c3970;
  --tw:#fff; --twm:rgba(255,255,255,.86); --td:#06202f; --tdm:rgba(6,32,47,.74);
  --k100:var(--td); --k200:var(--td); --k300:var(--td); --k400:var(--tw); --k500:var(--tw); --k600:var(--tw); --k700:var(--tw);
  --km100:var(--tdm); --km200:var(--tdm); --km300:var(--tdm); --km400:var(--twm); --km500:var(--twm); --km600:var(--twm); --km700:var(--twm);
  --nodata:#cfdae1; --neutral:#e7e4de;
  --crit:#c8402f; --good:#0f8f3f; --aqua:#1baf7a;
  --grid:#e4ebef; --ring:rgba(8,22,30,.10);
  --sombra:0 1px 2px rgba(8,22,30,.05), 0 10px 30px -18px rgba(8,22,30,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#060d12; --surface:#0d1a22; --surface-2:#142530;
    --ink:#e6eef3; --ink-2:#a9c0cc; --muted:#6f8a97;
    --line:#1d3340; --line-2:#152730;
    --blue:#3f8fe0; --orange:#d4622f;
    --water-top:#2f7bc9; --water-bot:#0e3f74;
    --s100:#0f2e4d; --s200:#15519a; --s300:#1f6cc4;
    --s400:#428ce3; --s500:#75aaec; --s600:#a6c9f5; --s700:#d3e5fb;
    --tw:#fff; --twm:rgba(255,255,255,.86); --td:#06202f; --tdm:rgba(6,32,47,.74);
    --k100:var(--tw); --k200:var(--tw); --k300:var(--tw); --k400:var(--tw); --k500:var(--td); --k600:var(--td); --k700:var(--td);
    --km100:var(--twm); --km200:var(--twm); --km300:var(--twm); --km400:var(--twm); --km500:var(--tdm); --km600:var(--tdm); --km700:var(--tdm);
    --nodata:#273b47; --neutral:#38352f;
    --crit:#e0715c; --good:#43bd63; --aqua:#199e70;
    --grid:#1a2c37; --ring:rgba(230,238,243,.12);
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 12px 34px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#060d12; --surface:#0d1a22; --surface-2:#142530;
  --ink:#e6eef3; --ink-2:#a9c0cc; --muted:#6f8a97;
  --line:#1d3340; --line-2:#152730;
  --blue:#3f8fe0; --orange:#d4622f;
  --water-top:#2f7bc9; --water-bot:#0e3f74;
  --s100:#0f2e4d; --s200:#15519a; --s300:#1f6cc4;
  --s400:#428ce3; --s500:#75aaec; --s600:#a6c9f5; --s700:#d3e5fb;
  --tw:#fff; --twm:rgba(255,255,255,.86); --td:#06202f; --tdm:rgba(6,32,47,.74);
  --k100:var(--tw); --k200:var(--tw); --k300:var(--tw); --k400:var(--tw); --k500:var(--td); --k600:var(--td); --k700:var(--td);
  --km100:var(--twm); --km200:var(--twm); --km300:var(--twm); --km400:var(--twm); --km500:var(--tdm); --km600:var(--tdm); --km700:var(--tdm);
  --nodata:#273b47; --neutral:#38352f;
  --crit:#e0715c; --good:#43bd63; --aqua:#199e70;
  --grid:#1a2c37; --ring:rgba(230,238,243,.12);
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 12px 34px -20px rgba(0,0,0,.85);
}

/* ---------- olas ----------
   Una franja en la línea de flotación, recortada con una máscara de onda.
   Hereda el color del nivel, así que sigue codificando el dato: la ola es
   forma, no color. Dos capas a velocidades distintas dan sensación de fondo. */
:root{
  --ola-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 q15 -7 30 0 t30 0 t30 0 t30 0 V14 H0 Z' fill='%23000'/%3E%3C/svg%3E");
  --ola-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 q11.25 5 22.5 0 t22.5 0 t22.5 0 t22.5 0 V12 H0 Z' fill='%23000'/%3E%3C/svg%3E");
}
@keyframes ola{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

.ola, .ola2{
  content:"";position:absolute;left:0;width:200%;pointer-events:none;
  background:inherit;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:0 bottom;mask-position:0 bottom;
}
.ola{
  bottom:calc(100% - 1px);height:9px;
  -webkit-mask-image:var(--ola-a);mask-image:var(--ola-a);
  -webkit-mask-size:50% 100%;mask-size:50% 100%;
  animation:ola 7s linear infinite;
}
.ola2{
  bottom:calc(100% - 1px);height:7px;opacity:.55;
  -webkit-mask-image:var(--ola-b);mask-image:var(--ola-b);
  -webkit-mask-size:33.333% 100%;mask-size:33.333% 100%;
  animation:ola 11s linear infinite reverse;
}
.tank .ola{height:16px;animation-duration:9s}
.tank .ola2{height:12px;animation-duration:14s}
.strip .ola{height:12px;animation-duration:8s}
.strip .ola2{height:9px;animation-duration:13s}

@media (prefers-reduced-motion: reduce){
  .ola,.ola2{animation:none}
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variation-settings:"wdth" 100;
  font-size:16px;line-height:1.6;padding-inline:22px;padding-block:0;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1040px;margin:0 auto}
h1,h2,h3{margin:0;line-height:1.06;text-wrap:balance;letter-spacing:-.035em;
  font-variation-settings:"wdth" 118}
p{margin:0}

.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:20px;margin-bottom:34px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.045em;font-variation-settings:"wdth" 118;
  color:inherit;text-decoration:none;border-radius:6px;padding:2px 4px;margin-left:-4px;
  transition:opacity .15s}
.logo:hover{opacity:.7}
.logo:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.logo em{font-style:normal;color:var(--blue)}
.tabs{display:flex;gap:4px;margin-left:auto;background:var(--surface-2);padding:4px;border-radius:999px}
.tabs button{font:inherit;font-size:13.5px;font-weight:600;padding:7px 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;transition:.15s}
.tabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sombra)}
.tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

.src{font-size:12.5px;color:var(--ink-2);border-left:2px solid var(--line);padding:2px 0 2px 14px;margin-bottom:40px;line-height:1.55;max-width:88ch}
.src b{color:var(--ink);font-weight:600}

.kicker{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-variation-settings:"wdth" 108}
.big{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:10px}
.big .pct{font-size:clamp(88px,17vw,164px);font-weight:800;letter-spacing:-.06em;line-height:.8;
  font-variation-settings:"wdth" 122;
  background:linear-gradient(175deg,var(--ink) 30%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.big .side{padding-bottom:12px}
.big .side .hm{font-size:21px;font-weight:600;letter-spacing:-.025em}
.big .side .cap{font-size:14px;color:var(--muted);margin-top:1px}
.deltas{display:flex;gap:34px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.d .l{font-size:12px;color:var(--muted);font-weight:500}
.d .v{font-size:19px;font-weight:700;letter-spacing:-.025em;margin-top:1px;display:flex;align-items:center;gap:5px}
.arrow{font-size:12px}.dn{color:var(--crit)}.up{color:var(--good)}
.spark{margin-top:26px;background:var(--surface);border-radius:10px;padding:16px 18px 10px;box-shadow:var(--sombra)}
.spark .t{font-size:12.5px;color:var(--ink-2);font-weight:500;margin-bottom:6px}
.spark svg{display:block;width:100%;height:auto}

section{margin-bottom:62px}
h2{font-size:clamp(24px,3vw,30px);font-weight:700;margin-bottom:18px}

.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:14px}
.crumbs button{font:inherit;font-size:14px;font-weight:600;border:0;background:none;padding:0;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.crumbs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.crumbs .sep{color:var(--muted)}
.crumbs .cur{font-weight:700}
.crumbs .hint{color:var(--muted);font-size:13px;font-weight:500}

.mapwrap{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:16px;align-items:start}
.mapbox{position:relative;background:var(--surface);border-radius:12px;padding:8px;box-shadow:var(--sombra);overflow:hidden}

/* ---------- la lista que acompaña al mapa ----------
   El mapa dice dónde; la lista dice cuánto y en qué orden. Se señalan
   mutuamente: el ratón sobre una fila resalta su territorio y al revés. */
.lista{background:var(--surface);border-radius:12px;box-shadow:var(--sombra);
  padding:12px 6px 6px;display:flex;flex-direction:column;min-height:0}
.lh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:0 10px 10px;border-bottom:1px solid var(--line-2)}
.lh .lt{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.lh .ln{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lb{overflow:auto;overscroll-behavior:contain;padding:4px 4px 2px;margin-top:2px}
.lr{display:grid;grid-template-columns:1fr auto;gap:0 10px;width:100%;text-align:left;
  font:inherit;color:inherit;background:none;border:0;padding:7px 8px 8px;border-radius:8px;
  cursor:pointer;transition:background .12s}
.lr:hover,.lr.on{background:var(--surface-2)}
.lr:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.lr .n{font-size:12.5px;font-weight:600;line-height:1.25}
.lr .p{font-size:13px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lr .t{grid-column:1/-1;height:6px;border-radius:999px;background:var(--line-2);
  position:relative;overflow:visible;margin-top:5px}
.lr .f{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  /* el primer escalón de la rampa casi no se distingue del carril: un
     filo de un píxel lo delimita para que una barra corta no desaparezca */
  box-shadow:inset 0 0 0 1px var(--ring)}
.lr .m{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--orange);border-radius:1px}
.lr .d{grid-column:1/-1;font-size:11px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.lr .d b{font-weight:700}
.lvacia{padding:18px 10px;font-size:12.5px;color:var(--muted)}
svg.map{display:block;width:100%;height:auto}
svg.map path{stroke:var(--surface);stroke-width:1;stroke-linejoin:round;cursor:pointer;vector-effect:non-scaling-stroke}
svg.map path:hover{opacity:.72}
svg.map path:focus-visible{outline:2px solid var(--blue)}
svg.map .muni{fill:var(--surface);fill-opacity:.42;stroke:var(--ink);stroke-width:1.5}
svg.map .muni:hover{fill-opacity:.65}
svg.map .muni.on{fill-opacity:.88;stroke-width:2.5}
svg.map .dot{stroke:var(--surface);stroke-width:1.5;cursor:pointer;vector-effect:non-scaling-stroke}
svg.map .dot.on{stroke:var(--ink);stroke-width:2.5}
svg.map .mlab{fill:var(--ink);font-weight:600;paint-order:stroke;stroke:var(--surface);stroke-linejoin:round;pointer-events:none}
.insetlab{fill:var(--muted);font-size:9.5px;font-weight:600;letter-spacing:.08em}
.insetbox{fill:none;stroke:var(--line);stroke-width:1}

/* el territorio que señala la lista del lado; va después de .muni y .dot
   para ganar el desempate de especificidad */
svg.map .hl{stroke:var(--ink);stroke-width:2.5}

.maphead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.maphead .crumbs{margin:0}
.mapctl{display:flex;gap:3px;background:var(--surface-2);padding:4px;border-radius:999px;flex:none}
.mapctl button{font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;transition:.15s}
.mapctl button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sombra)}
.mapctl button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

.ramp{position:absolute;right:16px;bottom:18px;width:184px;z-index:2}
.ramp .t{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ramp .bars{display:flex;height:12px;border-radius:999px;overflow:hidden}
.ramp .bars i{flex:1}
.ramp .sc{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.ramp .nd{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin-top:10px}
.ramp .nd i{width:13px;height:12px;border-radius:2px;display:block;flex:none;
  background:repeating-linear-gradient(45deg,var(--nodata) 0 3px,var(--surface) 3px 5px);
  box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- una curva por cuenca ----------
   Dieciséis gráficos pequeños con el mismo eje —de 0 a 100— para que se
   puedan comparar de un vistazo sin leer un número. Azul es este año;
   naranja, la media de los diez anteriores en esa misma semana. */
.cbars{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.cu{background:var(--surface);border-radius:12px;box-shadow:var(--sombra);padding:12px 13px 11px;
  border:0;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.cu:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(8,22,30,.07),0 16px 34px -18px rgba(8,22,30,.45)}
.cu:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cu .ch{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cu .cn{font-size:13px;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.cu .cp{font-size:19px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  flex:none;line-height:1}
.cu .cs{font-size:11px;color:var(--muted);margin:3px 0 10px;font-variant-numeric:tabular-nums}
/* margin-top:auto empuja la curva abajo: así se alinean entre tarjetas
   aunque un nombre ocupe tres líneas y otro una */
.cu svg{display:block;width:100%;height:auto;margin:0 0 7px;margin-top:auto}
.cu .cf{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cu .cf b{font-weight:700}
.cu .cf .sep{color:var(--line)}
.cu svg .rej{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke}
.cu svg .linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cu svg .fin{stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}

.vhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vhead .cnt{font-size:14px;color:var(--muted);font-weight:500}
.vessels{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px}
.ves{background:var(--surface);border-radius:10px;padding:0;position:relative;overflow:hidden;min-height:130px;display:block;text-align:left;font:inherit;color:inherit;text-decoration:none;cursor:pointer;width:100%;box-shadow:var(--sombra);transition:transform .15s,box-shadow .15s}
/* El texto se pinta dos veces: la capa de abajo con la tinta del papel y,
   encima, una copia recortada justo a la línea del agua con la tinta que
   contrasta con ese azul. Así cada letra se lee esté donde esté el nivel. */
.ves .cnt{position:relative;z-index:1;display:flex;flex-direction:column;min-height:130px;height:100%;padding:11px 12px 0;box-sizing:border-box}
.ves .cnt.bajo{position:absolute;inset:0;z-index:2;pointer-events:none}
.ves:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(8,22,30,.07),0 16px 34px -18px rgba(8,22,30,.45)}
.ves:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.ves .lvl{position:absolute;left:0;right:0;bottom:0}
.ves .cnt .nm{font-size:12.5px;font-weight:650;line-height:1.22;position:relative;z-index:1;letter-spacing:-.01em}
.ves .cnt .cu2{font-size:10.5px;margin-top:2px;position:relative;z-index:1;font-weight:500;color:var(--muted)}
.ves .cnt.bajo .cu2{color:inherit;opacity:.84}
.ves .cnt .pc{font-size:22px;font-weight:800;letter-spacing:-.045em;margin-top:auto;padding-bottom:10px;position:relative;z-index:1;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 112}
.more{margin-top:14px;text-align:center}
.more button{font:inherit;font-size:13.5px;font-weight:600;padding:11px 22px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;cursor:pointer;transition:.15s}
.more button:hover{border-color:var(--blue);color:var(--blue)}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:26px;text-align:center;color:var(--muted);font-size:14px}

.fhead{margin-bottom:24px}
.fhead h1{font-size:clamp(38px,6.5vw,60px);font-weight:800;margin-top:6px;font-variation-settings:"wdth" 120}
.fmeta{font-size:14.5px;color:var(--ink-2);margin-top:9px}
.fmeta span{color:var(--muted)}
.fgrid{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start}
.tank{position:relative;background:var(--surface-2);border-radius:12px;height:320px;overflow:hidden;box-shadow:var(--sombra)}
.tank .water{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to bottom,var(--water-top),var(--water-bot))}
.tank .mark{position:absolute;left:0;right:0;height:1px;background:var(--ring)}
.tank .mark b{position:absolute;right:8px;top:-17px;font-size:10.5px;font-weight:650;
  color:var(--ink-2);background:var(--surface);padding:2px 6px;border-radius:5px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);white-space:nowrap}
.tank .med{background:var(--orange);height:2px}
.tank .med b{right:auto;left:8px}
.tank .med b{color:var(--orange)}
.tank .val{position:absolute;left:16px;bottom:14px;color:#fff;font-weight:800;font-size:38px;letter-spacing:-.05em;line-height:1;font-variation-settings:"wdth" 118;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.tank .val small{display:block;font-size:11.5px;font-weight:600;opacity:.85;letter-spacing:.04em;margin-top:5px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;background:var(--line);border-radius:10px;overflow:hidden;margin-bottom:20px;box-shadow:var(--sombra)}
.fact{background:var(--surface);padding:13px 15px}
.fact .l{font-size:11.5px;color:var(--muted);font-weight:500}
.fact .v{font-size:19px;font-weight:700;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}
.fact .v small{font-size:12px;font-weight:600;color:var(--muted)}
.insight{background:var(--surface);border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:16px 18px;font-size:15px;color:var(--ink-2);line-height:1.55;box-shadow:var(--sombra)}
.insight b{color:var(--ink);font-weight:700}

.tip{position:absolute;pointer-events:none;background:var(--surface);border-radius:8px;padding:9px 12px;font-size:12.5px;box-shadow:0 2px 6px rgba(8,22,30,.10),0 14px 32px -12px rgba(8,22,30,.5);white-space:nowrap;transform:translate(-50%,-118%);z-index:3}
.tip .t{font-weight:700;margin-bottom:3px}
.tip .r{display:flex;justify-content:space-between;gap:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tip[hidden]{display:none}

details{margin-top:14px}
summary{font-size:13px;color:var(--ink-2);cursor:pointer;font-weight:600}
summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
table{border-collapse:collapse;width:100%;font-size:13px;margin-top:10px}
th,td{text-align:right;padding:6px 9px;border-bottom:1px solid var(--line-2);font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}

.subsec{font-size:13.5px;color:var(--muted);margin:-6px 0 16px;max-width:76ch;line-height:1.55}
.secabeza{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.secabeza h2{margin:0}
.mas{font-size:13.5px;font-weight:600;color:var(--blue);text-decoration:none;white-space:nowrap}
.mas:hover{text-decoration:underline}
.rk .nom a{color:inherit;text-decoration:none}
.rk tr:hover .nom a{color:var(--blue)}
footer{border-top:1px solid var(--line);padding-block:28px 48px;color:var(--muted);font-size:12.5px;line-height:1.65;max-width:92ch}

@media (max-width:1040px){ .mapwrap{grid-template-columns:1fr} }
@media (max-width:820px){
  .ramp{position:static;width:auto;margin:14px 8px 8px}
  .mapctl{width:fit-content;flex-wrap:wrap}
  .maphead{align-items:flex-start;flex-direction:column;gap:10px}
}
@media (max-width:640px){ .fgrid{grid-template-columns:1fr} .tank{height:220px} }
/* ---------- gráficos ----------
   Dos tintas y nada más: azul para «ahora», naranja para «lo normal».
   La banda es el rango de los mismos diez años que la media, así que
   comparte su tinta al 10 %: una idea, un color. */
.gr{position:relative;background:var(--surface);border-radius:12px;padding:14px 14px 6px;box-shadow:var(--sombra)}
.grhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:2px}
.grhead h3{font-size:15.5px;font-weight:700;letter-spacing:-.02em;margin:0}
.grhead .sub{font-size:12.5px;color:var(--muted)}
.gr svg{display:block;width:100%;height:auto;overflow:visible}
.gr .rej{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke}
.gr .eje{fill:var(--muted);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
.gr .linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gr .fin{stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}
.gr .cruz{stroke:var(--ink-2);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.45}
.gr .marca{stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}
.gr:focus-visible,.gr svg:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.leyenda{display:flex;gap:16px;flex-wrap:wrap;margin:6px 2px 0;font-size:12.5px;color:var(--ink-2)}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda i{display:block;width:16px;height:2px;border-radius:2px;flex:none}
.leyenda i.area{height:10px;border-radius:3px}

.globo{position:absolute;pointer-events:none;z-index:6;background:var(--surface);border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.12),0 14px 34px -14px rgba(0,0,0,.5);
  padding:9px 11px;font-size:12px;min-width:132px;transform:translate(-50%,-112%);transition:opacity .08s}
.globo[hidden]{display:none}
.globo .t{font-weight:700;color:var(--ink);margin-bottom:5px;letter-spacing:-.01em}
.globo .f{display:flex;align-items:center;gap:7px;margin-top:3px;white-space:nowrap}
.globo .f i{width:12px;height:2px;border-radius:2px;flex:none}
.globo .f i.area{height:9px;border-radius:2px}
.globo .f b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.globo .f em{font-style:normal;color:var(--muted);margin-left:auto;padding-left:10px}

/* ---------- tabla equivalente ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.tabla th,.tabla td{padding:5px 9px;text-align:right;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tabla th:first-child,.tabla td:first-child{text-align:left}
.tabla thead th{color:var(--muted);font-weight:650;position:sticky;top:0;background:var(--surface)}
.tscroll{max-height:320px;overflow:auto;margin-top:8px;border-radius:8px}

/* ---------- barra de tiempo del mapa ---------- */
.tiempo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 2px}
.tiempo .play{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;flex:none;box-shadow:var(--sombra)}
.tiempo .play:hover{border-color:var(--blue);color:var(--blue)}
.tiempo .play svg{width:15px;height:15px;fill:currentColor}
.tiempo input[type=range]{flex:1;min-width:180px;accent-color:var(--blue);height:26px}
.tiempo select{font:inherit;font-size:13px;font-weight:650;padding:7px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.tiempo .cuando{font-size:13px;font-weight:700;color:var(--ink);min-width:132px;font-variant-numeric:tabular-nums}
.tiempo .cuando em{font-style:normal;color:var(--muted);font-weight:500}

/* ---------- comparador ---------- */
.elige{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.elige input[type=search]{font:inherit;font-size:14px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);min-width:230px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 11px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:650;box-shadow:var(--sombra)}
.chip i{width:9px;height:9px;border-radius:50%;flex:none}
.chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px}
.chip button:hover{color:var(--crit)}
.sug{position:absolute;z-index:8;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--sombra);max-height:260px;overflow:auto;min-width:260px;margin-top:4px}
.sug button{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:13.5px;
  padding:8px 12px;cursor:pointer;color:var(--ink)}
.sug button:hover,.sug button[data-sel]{background:var(--surface-2)}
.sug button small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}

/* ---------- ranking ---------- */
.rk{width:100%;border-collapse:collapse;font-size:13px}
.rk th{position:sticky;top:0;background:var(--surface);z-index:2;text-align:right;padding:9px 10px;
  font-size:11.5px;font-weight:650;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.rk th:first-child,.rk td:first-child{text-align:left}
.rk th button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0;white-space:nowrap}
.rk th button:hover{color:var(--ink)}
.rk th[aria-sort] button{color:var(--ink);font-weight:800}
.rk td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.rk tbody tr{cursor:pointer}
.rk tbody tr:hover{background:var(--surface-2)}
.rk tbody tr:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.rk .nom{font-weight:700;letter-spacing:-.01em}
.rk .nom small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;font-variant-numeric:normal}
.rk .barra{width:120px}
.rk .barra i{display:block;height:9px;border-radius:0 4px 4px 0;min-width:2px}
.rk .up{color:var(--good);font-weight:700}
.rk .dn{color:var(--crit);font-weight:700}
.rkfiltro{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.rkfiltro select,.rkfiltro input{font:inherit;font-size:13px;padding:8px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.rkfiltro input{min-width:270px;flex:1;max-width:420px}
.rkwrap{max-height:620px;overflow:auto;border-radius:12px;background:var(--surface);box-shadow:var(--sombra)}

.rk .adg, .ves .adg{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  padding:1px 5px;border-radius:4px;background:var(--surface-2);color:var(--muted);
  vertical-align:middle;margin-left:5px}
.dosfuentes{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);line-height:1.5}
.dosfuentes b{color:var(--ink)}

/* ---------- estado de la carga en vivo ---------- */
.vivo{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:var(--muted);
  letter-spacing:.02em}
.vivo i{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.vivo.frio i{background:var(--muted)}
.cargando{opacity:.45;transition:opacity .2s}

@media (max-width:640px){
  .globo{min-width:118px;font-size:11.5px}
  .rk .barra{display:none}
  .tiempo .cuando{min-width:0}
}
@media (prefers-reduced-motion: reduce){ .cargando{transition:none} }


/* ---------------------------------------------------------------------------
   Añadidos para las páginas con URL propia (embalse, cuenca, provincia).
   Todo lo demás —tokens, olas, vasos, gráficos— sale de la misma hoja que
   usa la portada, así que no hay dos maquetaciones que mantener a la par.
--------------------------------------------------------------------------- */

/* La miga de pan. Es la única navegación jerárquica del sitio: desde una
   ficha se sube a su provincia y a su cuenca sin pasar por la portada. */
.miga{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;
  color:var(--ink-2);margin-bottom:18px}
.miga a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.miga a:hover{color:var(--blue);border-color:var(--blue)}
.miga .sep{color:var(--muted)}
.miga .cur{color:var(--muted)}

h1.tit{font-size:clamp(34px,5.6vw,54px);font-weight:800;letter-spacing:-.035em;
  line-height:1.03;margin:0 0 10px;font-variation-settings:"wdth" 120}
.entradilla{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:66ch;margin:0 0 22px}
.entradilla b{color:var(--ink);font-weight:700}

/* .vivo ya existe en la hoja de la portada con otra estructura interna;
   aquí se llama .estado para que no se pisen. */
.estado{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--muted);margin-bottom:14px}
.estado::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.estado.frio::before{background:var(--muted)}

/* Rejilla de enlaces a otras fichas. Es lo que hace que un buscador llegue a
   las 382: desde cualquier ficha se alcanzan sus vecinas en un salto. */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.tarj{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border-radius:10px;padding:11px 13px;box-shadow:var(--sombra);
  text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.tarj:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(8,22,30,.07),0 16px 34px -18px rgba(8,22,30,.45)}
.tarj:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tarj .n{font-size:13px;font-weight:650;line-height:1.25;min-width:0}
.tarj .n small{display:block;color:var(--muted);font-weight:500;font-size:11px;margin-top:2px}
.tarj .p{font-size:15px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;flex:none}
.tarj .nivel{flex:none;width:34px;height:6px;border-radius:999px;background:var(--line-2);
  position:relative;overflow:hidden}
.tarj .nivel i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--ring)}

/* Dónde está: la silueta de su provincia y un punto. Cuesta dos kilobytes y
   responde a la primera pregunta de quien no conoce la zona. */
.sitio{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:center}
.sitio svg{display:block;width:100%;height:auto;background:var(--surface);
  border-radius:12px;padding:10px;box-sizing:border-box;box-shadow:var(--sombra)}
.sitio .silueta{fill:var(--surface-2);stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.sitio .punto{stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}
.sitio .coords{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:8px}
@media (max-width:640px){ .sitio{grid-template-columns:1fr} }

/* Ficha técnica: dos columnas de etiqueta y valor, sin adornos. */
.tecnica{width:100%;border-collapse:collapse;font-size:14px;margin:0}
.tecnica th,.tecnica td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line-2);
  font-variant-numeric:tabular-nums}
.tecnica th{color:var(--muted);font-weight:600;font-size:12.5px;width:40%;
  text-transform:none;letter-spacing:0}
.tecnica td{font-weight:600}

/* Índices alfabéticos */
.az{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.az a{font-size:13px;font-weight:700;padding:6px 11px;border-radius:8px;
  background:var(--surface);color:var(--ink-2);text-decoration:none;box-shadow:var(--sombra)}
.az a:hover{color:var(--blue)}
.letra{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;margin:26px 0 10px;scroll-margin-top:16px}

section+section{margin-top:44px}
.secabeza{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.secabeza h2{margin:0}
.secabeza .mas{font-size:13.5px;font-weight:600;color:var(--blue);text-decoration:none}
.secabeza .mas:hover{text-decoration:underline}

/* La barra superior de estas páginas navega con enlaces, no con botones:
   son direcciones de verdad y tienen que poder abrirse en otra pestaña. */
.tabs a{font:inherit;font-size:13.5px;font-weight:600;padding:7px 16px;border-radius:999px;
  color:var(--ink-2);text-decoration:none;transition:.15s}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:var(--sombra)}
.tabs a:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
@media (max-width:560px){ .tabs{margin-left:0;flex-wrap:wrap} .bar{gap:10px} }

/* La banda de los diez años: naranja muy diluido. Sobre papel blanco basta
   con un 10 %; sobre fondo oscuro ese mismo 10 % se lee pardo y hay que
   subirlo para que siga leyéndose como naranja. */
.gr .banda{fill:var(--orange);fill-opacity:.10}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gr .banda{fill-opacity:.17} }
:root[data-theme="dark"] .gr .banda{fill-opacity:.17}

/* En el móvil el vaso se quedaba corto y, cuando el nivel y su media están
   cerca, la cifra grande y la etiqueta de la media se pisaban. */
@media (max-width:640px){
  .tank{height:264px}
  .tank .val{font-size:32px}
}
.tank .mark b{z-index:2}

/* Distintivo de los ocho que sólo publica Augas de Galicia: tienen ficha,
   pero no cuentan en ningún total. */
.tarj .adg{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.06em;
  padding:1px 5px;border-radius:4px;background:var(--surface-2);color:var(--muted);
  vertical-align:middle;margin-left:5px}