/* Responsive y accesibilidad WCAG 2.2 AA — ARCA del Tormes
 * ---------------------------------------------------------------------------
 * Esta hoja se carga la última a propósito: corrige y endurece lo que definen
 * catalogo.css y las hojas de sección, sin tener que reescribirlas.
 *
 * Qué resuelve, con el criterio WCAG al que responde:
 *
 *  1. Navegación en móvil (antes la barra lateral se ocultaba con display:none
 *     por debajo de 900px y desaparecían catorce secciones del catálogo).
 *  2. 1.4.11 Contraste de elementos no textuales y 2.4.11 Apariencia del foco:
 *     el indicador de foco anterior (#e2a93f) daba 2.07:1 sobre los fondos
 *     claros del tema, por debajo del mínimo de 3:1. Se sustituye por un
 *     indicador de doble anillo que contrasta sobre fondo claro y oscuro.
 *  3. 2.5.8 Tamaño del objetivo (mínimo): 24x24 CSS px para todo control
 *     interactivo; los controles principales van a 44x44.
 *  4. 1.4.3 Contraste mínimo: se oscurecen los grises que quedaban entre
 *     4.1:1 y 4.5:1 sobre los fondos crema del tema.
 *  5. 1.4.4 Redimensionar texto y 1.4.10 Reajuste: sin desbordes horizontales
 *     a 320px de ancho.
 *  6. 2.3.3 Animación desde interacciones: todo el movimiento se anula bajo
 *     prefers-reduced-motion.
 *
 * Contrastes medidos de la paleta (sobre --cat-surface #fffdf8):
 *   --cat-ink        15.46:1     --cat-blue        8.81:1
 *   --cat-ink-soft    7.90:1     --cat-blue-deep  12.36:1
 *   --cat-red         8.48:1     --cat-red-deep   11.37:1
 * El dorado --cat-gold (3.05:1) solo se usa en bordes, iconos y glifos
 * decorativos, nunca como color de texto sobre fondo claro.
 */

/* ==========================================================================
   1. Foco visible — 2.4.7, 2.4.11, 1.4.11
   ========================================================================== */

/* Doble anillo: el interior claro y el exterior oscuro garantizan >= 3:1
   contra cualquier fondo del tema, claro u oscuro, sin tener que declarar un
   color de foco distinto por sección.
   :is(), no :where(): :where() tiene especificidad cero a propósito, pero
   eso significa que "a:focus-visible" de catalogo.css (especificidad 0-1-1,
   el viejo foco #e2a93f de 2.07:1 de contraste que este fichero dice
   sustituir) le sigue ganando SIEMPRE aquí, cargue esta hoja la última o no
   -- no es un problema de orden de carga, es una guerra de especificidad
   que :where() pierde por diseño. Encontrado en vivo: el enlace de
   "política de privacidad y cookies" del aviso de cookies recibe foco al
   abrirse el banner y se ve con el anillo dorado antiguo, no con el doble
   anillo de aquí. :is() toma la especificidad de "a" (0-0-1) + la propia
   pseudoclase, empata con la regla vieja, y gana el empate por ser la
   última hoja cargada -- que es justo la garantía que este fichero
   pretendía dar desde el principio. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #10222b;
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px #ffd76d;
}

/* Sobre fondos oscuros se invierte el orden de los anillos. */
.cat-sidebar :where(a, button, summary):focus-visible,
.cat-footer :where(a, button):focus-visible,
.cat-about-hero :where(a, button):focus-visible,
.cat-data-hero :where(a, button):focus-visible,
.cat-hero__tools :where(a):focus-visible {
  outline-color: #ffd76d;
  box-shadow: 0 0 0 6px #10222b;
}

.skip-link:focus {
  z-index: 100;
  outline: 3px solid #10222b;
  box-shadow: 0 0 0 6px #ffd76d;
}

/* ==========================================================================
   2. Tamaño mínimo del objetivo — 2.5.8
   ========================================================================== */

.cat-nav a,
.cat-export-menu__links a,
.cat-chip-list a,
.cat-link-list a,
.cat-about-chips a,
.cat-pagination a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Los enlaces dentro de un párrafo quedan excluidos del mínimo (excepción de
   «objetivo en línea» del propio criterio 2.5.8). */
.cat-about-prose a,
.cat-about-details__body a,
p a {
  min-height: 0;
  display: inline;
}

button,
summary,
input[type="submit"],
input[type="search"] {
  min-height: 44px;
}

.cat-about-details summary,
.cat-data-register summary {
  min-height: 48px;
}

/* ==========================================================================
   3. Contraste de texto — 1.4.3
   ========================================================================== */

/* Estos dos grises daban 4.11:1 y 4.20:1 sobre --cat-paper, por debajo del
   mínimo AA de 4.5:1 para texto normal. Se oscurecen a #55666d (>= 5.5:1
   sobre todos los fondos claros del tema). */
.cat-tree-empty,
.cat-source-note {
  color: #55666d;
}

