/* ============================================================================
 * tacto-movil.css — comportamiento táctil del portal del asociado
 *
 * Qué resuelve: los puntos 2, 3 y 4 de la auditoría móvil del 2026-10-16.
 * Por qué: el 70% de los asociados entra desde el celular (medido sobre
 * coopebis_access.log, 11-16 oct: login 933 móvil / 515 escritorio).
 *
 * Esta hoja NO cambia cómo se ve el portal: no mueve nada de lugar, no cambia
 * colores ni tamaños. Cambia cómo RESPONDE al dedo. Puesta al lado en una
 * foto, es la misma foto. Es intencional.
 *
 * Quién la carga: includes/navbar.php (todas las páginas con sesión),
 * login.php y validar_otp.php (las dos pantallas de ingreso, que no cargan
 * ninguna otra hoja local).
 *
 * Sobre el !important: estas reglas existen para ganarle a 51 reglas :hover
 * repartidas en ~20 archivos, cada una con su propio nombre de clase. Sin
 * !important habría que editar las 51. El alcance está acotado: el bloque de
 * :hover solo se activa en pantallas SIN mouse.
 *
 * Autor: Dirección de Informática
 * Fecha: 2026-10-17
 * ============================================================================ */


/* ── Punto 3: sin destello gris al tocar ─────────────────────────────────────
 * Android pinta un rectángulo gris translúcido encima de lo que se toca, con
 * su propio tiempo, que no coincide con el de la pantalla. Se apaga para que
 * la respuesta al dedo sea la del portal y no la del navegador.
 * Se hereda, pero varios elementos de formulario lo reinician: por eso la lista. */
html,
a,
button,
input,
select,
textarea,
label,
.btn,
.card,
[role="button"],
[onclick] {
    -webkit-tap-highlight-color: transparent;
}


/* ── Punto 2: el efecto de mouse no se queda pegado ──────────────────────────
 * En el celular no hay mouse. El navegador aplica el :hover al tocar y lo DEJA
 * aplicado hasta que se toque otra cosa, así que la tarjeta queda levantada
 * sola, como si estuviera seleccionada. Aquí se anula el levantamiento, pero
 * SOLO donde no hay mouse: en el computador el hover sigue igual que siempre. */
@media (hover: none) {

    a:hover,
    button:hover,
    label:hover,
    [role="button"]:hover,
    [onclick]:hover,
    [class*="btn"]:hover,
    [class*="card"]:hover,
    [class*="-item"]:hover,
    [class*="-link"]:hover,
    [class*="-pill"]:hover,
    [class*="-row"]:hover,
    .hover-lift:hover,
    .fab-carrito:hover,
    .nav-link:hover,
    .dropdown-item:hover,
    .list-group-item:hover,
    /* el icono interno que algunas tarjetas mueven junto con la tarjeta */
    [class*="card"]:hover [class*="icon"] {
        transform: none !important;
    }

    /* EXCEPCIÓN. Este botón no se "levanta" al pasar el mouse: está CENTRADO
     * verticalmente con transform. Anularlo lo tira media altura hacia abajo.
     * Si algún día aparece otro elemento centrado así, hay que agregarlo aquí:
     * el detector es scripts/revisar_tacto_movil.php */
    .search-header .search-input-wrap .btn-buscar:hover {
        transform: translateY(-50%) !important;
    }
}


/* ── Punto 4: se hunde al presionar ──────────────────────────────────────────
 * Sin mouse no hay forma de saber que algo es tocable hasta que responde. El
 * hundimiento dura lo que dura el dedo encima: es la única señal inmediata de
 * que el toque se registró, y evita el doble toque por impaciencia.
 *
 * Va DESPUÉS del bloque de arriba a propósito: en el celular el :hover queda
 * activo junto con el :active, así que si este bloque fuera primero, el
 * transform: none de arriba se lo comería. */
a:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
label.form-check-label:active,
[role="button"]:active,
[onclick]:active,
[class*="btn"]:active,
.nav-link:active,
.dropdown-item:active,
.list-group-item:active {
    transform: scale(.97) !important;
    transition: transform .06s ease-out !important;
}

/* Las tarjetas se hunden menos: un 3% en una tarjeta de ancho completo se lee
 * como un salto, no como un toque. */
[class*="card"]:active,
[class*="-item"]:active,
[class*="-row"]:active {
    transform: scale(.99) !important;
    transition: transform .06s ease-out !important;
}

/* Misma excepción que arriba: centrado con transform, no se hunde. */
.search-header .search-input-wrap .btn-buscar:active {
    transform: translateY(-50%) !important;
}

/* Lo que NO debe hundirse: contenedores, barras y campos de texto. Hundir un
 * campo mientras se escribe marea, y hundir la barra de navegación arrastra
 * todo el encabezado. */
.navbar:active,
.navbar-brand:active,
.navbar-collapse:active,
/* [2026-10-17] AGREGADO .nav-item. El <li class="nav-item"> entraba por el
 * selector amplio [class*="-item"] de arriba y recibía transform: scale(.99).
 * Un elemento con transform se convierte en el marco de referencia de sus
 * hijos position:absolute, así que al presionar, el panel del mega-menú del
 * Marketplace (.mkp-mega-menu, absolute con left:0/right:0) dejaba de medirse
 * contra la barra y se medía contra el <li>: saltaba 238 px a la derecha entre
 * el mousedown y el mouseup. El mousedown caía en "Mis Pedidos" y el mouseup
 * en "Favoritos", así que el navegador disparaba el click en el contenedor
 * común (DIV.mkp-mega-quick) y NINGÚN enlace navegaba. El <li> es un
 * contenedor: lo tocable es el .nav-link de dentro, que sigue hundiéndose. */
.navbar .nav-item:active,
.modal:active,
.modal-content:active,
.modal-dialog:active,
.table:active,
.accordion:active,
.card-body:active,
input[type="text"]:active,
input[type="email"]:active,
input[type="number"]:active,
input[type="tel"]:active,
input[type="date"]:active,
input[type="password"]:active,
input[type="file"]:active,
select:active,
textarea:active {
    transform: none !important;
}


/* ── Accesibilidad ───────────────────────────────────────────────────────────
 * Quien pidió en su sistema "menos movimiento" no recibe el hundimiento. */
@media (prefers-reduced-motion: reduce) {
    a:active,
    button:active,
    [class*="btn"]:active,
    [class*="card"]:active,
    [class*="-item"]:active,
    [class*="-row"]:active,
    [role="button"]:active,
    [onclick]:active {
        transform: none !important;
        transition: none !important;
    }
}