: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:#9c3a12; --s200:#c66b1c; --s300:#e7a44e;
  --s400:#9dc0dd; --s500:#4f93d9; --s600:#1f6cc4; --s700:#0c3970;
  --d1:#b3261e; --d2:#dc8a79; --d3:var(--neutral); --d4:#63b884; --d5:#0d7a3c;
  --tw:#fff; --twm:rgba(255,255,255,.86); --td:#06202f; --tdm:rgba(6,32,47,.74);
  --k100:var(--tw); --k200:var(--td); --k300:var(--td); --k400:var(--td); --k500:var(--td); --k600:var(--tw); --k700:var(--tw);
  --km100:var(--twm); --km200:var(--tdm); --km300:var(--tdm); --km400:var(--tdm); --km500:var(--tdm); --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:#e2692a; --s200:#e08f3a; --s300:#e8bd78;
    --s400:#7ba4c0; --s500:#3f8fe0; --s600:#6fb4f2; --s700:#a9d3ff;
    --d1:#e8604c; --d2:#a85a4a; --d3:var(--neutral); --d4:#3d8a56; --d5:#56d18a;
    --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(--td); --k500:var(--td); --k600:var(--td); --k700:var(--td);
    --km100:var(--tdm); --km200:var(--tdm); --km300:var(--tdm); --km400:var(--tdm); --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:#e2692a; --s200:#e08f3a; --s300:#e8bd78;
  --s400:#7ba4c0; --s500:#3f8fe0; --s600:#6fb4f2; --s700:#a9d3ff;
  --d1:#e8604c; --d2:#a85a4a; --d3:var(--neutral); --d4:#3d8a56; --d5:#56d18a;
  --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(--td); --k500:var(--td); --k600:var(--td); --k700:var(--td);
  --km100:var(--tdm); --km200:var(--tdm); --km300:var(--tdm); --km400:var(--tdm); --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}

/* ---------- claro u oscuro ----------
   Se enseña el icono de adonde vas, no el de donde estás: en claro, una
   luna; en oscuro, un sol. La etiqueta lo dice con palabras para quien no
   ve el icono. */
.tema{flex:none;width:36px;height:36px;padding:0;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  cursor:pointer;display:grid;place-items:center;transition:color .15s,border-color .15s}
.tema:hover{color:var(--blue);border-color:var(--blue)}
.tema:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tema svg{width:17px;height:17px;display:block}
.tema .sol{display:none}
:root[data-theme="dark"] .tema .luna{display:none}
:root[data-theme="dark"] .tema .sol{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tema .luna{display:none}
  :root:not([data-theme="light"]) .tema .sol{display:block}
}
.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}
/* «Cifras» no es una vista de la portada sino otra página, así que va fuera
   del grupo de botones y con forma de enlace, no de pestaña. */
.pill{font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-2);text-decoration:none;transition:.15s}
.pill:hover{color:var(--ink);background:var(--surface)}
.pill: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;margin:0;line-height:1.5}
.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}

/* La leyenda flota sobre el mapa. Con el encuadre holgado de antes nunca
   llegaba a tocarlo; ahora que el mapa se ajusta a lo que se enseña, una
   provincia alargada le pasa por debajo. Un fondo del color del papel, con
   el borde difuminado, la deja legible sin dibujar una caja encima. */
.ramp{position:absolute;right:16px;bottom:18px;width:184px;z-index:2;
  background:var(--surface);border-radius:12px;padding:10px 12px;
  box-shadow:0 0 0 10px var(--surface),0 0 18px 10px var(--surface)}
.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}

.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}
.masdos{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.mas:hover{text-decoration:underline}
.rk .nom a{color:inherit;text-decoration:none}
.rk tr:hover .nom a{color:var(--blue)}
/* El primer tabulador de la página lleva al contenido y se salta la barra:
   son ocho enlaces antes de llegar a lo que se ha venido a leer. */
.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--surface);
  color:var(--ink);font-size:14px;font-weight:700;padding:11px 16px;border-radius:0 0 10px 0;
  box-shadow:var(--sombra);text-decoration:none}
