/*
 * Global / General Styles
 * --------------------------------------------------------------------------
 */
body {
    background: url("../../images/default/fondo.webp") no-repeat center top / cover;
    min-height: 100vh; /* Usar 100vh para asegurar que ocupe toda la altura de la ventana */
    font-family: 'Montserrat', sans-serif;
    /* align-items: center; - Esto es para flexbox o grid, si no se usa body como flex container, no tiene efecto aquí.
       Si el body es un flex container para el sticky footer, se maneja con d-flex flex-column min-vh-100 en HTML. */
}
.invalid-feedback {
    color: white !important;
    font-weight: bold;
    font-size: 0.8em;
}
/*
 * Component Styles
 * --------------------------------------------------------------------------
 */
.mytitle {
    background-color: var(--bs-body-bg); /* Más explícito que background solo */
    border: 1px solid; /* Simplifica border-width y border-style */
    border-radius: 15px;
}

.button_hotspot {
    background-color: #ffa007;
    color: #000;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid var(--bs-gray-900);
}

.formulario_mangocenter {
    background: url("../../images/default/fondo_form.png") no-repeat center top / cover;
    width: 90%;
    margin-left: 5%; /* Podría ser margin: 0 auto; y width: 90%; si se usa un contenedor flex para centrar */
    border-radius: 0.5em; /* !important rara vez es necesario si la especificidad es correcta */
    /* Las propiedades comentadas se mantienen por si las necesitas, pero es mejor eliminarlas si no se usan */
    /* max-height: 100vh; */
    /* margin-top: 1vh; */
}

label.form-label.text-intercom {
    color: white;
    font-weight: bolder;
    font-size: 0.8em;
}
/*
 * Media Queries - Desktop / Larger Screens
 * --------------------------------------------------------------------------
 */
@media (min-width: 768px) { /* Bootstrap usa 768px para 'md' (medium) */
    #logo_publicidad2,
    #logo_publicidad3 {
        width: 20%;
    }

    .formulario_mangocenter {
        width: 100vh; /* Ten cuidado con 'vh' para ancho, puede ser muy grande en monitores amplios */
    }

    #logo_wifi2 {
        width: 60% !important; /* Considera si !important es realmente necesario */
    }

    #logo_pie {
        width: 100vh;
        margin-left: 21%;
    }

    .telefono {
        width: 35vh !important; /* Considera si !important es realmente necesario */
        position: relative;
        left: 18%;
    }

    .webs {
        width: 40vh !important; /* Considera si !important es realmente necesario */
    }
}

/*
 * Media Queries - Mobile / Smaller Screens
 * --------------------------------------------------------------------------
 */
@media (max-width: 767.98px) { /* Bootstrap usa 767.98px para 'sm' (small) */
    .container #form_title {
        margin-top: 5%;
    }

    #logo_publicidad {
        width: 45%;
    }
    #rif_company {
        width: 30%;
    }

    #logo_publicidad2,
    #logo_publicidad3 {
        width: 45%;
        padding-bottom: 9%;
    }

    #logo_wifi {
        width: 100%;
    }

    #logo_wifi2 {
        width: 90%;
    }

    #publicidad_contenido {
        position: absolute; /* Eliminar !important si es posible */
        margin-top: 100%;
        display: flex;
        align-items: center;
    }

    /* Si este código para #logo_pie está comentado, se recomienda eliminarlo. */
    /* #logo_pie {
        width: 85%;
        margin-left: 8%;
    } */

    .telefono {
        width: 60%;
    }
    .telefono2 {
        width: 75%;
    }

    .webs {
        width: 80%;
    }

    .webs2 {
        width: 60%;
    }

    #iptv {
        width: 30%;
    }

    #rif {
        position: relative; /* Eliminar !important si es posible */
        margin-left: 13%; /* Eliminar !important si es posible */
        width: 35%; /* Eliminar !important si es posible */
        top: -28px;
        left: 20vh;
    }
}

/*
 * Media Queries - Landscape Orientation
 * --------------------------------------------------------------------------
 */
@media (orientation: landscape) {
    #logo_publicidad {
        width: 20%;
    }

    #logo_publicidad2,
    #logo_publicidad3 {
        width: 20%;
    }

    #logo_wifi {
        width: 40%;
    }

    #logo_wifi2 {
        width: 37%;
    }

    .formulario_mangocenter {
        min-width: 60vh;
        /* Las propiedades comentadas se mantienen por si las necesitas, pero es mejor eliminarlas si no se usan */
        position: relative;
        left: 45%;
        transform: translateX(-50%);
    }

    .telefono {
        width: 26vh;
        position: relative;
        left: 20%;
    }

    .webs {
        width: 33vh;
    }

    #iptv {
        width: 25%;
    }
    #rif_company {
        width: 30%;
    }
    #rif {
        position: relative; /* Eliminar !important si es posible */
        margin-left: 13%; /* Eliminar !important si es posible */
        width: 9%; /* Eliminar !important si es posible */
        top: 83px;
        left: -40vh;
        height: 3vh;
    }

    #btn_submit {
        width: 30vh !important; /* Considera si !important es realmente necesario */
    }
}
@media (min-width: 916px) and (orientation: landscape) { /* Bootstrap usa 915px para 'lg' (large) */ 
    #logo_pie {
        margin-left: 17% !important;
    }
    #rif_company {
        width: 30%;
    }
    .telefono {
        left: 15%;    
    }
}
/* Bootstrap usa 915px para 'lg' (large) */ 
@media (max-width: 915px) and (orientation: landscape) { 
    #logo_pie {
        margin-left: 21% !important;
    }
}
/*
 * Media Queries - Specific Mobile Landscape
 * --------------------------------------------------------------------------
 * Mantener la media query específica para orientación landscape en un rango de ancho
 * puede ser útil si necesitas ajustar elementos que se comportan diferente en móviles apaisados.
 * Asegúrate de que no haya conflictos con las otras media queries.
 */
@media (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) {
    .container #form_title {
        margin-top: 15%;
    }

    #top_logo_empresa,
    #logo_publicidad { /* Agrupado para consistencia */
        display: none;
    }

    #logo_publicidad2,
    #logo_publicidad3 {
        width: 45%;
        padding-bottom: 2%;
    }
}