/*
 * Hoja de estilos del panel de actividad.
 *
 * Mobile primero: los estilos de arriba son para un teléfono de 320 px y las dos
 * únicas media queries son de escritorio. Nada de framework ni de CDN: se sirve
 * desde el mismo origen (la CSP no permite otra cosa) y no hay paso de build.
 *
 * Números: `tabular-nums` en todo lo que sea importe o cuenta, para que las
 * columnas no bailen cuando cambia un dígito.
 */

:root {
    color-scheme: light dark;

    --fondo: #f6f7f9;
    --panel: #ffffff;
    --panel-alt: #f0f2f5;
    --borde: #d9dde3;
    --texto: #14171c;
    --tenue: #5c6572;
    --acento: #3b5bdb;
    --ok: #1f7a4d;
    --alerta: #a3341f;
    --radio: 10px;
    --sombra: 0 1px 2px rgb(0 0 0 / 6%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #14171c;
        --panel: #1b1f26;
        --panel-alt: #222833;
        --borde: #313947;
        --texto: #eef1f5;
        --tenue: #9aa4b2;
        --acento: #8fa7ff;
        --ok: #66d19e;
        --alerta: #ff9b8a;
        --sombra: none;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        roboto,
        sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1,
h2 {
    margin: 0;
    line-height: 1.25;
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.35rem, 1.2rem + 1vw, 1.85rem);
}

h2 {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
}

/* Solo para lectores de pantalla, hasta que recibe foco. */
.saltar {
    position: absolute;
    left: -9999px;
}

.saltar:focus {
    left: 0.5rem;
    top: 0.5rem;
    z-index: 10;
    padding: 0.6rem 0.9rem;
    background: var(--panel);
    border: 2px solid var(--acento);
    border-radius: var(--radio);
}

/* La cabecera (`.cabecera*`, el chip de estado y su comportamiento) vive en
   `css/cabecera.css`, que se carga despues de esta hoja: es la pieza que mas
   cambia y no queremos que su crecimiento arrastre a la hoja entera. Aca quedan
   los botones (`.boton`) y el foco, que los usa tambien el login. */

.boton {
    min-height: 2.5rem; /* objetivo táctil cómodo */
    padding: 0 1rem;
    background: var(--acento);
    color: #fff;
    border: 0;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.boton[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.boton:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
}

.contenido {
    display: grid;
    gap: 1.25rem;
    max-width: 78rem;
    margin: 0 auto;
    padding: 1rem;
}

.seccion {
    display: grid;
    gap: 0.6rem;
}

.seccion__nota {
    margin: 0;
    color: var(--tenue);
    font-size: 0.85rem;
}

/* La cabecera de una sección: el título a la izquierda y su control a la derecha (el rango
   del período, el orden de una lista). Vivía en `css/graficas/base.css` y se mudó acá: es
   layout de página —lo usa también la página Equipos, que no tiene gráficas—. */
.seccion__cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
}

/* El control de rango: la etiqueta y el desplegable. El desplegable en sí vive en
   `css/selector.css`, que es genérico. */
.rango {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--tenue);
    font-size: 0.85rem;
}

.rango__etiqueta {
    font-weight: 600;
}

/* En celular el rango ocupa el ancho: el desplegable queda alineado con el campo y no se sale
   de la pantalla (la etiqueta y el selector en la misma fila, el selector flexible). */
@media (width < 60rem) {
    .rango {
        width: 100%;
        justify-content: space-between;
    }

    .rango .selector {
        flex: 1 1 auto;
    }

    .rango .selector__boton {
        width: 100%;
    }
}

/* Tarjetas de totales: se acomodan solas, sin media queries, y nunca se hacen
   más angostas que su contenido mínimo. */
