/* En el teléfono, el zoom pasa SOLO cuando uno hace el gesto de zoom.
 *
 * Dos zooms que nadie pidió y que el navegador hacía por su cuenta:
 *
 * 1. Al tocar un campo de texto. iOS acerca la página cada vez que se enfoca un campo
 *    cuya letra mide menos de 16px, y después la deja acercada: se escribe media palabra
 *    y ya no se ve el botón de guardar. La solución NO es desactivar el zoom (eso se
 *    llevaría también el gesto de dos dedos, que es el que sirve para leer una tabla
 *    apretada, y deja fuera a quien no ve bien): es que los campos tengan esos 16px.
 *    En un teléfono una letra de 12px tampoco se lee, así que el campo se agranda solo
 *    donde hace falta —pantalla táctil— y el escritorio queda igual.
 *
 * 2. Al tocar dos veces seguidas. El navegador espera ~300ms en CADA toque por si viene
 *    un segundo, y si viene, acerca. Eso hacía que dos toques rápidos —cambiar de
 *    pestaña, sumar cantidad, quitar un chip— dispararan un acercamiento a mitad de una
 *    operación. `manipulation` quita ese doble toque y deja intactos el desplazamiento y
 *    el gesto de zoom, que es exactamente lo que se pidió.
 *
 * Va por `pointer: coarse` y no por ancho de pantalla: una tableta de 1024px es táctil y
 * hace lo mismo, y una ventana angosta en el escritorio no.
 */
@media (pointer: coarse) {
  /* !important porque cada pantalla trae su propio tamaño (`.a-field input` en el login,
     `text-xs` en las filas de una orden) y todos ganan por especificidad. No es una
     preferencia de estilo: por debajo de 16px el navegador acerca la pantalla, así que
     este es el piso, no una sugerencia. */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Las tablas en móvil se apilan como tarjetas y sus campos van a 130px de ancho: ahí
     16px es lo que entra justo. Se les quita el alto de más, no el tamaño de letra. */
  td input,
  td select {
    line-height: 1.2;
  }
}

/* El doble toque no acerca. El desplazamiento y el gesto de dos dedos siguen igual.
   Selector universal a propósito: los pocos elementos que necesitan otra cosa
   —el que se arrastra, el selector de color— ya declaran su propio `touch-action` y le
   ganan a este por especificidad. */
* {
  touch-action: manipulation;
}