/* CALENDARIO DEL ARCHIVO (encargo archivo-calendario, U4): la rejilla de un mes, las filas de evento por
           día y sesión, y el índice de meses. Solo tokens de tokens.css. La misma estructura HTML sirve a todos
           los anchos: en pantallas estrechas se ocultan las placas y queda el número del día y su cuenta.
           El estado de un evento se dice con TEXTO (`.archivo-evento__estado`); el color solo lo refuerza. */

        .archivo-calendario {
            margin: 0 0 var(--space-xl);
        }

        .archivo-calendario__cabecera {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: var(--space-sm);
            margin: 0 0 var(--space-sm);
        }

        .archivo-calendario__titulo {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            text-align: center;
        }

        .archivo-calendario__flecha {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2xs);
            min-height: 44px;
            min-width: 44px;
            font-size: 14px;
            color: var(--text-secondary);
            text-decoration: none;
        }

        .archivo-calendario__flecha--anterior {
            justify-self: start;
        }

        .archivo-calendario__flecha--siguiente {
            justify-self: end;
        }

        .archivo-calendario__flecha-signo {
            font-size: 24px;
            line-height: 1;
        }

        a.archivo-calendario__flecha:hover {
            color: var(--text-primary);
        }

        a.archivo-calendario__flecha:focus-visible,
        .archivo-rejilla__enlace:focus-visible,
        .archivo-evento__enlace:focus-visible,
        .archivo-logos-atribucion a:focus-visible,
        .archivo-meses__enlace:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .archivo-calendario__aviso,
        .archivo-calendario__vacio {
            margin: 0 0 var(--space-md);
            padding: var(--space-sm) var(--space-md);
            font-size: 14px;
            color: var(--text-secondary);
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
        }

        /* La rejilla. Siete columnas iguales; `table-layout: fixed` evita que una placa ancha las desigualé. */
        .archivo-rejilla {
            width: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: var(--space-2xs);
        }

        .archivo-rejilla__encabezado {
            padding: var(--space-2xs) 0;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            text-align: center;
        }

        .archivo-rejilla__encabezado abbr {
            text-decoration: none;
            cursor: default;
        }

        .archivo-rejilla__celda {
            height: 96px;
            padding: 0;
            vertical-align: top;
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
        }

        .archivo-rejilla__celda--hueco {
            background: transparent;
            border-color: transparent;
        }

        .archivo-rejilla__celda--vacia {
            padding: var(--space-xs);
        }

        .archivo-rejilla__celda--vacia .archivo-rejilla__dia {
            color: var(--text-muted);
        }

        /* Una celda con eventos es UN enlace que la llena entera: objetivo táctil de sobra (WCAG 2.5.8). */
        .archivo-rejilla__celda--eventos {
            border-color: var(--accent-border);
            background: var(--accent-soft);
        }

        .archivo-rejilla__enlace {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
            height: 100%;
            min-height: 24px;
            padding: var(--space-xs);
            box-sizing: border-box;
            color: var(--text-primary);
            text-decoration: none;
            border-radius: var(--radius-sm);
            transition: background var(--duration-fast) var(--ease-standard);
        }

        .archivo-rejilla__enlace:hover {
            background: var(--bg-hover);
        }

        .archivo-rejilla__dia {
            font-size: 14px;
            font-weight: 600;
        }

        /* La cuenta lleva la cifra en número (no solo color): es el canal que sobrevive cuando se ocultan las placas. */
        .archivo-rejilla__cuenta {
            position: absolute;
            top: var(--space-xs);
            right: var(--space-xs);
            min-width: 24px;
            padding: 0 var(--space-2xs);
            box-sizing: border-box;
            font-size: 12px;
            font-weight: 700;
            line-height: 20px;
            text-align: center;
            color: var(--accent-contrast);
            background: var(--accent);
            border-radius: var(--radius-sm);
        }

        .archivo-rejilla__placas {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2xs);
            align-items: center;
        }

        .archivo-rejilla__mas {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        /* La miniatura: una placa con el símbolo, o el logo de la empresa si el repo guarda su copia (U7). */
        .archivo-miniatura {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: none;
            min-width: 28px;
            max-width: 56px;
            height: 24px;
            padding: 0 var(--space-2xs);
            box-sizing: border-box;
            overflow: hidden;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.02em;
            white-space: nowrap;
            text-overflow: clip;
            color: var(--text-strong);
            background: var(--bg-surface-elevated);
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-sm);
        }

        /* La miniatura con logo (U7): caja cuadrada de 24 px (con su borde de 1px), el mismo alto que la placa; la imagen
           ocupa los 22 px de dentro. Esos 22 tienen que ser `MINIATURA_PX` en `sitio/lib/logos.js`, que hornea el número
           en `width`/`height` del <img>: la caja ya está reservada antes de que llegue la imagen y la página no se mueve
           (CLS). `tests/playwright_archivo_pestanas.py` mide que coinciden. El fondo claro es lo que hace legible un logo con trazo oscuro o transparente sobre el
           tema oscuro; el logo se ve entero (`contain`), sin recortarlo. */
        .archivo-miniatura--logo {
            width: 24px;
            min-width: 24px;
            max-width: 24px;
            padding: 0;
            background: var(--text-primary);
        }

        .archivo-miniatura__logo {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* La atribución de Logo.dev: una línea discreta bajo la rejilla. El enlace es plano (su contrato lo pide así) y
           su zona pulsable mide al menos 24 px de alto (WCAG 2.5.8). */
        .archivo-logos-atribucion {
            margin: var(--space-sm) 0 0;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .archivo-logos-atribucion a {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            color: inherit;
            text-decoration: underline;
        }

        .archivo-logos-atribucion a:hover {
            color: var(--text-primary);
        }

        /* La llamada a descargar la app (encargo archivo-calendario, D5): UN bloque por página con eventos pendientes o
           próximos, entre la rejilla y los días / la tabla de meses (`partials/archivo-app.njk`). La frase va servida; los
           botones los monta `ui/descarga-app.js` desde `consola.js`, y su aspecto es de `descarga-app.css`. */
        .archivo-app {
            margin: 0 0 var(--space-lg);
            padding: var(--space-sm) var(--space-md);
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
        }

        .archivo-app__texto {
            margin: 0 0 var(--space-xs);
            font-size: 14px;
            color: var(--text-secondary);
        }

        /* RESERVA DE ALTURA: los botones entran después de cargar el JS, y sin hueco previo empujarían todo lo que viene
           detrás (CLS). Se reservan 44 px, la altura de un botón de `descarga-app.css`; con el apilado de <=640px, dos
           botones y el hueco entre ellos (ver ese bloque @media).
           COSTE DECLARADO: si `/config.js` no trae ninguna URL de tienda, o el JS no llega, `montarDescargaApp` pinta 0
           botones y la reserva queda como un hueco VACÍO de 44 px (88 px y pico a <=640px) bajo la frase. Se acepta: la
           frase se queda, el bloque no se oculta y no hay enlace roto ni botón vacío. */
        .archivo-app__tiendas {
            min-height: 44px;
        }

        /* Los botones, en fila que envuelve; el `gap` de `descarga-app.css` (--space-sm) se cierra a --space-xs. */
        .archivo-app .descarga-app {
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--space-xs);
        }

        /* Las secciones de día. `<section>` de la landing (`layout.css:124`) mete padding en todo `<section>`; se anula. */
        .archivo-dia {
            padding: 0;
            margin: 0 0 var(--space-xl);
        }

        .archivo-dia__titulo {
            margin: 0 0 var(--space-sm);
            padding-bottom: var(--space-xs);
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-subtle);
        }

        .archivo-sesion {
            margin: 0 0 var(--space-md);
        }

        .archivo-sesion__titulo {
            margin: 0 0 var(--space-xs);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .archivo-sesion__lista {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
            gap: var(--space-xs);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .archivo-evento {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-sm);
            min-height: 44px;
            padding: var(--space-2xs) var(--space-sm);
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
        }

        .archivo-evento--cerrado {
            border-color: var(--accent-border);
        }

        .archivo-evento__enlace {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            flex: 1 1 auto;
            min-width: 0;
            min-height: 24px;
            color: var(--text-primary);
            text-decoration: none;
            border-radius: var(--radius-sm);
        }

        .archivo-evento__enlace:hover .archivo-evento__nombre {
            text-decoration: underline;
        }

        .archivo-evento__nombre {
            overflow: hidden;
            font-size: 14px;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .archivo-evento__simbolo {
            font-size: 12px;
            color: var(--text-muted);
        }

        .archivo-evento__estado {
            flex: none;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        .archivo-evento--cerrado .archivo-evento__estado {
            color: var(--accent-soft-text);
        }

        /* La tabla de meses, bajo la rejilla de /archivo (D6): una fila por mes, la más reciente primero, con las cifras
           de resumenMensual y la fila de total. El mes a la izquierda, las cifras a la derecha en mono y alineadas por
           columnas. La envoltura desplaza la tabla sola en pantallas estrechas; la página no. */
        .archivo-meses {
            margin: 0 0 var(--space-xl);
        }

        .archivo-meses__titulo {
            margin: 0 0 var(--space-sm);
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .archivo-meses__intro {
            margin: 0 0 var(--space-md);
            color: var(--text-secondary);
        }

        .archivo-meses__envoltura {
            overflow-x: auto;
            margin: 0 0 var(--space-md);
        }

        /* Cómo cuentan las parciales en el porcentaje, bajo la tabla de meses (`indice.njk`): `statWinRateCuenta`, la misma frase de la portada. */
        .archivo-meses__regla {
            margin: 0 0 var(--space-md);
            font-size: 14px;
            color: var(--text-secondary);
        }

        .archivo-meses__tabla {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            font-variant-numeric: tabular-nums;
        }

        .archivo-meses__caption {
            padding: 0 0 var(--space-xs);
            text-align: left;
            color: var(--text-muted);
            font-size: 13px;
        }

        .archivo-meses__tabla th,
        .archivo-meses__tabla td {
            padding: var(--space-xs) var(--space-sm);
            border-bottom: 1px solid var(--border-subtle);
            text-align: right;
            white-space: nowrap;
        }

        .archivo-meses__tabla thead th {
            color: var(--text-secondary);
            font-weight: 600;
            white-space: normal;
            vertical-align: bottom;
        }

        .archivo-meses__tabla th[data-col="mes"] {
            text-align: left;
            color: var(--text-primary);
            font-weight: 600;
        }

        .archivo-meses__tabla td {
            font-family: var(--font-mono);
            color: var(--text-secondary);
        }

        .archivo-meses__tabla td.archivo-meses__sin-cifras {
            font-family: inherit;
            text-align: left;
            color: var(--text-muted);
        }

        .archivo-meses__tabla tbody tr:hover {
            background: var(--bg-hover);
        }

        .archivo-meses__tabla tfoot th,
        .archivo-meses__tabla tfoot td {
            border-top: 2px solid var(--border-subtle);
            border-bottom: 0;
            color: var(--text-primary);
            font-weight: 700;
        }

        .archivo-meses__enlace {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            text-decoration: none;
            border-bottom: 1px solid var(--accent-border);
        }

        .archivo-meses__enlace:hover {
            border-bottom-color: var(--accent);
        }

        /* Las cifras de un mes, bajo su introducción (`mes.njk`). */
        .archivo-mes-cifras {
            margin: 0 0 var(--space-lg);
        }

        .archivo-mes-cifras__titulo {
            margin: 0 0 var(--space-xs);
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .archivo-mes-cifras__nota {
            margin: 0 0 var(--space-sm);
            color: var(--text-secondary);
        }

        .archivo-mes-cifras__lista {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
            gap: var(--space-sm);
            margin: 0;
        }

        .archivo-mes-cifras__item {
            padding: var(--space-sm) var(--space-md);
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
        }

        .archivo-mes-cifras__item dt {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .archivo-mes-cifras__item dd {
            margin: var(--space-2xs) 0 0;
            font-family: var(--font-mono);
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }

        /* Cómo cuentan las parciales en el porcentaje, bajo las cifras de un mes (`mes.njk`). */
        .archivo-mes-cifras__regla {
            margin: var(--space-sm) 0 0;
            font-size: 14px;
            color: var(--text-secondary);
        }

        /* El enlace a la metodología, bajo las cifras de un mes (`mes.njk`); objetivo táctil de 24px como `.archivo-metodologia a`. */
        .archivo-mes-cifras__metodologia {
            margin: var(--space-sm) 0 0;
            font-size: 14px;
        }

        .archivo-mes-cifras__metodologia a {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            color: var(--accent);
            text-decoration: underline;
            text-decoration-color: var(--accent-border);
            text-underline-offset: 3px;
        }

        /* Pantallas estrechas: la misma rejilla, sin placas; el número del día y la cuenta bastan. */
        @media (max-width: 640px) {
            /* Los dos botones apilados a todo el ancho: la reserva de `.archivo-app__tiendas` pasa a dos botones + hueco. */
            .archivo-app__tiendas {
                min-height: calc(2 * 44px + var(--space-xs));
            }

            .archivo-app .descarga-app {
                flex-direction: column;
            }

            .archivo-rejilla {
                border-spacing: 2px;
            }

            .archivo-rejilla__celda {
                height: 56px;
            }

            .archivo-rejilla__celda--vacia {
                padding: var(--space-2xs);
            }

            .archivo-rejilla__placas {
                display: none;
            }

            .archivo-rejilla__enlace {
                padding: var(--space-2xs);
            }

            .archivo-rejilla__cuenta {
                top: auto;
                right: var(--space-2xs);
                bottom: var(--space-2xs);
            }

            .archivo-calendario__flecha-nombre {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                white-space: nowrap;
            }

            /* `minmax(0, 1fr)`, no `1fr` a secas: `1fr` es `minmax(auto, 1fr)` y la columna no bajaba del
               ancho del nombre (nowrap), que empujaba la página a scroll horizontal. */
            .archivo-sesion__lista {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .archivo-rejilla__enlace {
                transition: none;
            }
        }