/*
 * SharkAnime — Hoja_Archivo (anime-archive-page)
 * ==============================================
 *
 * Hoja de la vista de archivo: el archivo del CPT `anime`, los archivos de
 * término de las Taxonomias_Anime y la Vista_Archivo_Generico de fecha, autor
 * y otras taxonomías. Se encola con el handle `sharkanime-archive-clone` al
 * final de la Cadena_Hojas_Archivo (light-theme → typography → download-cards),
 * así que gana la cascada por orden de encolado y por especificidad, sin una
 * sola declaración forzada: la hoja contiene 0 `!important` (Req 1.10).
 *
 * Ámbito: la clase `sa-archive` se emite en el `body` (header.php) y en el
 * `main` (archive.php) y solo en estas vistas, de modo que **todas** las reglas
 * de esta hoja llevan el selector `.sa-archive`. Las dos únicas excepciones que
 * admite el criterio 1.9 son los selectores interiores de `@keyframes` y las
 * reglas dentro de un `@media`, que llevan el prefijo en su propio selector.
 *
 * Como en la vista de resultados de búsqueda, los Tokens_Diseno **no** viven en
 * `:root`: se declaran en el propio selector de ámbito `.sa-archive` (Req 1.9,
 * 1.11). `assets/css/home-clone.css` no se encola en esta vista, así que esta
 * hoja no hereda ningún token ni ninguna regla suya: declara todo lo que
 * necesita, incluido lo mínimo de Cabecera y Pie.
 *
 * Todo color de acento se resuelve con `var(--sa-accent)`, para que el bloque
 * `<style>` de header.php que emite `.sa-archive{--sa-accent:…}` pueda
 * sobrescribirlo sin tocar esta hoja (Req 1.18, 1.19).
 *
 * La familia rosa de las maquetas anteriores no aparece ni una vez, ni en las
 * declaraciones ni en los comentarios: donde se usaba va el azul `#2563eb` /
 * `#1d4ed8` con blanco encima (Req 1.12).
 *
 * Índice
 *   1. Tokens_Diseno (`.sa-archive`)
 *   2. Tipografía por variables frente al Bloque_Vars_Tema
 *   3. Ámbito de página y contenedor
 *   4. Separación entre bloques de la vista
 *   5. Cabecera (marca, navegación en pastilla, acciones circulares)
 *   6. Pie (cuatro columnas, enlaces sociales, copyright)
 *   7. Cabecera_Archivo (`.sa-arch-head`)
 *   8. Breakpoints de la capa base
 *   9. Campo_Busqueda, Barra_Filtros_Archivo, Cuadricula_Archivo y Tarjeta_Anime
 *  10. Paginacion_Archivo, Listado_Simple, Estado_Vacio y a11y
 *  11. Ganchos de la Capa_Ajax (cuadrícula vacía y cuadrícula ocupada)
 *
 * Retículas por breakpoint (móvil <= 640 px, tablet 641–1023 px, escritorio
 * >= 1024 px): `.sa-arch-head` 1 / 2 / 2 columnas (Req 2.14, 2.15),
 * `.sa-filter-bar--archive` 1 / 3 / 6 columnas (Req 4.1, 4.22, 4.23) y
 * `.sa-agrid` 2 / 3 / 6 columnas con separación de 12 / 20 / 20 px
 * (Req 5.7, 5.8, 5.9, 5.10).
 *
 * Contrastes de los pares usados en esta capa (Req 10.9):
 *   --sa-ink       sobre --sa-page      → 14,56:1
 *   --sa-ink       sobre --sa-surface   → 15,51:1
 *   --sa-ink-soft  sobre --sa-page      →  4,54:1
 *   --sa-ink-soft  sobre --sa-surface   →  4,83:1
 *   --sa-on-accent sobre --sa-accent-strong → 5,32:1  (texto pequeño en rojo)
 *   --sa-accent    como texto sobre --sa-page → 3,86:1 (solo en el `h1`, 30 px)
 *
 * @package SharkAnime
 * @since   1.4.0
 */

/* ============================================================
   1. TOKENS_DISENO
   Bloque de variables de color, radio, sombra y espaciado,
   declarado en el propio selector de ámbito para no dejar
   ninguna regla sin prefijo (Req 1.9, 1.11).
   ============================================================ */

.sa-archive {
  /* Paleta: accent sigue --sa-primary de Theme Studio / SharkMovie */
  --sa-accent:        var(--sa-primary, #1a6ef5);
  --sa-accent-strong: var(--sa-primary-hover, color-mix(in srgb, var(--sa-primary, #1a6ef5) 78%, #000));
  --sa-on-accent:     #ffffff;   /* texto sobre el acento */
  --sa-blue:          #2563eb;   /* secundario: 5,17:1 con `--sa-on-blue` */
  --sa-blue-strong:   #1d4ed8;   /* tinte oscuro del secundario: 6,70:1 con blanco */
  --sa-on-blue:       #ffffff;   /* texto sobre el secundario */
  --sa-page:          #ffffff;   /* fondo de página */
  --sa-surface:       #ffffff;   /* fondo de superficie */
  --sa-ink:           #1f2430;   /* texto principal */
  --sa-ink-soft:      #6b7280;   /* texto secundario */
  --sa-border:        #e2e8f0;   /* borde suave */

  /* Espaciado */
  --sa-space-1: 4px;
  --sa-space-2: 8px;
  --sa-space-3: 12px;
  --sa-space-4: 16px;
  --sa-space-5: 20px;
  --sa-space-6: 24px;
  --sa-space-7: 32px;

  /* Radios (Req 2.12, 4.3) */
  --sa-radius-card: 20px;
  --sa-radius-pill: 999px;
  --sa-radius-item: 14px;
  --sa-radius-mark: 12px;   /* cuadrado de la marca en Cabecera y Pie */

  /* Sombras — alfa <= 0,10 (Req 4.3) */
  --sa-shadow-card:  0 8px 24px rgba(31, 36, 48, 0.07);
  --sa-shadow-hover: 0 12px 28px rgba(31, 36, 48, 0.10);

  /* Retícula */
  --sa-container: 1280px;   /* ancho máximo del contenedor (Req 1.5) */
  --sa-gap:       20px;     /* separación entre tarjetas en escritorio (Req 5.10) */
  --sa-gap-sm:    12px;     /* separación entre tarjetas en móvil (Req 5.10) */
  --sa-gap-block: 24px;     /* separación entre bloques de la vista */
  --sa-motion:    200ms;
}

/* ============================================================
   2. TIPOGRAFÍA POR VARIABLES FRENTE AL BLOQUE_VARS_TEMA
   `inc/theme-options.php` inyecta en `wp_head` con prioridad 999
   `h1 { font-size: var(--sa-fs-3xl) !important }` y
   `.sa-card__title { font-size: var(--sa-fs-sm) !important }`,
   con los tokens declarados en `:root` también forzados.
   Ninguna especificidad de selector vence a una declaración
   forzada, así que esta hoja no declara `font-size` sobre `h1`,
   `h2`, `h3` ni `p` (Req 9.1): redefine los tokens en el ámbito.

   El mecanismo: una propiedad personalizada con `!important` gana
   en el elemento donde se declara, no en sus descendientes. El
   bloque del tema las declara en `:root` (`<html>`); aquí se
   redeclaran en `.sa-archive`, que casa con `<body>` y con
   `<main>`, más cerca del `h1` y de las tarjetas. La declaración
   forzada del tema sigue ganando su cascada, pero el valor que
   sustituye es el de este ámbito (Req 9.2, 9.3, 9.4, 9.5).

   Todos los valores van en píxeles absolutos, sin `em`, `rem`,
   `%` ni `ex`, así que no dependen del tamaño heredado y el valor
   computado es exactamente el declarado (Req 9.6).
   ============================================================ */

.sa-archive {
  --sa-fs-3xl: 30px;   /* `h1` de la Cabecera_Archivo: 28–34 px (Req 9.2) */
  --sa-fs-2xl: 22px;   /* encabezados de bloque de la vista */
  --sa-fs-xl:  18px;   /* `h3` dentro del ámbito */
  --sa-fs-sm:  14px;   /* `.sa-card__title`: 13–15 px (Req 9.3) */
  --sa-fs-xs:  13px;   /* línea de recuento: 12–14 px (Req 9.4) */
}

/* ============================================================
   3. ÁMBITO DE PÁGINA Y CONTENEDOR
   ============================================================ */

body.sa-archive {
  background-color: var(--sa-page);
  color: var(--sa-ink);
}

main.sa-archive {
  padding: 0;
  background: transparent;
}

/* Contenedor centrado de 1280 px: lo comparten Cabecera, vista y Pie (Req 1.5) */
.sa-archive .sa-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--sa-container);
  margin-inline: auto;
  padding-inline: var(--sa-space-6);
}

/* ============================================================
   4. SEPARACIÓN ENTRE BLOQUES DE LA VISTA
   Una sola columna de bloques, en el orden que emite archive.php:
   Cabecera_Archivo, Barra_Filtros_Archivo, Cuadricula_Archivo y
   Paginacion_Archivo (Req 1.4). La Cuadricula_Archivo no comparte
   fila con nada: ocupa el 100 % del contenedor (Req 5.11).
   ============================================================ */

.sa-archive .sa-archive__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--sa-gap-block);
  padding-block: var(--sa-gap-block) var(--sa-space-7);
}

