/* ========================================
   Calculadora — overrides on top of the existing
   styles.css / resultados.css to pull the page
   into the dark-mode redesign.
   This file is loaded AFTER styles.css and resultados.css
   so its rules win without resorting to !important.
   ======================================== */

/* Hero spacing: title hugs the navbar, image floats slightly higher
   than the title (matches Figma). */
.calculadora-hero {
    margin-bottom: var(--space-16);
    padding-top: 0;
    align-items: start;
}

.calculadora-hero .page-section__copy {
    padding-top: 32px;
}

.calculadora-hero .page-section__art {
    padding-top: 8px;
}

@media (max-width: 1024px) {
    .calculadora-hero .page-section__copy,
    .calculadora-hero .page-section__art {
        padding-top: var(--space-4);
    }
}

.calculadora-hero__title {
    font-size: 64px;
    line-height: 1.05;
}

@media (max-width: 1024px) {
    .calculadora-hero__title {
        font-size: 48px;
    }
}

.calculadora-hero .page-carousel__dots {
    display: none;
}

/* La animación en cascada de la imagen es solo del home; en la
   calculadora reusamos el mismo esquema pero queremos verlo en su
   estado final desde el inicio. Forzar --lp: 1 (más específico que
   la regla base) bypasea el cálculo basado en --p sin tocar el JS. */
.calculadora-hero img.segunda-animada__layer,
.calculadora-hero .segunda-animada__card {
    --lp: 1;
}

/* ========================================
   Map section + header
   ======================================== */

/* Map section: header and map are now two separate cards
   with their own gradient border, sitting one above the other
   with a small gap between them (matches Figma). */
.map-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 var(--space-8);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Map header: no longer a single bordered card. The description sits
   in its own pill on the left, the upload button in its own pill on
   the right, and the h2 title is hidden (Figma reference). */
.map-header {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    position: relative;
}

.map-header > h2.map-title {
    display: none;
}

.map-header > p.map-title {
    flex: 1;
    margin: 0;
    background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        var(--gradient-brand) border-box;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
}

.map-header .upload-polygon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.map-section #map {
    border: 0;
    border-radius: var(--radius-decoration);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Upload button: gradient border + transparent fill so the
   text reads on the dark background. Only the leading icon
   keeps the brand colour. */
.upload-polygon-btn {
    background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        var(--gradient-brand) border-box;
    color: var(--color-text);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    padding: var(--space-3) var(--space-6);
    box-shadow: none;
}

.upload-polygon-btn:hover,
.upload-polygon-btn:active {
    color: var(--color-text);
    box-shadow: 0 4px 14px rgba(0, 153, 184, 0.25);
    transform: translateY(-1px);
}

/* Leading icon: hide the folder emoji and paint static/img/upload.png
   in its place. */
.upload-polygon-btn .upload-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
    background: url('../img/upload.png') no-repeat center / contain;
}

.cancel-drawing-btn {
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-danger);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    box-shadow: none;
}

.cancel-drawing-btn:hover,
.cancel-drawing-btn:active {
    background: rgba(231, 76, 60, 0.15);
    color: var(--color-text);
}

/* Zoom controls — overlay the top-right corner of the map.
   Anchored from .map-header (which is position: relative) so we can
   land them past the header + section gap inside the map area.
   Each element (− / ZOOM / +) is its own glassmorphic pill. */
.map-zoom-controls {
    position: absolute;
    top: calc(100% + var(--space-8));
    right: var(--space-4);
    z-index: 1000;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Visual order: − (zoom-out) | ZOOM | + (zoom-in)
   The HTML order is: label, +, − — so we reshuffle with flex order. */
#zoom-out-btn { order: 1; }
.zoom-label   { order: 2; }
#zoom-in-btn  { order: 3; }

/* Glassmorphism: translucent fill, blurred backdrop, subtle border. */
.zoom-label {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.55);
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    width: auto;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zoom-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.55);
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--color-text);
    font-size: 18px;
    font-weight: var(--weight-bold);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}

.zoom-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-left-color: rgba(255, 255, 255, 0.85);
    border-right-color: rgba(255, 255, 255, 0.85);
}

/* ========================================
   Glass effect — same as zoom controls — applied to:
   - Capas de cobertura legend panel
   - Base layer (Satélite) toggle
   - Shape mode (Polígono) toggle
   Translucent fill, blurred backdrop, no top/bottom border,
   white side borders, light text for dark mode.
   ======================================== */

.legend-container,
.base-layer-control,
.shape-mode-control {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.55);
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
}