.saltar:focus{left:0}
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}
footer p{margin:0 0 6px}
footer a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--blue);border-color:var(--blue)}

@media (max-width:1040px){ .mapwrap{grid-template-columns:1fr} }
@media (max-width:820px){
  /* En el móvil la leyenda baja debajo del mapa y no pisa nada: sin halo. */
  .ramp{position:static;width:auto;margin:14px 8px 8px;padding:0;box-shadow:none;background:none}
  .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{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(258px,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}

/* La foto y la historia. Las fotos vienen de Wikimedia Commons y las
   licencias libres obligan a acreditar autor y licencia junto a la imagen,
   no en la letra pequeña del pie de página: por eso el crédito va debajo de
   cada foto y se lee, aunque sea pequeño. */
.historia{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:28px;align-items:center;margin-top:40px}
.historia.sinfoto{grid-template-columns:1fr;align-items:start}
.historia figure{margin:0}
.historia img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:14px;background:var(--surface-2);box-shadow:var(--sombra)}
.historia figcaption{font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:7px}
.historia figcaption a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.historia figcaption a:hover{color:var(--blue)}
.historia h2{font-size:18px;margin:0 0 8px}
.historia p{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0 0 12px;max-width:62ch}
.historia .mas{font-size:14px;font-weight:650;color:var(--blue);text-decoration:none}
.historia .mas:hover{text-decoration:underline}
.historia .credito{font-size:11.5px;color:var(--muted);margin:0}
@media (max-width:760px){ .historia{grid-template-columns:1fr;gap:16px;margin-top:32px} }

/* ── La página de cifras ────────────────────────────────────────────────────
   Todo se cuenta con la misma pieza: una barra horizontal con su etiqueta a
   la izquierda y su número a la derecha. Se eligió horizontal y no vertical
   porque los nombres de los embalses son largos y en vertical no caben sin
   girarlos, y un rótulo girado no se lee. */
.facts.ancha{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.panel{background:var(--surface);border-radius:14px;padding:15px 14px 13px;
  box-shadow:var(--sombra)}
.panel h3{font-size:14px;font-weight:750;letter-spacing:-.01em;margin:0 0 11px}
.doscol{display:grid;gap:18px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}

p.sub{font-size:13.5px;color:var(--muted);line-height:1.55;max-width:76ch;margin:-4px 0 16px}
.nota{font-size:12.5px;color:var(--muted);line-height:1.6;max-width:78ch;margin:12px 0 0}
.nota a{color:var(--ink-2)}
.panel .nota{margin-top:11px;border-top:1px solid var(--line-2);padding-top:10px}

.barras{list-style:none;margin:0;padding:0}
.barras li>a,.barras li>.fila{display:grid;align-items:center;gap:11px;
  grid-template-columns:minmax(0,1fr) 84px 64px;padding:6px 8px;border-radius:9px;
  text-decoration:none;color:inherit}
.barras.num li>a,.barras.num li>.fila{grid-template-columns:18px minmax(0,1fr) 84px 64px}
/* Cuando el número lleva unidad —«1.705 hm³»— necesita más sitio o parte en dos. */
.barras.larga li>a,.barras.larga li>.fila{grid-template-columns:minmax(0,1fr) 84px 92px}
.barras.larga.num li>a,.barras.larga.num li>.fila{
  grid-template-columns:18px minmax(0,1fr) 84px 92px}
/* A todo lo ancho —fuera de un panel— la barra se queda con el sitio sobrante
   en vez de dejar un hueco en medio de la fila. */
.barras.abierta li>a,.barras.abierta li>.fila{
  grid-template-columns:200px minmax(0,1fr) 92px}
.barras.abierta.num li>a,.barras.abierta.num li>.fila{
  grid-template-columns:18px 200px minmax(0,1fr) 92px}

.barras li>a:hover,.panel .barras li>a:hover{background:var(--surface-2)}
.barras li>a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.barras .pos{font-size:11px;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:right}
.barras .e{font-size:13.5px;font-weight:650;line-height:1.25;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barras .e small{display:block;font-size:11px;font-weight:500;color:var(--muted);
  margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.barras .b{height:7px;border-radius:999px;background:var(--line-2);position:relative;
  overflow:hidden}
.barras .b i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--ring)}
.barras .v{text-align:right;font-size:14px;font-weight:750;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* En el móvil la barra se queda en un testigo estrecho: primero el nombre y
   la cifra, que es lo que se lee; la barra sólo ordena de un vistazo. */
@media (max-width:620px){
  .barras li>a,.barras li>.fila,
  .barras.larga li>a,.barras.larga li>.fila,
  .barras.abierta li>a,.barras.abierta li>.fila{
    grid-template-columns:minmax(0,1fr) 40px 74px;gap:8px}
  .barras.num li>a,.barras.num li>.fila,
  .barras.larga.num li>a,.barras.larga.num li>.fila,
  .barras.abierta.num li>a,.barras.abierta.num li>.fila{
    grid-template-columns:16px minmax(0,1fr) 40px 74px;gap:8px}
  .barras .v{font-size:13px}
  .panel{padding:14px 11px 12px}
}

/* El gráfico de la década. Mismas tintas que el de cada ficha: azul lo de
   ahora, naranja lo normal, y la banda es todo lo que ha llegado a pasar. */
.grafo{background:var(--surface);border-radius:14px;padding:14px 12px 8px;
  box-shadow:var(--sombra)}
.decada{display:block;width:100%;height:auto}
.decada .reja line{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke}
.decada .eje text{fill:var(--muted);font-size:11px;font-weight:600;
  font-variant-numeric:tabular-nums}
.decada .banda{fill:var(--orange);fill-opacity:.11;stroke:none}
.decada .media{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:5 4;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.decada .ahora{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.decada .punta{fill:var(--blue);stroke:var(--surface);stroke-width:2;
  vector-effect:non-scaling-stroke}
.decada .marca{fill:var(--ink);font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums}
/* Sobre fondo oscuro el naranja se empasta enseguida: al 18% la banda deja
   de leerse como un rango y parece un bloque marrón. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .decada .banda{fill-opacity:.12} }
:root[data-theme="dark"] .decada .banda{fill-opacity:.12}
/* El SVG escala con el ancho, así que en el móvil la letra hay que subirla
   en unidades del propio dibujo para que salga del mismo tamaño en pantalla. */
@media (max-width:620px){
  .decada .eje text{font-size:19px}
  .decada .marca{font-size:24px}
  .decada .impar{display:none}
  .grafo{padding:10px 6px 4px}
}

/* 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}

/* ── El mapa de la página de una cuenca, una provincia o una comunidad ──────
   Un punto por embalse: el radio es la capacidad y el color, el nivel. Es la
   misma rampa del mapa de la portada, así que quien venga de allí no tiene
   que volver a aprenderla. */
.conmapa{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:30px;align-items:center;margin-top:34px}
.conmapa h2{font-size:18px;margin:0 0 8px}
.conmapa p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 16px;max-width:46ch}
@media (max-width:820px){ .conmapa{grid-template-columns:1fr;gap:18px} }

 /* La tierra se pinta del color del papel sobre un fondo un punto más
    apagado: así se lee como un mapa —tierra y no tierra— y no como una
    mancha del mismo color que la tarjeta. */
.mapaz{background:var(--surface-2);border-radius:14px;padding:12px;box-shadow:var(--sombra)}
.mapaz svg{display:block;width:100%;height:auto}
.mapaz .silueta{fill:var(--surface);stroke:var(--line);stroke-width:1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mapaz .lunares circle{stroke:var(--surface);stroke-width:1.1;
  vector-effect:non-scaling-stroke;transition:stroke-width .12s}
.mapaz .lunares a:hover circle{stroke:var(--ink);stroke-width:2}
.mapaz .lunares a:focus-visible circle{stroke:var(--blue);stroke-width:2.4;outline:none}
/* Una provincia sola no necesita medio folio: se queda en su sitio, y la
   columna se estrecha con ella para que no quede un hueco al lado. */
.conmapa.chica{grid-template-columns:380px minmax(0,1fr)}
@media (max-width:820px){ .conmapa.chica{grid-template-columns:1fr} }

.mapaleg .t{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.mapaleg .tira{display:flex;height:11px;border-radius:999px;overflow:hidden;max-width:230px}
.mapaleg .tira i{flex:1}
.mapaleg .sc{display:flex;justify-content:space-between;max-width:230px;margin-top:5px;
  font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.mapaleg .sc b{font-weight:600}
.mapaleg .nota{display:block;font-size:11.5px;color:var(--muted);margin-top:9px;max-width:34ch}

/* Texto corrido de las páginas explicativas. */
p.cuerpo,ul.cuerpo{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:68ch;
  margin:0 0 14px}
p.cuerpo b,ul.cuerpo b{color:var(--ink);font-weight:700}
ul.lista-plana{padding-left:0;list-style:none}
ul.lista-plana li{position:relative;padding-left:18px;margin-bottom:11px}
ul.lista-plana li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--line);}
footer p{margin:0 0 6px;max-width:92ch}
footer a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--blue);border-color:var(--blue)}

/* El cromo de cada tarjeta: la foto del embalse, o un cuadro de su color
   cuando no la hay. Mide 52 px y se sirve a 160 para que no se vea borroso
   en una pantalla de las buenas. */
.tarj{gap:10px;padding:9px 11px}
.tarj .cromo{flex:none;width:46px;height:46px;border-radius:8px;display:block;
  object-fit:cover;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ring)}
.tarj .n{flex:1 1 auto;min-width:0}
/* Con cromo delante, el nombre tiene menos sitio: se deja en dos líneas y lo
   que sobre se corta, que es mejor que una tarjeta el doble de alta que sus
   vecinas. El nombre entero sigue estando en el title de la página que abre. */
.tarj .n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.tarj .n small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tarj .nivel{width:26px}

/* La lista de descargas. */
.descargas{list-style:none;margin:0;padding:0}
.descargas li{padding:14px 0;border-bottom:1px solid var(--line)}
.descargas li:first-child{border-top:1px solid var(--line)}
.descargas a{font-size:16px;font-weight:650;color:var(--blue);text-decoration:none}
.descargas a:hover{text-decoration:underline}
.descargas .peso{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted);
  background:var(--surface);border-radius:5px;padding:2px 7px;margin-left:9px;
  vertical-align:1px;white-space:nowrap}
.descargas p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:5px 0 0;max-width:70ch}
.cita{font-size:14px;line-height:1.6;color:var(--ink-2);background:var(--surface);
  border-left:3px solid var(--line);border-radius:0 10px 10px 0;padding:13px 16px;
  margin:0 0 14px;max-width:68ch}

