/* Sistema de diseño (RISKBO-019): sobrio y legible. Los colores de la
   interfaz viven aquí; los de los datos (amenazas, niveles, escala
   divergente) siguen en sus clases y no cambian. */
@font-face {
    font-family: "Public Sans";
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/public-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Public Sans";
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/public-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Public Sans";
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/public-sans-latin-700-normal.woff2") format("woff2");
}

:root {
    --primary: #1f3a5f;
    --primary-dark: #142840;
    --primary-soft: #e8edf4;
    --bg: #f6f7f8;
    --surface: #fff;
    --border: #d9dde3;
    --text: #1d1d1f;
    --muted: #5b6270;
    --danger: #b3261e;
    --danger-bg: #fdeeee;
    --warn: #c58a00;
    --warn-bg: #fff8e6;
    --radius: 4px;
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --max: 1200px;
    --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font);
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);

    & form {
        display: grid;
        gap: 0.75rem;
        max-width: 20rem;
    }

    & label {
        display: grid;
    }
}

main {
    display: block;
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--s3) var(--s2) var(--s4);
}

h1 { font-size: 2rem; font-weight: 600; line-height: 1.2; margin: 0 0 var(--s2); letter-spacing: -0.01em; }
h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: var(--s3) 0 var(--s1); }
h3 { font-size: 1.0625rem; font-weight: 600; margin: var(--s2) 0 var(--s1); }
@media (max-width: 600px) {
    h1 { font-size: 1.625rem; }
    h2 { font-size: 1.25rem; }
}

a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-dark); }

/* Cifras alineadas en tablas y cifras destacadas. */
table, .tiles strong, .count, td { font-variant-numeric: tabular-nums; }

small, .note, .source { color: var(--muted); }

/* Cabecera y pie (RISKBO-019). En el teléfono, la navegación es una fila
   que se desplaza en horizontal, sin JavaScript. */
header.site {
    background: var(--surface);
    border-bottom: 1px solid var(--border);

    & .bar {
        max-width: var(--max);
        margin: 0 auto;
        padding: 0 var(--s2);
        display: flex;
        align-items: center;
        gap: var(--s3);
        min-height: 60px;
    }
    & .brand {
        font-weight: 700;
        font-size: 1.125rem;
        color: var(--text);
        text-decoration: none;
        white-space: nowrap;
        letter-spacing: -0.01em;
    }
    & .main-nav {
        display: flex;
        gap: var(--s3);
        flex: 1;
        justify-content: center;

        & a {
            color: var(--muted);
            text-decoration: none;
            padding: 18px 0 16px;
            border-bottom: 2px solid transparent;
            white-space: nowrap;
        }
        & a:hover { color: var(--primary); }
        & a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
    }
    & .session {
        display: flex;
        align-items: center;
        gap: var(--s2);
        margin-left: auto;
        white-space: nowrap;

        & a { text-decoration: none; }
    }
    & button#logout {
        font: inherit;
        font-size: 0.875rem;
        padding: 6px 14px;
        background: var(--surface);
        color: var(--muted);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        cursor: pointer;
    }
    & button#logout:hover { color: var(--primary); border-color: var(--primary); }
}
@media (max-width: 900px) {
    header.site .bar {
        flex-wrap: wrap;
        row-gap: 0;
        padding-top: var(--s1);
    }
    header.site .main-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        gap: var(--s3);
        margin: 0 calc(-1 * var(--s2));
        padding: 0 var(--s2);

        & a { padding: 10px 0 8px; }
    }
}