.tarjetas {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.tarjeta {
    padding: 0.8rem 0.9rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.tarjeta__etiqueta {
    margin: 0;
    color: var(--tenue);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tarjeta__valor {
    margin: 0.25rem 0 0;
    font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

/* -----------------------------------------------------------------------
   El protagonista: «Por pagar».

   Medido el 2026-10-15 en el navegador: las seis tarjetas eran del mismo
   tamaño y «Por pagar» era la cuarta, así que el número sobre el que se actúa
   competía con «Cuentas verificadas». La jerarquía visual (posición + tamaño,
   *visual emphasis* de Few) se resuelve haciendo que ese número sea
   inequívocamente el primero que se ve: más grande, con su borde, y ocupando
   el ancho completo de la fila en vez de una sexta parte.

   El color lo pone la tarjeta, no la regla: `.tarjeta--alerta` y `--ok` ya
   existen y el que se pinta sigue siendo el que corresponde al dato. Acá solo
   se define la escala, no el color de «cuánto hay que pagar».
   ----------------------------------------------------------------------- */
.tarjeta--protagonista {
    grid-column: span 2;
    padding: 1rem 1.1rem;
    border-width: 2px;
    border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
    background: color-mix(in srgb, var(--acento) 5%, var(--panel));
}

.tarjeta--protagonista .tarjeta__valor {
    /* Por debajo del `clamp` de las otras para que no crezca sin límite en
       pantallas anchas: el `2.5rem` es un tope, no un piso. */
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
    line-height: 1.05;
}

@media (max-width: 47.99rem) {
    .tarjeta--protagonista {
        grid-column: span 1;
    }
}

.tarjeta--ok .tarjeta__valor {
    color: var(--ok);
}

.tarjeta--alerta .tarjeta__valor {
    color: var(--alerta);
}

/* `.lista`, `.fila`, `.fila__*` y `.barra` se fueron con la lista «Por equipo»
   (ver el comentario en `js/render.js`). Verificado el 2026-10-15: ninguna de esas
   clases aparece en el HTML ni en el JS, así que también se borró su
   `:focus-visible` de arriba. */

.cargando {
    margin: 0;
    padding: 0.7rem 0;
    color: var(--tenue);
    font-size: 0.9rem;
}

.aviso {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radio);
    font-size: 0.92rem;
}

.aviso--error {
    background: color-mix(in srgb, var(--alerta) 12%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--alerta) 45%, var(--borde));
    color: var(--texto);
}

.pie {
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 1rem 1.5rem;
    color: var(--tenue);
    font-size: 0.8rem;
}

/* A partir de tablet ancha, equipos y días conviven en dos columnas. */
@media (min-width: 48rem) {
    .contenido {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .contenido > .seccion:first-of-type,
    .aviso {
        grid-column: 1 / -1;
    }

    /* El Pareto («Dónde está el dinero») ocupa las dos columnas: es la gráfica que
       responde la pregunta del tablero y la que más barras trae. A media página
       las barras quedaban cortas y el escalón del acumulado, apretado. */
    .seccion--ancha {
        grid-column: 1 / -1;
    }

    /* **El detalle también, y sin esto no sirve de nada su rejilla de a dos.**
       `.contenido` es una rejilla de dos columnas y el detalle es un hijo suyo, así
       que sin esta regla ocupa **una** mitad de la página: las dos columnas de
       adentro repartían 289 px cada una (medido el 2026-10-15 con
       `scripts/medir-detalle.mjs`), o sea la mitad del ancho de las tarjetas del
       resumen y un montón de pantalla vacía al lado. Con esto el detalle mide el
       ancho completo y sus columnas son las mismas que las del resumen. */
    .detalle {
        grid-column: 1 / -1;
    }
}

/* -----------------------------------------------------------------------
   El detalle.

   Un botón, no un `details`: el panel ya se sirve con el script diferido y el
   `<details>` nativo se comporta distinto entre navegadores al ocultar el
   contenido. Con un `button` + `aria-expanded` el estado es explícito y
   accesible, y el CSS no depende de cómo el navegador pinte el resumen.

   La grilla del detalle es propia y **no** es la de dos columnas del resumen:
   el resumen tiene que leerse de a pares (una pregunta, una gráfica) y el
   detalle es un bloque de apoyo. Acá el ancho completo le sirve mejor a las
   gráficas de19 categorías que antes se apiñaban.
   ----------------------------------------------------------------------- */
/* -----------------------------------------------------------------------
   El detalle se despliega.

   `hidden` es `display: none` y **no se puede animar**, así que el alto va por la
   rejilla `0fr → 1fr`: es interpolable y no hace falta **conocer el alto** —que es
   justo lo que no se sabe, porque depende de cuántas gráficas traigan datos—. El
   contenido lleva `overflow: hidden` y `min-height: 0` para poder encogerse a cero;
   sin el `min-height` el ítem no baja de su contenido y el detalle nunca cierra.

   Ocupa las dos columnas de `.contenido` (ver la media query de escritorio): el
   detalle tiene su propia rejilla adentro, así que partir la página dos veces era
   dejarle la mitad del ancho.
   ----------------------------------------------------------------------- */
.detalle {
    display: grid;
    /* El botón (auto) y el contenido (0fr cerrado / 1fr abierto). */
    grid-template-rows: auto 0fr;
    margin-top: 0.5rem;
    transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.detalle.es-abierto {
    grid-template-rows: auto 1fr;
}

.detalle__boton {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--panel);
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.detalle__boton:hover {
    border-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 6%, var(--panel));
}

.detalle__boton:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
}

.detalle__titulo {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--acento);
}

/* El indicador: un `+` que rota a `×` cuando está abierto. Se hace con dos
   pseudoelementos y una rotación, así que respects `prefers-reduced-motion`
   con el bloque de más abajo. */
.detalle__boton::after {
    content: '+';
    margin-left: auto;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--tenue);
    transition: transform 0.15s ease;
}

