/* Mobile and Tablet Viewport Fixes */
/* Soluciona el problema de pantalla que se achica al hacer scroll en tablets landscape */

/* Asegurar que el viewport se mantenga estable */
html, body {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Prevenir que el contenido se desborde horizontalmente */
body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Contenedor principal siempre al 100% del viewport */
.container {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    overflow-x: hidden;
}

/* Fix específico para tablets en modo landscape */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    html, body {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    body {
        position: relative;
        left: 0;
        right: 0;
    }
    
    .container {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    
    /* Prevenir que elementos se salgan del viewport */
    * {
        max-width: 100vw !important;
        box-sizing: border-box;
    }
}

/* Fix para dispositivos móviles en general */
@media screen and (max-width: 767px) {
    html, body {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    body {
        position: relative;
        left: 0;
        right: 0;
    }
    
    .container {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
}

/* Fix para dispositivos con viewport problemático */
@media screen and (max-device-width: 1024px) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}

/* Prevenir zoom no deseado en iOS */
@media screen and (max-width: 1024px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Fix para Safari en iOS */
@supports (-webkit-touch-callout: none) {
    html, body {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Fix adicional para tablets en modo landscape - más agresivo */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Forzar el viewport a ser estable */
    html {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    body {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Asegurar que todos los elementos respeten el viewport */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Contenedores principales */
    .container, .main-content, .footer, header {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Prevenir que elementos se salgan del viewport */
    img, video, iframe, object, embed {
        max-width: 100vw !important;
        height: auto !important;
    }
    
    /* Fix para elementos que puedan causar scroll horizontal */
    table {
        max-width: 100vw !important;
        table-layout: fixed !important;
    }
    
    /* Asegurar que las tarjetas no se desborden - now handled by unified-cards.css */
}