/* === ESTILOS ADAPTATIVOS PARA CELULARES === */
@media (max-width: 768px) {
    html, body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow: hidden; /* Bloquea todo tipo de scroll */
        touch-action: none; /* Previene gestos táctiles como scroll o zoom */
        overscroll-behavior: none;
        font-family: 'Montserrat', sans-serif;
    }

    #containerForm {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra horizontalmente */
        justify-content: flex-start; /* Empieza desde arriba */
        box-sizing: border-box;
    }

    .dashboard-container {
        padding: 0 10px;
    }

    .col-sm-6.col-md-4.col-md-offset-4 {
        width: 100%;
        margin: 0 auto;
        float: none;
    }

    .form-horizontal .form-group {
        width: 100%;
        margin-bottom: 15px;
    }

    .form-horizontal label.control-label {
        display: block;
        width: 100%;
        margin-bottom: 5px;
        text-align: left;
        padding-left: 10%;
        box-sizing: border-box;
    }

    .form-horizontal .col-5,
    .form-horizontal .col-7,
    .form-horizontal .col-6,
    .form-horizontal .col-4 {
        width: 100%;
        padding: 0;
        margin: 0;
        float: none;
    }

    .input-group {
        display: flex;
        align-items: center;
        width: 80%;
        margin: 0 auto;
    }

    .form-group {
        display: flex;
        flex-direction: column; /* Apilamos los elementos verticalmente */
        align-items: center; /* Alineamos los elementos al centro */
        margin-bottom: 20px; /* Espacio entre los elementos del formulario */
    }

        .form-group label {
            text-align: left !important; /* Centramos el texto de las etiquetas */
            font-size: 16px; /* Ajustamos el tamaño del texto para mejor legibilidad */
            margin-top: 10px !important; /* Espacio debajo de la etiqueta */
            margin-left: 20% !important;
        }

    .input-group-addon {
        padding: 8px 12px;
        font-size: 16px;
        background-color: transparent !important;
        border: 0px solid #ccc;
        margin-right: 3%;
    }

    .form-control {
        width: 100% !important;
        font-size: 14px;
        padding: 8px 12px;
        border-radius: 4px;
        box-sizing: border-box;
    }


    #toggle-password {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        padding: 5px;
    }

    #notifier-container {
        width: 95%;
        margin: 50px auto;
    }

        #notifier-container h2 {
            font-size: 22px;
        }

        #notifier-container p {
            font-size: 14px;
            margin-left: 10px;
        }

    .glyphicon-warning-sign {
        font-size: 22px;
    }

    .group-button {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

        .group-button .col-6 {
            text-align: center; /* Asegura que el contenedor que lo envuelve esté centrado */
        }

        .group-button .col-4 {
            text-align: center;
            width: 100%;
            margin-bottom: 10px;
        }

    /* Contenedor de los dos elementos (Versión y Descargar Chrome) */
    #loginForm .pull-right {
        display: flex; /* Usamos flexbox para alinearlos horizontalmente */
        justify-content: center; /* Centra los elementos horizontalmente */
        align-items: center; /* Alinea los elementos verticalmente */
        width: 100%; /* Asegura que ocupe todo el ancho */
        margin-top: 20px; /* Espacio superior */
    }

    /* Centra los elementos en una sola fila */
    .pull-right a {
        margin: 0 10px; /* Espacio entre los elementos */
        text-align: center; /* Centra el texto del enlace */
        display: inline-block; /* Hace que el enlace se comporte como un bloque */
    }

    /* Ocultar el enlace de "Descargar Chrome" en versiones anteriores */
    .pull-right.link-chrome {
        display: inline-block; /* Muestra el enlace correctamente */
        margin-right: 0; /* Elimina márgenes innecesarios */
    }


    p[style*="margin-left:30px"] {
        margin-left: 0 !important;
        text-align: center;
    }

        p[style*="margin-left:30px"] a {
            margin-left: 0 !important;
            display: block;
            margin-top: 5px;
        }

    #logos-down img {
        width: 70%;
        max-width: 350px;
        margin: 10px auto; /* 🔹 Centrado horizontal + espacio vertical */
        display: block; /* 🔹 Necesario para aplicar margin auto */
    }

    #logos-extra img {
        width: 50px;
        max-width: 60px;
        height: 50px;
        display: inline-block;
    }

    #logos-extra {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    #sombrero-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(-180%) rotate(15deg);
    }

    .libree-img {
        width: 150px; /* Ajusta a lo que necesites */
        margin-bottom: 0px;
        display: block;
    }

    #sombrero-img {
        width: 60px;
        height: 25px;
    }

    #sombrero-container {
        left: 50%;
        transform: translateY(-120%) rotate(15deg); /* ajusta si el sombrero se ve muy arriba */
    }

    .amigable {
        width: 300px; /* Ajusta este valor según el tamaño que prefieras */
        display: block;
        margin: 5px auto; /* centrado + espacio hacia abajo */
    }

    .forgot {
        text-decoration: none;
        position: relative;
        left: -70px; /* mueve hacia la izquierda */
        top: -30px;
        display: block;
    }

    .row.text-center p {
        text-align: center !important; /* Centra el texto */
        margin-top: 70px !important; /* Ajusta el espaciado desde el top */
        margin-left: 13% !important; /* Mueve el texto desde el margen izquierdo */
        margin-right: 10% !important; /* Mueve el texto desde el margen derecho */
        display: block !important; /* Hace que el <p> sea un bloque */
    }

        .row.text-center p a {
            text-transform: uppercase; /* Pone el enlace en mayúsculas */
            margin-left: 0; /* Elimina el margen izquierdo extra */
        }

    #cuadros-arriba {
        width: 250px; /* Asegura que el div ocupe un 90% del ancho en móviles */
        height: 220px; /* Disminuye la altura para móviles */
        left: 50%; /* Asegura que no se desborde hacia la derecha */
        top: 0%;
    }

    /* Ajustes para el cuadro de abajo en dispositivos móviles */
    #cuadros-abajo {
        width: 450px !important; /* Asegura que el div ocupe un 90% del ancho en móviles */
        height: 300px; /* Disminuye la altura para móviles */
        left: 0% !important; /* Ajusta la posición si es necesario */
        top: 70%;
    }

    .recaptcha-container {
        width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
        display: flex; /* Usamos flexbox para centrar */
        justify-content: center; /* Centra el contenido horizontalmente */
        margin-top: 20px; /* Añade un espacio superior */
    }

    .g-recaptcha {
        transform: scale(0.85); /* Ajusta el tamaño del reCAPTCHA */
        transform-origin: 0 0; /* Escala desde la esquina superior izquierda */
    }

        .g-recaptcha iframe {
            width: 100% !important; /* Asegura que el iframe ocupe el 100% del contenedor */
            height: auto !important; /* Ajusta la altura automáticamente */
        }
}