.sa-archive .sa-archive__inner > * {
  min-width: 0;
}

/* ============================================================
   5. CABECERA
   El marcado de header.php no cambia: aquí solo se estila, con las
   mismas medidas que la portada y la búsqueda (Req 1.17). En esta
   vista `home-clone.css` no se encola, así que la Cabecera necesita
   su capa mínima declarada aquí.
   ============================================================ */

.sa-archive .sa-header {
  background-color: var(--sa-header-bg, var(--sa-surface, #ffffff));
  border-bottom: 1px solid color-mix(in srgb, var(--sa-header-text, #334155) 14%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--sa-header-text, #334155) 10%, transparent);
}

.sa-archive .sa-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sa-space-4);
  min-height: 68px;
}

/* ── 5.1 Marca: cuadrado de 36 px, radio 12 px, fondo de acento ── */

.sa-archive .sa-header__logo {
  justify-self: start;
  min-width: 0;
}

.sa-archive .sa-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-3);
  color: var(--sa-ink);
  text-decoration: none;
}

.sa-archive .sa-logo__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--sa-radius-mark);
  background: var(--sa-accent);
  color: var(--sa-accent);
  overflow: hidden;
}

.sa-archive .sa-logo__icon svg {
  width: 26px;
  height: 26px;
}

.sa-archive .sa-logo__text {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sa-ink);
}

.sa-archive .sa-header__logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.sa-archive .sa-header__logo .custom-logo {
  height: 36px;
  width: auto;
  border-radius: var(--sa-radius-mark);
}

/* ── 5.2 Navegación plana centrada (como en ficha de anime) ── */

.sa-archive .sa-nav {
  display: flex;
  justify-self: center;
  align-items: center;
  min-width: 0;
  background: transparent;
}

.sa-archive .sa-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sa-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sa-archive .sa-nav__menu li {
  margin: 0;
  padding: 0;
}

.sa-archive .sa-nav__menu li a {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-2);
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: transparent;
  color: var(--sa-nav-text, var(--sa-ink-soft, #64748b));
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--sa-motion), color var(--sa-motion);
}

.sa-archive .sa-nav__menu li a .sa-nav__icon {
  flex: 0 0 auto;
  color: var(--sa-accent, var(--sa-primary, #2563eb));
}

.sa-archive .sa-nav__menu li a:hover,
.sa-archive .sa-nav__menu li a:focus-visible {
  background: var(--sa-primary-alpha-12, rgba(37, 99, 235, 0.12));
  color: var(--sa-ink, #1f2430);
}

.sa-archive .sa-nav__menu li a:hover .sa-nav__icon,
.sa-archive .sa-nav__menu li a:focus-visible .sa-nav__icon {
  color: var(--sa-accent, var(--sa-primary, #2563eb));
}

.sa-archive .sa-nav__menu li.current-menu-item > a,
.sa-archive .sa-nav__menu li a[aria-current="page"] {
  background: var(--sa-primary-alpha-12, rgba(37, 99, 235, 0.12));
  color: var(--sa-ink, #1f2430);
}

.sa-archive .sa-nav__menu li.current-menu-item > a .sa-nav__icon,
.sa-archive .sa-nav__menu li a[aria-current="page"] .sa-nav__icon {
  color: var(--sa-accent, var(--sa-primary, #2563eb));
}

.sa-archive .sa-nav__menu li.current-menu-item > a::after {
  display: none;
}

/* ── 5.3 Acciones: iconos mínimos sin círculo gris ── */

.sa-archive .sa-header__actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: var(--sa-space-2);
}

.sa-archive .sa-header__search-btn,
.sa-archive .sa-header__account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: transparent;
  color: var(--sa-header-text, var(--sa-ink, #334155));
  cursor: pointer;
  text-decoration: none;
  transition: background var(--sa-motion), color var(--sa-motion);
}

.sa-archive .sa-header__search-btn:hover,
.sa-archive .sa-header__account-btn:hover {
  background: var(--sa-primary-alpha-10, rgba(37, 99, 235, 0.10));
  color: var(--sa-primary, var(--sa-accent));
}

.sa-archive .sa-nav-toggle {
  display: none;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: transparent;
  cursor: pointer;
}

.sa-archive .sa-nav-toggle__bar {
  width: 18px;
  height: 2px;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-ink);
}

/* Foco visible en todos los controles de la Cabecera (Req 10.7) */
.sa-archive .sa-logo:focus-visible,
.sa-archive .sa-nav__menu li a:focus-visible,
.sa-archive .sa-header__search-btn:focus-visible,
.sa-archive .sa-header__account-btn:focus-visible,
.sa-archive .sa-nav-toggle:focus-visible {
  outline: 2px solid var(--sa-accent, var(--sa-primary));
  outline-offset: 2px;
}

/* ============================================================
   6. PIE
   Cuatro columnas, enlaces sociales circulares y copyright
   centrado, igual que en la portada y en la búsqueda (Req 1.17).
   ============================================================ */

.sa-archive .sa-footer--clone {
  margin-top: var(--sa-space-7);
  padding-block: var(--sa-space-7) var(--sa-space-5);
  border-top: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card) var(--sa-radius-card) 0 0;
  background-color: var(--sa-page);
  color: var(--sa-ink-soft);
}

.sa-archive .sa-footer--clone .sa-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sa-gap-block);
  align-items: start;
}

.sa-archive .sa-footer__col {
  min-width: 0;
}

/* ── 6.1 Columna de marca ── */

.sa-archive .sa-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-3);
  margin-bottom: var(--sa-space-3);
  color: var(--sa-ink);
  text-decoration: none;
}

.sa-archive .sa-footer__logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--sa-radius-mark);
  background: var(--sa-accent);
  color: var(--sa-accent);
  overflow: hidden;
}