/* Per-Figma corner radius: panel is more squared, the small toggles
   are nearly pill-shaped. */
.legend-container {
    border-radius: 32px;
}

/* Header: drop the trailing 🗺️ emoji and center the title. The
   chevron stays on the left as the expand/collapse affordance. */
.legend-container .legend-header-icon {
    display: none;
}

.legend-container .legend-header-bar {
    justify-content: center;
    gap: var(--space-2);
}

.legend-container .legend-header-title {
    flex: 0 0 auto;
    text-align: center;
    order: 2;
}

.legend-container .legend-minimize-icon {
    order: 1;
    margin: 0;
}

.base-layer-control,
.shape-mode-control {
    border-radius: 47px;
}

/* When the control expands (on hover), the wrapper grows tall — drop
   the radius so it doesn't render as a giant oval. The collapsed pill
   keeps the 47px above. */
.base-layer-control:hover,
.shape-mode-control:hover {
    border-radius: 24px;
}

/* Replace the emoji icon in the Satélite pill with the project's
   own glyph (static/img). The original emoji text is hidden with
   font-size:0 and a background image is drawn in the same box. */
.base-layer-collapsed .base-layer-icon {
    font-size: 0;
    line-height: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('../img/satelite.png') no-repeat center / contain;
    vertical-align: middle;
}

/* Inside the legend, override text colors so they remain readable
   and uppercase all visible labels. */
.legend-header-title,
.legend-minimize-icon,
.legend-label,
.legend-base-layer-item label,
.legend-layer-header,
.base-layer-current,
.base-layer-header,
.base-layer-option label,
.shape-mode-current,
.shape-mode-header,
.shape-mode-option label {
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
}

.legend-header-bar:hover,
.base-layer-option:hover,
.shape-mode-option:hover,
.legend-base-layer-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* Internal dividers stay subtle on the dark background */
.legend-container.legend-expanded .legend-header-bar,
.base-layer-control:hover .base-layer-collapsed,
.base-layer-expanded {
    border-color: rgba(255, 255, 255, 0.12);
}

/* Opción seleccionada de "Modo de Dibujo": el panel es translúcido
   sobre el mapa, así que un color sólido se pierde según la zona
   (azul invisible sobre el mar, verde sobre la tierra). Pintamos el
   texto en verde marca + halo oscuro alrededor de los glifos para
   garantizar legibilidad sobre cualquier fondo del mapa. Anula el
   #007bff de styles.css:1402. */
.shape-mode-option input[type="radio"]:checked + label {
    color: var(--color-verde-principal);
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.95),
        0 0 4px rgba(0, 0, 0, 0.6);
}

/* ========================================
   MapBiomas layer toggle — the layer label itself acts as the
   on/off button.
     - Layer ON (checked): transparent fill + gradient ring + white text
     - Layer OFF (unchecked): solid brand gradient fill + dark text

   The legacy iOS-style switch (.overlay-visibility-toggle) is hidden
   visually but kept clickable: its <label> wrapper is stretched over
   the entire header so a click anywhere on the pill toggles the
   underlying checkbox. CSS :has() is used to swap the visual state
   based on the checkbox.
   ======================================== */

.legend-layer-item {
    padding: var(--space-2) 0;
}

.legend-layer-header {
    position: relative;
    display: block;
    padding: 0;
}

.legend-layer-header .legend-layer-label {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.5px;
    text-transform: none;
    pointer-events: none;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

/* Gradient border on the transparent (default) state. A standard
   "padding-box / border-box" two-layer trick won't work here because
   the panel behind is translucent — the inner padding-box layer would
   need an opaque fill to hide the gradient, which would no longer be
   transparent. Use the mask-composite trick instead: a pseudo-element
   filled with the gradient is masked to keep only the 2px ring. */
.legend-layer-header .legend-layer-label::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient-brand);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* When the layer is OFF (legends hidden) the pill fills with the
   brand gradient and switches to dark text. While the legends are
   visible the pill stays transparent with white text — only the
   gradient ring (::before) shows. */
.legend-layer-header:has(.visibility-checkbox:not(:checked)) .legend-layer-label {
    background: var(--gradient-brand);
    color: var(--color-text-on-light);
}

.legend-layer-header:has(.visibility-checkbox:not(:checked)) .legend-layer-label::before {
    display: none;
}

/* Hover affordance: while the pill is in its default transparent
   state (layer ON), fade in a slight translucent fill so it visibly
   reacts — mirroring the hover behaviour of the "Capas de cobertura"
   header bar. The unchecked gradient state already has its own strong
   colour, so we leave it alone. */
