/* ===== ARCHIVO DE CASOS (/archivo/ y /en/archive/, generados por Eleventy) ===== */
        /* Las páginas del archivo: el índice, una por trimestre, por mes, por día y por
           caso, en los dos idiomas. Todo sale de tokens.css: ni un color, un radio o un
           espaciado fuera de escala. El estado de un caso NUNCA se comunica sólo por color
           (WCAG 1.4.1): la palabra —Acertada, Parcial, Fallida— está escrita
           en el propio elemento, y en el calendario cada estado lleva además su glifo. */

        /* LA CABECERA DE ESTAS PÁGINAS ES LA DEL SITIO (nav.css), como la de cualquier
           otra página generada: no hay chrome propio del archivo. */

        /* LOS 78px SON EL ALTO DEL NAV, QUE ES `position: fixed` (nav.css:2,20), y sin
           ellos la barra se come el primer encabezado de la página. NO ES UN VALOR NUEVO:
           es el mismo `calc(78px + var(--space-*))` que ya usan `legal.css:6` y
           `curso.css:24`. El 78 está tecleado en los tres porque el alto del nav no es un
           token; el día que lo sea, se cierra la clase en los tres a la vez.

           El ancho máximo es el del curso (`curso.css:22`): las dos son consolas de
           lectura con panel lateral. */
        .archivo-main {
            max-width: 1240px;
            margin: 0 auto;
            padding: calc(78px + var(--space-2xl)) clamp(18px, 4vw, 32px) var(--space-5xl);
        }

        /* ── LA CONSOLA: EL ARTÍCULO Y, A SU DERECHA, EL PANEL ───────────────
           El artículo va primero en el HTML y el panel detrás, así que el orden del
           documento y el visual coinciden: en escritorio el panel está a la derecha y en
           móvil, debajo. Mismo reparto de columna que el temario del curso
           (`curso.css:29`), en el lado contrario. */
        .archivo-consola {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 264px);
            gap: clamp(var(--space-xl), 4vw, var(--space-4xl));
            align-items: start;
        }

        .archivo-article {
            min-width: 0;
            color: var(--text-secondary);
            font-size: 16px;
            line-height: 1.6;
        }

        /* ── LAS MIGAS ──────────────────────────────────────────────────── */
        .archivo-migas {
            margin-bottom: var(--space-lg);
        }

        .archivo-migas__lista {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-2xs) var(--space-xs);
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* El separador es forma, no texto: no se lee ni se copia. */
        .archivo-migas__item + .archivo-migas__item::before {
            content: "›";
            margin-right: var(--space-xs);
            color: var(--text-muted);
        }

        .archivo-migas__enlace {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            font-size: 14px;
            color: var(--text-secondary);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: color var(--duration-fast) var(--ease-standard),
                        border-color var(--duration-fast) var(--ease-standard);
        }

        .archivo-migas__enlace:hover {
            color: var(--text-primary);
            border-bottom-color: var(--accent-border);
        }

        /* ── ENCABEZADO, INTRO Y MARCA «EN CURSO» ──────────────────────────── */
        .archivo-titulo {
            font-family: var(--font-display);
            font-size: clamp(26px, 4.4vw, 34px);
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.18;
            color: var(--text-primary);
            margin: 0 0 var(--space-md);
        }

        .archivo-intro {
            max-width: 66ch;
            margin: 0 0 var(--space-lg);
        }

        .archivo-en-curso {
            max-width: 66ch;
            margin: 0 0 var(--space-md);
            font-size: 14px;
            color: var(--text-muted);
        }

        /* La marca lleva la palabra: el color sólo la acompaña. */
        .archivo-marca {
            display: inline-flex;
            align-items: center;
            padding: 0 var(--space-xs);
            border: 1px solid var(--accent-border);
            border-radius: var(--radius-sm);
            background: var(--accent-soft);
            color: var(--accent-soft-text);
            font-family: var(--font-sans);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.6;
            vertical-align: middle;
        }

        /* ── EL RECUENTO ─────────────────────────────────────────────────────
           Recuentos y NUNCA un porcentaje: el de /metodologia sale de otra población. Lo
           vigila el transform «ni un porcentaje» de sitio/eleventy.config.js. */
        .archivo-recuento {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xs) var(--space-lg);
            list-style: none;
            margin: 0 0 var(--space-sm);
            padding: 0;
        }

        .archivo-recuento__fila {
            display: flex;
            align-items: baseline;
            gap: var(--space-2xs);
            font-size: 14px;
            color: var(--text-muted);
        }

        .archivo-recuento__cifra {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--text-primary);
        }

        .archivo-recuento__cifra--acierto { color: var(--success); }
        .archivo-recuento__cifra--parcial { color: var(--warning); }
        .archivo-recuento__cifra--fallo { color: var(--danger); }

        /* ── LAS SECCIONES ───────────────────────────────────────────────────
           EL `padding: 0` NO SOBRA. `layout.css:69` da a TODO `section` un relleno de
           landing —entre 84 y 116px arriba y abajo, y hasta 28px a los lados— y
           `responsive.css` lo repite por punto de corte. Se anula en el componente y no se
           toca la regla global, que es de la portada. */
        .archivo-seccion {
            margin: var(--space-2xl) 0 0;
            padding: 0;
        }

        /* LOS H2 Y H3 ANULAN LA TIPOGRAFÍA DE LANDING. `layout.css:120-128` da a TODO `h2, h3`
           `letter-spacing: -0.055em`, `display: inline-block` y `line-height: 1.02`: a 24px son
           −1,32px entre letras y las palabras se juntan («Quéhizoelprecio», visto en la captura
           del caso). Mismo trato que el curso (`curso.css:652`): −0,01em y bloque. */
        .archivo-seccion__titulo {
            display: block;
            font-family: var(--font-display);
            font-size: clamp(20px, 2.8vw, 24px);
            font-weight: 700;
            letter-spacing: -0.01em;
            line-height: 1.3;
            color: var(--text-primary);
            margin: 0 0 var(--space-md);
        }

        .archivo-seccion__titulo a {
            color: inherit;
            text-decoration: underline;
            text-decoration-color: var(--accent-border);
            text-underline-offset: 4px;
        }

        .archivo-seccion__nota {
            max-width: 66ch;
            margin: var(--space-sm) 0 0;
            font-size: 14px;
            color: var(--text-muted);
        }

        /* Los enlaces dentro de un texto van SUBRAYADOS: en un párrafo, el color solo no
           basta para saber qué es enlace (WCAG 1.4.1). */
        .archivo-seccion__nota a,
        .archivo-mas a,
        .archivo-mes__enlace {
            color: var(--accent);
            text-decoration: underline;
            text-decoration-color: var(--accent-border);
            text-underline-offset: 3px;
        }

        .archivo-seccion__nota a:hover,
        .archivo-mas a:hover,
        .archivo-mes__enlace:hover,
        .archivo-seccion__titulo a:hover {
            color: var(--primary-hover);
        }

        /* ── EL CASO ─────────────────────────────────────────────────────── */
        .archivo-bloque {
            margin: 0 0 var(--space-lg);
            padding: 0;
        }

        .archivo-bloque__titulo {
            display: block;
            letter-spacing: -0.01em;
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 600;
            line-height: 1.35;
            color: var(--text-strong);
            margin: 0 0 var(--space-xs);
        }

        /* `pre-line`: si la prosa del backend trae saltos de línea, se respetan sin que
           nadie la reparta en párrafos a mano. */
        .archivo-prosa {
            max-width: 66ch;
            margin: var(--space-md) 0 0;
            color: var(--text-secondary);
            white-space: pre-line;
        }

        .archivo-bloque .archivo-prosa {
            margin-top: 0;
        }

        .archivo-cifras,
        .archivo-resultado {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
            margin: 0;
        }

        .archivo-cifras__fila,
        .archivo-resultado__fila {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
            min-width: 128px;
            padding: var(--space-sm) var(--space-md);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-surface);
        }

        /* Etiquetas sobre --bg-surface: --text-secondary. Con --text-muted daban 4,48:1 medido,
           por debajo del 4,5 de AA (revisión de contraste, 2026-09-11). */
        .archivo-cifras dt,
        .archivo-resultado dt {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }

        .archivo-cifras dd,
        .archivo-resultado dd {
            margin: 0;
            color: var(--text-primary);
        }

        .archivo-cifras__valor {
            font-family: var(--font-display);
            font-size: 24px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .archivo-estado {
            display: inline-flex;
            align-items: center;
            padding: 0 var(--space-xs);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            font-size: 13px;
            line-height: 1.7;
            white-space: nowrap;
        }

        .archivo-estado--acierto {
            background: var(--success-soft);
            border-color: rgba(var(--success-rgb), 0.28);
            color: var(--success-soft-text);
        }

        .archivo-estado--parcial {
            background: var(--warning-soft);
            border-color: rgba(var(--warning-rgb), 0.28);
            color: var(--warning);
        }

        .archivo-estado--fallo {
            background: var(--danger-soft);
            border-color: rgba(var(--danger-rgb), 0.28);
            color: var(--danger-text);
        }

        .archivo-mas__lista {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: var(--space-xs);
        }

        .archivo-mas__item {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: var(--space-2xs) var(--space-xs);
            min-height: 24px;
        }

        .archivo-mas__cuenta,
        .archivo-mes__cuenta {
            font-size: 13px;
            color: var(--text-muted);
        }

        /* ── EL ÍNDICE: LOS MESES DE CADA TRIMESTRE ──────────────────────── */
        .archivo-meses {
            list-style: none;
            margin: var(--space-md) 0 0;
            padding: 0;
            display: grid;
            gap: var(--space-xs);
        }

        .archivo-mes {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: var(--space-2xs) var(--space-xs);
            min-height: 24px;
        }

        /* ── LAS TABLAS: LA LISTA COMPACTA Y EL CALENDARIO ───────────────────
           Viven en un marco que se desplaza en horizontal si no caben; el cuerpo de la
           página, nunca. El marco es enfocable para poder desplazarlo con el teclado.

           EL `position: relative` NO SOBRA: los `.sr-only` de dentro son `position:
           absolute`, y sin un antepasado posicionado escapan del recorte del marco y
           ensanchan el DOCUMENTO. Medido a 390px en el mes: scrollWidth 543 por el
           nombre oculto del domingo en la cabecera del calendario. */
        .archivo-tabla-marco {
            position: relative;
            overflow-x: auto;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-surface);
        }

        .archivo-tabla-marco:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .archivo-tabla {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        .archivo-tabla th,
        .archivo-tabla td {
            padding: var(--space-xs) var(--space-md);
            text-align: left;
            border-bottom: 1px solid var(--border-subtle);
        }

        .archivo-tabla thead th {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        .archivo-tabla .archivo-tabla__cifra {
            text-align: right;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .archivo-tabla td.archivo-tabla__cifra {
            color: var(--text-primary);
        }

        .archivo-tabla a {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid var(--accent-border);
        }

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

        .archivo-lista__valor {
            font-family: var(--font-mono);
            font-weight: 700;
            white-space: nowrap;
        }

        .archivo-lista__empresa {
            min-width: 160px;
            color: var(--text-strong);
        }

        .archivo-lista__grupo th {
            padding-top: var(--space-md);
            background: var(--bg-base);
            font-size: 13px;
            font-weight: 600;
            color: var(--text-strong);
        }

        /* ── EL CALENDARIO ───────────────────────────────────────────────── */
        .archivo-calendario-marco {
            margin-top: var(--space-sm);
        }

        .archivo-calendario {
            width: 100%;
            min-width: 560px;
            border-collapse: collapse;
            table-layout: fixed;
            font-size: 13px;
        }

        .archivo-calendario__caption {
            padding: var(--space-sm) var(--space-md) 0;
            text-align: left;
            font-family: var(--font-display);
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .archivo-calendario th {
            padding: var(--space-xs);
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            text-align: center;
            border-bottom: 1px solid var(--border-subtle);
        }

        /* --text-secondary y no --text-muted: sobre la superficie del marco, --text-muted se queda
           rozando el 4,5:1 (≈4,5 calculado con #6f7a8d sobre ≈#080d16), y en una tabla de números
           no se juega al límite. --text-secondary da ≈8,8:1. */
        .archivo-calendario__celda {
            height: 72px;
            padding: var(--space-2xs);
            vertical-align: top;
            border: 1px solid var(--border-subtle);
            color: var(--text-secondary);
        }

        .archivo-calendario__celda--fuera {
            background: var(--bg-base);
        }

        /* UN DÍA FUTURO SE DISTINGUE POR LA FORMA, NO POR ATENUARLO. Con `opacity: 0.6` sobre
           --text-muted el número quedaba en ≈2,3:1 (revisión, 2026-09-11). El borde discontinuo
           marca «todavía no» y el número conserva el contraste de cualquier otro día. */
        .archivo-calendario__celda--futura {
            border-style: dashed;
        }

        .archivo-calendario__celda--con-casos {
            padding: 0;
        }

        .archivo-calendario__enlace {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
            height: 100%;
            min-height: 72px;
            padding: var(--space-2xs) var(--space-xs);
            color: var(--text-primary);
            text-decoration: none;
            background: var(--accent-soft);
            transition: background-color var(--duration-fast) var(--ease-standard);
        }

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

        .archivo-calendario__dia {
            font-weight: 600;
        }

        .archivo-calendario__enlace .archivo-calendario__dia {
            text-decoration: underline;
            text-decoration-color: var(--accent-border);
            text-underline-offset: 3px;
        }

        /* El total va con su palabra: un número suelto debajo del número del día se leía
           como otra fecha. */
        .archivo-calendario__cuenta {
            font-size: 12px;
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
        }

        .archivo-calendario__desglose {
            display: flex;
            flex-wrap: wrap;
            gap: 0 var(--space-2xs);
            font-size: 12px;
            font-variant-numeric: tabular-nums;
        }

        .archivo-glifo--acierto { color: var(--success); }
        .archivo-glifo--parcial { color: var(--warning); }
        .archivo-glifo--fallo { color: var(--danger); }

        .archivo-leyenda {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2xs) var(--space-md);
            list-style: none;
            margin: var(--space-sm) 0 0;
            padding: 0;
            font-size: 13px;
            color: var(--text-muted);
        }

        .archivo-trimestre-mes .archivo-recuento {
            margin-bottom: 0;
        }

        /* ── EL PANEL LATERAL ────────────────────────────────────────────────
           El patrón del temario del curso (`curso.css:66-230`): <details>/<summary>,
           triángulo como forma y no como color, y la cuenta de cada grupo en su pastilla.
           Son clases propias y no las del curso para no atar el archivo a su CSS. */
        .archivo-panel {
            position: sticky;
            top: calc(78px + var(--space-md));
            max-height: calc(100vh - 78px - var(--space-xl));
            min-width: 0;
        }

        .archivo-panel__caja {
            max-height: inherit;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: var(--space-md);
            background: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
        }

        .archivo-panel__titulo {
            margin: 0 0 var(--space-sm);
            font-family: var(--font-display);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .archivo-panel__raiz {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            color: var(--text-secondary);
            text-decoration: none;
        }

        .archivo-panel__raiz:hover,
        .archivo-panel__raiz[aria-current="page"] {
            color: var(--text-primary);
        }

        .archivo-panel__trimestre {
            border-top: 1px solid var(--border-subtle);
        }

        .archivo-panel__resumen {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            min-height: 40px;
            padding: var(--space-xs) var(--space-2xs);
            color: var(--text-strong);
            font-size: 14px;
            font-weight: 600;
            line-height: 1.35;
            cursor: pointer;
            list-style: none;
        }

        .archivo-panel__resumen::-webkit-details-marker {
            display: none;
        }

        .archivo-panel__resumen::before {
            content: "▸";
            flex-shrink: 0;
            color: var(--text-muted);
            font-size: 10px;
            transition: transform var(--duration-fast) var(--ease-standard);
        }

        .archivo-panel__trimestre[open] > .archivo-panel__resumen::before {
            transform: rotate(90deg);
        }

        .archivo-panel__nombre {
            flex: 1;
            min-width: 0;
        }

        .archivo-panel__cuenta {
            flex-shrink: 0;
            padding: 0 var(--space-2xs);
            background: var(--bg-base);
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-family: var(--font-mono);
            font-size: 12px;
        }

        .archivo-panel__lista {
            margin: 0 0 var(--space-xs);
            padding: 0 0 0 var(--space-sm);
            list-style: none;
        }

        .archivo-panel__enlace {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            min-height: 32px;
            padding: var(--space-2xs) var(--space-xs);
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            font-size: 14px;
            text-decoration: none;
        }

        .archivo-panel__enlace:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        /* La página actual se marca con fondo Y con un filete: no sólo con color. */
        .archivo-panel__enlace[aria-current="page"] {
            background: var(--accent-soft);
            color: var(--text-primary);
            box-shadow: inset 2px 0 0 var(--accent);
        }

        /* ── EL BUSCADOR DEL PANEL ────────────────────────────────────────────
           Todo lo de dentro lo crea public/src/js/archivo/buscador.js; sin JS el contenedor es
           `hidden` y vacío. El campo es `.email-input`, el único campo de texto del sitio
           (forms.css:158, con sus 16px contra el auto-zoom de iOS): aquí sólo se ajusta al panel. */
        .archivo-buscador {
            margin: 0 0 var(--space-sm);
            padding: 0 0 var(--space-md);
            border-bottom: 1px solid var(--border-subtle);
        }

        /* SU SITIO SE RESERVA DESDE EL PRIMER PINTADO, como la barra del deslizador y el hueco del atajo.
           Sin esto, al montarse el buscador (`hidden = false`) empujaba el resto del panel hacia abajo:
           CLS 0,007 medido a 1280 px. Con JS (`scripting: enabled`) el contenedor ocupa ya el alto de
           la etiqueta y el campo aunque siga `hidden` y vacío; sin JS, `hidden` lo quita del todo. Si el
           módulo no llega, queda ese hueco: nada que leer ni que anunciar, porque está vacío. */
        @media (scripting: enabled) {
            .archivo-buscador[hidden] {
                display: block;
            }

            .archivo-buscador {
                min-height: var(--space-6xl);
            }
        }

        /* Etiqueta y campo montados miden MENOS que la reserva (≈92 px contra 96), con holgura para la
           métrica de la fuente: así el alto no cambia al montarse. El campo va en bloque para que no le
           sume la línea de base de un elemento en línea. */
        .archivo-buscador__etiqueta {
            display: block;
            margin: 0 0 var(--space-2xs);
            font-size: 14px;
            font-weight: 600;
            line-height: 1.4;
            color: var(--text-strong);
        }

        .archivo-buscador .archivo-buscador__campo {
            display: block;
            padding: var(--space-sm) var(--space-md);
        }

        .archivo-buscador__estado,
        .archivo-buscador__nota {
            margin: var(--space-xs) 0 0;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .archivo-buscador__estado:empty {
            margin: 0;
        }

        .archivo-buscador__resultados {
            display: grid;
            gap: var(--space-2xs);
            list-style: none;
            margin: var(--space-xs) 0 0;
            padding: 0;
        }

        /* El `display: grid` de arriba gana a la regla `[hidden]` del navegador: sin esto la lista
           «oculta» seguía ocupando su margen (medido: 8 px de más en el buscador recién montado). */
        .archivo-buscador__resultados[hidden] {
            display: none;
        }

        /* Cada resultado es UN enlace: el ticker subrayado dice que lo es, y el nombre, la fecha y
           el estado —con su palabra, no sólo su color— van dentro. */
        .archivo-buscador__enlace {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: baseline;
            gap: var(--space-2xs) var(--space-xs);
            min-height: var(--space-2xl);
            padding: var(--space-xs);
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.4;
            text-decoration: none;
            transition: background-color var(--duration-fast) var(--ease-standard);
        }

        .archivo-buscador__enlace:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .archivo-buscador__enlace[aria-current="page"] {
            background: var(--accent-soft);
            box-shadow: inset 2px 0 0 var(--accent);
        }

        .archivo-buscador__valor {
            font-family: var(--font-mono);
            font-weight: 700;
            color: var(--accent);
            text-decoration: underline;
            text-decoration-color: var(--accent-border);
            text-underline-offset: 3px;
        }

        .archivo-buscador__empresa {
            color: var(--text-strong);
            overflow-wrap: anywhere;
        }

        .archivo-buscador__fecha,
        .archivo-buscador__estado-caso {
            grid-column: 1 / -1;
        }

        .archivo-buscador__fecha {
            font-size: 13px;
        }

        .archivo-buscador__estado-caso {
            justify-self: start;
        }

        /* EL ATAJO «Buscar un caso», arriba del artículo, sólo donde el panel queda debajo. El hueco
           se sirve vacío y aquí sólo tiene alto con JS: el enlace aparece sin empujar nada. */
        .archivo-buscador-ir-hueco {
            display: none;
        }

        .archivo-buscador-ir {
            display: inline-flex;
            align-items: center;
            min-height: var(--space-2xl);
            font-size: 14px;
            color: var(--accent);
            text-decoration: underline;
            text-decoration-color: var(--accent-border);
            text-underline-offset: 3px;
        }

        .archivo-buscador-ir:hover {
            color: var(--primary-hover);
        }

        @media (scripting: enabled) and (max-width: 1024px) {
            .archivo-buscador-ir-hueco {
                display: flex;
                align-items: center;
                min-height: var(--space-2xl);
                margin: 0 0 var(--space-xs);
            }
        }

        /* ── EL DESLIZADOR DE LOS TRES MESES DEL TRIMESTRE ────────────────────
           SIN JS (`scripting: none`) nada de esto aplica: la barra no ocupa y la pista es un bloque,
           así que los meses se ven apilados. CON JS, la fila se pone DESDE EL PRIMER PINTADO, no
           cuando llega el módulo: si lo hiciera el módulo, la página encogería de tres meses a uno
           ya pintada. La barra reserva el alto de los botones por lo mismo.

           NINGÚN MES SE OCULTA: los que no se ven están a un desplazamiento. Si el módulo no llega,
           la pista se sigue desplazando y los tres se leen. Cada mes ocupa el ancho de la pista menos
           `--space-xl`, así que el borde del mes siguiente ASOMA —con o sin módulo— y se nota que hay
           más. No hay desplazamiento anidado: en pantalla estrecha el calendario cabe entero (ver «EL
           CALENDARIO COMPACTO»), así que deslizar sobre él cambia de mes.

           EL FOCO VA HACIA DENTRO EN TODO LO ENFOCABLE DE LA PISTA: su `overflow-x` recorta un anillo
           con `outline-offset` hacia fuera (el enlace del h2, el marco del calendario, sus días). Es
           el mismo arreglo que ya tenía el marco de las tablas, extendido a este contenedor. */
        .archivo-deslizador__barra {
            display: none;
        }

        @media (scripting: enabled) {
            .archivo-deslizador {
                margin: var(--space-2xl) 0 0;
            }

            .archivo-deslizador__barra {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                gap: var(--space-xs);
                min-height: var(--space-2xl);
                margin: 0 0 var(--space-sm);
            }

            .archivo-deslizador__pista {
                display: grid;
                grid-auto-flow: column;
                grid-auto-columns: calc(100% - var(--space-xl));
                gap: var(--space-md);
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                /* La franja donde asoma el mes siguiente NO cuenta como «a la vista». Sin esto, al entrar
                   con Tab en el enlace del mes siguiente, que asoma 16 px, el navegador lo daba por visible
                   y no desplazaba: el foco quedaba casi entero fuera de la pista (medido a 390 y 1280). */
                scroll-padding-inline-end: var(--space-xl);
            }

            .archivo-deslizador__pista > .archivo-trimestre-mes {
                min-width: 0;
                margin: 0;
                scroll-snap-align: start;
                scroll-snap-stop: always;
            }

            .archivo-deslizador__pista:focus-visible {
                outline: 2px solid var(--accent);
                outline-offset: 2px;
            }

            /* Especificidad por encima de `.archivo-consola a:focus-visible` (más abajo), que si no gana
               por ir después. */
            .archivo-deslizador .archivo-deslizador__pista a:focus-visible,
            .archivo-deslizador .archivo-deslizador__pista [tabindex]:focus-visible {
                outline-offset: -2px;
            }
        }

        @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
            .archivo-deslizador__pista {
                scroll-behavior: smooth;
            }
        }

        .archivo-deslizador__boton {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2xs);
            min-height: var(--space-2xl);
            padding: 0 var(--space-sm);
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-sm);
            background: var(--bg-surface);
            color: var(--text-primary);
            font-family: var(--font-sans);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color var(--duration-fast) var(--ease-standard);
        }

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

        /* En el extremo el botón sigue enfocable (`aria-disabled`, no `disabled`): el foco no se pierde
           al llegar al último mes. Se apaga con el color Y el borde. */
        .archivo-deslizador__boton[aria-disabled="true"] {
            border-color: var(--border-subtle);
            background: transparent;
            color: var(--text-muted);
            cursor: default;
        }

        .archivo-deslizador__glifo {
            font-size: 18px;
            line-height: 1;
        }

        /* ── EL FOCO, VISIBLE EN TODO LO INTERACTIVO DEL ARCHIVO ─────────────
           El patrón del curso (`curso.css:2585`). El `:focus-visible` global de base.css:79 dibuja
           el anillo con `box-shadow` y `outline: 0`, así que cualquier `box-shadow` propio lo tapa:
           pasaba en el enlace del panel con `aria-current`, que lleva su filete en `box-shadow` y
           se quedaba SIN foco visible (revisión, 2026-09-11). El `outline` no compite con eso. */
        .archivo-consola a:focus-visible,
        .archivo-consola summary:focus-visible,
        .archivo-consola button:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        /* Dentro de un marco que se desplaza, el anillo va HACIA DENTRO: hacia fuera lo recorta el
           propio `overflow` del marco en las celdas del borde. */
        .archivo-tabla-marco a:focus-visible {
            outline-offset: -2px;
        }

        @media (max-width: 1024px) {
            .archivo-consola {
                grid-template-columns: minmax(0, 1fr);
            }

            .archivo-panel {
                position: static;
                max-height: none;
            }
        }

        @media (max-width: 640px) {
            .archivo-tabla th,
            .archivo-tabla td {
                padding: var(--space-xs) var(--space-sm);
            }

            .archivo-cifras__fila,
            .archivo-resultado__fila {
                flex: 1 1 128px;
            }

            /* ── EL CALENDARIO COMPACTO ──────────────────────────────────────────
               Por debajo de 640 px el calendario CABE en el ancho: sin `min-width` y sin
               desplazamiento propio. Cada día con casos enseña su número y su total con la palabra
               («Casos 12», que se parte en dos líneas si no cabe). El desglose por estado (✓◐✕) no se
               pinta: sigue entero en la frase `sr-only` de cada día —«Casos: 12 · Acertadas: 5 · Parciales: … · Fallidas: …»—,
               que es también el nombre del enlace, y en la página del día. El color nunca queda como
               único canal porque en esta vista no se usa para nada. Es el mismo partial en el mes y en
               el trimestre, así que cambia en los dos. */
            .archivo-calendario {
                min-width: 0;
            }

            .archivo-calendario th {
                padding: var(--space-2xs) 0;
            }

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

            .archivo-calendario__cuenta {
                overflow-wrap: anywhere;
            }

            /* Y la leyenda de esos glifos se va con ellos: sin glifos que explicar quedaba huérfana debajo
               del calendario (visto en la captura del mes a 390 px). Ya era `aria-hidden`. */
            .archivo-calendario__desglose,
            .archivo-leyenda {
                display: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .archivo-migas__enlace,
            .archivo-calendario__enlace,
            .archivo-panel__resumen::before,
            .archivo-buscador__enlace,
            .archivo-deslizador__boton {
                transition: none;
            }
        }