/* ── 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;
}

/* La caja de cada sección del proveedor recibe el foco al cambiar de sección, solo
   para que el lector de pantalla empiece a leer ahí: no es pulsable, y el contorno
   cruzaba toda la pantalla (07/11). */
.pv-contenido > .pv-caja[tabindex="-1"]:focus-visible { outline: none !important; }

/* 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. Blanco sobre azul siempre:
   la portada lo pintaba con el color oscuro de sus enlaces (contraste 3,8). */
.saltar-al-contenido {
    color: #fff !important;
    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,
.home-top-links a,
.home-footer nav a,
.home-footer-columns a,
.home-footer-contact > a,
.home-provider-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* `hidden` oculta siempre, aunque una clase diga `display: flex` (05/11). */
[hidden] { display: none !important; }


/* 6 · Letra y botones en pantallas táctiles (07/11, revisión de comodidad del
 *     30/09: el listón es un cocinero de 60 años). Medido en 22 pantallas a
 *     390×844: el 55 % del texto medía menos de 14 px —el nombre del producto en
 *     la tienda, 12— y el 47 % de los controles menos de 44 px de alto
 *     (tmp/letra-botones-2026-11-07/medir.cjs). Mismo criterio que el 5: es un
 *     suelo, solo en táctil, y con !important porque cada pantalla pesa más.
 *     Fuera a propósito: las etiquetas de la barra de abajo (a 14 px no caben
 *     cinco pestañas), los antetítulos en mayúsculas y las iniciales de los
 *     avatares, que no se leen como texto. */
@media (hover: none) and (pointer: coarse) {
    /* Tienda: tarjeta de producto, cabecera y directorio. */
    .catalog-product :is(.card-name, .card-price-unit, .card-desc),
    .storefront-channel, #storefront-terms span, #store-load-more,
    .distributor-name, .provider-intro, #provider-results, .provider-zone,
    .provider-tools label, .main-header .btn-header-register, #store-page-count, .provider-footer,
    /* Pedidos del restaurante y del proveedor (la misma tabla, .pa-tabla). */
    .pa-tabla :is(strong, small), .pa-fecha, .pa-estado, .pa-mini, .pa-inc,
    .pa-paginas-txt, .pa-paginas-txt strong, .pa-pag, .pa-contador, .pa-filtro-principal span,
    .pa-btn-link:not(.pv-cps-nombre), .pa-btn-sec, .pa-ver-todo, .pa-nota-metricas, .pa-sub,
    /* Estadísticas del restaurante. */
    .pa-rk-nombre, .pa-rk-nombre small, .pa-rk-medio, .pa-rk-valor,
    .pa-tarjeta :is(span, small), .pa-orden button, .pa-pest-nombre, .pa-pest-dato, .pa-pest-nif,
    /* Negocio, Equipo y Perfil. */
    .aj-tarjeta-txt small, .aj-editar, .aj-persona-txt small, .aj-persona-negocios,
    .aj-persona-puesto, .aj-rol, .aj-etiqueta, .aj-foto-texto small, .aj-fila small,
    .aj-ayuda, .aj-vacio, .aj-interruptor small, .cp-descripcion, .sn-chip-txt :is(small, strong),
    /* Panel del proveedor. */
    .pv-tenue, .pv-chip, .pv-mk-ficha, .pv-mk-pedir, .pv-mk-accion,
    .pv-kpi-et, .pv-obj-et, .pv-obj-sub, .pv-seccion small, .pv-campo small,
    .pv-rutas-op, .pv-fi-campo > span, .pv-sub, .pv-aviso, .pv-z-intro, .cp-mapa-pie :is(button, span),
    .pv-obj-tabla th, .pv-obj-proc :is(span, i), .pv-cat-grupo-cab h3, .pv-vista label, .pv-vista-et,
    .pv-seg-nombre, .pv-seg-pct, .pv-seg-eur, .pv-act-tramo,
    /* Portada. */
    .home-footer-columns a:not(.home-logo), .home-footer-bottom a:not(.home-logo), .home-trust-inner span,
    .home-feature-list :is(strong, span), .home-button, .home-quick-access :is(button, span), .home-text-link,
    .home-photo-caption :is(strong, span), .home-photo-pill, .home-photo-label, .home-feature-secondary,
    .home-entry-copy p, .home-entry-check, .home-support-title :is(strong, span), .home-support-contact,
    .home-footer-contact p, .home-footer-bottom p {
        font-size: 14px !important;
    }

    /* Controles: 44 px de alto como mínimo. */
    .pa-mini, .pa-inc, .pa-orden button, .pa-pag, .pa-btn-link, .pa-btn-sec, .pa-chip-local,
    .aj-editar, .aj-btn, .aj-desplegable > summary,
    .pv-mk-ficha, .pv-mk-pedir, .pv-mk-accion, .pv-mk-seg, .pv-mk-pago, .pv-mk-codigo, .pv-mk-select,
    .pv-asa, .pv-btn-sec, .pv-obj-in, .zm-pais, .pv-check, .pv-rutas-op,
    #sort-select, #storefront-conditions, #store-load-more, .btn-cambiar-cp,
    .provider-tools label, .sn-header-btn, .qty-pill, .qty-stepper button,
    .main-header .logo, .home-logo, .home-button, .home-text-link,
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], .qty-input), select {
        min-height: 44px !important;
    }
    /* Lo que es en línea no crece con min-height: se vuelve caja centrada.
       .pv-check y .pv-rutas-op ya son flex de bloque: en línea, las casillas
       se amontonaban una al lado de otra (07/11). */
    .main-header .logo, .home-logo, .home-text-link, .provider-tools label {
        display: inline-flex !important;
        align-items: center;
    }
    /* El número del selector de cantidad ocupa todo el alto de la píldora. */
    .qty-pill .qty-input { align-self: stretch; height: auto !important; }
    .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
    /* La casilla de cada línea del carrito: 24 px, el mínimo de WCAG 2.5.8. */
    .bag-item-check { width: 24px; height: 24px; }
}