.sa-archive .sa-footer__logo-icon svg {
  width: 26px;
  height: 26px;
}

.sa-archive .sa-footer__logo-img {
  height: 36px;
  width: auto;
  border-radius: var(--sa-radius-mark);
}

.sa-archive .sa-footer__logo-text {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sa-ink);
}

.sa-archive .sa-footer__tagline {
  margin: 0 0 var(--sa-space-4);
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sa-ink-soft);
}

/* ── 6.2 Enlaces sociales: botones circulares de 40 px (Req 10.7) ── */

.sa-archive .sa-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-archive .sa-footer__social-item {
  margin: 0;
}

.sa-archive .sa-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-surface);
  color: var(--sa-ink-soft);
  text-decoration: none;
  transition: background var(--sa-motion), color var(--sa-motion), border-color var(--sa-motion);
}

.sa-archive .sa-social:hover {
  background: var(--sa-accent-strong);
  border-color: var(--sa-accent-strong);
  color: var(--sa-on-accent);
}

.sa-archive .sa-social__icon {
  flex: 0 0 auto;
}

/* ── 6.3 Columnas de enlaces ── */

.sa-archive .sa-footer__title {
  margin: 0 0 var(--sa-space-3);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sa-ink);
}

.sa-archive .sa-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-archive .sa-footer__links li {
  margin: 0;
}

.sa-archive .sa-footer__links a,
.sa-archive .sa-footer__links span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sa-ink-soft);
  text-decoration: none;
  transition: color var(--sa-motion);
}

/* Texto pequeño en rojo sobre el fondo de página: el tinte oscuro llega a
   5,32:1 y el acento claro se quedaría en 3,86:1 (Req 10.9). */
.sa-archive .sa-footer__links a:hover {
  color: var(--sa-accent-strong);
}

.sa-archive .sa-footer__notice {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sa-ink-soft);
}

/* ── 6.4 Copyright centrado ── */

.sa-archive .sa-footer__copyright {
  margin: var(--sa-space-6) 0 0;
  padding-top: var(--sa-space-4);
  border-top: 1px solid var(--sa-border);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: var(--sa-ink-soft);
}

.sa-archive .sa-footer--clone a:focus-visible {
  outline: 2px solid var(--sa-blue);
  outline-offset: 2px;
}

/* ============================================================
   7. CABECERA_ARCHIVO
   Capa base (móvil primero): una sola columna con el título, la
   descripción, la línea de recuento y el Campo_Busqueda apilados y
   el campo al 100 % del ancho (Req 2.15). Los breakpoints de la
   sección 8 añaden las dos columnas de tablet y escritorio
   (Req 2.14).
   ============================================================ */

.sa-archive .sa-arch-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--sa-space-4);
}

.sa-archive .sa-arch-head__copy {
  min-width: 0;
}

/*
 * El título es el único `h1` de la vista y su tamaño **no** se declara aquí:
 * `inc/theme-options.php` inyecta `h1 { font-size: var(--sa-fs-3xl) !important }`
 * y ninguna especificidad vence a esa declaración. El tamaño sale de la
 * redefinición del token en el ámbito (sección 2): 30 px (Req 9.1, 9.2).
 */
.sa-archive .sa-arch-head__title {
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
  color: var(--sa-ink);
  overflow-wrap: anywhere;
}

/* Rótulo de la taxonomía con el token de texto principal y nombre del
   Termino_Vista con el color de acento (Req 2.2). Con 30 px el criterio de
   contraste aplicable es 3:1 y el par acento sobre página da 3,86:1
   (Req 10.9). */
.sa-archive .sa-arch-head__label {
  color: var(--sa-ink);
}

.sa-archive .sa-arch-head__term {
  color: var(--sa-accent);
}

/* Descripción del Termino_Vista con el token de texto secundario (Req 2.5).
   La regla `p { font-size: var(--sa-fs-base) }` del Bloque_Vars_Tema no lleva
   prioridad forzada, así que esta clase la gana por especificidad sin
   declarar nada sobre el selector `p` (Req 9.1). */
.sa-archive .sa-arch-head__desc {
  margin: var(--sa-space-3) 0 0;
  max-width: 72ch;
  font-size: var(--sa-fs-sm);
  line-height: 1.6;
  color: var(--sa-ink-soft);
  overflow-wrap: anywhere;
}

/* Línea de recuento: 13 px, dentro del rango de 12–14 px que pide el criterio
   2.7, y token de texto secundario con 4,54:1 sobre el fondo de página. */
.sa-archive .sa-arch-head__count {
  margin: var(--sa-space-2) 0 0;
  font-size: var(--sa-fs-xs);
  line-height: 1.5;
  color: var(--sa-ink-soft);
}

/* Campo_Busqueda: aquí solo su sitio en la retícula; la pastilla, el icono y
   el Boton_Limpiar se estilan en la sección 9. */
.sa-archive .sa-arch-head .sa-afield {
  width: 100%;
  min-width: 0;
}

/* ============================================================
   8. BREAKPOINTS DE LA CAPA BASE
   Tres condiciones: móvil (<= 640 px), tablet (641–1023 px) y
   escritorio (>= 1024 px). Cada regla lleva el prefijo en su
   propio selector, que es la segunda excepción que admite el
   criterio 1.9.
   ============================================================ */

/* ── 8.1 Viewport_Tablet ── */
@media (min-width: 641px) and (max-width: 1023px) {

  .sa-archive .sa-container {
    padding-inline: var(--sa-space-5);
  }

  .sa-archive .sa-nav {
    display: flex;
  }

  .sa-archive .sa-nav-toggle {
    display: none;
  }

  /* Cabecera_Archivo en dos columnas: copia a la izquierda y Campo_Busqueda a
     la derecha (Req 2.14) */
  .sa-archive .sa-arch-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  }

  .sa-archive .sa-footer--clone .sa-footer__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ── 8.2 Viewport_Escritorio ── */
