/* ===========================================================================
   PixelClub — Accesibilidad (Fase 9)
   ===========================================================================
   Se carga EL ÚLTIMO a propósito, para poder corregir sin editar quince
   archivos ni pelearse con la especificidad de cada regla original. Cada bloque
   dice qué medía antes y qué mide ahora, porque son números y se comprueban:
   `node tests/calidad_web.mjs`.

   Nada de esto es opinión de diseño. Son los mínimos de WCAG 2.1 nivel AA:
   contraste 4,5:1 para texto normal y 3:1 para texto grande (criterio 1.4.3),
   y objetivos táctiles de 44×44 (criterio 2.5.5).
   =========================================================================== */

/* ── 1. Contrastes que no llegaban ─────────────────────────────────────────
   Medidos en el navegador, contando la opacidad heredada —que es lo que de
   verdad llega al ojo y lo que hacía que el peor caso pareciera aceptable
   leyendo solo el color—. */

/* Era 2,06:1. El culpable no era el color sino el `opacity: .45` encima de un
   gris ya apagado. Un botón que dice «no te llega el saldo» tiene que poder
   LEERSE: es justo el momento en que alguien necesita entender por qué no
   puede comprar. Se sube la opacidad y se usa un gris con recorrido. */
.shop-btn.sin-saldo {
  opacity: .8;
  color: #9aa4bf;
  border-color: #48506b;
}

/* Era 2,26:1. Es el emoji grande de «aquí no hay nada todavía». Aunque sea
   decorativo, un emoji es texto para el navegador y para quien amplía la
   pantalla. */
.empty-state-icon {
  opacity: 1;
  color: var(--text-secondary, #8892b0);
}

/* Era 2,9:1. La línea de créditos de TMDB del pie. Es letra pequeña y legal,
   que es precisamente la que más gente necesita poder leer.
   Primer intento con #9aa4bf: subió a 3,67 y seguía sin llegar. Por eso se
   mide en vez de elegir un gris «que se vea bien». */
.footer-creditos {
  color: #b8c0d4;
}

/* ── 2. Objetivos táctiles ─────────────────────────────────────────────────
   Quince selectores distintos quedaban por debajo de 44×44. El más pequeño,
   32×24. En un móvil eso son toques fallados, y esta web se va a usar sobre
   todo en móvil.

   Hay dos maneras de arreglarlo y se usan las dos, según el caso:

   (a) AGRANDAR de verdad, cuando unos píxeles más no molestan a nadie.
   (b) EXTENDER SOLO EL ÁREA DE TOQUE con un pseudoelemento invisible, cuando
       agrandar rompería el diseño —el logo de la barra, por ejemplo, no puede
       medir 44 de alto sin descuadrar la cabecera entera—.

   La (b) no es un truco para engañar a la prueba: WCAG habla de «target size»,
   el área que responde al dedo, no del tamaño de lo que se pinta. El
   pseudoelemento se centra sobre el elemento y nunca es más pequeño que él, así
   que no roba toques a lo de al lado. */

/* (a) Los que se pueden agrandar sin más. */
.fav-btn,
.favorite-btn,
.back-to-top {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-pill,
.follow-btn,
.tab-btn,
.auth-tab-btn,
.shop-btn,
.pixel-btn,
.carousel-see-all,
.profile-social a,
.navbar-search-input,
.skip-link,
.skip-to-content {
  min-height: 44px;
}

/* Los que además son estrechos necesitan aire a los lados, no solo alto. */
.follow-btn,
.filter-pill,
.carousel-see-all {
  padding-inline: 14px;
}

/* (b) Los de la barra superior: se les extiende el área sin tocar el aspecto. */
.navbar-logo,
.navbar-coins,
.breadcrumb a {
  position: relative;
}

.navbar-logo::after,
.navbar-coins::after,
.breadcrumb a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  /* Detrás del texto, para no taparlo ni robarle el cursor a nada. */
  z-index: 0;
}

/* ── 3. El foco, visible en todo lo que se pueda enfocar ───────────────────
   Sin esto, quien navega con el tabulador no sabe dónde está. `:focus-visible`
   —y no `:focus`— para que el cerco NO salga al hacer clic con el ratón, que
   era el motivo por el que en muchos proyectos se acaba quitando del todo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-games, #00f5d4);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── 4. Que la corrección no se lleve por delante el motivo de la Fase 9 ───
   Quien haya pedido menos movimiento en su sistema no quiere que estos
   elementos, ahora más grandes, se pongan además a animarse. */
@media (prefers-reduced-motion: reduce) {
  .fav-btn,
  .favorite-btn,
  .back-to-top,
  .filter-pill,
  .follow-btn {
    transition: none !important;
  }
}