/* ---------------------------------------------------------------------------
   CuadraFlow · capa de plataforma (movil)
   Lo que separa "una web abierta en el telefono" de algo que se siente
   instalado. Nada de esto se nota en el emulador: son comportamientos del
   sistema (Safari iOS, Chrome Android) y hay que probarlos en un telefono.

   Compartida por erp.php, saas.php, demo.php e index.php. La landing NO
   lleva body.cf-app: es un documento que se lee, alli el pull-to-refresh es
   legitimo y la altura la manda el contenido, no la pantalla.
--------------------------------------------------------------------------- */

/* ---------- 1. El destello gris del toque ----------
   iOS y Android pintan un velo sobre cualquier elemento tocado que tenga un
   handler. Es la senal mas ruidosa de "esto es una web" y pelea con la
   pulsacion que ya definimos en motion.css. */
html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* ---------- 2. El retardo de 300 ms ----------
   Sin esto el navegador espera a ver si el toque es un doble-toque para zoom.
   Con esto el clic se dispara al instante. */
button,
a,
select,
label,
summary,
[role="button"],
[role="tab"] {
    touch-action: manipulation;
}

/* ---------- 3. La etiqueta de un control no se selecciona ----------
   Mantener el dedo sobre un boton no debe seleccionar su texto ni abrir el
   menu de copiar. El texto del cuerpo sigue siendo seleccionable: hay gente
   que copia RIF, numeros de factura y mensajes de error. */
button,
[role="button"],
[role="tab"],
label,
summary,
.btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ---------- 4. El campo que hace zoom ----------
   iOS hace zoom sobre cualquier campo con fuente menor de 16 px y no vuelve a
   alejarse: el usuario queda con la pagina cortada. La solucion es el tamano,
   nunca maximum-scale=1 (eso rompe el zoom a proposito del usuario).
   Solo en puntero grueso: en escritorio el diseno sigue mandando. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---------- 5. Solo en las pantallas que son una app ----------
   overscroll-behavior: none evita que el tiron hacia abajo recargue la pagina
   y que el rebote de iOS arrastre la cascara. Los contenedores internos usan
   contain para que su rebote si se sienta nativo. */
body.cf-app {
    overscroll-behavior: none;
}

body.cf-app .principal,
body.cf-app main {
    overscroll-behavior: contain;
}

/* ---------- 6. La altura de la cascara ----------
   min-h-screen es 100vh: la altura con la barra del navegador ya recogida, asi
   que en el telefono sobresale justo lo que mide esa barra. dvh sigue al area
   visible de verdad. */
body.cf-app #app > .min-h-screen {
    min-height: 100dvh;
}

/* ---------- 7. El notch y el indicador de inicio ----------
   Con viewport-fit=cover la pagina va de borde a borde y hay que devolver el
   contenido a su sitio con env(). Sin el meta, todos los env() valen 0. */
body.cf-app .cf-drawer {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.cf-app main {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
    body.cf-app .cf-drawer {
        padding-left: env(safe-area-inset-left, 0px);
    }
}

/* ---------- 8. La barra de estado ----------
   theme-color se declara en el head de cada pagina; aqui queda el esquema. */
:root {
    color-scheme: light;
}