div.login-container {
    background-color: #E29763;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    div.credential-inputs{
        background-image: url('../imgs/LOGO_CHICHO_256.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        
        max-width: 30rem;
        max-height: 40rem;
        padding: 2rem;
        border: #E29763 0.25rem solid;
        border-radius: 0.5rem;
        background-color: #FEF1E6;
        display: flex;
        flex-direction: column;

        div.login-title{
            text-align: center;
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: black;
        }

        div.credentials-rows{
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 0.25rem;

            label {
              font-size: 1.25rem;
              color: rgb(87, 83, 83);  
            }
            input {
                padding: 0.5rem;
                border: #E29763 0.15rem solid;
                border-radius: 0.25rem;
                font-size: 1rem;
            }
        }

        div.credentials-buttons{
            display: flex;
            flex-direction: column;
            gap: 0.25rem;

            button{
                padding: 0.25rem;
                border: black 0.15rem solid;
                border-radius: 0.25rem;
                background-color: #E29763;
                color: #FEF1E6;
                font-size: 1.25rem;
                font-weight: bold;
                cursor: pointer;
            }

            button:hover{
                border: #E29763 0.15rem solid;
                background-color: #FEF1E6;
                color: #E29763;
            }
        }
    }
}

/* Media queries mejoradas para mayor compatibilidad */
@media screen and (max-width: 750px) {
    div.login-container {
        padding: 1rem;
        background-color: gray !important; /* Forzar el color */
    }
    
    div.login-container div.credential-inputs {
        width: 90% !important;
        height: 90% !important;
        padding: 1rem !important;
    }
    
    div.login-container div.credential-inputs div.login-title {
        font-size: 1.5rem !important;
    }
    
    div.login-container div.credential-inputs div.credentials-rows label {
        font-size: 1rem !important;
    }
    
    div.login-container div.credential-inputs div.credentials-rows input {
        font-size: 0.875rem !important;
    }
    
    div.login-container div.credential-inputs div.credentials-buttons button {
        font-size: 1rem !important;
    }
}

/* Media query adicional específica para iPhone */
@media screen and (max-width: 750px) and (max-device-width: 750px) {
    div.login-container {
        background-color: gray !important;
    }
}