.legend-layer-header:has(.visibility-checkbox:checked):hover .legend-layer-label {
    background: rgba(255, 255, 255, 0.1);
}

/* Hide the iOS toggle switch visually but stretch its <label> wrapper
   over the entire header so the whole pill stays clickable. */
.legend-layer-header .overlay-visibility-toggle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.legend-layer-header .overlay-visibility-toggle .toggle-slider,
.legend-layer-header .overlay-visibility-toggle .toggle-slider::before {
    display: none;
}

.legend-layer-header .overlay-visibility-toggle input.visibility-checkbox {
    width: 100%;
    height: 100%;
}

/* ========================================
   Transparency slider — minimal white track + white circle thumb.
   The track gradient is set inline by mapController.js, so it has
   to be overridden with !important.
   ======================================== */

.legend-opacity {
    background: transparent;
    border-radius: 0;
    padding: var(--space-2) 0 0;
    margin: 0;
}

.legend-opacity input[type="range"] {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.45) !important;
    border-radius: 0 !important;
    margin: var(--space-2) 0;
    padding: 0;
    border: 0;
    box-sizing: content-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}

/* Force the WebKit track to a known 2px height so the thumb's
   margin-top math (below) actually lines up — without this, browsers
   fall back to a default ~5px track and the thumb appears too high. */
.legend-opacity input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    background: transparent;
    border: 0;
}

.legend-opacity input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 0;
    box-shadow: none;
    /* Centers 12px thumb on the 2px track: -((12 - 2) / 2) = -5px. */
    margin-top: -5px;
    cursor: pointer;
    transition:
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.legend-opacity input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    transition:
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

/* Hover: brighten the track and grow the thumb with a soft glow so
   the slider clearly reacts. Webkit and Firefox need separate rules
   because the pseudo-elements aren't aliased. */
.legend-opacity input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.25);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15);
}

.legend-opacity input[type="range"]:hover::-moz-range-thumb {
    transform: scale(1.25);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15);
}

.legend-opacity input[type="range"]::-moz-range-track {
    background: rgba(255, 255, 255, 0.45);
    height: 2px;
    border-radius: 0;
}

.legend-opacity input[type="range"]::-moz-range-progress {
    background: rgba(255, 255, 255, 0.45);
    height: 2px;
    border-radius: 0;
}

.legend-opacity label {
    color: var(--color-text);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-top: var(--space-2);
}

/* ========================================
   Results: dual container + per-model blocks
   ======================================== */

.container-resultados-dual {
    margin-top: var(--space-8);
}

/* Unified pill wrapping every KPI (works with 2 or 4 visible cards).
   JS toggles `.totales-mixtos-card--hidden` on cards that don't apply,
   so the divider rule uses :not() to only place a separator between
   visible neighbors. */
.totales-mixtos-container {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) 0;
    gap: 0;
    margin-top: var(--space-4);
}

.totales-mixtos-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 var(--space-8);
}

/* Pin values to the bottom so they share a baseline across cards even
   when labels wrap to a different number of lines. */
.totales-mixtos-card .metric-value {
    margin-top: auto;
}

.totales-mixtos-card:not(.totales-mixtos-card--hidden)
    + .totales-mixtos-card:not(.totales-mixtos-card--hidden) {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.model-results-label {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    border-bottom: 0;
    padding-left: 0;
    margin-left: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    position: relative;
    padding-bottom: var(--space-3);
}

.model-results-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--decoration-line-width);
    height: var(--decoration-line-height);
    background: var(--gradient-brand-horizontal);
    border-radius: 2px;
}

/* Sidebar card stays in the dark "elevated" surface; the graph card
   below switches to white per Figma. */
/* Stretch chain: sidebar → #resultados-numericos → .resultados-card.
   The legacy markup wraps the card in a div that defaults to its
   content height, so without these overrides the visible card ends
   short of the row's stretched height and the bottom doesn't align
   with the chart card next to it. */
#resultados-numericos,
#resultados-numericos-humedales {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.resultados-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    flex: 1;
    min-height: 0;
}

.card-title {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    text-transform: none;
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
}

.card-description {
    color: var(--color-text-muted);
    font-size: var(--text-small);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

/* Numeric metric cards: 2-column grid laid out as
       [icon ] [label]
       [     ] [value]
   Icon is in row 1 next to the label; value sits below the label
   so its left edge aligns with it (matches Figma). The icon glyph
   itself comes from the *--leaf / *--pin / *--chart / *--forest
   modifier classes added by the Django template. */
.metric-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: var(--space-2) 0;
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-2);
    row-gap: 4px;
    align-items: center;
    min-height: 0;
}

