/* Estilos globales para OmniVentX */

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
    color: #333;
    line-height: 1.6;
}

/* Asegurar que los iconos de Bootstrap Icons se rendericen correctamente */
i.bi {
    display: inline-block;
    font-size: inherit;
    vertical-align: -0.125em;
}

/* Estilos adicionales para mejor visualización */
code {
    background: #f0f0f0;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

strong {
    font-weight: 600;
}

/* Animaciones suaves */
* {
    transition: color 0.2s ease, background 0.2s ease;
}

/* Responsive improvements */
@media (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
    }
}

/* ── Red de seguridad contra el desbordamiento lateral ─────────────────────
   Muchas pantallas fijan min-width en píxeles a sus campos para que no queden
   estrechos en un monitor. En un móvil ese mínimo se convierte en un suelo que
   empuja la fila y saca la tarjeta de la pantalla: aparece la barra horizontal
   y hay que arrastrar para llegar al botón.

   Aquí NO se esconde el desbordamiento con overflow-x:hidden —eso taparía el
   síntoma y dejaría contenido inalcanzable—: se le quita el suelo a los campos
   y se les impide pasar del ancho disponible. Solo por debajo de 640px, así que
   en escritorio nada cambia.

   Las tablas anchas quedan fuera a propósito: ahí desplazarse de lado es lo
   correcto, y para eso cada una tiene su contenedor con overflow-x. */
@media (max-width: 640px) {
    input, select, textarea, button {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* El min-width lo fijan las páginas con su propio CSS, que gana por
       especificidad; para desmontarlo en el móvil hace falta !important. */
    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea {
        min-width: 0 !important;
    }
}

/* ── iPhone: que tocar un campo no amplíe la pantalla ──────────────────────
   Safari en iPhone amplía la página cuando el campo que recibe el foco tiene la
   letra por debajo de 16px, y al salir del campo la deja ampliada: el formulario
   se mueve de sitio y hay que pellizcar para volver. Chrome en Android no hace
   nada de eso, así que el mismo formulario se usaba distinto en cada teléfono.

   Se pone el mínimo de 16px SOLO en iOS y solo en pantallas de móvil, para que
   el diseño en Android y en escritorio quede exactamente igual que antes. Los
   campos caben porque la red de seguridad de arriba ya les quitó el ancho mínimo.

   `-webkit-touch-callout` solo existe en iOS/iPadOS: es la forma de preguntar
   «¿estoy en un iPhone?» desde el CSS, sin mirar el nombre del navegador. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 640px) {
        input:not([type=checkbox]):not([type=radio]):not([type=range]),
        select,
        textarea {
            font-size: 16px;
        }
    }
}

/* El iPhone agranda el texto él solo al girar a horizontal. Con esto respeta el
   tamaño que pide la página, como hace Android. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}