/* Bordes de campos de formulario: 1.4.11 exige 3:1 para el contorno que
   identifica el control. #bdb09e daba 1.9:1 sobre blanco. */
.cat-topbar__search,
.cat-search__control input,
.cat-registered-people__search input,
input[type="search"],
input[type="text"],
select,
textarea {
  border-color: #6d6252;
}

/* ==========================================================================
   4. Navegación móvil — el cajón lateral
   ========================================================================== */

.cat-nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  min-width: 44px;
  min-height: 44px;
  padding: .4rem .85rem;
  border: 1px solid var(--cat-blue-deep);
  background: var(--cat-blue-deep);
  color: #fff;
  cursor: pointer;
  font: 700 .85rem var(--cat-sans);
}

/* Igual que el botón de menú: solo existe en móvil. En escritorio el
   buscador está desplegado de forma permanente y esta lupa sobra. */
.cat-search-toggle {
  display: none;
}

.cat-nav-toggle__bars {
  display: grid;
  width: 18px;
  gap: 3px;
}

.cat-nav-toggle__bars span {
  display: block;
  height: 2px;
  background: currentcolor;
}

.cat-nav-backdrop {
  position: fixed;
  z-index: 35;
  inset: 0;
  background: rgb(10 26 33 / 62%);
}

.cat-nav-backdrop[hidden] { display: none; }

.cat-sidebar__close {
  display: none;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 44px;
  margin-bottom: .5rem;
  padding: .5rem .8rem;
  border: 1px solid rgb(255 255 255 / 45%);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: 700 .85rem var(--cat-sans);
}

.cat-sidebar__close:hover { background: rgb(255 255 255 / 12%); }

@media (max-width: 900px) {
  /* Sin JavaScript la barra se muestra en línea bajo la cabecera: nunca queda
     contenido inaccesible por depender de un script. */
  .cat-sidebar {
    position: static;
    display: flex;
    width: auto;
  }

  /* Con JavaScript pasa a comportarse como cajón lateral. */
  .has-js-nav .cat-sidebar {
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    width: min(20rem, 86vw);
    max-width: 86vw;
    transform: translateX(-102%);
    transition: transform .28s ease;
    box-shadow: 0 0 40px rgb(0 0 0 / 35%);
  }

  /* Bug real confirmado (no solo sospechado -- ver docs/THEME-ARCA.md):
     el boton cambiaba aria-expanded y añadia is-open correctamente, pero
     el cajon nunca se movia visualmente. Con !important para que gane
     con seguridad frente a cualquier otra regla de transform que le
     compita, en vez de depender de un empate de especificidad fragil. */
  .has-js-nav .cat-sidebar.is-open { transform: none !important; }

  .cat-nav-toggle { display: inline-flex; }
  .has-js-nav .cat-sidebar__close { display: flex; }

  .cat-page { margin-left: 0; }

  .cat-topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    min-height: 64px;
    justify-content: flex-start;
  }

  .cat-topbar__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-right: auto;
    color: var(--cat-ink);
    font-weight: 700;
    text-decoration: none;
  }

  /* ------------------------------------------------------------------------
     CABECERA MÓVIL — reescrita 2026-08-14
     ------------------------------------------------------------------------
     Antes: [menú] [logo] + buscador entero en una segunda fila, y un estado
     "encogido" al bajar el scroll que reducía el logo a 24px y escondía a la
     vez el nombre y el buscador. El resultado real, con captura del
     propietario: un logo ilegible al lado del enlace de menú y ningún acceso
     visible a la búsqueda. Además, ese estado era la causa de que el menú
     "se viera distinto según se hiciera scroll arriba o abajo".

     Ahora: una sola fila, siempre igual — [menú] [ARCA del Tormes] [lupa] —
     y el buscador completo se despliega al pulsar la lupa. Es el patrón
     estándar cuando el ancho no da para una barra de búsqueda permanente
     (expansión de icono a campo), y es lo que hacen Europeana y Wellcome
     Collection, que se visitaron como referencia. El logotipo se retira en
     móvil: a 38px no se distinguía y competía con el nombre, que sí se lee.
     Al no haber ya estado "encogido", la cabecera no cambia con el scroll.
     ------------------------------------------------------------------------ */

  .cat-topbar {
    flex-wrap: wrap;
    row-gap: .6rem;
  }

  .cat-topbar__brand img { display: none; }

  .cat-topbar__brand span {
    font-size: 1.05rem;
    letter-spacing: -.01em;
  }

  /* 44x44 es el objetivo táctil mínimo recomendado (WCAG 2.2, criterio
     2.5.8 «Target Size (Minimum)»). */
  .cat-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid #bdb09e;
    background: #fff;
    color: var(--cat-blue-deep);
    cursor: pointer;
  }

  .cat-search-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .cat-search-toggle[aria-expanded="true"] {
    border-color: var(--cat-blue-deep);
    background: var(--cat-blue-deep);
    color: #fff;
  }

  /* Cerrado por defecto. `.is-abierto` lo pone navegacion-movil.js al pulsar
     la lupa. Sin JS el buscador queda visible (regla de más abajo), para no
     dejar la búsqueda inaccesible si el script no carga. */
  .has-js-nav .cat-topbar__search { display: none; }

  .has-js-nav .cat-topbar__search.is-abierto { display: flex; }

  .cat-topbar__search {
    width: 100%;
    order: 3;
    margin-left: 0;
  }

  /* Bloqueo del scroll de fondo mientras el cajón está abierto. */
  body.nav-abierta { overflow: hidden; }
}