@media (min-width: 1024px) {

  /* Contenedor de 1280 px centrado en la ventana (Req 1.5) */
  .sa-archive .sa-container {
    max-width: var(--sa-container);
    margin-inline: auto;
  }

  .sa-archive .sa-nav {
    display: flex;
  }

  .sa-archive .sa-nav-toggle {
    display: none;
  }

  /* Cabecera_Archivo en dos columnas (Req 2.14) */
  .sa-archive .sa-arch-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  }

  .sa-archive .sa-footer--clone .sa-footer__cols {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ── 8.3 Viewport_Movil ── */
@media (max-width: 640px) {

  .sa-archive .sa-container {
    padding-inline: var(--sa-space-4);
  }

  .sa-archive .sa-archive__inner {
    row-gap: var(--sa-gap-sm);
    padding-block: var(--sa-gap-sm) var(--sa-space-6);
  }

  .sa-archive .sa-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sa-space-2);
  }

  /* Navegación fuera del flujo y del orden de tabulación con `display: none`
     (nunca con `visibility` ni `opacity`); el hamburguesa toma su lugar. */
  .sa-archive .sa-nav {
    display: none;
  }

  .sa-archive .sa-nav.is-open {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 60;
    padding: var(--sa-space-3);
    border-bottom: 1px solid var(--sa-border);
    background: var(--sa-surface);
    box-shadow: var(--sa-shadow-card);
  }

  .sa-archive .sa-nav.is-open .sa-nav__menu {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--sa-radius-card);
  }

  .sa-archive .sa-nav.is-open .sa-nav__menu li a {
    width: 100%;
    justify-content: flex-start;
  }

  .sa-archive .sa-nav-toggle {
    display: inline-flex;
  }

  .sa-archive .sa-logo__text {
    font-size: 16px;
  }

  /* Cabecera_Archivo apilada en una sola columna, con el Campo_Busqueda al
     100 % del ancho disponible (Req 2.15) */
  .sa-archive .sa-arch-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--sa-space-3);
  }

  .sa-archive .sa-arch-head .sa-afield {
    width: 100%;
  }

  .sa-archive .sa-footer--clone .sa-footer__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sa-space-5);
  }
}
/* ============================================================
   9. CAMPO_BUSQUEDA, BARRA_FILTROS_ARCHIVO Y CUADRICULA_ARCHIVO
   Mismas medidas visuales que la portada y que la búsqueda, para
   que las tres vistas se vean iguales, pero declaradas aquí: en la
   vista de archivo no se encola `home-clone.css` ni
   `search-clone.css` (Req 5.2). Capa base móvil primero; los tres
   breakpoints de esta capa viven al final de la sección (9.5).

   Selectores reales, leídos de los partials de la vista:
     `.sa-afield`, `.sa-afield__icon`, `.sa-afield__label`,
     `.sa-afield__input`, `.sa-afield__clear`
       → template-parts/archive-header.php
     `.sa-filter-bar.sa-filter-bar--archive`, `.sa-filter-bar__group`,
     `.sa-filter-bar__label`, `.sa-filter-bar__icon`,
     `.sa-filter-bar__label-text`, `.sa-filter-bar__select`,
     `.sa-filter-bar__select--sort`, `.sa-filter-bar__sort`,
     `.sa-filter-bar__submit`
       → template-parts/archive-filter-bar.php
     `.sa-agrid-wrap`, `.sa-agrid-wrap__heading`, `.sa-agrid`
       → template-parts/archive-grid.php
     `.sa-card`, `.sa-card__link`, `.sa-card__poster`, `.sa-card__img`,
     `.sa-card__img-placeholder`, `.sa-card__status-badge`,
     `.sa-card__status-badge--finished`, `.sa-card__status-badge--airing`,
     `.sa-card__info`, `.sa-card__title`, `.sa-card__genres`,
     `.sa-card__genre-tag`, `.sa-card__meta`, `.sa-card__btn-download`
       → template-parts/anime-card.php

   Retículas por breakpoint (móvil <= 640 px, tablet 641–1023 px,
   escritorio >= 1024 px):
     `.sa-filter-bar--archive` → 1 / 3 / 6 columnas (Req 4.1, 4.22, 4.23)
     `.sa-agrid`               → 2 / 3 / 6 columnas (Req 5.7, 5.8, 5.9)
     separación de la retícula → 12 / 20 / 20 px    (Req 5.10)

   Contrastes de los pares de esta capa (Req 10.9). El texto de todos
   estos elementos es pequeño (10–14 px), así que el umbral aplicable
   es 4,5:1 y no 3:1:
     --sa-ink       sobre --sa-surface        → 15,51:1  (título de tarjeta)
     --sa-ink       sobre --sa-page           → 14,56:1  (texto de los `select`)
     --sa-ink-soft  sobre --sa-surface        →  4,83:1  (etiquetas, Linea_Meta)
     --sa-ink-soft  sobre --sa-page           →  4,54:1  (`select` deshabilitado)
     --sa-on-accent sobre --sa-accent-strong  →  5,32:1  (badge finalizado, botones)
     --sa-on-blue   sobre --sa-blue           →  5,17:1  (badge en emisión, chips)
   El acento claro `#e8384f` con blanco encima se queda en 4,11:1, así
   que ningún texto pequeño de esta capa se apoya en `--sa-accent`: ahí
   va el tinte oscuro `--sa-accent-strong`, que es el mismo recurso que
   ya emplean la Cabecera y el Pie de las secciones 5 y 6. El acento
   configurable sigue presente en los usos donde no hay texto encima
   (iconos de las etiquetas, bordes y estados de hover) y en el `h1` de
   30 px de la Cabecera_Archivo (Req 1.18, 1.19).
   ============================================================ */

/* ── 9.1 Campo_Busqueda: pastilla de radio 999 px con fondo del token
   de superficie, con el icono de lupa, el campo de texto y el
   Boton_Limpiar de izquierda a derecha (Req 2.11, 2.12) ── */

.sa-archive .sa-afield {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sa-space-2);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 0 var(--sa-space-2) 0 var(--sa-space-4);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-pill);
  background-color: var(--sa-surface);
  box-shadow: var(--sa-shadow-card);
}

.sa-archive .sa-afield__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--sa-ink-soft);
}

/* La etiqueta es el nombre accesible del campo y no debe verse: se retira de
   la vista sin salir del árbol de accesibilidad (Req 2.12, 10.8). */
.sa-archive .sa-afield__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Campo de texto con fondo de superficie y radio de 999 px (Req 2.12) */
.sa-archive .sa-afield__input {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--sa-space-2);
  border: 0;
  border-radius: var(--sa-radius-pill);
  background-color: var(--sa-surface);
  color: var(--sa-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
}

.sa-archive .sa-afield__input::placeholder {
  color: var(--sa-ink-soft);
  opacity: 1;
}

/* Boton_Limpiar: círculo de 40 px × 40 px en el extremo derecho (Req 10.7) */
.sa-archive .sa-afield__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: transparent;
  color: var(--sa-ink-soft);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background var(--sa-motion), color var(--sa-motion);
}

.sa-archive .sa-afield__clear:hover {
  background: var(--sa-page);
  color: var(--sa-accent-strong);
}

/* ── 9.2 Barra_Filtros_Archivo: tarjeta de radio 20 px con fondo del token
   de superficie y sombra difusa de alfa 0,07, por debajo del 0,10 que fija
   el criterio (Req 4.3). La capa base apila los seis controles y los
   breakpoints de 9.5 reparten 3 y 6 columnas (Req 4.1, 4.22, 4.23) ── */

.sa-archive .sa-filter-bar {
  display: grid;
  align-items: end;
  gap: var(--sa-space-4);
  margin: 0;
  padding: var(--sa-space-4) var(--sa-space-5);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  box-shadow: var(--sa-shadow-card);
}

