/* Componente: Estadisticas — cintillo de tres cifras bajo la portada. */

.stats {
    border-top: 3px solid var(--marca);
    border-bottom: 1px solid var(--borde);
}

/* Dos cifras por fila, y las dos filas del mismo ancho.
   Eran tres arriba y una abajo, y al quitar el presupuesto en normas quedan dos
   y dos: cuadra mejor y las columnas se alinean entre filas. Mas estrecho que
   los 74 rem del resto de la portada para que el bloque quede centrado y no
   estirado de margen a margen.

   ---- Por que 66 y no 52 ----

   Estaba en 52 rem, y la linea de la fuente crecio al añadir la hora del
   barrido: "Fuente: Consulta Amigable MEF · dato del 20/09/26 · actualizado
   21/09/26 08:46:48". Son unos 450 px de linea y cada columna se quedaba en
   396: se partia en dos.

   Se ensanchan LAS DOS filas y no solo la del MEF. Se pensaron del mismo ancho
   para que la pareja de abajo quede centrada bajo las cifras de arriba;
   ensanchar una sola las dejaria descuadradas, que se ve peor que una linea
   partida.

   Ojo con lo que esto NO arregla: entre 700 y 1060 px de pantalla siguen siendo
   dos columnas y ahi la columna no da para la linea entera. Se parte, y es lo
   correcto: antes que encoger la letra de una fuente o sacarla de la caja. */
.stats-interior {
    max-width: 66rem;
    margin: 0 auto;
    padding: 1.75rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2.5rem;
}

/* La fila del MEF: separada por una linea para que se lea como otro bloque y
   no como una continuacion de las tres cifras de arriba.

   Dos columnas y mas estrecha que la fila de arriba, para que la pareja quede
   CENTRADA bajo ella en vez de alineada a un lado. El centrado lo da el
   margin auto que .stats-interior ya tiene. */
.stats-mef {
    /* Aire entre la linea y los rotulos.

       Estaba a cero: la linea separaba los dos bloques, pero los rotulos
       quedaban pegados a ella y se leian como si colgaran del filete en vez de
       encabezar su tarjeta. Un respiro arriba y la linea vuelve a ser una
       separacion en vez de un subrayado.

       1.5rem y no los 1.75 de .stats-interior: ahi arriba el hueco lo pide el
       borde grueso rojo de toda la seccion, y aqui solo un filete fino. */
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
}

.stats-mef[hidden] { display: none; }

.stats-mef .stat[hidden] { display: none; }

/* La fuente de cada cifra, bajo su texto de apoyo. Pequeña y discreta: es la
   procedencia del dato, no el dato.

   Va por cifra y no en un pie comun porque son dos barridos independientes:
   cada tablero tiene su pagina y su hora de extraccion, y juntarlos obligaria a
   leer cual fecha es de cual.

   margin-top: auto la empuja al FONDO de su tarjeta. Sin esto quedaba a
   distinta altura en cada una: el texto de apoyo de la izquierda ocupa dos
   lineas --"Categoria 0068: Reduccion de vulnerabilidad y atencion de
   emergencias por desastres"-- y el de la derecha una, asi que la fuente de un
   lado caia mas abajo que la del otro. Las cajas ya miden lo mismo porque la
   rejilla las estira; lo que faltaba era anclar la ultima linea abajo. */
.stat-fuente {
    /* auto, y UNA sola vez.
       Aqui habia dos margin-top seguidos --el auto que ancla al fondo y un
       0.15rem que ya estaba-- y ganaba el segundo por ir despues, asi que el
       anclaje no hacia nada y las fuentes seguian a distinta altura. El hueco
       respecto al texto de arriba lo pone el gap de .stat, que ya es 0.3rem. */
    margin-top: auto;
    padding-top: 0.15rem;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--tinta-suave);
}

/* Las dos fechas llevan un apunte al pasar el cursor. El subrayado de puntos
   es el que se usa para eso desde siempre: dice "aqui hay una aclaracion" sin
   parecer un enlace, que es lo que se leeria con un subrayado normal. */
