/* simce-evidence.css — visuales de la sección de evidencia SIMCE (app/Views/web/include/simce-evidence.php).
   Compartido por /simce y /web/info: vive aparte de promotion-simce.css para que la sección viaje
   completa (markup + estilos) a cualquier landing que la incluya. */

/* ── Evidence visuals (SIMCE cards) ───────────────────────────────────────────
   Palette is computed, not eyeballed. Validated against the card surface (#ffffff)
   with the data-viz validator:
     identity hues #14A085 (accent) + #8754A1 (delta accent) -> lightness band PASS,
     chroma floor PASS, all-pairs CVD PASS (worst deutan dE 35.1), contrast PASS.
     #6B7785 is the de-emphasis neutral: a gray by design, so it sits below the
     categorical chroma floor on purpose and is checked as a mark contrast instead
     (4.56:1 on the white card, 4.29:1 on the #f0faf7 panel the dots sit on). It was
     darkened from #8492A6 until its all-pairs CVD vs the accent cleared the >=12
     target (deutan dE 13.3); the two dot grids are small multiples, so any two
     marks can end up side by side and the adjacent-only check would have hidden it.
   Marks are checked against BOTH surfaces they render on, not just the card: the
   first pick (#8492A6) cleared 3:1 on white but only reached 2.97:1 on the panel.
   The pair this replaced was .bg-success (#4BC6BD) vs .bg-secondary (#1CC7A6),
   which measured deutan dE 10.3 / tritan 2.6, i.e. the same color to most eyes.
   Do not swap a value here without re-running the validator. */
.simce-viz {
    --viz-accent:  #14A085; /* Colegios Umaximo */
    --viz-delta:   #8754A1; /* the points gained beyond the country */
    --viz-neutral: #6B7785; /* Promedio nacional, de-emphasized */
    --viz-empty:   #E3E8EF; /* unfilled dots */
    --viz-guide:   #C3C2B7; /* hairline reference at the national value */
}

/* Bars: one shared scale, zero baseline at the left edge of the track. */
.simce-viz-row + .simce-viz-row {
    margin-top: 1.1rem;
}
.simce-viz-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}
.simce-viz-track {
    position: relative;
    height: 14px; /* thin mark, well under the 24px cap */
}
.simce-viz-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    /* square at the baseline; only the data end is rounded */
    border-radius: 0;
}
.simce-viz-fill--end {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.simce-viz-base {
    left: 0;
    background: var(--viz-accent);
}
.simce-viz-delta {
    right: 0;
    background: var(--viz-delta);
}
.simce-viz-nac {
    left: 0;
    background: var(--viz-neutral);
}
/* Solid hairline (never dashed), extended past the bar so it reads as a reference. */
.simce-viz-guide {
    position: absolute;
    /* Extends well past the bar: inside the 2px fill gap a hairline is invisible,
       so the readable part of the tick is the bit standing on the card surface. */
    top: -9px;
    bottom: -9px;
    width: 1px;
    background: var(--viz-guide);
}
/* Direct label for the delta, centered under the segment it names. A 14px bar
   cannot hold text inside it, so the label rides underneath instead of being
   clipped by its own mark. */
.simce-viz-deltalabel {
    display: inline-block;
    margin-top: 6px;
    text-align: center;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 700;
}
.simce-viz-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 5px;
    background: var(--viz-delta);
}

/* Stat tile: a single delta has no baseline to be proportional to, so it is a
   figure, never a one-bar chart. Proportional figures, system sans. */
.simce-stat-value {
    font-family: 'Nunito', sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.05;
    color: #0B7565; /* text-grade step of the accent hue: 5.6:1 on white */
}

/* Dot matrix (waffle): 10x10, one dot per percentage point. */
.simce-dots-pair {
    display: flex;
    gap: 1.25rem;
}
.simce-dots-cell {
    flex: 1 1 0;
    min-width: 0;
}
.simce-dots-figure {
    font-family: 'Nunito', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}
.simce-dots-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px; /* the surface gap doing the separating */
    margin: 0.4rem 0 0.35rem;
}
.simce-dots-grid i {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--viz-empty);
}
.simce-dots-grid i.on {
    background: var(--viz-neutral);
}
.simce-dots--umx .simce-dots-grid i.on {
    background: var(--viz-accent);
}

/* ── Texto accesible dentro de la sección ─────────────────────────────────────
   Decisión del dueño (2026-09-08): corregir el contraste acotado a esta sección.
   El tema deja el texto base del sitio en #8492A6 (3,16:1 sobre blanco, `body` en
   purpose.min.css) y el verde de marca #1CC7A6 en 2,15:1. Mientras la sección vivía solo en
   /simce eso quedaba tapado: sobre `bg-icons-soft` axe no puede determinar el fondo y marca
   los nodos como "incomplete", que no es aprobado sino no medible. Sobre el blanco de
   /web/info se vuelven 20 fallas serias medibles.
   Verde de texto #0B7565 (5,60:1 sobre blanco, 5,26:1 sobre el panel #f0faf7): es el mismo
   que ya usa la cifra del stat tile, así que no entra un color nuevo a la paleta. Neutro
   #63707E (5,06:1 / 4,75:1). Medido con axe: 0 fallas de contraste dentro de la sección en
   ambas landings.
   El arreglo de raíz es el token del tema y el dueño lo descartó de plano: no reabrirlo desde
   aquí. Fuera de esta sección las landings siguen con el texto del tema.
   `.text-muted` del tema viene declarado con !important, así que esta regla necesita el suyo
   para ganarle; las otras dos ganan por especificidad. */
.simce-evidence,
.simce-evidence .card-body {
    color: #63707E;
}
.simce-evidence .text-muted {
    color: #63707E !important;
}
.simce-evidence .text-color-secondary {
    color: #0B7565;
}