/* ===================================================================
   accesibilidad.css - TiendApp v2.1.4
   Correcciones de accesibilidad (WCAG 2.2 AA) y usabilidad móvil.
   Se carga después de todas las hojas y antes de modo-oscuro.css.
   =================================================================== */

/* El naranja de marca (#FF6016) sobre blanco o crema da contraste 2,6–3,0:1 y no alcanza para TEXTO (se pide 4,5:1).
   Para texto sobre fondos claros usamos una versión más oscura (5,3:1 sobre crema). El naranja de marca sigue en fondos, bordes y acentos. */
:root { --color-naranja-texto: #B03A08; --color-foco: #1C1B0B; }
html.tema-oscuro { --color-naranja-texto: var(--color-naranja); --color-foco: #FFC22E; }

/* 1) Foco visible para TODO lo que se puede tabular (antes solo algunos elementos lo tenían) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
.header-principal :where(a, button, input):focus-visible { outline-color: var(--color-oscuro); }
main:focus { outline: none; }

/* 2) Atributo hidden: que gane siempre a las reglas de display de las tarjetas, filtros y botones */
[hidden] { display: none !important; }

/* 3) «Saltar al contenido»: invisible hasta recibir el foco con el teclado */
.saltar-contenido { position: fixed; left: 12px; top: -60px; z-index: 5000; padding: 12px 18px; border-radius: 10px; border: 0; background: var(--color-oscuro); color: var(--color-crema); font-weight: 700; font-size: 15px; cursor: pointer; transition: top .15s; }
.saltar-contenido:focus { top: 12px; outline: 3px solid var(--color-amarillo); }

/* 4) Cabecera: texto crema sobre naranja rompía 2,6:1; el texto oscuro da 5,7:1 */
.header-nombre-marca, .nav-principal .nav-lista li a, .btn-usuario { color: var(--color-oscuro); }
.nav-principal .nav-lista li a:hover { color: var(--color-oscuro); text-decoration: underline; text-underline-offset: 4px; }
.nav-principal .nav-lista li a::after { background-color: var(--color-oscuro); }
.btn-login-header { color: var(--color-oscuro); }
.icono-carrito { filter: none; }
.header-principal .btn-tema, .header-principal .btn-carrito-flotante-header, .header-principal .btn-notif { color: var(--color-oscuro); }
.header-principal .btn-tema, .header-principal .btn-carrito-flotante-header, .header-principal .btn-notif, .btn-usuario { min-height: 44px; min-width: 44px; }

/* 5) Texto blanco sobre naranja (3,0:1) → texto oscuro (5,7:1). El hover aclara el naranja en lugar de oscurecerlo */
.btn-primario, .tarjeta-boton, .btn-fiao-tienda, .carrusel-flecha-tiendas, .fiao-pasos li.actual span { color: var(--color-oscuro); }
.btn-primario:hover, .tarjeta-boton:hover, .carrusel-flecha-tiendas:hover { background-color: #ff7a3d; }
.tarjeta-boton:disabled, .tarjeta-boton.deshabilitado { color: #4a4838; }
.aviso-error { color: var(--color-oscuro); }
.btn-peligro { color: #8f2f06; }
.tarjeta-boton-peligro:hover { background: #b3261e; color: #fff; }

/* 6) Zonas de toque cómodas en pantallas táctiles (mínimo 44 px en lo que se pulsa seguido) */
@media (pointer: coarse) {
    .btn, .btn-primario, .btn-secundario, .tarjeta-boton, .btn-favorita { min-height: 44px; }
    .form-agregar-carrito input[type="number"] { min-height: 44px; }
}

/* 7) Si la persona pidió «reducir movimiento», quitamos animaciones y desplazamientos suaves */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}