/* a11y.css — Cornelia Tulum
   Se carga DESPUÉS de tokens.css, base.css y componentes.css (ui): aquí sólo se corrige,
   nunca se redefine layout ni color de marca. No se escribe ningún color en crudo que no
   venga de las variables de tokens.css (contrato §6.5). */

/* ---------- 1. Foco visible sobre fondo oscuro ---------- */

:focus {
  outline: none; /* el anillo real lo pone :focus-visible, no el :focus de ratón */
}

:focus-visible {
  outline: 3px solid var(--cor-rosa);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Fondos claros (tarjetas papel, si los hay) necesitan un foco que también se note ahí */
.es-claro :focus-visible,
[data-fondo="claro"] :focus-visible {
  outline-color: var(--cor-tinta);
}

/* El hotspot del toro es el gesto estrella: su foco tiene que ganarle al vídeo de fondo.
   Ronda 5: el círculo rosa pulsante (`.toro-hotspot__pulso`, componentes.css) desaparece y
   el hotspot pasa a cubrir toda la portada (ENCARGO-5.md) — el anillo de foco queda como
   única señal visual de que el control existe, y tiene que leerse sobre CUALQUIER fotograma
   de un vídeo que se mueve, no sólo sobre el pelaje azul oscuro de antes de la zona pequeña del
   hocico. Dos problemas a la vez:
   1) Un solo color plano puede lavarse contra un fotograma del mismo tono — se resuelve con
      doble contorno claro/oscuro: donde un tramo del anillo caiga sobre pintura clara, el aro
      de --cor-tinta se recorta; donde caiga sobre pintura oscura, lo hace el de --cor-papel.
      No depende de qué haya detrás en ese instante.
   2) Si el hotspot pasa a medir lo mismo que `.portada__marco` (que tiene overflow:hidden,
      visto en index.html), un anillo dibujado HACIA FUERA del elemento (outline con offset
      positivo, o box-shadow sin inset) puede recortarse contra ese overflow y desaparecer
      justo en el borde de la pantalla. Por eso el anillo entero va hacia DENTRO
      (box-shadow inset): queda garantizado visible sea cual sea el tamaño real que le dé
      `frontend` al hotspot. */
#toro-hotspot:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 3px var(--cor-tinta),
    inset 0 0 0 6px var(--cor-papel),
    inset 0 0 0 9px var(--cor-tinta);
}

/* ---------- 2. Enlace "saltar al contenido" ---------- */

.saltar-contenido {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.75em 1.25em;
  background: var(--cor-papel);
  color: var(--cor-tinta);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  transition: top 0.15s ease;
}

.saltar-contenido:focus-visible {
  top: 0;
  outline: 3px solid var(--cor-rosa);
  outline-offset: 0;
}

/* ---------- 3. Objetivos táctiles mínimos 44×44 px ---------- */

/* Ronda 2, corregido contra el index.html real: la barra es <header class="nav">, no
   <nav>, así que el selector de elemento "nav a" de la ronda 1 no tocaba ningún enlace
   de verdad — se cambia a la clase real. Además min-width/min-height no tienen efecto
   sobre un <a> en su display inline por defecto: hace falta inline-flex para que el
   mínimo se aplique. */
.nav a,
.nav button,
a[data-enlace],
button,
.boton,
#toro-hotspot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Enlaces de texto inline dentro de párrafos no deben inflarse a 44px: sólo los
   elementos de navegación/acción listados arriba cuentan como "objetivo táctil". */