/* Modificador de la vista de archivo: 1 columna en la capa base (Req 4.23) */
.sa-archive .sa-filter-bar--archive {
  grid-template-columns: minmax(0, 1fr);
}

/* Cada control es una columna de la retícula con su etiqueta encima
   (Req 4.1). `align-items: stretch` deja el borde izquierdo de la etiqueta y
   el del `select` en la misma vertical: desviación horizontal de 0 px. */
.sa-archive .sa-filter-bar__group,
.sa-archive .sa-filter-bar__sort {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sa-space-2);
  min-width: 0;
  margin: 0;
}

/* Etiqueta en mayúsculas de 11 px —dentro del rango de 10–12 px del criterio
   4.2— con el icono en línea a la izquierda del texto. Las mayúsculas salen
   de `text-transform`, no del texto del partial. */
.sa-archive .sa-filter-bar__label {
  display: flex;
  align-items: center;
  gap: var(--sa-space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000000;
}

/* Icono de la etiqueta: es contenido no textual y va marcado `aria-hidden`,
   así que el acento configurable puede pintarlo sin afectar al criterio de
   contraste de texto (Req 4.2, 10.9). */
.sa-archive .sa-filter-bar__icon {
  flex: 0 0 auto;
  color: var(--sa-accent);
}

.sa-archive .sa-filter-bar__label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Control con área de activación de 42 px de alto (Req 10.7) */
.sa-archive .sa-filter-bar__select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  padding: 0 var(--sa-space-6) 0 var(--sa-space-3);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-pill);
  background-color: var(--sa-page);
  background-image: none;
  color: var(--sa-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--sa-motion), background-color var(--sa-motion);
}

.sa-archive .sa-filter-bar__select:hover {
  border-color: var(--sa-accent);
}

/* Control_Fijado y controles sin términos: `disabled` en el marcado, aquí solo
   su acabado. `--sa-ink-soft` sobre `--sa-page` da 4,54:1 (Req 4.12, 4.17). */
.sa-archive .sa-filter-bar__select:disabled {
  color: var(--sa-ink-soft);
  cursor: default;
}

/* Cursor del `select`, dibujado con bordes para no fijar ningún color literal
   fuera de los Tokens_Diseno y no cargar ninguna imagen. */
.sa-archive .sa-filter-bar__group::after,
.sa-archive .sa-filter-bar__sort::after {
  content: "";
  position: absolute;
  right: var(--sa-space-4);
  bottom: 17px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--sa-ink-soft);
  border-bottom: 2px solid var(--sa-ink-soft);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Con seis columnas idénticas el control de orden no puede fijar un ancho
   mínimo propio: desbordaría la fila en tablet (Req 4.22). */
.sa-archive .sa-filter-bar__select--sort {
  min-width: 0;
}

/* Boton_Aplicar visible y en el orden de tabulación sin JavaScript (Req 4.19).
   Cierra la retícula en su propia fila para no robar ancho a ninguno de los
   seis controles. Texto de 13 px, así que el fondo es el tinte oscuro del
   acento: 5,32:1 con `--sa-on-accent` (Req 10.9). */
.sa-archive .sa-filter-bar__submit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 40px;
  min-height: 42px;
  padding: 0 var(--sa-space-5);
  border: 1px solid var(--sa-accent-strong);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-accent-strong);
  color: var(--sa-on-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--sa-motion), border-color var(--sa-motion);
}

.sa-archive .sa-filter-bar__submit:hover {
  background: var(--sa-blue-strong);
  border-color: var(--sa-blue-strong);
}

/* `home-filters.js` marca el botón con el atributo `hidden` cuando el envío
   pasa a ser automático: el `display` de arriba no debe reactivarlo (Req 4.20). */
.sa-archive .sa-filter-bar__submit[hidden] {
  display: none;
}

/* ── 9.3 Cuadricula_Archivo: 2 / 3 / 6 columnas de ancho idéntico con
   separaciones de 12 / 20 / 20 px, al 100 % del ancho del contenedor y sin
   ninguna columna lateral adyacente (Req 5.7–5.11) ── */

/* La región de la retícula es hija directa de `.sa-archive__inner`, que es una
   retícula de una sola columna: aquí no hay nada que compita por el ancho
   (Req 5.11). */
.sa-archive .sa-agrid-wrap {
  width: 100%;
  min-width: 0;
}

/* Encabezado de la región: aporta el nombre accesible y no debe verse
   (Req 10.6). Se retira de la vista sin salir del árbol de accesibilidad. */
.sa-archive .sa-agrid-wrap__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Capa base (móvil): 2 columnas con separación de 12 px (Req 5.9, 5.10) */
.sa-archive .sa-agrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sa-gap-sm);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* `minmax(0, 1fr)` en la retícula y `min-width: 0` en las tarjetas: un título
   largo no puede ensanchar su columna ni provocar desbordamiento horizontal
   (Req 5.7, 5.8, 5.9). */
.sa-archive .sa-agrid > * {
  min-width: 0;
}

/* ── 9.4 Tarjeta_Anime: el marcado es el de `template-parts/anime-card.php`,
   compartido con la portada y con la búsqueda; aquí solo se estila, con las
   mismas medidas (Req 5.2, 5.6) ── */

.sa-archive .sa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 0 0 var(--sa-space-3);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  box-shadow: var(--sa-shadow-card);
  overflow: hidden;
  transition: transform var(--sa-motion), box-shadow var(--sa-motion), border-color var(--sa-motion);
}

.sa-archive .sa-card:hover {
  transform: translateY(-2px);
  border-color: var(--sa-blue);
  box-shadow: var(--sa-shadow-hover);
}

.sa-archive .sa-card__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* Póster con relación de aspecto 2:3 y esquinas superiores de 20 px */
.sa-archive .sa-card__poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--sa-radius-card) var(--sa-radius-card) 0 0;
  background: linear-gradient(160deg, var(--sa-blue), var(--sa-blue-strong));
  overflow: hidden;
}

.sa-archive .sa-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sa-motion);
}

.sa-archive .sa-card:hover .sa-card__img {
  transform: scale(1.04);
}

/* Portada ausente: misma relación de aspecto 2:3, mismo radio de borde e
   indicador visual de la falta de imagen. El bloque va marcado `aria-hidden`
   en el partial, así que el indicador es puramente decorativo (Req 5.12). */
.sa-archive .sa-card__img-placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--sa-radius-card) var(--sa-radius-card) 0 0;
  background: linear-gradient(160deg, var(--sa-border), var(--sa-blue));
}

.sa-archive .sa-card__img-placeholder::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--sa-surface);
  border-radius: 6px;
  opacity: 0.8;
}

/* Badge de estado sobre la esquina superior izquierda del póster (Req 5.5) */
.sa-archive .sa-card__status-badge {
  position: absolute;
  top: var(--sa-space-2);
  left: var(--sa-space-2);
  z-index: 2;
  padding: 5px var(--sa-space-2);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-blue);
  color: var(--sa-on-blue);
  box-shadow: none;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Estado finalizado: rojo del acento. El texto del badge mide 10 px, así que
   el umbral de contraste aplicable es 4,5:1 y el acento claro `#e8384f` solo
   llega a 4,11:1 con blanco encima; el tinte oscuro del acento
   `--sa-accent-strong` da 5,32:1 y sí cumple (Req 5.5, 10.9). */
