/* 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 */
}