/* ── Suelo de accesibilidad común a las páginas sueltas ──────────────────────
 *
 * `styles.css` (la tienda) ya tiene su propia regla de `:focus-visible` desde
 * hace tiempo. Las páginas públicas —inicio, proveedores, alta— llevan su CSS
 * incrustado y cada una había resuelto el foco a su manera o no lo había
 * resuelto: en `proveedores.html` los campos solo cambiaban el color del borde
 * 1px, que con teclado se pierde de vista.
 *
 * Esto no es un sistema de diseño nuevo: son los cuatro mínimos que no deberían
 * depender de qué página toque, en un fichero aparte para no reescribir tres
 * hojas incrustadas. Todo lo específico de cada pantalla sigue donde estaba.
 */

/* 1 · Anillo de foco. `:focus-visible` y no `:focus`: sale al tabular pero no
 *     al hacer clic, que es el motivo por el que medio mundo escribe
 *     `outline:none`. Con ratón o pantalla táctil el diseño no cambia.
 *
 *     !important porque varias reglas incrustadas tienen más especificidad que
 *     cualquier selector razonable desde aquí, y un indicador de foco es un
 *     mínimo que no debería poder apagarse por descuido. */
:focus-visible {
    outline: 2px solid #0071e3 !important;
    outline-offset: 2px !important;
    border-radius: inherit;
}

/* Los contornos de un SVG no aceptan `outline` de forma fiable en todos los
   motores: ahí el foco se marca engordando el trazo, que es lo idiomático. */
svg :focus-visible {
    outline: none !important;
    stroke: #0071e3 !important;
    stroke-width: 4 !important;
}

/* 2 · Texto solo para lectores de pantalla. Sirve para poner nombre a un campo
 *     sin cambiar el diseño, en vez de confiar en el `placeholder` —que no es
 *     un nombre accesible y además desaparece en cuanto escribes. */
.sr-solo {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 3 · Salto al contenido. Primera parada de tabulación de la página; invisible
 *     hasta que se enfoca. Sin esto, quien navega con teclado se come la
 *     cabecera entera en cada página. */
.saltar-al-contenido {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 9999;
    padding: 12px 20px;
    background: #0071e3;
    color: #fff;
    font: 600 14px/1 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border-radius: 12px;
    text-decoration: none;
    transition: top .2s ease;
}
.saltar-al-contenido:focus { top: 16px; }

/* 4 · Movimiento reducido. La tienda ya lo respeta; las páginas públicas tienen
 *     animaciones de entrada y carruseles que aquí se paran. Las transiciones
 *     de foco y hover se quedan: son información, no decoración. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    :focus-visible { transition: none !important; }
}

/* 5 · Campos de 16 px en pantallas táctiles. En el iPhone, tocar un campo con
 *     letra de menos de 16 px amplía la página entera y no vuelve sola: había
 *     campos a 13,5–15 px en la tienda, el asistente, los filtros del panel y
 *     Perfil (auditoría móvil del 29/09). Es un suelo, no un tamaño: hoy ningún
 *     campo de estas páginas pasa de 16 px, así que nada se encoge; uno que se
 *     quiera más grande en táctil tiene que salir de aquí.
 *
 *     !important por lo mismo que el foco: las reglas de cada pantalla tienen
 *     más especificidad, y es un mínimo que no debería perderse por descuido.
 *     Solo en táctil: en escritorio no hay zoom y el diseño no cambia. */
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ── Objetivos táctiles de la navegación pública ─────────────────────────────
 *
 * La barra superior la comparten inicio.html y proveedores.html, así que sus
 * arreglos viven aquí y no duplicados en dos hojas incrustadas.
 *
 * Medido: los enlaces tenían 34px de alto, el login 36 y el CTA 38. El mínimo
 * de la Fase 1 es 44×44. Se consigue con `min-height` y centrado vertical, sin
 * tocar el `padding` horizontal ni el aspecto de las píldoras.
 */
.nav-links a,
.nav-logo,
.nav-login,
.nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Los puntos del carrusel medían 24×9.
 *
 * Se intentó agrandar la zona sensible con un ::after de 44×44 y salió peor:
 * los puntos van separados 8px, así que las zonas se solapaban 12px y el clic
 * caía en el punto de al lado. Un objetivo grande que acierta en otro sitio es
 * peor que uno pequeño.
 *
 * Se quedan en 24×24, que es el mínimo normativo de WCAG 2.5.8 (AA). Los
 * 44×44 que pide la Fase 1 son el nivel AAA y aquí exigirían re-espaciar la
 * fila entera: eso es una decisión de diseño del carrusel, no un arreglo de
 * accesibilidad, y va en la Fase 3. */
.banner-dot {
    min-width: 24px;
    min-height: 24px;
}

/* El propio salto al contenido medía 38px de alto. */
.saltar-al-contenido {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Enlaces sueltos de pie de página y cabecera: no van dentro de una frase, así
   que no les vale la exención de "enlace en línea" y sí necesitan altura. No se
   toca el relleno horizontal, así que la fila no se reordena. */
.footer-links a,
.cab-int a,
header .entrar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}