/*
 * Mapas de Embalses — Sistema de diseño premium v2 (FASE 8)
 * Dirección de arte: agua, territorio, confianza, tecnología, transparencia.
 */
:root {
    --color-navy-950: #06233f;
    --color-navy-900: #0a3156;
    --color-blue-700: #1267a8;
    --color-blue-600: #116aa0;
    --color-cyan-500: #0f7a99;
    --color-cyan-400: #39b0c4;
    --color-aqua-100: #dff6f8;
    --color-sky-100: #eaf5fb;
    --color-surface: #ffffff;
    --color-background: #f4f8fb;
    --color-text: #112035;
    --color-muted: #607189;
    --color-border: #d9e4ec;
    --color-success: #0b7a4b;
    --color-warning: #9b6d00;
    --color-danger: #b0413b;
    --color-neutral: #5f6d80;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-full: 9999px;
    --shadow-sm: 0 4px 14px rgba(15,45,72,0.07);
    --shadow-md: 0 14px 36px rgba(15,45,72,0.11);
    --shadow-lg: 0 28px 70px rgba(15,45,72,0.16);
    --container-width: 1400px;
    --font-sans: Inter, Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--color-background); color: var(--color-text); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-blue-700); text-decoration: none; transition: color .15s; }
a:hover { color: var(--color-navy-900); }
::selection { background: var(--color-cyan-400); color: var(--color-navy-950); }

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link { position: fixed; top: -100%; left: 1rem; z-index: 1000; background: var(--color-navy-900); color: #fff; padding: .5rem 1rem; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600; }
.skip-link:focus { top: .5rem; }

/* ============================================================
   HEADER — sticky premium
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-border); height: 64px; display: flex; align-items: center; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; }
.brand { display: flex; align-items: center; gap: .625rem; font-size: 1.0625rem; font-weight: 700; color: var(--color-navy-900); text-decoration: none; letter-spacing: -.01em; }
.brand-logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--color-navy-900), var(--color-cyan-500)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; font-weight: 900; position: relative; overflow: hidden; }
.brand-logo::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(0deg, rgba(57,191,212,.6), transparent); border-radius: 0 0 10px 10px; }

.main-nav { display: flex; align-items: center; gap: .25rem; }
.main-nav a { padding: .5rem .875rem; border-radius: var(--radius-sm); color: var(--color-muted); font-size: .875rem; font-weight: 500; transition: all .15s; }
.main-nav a:hover, .main-nav a.active { background: var(--color-sky-100); color: var(--color-navy-900); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 44px; height: 44px; border-radius: var(--radius-sm); align-items: center; justify-content: center; color: var(--color-text); }
.nav-toggle:hover { background: var(--color-sky-100); }
.nav-toggle-icon { width: 20px; height: 2px; background: currentColor; position: relative; transition: .2s; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ''; position: absolute; width: 20px; height: 2px; background: currentColor; left: 0; transition: .2s; }
.nav-toggle-icon::before { top: -6px; } .nav-toggle-icon::after { top: 6px; }

.mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: var(--color-surface); z-index: 99; padding: .75rem 1rem 1.5rem; overflow-y: auto; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: .5rem .75rem; border-radius: var(--radius-sm); color: var(--color-text); font-size: .95rem; font-weight: 500; border-bottom: 1px solid var(--color-border); }
.mobile-menu a:hover { background: var(--color-sky-100); }
.mobile-menu-cta { display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; border-bottom: none; font-weight: 700; }
.mobile-menu-close { display: block; margin-bottom: .5rem; text-align: right; }
.mobile-menu-close button { background: none; border: none; font-size: 1.25rem; cursor: pointer; padding: .5rem; color: var(--color-muted); }
.mobile-menu-search { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--color-border); }
.mobile-menu-search input { width: 100%; padding: .55rem .75rem; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; }
.mobile-menu-search .btn { width: 100%; }

/* ============================================================
   SEARCH — en header
   ============================================================ */
.search-mini { display: flex; align-items: center; background: var(--color-background); border-radius: var(--radius-full); padding: .25rem .25rem .25rem 1rem; border: 1px solid var(--color-border); transition: all .2s; width: 240px; position: relative; }
.search-mini form { display: contents; }
.search-mini:focus-within { width: 330px; border-color: var(--color-cyan-500); box-shadow: 0 0 0 3px rgba(24,168,199,.15); z-index: 110; }
.search-mini input { border: none; background: transparent; outline: none; font-size: .85rem; font-family: inherit; color: var(--color-text); width: 100%; }
.search-mini button { background: var(--color-navy-900); color: #fff; border: none; border-radius: var(--radius-full); padding: .375rem .875rem; font-size: .8rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; min-height: 44px; }
.search-mini button:hover { background: var(--color-blue-700); }

/* ============================================================
   HEADER SEARCH — autocompletado desplegable (P0-1)
   ============================================================ */
.header-search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(15,23,42,.16);
    overflow: hidden;
    text-align: left;
    min-width: 260px;
}
.mobile-menu-search {
    position: relative;
}
.mobile-menu-search .header-search-suggest {
    top: calc(100% + 4px);
    right: 0;
    left: 0;
}
.header-search-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: .55rem .9rem;
    font-family: inherit;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.header-search-item:last-child { border-bottom: none; }
.header-search-item:hover,
.header-search-item.active { background: var(--color-sky-100); }
.header-search-item-name { font-size: .9rem; font-weight: 600; }
.header-search-item-sub { font-size: .75rem; color: var(--color-muted); }
.header-search-suggest-empty { padding: .7rem .9rem; font-size: .85rem; color: var(--color-muted); }

/* ============================================================
   CONTAINER + SECTION
   ============================================================ */
.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 3rem 0; }
.section-header { margin-bottom: 2rem; }
.section-title { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .375rem; }
.section-subtitle { font-size: 1.0625rem; color: var(--color-muted); max-width: 620px; }
.section-alt { background: var(--color-surface); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; font-family: inherit; border: none; cursor: pointer; transition: all .15s; text-decoration: none; line-height: 1.5; min-height: 44px; }
.btn-primary { background: var(--color-navy-900); color: #fff; }
.btn-primary:hover { background: var(--color-blue-700); color: #fff; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-background); border-color: var(--color-blue-700); }
.btn-accent { background: linear-gradient(135deg, var(--color-cyan-500), var(--color-blue-600)); color: #fff; box-shadow: var(--shadow-sm); }
.btn-accent:hover { filter: brightness(1.1); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-lg { padding: .75rem 1.75rem; font-size: 1rem; border-radius: var(--radius-md); }
.btn-sm { padding: .375rem .875rem; font-size: .8rem; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-full); }

/* ============================================================
   BADGES
   ============================================================ */
.badge { display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em; border-radius: var(--radius-full); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.badge-ok{background:#e6f7ee;color:var(--color-success)}.badge-warn{background:#fff7e0;color:var(--color-warning)}
.badge-err{background:#fdecea;color:var(--color-danger)}.badge-info{background:var(--color-sky-100);color:var(--color-blue-700)}
.badge-official{background:var(--color-navy-900);color:#fff;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;padding:.2em .75em}

/* ============================================================
   HERO — la pieza visual principal
   ============================================================ */
.hero { position: relative; overflow: hidden; background: linear-gradient(170deg, #e8f2f9 0%, #ddf2f5 40%, var(--color-background) 100%); padding: 2.75rem 0 2.25rem; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(57,191,212,.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(10,49,86,.04) 0%, transparent 50%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 2rem; align-items: center; position: relative; z-index: 1; }
.hero-main { display: flex; flex-direction: column; gap: 1rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hero-date { font-size: .8rem; color: var(--color-muted); font-weight: 500; }
.hero-title { font-size: 1.125rem; font-weight: 600; color: var(--color-muted); margin: 0; letter-spacing: .01em; }
.hero-pct { font-size: clamp(4.5rem, 8vw, 6.5rem); font-weight: 900; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; margin: -.25rem 0; }
.hero-pct-unit { font-size: 1.75rem; font-weight: 700; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 400px; }
.hero-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); font-weight: 600; margin-bottom: .125rem; }
.hero-stat-value { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-stat-value.up { color: var(--color-success); } .hero-stat-value.down { color: var(--color-danger); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* --- Cuencas destacadas (V3.6) --- */
.basin-highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.basin-card-v4 { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: .85rem .95rem; display: flex; flex-direction: column; gap: .4rem; transition: border-color .15s, box-shadow .15s; }
.basin-card-v4:hover { border-color: var(--color-cyan-500); box-shadow: var(--shadow-md); }
.basin-card-head { display: flex; flex-direction: column; gap: .15rem; }
.basin-card-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.basin-card-name { font-size: 1rem; font-weight: 700; margin: 0; }
.basin-card-name a { color: inherit; text-decoration: none; }
.basin-card-name a:hover { color: var(--color-cyan-500); text-decoration: underline; }
.basin-card-pct { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.basin-card-pct-unit { font-size: 1rem; font-weight: 700; }
.basin-card-volume { font-size: .82rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.basin-card-volume-sep { margin: 0 .15rem; opacity: .5; }
.basin-card-catalog { font-size: .72rem; color: var(--color-muted); }
.basin-card-change { display: flex; align-items: baseline; gap: .4rem .65rem; flex-wrap: wrap; font-size: .8rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .5rem .65rem; }
.basin-card-delta { font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; }
.basin-card-delta.up { color: var(--color-success); }
.basin-card-delta.down { color: var(--color-danger); }
.basin-card-change-label { color: var(--color-muted); font-size: .72rem; }
.basin-card-nochange { color: var(--color-muted); font-style: italic; }
.basin-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.basin-card-count { font-size: .72rem; color: var(--color-muted); white-space: nowrap; }
.basin-card-spark svg { display: block; width: 100%; height: auto; max-width: 150px; }
.basin-card-link { font-size: .8rem; font-weight: 700; color: var(--color-navy-900); text-decoration: none; align-self: flex-start; }
.basin-card-link:hover { text-decoration: underline; }
.basin-card-link:focus-visible { outline: 3px solid rgba(24,168,199,.2); border-radius: var(--radius-sm); }

/* --- Jerarquía del hero (V3.3) --- */
.hero-pct-state { font-size: .9rem; color: var(--color-muted); margin: .25rem 0 0; }
.hero-compare { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.hero-compare-item { display: flex; flex-direction: column; }
.hero-compare-value { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hero-compare-value.up { color: var(--color-success); }
.hero-compare-value.down { color: var(--color-danger); }
.hero-compare-value.na { color: var(--color-muted); font-size: 1.05rem; font-weight: 600; }
.hero-compare-label { font-size: .8rem; color: var(--color-muted); }
.hero-volume { display: flex; flex-direction: column; }
.hero-volume-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-volume-label { font-size: .8rem; color: var(--color-muted); }
.hero-coverage { font-size: .8rem; color: var(--color-muted); margin: 0; }

.hero-chart-card { background: var(--color-surface); border-radius: var(--radius-xl); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
.hero-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; gap: .5rem; }
.hero-chart-title { font-size: .9rem; font-weight: 700; }
.hero-chart-canvas { position: relative; height: 300px; }
.hero-chart-canvas .hero-chart-holder { height: 100%; }
.hero-chart-current { display: inline-flex; align-items: baseline; gap: .4rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: .3rem .8rem; }
.hero-chart-current-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--color-muted); }
.hero-chart-current-value { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }

.hero-watermark { position: absolute; right: -60px; top: -40px; width: 500px; height: 500px; opacity: .03; pointer-events: none; }
.hero-watermark svg { width: 100%; height: 100%; }

/* ============================================================
   MAPA EXPLORADOR
   ============================================================ */
.map-explorer { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--color-border); display: flex; min-height: 520px; }
.map-explorer-sidebar { width: 320px; padding: 1.25rem; border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; flex-shrink: 0; }
.map-explorer-sidebar h3 { font-size: .95rem; font-weight: 700; }
.map-explorer-sidebar input, .map-explorer-sidebar select { width: 100%; padding: .6rem .75rem; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: .875rem; font-family: inherit; background: var(--color-background); }
.map-explorer-sidebar input:focus, .map-explorer-sidebar select:focus { outline: 3px solid rgba(24,168,199,.2); border-color: var(--color-cyan-500); }
.map-legend { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .75rem; }
.map-legend-item { display: flex; align-items: center; gap: .3em; }
.map-legend-dot { width: 10px; height: 10px; border-radius: 99px; }
.map-explorer-view { flex: 1; min-height: 520px; background: #eaf0f6; position: relative; }
.map-explorer-view .leaflet-container { background: #e3eaf2; }
.map-explorer-view #mapa-nacional-container { position: absolute; inset: 0; }
.map-selected-card { position: absolute; left: 1rem; bottom: 1rem; z-index: 800; width: min(280px, calc(100% - 2rem)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: .7rem .85rem; display: flex; flex-direction: column; gap: .15rem; }
.map-selected-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.map-selected-card-name { font-weight: 700; font-size: .95rem; }
.map-selected-card-close { background: none; border: none; cursor: pointer; color: var(--color-muted); font-size: 1.2rem; line-height: 1; padding: .2rem; min-width: 30px; min-height: 44px; }
.map-selected-card-close:hover { color: var(--color-danger); }
.map-selected-card-pct { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.map-selected-card-sub { font-size: .78rem; color: var(--color-muted); }
.map-selected-card-link { font-size: .8rem; font-weight: 700; color: var(--color-navy-900); align-self: flex-start; }
.map-selected-card-link:hover { text-decoration: underline; }

.map-toolbar { position: absolute; top: .75rem; right: .75rem; z-index: 10; display: flex; flex-direction: column; gap: .375rem; }
.map-toolbar button { width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--color-text); }
.map-toolbar button:hover { background: var(--color-sky-100); }
.map-coverage-note { font-size: .8rem; color: var(--color-muted); text-align: center; margin-top: .75rem; }

/* --- Mapa explorador (V3.5) --- */
.map-explorer-view { min-width: 0; }
.leaflet-control-zoom { border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 1.15rem; }
.leaflet-control-zoom a:focus-visible { outline: 3px solid var(--color-cyan-500); outline-offset: -2px; }
.map-filter-selects { display: flex; flex-direction: column; gap: .5rem; }
.map-filter-levels { border: 0; padding: 0; margin: .25rem 0 0; }
.map-level-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.map-level-chip { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: .78rem; font-weight: 600; cursor: pointer; min-height: 32px; line-height: 1.2; transition: border-color .15s, background .15s, color .15s; user-select: none; }
.map-level-chip input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.map-level-chip:focus-within { box-shadow: 0 0 0 3px rgba(24,168,199,.25); }
.map-level-chip:hover { border-color: var(--color-cyan-500); }
.map-level-chip.chip-active { background: var(--color-navy-900); border-color: var(--color-navy-900); color: #fff; }
.map-level-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.chip-active .map-level-chip-dot { box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
.map-explorer-count { font-size: .875rem; font-weight: 700; color: var(--color-text); margin: 0; }
.map-filters-panel { display: flex; flex-direction: column; gap: .75rem; }
.map-results-panel { border-top: 1px solid var(--color-border); padding-top: .9rem; margin-top: .1rem; display: flex; flex-direction: column; gap: .5rem; }
.map-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.map-explorer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; overflow: auto; max-height: 400px; }
.map-item { border-radius: var(--radius-md); }
.map-item.selected { outline: 2px solid var(--color-cyan-500); background: var(--color-sky-100); }
.map-item-btn { width: 100%; text-align: left; background: none; border: 0; padding: .7rem .8rem; min-height: 44px; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: .15rem; }
.map-item-btn:hover, .map-item-btn:focus-visible { background: var(--color-surface); box-shadow: 0 0 0 2px var(--color-cyan-500); }
.map-item-name { font-weight: 600; }
.map-item-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.map-item-sub { font-size: .75rem; color: var(--color-muted); }
.map-more .btn { width: 100%; }
.map-popup-name { font-weight: 700; font-size: .9rem; }
.map-popup-pct { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.map-popup-meta { font-size: .75rem; color: var(--color-muted); }
.map-popup-link { display: inline-block; margin-top: .5rem; }
.map-explorer-status { font-size: .875rem; color: var(--color-muted); padding: .5rem 1rem; }
.map-noscript { display: block; width: 100%; }
.map-noscript-inner { padding: 2rem; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); text-align: center; color: var(--color-muted); }
.map-noscript-inner a { color: var(--color-navy-900); font-weight: 600; text-decoration: underline; }
.embalse-marcador:focus { outline: 2px solid var(--color-cyan-500); }

/* ============================================================
   BARRAS DE PROGRESO (agua)
   ============================================================ */
.water-bar { height: 8px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; }
.water-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width .6s ease; }

/* ============================================================
   CUENCAS — editorial
   ============================================================ */
.basin-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; }
.basin-highlight-card { background: var(--color-surface); border-radius: var(--radius-xl); padding: 1.25rem 1.5rem; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--color-text); transition: all .2s; display: flex; flex-direction: column; gap: .5rem; }
.basin-highlight-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-cyan-500); }
.basin-highlight-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); font-weight: 600; }
.basin-highlight-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.basin-highlight-pct { font-size: 2.25rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.basin-highlight-meta { font-size: .8rem; color: var(--color-muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.basin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.basin-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 1rem 1.25rem; border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); transition: all .2s; display: flex; flex-direction: column; gap: .375rem; }
.basin-card:hover { border-color: var(--color-cyan-500); box-shadow: var(--shadow-sm); }
.basin-card-name { font-weight: 700; font-size: .95rem; }
.basin-card-pct { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.basin-card-meta { font-size: .78rem; color: var(--color-muted); }

/* ============================================================
   RANKINGS — con pestañas
   ============================================================ */
.rankings-panel { background: var(--color-surface); border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); overflow: hidden; }
.rankings-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--color-border); background: var(--color-background); }
.rankings-tab { padding: .75rem 1.25rem; border: none; background: none; font-size: .85rem; font-weight: 600; font-family: inherit; color: var(--color-muted); cursor: pointer; white-space: nowrap; transition: all .15s; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; }
.rankings-tab:hover { color: var(--color-text); }
.rankings-tab.active { color: var(--color-navy-900); border-bottom-color: var(--color-navy-900); }
.rankings-content { display: none; padding: .5rem 0; }
.rankings-content.active { display: block; }
.rk-item { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.5rem; border-bottom: 1px solid var(--color-border); transition: background .15s; min-height: 52px; }
.rk-item:hover { background: var(--color-background); }
.rk-item:last-child { border-bottom: 0; }
.rk-pos { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; flex-shrink: 0; }
.rk-pos.gold { background: #fef3c7; color: #92400e; } .rk-pos.silver { background: #eef2f5; color: #475569; } .rk-pos.bronze { background: #fee2d4; color: #9a3412; }
.rk-info { flex: 1; min-width: 0; }
.rk-name { font-weight: 600; font-size: .9rem; } .rk-name a { color: var(--color-text); } .rk-name a:hover { color: var(--color-blue-700); }
.rk-sub { font-size: .78rem; color: var(--color-muted); }
.rk-val { font-weight: 800; font-size: 1.05rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-trend { font-size: .8rem; font-weight: 600; margin-left: .5rem; }
.rk-trend.up { color: var(--color-success); } .rk-trend.down { color: var(--color-danger); }
.rk-spark { flex-shrink: 0; }
.rk-spark svg { display: block; width: 96px; height: 30px; }
.rk-cur { flex-shrink: 0; display: flex; align-items: baseline; gap: .4rem; font-size: .8rem; min-width: 96px; justify-content: flex-end; }
.rk-var { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-var.muted { color: var(--color-muted); font-weight: 600; }
.rk-empty { padding: 1rem 1.5rem; color: var(--color-muted); margin: 0; }
.val-up { color: var(--color-success); } .val-down { color: var(--color-danger); }

/* ============================================================
   SECCIÓN EDITORIAL
   ============================================================ */
.editorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.editorial-text h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; }
.editorial-text p { font-size: 1.0625rem; color: var(--color-muted); line-height: 1.65; margin-bottom: .75rem; }
.editorial-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.25rem; border: 1px solid var(--color-border); }
.editorial-card dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); font-weight: 600; margin-bottom: .125rem; }
.editorial-card dd { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; }
.editorial-card dd:last-child { margin-bottom: 0; }
.editorial-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: .75rem 0; }

/* ============================================================
   METODOLOGÍA — iconos
   ============================================================ */
.method-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.method-card { background: var(--color-surface); border-radius: var(--radius-xl); padding: 1.5rem; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.method-card-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: .75rem; }
.method-card-icon.blue { background: var(--color-sky-100); color: var(--color-blue-700); }
.method-card-icon.cyan { background: var(--color-aqua-100); color: var(--color-cyan-500); }
.method-card-icon.green { background: #e6f7ee; color: var(--color-success); }
.method-card-icon.navy { background: #e8edf4; color: var(--color-navy-900); }
.method-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .375rem; }
.method-card p { font-size: .9rem; color: var(--color-muted); line-height: 1.55; }

/* ============================================================
   RESUMEN SEMANAL (V3.8)
   ============================================================ */
.ws-body { background: var(--color-surface); border-radius: var(--radius-xl); padding: 1.5rem; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: start; }
.ws-text { display: flex; flex-direction: column; gap: .6rem; }
.ws-titular { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 0; color: var(--color-navy-900); }
.ws-paragraph { font-size: .95rem; color: var(--color-muted); line-height: 1.65; max-width: 46rem; }
.ws-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; margin-top: .25rem; }
.ws-highlights { list-style: none; display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 0; padding: 0; }
.ws-highlight-link { display: flex; flex-direction: column; gap: .15rem; background: var(--color-background); border-radius: var(--radius-md); padding: .875rem 1rem; text-decoration: none; color: inherit; border: 1px solid var(--color-border); transition: border-color .15s ease, background .15s ease; }
.ws-highlight-link:hover { border-color: var(--color-cyan-500); background: var(--color-aqua-100); }
.ws-highlight-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); font-weight: 600; }
.ws-highlight-val { font-size: 1.15rem; font-weight: 700; color: var(--color-navy-900); }
.ws-highlight-sub { font-size: .85rem; color: var(--color-muted); }
.ws-cta { margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-navy-950); color: rgba(255,255,255,.65); padding: 3rem 0 2rem; font-size: .875rem; line-height: 1.65; }
.site-footer .container { max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr 1fr; }
.site-footer h3 { color: #fff; font-size: .85rem; font-weight: 700; margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.site-footer a { color: rgba(255,255,255,.5); } .site-footer a:hover { color: rgba(255,255,255,.9); }
.site-footer p { margin-bottom: .25rem; }
.site-footer-brand { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.site-footer-bottom { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; }

/* ============================================================
   SKELETON
   ============================================================ */
.skeleton { background: linear-gradient(90deg, var(--color-border) 25%, var(--color-background) 50%, var(--color-border) 75%); background-size: 200% 100%; animation: skel 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes skel { 0%{background-position:200% 0}100%{background-position:-200% 0} }
.skel-text { height: 1em; margin-bottom: .5em; } .skel-title { height: 1.5em; width: 60%; }
.skel-block { height: 240px; }

/* Screen-reader only (V3.4): visible para AT, oculto en pantalla. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; } .text-muted { color: var(--color-muted); }
.muted { color: var(--color-muted); }
.text-sm { font-size: .85rem; } .font-bold { font-weight: 700; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.gap-1 { gap: 1rem; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms!important; transition-duration: .01ms!important; }
    html { scroll-behavior: auto; }
}
:focus-visible { outline: 3px solid var(--color-cyan-500); outline-offset: 2px; border-radius: var(--radius-sm); }
[hidden] { display: none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
    .main-nav { display: none; } .nav-toggle { display: flex; }
    .search-mini { width: 180px; } .search-mini:focus-within { width: 230px; }
    .basin-highlight-grid { grid-template-columns: repeat(2, 1fr); }
    .basin-highlights { grid-template-columns: 1fr; }
    .map-explorer { flex-direction: column; min-height: 0; }
    .map-explorer-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); gap: .75rem; padding: .75rem 1rem; }
    .map-explorer-sidebar input, .map-explorer-sidebar select { width: 100%; }
    .map-explorer-list { max-height: 220px; }
    .map-explorer-view { min-height: 380px; }
    .editorial-grid { grid-template-columns: 1fr; }
    .site-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .ws-body { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 639px) {
    .container { padding: 0 1rem; } .section { padding: 2rem 0; }
    .section-title { font-size: 1.5rem; }
    .hero { padding: 2rem 0 1.5rem; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    /* % protagonista en móvil (V3.3): ~58–68px */
    .hero-pct { font-size: clamp(3.625rem, 15vw, 4.25rem); }
    .hero-pct-unit { font-size: 1.25rem; }
    .hero-compare-value { font-size: 1.3rem; }
    .hero-volume-value { font-size: 1.35rem; }
    .hero-chart-canvas { height: 260px; }
    .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .hero-actions .btn-accent { grid-column: 1 / -1; }
    .hero-actions .btn-lg { width: 100%; justify-content: center; min-height: 44px; padding: .6rem 1rem; font-size: .9rem; }
    .basin-highlight-grid { grid-template-columns: 1fr; }
    .map-explorer-view { min-height: 300px; }
    .basin-grid { grid-template-columns: 1fr 1fr; }
    .rankings-tab { font-size: .75rem; padding: .5rem .75rem; }
    .rk-item { padding: .6rem 1rem; gap: .5rem; flex-wrap: wrap; }
    .rk-spark { order: 2; flex-basis: 100%; }
    .rk-spark svg { width: 100%; height: 28px; max-width: 96px; }
    .site-footer .container { grid-template-columns: 1fr; }
    .editorial-highlights { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .search-mini { display: none; }
    .map-selected-card { left: .5rem; bottom: .5rem; width: auto; right: .5rem; }
    .rk-item { align-items: stretch; padding: .5rem .75rem; }
    .rk-pos { display: none; }
    .rk-info { flex-basis: 100%; }
    .rk-name { font-size: .95rem; }
    .rk-val { font-size: .9rem; white-space: normal; text-align: left; }
    .method-card { padding: 1.1rem; }
    .ws-body { padding: 1.1rem; }
    .site-header { height: 60px; }
    .mobile-menu { top: 60px; }
    .brand { gap: .375rem; font-size: .9375rem; }
    .brand-logo { width: 30px; height: 30px; }
}

/* ============================================================
   LEGACY — estilos de admin (inline en admin/layout)
   ============================================================ */

/* Leaflet markers */
.embalse-marcador { background: transparent !important; border: none !important; }
.embalse-marcador-dot { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.marcador-selected .embalse-marcador-dot { width: 24px; height: 24px; border-width: 3px; box-shadow: 0 0 0 3px var(--color-cyan-500), 0 2px 5px rgba(0,0,0,.35); }

/* ============================================================
   PÁGINAS INTERIORES — panel, fichas, listas (sistema premium)
   Aplica a cuenca/provincia/comunidad/rankings/embalse
   ============================================================ */

/* Breadcrumbs */
.breadcrumbs { font-size: .85rem; padding: .75rem 0; color: var(--color-muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.breadcrumbs li::after { content: '/'; margin-left: .5rem; color: var(--color-border); }
.breadcrumbs li:last-child::after { content: ''; }
.breadcrumbs a { color: var(--color-blue-700); }
.breadcrumbs a:hover { color: var(--color-navy-900); }

/* Ficha header */
.ficha-header { margin-bottom: 1.25rem; }
.ficha-header h1 { font-size: 1.875rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .375rem; }
.ficha-subtitulo { font-size: 1.0625rem; color: var(--color-muted); margin: 0 0 .5rem; }
.ficha-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .875rem; }

/* Panel base */
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-top: 1.25rem; box-shadow: var(--shadow-sm); }
.panel h2 { font-size: 1.125rem; font-weight: 700; margin-top: 0; margin-bottom: .75rem; }

/* KPI stats grid (interior) */
.grid-estadisticas { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 0; }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .75rem 1rem; box-shadow: var(--shadow-sm); }
.stat dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); font-weight: 600; margin-bottom: .2rem; }
.stat dd { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat-destacada { background: linear-gradient(135deg, var(--color-navy-900), var(--color-blue-700)); color: #fff; border-color: transparent; }
.stat-destacada dt { color: rgba(255,255,255,.75); }
.stat .pos { color: var(--color-success); } .stat .neg { color: var(--color-danger); }
.stat-destacada .pos, .stat-destacada .neg { color: #fff; }

/* Meta line */
.meta-line { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: 1rem; font-size: .875rem; color: var(--color-muted); }

/* Lista de embalses */
.lista-embalses { list-style: none; margin: 0; padding: 0; }
.embalse-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--color-border); }
.embalse-item:last-child { border-bottom: 0; }
.embalse-item h3 { margin: 0 0 .15rem; font-size: 1rem; font-weight: 700; }
.embalse-item h3 a { color: var(--color-text); }
.embalse-item h3 a:hover { color: var(--color-blue-700); }
.embalse-dato { text-align: right; white-space: nowrap; }
.embalse-dato strong { display: block; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Rankings (página completa) */
.grid-rankings { display: grid; gap: 1.25rem; }
.ranking { min-width: 0; }
.ranking h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--color-navy-900); }
.ranking ol { margin: 0; padding: 0; list-style: none; counter-reset: rk; }
.ranking ol li { display: grid; grid-template-columns: 1.75rem 1fr auto; grid-template-areas: "num nom val" "num cue cue"; column-gap: .5rem; padding: .45rem 0; border-bottom: 1px dashed var(--color-border); align-items: baseline; }
.ranking ol li::before { counter-increment: rk; content: counter(rk); grid-area: num; font-weight: 800; color: var(--color-blue-700); font-variant-numeric: tabular-nums; }
.ranking-nombre { grid-area: nom; font-weight: 600; }
.ranking-nombre a { color: var(--color-text); }
.ranking-nombre a:hover { color: var(--color-blue-700); }
.ranking-valor { grid-area: val; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ranking-cuenca { grid-area: cue; font-size: .8rem; }

/* Lista de cuencas con barras */
.lista-cuencas { list-style: none; margin: 0; padding: 0; }
.cuenca { padding: .75rem 0; border-bottom: 1px solid var(--color-border); }
.cuenca:last-child { border-bottom: 0; }
.cuenca-cabecera { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.cuenca-nombre { font-weight: 600; }
.cuenca-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.barra { background: var(--color-border); border-radius: var(--radius-full); height: .625rem; margin: .35rem 0; overflow: hidden; }
.barra-relleno { display: block; height: 100%; background: linear-gradient(90deg, var(--color-cyan-500), var(--color-blue-700)); border-radius: var(--radius-full); }

/* Periodo selector (gráficas) */
.periodo-selector { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.btn-periodo { padding: .4rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); font-size: .8rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s; min-height: 44px; }
.btn-periodo:hover { border-color: var(--color-cyan-500); color: var(--color-text); }
.btn-periodo.active { background: var(--color-navy-900); color: #fff; border-color: var(--color-navy-900); }

/* Gráfica */
.grafica-contenedor { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .5rem; position: relative; }
.grafica-contenedor .skel-block { height: 300px; }
.grafica-holder { height: 300px; position: relative; }
.grafica-holder canvas { display: block; }

/* Tabla accesible de la gráfica */
.grafica-detalles { margin-top: .75rem; }
.grafica-detalles summary { cursor: pointer; font-size: .82rem; color: var(--color-blue-700); font-weight: 600; padding: .25rem 0; }
.grafica-detalles summary:hover { color: var(--color-navy-900); }
.grafica-tabla-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-top: .5rem; }
.grafica-tabla { width: 100%; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
.grafica-tabla thead th { position: sticky; top: 0; background: var(--color-navy-900); color: #fff; text-align: left; padding: .4rem .6rem; font-weight: 600; }
.grafica-tabla tbody th, .grafica-tabla tbody td { padding: .35rem .6rem; border-top: 1px solid var(--color-border); text-align: right; }
.grafica-tabla tbody th { text-align: left; color: var(--color-muted); font-weight: 600; }
.grafica-tabla tbody tr:nth-child(even) td, .grafica-tabla tbody tr:nth-child(even) th { background: var(--color-background); }

/* Mapa */
.mapa-contenedor { width: 100%; height: 420px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: #e3eaf2; overflow: hidden; }
.mapa-contenedor.leaflet-container { background: #e3eaf2; }

/* Ficha embalse: grids */
.ficha-grid { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
.ficha-dl dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); font-weight: 600; margin-top: .5rem; }
.ficha-dl dd { margin: 0 0 .2rem; }
.ficha-comparacion .pos { color: var(--color-success); font-weight: 700; }
.ficha-comparacion .neg { color: var(--color-danger); font-weight: 700; }
.ficha-seccion { margin-top: 1.5rem; }
.ficha-seccion h2 { font-size: 1.125rem; font-weight: 700; margin-top: 0; }

/* ============================================================
   FICHA EMBALSE PREMIUM (FASE 9, I9.1c) — hero + comparativa
   ============================================================ */
.ficha-embalse { padding: .5rem 0 2.5rem; }

.ficha-hero { margin-bottom: 1.5rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.ficha-hero-kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--color-cyan-500); margin: 0 0 .25rem; }
.ficha-hero-title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .5rem; color: var(--color-navy-950); }
.ficha-hero-sub { font-size: 1rem; color: var(--color-muted); margin: 0 0 1.25rem; }

.ficha-hero-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: stretch; }
.ficha-hero-bignum { display: flex; flex-direction: column; gap: .15rem; justify-content: center; }
.ficha-hero-pct { font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 900; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; margin: -.25rem 0 0; }
.ficha-hero-pct-unit { font-size: 1.75rem; font-weight: 700; }
.ficha-hero-state { font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0; }
.ficha-hero-volume { display: flex; flex-direction: column; margin-top: .35rem; }
.ficha-hero-volume-value { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha-hero-volume-label { font-size: .8rem; color: var(--color-muted); }
.ficha-hero-weekly { display: flex; flex-direction: column; margin-top: .5rem; line-height: 1.4; }
.ficha-hero-weekly-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha-hero-weekly-value.up { color: var(--color-success); }
.ficha-hero-weekly-value.down { color: var(--color-danger); }
.ficha-hero-weekly-label { font-size: .75rem; color: var(--color-muted); }
.ficha-hero-weekly .na, .ficha-comparativa .na { color: var(--color-muted); font-style: italic; font-weight: 600; }
.ficha-hero-source { font-size: .78rem; color: var(--color-muted); margin-top: auto; padding-top: .75rem; }

.ficha-comparativa { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; }
.ficha-comparativa-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--color-muted); margin: 0 0 .75rem; }
.ficha-comparativa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ficha-comparativa-item { display: flex; flex-direction: column; gap: .05rem; padding-bottom: .6rem; border-bottom: 1px solid var(--color-border); }
.ficha-comparativa-item:last-of-type { padding-bottom: 0; border-bottom: 0; }
.ficha-comparativa-item.is-current { background: var(--color-sky-100); border-radius: var(--radius-md); padding: .65rem .9rem; border-bottom: 0; }
.ficha-comparativa-item.is-current .ficha-comparativa-label { text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: .72rem; }
.ficha-comparativa-label { font-size: .8rem; color: var(--color-muted); line-height: 1.4; }
.ficha-comparativa-value { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
.ficha-comparativa-unit { font-size: 1rem; font-weight: 700; }
.ficha-comparativa-sub { font-size: .78rem; color: var(--color-muted); }
.ficha-comparativa-delta { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha-comparativa-delta.up { color: var(--color-success); }
.ficha-comparativa-delta.down { color: var(--color-danger); }
.ficha-comparativa-foot { font-size: .75rem; color: var(--color-muted); font-style: italic; }

.ficha-localizacion-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ficha-localizacion .mapa-contenedor { height: 100%; min-height: 360px; }
.ficha-datos-panel { margin-top: 0; padding: 1.25rem 1.5rem; }
.ficha-nota { font-size: .82rem; color: var(--color-muted); background: var(--color-background); border-left: 3px solid var(--color-cyan-500); border-radius: var(--radius-sm); padding: .6rem .8rem; margin: .75rem 0 0; }

.ficha-extremos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.ficha-extremos-grid .panel { margin-top: 0; }
.ficha-extremo h3, .ficha-evolucion h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--color-muted); margin: 0 0 .35rem; }
.ficha-extremo-val { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ficha-extremo-val.up { color: var(--color-success); }
.ficha-extremo-val.down { color: var(--color-danger); }
.ficha-extremo-val.na { color: var(--color-muted); font-style: italic; font-size: 1.15rem; }
.ficha-extremo-meta { font-size: .8rem; color: var(--color-muted); }

@media (max-width: 960px) {
    .ficha-hero-main { grid-template-columns: 1fr; gap: 1.25rem; }
    .ficha-localizacion-grid { grid-template-columns: 1fr; }
    .ficha-localizacion .mapa-contenedor { min-height: 300px; }
    .ficha-extremos-grid { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
    .ficha-hero-title { font-size: 1.625rem; }
    .ficha-hero-pct { font-size: clamp(3.5rem, 15vw, 4.25rem); }
    .ficha-hero-pct-unit { font-size: 1.25rem; }
    .ficha-comparativa { padding: 1rem 1.1rem; }
    .grafica-contenedor { padding: .25rem; }
    .grafica-contenedor .skel-block, .grafica-holder { height: 320px; }
}

/* Mini embalses grid */
.grid-embalses-mini { display: grid; gap: .75rem; }
.embalse-mini { display: flex; flex-direction: column; padding: .75rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); transition: all .15s; box-shadow: var(--shadow-sm); }
.embalse-mini:hover { border-color: var(--color-cyan-500); box-shadow: var(--shadow-md); }
.embalse-mini strong { font-size: .95rem; font-weight: 700; }
.embalse-mini-pct { font-weight: 800; font-size: .95rem; margin-top: .2rem; font-variant-numeric: tabular-nums; }

/* Aviso */
.aviso { background: #fff7e0; border: 1px solid #f0d57d; border-radius: var(--radius-md); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9rem; color: var(--color-warning); }

/* Ficha de cuenca premium: mapa, situación y destacados (I9.2d) */
.mapa-marcador-dot { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15,23,42,.4); }
.mapa-marcador-nivel { background: transparent; border: 0; }
.mapa-popup { display: flex; flex-direction: column; gap: .2rem; min-width: 150px; }
.mapa-popup strong { font-size: .95rem; }
.mapa-popup-nivel { font-weight: 800; font-variant-numeric: tabular-nums; }
.mapa-popup-sub { font-size: .8rem; color: var(--color-muted); }
.mapa-popup-link { margin-top: .35rem; font-weight: 700; font-size: .85rem; color: var(--color-blue-700); text-decoration: none; }
.mapa-popup-link:hover { text-decoration: underline; }

.ficha-situacion { margin: 0; padding: 1rem 1.25rem; font-size: .95rem; line-height: 1.6; }

.ficha-destacados-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.ficha-destacado { margin: 0; padding: 1rem 1.1rem; }
.ficha-destacado-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--color-muted); margin: 0 0 .5rem; }
.ficha-destacado-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ficha-destacado-list a { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--color-text); padding: .3rem .15rem; border-radius: var(--radius-sm); }
.ficha-destacado-list a:hover { background: var(--color-sky-100); }
.ficha-destacado-nombre { font-size: .85rem; }
.ficha-destacado-val { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem; white-space: nowrap; }
.ficha-destacado-empty { font-size: .82rem; color: var(--color-muted); font-style: italic; margin: .25rem 0; }

@media (min-width: 640px) {
    .ficha-destacados-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .ficha-destacados-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .ficha-destacados-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Listado premium de embalses de la cuenca (I9.2e) */
.lista-embalses-premium { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.embalse-row { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: all .15s; }
.embalse-row:hover { border-color: var(--color-cyan-500); box-shadow: var(--shadow-md); }
.embalse-row-main { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 1rem; align-items: center; padding: .7rem 1.125rem; text-decoration: none; color: var(--color-text); }
.embalse-row-info { min-width: 0; }
.embalse-row-nombre { font-size: .98rem; font-weight: 700; margin: 0 0 .1rem; }
.embalse-row-sub { font-size: .8rem; color: var(--color-muted); margin: 0; }
.embalse-row-spark { text-align: center; }
.embalse-row-spark svg.sparkline { width: 120px; height: 32px; }
.embalse-row-datos { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; text-align: right; white-space: nowrap; }
.embalse-row-pct { font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
.embalse-row-vol { font-size: .78rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.embalse-row-tend { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.embalse-row-tend.up { color: var(--color-success); }
.embalse-row-tend.down { color: var(--color-danger); }
.embalse-row-tend.flat { color: var(--color-muted); }
.ficha-dl-lista a { color: var(--color-blue-700); text-decoration: none; }
.ficha-dl-lista a:hover { text-decoration: underline; }
.ficha-dl-lista small { color: var(--color-muted); }

@media (max-width: 639px) {
    .embalse-row-main { grid-template-columns: 1fr; gap: .4rem; }
    .embalse-row-spark { text-align: left; }
    .embalse-row-datos { align-items: flex-start; text-align: left; }
}

/* Lista simple (sin coordenadas, etc) */
.lista-simple { margin: .5rem 0 0; padding-left: 1.1rem; columns: 2; column-gap: 2rem; }
.lista-simple li { break-inside: avoid; padding: .15rem 0; }

/* Responsive interior */
@media (min-width: 640px) {
    .grid-estadisticas { grid-template-columns: repeat(4, 1fr); }
    .grid-rankings { grid-template-columns: repeat(2, 1fr); }
    .grid-embalses-mini { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .grid-rankings { grid-template-columns: repeat(3, 1fr); }
    .grid-embalses-mini { grid-template-columns: repeat(3, 1fr); }
    .ficha-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
    .grid-embalses-mini { grid-template-columns: 1fr; }
    .lista-simple { columns: 1; }
}

/* Contenedor común páginas premium de cuenca, provincia y comunidad (I9.2g / I9.3 / I9.4) */
.ficha-cuenca, .ficha-provincia, .ficha-comunidad { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.ficha-cuenca .ficha-seccion, .ficha-provincia .ficha-seccion, .ficha-comunidad .ficha-seccion { margin-top: 2rem; }
@media (max-width: 767px) {
    .ficha-cuenca, .ficha-provincia, .ficha-comunidad { padding-inline: 16px; }
}
@media (max-width: 420px) {
    .ficha-cuenca, .ficha-provincia, .ficha-comunidad { padding-inline: 14px; }
}

/* ---------------------------------------------------------------
   Rankings premium (I9.5)
   --------------------------------------------------------------- */

.rankings-hero-desc { font-size: .95rem; color: var(--color-muted); max-width: 720px; line-height: 1.55; margin-top: .75rem; }

.rankings-section-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; color: var(--color-navy-900); }

/* Filtros territoriales */
.rankings-filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.rankings-filtro { display: flex; flex-direction: column; gap: .3rem; min-width: 160px; }
.rankings-filtro-label { font-size: .8rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.rankings-select { padding: .55rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-family: inherit; font-size: .9rem; color: var(--color-text); min-height: 44px; }
.rankings-select:focus { outline: 2px solid var(--color-blue-700); outline-offset: 1px; }
.rankings-filtro-acciones { display: flex; gap: .5rem; align-items: center; padding-bottom: 6px; }

/* Descripcion y empty */
.rankings-desc { font-size: .85rem; color: var(--color-muted); margin: 0 0 .75rem; }
.rankings-empty { padding: 1.5rem; color: var(--color-muted); font-style: italic; text-align: center; }

/* Paneles ocultos */
.rankings-panel.hidden { display: none; }

/* Posicion en ranking */
.embalse-row-pos { font-size: 1.35rem; font-weight: 800; color: var(--color-blue-700); font-variant-numeric: tabular-nums; min-width: 2rem; text-align: center; flex-shrink: 0; }
.embalse-row-cap { font-size: .8rem; color: var(--color-muted); }

/* Margen extra para lista dentro de panel */
.rankings-lista { margin-top: 0; }

/* Insights */
.rankings-insights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 960px) {
    .rankings-insights-grid { grid-template-columns: repeat(2, 1fr); }
    .rankings-filtros { flex-direction: column; align-items: stretch; }
    .rankings-filtro { min-width: 0; }
    .rankings-filtro-acciones { padding-bottom: 0; }
}
@media (max-width: 480px) {
    .rankings-insights-grid { grid-template-columns: 1fr; }
    .embalse-row-pos { font-size: 1.15rem; min-width: 1.5rem; }
}

/* ---------------------------------------------------------------
   Directorio de embalses (I9.6)
   --------------------------------------------------------------- */

/* Buscador */
.embalses-search-form { max-width: 600px; }
.embalses-search-wrap { position: relative; display: flex; align-items: center; }
.embalses-search-input { width: 100%; padding: .75rem 3rem .75rem 1.25rem; border: 2px solid var(--color-border); border-radius: var(--radius-full); font-family: inherit; font-size: 1rem; background: var(--color-surface); color: var(--color-text); min-height: 48px; transition: border-color .15s; }
.embalses-search-input:focus { outline: none; border-color: var(--color-blue-700); box-shadow: 0 0 0 3px rgba(18,103,168,0.12); }
.embalses-search-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: var(--color-blue-700); color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 38px; }
.embalses-search-btn:hover { background: var(--color-navy-900); }

/* Filtros */
.embalses-filters { display: flex; flex-direction: column; gap: 1rem; }
.embalses-filtro-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.embalses-filtro { display: flex; flex-direction: column; gap: .3rem; min-width: 150px; }
.embalses-filtro-label { font-size: .78rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; display: block; }
.embalses-select { padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-family: inherit; font-size: .9rem; color: var(--color-text); min-height: 44px; cursor: pointer; }
.embalses-select-sm { min-height: 40px; font-size: .85rem; padding: .4rem .6rem; }
.embalses-select:focus { outline: 2px solid var(--color-blue-700); outline-offset: 1px; }
.embalses-count { font-size: .85rem; color: var(--color-muted); padding-left: .5rem; }
.embalses-filtro-actions { align-items: center; }

/* Pills de estado de llenado */
.embalses-filtro-pills { display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.embalses-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.embalses-pill { display: inline-block; padding: .4rem .85rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: .82rem; font-weight: 500; color: var(--color-muted); text-decoration: none; white-space: nowrap; transition: all .15s; min-height: 36px; display: inline-flex; align-items: center; }
.embalses-pill:hover { border-color: var(--color-blue-700); color: var(--color-blue-700); }
.embalses-pill.active { background: var(--color-blue-700); color: #fff; border-color: var(--color-blue-700); }
.embalses-pill-clear { font-size: .78rem; color: var(--color-danger); text-decoration: underline; padding: .4rem .5rem; display: inline-flex; align-items: center; }

/* Empty state */
.embalses-empty { text-align: center; padding: 2rem; }
.embalses-empty p { color: var(--color-muted); margin-bottom: 1rem; font-size: 1.05rem; }

/* Pagination */
.embalses-pagination { margin-top: 1.5rem; }
.embalses-pagination ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; justify-content: center; flex-wrap: wrap; }
.embalses-pagination li { margin: 0; }
.embalses-pagination a { display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 .5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-size: .9rem; font-weight: 500; transition: all .15s; }
.embalses-pagination a:hover { border-color: var(--color-blue-700); color: var(--color-blue-700); }
.embalses-pagination a.active { background: var(--color-blue-700); color: #fff; border-color: var(--color-blue-700); }
.embalses-pagination .dots { display: flex; align-items: center; padding: 0 .25rem; color: var(--color-muted); }

/* Responsive */
@media (max-width: 767px) {
    .embalses-filtro { min-width: 0; flex: 1; }
    .embalses-search-input { font-size: .95rem; }
}

/* ---------------------------------------------------------------
   Dato reciente SAIH en ficha de embalse (F10.1k)
   --------------------------------------------------------------- */

.recent-data { background: var(--color-aqua-100); border: 1px solid #b8d8de; border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-top: 1.5rem; }
.recent-data-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.recent-data-heading { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-cyan-500); margin: 0; }
.recent-data-freq { text-transform: lowercase; }
.recent-data-status { font-size: .82rem; color: var(--color-text); margin: 0 0 .75rem; }
.recent-data-body { display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline; }
.recent-data-pct { font-size: 1.5rem; font-weight: 800; color: var(--color-navy-900); }
.recent-data-unit { font-size: .9rem; font-weight: 600; }
.recent-data-vol { font-size: .85rem; color: var(--color-text); }
.recent-data-meta { font-size: .8rem; color: var(--color-muted); }
.recent-data-source { font-size: .75rem; color: var(--color-muted); width: 100%; }
.recent-data-divider { height: 1px; background: var(--color-border); margin-top: 1.25rem; opacity: .6; }

/* F11.4: dato reciente nacional en portada */
.recent-national-hero { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.recent-national-stat { flex: 1 1 10rem; background: var(--color-aqua-100); border: 1px solid #b8d8de; border-radius: var(--radius-md); padding: .75rem 1rem; }
.recent-national-num { display: block; font-size: 1.35rem; font-weight: 800; color: var(--color-navy-900); }
.recent-national-label { display: block; font-size: .8rem; color: var(--color-muted); margin-top: .2rem; }
.recent-national-meta { font-size: .85rem; color: var(--color-text); margin: 0 0 1rem; }
.recent-national-rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.recent-rank-col { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .75rem 1rem; }
.recent-rank-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-cyan-500); margin: 0 0 .5rem; }
.recent-rank-list { list-style: none; margin: 0; padding: 0; }
.recent-rank-list li { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .9rem; padding: .25rem 0; border-bottom: 1px solid var(--color-border); }
.recent-rank-list li:last-child { border-bottom: 0; }
.recent-rank-list a { color: var(--color-navy-900); text-decoration: none; }
.recent-rank-list a:hover { text-decoration: underline; }
.recent-rank-val { color: var(--color-muted); font-weight: 700; white-space: nowrap; }

@media (max-width: 480px) {
    .recent-data { padding: .75rem 1rem; }
    .recent-data-pct { font-size: 1.25rem; }
}

/* ── F10.9c2: caudales integrados en recent-data ── */
.recent-data-footer { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid #b8d8de; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.recent-variation { margin-top: .5rem; }
.recent-variation-body { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.recent-variation-label { font-size: .78rem; font-weight: 600; color: var(--color-cyan-500); }
.recent-variation-delta { font-size: .95rem; font-weight: 700; }
.recent-variation-delta.up { color: var(--color-success); }
.recent-variation-delta.down { color: var(--color-danger); }
.recent-variation-delta.flat { color: var(--color-muted); }
.recent-variation-pp { font-size: .78rem; color: var(--color-muted); }
.recent-variation-pp.up { color: var(--color-success); }
.recent-variation-pp.down { color: var(--color-danger); }

.recent-data-subheading { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-cyan-500); margin: .6rem 0 .35rem; }
.recent-flow-section { margin-top: .25rem; }
.recent-flow-body { display: flex; flex-direction: column; gap: .2rem; }
.recent-flow-row { display: flex; align-items: baseline; gap: .5rem; }
.recent-flow-label { font-size: .78rem; font-weight: 600; color: var(--color-muted); min-width: 3.2rem; }
.recent-flow-value { font-size: .88rem; font-weight: 700; color: var(--color-text); }
.recent-flow-delta { font-size: .72rem; font-weight: 600; }
.recent-flow-delta.up { color: var(--color-success); }
.recent-flow-delta.down { color: var(--color-danger); }
.recent-flow-meta { font-size: .72rem; color: var(--color-muted); }

@media (max-width: 639px) {
    .recent-variation-delta { font-size: .88rem; }
    .recent-data-subheading { margin: .45rem 0 .25rem; }
}

/* ── F10.9b: pagina /embalses-tiempo-real/ ── */
.realtime-hero-desc { max-width: 720px; margin-top: .5rem; font-size: .9rem; color: var(--color-muted); line-height: 1.5; }
.realtime-hero-desc a { color: var(--color-cyan-500); }

.realtime-intervals { display: flex; gap: .5rem; flex-wrap: wrap; }
.realtime-interval {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .45rem 1rem; border-radius: var(--radius-full);
    font-size: .85rem; font-weight: 600; text-decoration: none;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); transition: all .15s;
}
.realtime-interval:hover:not(.disabled):not(.active) { border-color: var(--color-cyan-500); color: var(--color-cyan-500); }
.realtime-interval.active { background: var(--color-navy-900); color: #fff; border-color: var(--color-navy-900); }
.realtime-interval.disabled { opacity: .3; cursor: not-allowed; background: transparent; border-color: transparent; color: var(--color-muted); }

.realtime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.realtime-column { min-width: 0; }
.realtime-panel-title {
    font-size: .95rem; font-weight: 700; margin: 0 0 1rem;
    color: var(--color-navy-900); display: flex; align-items: center; gap: .4rem;
}
.realtime-empty { color: var(--color-muted); font-size: .9rem; padding: 1rem 0; }

.realtime-list { list-style: none; padding: 0; margin: 0; }
.realtime-item { border-bottom: 1px solid var(--color-border); }
.realtime-item:last-child { border-bottom: none; }
.realtime-item-main {
    display: flex; align-items: center; gap: .75rem; padding: .7rem 0;
    text-decoration: none; color: inherit;
}
.realtime-item-main:hover { opacity: .85; }
.realtime-pos { flex-shrink: 0; width: 1.5rem; text-align: center; font-size: .8rem; font-weight: 700; color: var(--color-muted); }
.realtime-info { flex: 1; min-width: 0; }
.realtime-name { display: block; font-size: .9rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realtime-basin { font-size: .75rem; color: var(--color-muted); }
.realtime-delta { flex-shrink: 0; text-align: right; font-size: .9rem; font-weight: 700; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.realtime-delta.up { color: var(--color-success); }
.realtime-delta.down { color: var(--color-danger); }
.realtime-delta.flat { color: var(--color-muted); }
.realtime-delta-hm3 { font-size: .9rem; }
.realtime-delta-pp { font-size: .72rem; opacity: .8; }

.realtime-methodology { padding: 1rem 1.25rem; }
.realtime-methodology p { font-size: .85rem; color: var(--color-muted); line-height: 1.6; margin: .5rem 0 0; }

/* ── F10.9b: responsive /embalses-tiempo-real/ ── */
@media (max-width: 767px) {
    .realtime-grid { grid-template-columns: 1fr; gap: 1rem; }
    .realtime-interval { padding: .35rem .75rem; font-size: .8rem; }
    .realtime-name { font-size: .85rem; }
    .realtime-delta-hm3 { font-size: .82rem; }
}

@media (max-width: 639px) {
    .recent-variation { padding: .75rem 1rem; }
    .recent-variation-delta { font-size: 1rem; }
}

@media (max-width: 390px) {
    .realtime-intervals { justify-content: center; }
    .realtime-interval { padding: .3rem .55rem; font-size: .75rem; }
    .realtime-item-main { padding: .55rem 0; gap: .5rem; }
    .realtime-pos { width: 1.2rem; font-size: .75rem; }
    .realtime-name { font-size: .8rem; }
    .realtime-delta-hm3 { font-size: .78rem; }
}

/* ── F10.9f: stats bar ── */
.realtime-stats { display: flex; flex-wrap: wrap; gap: .75rem; }
.realtime-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .55rem .9rem; display: flex; flex-direction: column; align-items: center; min-width: 5rem; flex: 1; }
.realtime-stat-num { font-size: 1.3rem; font-weight: 800; color: var(--color-navy-900); }
.realtime-stat-label { font-size: .7rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; }

/* ── F10.9f: filters ── */
.realtime-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.realtime-basins { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ── F10.9f: table ── */
.realtime-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.realtime-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.realtime-table th { text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); padding: .45rem .5rem; border-bottom: 2px solid var(--color-border); white-space: nowrap; }
.realtime-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.realtime-table a { color: var(--color-text); text-decoration: none; font-weight: 600; }
.realtime-table a:hover { color: var(--color-cyan-500); }
.realtime-table tbody tr:hover { background: var(--color-aqua-100); }
@media (max-width: 639px) {
    .realtime-table thead { display: none; }
    .realtime-table tr { display: block; margin-bottom: .5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .4rem; }
    .realtime-table td { display: flex; justify-content: space-between; padding: .25rem .4rem; border: none; }
    .realtime-table td::before { content: attr(data-label); font-weight: 600; font-size: .72rem; color: var(--color-muted); }
}

/* ── F10.9f: temp source ── */
.realtime-temp-source { font-size: .72rem; color: var(--color-muted); margin: -.5rem 0 .5rem; }

/* ── F10.9f: saih mini chart ── */
.saih-chart { }
.saih-chart svg { display: block; width: 100%; height: 120px; }
.saih-chart-labels { display: flex; justify-content: space-between; align-items: baseline; font-size: .72rem; color: var(--color-muted); margin-top: .2rem; gap: .5rem; }
.saih-chart-min, .saih-chart-max { font-weight: 600; }
.saih-chart-num { font-size: .68rem; color: var(--color-muted); flex-shrink: 0; }
.saih-chart-dates { display: flex; justify-content: space-between; font-size: .62rem; color: var(--color-muted); margin-top: .15rem; gap: .25rem; }
.saih-chart-date { white-space: nowrap; }
@media (max-width: 480px) {
    .realtime-stat { min-width: 4rem; padding: .4rem .6rem; }
    .realtime-stat-num { font-size: 1.1rem; }
}

/* Favoritos (F15.9-B) */
.ficha-titulo-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ficha-titulo-row .ficha-hero-title { margin: 0; }
.fav-toggle {
    appearance: none; border: none; background: transparent; cursor: pointer;
    font-size: 1.9rem; line-height: 1; color: var(--color-amber-400, #fbbf24);
    padding: .2rem .35rem; border-radius: 6px;
}
.fav-toggle:hover, .fav-toggle:focus-visible {
    color: var(--color-amber-300, #fcd34d);
    outline: 2px solid var(--color-amber-400, #fbbf24); outline-offset: 2px;
}
.fav-toggle[aria-pressed="false"] { color: var(--color-neutral-300, #94a3b8); }
.fav-toggle[aria-pressed="false"]:hover { color: var(--color-amber-400, #fbbf24); }
.fav-quitar {
    appearance: none; border: none; background: transparent; cursor: pointer;
    color: var(--color-amber-400, #fbbf24); font-size: 1.2rem; padding: .2rem .4rem;
    border-radius: 6px; align-self: center;
}
.fav-quitar:hover, .fav-quitar:focus-visible {
    color: var(--color-amber-300, #fcd34d);
    outline: 2px solid var(--color-amber-400, #fbbf24); outline-offset: 2px;
}

/* ---- UX-Home 1: responsive movil (F15.12). ---- */
/* La causa del overflow se corrige en cada seccion (una columna, wrap, min-width:0);
   overflow-x:hidden queda solo como red de seguridad en caso extremo. */
@media (max-width: 520px) {
    /* Header: ocultar buscador (logo + menu) */
    .search-mini { display: none; }
    .site-header .container { padding: 0 1rem; gap: .5rem; }
    .brand { min-width: 0; }

    /* Hero: apilar, fecha y titulo permiten wrap */
    .hero-grid { grid-template-columns: 1fr; }
    .hero-main, .hero-chart-card { min-width: 0; width: 100%; max-width: 100%; }
    .hero-meta { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
    .hero-meta .badge { white-space: normal; }
    .hero-date { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; white-space: normal; }
    .hero-title { font-size: 1.7rem; line-height: 1.15; }

    /* Hero CTAs: Ver mapa ancho completo; Explorar cuencas y Rankings en 2 columnas.
       Sin min-width heredado: cada boton al 100% de su celda. */
    .hero-actions { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .5rem; }
    .hero-actions > * { min-width: 0; width: 100%; justify-content: center; }
    .hero-actions .btn-accent { grid-column: 1 / -1; width: 100%; }

    /* Grafico: tarjeta y canvas contenidos; badge ACTUAL bajo el titulo (columna). */
    .hero-chart-card { padding: .9rem; min-width: 0; width: 100%; max-width: 100%; }
    .hero-chart-canvas, .hero-chart-holder { min-width: 0; max-width: 100%; }
    .hero-chart-canvas canvas { max-width: 100% !important; height: auto !important; }
    .hero-chart-header { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .hero-chart-current { flex-wrap: wrap; }

    /* Metrica nacional: 1 columna limpia */
    .recent-national-hero { flex-direction: column; gap: .5rem; }
    .recent-national-stat { flex: 1 1 100%; min-width: 0; width: 100%; }
    .recent-national-meta { white-space: normal; word-break: normal; }
    .recent-national-meta .badge { white-space: normal; }

    /* Rankings recientes: 1 tarjeta por fila; cada fila conserva nombre + valor. */
    .recent-national-rankings { grid-template-columns: 1fr; }
    .recent-rank-col { min-width: 0; width: 100%; }
    .recent-rank-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: baseline; }
    .recent-rank-list li > :first-child { min-width: 0; white-space: normal; }
    .recent-rank-val { display: block; white-space: nowrap; }
    .recent-rank-title, .recent-national-label { white-space: normal; }

    /* Rankings semanales: conservar nombre + valor */
    .rk-cur { min-width: 0; flex-shrink: 1; }
    .rk-val { white-space: normal; text-align: right; }
    .rk-item { flex-wrap: wrap; }
    .rk-name, .rk-info { min-width: 0; }
    .embalse-row-datos { white-space: normal; min-width: 0; }
    .embalse-row-main { min-width: 0; }
    .embalse-dato { white-space: normal; }

    /* Contencion general */
    .container, .section, .ficha-cuenca, .ficha-provincia, .ficha-comunidad, .main-content { min-width: 0; }
}

/* P1: espacios y CTAs (tablet estrecha / movil) */
@media (max-width: 520px) {
    .ficha-hero-main { gap: .8rem; }
    .ficha-hero { padding: 1.25rem 1rem; }
    .recent-data-body { gap: .5rem; }
}

/* ---- Directorio territorial reutilizable (F15.12: /cuencas/, /provincias/, /comunidades/) ---- */
.territorio-directorio { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.territorio-head { padding: 1rem 0 .25rem; }
.territorio-head h1 { font-size: 1.9rem; margin: 0 0 .4rem; color: var(--color-navy-900, #0f172a); }
.territorio-head .lead { color: var(--color-muted); font-size: 1.02rem; max-width: 620px; margin: 0 0 .6rem; }
.territorio-resumen { color: var(--color-muted); font-size: .95rem; margin: 0 0 .25rem; }
.territorio-resumen strong { color: var(--color-navy-900, #0f172a); }

.territorio-sort { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 1rem; }
.territorio-sort label { font-size: .85rem; color: var(--color-muted); font-weight: 600; }
.territorio-sort-select {
    padding: .4rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 8px);
    font-size: .88rem; font-family: inherit; background: #fff; cursor: pointer;
}

.territorio-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; }
.territorio-card2 {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px);
    padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0;
}
.territorio-card2-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.territorio-card2-top h2 { font-size: 1.02rem; margin: 0; color: var(--color-navy-900, #0f172a); }
.territorio-card2-estado { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.territorio-card2-sub { font-size: .82rem; color: var(--color-muted); margin-top: -0.3rem; }
.territorio-card2-pct { font-size: 2rem; font-weight: 800; color: var(--color-navy-900, #0f172a); font-variant-numeric: tabular-nums; line-height: 1; }
.territorio-card2-barra { height: 10px; background: var(--color-border, #e2e8f0); border-radius: 999px; overflow: hidden; }
.territorio-card2-relleno { display: block; height: 100%; border-radius: 999px; }
.territorio-card2-datos { display: flex; flex-direction: column; gap: .15rem; }
.territorio-card2-vol { font-size: .92rem; color: var(--color-text); }
.territorio-card2-vol strong { color: var(--color-navy-900, #0f172a); }
.territorio-card2-cov { font-size: .82rem; color: var(--color-muted); }
.territorio-card2-cta {
    margin-top: auto; align-self: flex-start; font-size: .9rem; font-weight: 600;
    color: var(--color-blue-700, #1d4ed8); text-decoration: none;
}
.territorio-card2-cta:hover { text-decoration: underline; }

@media (max-width: 900px) { .territorio-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) {
    .territorio-directorio { padding-inline: 16px; }
    .territorio-card-grid { grid-template-columns: 1fr; }
    .territorio-head h1 { font-size: 1.6rem; }
}

/* ============================================================
   GENERADOR DE WIDGETS (P0/P1 UX) — /widgets/
   ============================================================ */
.w-tipo-group { border: none; padding: 0; margin: 0 0 1.1rem; }
.w-tipo-group legend { font-size: .9rem; font-weight: 700; margin-bottom: .5rem; color: var(--color-text); }
.w-tipo-toggle { display: flex; gap: .5rem; flex-wrap: wrap; }
.w-tipo-opt { cursor: pointer; }
.w-tipo-opt input { position: absolute; opacity: 0; pointer-events: none; }
.w-tipo-opt span {
    display: inline-block; padding: .55rem 1.15rem; border-radius: var(--radius-full);
    border: 1px solid var(--color-border); background: var(--color-background);
    font-size: .9rem; font-weight: 600; color: var(--color-muted); transition: all .15s;
}
.w-tipo-opt:hover span { border-color: var(--color-cyan-500); color: var(--color-text); }
.w-tipo-opt input:checked + span {
    background: var(--color-cyan-500); border-color: var(--color-cyan-500);
    color: #fff; box-shadow: 0 0 0 3px rgba(24,168,199,.18);
}
.w-tipo-opt input:focus-visible + span { outline: 2px solid var(--color-cyan-500); outline-offset: 2px; }

.w-field { position: relative; }
.w-field-hint { display: block; font-size: .72rem; color: var(--color-muted); margin-top: .35rem; }
.w-embalse-autocomplete { position: relative; }
.w-embalse-autocomplete .w-embalse-suggest {
    top: calc(100% + 4px); left: 0; right: 0; min-width: 220px;
}
.w-field select.rankings-select { width: 100%; }
.w-acciones { margin-top: 1.15rem; }
.w-acciones .btn { width: 100%; justify-content: center; }

.w-preview { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.w-copied { display: inline-block; margin-left: .6rem; font-size: .85rem; font-weight: 600; color: var(--color-success); opacity: 0; transition: opacity .25s; }

@media (min-width: 560px) {
    .w-acciones .btn { width: auto; min-width: 220px; }
    .w-field select.rankings-select, .w-embalse-autocomplete input { max-width: 420px; }
}