@media (min-width: 901px) {
  .cat-nav-backdrop { display: none; }
}

/* ==========================================================================
   5. Reajuste sin desbordes — 1.4.10
   ========================================================================== */

/* Red de seguridad: ninguna imagen ni tabla debe forzar scroll horizontal. */
img,
svg,
video,
iframe { max-width: 100%; }

table { max-width: 100%; }

/* Las tablas de datos se desplazan dentro de su contenedor, no de la página. */
.cat-about-details__body,
.cat-record-content { overflow-x: auto; }

/* Las palabras muy largas (identificadores, URL) parten en vez de desbordar. */
.cat-about-prose,
.cat-record-content,
.cat-data-register dd { overflow-wrap: break-word; }

/* «Cómo se transforman técnicamente los datos» pasó de 4 a 5 pasos: en vez
   de fijar 4 columnas, se ajusta al contenido disponible. */
.cat-data-path ol { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cat-data-path li + li { border-left: 1px solid var(--cat-line); }

/* El estado (integrado/pendiente/servicio base) añade un tercer elemento al
   resumen del registro: en pantallas estrechas la etiqueta larga
   "PENDIENTE DE INTEGRACIÓN" desbordaba el ancho del viewport. */
@media (max-width: 620px) {
  .cat-data-register summary { flex-wrap: wrap; }
  .cat-status-badge { white-space: normal; }
}

@media (max-width: 760px) {
  .cat-main { padding-left: 1rem; padding-right: 1rem; }

  /* La página «Qué es ARCA» a una columna. */
  .cat-about-counters,
  .cat-about-readings,
  .cat-about-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cat-about-steps { grid-template-columns: 1fr; }
  .cat-about-steps li + li { border-left: 0; }

  .cat-about-sources { grid-template-columns: 1fr; }

  /* El registro de datos abiertos: de dos columnas a una. */
  .cat-data-register details > div { grid-template-columns: 1fr; }
  .cat-data-path ol { grid-template-columns: 1fr; }
  .cat-data-path li + li { border-left: 0; }
  .cat-data-kpis dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-data-examples > div { grid-template-columns: 1fr; }
  .cat-data-hero { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cat-about-counters,
  .cat-about-readings,
  .cat-about-figures,
  .cat-data-kpis dl { grid-template-columns: 1fr; }

  .cat-about-counter strong { font-size: 2rem; }

  /* La línea de vuelos se lee en vertical: en horizontal obligaba a un
     desplazamiento lateral incómodo en pantallas pequeñas. */
  .cat-about-flights__track { display: block; }

  .cat-about-flight {
    min-width: 0;
    padding: 0 0 .9rem 1.6rem;
  }

  .cat-about-flight::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: .45rem;
    width: 2px;
    height: auto;
  }

  .cat-about-flight:last-child::before { right: auto; bottom: 50%; }

  .cat-about-flight__dot { top: .1rem; max-width: none; }
  .cat-about-flight__label { max-width: none; }

  /* .cat-about-hero se quitó de aquí (2026-08-14): desde que esta cabecera
     se unió a .cat-hero, este padding propio volvía a desconsistenciar
     la página frente a las otras 17. Ver que-es-arca.css y la bitácora. */
  .cat-about-section--chart { padding: 1.2rem 1rem; }

  /* El resumen "Las personas: N nombres, no M biografías" es el más largo de
     estos acordeones (los otros son un titular corto sin cifras); a 1.08rem
     partía en dos líneas y el icono quedaba centrado junto a un bloque de
     texto de dos renglones, en vez de en la misma línea que el texto. */
  .cat-about-details summary { grid-template-columns: minmax(0, 1fr) 1.9rem; padding: .9rem 1rem; font-size: .8rem; }
  .cat-about-details__body { padding: .2rem 1rem 1.1rem; }

  .cat-breadcrumb { font-size: .78rem; }
}

/* A 320px, el ancho mínimo que exige 1.4.10. */
@media (max-width: 360px) {
  .cat-main h1 { font-size: clamp(1.8rem, 10vw, 2.4rem); }
  .cat-nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cat-nav-toggle { padding: .4rem .6rem; }
}

/* ==========================================================================
   6. Movimiento — 2.3.3
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .has-js-nav .cat-sidebar { transition: none; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  /* scroll-behavior:auto no desactiva scroll-snap-type: son propiedades
     independientes. Sin esto, el recorrido por secciones de la portada y
     los destacados narrativos seguiría «tirando» del scroll bajo la
     preferencia de reducir movimiento. */
  .cat-body--snap .cat-main {
    scroll-snap-type: none;
  }
}