.detalle__boton[aria-expanded='true']::after {
    content: '−';
}

.detalle__pista {
    color: var(--tenue);
    font-size: 0.85rem;
}

.detalle__contenido {
    display: grid;
    gap: 1.75rem;
    /* Para poder encogerse a cero en la fila `0fr` (ver el comentario de `.detalle`). */
    overflow: hidden;
    min-height: 0;
    /* El contenido entra con un fundido corto que arranca cuando el alto ya avanzó,
       así no se ve el texto pegado al borde mientras se abre. */
    opacity: 0;
    transition: opacity 200ms linear 60ms;
}

.detalle.es-abierto .detalle__contenido {
    opacity: 1;
}

/* El aire entre el botón y el contenido va en el **primer bloque**, no en un margen
   del contenido: el margen de un ítem de rejilla queda fuera de su caja y el
   `overflow: hidden` no lo recorta, así que el detalle cerrado dejaría el hueco. */
.detalle__contenido > :first-child {
    margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Un tema por bloque, y las gráficas de a dos.

   Por qué: con las seis tarjetas en una sola columna, el detalle era una lista
   larga —una gráfica por fila— donde ninguna se comparaba con la de al lado, que
   es justo para lo que están agrupadas. Medido el 2026-10-15 con el arnés
   (`scripts/medir-detalle.mjs`): las parejas comparten fila a partir de 60rem y en
   celular todo vuelve a una columna (el mismo corte que usa `.contenido`).
   --------------------------------------------------------------------------- */
.detalle__grupo {
    display: grid;
    gap: 1.25rem;
}

/* El rótulo del bloque ocupa la fila entera, no una celda: si no, quedaría de
   compañero de la primera gráfica. */
.detalle__grupo-titulo {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 650;
}

/* Cada tarjeta con su alto, sin estirarse al de su vecina: las dos gráficas de un
   bloque no miden lo mismo (una lista de 19 equipos es más alta que un histograma
   de 7 tramos) y estirar la corta dejaría un hueco de panel vacío abajo. */
.detalle__grupo > .seccion {
    align-self: start;
}

@media (width >= 60rem) {
    .detalle__grupo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Con `prefers-reduced-motion` el despliegue no se anima: el estado cambia igual, sin
   movimiento. Es el mismo criterio que el resto del panel (la barra de la cabecera y
   las gráficas también lo respetan). */
@media (prefers-reduced-motion: reduce) {
    .detalle,
    .detalle__contenido {
        transition: none;
    }
}

.detalle__contenido .seccion > h2 {
    font-size: 1rem;
    color: var(--tenue);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* El login tiene su propia hoja (`css/login.css`): su diseño cambió y vive aparte. Acá queda solo
   lo que comparte con el resto del panel. */

.boton--tenue {
    background: transparent;
    color: var(--texto);
    border: 1px solid var(--borde);
}

.salir {
    margin: 0;
}