.stat-cuando {
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

.stat-fuente a { color: inherit; text-decoration: underline; }
.stat-fuente a:hover,
.stat-fuente a:focus-visible { color: var(--marca); }

/* Entre "ya llegaron los datos" y "ya se ve el cintillo".
 *
 * visibility y no display ni texto vacio: la cifra tiene que seguir ocupando su
 * sitio, o al entrar en pantalla el cintillo daria un salto. Y en blanco o en
 * cero se leeria como un dato malo durante el rato que tarde alguien en bajar.
 *
 * Solo afecta a lo que se anima --las cifras y las marcas--; las etiquetas y
 * los textos de apoyo ya estan escritos y se leen desde el primer momento. */
[data-en-espera] .stat-cifra,
[data-en-espera] .stat-marcas { visibility: hidden; }

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.stat + .stat {
    padding-left: 2.5rem;
    border-left: 1px solid var(--borde);
    margin-left: -2.5rem;   /* el filete se coloca en el centro del gap */
}

.stat-et {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--tinta-suave);
}

/* Dos lineas reservadas para el rotulo de la fila del MEF.

   "EJECUCIÓN DE PRESUPUESTO: DESASTRES Y EMERGENCIAS" ocupa dos y "EJECUCIÓN
   DEL GASTO – FENÓMENO EL NIÑO (FEN)" una, asi que la cifra de una tarjeta
   arrancaba mas abajo que la de la otra y todo lo de debajo quedaba corrido.

   Va solo aqui y no en .stat-et a secas: los rotulos de la fila de arriba son
   cortos --"Normas vigentes", "Departamentos alcanzados"-- y reservarles dos
   lineas les meteria un hueco vacio por nada. */
.stats-mef .stat-et {
    min-height: 2.6em;
}

/* El nombre del tablero: en rojo de marca para que salte a la vista.

   Es lo unico coloreado del rotulo, y a proposito: lo que se busca es que el
   ojo empareje esta cifra con el boton del mapa que lleva ese mismo nombre.
   Un rotulo entero en rojo no emparejaria nada, solo gritaria.

   nowrap para que "(RVE)" no se parta entre dos lineas ni se quede solo en una
   tercera: los dos rotulos tienen reservada la misma altura y una linea de mas
   en uno descuadra la pareja entera. */
.stat-tablero {
    color: var(--marca);
    font-weight: 700;
    white-space: nowrap;
}

.stat-tablero sup {
    font-size: 0.75em;
    line-height: 0;
}

/* La nota del asterisco, cruzando las dos columnas.
   Discreta --es una aclaracion, no un dato-- y separada por arriba para que no
   se lea pegada a la fuente de las cifras. */
.stats-nota {
    grid-column: 1 / -1;
    margin: 0.9rem 0 0;
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--tinta-tenue);
}

.stat-cifra {
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--tinta);
}
/* Las cuatro cifras en rojo de marca.
   Se probo alternando con el ambar para repartir el peso del color, y con dos
   filas de dos quedaba a cuadros: el ojo buscaba un significado en el cambio de
   color que no existe. Todas iguales, lo que distingue una cifra de otra es su
   etiqueta, que es lo que se debe leer. */
.stat .stat-cifra { color: var(--marca); }

.stat-apoyo {
    font-size: var(--t-sm);
    color: var(--tinta-suave);
    line-height: 1.4;
    min-height: 1.25rem;   /* reservado: llega con los datos */
}

/* ---------- marcas de departamentos ---------- */
.stat-marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0.35rem 0 0.15rem;
}
.stat-marcas i {
    display: block;
    width: 6px;
    height: 14px;
    border-radius: 1px;
    background: var(--borde);
    transition: background-color 0.35s ease;
}
.stat-marcas i.stat-marca-on { background: var(--marca); }

@media (max-width: 700px) {
    .stats-interior { grid-template-columns: 1fr; gap: 1.25rem 0; padding: 1.5rem 1rem; }

    /* En movil, una sola columna: con dos no cabe una cifra de nueve digitos
       sin partirse. */

    .stat + .stat {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
        padding-top: 1.25rem;
        border-top: 1px solid var(--borde);
    }

    .stat {
        align-items: center;
        text-align: center;
    }

    .stat-marcas { justify-content: center; }
}