.sa-archive .sa-card__status-badge--finished {
  background: var(--sa-accent-strong);
  color: var(--sa-on-accent);
  box-shadow: none;
}

/* Resto de estados: azul secundario con blanco encima, 5,17:1 (Req 5.5) */
.sa-archive .sa-card__status-badge--airing {
  background: var(--sa-blue);
  color: var(--sa-on-blue);
}

.sa-archive .sa-card__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sa-space-2);
  min-width: 0;
  padding: var(--sa-space-3) var(--sa-space-3) var(--sa-space-2);
}

/*
 * El título de la tarjeta es un `h3` y su tamaño **no** se declara sobre ese
 * selector: `inc/theme-options.php` inyecta
 * `.sa-card__title { font-size: var(--sa-fs-sm) !important }`, que ninguna
 * especificidad vence. El tamaño sale de la redefinición del token en el
 * ámbito (sección 2): 14 px, dentro del rango de 13–15 px (Req 9.1, 9.3).
 * El `font-size` que va aquí es el valor de reserva para cuando el
 * Bloque_Vars_Tema no está presente en la respuesta, y coincide con él.
 */
.sa-archive .sa-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin: 0;
  font-size: var(--sa-fs-sm);
  font-weight: 800;
  line-height: 1.35;
  color: var(--sa-ink);
  transition: color var(--sa-motion);
}

.sa-archive .sa-card:hover .sa-card__title {
  color: var(--sa-accent-strong);
}

.sa-archive .sa-card__genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-1);
  min-width: 0;
}

/* Chips de género: pastilla azul con blanco encima, 5,17:1 (Req 5.6) */
.sa-archive .sa-card__genre-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px var(--sa-space-2);
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-blue);
  color: var(--sa-on-blue);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Linea_Meta: 11 px con el token de texto secundario, 4,83:1 (Req 5.6) */
.sa-archive .sa-card__meta {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sa-ink-soft);
}

/* Botón "Ver descargas": hermano del enlace principal, a todo el ancho
   interior de la tarjeta y con área de activación de 40 px (Req 5.3, 10.7).
   Texto de 13 px sobre rojo: tinte oscuro del acento, 5,32:1 (Req 10.9). */
.sa-archive .sa-card__btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: var(--sa-space-2);
  box-sizing: border-box;
  width: auto;
  min-height: 40px;
  height: auto;
  margin: auto var(--sa-space-3) 0;
  padding: 0 var(--sa-space-3);
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-accent-strong);
  color: var(--sa-on-accent);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background var(--sa-motion);
}

.sa-archive .sa-card__btn-download:hover {
  background: var(--sa-blue-strong);
}

.sa-archive .sa-card__btn-download svg {
  flex: 0 0 auto;
}

/* ── 9.5 Breakpoints de esta capa. Cada regla lleva el prefijo `.sa-archive`
   en su propio selector, que es la segunda excepción que admite el criterio
   1.9 ── */

/* Viewport_Tablet: 3 columnas en la barra de filtros y 3 en la retícula
   (Req 4.22, 5.8, 5.10) */
@media (min-width: 641px) and (max-width: 1023px) {

  .sa-archive .sa-filter-bar--archive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sa-archive .sa-agrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sa-gap);
  }
}

/* Viewport_Escritorio: 6 columnas en la barra de filtros y 6 en la retícula,
   con separación de 20 px (Req 4.1, 5.7, 5.10) */
@media (min-width: 1024px) {

  .sa-archive .sa-filter-bar--archive {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sa-archive .sa-agrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sa-gap);
  }
}

/* Viewport_Movil: los seis controles apilados al 100 % del ancho y sin
   desbordamiento horizontal (Req 4.23), y 2 columnas con separación de 12 px
   en la retícula (Req 5.9, 5.10) */
@media (max-width: 640px) {

  .sa-archive .sa-filter-bar {
    padding: var(--sa-space-3) var(--sa-space-4);
    gap: var(--sa-space-3);
  }

  .sa-archive .sa-filter-bar--archive {
    grid-template-columns: minmax(0, 1fr);
  }

  .sa-archive .sa-filter-bar__select,
  .sa-archive .sa-filter-bar__select--sort {
    width: 100%;
    min-width: 0;
  }

  .sa-archive .sa-filter-bar__submit {
    width: 100%;
    justify-self: stretch;
  }

  .sa-archive .sa-agrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sa-gap-sm);
  }
}

/* ============================================================
   10. PAGINACION_ARCHIVO, LISTADO_SIMPLE, ESTADO_VACIO Y A11Y
   Última capa de la hoja. Igual que las secciones 5, 6 y 9, todo
   lo que aquí se declara vive solo en esta hoja: en la vista de
   archivo no se encolan `home-clone.css` ni `search-clone.css`, y
   `light-theme.css` sí trae un `.sa-empty-state` propio, que estas
   reglas ganan por especificidad (0,2,0 frente a 0,1,0) y por
   orden de encolado, sin ninguna declaración forzada (Req 1.10).

   Selectores reales, leídos de los partials de la vista:
     `.sa-apagination`, `.sa-apagination__item`,
     `.sa-apagination__item--current`,
     `.sa-apagination__item--disabled`,
     `.sa-apagination__item--gap`
       → template-parts/archive-pagination.php
     `.sa-alist`, `.sa-alist__heading`, `.sa-alist__item`,
     `.sa-alist__title`, `.sa-alist__link`, `.sa-alist__date`,
     `.sa-alist__excerpt`
       → template-parts/archive-list.php
     `.sa-arch-empty`, `.sa-arch-empty__cta`
       → template-parts/archive-grid.php
     `.sa-empty-state`, `.sa-empty-state--compact`,
     `.sa-empty-state__text`, `.sa-empty-state__title`
       → template-parts/home-empty.php
     `screen-reader-text`
       → template-parts/archive-list.php, archive-grid.php

   Contrastes de los pares de esta capa (Req 10.9). Todo el texto de
   estos bloques es menor de 24 px, así que el umbral aplicable es
   4,5:1:
     --sa-ink       sobre --sa-surface       → 15,51:1  (controles enlazables,
                                                        títulos del listado)
     --sa-ink-soft  sobre --sa-page          →  4,54:1  (deshabilitados y huecos)
     --sa-ink-soft  sobre --sa-surface       →  4,83:1  (fechas, extractos, aviso)
     --sa-on-accent sobre --sa-accent-strong →  5,67:1  (página actual, "Explorar
                                                        animes")
   ============================================================ */

/* ── 10.1 Paginacion_Archivo: fila centrada horizontalmente bajo la
   Cuadricula_Archivo (Req 6.1). El bloque es hijo directo de
   `.sa-archive__inner`, una retícula de una sola columna, así que el centrado
   se resuelve con `justify-content: center` sobre todo el ancho del
   contenedor. `flex-wrap` la mantiene dentro del contenedor en móvil, donde
   "← Anterior" y "Siguiente →" no caben en una sola línea ── */

.sa-archive .sa-apagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sa-space-2);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Área de activación de 40 px × 40 px en todos los controles (Req 10.7) */
.sa-archive .sa-apagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--sa-space-3);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-surface);
  color: var(--sa-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--sa-motion), color var(--sa-motion), border-color var(--sa-motion);
}

