/* ═══════════════════════════════════════════════════════════════════════
   Ajustes para teléfono

   Se carga la ÚLTIMA, después de la hoja de cada módulo, porque su trabajo
   es corregir cosas que vienen de esas hojas. No es la hoja donde se diseña
   para móvil: es donde se arreglan los tres problemas que aparecieron al
   medir las pantallas reales a 375px de ancho, que es un iPhone normal.

   Cada regla de aquí tiene un número detrás, no una opinión.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* ───────────────────────────────────────────────────────────────────
       1. El zoom de iOS al tocar un campo

       Safari en iPhone hace zoom automático cuando enfocas un campo cuya
       letra mide menos de 16px. Lo peor no es el zoom: es que al salir del
       campo NO lo deshace. La página se queda torcida y hay que pellizcar
       para volver a verla entera.

       Medido: 46 campos en el cotizador, 32 en stock, 4 en el login. O sea
       que pasaba en casi cada formulario del sistema.

       Lleva !important porque cada módulo trae su propia hoja y todas cargan
       después de esta; sin él, cualquier regla de módulo con más peso vuelve
       a bajar la letra y el zoom regresa. Es un parche contra un comporta-
       miento del navegador, no una decisión de diseño, y por eso está aquí
       solo y bien señalado en vez de repartido por el sistema.
       ─────────────────────────────────────────────────────────────────── */

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ───────────────────────────────────────────────────────────────────
       2. Objetivos que el dedo pueda acertar

       Apple pide 44x44 puntos como mínimo. Medido en el sistema: enlaces de
       la barra a 35x33, el botón del ojo de la contraseña a 27x29, casillas
       a 15x15. Todo eso se falla al primer intento con el pulgar, y en un
       almacén se toca de pie y con prisa.

       Se usa min-height y no height para no romper lo que ya es más alto.
       ─────────────────────────────────────────────────────────────────── */

    .erp-barra-nav a,
    .erp-marca,
    .erp-barra-btn,
    .erp-btn,
    button,
    select,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }

    /*
     * Los que solo llevan icono necesitan también el ancho. Va sobre button
     * entero y no sobre clases concretas porque cada módulo bautiza los suyos
     * a su manera —promotion-select-toggle medía 16px de ancho— y perseguir
     * nombre por nombre deja siempre alguno fuera. A los que ya son más
     * anchos, un mínimo de 44 no les cambia nada.
     */
    .erp-barra-nav a,
    .erp-marca,
    .erp-barra-btn,
    .erp-btn,
    button {
        min-width: 44px;
        justify-content: center;
    }

    /*
     * Casillas e interruptores: 15px es la mitad de lo que necesita un dedo.
     *
     * El flex: none no sobra. Muchas viven dentro de una fila flexible junto
     * a su etiqueta, y sin él el navegador las comprime para hacer sitio al
     * texto: se quedaban en 13px de ancho aunque aquí pidiéramos 22.
     */
    input[type="checkbox"],
    input[type="radio"],
    .erp-check input {
        flex: none;
        width: 22px;
        height: 22px;
    }

    /*
     * Los filtros segmentados (Pendientes / Atendidas / Descartadas / Todas)
     * median 30px de alto. Se usan en cinco pantallas y son lo primero que se
     * toca al abrirlas, así que fallarlos cuesta un rebote entero.
     */
    .erp-segmentado a,
    .erp-segmentado button {
        min-height: 44px;
    }

    /*
     * Una casilla casi nunca se toca sola: vive dentro de una etiqueta que
     * también la activa, y esa etiqueta es el objetivo real del dedo. Medidas
     * en el cotizador: 303 y 329px de ancho —de sobra— pero 24 y 34px de alto.
     *
     * Por eso se le pone suelo al alto de la etiqueta en vez de agrandar la
     * casilla: agrandar la casilla no ensancha la zona que se toca y sí
     * descuadra las filas donde va junto a un texto.
     */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
    }

    /* ───────────────────────────────────────────────────────────────────
       3. Letra que se pueda leer sin acercar el teléfono

       Los rótulos del panel medían 10.88px. En una pantalla de 375px con
       brillo de calle eso no se lee: se adivina. Se sube el suelo de los
       dos tamaños más pequeños, sin tocar el resto de la escala para no
       mover los diseños que ya funcionan.
       ─────────────────────────────────────────────────────────────────── */

    :root {
        --erp-t-micro: .8rem;
        --erp-t-mini: .84rem;
    }

    /*
     * Los <small> sueltos no los alcanza ningún token: el navegador los encoge
     * por su cuenta respecto al texto que los rodea, y en stock quedaban en
     * 11.87px. Se les pone un suelo. Siguen leyéndose como secundarios, pero
     * se leen.
     */
    small {
        font-size: 13px;
    }

    /* ───────────────────────────────────────────────────────────────────
       4. Que ninguna tabla empuje la página entera

       Las tablas anchas ya viven dentro de .erp-tabla-envoltura, que hace
       scroll horizontal propio. Quedaban dos sin envolver; hasta que se
       arreglen en su plantilla, esto evita que arrastren toda la página.
       ─────────────────────────────────────────────────────────────────── */

    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    .erp-tabla-envoltura > table {
        display: table;
    }
}