/*
 * ui.css — capa común de pulido para todas las páginas de nvg.mx (oct 2026).
 * Solo detalles de interacción y accesibilidad que no cambian el diseño de cada página; cada página la carga al final
 * de su <head> (después de sus propios estilos). Si cambias este archivo, sube el ?v= de los <link>.
 */

/* Al presionar con el ratón, el botón se hunde un poco: confirma el clic al instante. Solo con ratón: en pantallas
   táctiles el botón queda «presionado» desde que el dedo lo toca, aunque sea para deslizar, y cambiarle el tamaño en
   ese momento hacía que el celular perdiera a veces el arrastre (lista de «Compras», llena de botones). */
@media (hover: hover) and (pointer: fine) {
    button:not(:disabled):active,
    .btn:active,
    [role="button"]:active {
        transform: scale(0.97);
    }
}

/* Foco visible solo al navegar con teclado (con ratón o dedo no aparece el anillo). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* Toques: sin el destello gris de Android/iOS. */
a, button, [role="button"], label, [onclick] {
    -webkit-tap-highlight-color: transparent;
}

/* Listas que se deslizan dentro de una ventana (las de estilo en línea; cada página agrega las suyas): al llegar
   arriba o abajo, el arrastre no pasa a la página de atrás (bloqueada mientras la ventana está abierta), que en
   iPhone dejaba la lista «atorada» hasta volver a deslizar. */
[style*="overflow-y:auto"],
[style*="overflow-y: auto"] {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* En iPhone, un campo con letra menor a 16 px hace zoom a toda la página al tocarlo. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Quien pidió menos movimiento en su sistema: sin animaciones ni desplazamientos suaves. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}