a.button, button.primary {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 8px 18px;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
}
a.button:hover, button.primary:hover { background: var(--primary-dark); color: #fff; }

footer.site {
    margin-top: var(--s4);
    background: var(--primary-soft);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.875rem;

    & .wrap { max-width: var(--max); margin: 0 auto; padding: var(--s3) var(--s2) var(--s4); }
    & p { margin: 0 0 var(--s1); }
    & strong { color: var(--text); }
    & .sources-title { font-weight: 600; color: var(--text); margin-top: var(--s2); }
    & ul.sources { list-style: none; margin: 0; padding: 0; }
    & ul.sources li { margin: 2px 0; }
    & .name { color: var(--text); }
    & .credit a { color: var(--primary); }
}

/* Período de las síntesis. */
form.period {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    max-width: none;

    & input[type="number"], & select {
        width: 6rem;
        font: inherit;
    }

    & .error {
        flex-basis: 100%;
        margin: 0;
        color: #b3261e;
    }
}

.notice {
    border-inline-start: 4px solid #c58a00;
    padding: 0.25rem 0.75rem;
    background: #fff8e6;
}

/* Escala de cada amenaza (REG-002): 5 tonos de su hue (--h), del claro al
   oscuro; la luminosidad baja 15 puntos por tramo para que se distingan
   también en escala de grises. «Sin registros» (c0): trama gris. */
.c1 { --fill: oklch(92% 0.05 var(--h)); }
.c2 { --fill: oklch(79% 0.09 var(--h)); }
.c3 { --fill: oklch(65% 0.13 var(--h)); }
.c4 { --fill: oklch(51% 0.14 var(--h)); }
.c5 { --fill: oklch(37% 0.12 var(--h)); }
.c0 { --fill: url(#none); }

svg.defs {
    position: absolute;

    & .none-bg { fill: #fff; }
    & .none-line { stroke: #8a8a8a; stroke-width: 6; }
}

.figures {
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

figure.map {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(7rem, 2fr);
    grid-template-areas: "title title" "map legend" "caption caption";
    align-items: end;
    gap: 0.5rem;

    & h2 {
        grid-area: title;
        margin: 0;
        font-size: 1.15rem;
    }

    & svg {
        grid-area: map;
        width: 100%;
        height: auto;

        & g { fill: var(--fill); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
        & g:hover { stroke: #1d1d1f; }
    }

    & .legend {
        grid-area: legend;
        font-size: 0.85rem;

        & p { margin: 0 0 0.25rem; font-weight: 600; }
        & ul { list-style: none; margin: 0; padding: 0; }
        & li { display: flex; align-items: center; gap: 0.4rem; }
        & span {
            width: 1.4rem;
            height: 0.9rem;
            flex: none;
            border: 1px solid #8a8a8a;
            background: var(--fill);
        }
        & span.c0 {
            background: repeating-linear-gradient(45deg, #fff 0 3px, #9a9a9a 3px 4px);
        }
    }

    & figcaption {
        grid-area: caption;
        font-size: 0.9rem;

        & small { display: block; color: #555; }
    }
}

/* Frecuencia histórica (RISKBO-006). Cada serie fija --h. */
fieldset.hazards {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    border: 1px solid #ccc;
    margin: 0;

    & label { display: flex; gap: 0.3rem; align-items: center; }
}

figure.trend {
    margin: 1rem 0 0;

    & .chart {
        overflow-x: auto;
    }

    & svg {
        display: block;
        width: 100%;
        min-width: 40rem;
        height: auto;
        font-size: 13px;
    }

    & .grid line { stroke: #e2e2e2; }
    & .grid text, & .x text { fill: #555; }
    & .grid .y { text-anchor: end; }
    & .x text { text-anchor: middle; }

    & .series {
        --line: oklch(55% 0.15 var(--h));
        fill: none;
        stroke: var(--line);

        & polyline { stroke-width: 2.5; stroke-linejoin: round; }
        & polyline.partial { stroke-dasharray: 5 4; }
        & circle { fill: #fff; stroke-width: 2; }
        & circle:hover { fill: var(--line); }
    }

    & .end { fill: oklch(45% 0.15 var(--h)); font-weight: 600; }

    & .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 1.25rem;
        list-style: none;
        padding: 0;
        font-size: 0.9rem;

        & span {
            display: inline-block;
            width: 1.5rem;
            height: 3px;
            margin-inline-end: 0.4rem;
            vertical-align: middle;
            background: oklch(55% 0.15 var(--h));
        }
    }

    & .note { font-size: 0.85rem; color: #555; }

    & figcaption {
        font-size: 0.9rem;

        & small { display: block; color: #555; }
    }
}

/* Un panel por amenaza (RISKBO-013). */
form.period select[name="vista"] { width: auto; }

figure.trend.panels {
    & .panel-grid {
        display: grid;
        gap: 1rem 1.5rem;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    }

    & .panel {
        min-width: 0;

        & h3 {
            margin: 0;
            font-size: 1rem;
            color: oklch(40% 0.15 var(--h));
        }

        & h3 small { color: #555; font-weight: normal; }

        & svg { min-width: 0; font-size: 15px; }
    }
}

/* Portada como tablero (RISKBO-016, rediseño RISKBO-020). */
.dashboard {
    & .lead { margin-top: calc(-1 * var(--s1)); font-size: 0.9375rem; }

    & .tiles {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--s2);
        list-style: none;
        padding: 0;
        margin: var(--s3) 0;

        & li {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: var(--s2) 20px;
            color: var(--muted);
            font-size: 0.875rem;
        }
        & strong {
            display: block;
            font-size: 1.75rem;
            font-weight: 700;
            line-height: 1.15;
            color: var(--primary);
            margin-bottom: 4px;
            letter-spacing: -0.01em;
        }
        & li.bad strong { color: var(--danger); }
        & small { display: block; color: var(--muted); font-size: 0.75rem; }
    }

    & .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: var(--s2) 20px;
        margin-bottom: var(--s3);

        & h2 { margin-top: 0; font-size: 1.125rem; }
    }

    & svg.bars {
        width: 100%;
        height: auto;
        font-size: 13px;

        & .grid line { stroke: #e6e8ec; }
        & .grid text, & text.x { fill: var(--muted); }
        & .y { text-anchor: end; }
        & text.x { text-anchor: middle; }
        & .bar rect { fill: #5a7290; }
        & .bar.peak rect { fill: var(--primary); }
        & .bar.partial rect { fill: #c9d3df; stroke: #5a7290; stroke-dasharray: 4 3; }
        & .bar:hover rect { fill: var(--primary-dark); }
        & text.peak { text-anchor: middle; font-weight: 700; fill: var(--primary); }
    }

    & .tops {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
        gap: var(--s2);
        margin-bottom: var(--s3);

        & .card { margin: 0; }
    }

    & ol { padding-inline-start: 1.5rem; margin: 0; font-size: 0.9375rem; }
    & ol li { padding: 6px 0; border-bottom: 1px solid #eef0f3; }
    & ol li:last-child { border-bottom: 0; }
    & ol li::marker { color: var(--muted); font-size: 0.8125rem; }
    & ol li b { float: inline-end; font-variant-numeric: tabular-nums; }
    & ol li small { color: var(--muted); }
    & ol.hazards span {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        margin-inline-end: 0.4rem;
        border-radius: 2px;
        background: oklch(55% 0.15 var(--h));
    }

    & .note, & .source { color: var(--muted); font-size: 0.85rem; }

    & form.municipality-search {
        align-items: end;

        & label { flex: 1; min-width: 0; font-size: 0.9375rem; color: var(--text); }
        & input[name="nombre"] { width: 100%; }
    }

    & nav.reports {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
        gap: var(--s2);
        margin: var(--s1) 0 var(--s3);

        & a {
            display: block;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: var(--s2) 20px;
            text-decoration: none;
            color: var(--muted);
            font-size: 0.875rem;
        }
        & a:hover { border-color: var(--primary); }
        & strong { display: block; color: var(--primary); font-size: 1rem; margin-bottom: 4px; }
    }
}
.intro.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s3);
    max-width: 48rem;
}
@media (max-width: 600px) {
    .dashboard form.municipality-search { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
    .dashboard .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .dashboard .tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;

        & li { padding: 12px 14px; }
        & strong { font-size: 1.375rem; }
        & li:last-child { grid-column: 1 / -1; }
    }
    .dashboard svg.bars { font-size: 26px; }
    .dashboard svg.bars text.minor, .dashboard svg.bars .grid text { display: none; }
    .dashboard .card { padding: var(--s2) 12px; }
}

/* Mapas por municipio (RISKBO-007): bordes finos y límites departamentales. */
figure.map.municipal svg {
    & g { stroke-width: 0.5; }
    & g.borders { fill: none; stroke: #1d1d1f; stroke-width: 1.6; pointer-events: none; }
}

/* Calendario de riesgo (RISKBO-008): tabla amenazas × meses. */
form.period select[name="departamento"], form.period select[name="municipio"] { width: auto; max-width: 100%; }

figure.calendar {
    margin: 1rem 0 0;

    & .table-wrap { overflow-x: auto; }

    & table {
        border-collapse: separate;
        border-spacing: 2px;
        font-size: 0.85rem;
        min-width: 36rem;
        width: 100%;
    }

    & th { text-align: start; font-weight: 600; }
    & thead th { text-align: center; font-weight: normal; color: #555; }
    & tbody th { white-space: nowrap; padding-inline-end: 0.5rem; }

    & td {
        text-align: center;
        padding: 0.35rem 0.2rem;
        background: var(--fill);
        border-radius: 3px;
    }

    & td.c0 { background: #f4f4f4; }
    & td.c4, & td.c5 { color: #fff; }
    & td.total { background: none; font-weight: 600; text-align: end; }

    & .note { color: #555; font-size: 0.85rem; }
    & figcaption { font-size: 0.9rem; }
    & figcaption small { display: block; color: #555; }
}

/* Cambio de fuente en la frecuencia histórica (RISKBO-039). */
figure.trend g.cut {
    & line { stroke: #333; stroke-width: 1.5; stroke-dasharray: 6 4; }
    & text {
        fill: #333;
        font-size: 12px;
        paint-order: stroke;
        stroke: #fff;
        stroke-width: 4px;
        stroke-linejoin: round;
    }
    & .cut-title { text-anchor: middle; font-weight: 600; }
    & .before { text-anchor: end; }
    & .after { text-anchor: start; }
}

/* Bandas de El Niño y La Niña en la frecuencia histórica (RISKBO-011). */
figure.trend {
    & g.enso rect { stroke: none; }
    & g.enso .nino, & .enso-legend .nino { fill: oklch(93% 0.05 45); background: oklch(93% 0.05 45); }
    & g.enso .nina, & .enso-legend .nina { fill: oklch(93% 0.04 240); background: oklch(93% 0.04 240); }
    & .enso-legend { font-size: 0.85rem; color: #333; }
    & .enso-legend span {
        display: inline-block;
        width: 1.2rem;
        height: 0.8rem;
        margin: 0 0.3rem 0 0.6rem;
        vertical-align: middle;
        border: 1px solid #ccc;
    }
    & .enso-legend small { color: #555; }
}

/* Escenario histórico de temporada (RISKBO-009): niveles con la escala de
   la temporada (--h): alto c5, medio c3, bajo c2, sin registros c0. */
article.scenario {
    & .warning { border-color: #b3261e; background: #fdeeee; }
    & figure.map.scenario { max-width: 44rem; margin-block: 1rem; }

    & .table-wrap { overflow-x: auto; }
    & table { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
    & th, & td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #e3e3e3; text-align: end; }
    & th[scope="row"], & .scenario-summary thead th:first-child { text-align: start; }
    & .scenario-table :is(td, th):is(:nth-child(1), :nth-child(3), :nth-child(4), :last-child) { text-align: start; }
    & .scenario-table :is(td, th):nth-child(-n+2) { width: 1%; }
    & .scenario-table td { white-space: nowrap; }
    & .scenario-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
    & thead th { font-weight: 600; vertical-align: bottom; }
    & span.level {
        display: inline-block;
        width: 0.9rem;
        height: 0.9rem;
        margin-inline-end: 0.35rem;
        vertical-align: -0.1rem;
        border: 1px solid #8a8a8a;
        background: var(--fill);
    }
    & span.level.c0 { background: repeating-linear-gradient(45deg, #fff 0 3px, #9a9a9a 3px 4px); }
    & .note { color: #555; font-size: 0.85rem; }
    & figcaption { font-size: 0.9rem; margin-top: 0.5rem; }
    & figcaption small { display: block; color: #555; }
    & .scenario-summary, & .scenario-table { margin: 1.5rem 0; }
}

/* Ficha municipal (RISKBO-010). */
article.municipality {
    & .overview {
        display: grid;
        grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
    }
    & figure.location { margin: 0; }
    & figure.location svg { width: 100%; height: auto; }
    & figure.location path { stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
    & figure.location path.other { fill: #e4e4e4; }
    & figure.location path.own { fill: #b8b8b8; }
    & figure.location path.here { fill: #b3261e; stroke: #1d1d1f; stroke-width: 1.5; }
    & section { margin-block: 1.5rem; }
    & .table-wrap { overflow-x: auto; }
    & table { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
    & th, & td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #e3e3e3; text-align: end; }
    & th[scope="row"], & thead th:first-child { text-align: start; white-space: nowrap; }
    & thead th { font-weight: 600; vertical-align: bottom; }
    & table.events td:nth-child(-n+3), & table.events thead th:nth-child(-n+3),
    & table.declarations td:nth-child(-n+4), & table.declarations thead th:nth-child(-n+4) { text-align: start; }
    & table.hazards td, & table.events td:first-child, & table.declarations td:first-child { white-space: nowrap; }
    & .swatch {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        margin-inline-end: 0.4rem;
        vertical-align: -0.05rem;
        background: oklch(55% 0.13 var(--h));
    }
    & .note, & .source, & .count { color: #555; font-size: 0.85rem; }
    & nav.pager { display: flex; gap: 1rem; margin-top: 0.75rem; }
}
@media (max-width: 600px) {
    article.municipality .overview { grid-template-columns: 1fr; }
    article.municipality figure.location { max-width: 14rem; }
}

/* Búsqueda de municipio (RISKBO-010). */
form.municipality-search input[name="nombre"] { width: min(24rem, 100%); }
article.municipalities {
    & details { margin-block: 0.4rem; }
    & summary { cursor: pointer; font-weight: 600; }
    & details ul { columns: 14rem; padding-inline-start: 1.2rem; }
}

/* El Niño y La Niña por territorio (RISKBO-012, REG-008): escala divergente,
   más en la fase en rojo y menos en azul; la luminosidad también cambia
   (se distingue en escala de grises). Sin datos suficientes: gris liso;
   sin registros: la trama. */
.d-much_more { --fill: oklch(48% 0.16 30); }
.d-more { --fill: oklch(74% 0.11 40); }
.d-same { --fill: oklch(95% 0.01 90); }
.d-less { --fill: oklch(84% 0.06 240); }
.d-much_less { --fill: oklch(60% 0.12 245); }
.d-only { --fill: oklch(36% 0.13 25); }
.d-none { --fill: url(#none); }
.d-insufficient { --fill: #d4d4d4; }
figure.map.diff .legend span.d-none { background: repeating-linear-gradient(45deg, #fff 0 3px, #9a9a9a 3px 4px); }
figure.map.diff .legend p.years { font-weight: normal; color: #555; margin-top: 0.4rem; }
article.enso {
    & .current { border-color: #b3261e; background: #fdeeee; }
    & .current a { display: inline-block; margin-inline-start: 0.5rem; }
    & .warnings ul { padding-inline-start: 1.2rem; }
    & .warnings li { margin-block: 0.4rem; }
    & .figures { grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr)); }
}

/* Componentes comunes del sistema de diseño (RISKBO-019). Van al final:
   dan el marco a lo de cada página sin tocar el SVG de las figuras ni los
   colores de los datos (--fill, --h). */

/* Barra de filtros: etiquetas arriba, botón primario; en el teléfono, 2
   columnas. */
form.period {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s2);
    gap: var(--s2);
    margin-bottom: var(--s3);

    & label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--muted);
        gap: 4px;
    }
    & input:not([type="checkbox"]), & select {
        font: inherit;
        font-size: 0.9375rem;
        font-weight: 400;
        color: var(--text);
        height: 38px;
        padding: 0 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    & input[type="number"] { width: 7rem; }
    & input:focus, & select:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
    & input[aria-invalid="true"], & select[aria-invalid="true"] { border-color: var(--danger); }
    & > button, & fieldset + button {
        font: inherit;
        font-weight: 600;
        height: 38px;
        padding: 0 22px;
        background: var(--primary);
        color: #fff;
        border: 1px solid var(--primary);
        border-radius: var(--radius);
        cursor: pointer;
    }
    & > button:hover { background: var(--primary-dark); }
    & .error { color: var(--danger); font-size: 0.875rem; font-weight: 600; }
    & fieldset.hazards {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: var(--s1) var(--s2) var(--s2);
        font-size: 0.875rem;

        & legend { font-weight: 600; color: var(--muted); padding: 0 4px; }
        & label { font-weight: 400; color: var(--text); font-size: 0.875rem; }
    }
}
@media (max-width: 600px) {
    form.period {
        display: grid;
        grid-template-columns: 1fr 1fr;

        & > * { min-width: 0; }
        & label:has(select) { grid-column: span 2; }
        & label { grid-template-columns: minmax(0, 1fr); }
        & select { width: 100%; max-width: 100%; }
        & input[type="number"], & select { width: 100%; }
        & fieldset, & .error, & > button { grid-column: 1 / -1; }
    }
}

/* Avisos: barra izquierda de color con fondo muy claro. */
.notice {
    border: 1px solid var(--warn);
    border-inline-start-width: 4px;
    border-radius: var(--radius);
    background: var(--warn-bg);
    padding: 10px var(--s2);
    margin: 0 0 var(--s2);
}
.notice.warning, .notice.current {
    border-color: #e9b7b3;
    border-inline-start-color: var(--danger);
    background: var(--danger-bg);
}
.notice.warning strong, .notice.current strong { color: var(--danger); }
.lead { color: var(--muted); max-width: 60rem; }

/* Figura: tarjeta blanca con título, la figura de siempre, leyenda y pie
   con número y fuente. */
figure.map, figure.trend, figure.calendar, figure.scenario-table,
article.scenario .scenario-summary, article.municipality section.hazards,
article.municipality section.declarations, article.municipality section.events,
article.enso .warnings {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s2) 20px;
}
figure.map h2, figure.trend h2, figure.calendar h2, figure.scenario-table h2,
.scenario-summary h2, article.municipality section > h2, article.enso .warnings h2 {
    font-size: 1.125rem;
    margin: 0 0 var(--s1);
}
figure.map figcaption, figure.trend figcaption, figure.calendar figcaption,
figure.scenario-table figcaption {
    border-top: 1px solid var(--border);
    margin-top: var(--s1);
    padding-top: var(--s1);
    font-size: 0.875rem;

    & strong { color: var(--text); }
    & small { display: block; color: var(--muted); font-size: 0.8125rem; }
}
figure.map .legend { font-size: 0.8125rem; color: var(--text); }
.figures { gap: var(--s3); }
@media (max-width: 600px) {
    figure.map {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "map" "legend" "caption";
    }
    figure.map, figure.trend, figure.calendar, figure.scenario-table { padding: var(--s2) 12px; }
}

/* Tablas: separadores finos, números a la derecha, encabezado en negrita;
   desplazamiento horizontal dentro de su recuadro. */
.table-wrap { overflow-x: auto; }
main table:not(figure.calendar table) { border-collapse: collapse; }
main table th, main table td { border-bottom: 1px solid #e6e8ec; }
main table thead th { color: var(--muted); font-weight: 600; font-size: 0.8125rem; border-bottom: 1px solid var(--border); }
figure.calendar table th, figure.calendar table td { border-bottom: 0; }

/* Enlace al otro nivel de los mapas (RISKBO-030). */
p.other-level { margin: 0 0 var(--s2); }
p.other-level a { font-weight: 600; }

/* Chips (RISKBO-021): índice de amenazas con su color; también elección
   de amenazas en los filtros (RISKBO-022). */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s2); }
.chips a, .chips label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text); text-decoration: none; font-size: 0.875rem;
}
.chips a:hover { border-color: var(--primary); }
.dot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; flex: none;
       background: oklch(0.55 0.13 var(--h, 250)); }

/* Encabezado de figura del mapa (RISKBO-021): número, nombre con su color
   y resumen; la leyenda va debajo del mapa. */
figure.map:has(> header.figure-head) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "map" "legend" "caption";
    align-items: start;
}
figure.map > header.figure-head { grid-area: head; }
figure.map .figure-number { margin: 0; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
figure.map h2 { display: flex; align-items: center; gap: 8px; }
.figure-stats { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0 0 var(--s1); }
.figure-stats div { display: flex; flex-direction: column; }
.figure-stats dt { font-size: 0.75rem; color: var(--muted); }
.figure-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
figure.map:has(> header.figure-head) .legend ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 2px var(--s2); }

/* Chips de amenazas en los filtros (RISKBO-022): la casilla sigue siendo
   la del formulario, oculta a la vista pero accesible; el chip marcado se
   rellena. */
form.period fieldset.chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; }
form.period fieldset.chips label { position: relative; cursor: pointer; font-weight: 400; color: var(--text); }
form.period fieldset.chips input, form.period fieldset.segmented input {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
form.period fieldset.chips label:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); font-weight: 600; }
form.period fieldset.chips label:has(input:focus-visible),
form.period fieldset.segmented label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
form.period fieldset.chips small { color: var(--muted); font-weight: 400; }

/* Selector segmentado (RISKBO-022): radios como botones contiguos. */
form.period fieldset.segmented { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
form.period fieldset.segmented legend { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 4px; }
form.period fieldset.segmented > div, form.period fieldset.segmented { flex-direction: row; flex-wrap: wrap; }
form.period fieldset.segmented label { position: relative; cursor: pointer; }
form.period fieldset.segmented label span {
    display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font-size: 0.9375rem; font-weight: 400; margin-left: -1px;
}
form.period fieldset.segmented label:first-of-type span { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
form.period fieldset.segmented label:last-of-type span { border-radius: 0 var(--radius) var(--radius) 0; }
form.period fieldset.segmented label:has(input:checked) span { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
form.period fieldset.segmented label span small { font-size: 0.75rem; font-weight: 400; color: inherit; opacity: 0.85; margin-left: 0.35em; }
form.period fieldset.segmented[aria-invalid="true"] label span { border-color: var(--danger); }

/* Rótulos de las bandas de ENSO (RISKBO-022). */
figure.trend g.enso text.band-label { font-size: 10px; font-weight: 600; fill: var(--muted); }

/* Calendario (RISKBO-023): insignias, identificación, guion en los meses
   sin eventos y escala de intensidad con los tonos de la tabla. */
.badges { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s1); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--primary-soft);
         color: var(--primary); font-size: 0.8125rem; font-weight: 600; }
figure.calendar .identity { margin: 0 0 var(--s1); color: var(--muted); font-size: 0.875rem; }
figure.calendar tbody th .dot { margin-inline-end: 6px; vertical-align: 0.05em; }
figure.calendar td .none { color: #b8bcc4; }
figure.calendar .scale { --h: 250; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2);
    list-style: none; margin: var(--s1) 0 0; padding: 0; font-size: 0.8125rem; }
figure.calendar .scale li { display: flex; align-items: center; gap: 2px; }
figure.calendar .scale li span { width: 1.4rem; height: 0.9rem; border-radius: 2px; background: var(--fill); }
figure.calendar .scale li span:last-of-type { margin-inline-end: 4px; }
figure.calendar .scale span.c0 { background: #f4f4f4; border: 1px solid var(--border); }

/* Escenario (RISKBO-024): recuadro de la temporada, mapa y resumen lado a
   lado en escritorio, totales, distribución nacional e insignias de nivel. */
article.scenario .season-box {
    background: var(--primary-soft); border-left: 4px solid var(--primary); border-radius: var(--radius);
    padding: var(--s2); margin: var(--s2) 0;
    & p { margin: 0 0 var(--s1); } & p:last-child { margin: 0; color: var(--muted); font-size: 0.875rem; }
    & .badge { background: var(--surface); margin-inline-start: 6px; }
}
article.scenario .scenario-grid { display: grid; gap: var(--s3); align-items: start; margin: var(--s2) 0; }
@media (min-width: 1000px) {
    article.scenario .scenario-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    article.scenario .scenario-grid figure.map.scenario { max-width: none; margin: 0; }
    article.scenario .scenario-grid .scenario-summary { margin: 0; }
}
article.scenario .scenario-summary tfoot th, article.scenario .scenario-summary tfoot td { font-weight: 700; border-top: 2px solid var(--border); }
article.scenario td.total { font-weight: 600; }
figure.map.scenario .distribution { margin: var(--s1) 0 0; font-weight: 600; font-size: 0.8125rem; }
article.scenario .level-badge {
    display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600;
    background: var(--fill); color: #fff;
}
article.scenario .level-badge.c2 { color: var(--text); }
article.scenario .note.technical { margin-top: var(--s1); }
article.scenario form.period select[name="desde"], article.scenario form.period select[name="hasta"] { width: auto; min-width: 9rem; }
article.scenario .scenario-table td:last-child { white-space: nowrap; }
article.scenario .scenario-table th[scope="row"], article.scenario .scenario-table td:nth-child(4) { white-space: normal; }

/* El Niño y La Niña (RISKBO-025): aviso con su aclaración y botón,
   recuadro de base, advertencias en columnas, leyenda común, resumen de
   cada mapa y tarjeta final. */
article.enso .notice.current { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); }
article.enso .notice.current p { margin: 0; }
article.enso .notice.current small { color: var(--muted); }
article.enso .notice.current a.button { margin: 0; }
article.enso .base-box { background: var(--primary-soft); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: var(--s2); margin: var(--s2) 0; }
article.enso .base-box h2 { font-size: 1rem; margin: 0 0 var(--s1); }
article.enso .base-box p { margin: 0 0 var(--s1); } article.enso .base-box p:last-child { margin: 0; }
article.enso .warnings ol.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; counter-reset: w; }
article.enso .warnings ol.columns li { margin: 0; padding-top: 28px; position: relative; counter-increment: w; font-size: 0.9rem; }
article.enso .warnings ol.columns li::before { content: counter(w); position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 760px) { article.enso .warnings ol.columns { grid-template-columns: 1fr; } }
.diff-legend { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s2); margin: var(--s2) 0; font-size: 0.8125rem; }
.diff-legend p { margin: 0 0 var(--s1); font-weight: 600; }
.diff-legend p.years { font-weight: 400; color: var(--muted); margin: var(--s1) 0 0; }
.diff-legend ul { display: flex; flex-wrap: wrap; gap: 4px var(--s2); list-style: none; margin: 0; padding: 0; }
.diff-legend li { display: flex; align-items: center; gap: 6px; }
.diff-legend span { width: 1.4rem; height: 0.9rem; border: 1px solid #8a8a8a; background: var(--fill); }
.diff-legend span.d-none { background: repeating-linear-gradient(45deg, #fff 0 3px, #9a9a9a 3px 4px); }
figure.map.diff .median { margin: 0 0 var(--s1); font-size: 0.875rem; color: var(--muted); }
figure.map.diff .median strong { color: var(--text); }
figure.map.diff .badges { margin: 4px 0; }
a.next-card { display: block; margin: var(--s3) 0; padding: var(--s2) 20px; background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--primary); border-radius: var(--radius); color: var(--text); text-decoration: none; }
a.next-card:hover { border-color: var(--primary); }
a.next-card strong { display: block; color: var(--primary); margin-bottom: 4px; }
a.next-card span { color: var(--muted); font-size: 0.9rem; }
article.enso form.period select { width: auto; min-width: 9rem; }

/* Ficha municipal (RISKBO-026): índice de secciones, resumen en tarjetas,
   puntos de color, insignias de declaratoria y paginación numerada. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
article.municipality nav.section-index { margin: 0 0 var(--s2); }
article.municipality section[id] { scroll-margin-top: var(--s2); }
article.municipality .overview { display: block; }
article.municipality .cards { display: grid; gap: var(--s2); }
article.municipality .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s2); margin: 0; }
article.municipality .card h3 { font-size: 0.8125rem; color: var(--muted); font-weight: 600; margin: 0 0 var(--s1); text-transform: uppercase; letter-spacing: 0.03em; }
article.municipality .card .value { font-size: 2rem; font-weight: 700; margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
article.municipality .card .value small { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
article.municipality .card .detail { margin: 4px 0 0; color: var(--muted); font-size: 0.875rem; }
article.municipality .location-card figure.location { max-width: 12rem; }
article.municipality table .dot { margin-inline-end: 6px; vertical-align: 0.05em; }
article.municipality table.events td .dot { margin-inline-end: 3px; }
.badge.disaster { background: #fde7e5; color: #a3201a; }
.badge.emergency { background: #fff1d6; color: #8a5300; }
article.municipality nav.pager { align-items: center; flex-wrap: wrap; gap: var(--s1); }
article.municipality nav.pager .pages { display: flex; gap: 4px; flex-wrap: wrap; }
article.municipality nav.pager .pages a, article.municipality nav.pager .gap {
    min-width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: var(--radius); text-decoration: none; }
article.municipality nav.pager .pages a { border: 1px solid var(--border); background: var(--surface); }
article.municipality nav.pager .pages a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

/* Búsqueda de municipio (RISKBO-027): buscador grande con ayuda,
   departamentos desplegables numerados y municipios en recuadros. */
article.municipalities form.municipality-search { display: flex; flex-wrap: wrap; align-items: flex-end; }
article.municipalities form.municipality-search label { flex: 1 1 20rem; }
article.municipalities form.municipality-search input[name="nombre"] { width: 100%; height: 46px; font-size: 1.0625rem; }
article.municipalities form.municipality-search > button { height: 46px; }
article.municipalities form.municipality-search .help { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.875rem; }
article.municipalities .total { color: var(--muted); margin: 0 0 var(--s2); }
article.municipalities section.all details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 var(--s1); }
article.municipalities section.all summary { cursor: pointer; padding: 12px var(--s2); font-weight: 600; display: flex; align-items: center; gap: var(--s1); }
article.municipalities section.all summary .badge { margin-inline-start: auto; }
article.municipalities ul.boxes { list-style: none; margin: 0; padding: 0 var(--s2) var(--s2); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s1); }
article.municipalities ul.boxes a { display: block; height: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); font-size: 0.875rem; }
article.municipalities ul.boxes a:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 900px) { article.municipalities ul.boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { article.municipalities ul.boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ingreso (RISKBO-027): tarjeta centrada. */
article.login-card { max-width: 26rem; margin: var(--s4) auto; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--s4) var(--s3); }
article.login-card .site-name { margin: 0; color: var(--primary); font-weight: 700; }
article.login-card .purpose { margin: 2px 0 0; color: var(--muted); font-size: 0.875rem; }
article.login-card h1 { margin: 4px 0 var(--s3); font-size: 1.5rem; }
article.login-card form { display: grid; gap: var(--s2); }
article.login-card label { display: grid; gap: 4px; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
article.login-card input { font: inherit; height: 42px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
article.login-card input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
article.login-card button { width: 100%; height: 42px; font: inherit; font-weight: 600; background: var(--primary); color: #fff;
    border: 1px solid var(--primary); border-radius: var(--radius); cursor: pointer; }
article.login-card output { color: var(--danger); font-weight: 600; font-size: 0.875rem; }
article.login-card output:empty { display: none; }
article.login-card .access { margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px solid var(--border); color: var(--muted); font-size: 0.875rem; }

/* Ficha (RISKBO-032): cinco tarjetas y columnas de tasa. */
article.municipality .cards { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
article.municipality .card .per-capita { margin-top: var(--s1); }
article.municipality table.hazards td.rate { white-space: nowrap; }
article.municipality table.hazards td.rate small { color: var(--muted); }

/* Mapas por habitante (RISKBO-033): municipios de menos de 2 000 habitantes
   con borde punteado. */
figure.map svg g.small { stroke: #1d1d1f; stroke-width: 1.2; stroke-dasharray: 3 2; }
p.rate-note { margin: 0 0 var(--s2); }

/* Población expuesta (RISKBO-034). */
figure.map.risk .distribution { margin: var(--s1) 0 0; font-weight: 600; font-size: 0.8125rem; }
:is(figure.map.scenario, figure.map.risk) ul.exposure { list-style: none; margin: var(--s1) 0 0; padding: 0; font-size: 0.8125rem; }
:is(figure.map.scenario, figure.map.risk) ul.exposure li { display: block; margin: 0 0 4px; }
:is(figure.map.scenario, figure.map.risk) ul.exposure li span.level { display: inline-block; vertical-align: -0.1rem; margin-inline-end: 4px; }
figure.map.diff .people { margin: 0 0 var(--s1); font-size: 0.875rem; color: var(--muted); }
figure.map.diff .people strong { color: var(--text); }
ul.tiles li.exposed a { color: inherit; text-decoration: none; display: block; }
ul.tiles li.exposed a:hover strong { text-decoration: underline; }

/* Ficha departamental (RISKBO-038): INE frente a VIDECI, clima y ríos. */
figure.compare, figure.climate {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s2) 20px;
    margin: 1rem 0 0;

    & .chart { overflow-x: auto; }
    & svg { display: block; width: 100%; min-width: 40rem; height: auto; font-size: 13px; }
    & line.grid { stroke: #e2e2e2; }
    & text.axis { fill: #555; text-anchor: end; }
    & text.axis.right { text-anchor: start; }
    & text.axis.x { text-anchor: middle; }
    & figcaption {
        border-top: 1px solid var(--border);
        margin-top: var(--s1);
        padding-top: var(--s1);
        font-size: 0.875rem;
        & small { display: block; color: var(--muted); font-size: 0.8125rem; }
    }
    & ul.legend {
        display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; list-style: none; padding: 0; margin: 0 0 0.5rem;
        font-size: 0.85rem;
        & span { display: inline-block; width: 1.2rem; height: 0.8rem; margin-right: 0.35rem; vertical-align: middle; }
    }
}
@media (max-width: 600px) {
    figure.compare, figure.climate { padding: var(--s2) 12px; }
}
figure.compare {
    --ine: oklch(45% 0.12 260);
    --videci: oklch(62% 0.15 45);
    & g.series { fill: none; }
    & g.series polyline { stroke-width: 2.5; stroke-linejoin: round; }
    & g.series circle { fill: #fff; stroke-width: 2; }
    & g.ine { stroke: var(--ine); }
    & g.videci { stroke: var(--videci); }
    & g.videci polyline { stroke-dasharray: 6 4; }
    & li.ine span { background: var(--ine); height: 3px; }
    & li.videci span { background: repeating-linear-gradient(90deg, var(--videci) 0 6px, transparent 6px 10px); height: 3px; }
}
figure.climate {
    --rain: oklch(62% 0.1 240);
    --rain-last: oklch(42% 0.12 250);
    --temp: oklch(58% 0.17 35);
    & rect.normal { fill: var(--rain); }
    & li.normal span { background: var(--rain); }
    & rect.last { fill: var(--rain-last); }
    & li.last span { background: var(--rain-last); }
    & g.t-normal, & g.t-last { fill: none; stroke: var(--temp); }
    & g.t-normal polyline, & g.t-last polyline { stroke-width: 2.5; stroke-linejoin: round; }
    & g.t-last polyline { stroke-dasharray: 6 4; }
    & g.t-normal circle, & g.t-last circle { fill: #fff; stroke-width: 2; }
    & li.t-normal span { background: var(--temp); height: 3px; }
    & li.t-last span { background: repeating-linear-gradient(90deg, var(--temp) 0 6px, transparent 6px 10px); height: 3px; }
    & rect.phase-nino { fill: oklch(60% 0.16 35); }
    & li.phase-nino span { background: oklch(60% 0.16 35); }
    & rect.phase-nina { fill: oklch(55% 0.13 245); }
    & li.phase-nina span { background: oklch(55% 0.13 245); }
    & rect.phase-neutral { fill: #c4c4c4; }
    & li.phase-neutral span { background: #c4c4c4; }
    & line.mean { stroke: #333; stroke-dasharray: 4 3; stroke-width: 1.5; }
    & li.mean span { background: repeating-linear-gradient(90deg, #333 0 4px, transparent 4px 7px); height: 2px; }
}
article.department section.ine, article.department section.climate, article.department section.rivers,
article.department section.municipalities-list {
    margin-top: var(--s3);
    & > h2 { font-size: 1.25rem; margin: 0 0 var(--s1); }
    & h3 { font-size: 1rem; margin: var(--s2) 0 var(--s1); }
    & .table-wrap { overflow-x: auto; }
    & table { border-collapse: collapse; font-size: 0.875rem; width: 100%; background: var(--surface); }
    & th, & td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); text-align: right; }
    & th[scope=row], & thead th:first-child { text-align: left; }
    & details.ine-table { margin-top: var(--s1); }
}
article.department figure.location path.here { fill: #b3261e; stroke: #fff; stroke-width: 2; }
article.department table.municipalities :is(th, td):nth-child(-n+3),
article.department table.rivers :is(th, td):nth-child(-n+2),
article.department table.categories :is(th, td):is(:first-child, :last-child) { text-align: left; }

/* Descarga de figuras (RISKBO-040): botón de cada mapa y diálogo. */
figure.map header.figure-head button.download {
    font: inherit;
    font-size: 0.8125rem;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
}
figure.map header.figure-head button.download:hover { border-color: var(--primary); }

dialog.figure-download {
    width: min(31rem, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);

    &::backdrop { background: rgb(0 0 0 / 0.4); }
    & form { display: flex; flex-direction: column; gap: 12px; max-width: none; }
    & h2 { margin: 0; font-size: 1.15rem; }
    & .which { margin: -8px 0 0; color: var(--muted); }
    & label { font-weight: 600; font-size: 0.875rem; }
    & .presets { display: flex; flex-direction: column; gap: 4px; }
    & .preset-row { display: flex; flex-wrap: wrap; gap: var(--s1); }
    & .preset-row select { flex: 1 1 9rem; min-width: 0; font: inherit; }
    & button { font: inherit; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
    & button.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
    & button:disabled { opacity: 0.5; cursor: default; }
    & fieldset.segmented { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
    & fieldset.segmented legend { font-size: 0.875rem; font-weight: 600; padding: 0; margin-bottom: 4px; }
    & fieldset.segmented label { position: relative; cursor: pointer; }
    & fieldset.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
    & fieldset.segmented label span {
        display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
        border: 1px solid var(--border); margin-left: -1px; font-weight: 400;
    }
    & fieldset.segmented label:first-of-type span { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
    & fieldset.segmented label:last-of-type span { border-radius: 0 var(--radius) var(--radius) 0; }
    & fieldset.segmented label:has(input:checked) span { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
    & fieldset.segmented label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
    & label.width { display: flex; flex-direction: column; gap: 4px; }
    & label.width input { width: 6rem; font: inherit; }
    & label.check { display: flex; align-items: center; gap: var(--s1); font-weight: 400; }
    & .hint { margin: -6px 0 0; font-size: 0.8125rem; color: var(--muted); }
    & .error { margin: 0; color: var(--danger); }
    & footer { display: flex; justify-content: flex-end; gap: var(--s1); margin-top: var(--s1); }
}

/* Riesgo base estacional (RISKBO-044): la escala de riesgo usa un tono fijo
   (--h: 30) con bajo c2, medio c3, alto c4 y muy alto c5; sin dato de
   exposición, la trama (c0). «Sin historia suficiente» lleva borde
   punteado en el mapa y en la leyenda. */
figure.map.risk svg g.nohistory { stroke: #1d1d1f; stroke-width: 1.2; stroke-dasharray: 3 2; }
figure.map.risk .legend span.nohistory { background: transparent; border: 1.5px dashed #1d1d1f; }
article.risk form.period { align-items: flex-end; }
article.risk .risk-matrix { margin: 0; }
article.risk .risk-matrix th, article.risk .risk-matrix td { text-align: center; vertical-align: middle; }
article.risk .risk-matrix th[scope="row"] { text-align: start; }
article.risk .risk-matrix small { display: block; }
article.risk .risk-matrix .level-badge { padding: 1px 8px; white-space: nowrap; }
@media (max-width: 600px) {
    article.risk .risk-matrix th, article.risk .risk-matrix td { padding: 0.3rem 0.25rem; }
    article.risk .risk-matrix .level-badge { font-size: 0.75rem; padding: 1px 6px; }
}
article.risk .risk-matrix small { color: var(--muted); font-weight: 400; }
article.risk .level-badge.c3 { color: #fff; }
article.risk .scenario-grid { grid-template-columns: minmax(0, 1fr); }
article.risk figure.map.risk { margin: 0; }
@media (min-width: 1000px) {
    article.risk .scenario-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
}
article.risk .risk-table td.note { white-space: normal; min-width: 12rem; color: var(--muted); font-size: 0.8125rem; text-align: start; }
article.risk .risk-table td:nth-child(8), article.risk .risk-table td:nth-child(10) { text-align: start; }