.metric-card::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.metric-card--leaf::before   { background-image: url('../img/panel_grafico_calculadora/Capa_1.png'); }
.metric-card--pin::before    { background-image: url('../img/panel_grafico_calculadora/Vector.png'); }
.metric-card--chart::before  { background-image: url('../img/panel_grafico_calculadora/Assessment.png'); }
.metric-card--forest::before { background-image: url('../img/panel_grafico_calculadora/1ip2H8.tif.png'); }

.metric-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: 1.25;
}

.metric-value {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 20px;
    line-height: 1.1;
    /* Safety net for absurdly long numbers. */
    overflow-wrap: anywhere;
}

.info-tooltip {
    color: var(--color-brand);
}

.info-tooltip:hover {
    color: var(--color-brand-hover);
}

/* Downloads pill: full-width horizontal row sitting under the
   sidebar + chart. Title on the left, download buttons on the right. */
.descargas-card {
    margin-top: var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) var(--space-12);
    display: flex;
    align-items: center;
    gap: var(--space-24);
    flex-wrap: wrap;
}

.descargas-card .card-title {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

.descargas-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Each link is a gradient-bordered pill with the download icon inside.
   The legacy FontAwesome <i> is hidden and replaced by a ::before
   bubble that paints static/img/download.png. */
.descarga-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        var(--gradient-brand) border-box;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    text-decoration: none;
    transition:
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.descarga-item:hover {
    color: var(--color-text);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 153, 184, 0.25);
}

.descarga-item i {
    display: none;
}

.descarga-item::before {
    content: "";
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: url('../img/download.png') no-repeat center / contain;
}

/* Tablet/mobile: el pill horizontal con gap de 96px entre título
   y botones queda enorme cuando wrapea a 2 líneas verticales (los
   96px se vuelven aire vertical). Achicamos gap y padding y
   centramos el título; mantenemos el border-radius pill. */
@media (max-width: 1024px) {
    .descargas-card {
        gap: var(--space-4);
        padding: var(--space-4) var(--space-6);
        justify-content: center;
    }

    .descargas-card .card-title {
        text-align: center;
    }
}

/* Graph card: white surface so the Highcharts plot reads clearly. */
.graph-card {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    color: var(--color-text-on-light);
}

.graph-title {
    color: var(--color-text-on-light);
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
}

.graph-container {
    background: #ffffff;
    border: 0;
    border-radius: var(--radius-card);
    /* Fill the remaining height of the graph-card so the bottom of
       the chart aligns with the bottom of the sidebar's resultados
       card (both share the row's stretched height). */
    flex: 1;
    min-height: 0;
}

.graph-note {
    color: #6a6e72;
    font-size: var(--text-small);
}

.legend-pill {
    background: #f4f5f7;
    color: var(--color-text-on-light);
}

.legend-pill:hover {
    background: #e8eaed;
}

.legend-pill span:not(.legend-dot) {
    color: var(--color-text-on-light);
}

/* Spinner overlays — both the initial full-page loader and the
   per-results loader share the same dark-mode look: gray backdrop,
   elevated card, brand-green spinner, light text.
   The results overlay was originally absolutely positioned next to
   the results section, but with the new hero above the map it ends
   up anchored at the top of the page. Switching it to fixed makes
   it behave like the full-page loader and cover the viewport. */
.spinner-overlay,
.spinner-overlay-results {
    background: rgba(50, 50, 50, 0.85);
    border-radius: 0;
}

.spinner-overlay-results {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}

/* Delayed-query warning: the legacy yellow box is illegible on the
   dark backdrop because we already paint the spinner-text white.
   Restyle as a muted card matching the platform. */
.spinner-overlay .spinner-warning,
.spinner-overlay-results .spinner-warning {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-card);
    animation: none;
}

.spinner-overlay .spinner-container,
.spinner-overlay-results .spinner-container {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-decoration);
}

.spinner-overlay .spinner-text,
.spinner-overlay-results .spinner-text {
    color: var(--color-text);
}

.spinner-overlay .spinner,
.spinner-overlay-results .spinner {
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: var(--color-verde-principal);
}

/* Error banner from the humedales model — neutralised to match the
   rest of the platform: gray surface, white text. */
.model-error-message {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 24px;
}