/* ---------- 4. prefers-reduced-motion: reduce ---------- */

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

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

  html {
    scroll-behavior: auto !important;
  }

  /* Pulso/halo del hotspot: anulado */
  #toro-hotspot,
  #toro-hotspot::before,
  #toro-hotspot::after {
    animation: none !important;
    box-shadow: none !important;
  }

  /* Apariciones de secciones al hacer scroll: se quedan visibles de entrada.
     Clase real confirmada en index.html (ronda 2): .revelar / .revelar--visible.
     app.js ya hace lo mismo por JS cuando detecta reduced-motion; esto es sólo
     una red de seguridad si algún día aparece una regla CSS de opacidad para
     .revelar que hoy no existe (ver AUDITORIA-A11Y.md). */
  .revelar {
    opacity: 1 !important;
    transform: none !important;
  }

  /* El vídeo del héroe: CSS no puede llamar a video.pause() (requiere JS, pendiente
     de frontend/app.js — ver AUDITORIA-A11Y.md), pero si sólo se oculta el <video>
     sin más, desaparece también su `poster` nativo y queda un hueco negro en vez de
     la pintura. Se oculta el vídeo Y se pone la misma imagen como fondo del
     envoltorio, para que quien pida menos movimiento siga viendo al toro, quieto.

     Ronda 4 (ENCARGO-4.md §1.3, último punto): este fondo iba en `cover` con
     `background-position: 85% 54%`, el recorte que necesitaba el encuadre desbordado
     de la ronda 3. Con el encuadre nuevo el envoltorio ES el rectángulo de la pintura
     (ratio 752/1200 exacto), así que `cover` volvía a recortar justo lo que Francisco
     pidió ver entero: con "reducir movimiento" activado se seguía viendo una franja
     del toro. `contain` + centrado deja la cara completa, igual que el vídeo. */
  #portada video {
    visibility: hidden;
  }

  .portada__video-envoltorio {
    background-image: url("../activos/toro-poster.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Humo (§2.7). Ronda 6: ya no son siete capas por sección sino UNA capa fija que
     recorre la página. Con movimiento reducido no hay ni deriva ni recorrido: se queda
     como una bruma estática. `app.js` pone `humo--quieto` y no registra ninguna escucha
     de scroll cuando detecta esta preferencia; estas reglas son la red de CSS para que
     no dependa del JS. */
  .humo__pluma,
  .humo--quieto .humo__pluma {
    animation: none !important;
    translate: none !important;
    will-change: auto !important;
  }

  /* Congelado el recorrido, la opacidad se queda en su valor de reposo y el humo no
     cambia al escrolear: una bruma fija, no un degradado en movimiento. */
  .humo {
    --humo-recorrido: 0 !important;
    transition: none !important;
  }
}

/* ---------- 5. prefers-contrast: more ---------- */

@media (prefers-contrast: more) {

  /* --cor-humo (texto secundario) se sube a --cor-papel cuando el usuario pide más
     contraste. .resena__autor es, confirmado contra el DOM real (ronda 2), el único
     texto que hoy sale en humo; .plato__descripcion se deja ya cubierto por si
     database/ui reconcilian su nombre de clase con componentes.css (ver incidencias:
     hoy esa clase no tiene regla en componentes.css y sale en papel, no en humo). */
  .texto-secundario,
  .resena__autor,
  .plato__descripcion,
  small,
  .meta,
  time,
  figcaption {
    color: var(--cor-papel) !important;
  }

  :focus-visible {
    outline-width: 4px;
  }

  a,
  button,
  .boton {
    text-decoration-thickness: 2px;
  }

  /* Humo (§2.7): quien pide más contraste no puede perder legibilidad por una
     decoración de fondo. La capa se queda a la mitad y deja de crecer con el scroll,
     así que el texto se lee siempre sobre un fondo prácticamente plano y los ratios
     medidos en AUDITORIA-A11Y.md siguen valiendo tal cual. */
  .humo {
    --humo-recorrido: 0 !important;
    opacity: 0.5;
  }
}

/* ---------- 6. Texto sólo para lector de pantalla ---------- */

.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Variante que además aparece al enfocar (para el enlace "saltar contenido" y similares
   si se reutiliza esta misma técnica en otro elemento) */
.sr-solo.sr-solo-enfocable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}