/* «Lo más lleno (o lo más vacío) en diez años para esta semana». Es un dato
   duro, no un adorno: se compara el nivel de hoy con el máximo y el mínimo
   que ha marcado ese mismo embalse en esa misma semana del año en los diez
   anteriores, y la ventana no incluye el año en curso. */
.hito{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.01em;
  padding:4px 10px;border-radius:999px;margin:0 0 14px 10px;vertical-align:2px}
.hito.alto{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.hito.bajo{background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit)}
@media (max-width:560px){ .hito{margin-left:0;display:block;width:max-content;max-width:100%} }

/* El índice de ríos. Un río es una línea, no una tarjeta: lo único que hay
   que decir de él es cuántos embalses tiene y cómo están. */
.rejrios{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  margin:18px 0 6px}
.rejrios .rio{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);text-decoration:none;color:inherit}
.rejrios .rio:hover{border-color:var(--blue)}
.rejrios .rio b{font-size:15px;font-weight:650}
.rejrios .rio span{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* Lo que ha subido y lo que ha bajado esta semana. Verde y rojo no: los
   mismos dos colores que usa el mapa para decir si algo está por encima o
   por debajo de lo suyo, que ya están aprendidos. */
.rejrios .rio .sube{color:var(--good);font-weight:650}
.rejrios .rio .baja{color:var(--crit);font-weight:650}