/* ==========================================================================
   Estadísticas — Pencil design match (node G9lcp)
   Self-contained page-specific stylesheet. Enqueued after cst-home-modern and
   cst-statistics so it always wins the cascade; no other file is edited.
   ========================================================================== */

/* ---------- Shared dashboard shell ---------- */

.cst-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ==========================================================================
   Sec KPIs — eyebrow + 4-up KPI row
   ========================================================================== */

/* Scoped to `.cst-dashboard > .cst-section.cst-stats-kpis` (specificity
   0,3,0) on purpose: home-modern.css's `.cst-dashboard .cst-section:nth-
   child(even) { background: transparent }` is also 0,3,0, and CSS
   specificity beats source order regardless of enqueue order — so these
   selectors must tie it (not just depend on loading later) to reliably win
   the background property on whichever section lands on an even child
   index. Padding only needs to beat statistics.css's 0,2,0 rule, but the
   extra `.cst-section` qualifier is harmless there too. */
.cst-dashboard > .cst-section.cst-stats-kpis {
    background: #FFFFFF;
    padding-block: 64px 40px;
}

.cst-stats-eyebrow {
    margin: 0 0 20px;
    font-family: var(--cst-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* #3E64DE is a UI/graphic-only 4.1:1 on white (see style.css contrast
       note) — for this small (13px) TEXT label we use the darker, project-
       documented AA-compliant blue instead (#2A4BB0, 5.5:1+). */
    color: var(--cst-color-blue-dark, #2A4BB0);
}

.cst-stats-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 24px;
}

.cst-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    background: #FFFFFF;
    border: 1px solid #E3E9F4;
    border-radius: 16px;
    box-shadow: 0 8px 22px -8px rgba(31, 46, 84, 0.07);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* statistics.css draws a 4px colored gradient bar via ::before on this same
   class name — Pencil's KPI cards have no top accent, so neutralize it. */
.cst-kpi-card::before {
    content: none;
}

.cst-kpi-card:hover,
.cst-kpi-card:focus-within {
    box-shadow: 0 14px 28px -10px rgba(31, 46, 84, 0.14);
    transform: translateY(-2px);
}

.cst-kpi-card:focus-visible {
    outline: 3px solid var(--cst-color-blue, #3B82C4);
    outline-offset: 2px;
}

.cst-kpi-card__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #EAF0FB;
    color: var(--cst-color-blue-primary, #3E64DE);
}

.cst-kpi-card__tile svg {
    width: 22px;
    height: 22px;
}

.cst-kpi-card__value {
    display: flex;
    align-items: baseline;
    gap: 0;
    font-family: var(--cst-font-heading);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: var(--cst-color-navy, #1F2E54);
}

.cst-kpi-card__unit {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}

.cst-kpi-card__label {
    display: block;
    font-family: var(--cst-font-body);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cst-color-navy, #1F2E54);
}

.cst-kpi-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: var(--cst-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    width: fit-content;
}

.cst-kpi-card__trend--up {
    background: rgba(46, 125, 50, 0.1);
    color: #2E7D32;
}

.cst-kpi-card__trend--up::before { content: "\2191"; }

.cst-kpi-card__trend--down {
    background: rgba(178, 58, 58, 0.1);
    color: #B23A3A;
}

.cst-kpi-card__trend--down::before { content: "\2193"; }

.cst-kpi-card__source {
    display: block;
    margin-top: auto;
    /* statistics.css sets border-top + padding-top on this same class name
       (a divider line) — Pencil's Src line has neither, it's just the last
       item in the 14px gap stack. Reset both explicitly; non-declaration
       isn't enough to remove an inherited property. */
    padding-top: 0;
    border-top: 0;
    font-family: var(--cst-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    /* Pencil spec'd #8791A8 here, but that's only ~3.2:1 on white — fails the
       mandatory 4.5:1 AA text contrast for 12px text. Swapped for #5B6680,
       the same muted gray Pencil itself uses for chart subtitles elsewhere
       on this frame (5.75:1, passes) — visually consistent, compliant. */
    color: #5B6680;
}

.cst-kpi-card__source a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(91, 102, 128, 0.4);
}

.cst-kpi-card__source a:hover,
.cst-kpi-card__source a:focus-visible {
    color: var(--cst-color-blue-dark, #2A4BB0);
}

/* ==========================================================================
   Sec Charts — tinted band, chart-card grid
   ========================================================================== */

.cst-dashboard > .cst-section.cst-stats-charts {
    background: #F4F7FC;
    border-top: 1px solid #E3E9F4;
    border-bottom: 1px solid #E3E9F4;
    padding-block: 56px;
}

.cst-stats-category-label {
    margin: 0 0 20px;
    font-family: var(--cst-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cst-color-navy, #1F2E54);
}

.cst-stats-category-label:not(:first-child) {
    margin-top: 40px;
}

.cst-stats-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 24px;
}

.cst-chart-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid #E3E9F4;
    border-radius: 16px;
    /* Pencil's Bar Card / Donut Card nodes carry a border only, no shadow —
       neutralize statistics.css's box-shadow + hover lift on this same
       reused class name so it doesn't bleed through. */
    box-shadow: none;
    transform: none;
}

.cst-chart-card:hover {
    box-shadow: none;
    transform: none;
}

.cst-chart-card__header {
    display: flex;
    flex-direction: column;
    /* statistics.css sets align-items:center + justify-content:space-between
       + a 24px top/side inset on this same class name (it was designed for
       a row layout with a title + badge). flex-direction alone doesn't
       reset those — must override explicitly or the title/subtitle render
       centered and inset instead of left-aligned flush to the card edge. */
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    gap: 4px;
}

.cst-chart-card__title {
    margin: 0;
    font-family: var(--cst-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--cst-color-navy, #1F2E54);
}

.cst-chart-card__subtitle {
    margin: 0;
    font-family: var(--cst-font-body);
    font-size: 13.5px;
    font-weight: 400;
    color: #5B6680;
}

.cst-chart-card__canvas-wrap {
    position: relative;
    height: 280px;
    /* statistics.css sets padding: 1rem 1.5rem 1.5rem on this same class —
       override the full shorthand, not just padding-top, or the inherited
       side/bottom insets shrink the canvas inside the card. */
    padding: 12px 0 0;
}

.cst-chart-card__canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.cst-chart-card__fallback {
    display: none;
    text-align: center;
    padding: 3rem 1.5rem;
    color: #5B6680;
    font-size: 0.875rem;
}

.cst-chart-card--no-js .cst-chart-card__canvas-wrap { display: none; }
.cst-chart-card--no-js .cst-chart-card__fallback { display: block; }

/* ==========================================================================
   Sec Sources — "Notas y fuentes" note + CSV download
   ========================================================================== */

.cst-dashboard > .cst-section.cst-stats-sources {
    background: #FFFFFF;
    padding-block: 56px;
}

.cst-stats-sources__title {
    margin: 0 0 20px;
    font-family: var(--cst-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--cst-color-navy, #1F2E54);
}

.cst-stats-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
    background: #F4F7FC;
    border: 1px solid #E3E9F4;
    border-radius: 12px;
}

.cst-stats-note__icon {
    flex: 0 0 auto;
    display: flex;
    color: var(--cst-color-blue-primary, #3E64DE);
}

.cst-stats-note__icon svg { display: block; }

.cst-stats-note__text {
    margin: 0;
    font-family: var(--cst-font-body);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.6;
    color: #5B6680;
}

.cst-stats-download {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    border: 1px solid #CBD6EC;
    border-radius: 9px;
    font-family: var(--cst-font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--cst-color-blue-dark, #2A4BB0);
    background: #FFFFFF;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.cst-stats-download__icon {
    display: flex;
    color: var(--cst-color-blue-dark, #2A4BB0);
}

.cst-stats-download__icon svg { display: block; }

.cst-stats-download:hover,
.cst-stats-download:focus-visible {
    background: #EAF0FB;
    box-shadow: 0 1px 3px rgba(31, 46, 84, 0.1);
}

.cst-stats-download:focus-visible {
    outline: 3px solid var(--cst-color-blue, #3B82C4);
    outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 782px) {
    /* Must match the desktop rules' specificity (0,3,0) — .cst-stats-kpis
       alone (0,1,0) would silently lose the padding-block tie-break to the
       always-applicable `.cst-dashboard > .cst-section.cst-stats-kpis` rule
       above, since @media scoping doesn't affect specificity. */
    .cst-dashboard > .cst-section.cst-stats-kpis,
    .cst-dashboard > .cst-section.cst-stats-charts,
    .cst-dashboard > .cst-section.cst-stats-sources {
        padding-block: 40px;
    }

    .cst-stats-kpi-row {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .cst-stats-chart-grid {
        grid-template-columns: 1fr;
    }

    .cst-kpi-card__value {
        font-size: 34px;
    }
}

@media (max-width: 480px) {
    .cst-stats-kpi-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .cst-kpi-card,
    .cst-stats-download {
        transition: none;
    }
}