/* Solo los enlaces reaccionan al puntero: la página actual, los huecos y los
   controles deshabilitados se emiten como `span` (Req 6.6, 6.7, 6.8). */
.sa-archive a.sa-apagination__item:hover {
  border-color: var(--sa-accent);
  color: var(--sa-accent-strong);
}

/*
 * Página actual: fondo del color de acento con su texto por encima del 4,5:1
 * que exige el criterio 6.3. El rótulo mide 13 px, así que el umbral
 * aplicable es 4,5:1 y no 3:1, y el acento claro `#e8384f` con
 * `--sa-on-accent` encima solo llega a 4,11:1: no cumpliría.
 *
 * El criterio 6.3 pide "fondo del color de acento" y el 10.9 pide 4,5:1, y
 * los dos se satisfacen a la vez con el tinte oscuro del mismo acento,
 * `--sa-accent-strong` (5,67:1 con `--sa-on-accent`): es el color de acento
 * de la vista, de la misma familia y con el mismo tono, oscurecido lo justo
 * para pasar el umbral. Es el mismo recurso que ya emplean el elemento activo
 * de la navegación (sección 5), el hover del Pie (sección 6) y el badge de
 * estado finalizado, el Boton_Aplicar y el botón "Ver descargas" de la
 * sección 9. El acento configurable sigue presente en el borde del hover de
 * los controles enlazables, donde no hay texto encima (Req 1.18, 1.19).
 */
.sa-archive .sa-apagination__item--current {
  border-color: var(--sa-accent-strong);
  background: var(--sa-accent-strong);
  color: var(--sa-on-accent);
  cursor: default;
}

/* "← Anterior" en la primera página y "Siguiente →" en la última: texto sin
   enlace, sin fondo y sin borde (Req 6.7, 6.8). `--sa-ink-soft` sobre el
   fondo de página da 4,54:1 (Req 10.9). */
.sa-archive .sa-apagination__item--disabled {
  border-color: transparent;
  background: none;
  color: var(--sa-ink-soft);
  cursor: default;
}

/* Hueco entre bloques de números: solo el glifo, sin caja, sin fondo y sin
   ancho mínimo, porque no es un control activable. */
.sa-archive .sa-apagination__item--gap {
  min-width: 0;
  padding: 0 var(--sa-space-1);
  border-color: transparent;
  background: none;
  color: var(--sa-ink-soft);
  font-weight: 600;
}

/* ── 10.2 Listado_Simple de la Vista_Archivo_Generico: una columna de
   entradas con el título enlazado, la fecha y el extracto, en el orden que
   emite el partial (Req 8.1, 8.5) ── */

.sa-archive .sa-alist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--sa-space-4);
  width: 100%;
  min-width: 0;
}

/* Encabezado de la región: aporta el nombre accesible y no debe verse
   (Req 10.6). Se retira de la vista sin salir del árbol de accesibilidad. */
.sa-archive .sa-alist__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.sa-archive .sa-alist__item {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-2);
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: var(--sa-space-5);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  box-shadow: var(--sa-shadow-card);
  transition: border-color var(--sa-motion), box-shadow var(--sa-motion);
}

.sa-archive .sa-alist__item:hover {
  border-color: var(--sa-blue);
  box-shadow: var(--sa-shadow-hover);
}

/*
 * El título de la entrada es un `h2` y el tamaño se declara sobre su clase,
 * nunca sobre el selector `h2`: la hoja mantiene 0 declaraciones de tamaño
 * sobre `h1`, `h2`, `h3` y `p` (Req 9.1). El Bloque_Vars_Tema fuerza el
 * tamaño de `h2.sa-h2` y de `.sa-content__body > h2`, y esta clase no es
 * ninguna de las dos, así que el valor del ámbito se aplica sin competencia.
 */
.sa-archive .sa-alist__title {
  margin: 0;
  font-size: var(--sa-fs-xl);
  font-weight: 800;
  line-height: 1.3;
  color: var(--sa-ink);
  overflow-wrap: anywhere;
}

/* Enlace al permalink con área de activación de 40 px de alto (Req 10.7) */
.sa-archive .sa-alist__link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 40px;
  min-height: 40px;
  color: var(--sa-ink);
  text-decoration: none;
  transition: color var(--sa-motion);
}

/* Texto de 18 px sobre el fondo de superficie: el tinte oscuro del acento da
   5,67:1 y el acento claro se quedaría en 3,74:1 (Req 10.9). */
.sa-archive .sa-alist__link:hover {
  color: var(--sa-accent-strong);
}

/* Fecha de publicación: 13 px con el token de texto secundario, 4,83:1 sobre
   el fondo de superficie (Req 8.5, 10.9). */
.sa-archive .sa-alist__date {
  display: block;
  font-size: var(--sa-fs-xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--sa-ink-soft);
}

/* Extracto: la regla `p { font-size: var(--sa-fs-base) }` del Bloque_Vars_Tema
   no lleva prioridad forzada, así que esta clase la gana por especificidad sin
   declarar nada sobre el selector `p` (Req 9.1). */
.sa-archive .sa-alist__excerpt {
  margin: 0;
  max-width: 78ch;
  font-size: var(--sa-fs-sm);
  line-height: 1.6;
  color: var(--sa-ink-soft);
  overflow-wrap: anywhere;
}

/* ── 10.3 Estado_Vacio y salida "Explorar animes"
   El marcado del aviso lo emite `template-parts/home-empty.php`, reutilizado
   sin cambios, y su estilo vive en la Hoja_Home, que aquí no se encola: la
   tarjeta del aviso se declara en esta hoja. Sirve a la Cuadricula_Archivo sin
   resultados, con la consulta fallida o con la página fuera de rango, y al
   Listado_Simple sin entradas (Req 7.1, 6.11, 3.13, 8.7) ── */

.sa-archive .sa-arch-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sa-space-4);
  width: 100%;
  min-width: 0;
}

.sa-archive .sa-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--sa-space-7) var(--sa-space-5);
  border: 1px dashed var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  box-shadow: none;
  text-align: center;
}

.sa-archive .sa-empty-state--compact {
  padding: var(--sa-space-4);
  border-radius: var(--sa-radius-item);
  background: var(--sa-page);
}

.sa-archive .sa-empty-state__text {
  margin: 0;
  font-size: var(--sa-fs-sm);
  line-height: 1.6;
  color: var(--sa-ink-soft);
  overflow-wrap: anywhere;
}

/*
 * El aviso de la vista degradada se emite con `heading => true` y es el único
 * `h1` de esa respuesta. Su tamaño lo fija `--sa-fs-3xl` en el ámbito
 * (sección 2), así que aquí solo van el grosor y el color: la hoja no declara
 * tamaño sobre `h1` (Req 9.1). Con 30 px el umbral de contraste es 3:1 y
 * `--sa-ink` sobre `--sa-surface` da 15,51:1 (Req 10.9).
 */
.sa-archive .sa-empty-state__title {
  font-weight: 800;
  color: var(--sa-ink);
}

/* Enlace "Explorar animes" bajo el Estado_Vacio: pastilla con el tinte oscuro
   del acento y área de activación de 40 px × 40 px (Req 7.4, 10.7). Texto de
   13 px sobre rojo: 5,67:1 con `--sa-on-accent` (Req 10.9). */
.sa-archive .sa-arch-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--sa-space-5);
  border: 1px solid var(--sa-accent-strong);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-accent-strong);
  color: var(--sa-on-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--sa-motion), border-color var(--sa-motion);
}

.sa-archive .sa-arch-empty__cta:hover {
  background: var(--sa-blue-strong);
  border-color: var(--sa-blue-strong);
}

/* ── 10.4 Texto solo para lectores de pantalla
   Ninguna hoja de la Cadena_Hojas_Archivo define `.screen-reader-text`, así
   que sin esta regla los `h2` que dan nombre a la Cuadricula_Archivo y al
   Listado_Simple se verían. Se retiran de la vista sin salir del árbol de
   accesibilidad, para que las regiones conserven su nombre (Req 10.6) ── */

.sa-archive .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  word-wrap: normal;
}

/* ── 10.5 Indicador de foco visible y áreas de activación (Req 10.7)
   Contorno de 2 px con el token secundario en todo control interactivo de la
   vista. La regla genérica cubre los controles que no llevan clase propia y la
   lista explícita repite la declaración para ganar la cascada a
   `light-theme.css`, a `typography.css` y a `download-cards.css` sin ninguna
   declaración forzada. Las secciones 5, 6 y 9 ya declaran el mismo contorno
   para la Cabecera, el Pie y los controles de filtro; aquí se cierran los
   bloques de esta capa ── */

.sa-archive a:focus-visible,
.sa-archive button:focus-visible,
.sa-archive select:focus-visible,
.sa-archive input:focus-visible {
  outline: 2px solid var(--sa-blue);
  outline-offset: 2px;
}

.sa-archive .sa-afield__input:focus-visible,
.sa-archive .sa-afield__clear:focus-visible,
.sa-archive .sa-filter-bar__select:focus-visible,
.sa-archive .sa-filter-bar__submit:focus-visible,
.sa-archive .sa-card__link:focus-visible,
.sa-archive .sa-card__btn-download:focus-visible,
.sa-archive .sa-apagination__item:focus-visible,
.sa-archive .sa-alist__link:focus-visible,
.sa-archive .sa-arch-empty__cta:focus-visible {
  outline: 2px solid var(--sa-blue);
  outline-offset: 2px;
}

/* Cierre del área de activación mínima: los controles con clase propia ya
   fijan sus 40 px o más en las secciones 5, 6, 9 y 10.1–10.3; esta regla cubre
   los `button` y los `select` de la vista que no lleven ninguna de esas
   clases, para que ningún control quede por debajo de 40 px × 40 px
   (Req 10.7). El campo de texto del Campo_Busqueda queda fuera a propósito:
   su alto mínimo ya son 40 px y su ancho debe poder encogerse hasta 0 dentro
   de la pastilla, que es lo que evita el desbordamiento horizontal en móvil. */
.sa-archive .sa-archive__inner button,
.sa-archive .sa-archive__inner select {
  min-width: 40px;
  min-height: 40px;
}

/* ── 10.6 Movimiento reducido
   Con `prefers-reduced-motion: reduce` se anulan las transiciones y los
   desplazamientos de hover de toda la vista; el resaltado se mantiene solo con
   color, borde y sombra. Cada regla lleva el prefijo `.sa-archive` en su
   propio selector, que es la segunda excepción que admite el criterio 1.9 ── */

@media (prefers-reduced-motion: reduce) {

  .sa-archive .sa-logo,
  .sa-archive .sa-nav__menu li a,
  .sa-archive .sa-header__search-btn,
  .sa-archive .sa-header__account-btn,
  .sa-archive .sa-nav-toggle,
  .sa-archive .sa-social,
  .sa-archive .sa-footer__links a,
  .sa-archive .sa-afield__clear,
  .sa-archive .sa-filter-bar__select,
  .sa-archive .sa-filter-bar__submit,
  .sa-archive .sa-card,
  .sa-archive .sa-card__img,
  .sa-archive .sa-card__title,
  .sa-archive .sa-card__btn-download,
  .sa-archive .sa-apagination__item,
  .sa-archive .sa-alist__item,
  .sa-archive .sa-alist__link,
  .sa-archive .sa-arch-empty__cta {
    transition: none;
  }

  .sa-archive .sa-card:hover {
    transform: none;
  }

  .sa-archive .sa-card:hover .sa-card__img {
    transform: none;
  }
}

/* ── 10.7 Breakpoints de esta capa ── */

/* Viewport_Movil: la paginación se aprieta para caber en una fila corta sin
   bajar de los 40 px de área de activación, y las tarjetas del listado y del
   aviso reducen su relleno (Req 6.1, 10.7) */
@media (max-width: 640px) {

  .sa-archive .sa-apagination {
    gap: var(--sa-space-1);
  }

  .sa-archive .sa-apagination__item {
    padding: 0 var(--sa-space-2);
    font-size: 12px;
  }

  .sa-archive .sa-alist {
    row-gap: var(--sa-space-3);
  }

  .sa-archive .sa-alist__item {
    padding: var(--sa-space-4);
  }

  .sa-archive .sa-empty-state {
    padding: var(--sa-space-6) var(--sa-space-4);
  }

  .sa-archive .sa-arch-empty__cta {
    width: 100%;
  }
}

/* ============================================================
   11. GANCHOS DE LA CAPA_AJAX
   Dos reglas para los dos estados que la Capa_Ajax introduce en
   `div.sa-agrid#sa-archive-grid`: la cuadrícula que aloja el
   Estado_Vacio y la cuadrícula ocupada por una Peticion_Vigente.
   Ambas ganan a la sección 9 por orden de cascada, así que no
   necesitan ninguna declaración de prioridad forzada (Req 1.8).
   0 declaraciones de color: solo `display` y `opacity`.
   ============================================================ */

/* La Cuadricula_Archivo aloja el bloque del Estado_Vacio con su enlace
   "Explorar animes" cuando la consulta devuelve 0 resultados, en lugar de
   emitirlo como sección hermana. En ese caso deja de repartir columnas y vuelve
   al flujo de bloque, para que el aviso ocupe todo el ancho (Req 7.15). */
.sa-archive .sa-agrid--empty {
  display: block;
}

/* Indicador de carga: mientras existe una Peticion_Vigente, la Capa_Ajax marca
   la cuadrícula con `aria-busy="true"`. Los resultados anteriores siguen en el
   DOM y solo se atenúan a 0,55 —dentro del margen de 0,4 a 0,7 del criterio
   9.4—, con 0 bloques de marcador de posición. Al retirarse el atributo, la
   opacidad vuelve por sí sola a su valor completo (Req 9.10). */
.sa-archive .sa-agrid[aria-busy="true"] {
  opacity: 0.55;
  transition: opacity var(--sa-motion);
}

/* Movimiento reducido: la atenuación se aplica sin transición animada
   (Req 9.12). La regla lleva el prefijo `.sa-archive` en su propio selector. */
@media (prefers-reduced-motion: reduce) {

  .sa-archive .sa-agrid[aria-busy="true"] {
    transition: none;
  }
}