body:has(#login.seccion-activa) { background-color: #1f2b38; }

@keyframes entrarLoginCentro {
    0% { opacity: 0; transform: translate(-50%, -45%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}

#login.login-split {
    position: fixed; top: 50%; left: 50%; margin: 0; 
    width: 85%; max-width: 900px; 
    min-height: 450px; height: auto; 
    flex-direction: row; background-color: #1a2229; 
    border-radius: 12px; overflow: hidden; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.4); z-index: 1000;
    animation: entrarLoginCentro 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#login.login-split.seccion-activa { 
    display: flex !important; 
}

.login-izquierdo { 
    flex: 1.2; background-color: #1a2229; display: flex; 
    align-items: center; justify-content: center; padding: 40px; 
}

.logo-imagen { 
    width: 100%; max-height: 240px; object-fit: contain; border-radius: 8px; 
}

.login-derecho { 
    flex: 1; background-color: #2c3e50; padding: 50px 40px; 
    display: flex; flex-direction: column; justify-content: center; text-align: center;
    color: #ffffff; /* Color general para contraste */
}

.login-derecho h2 { border-bottom: none; color: #aebfd1; margin-bottom: 5px; font-size: 26px; font-weight: 700; padding-bottom: 0; }
.login-derecho .subtitulo { color: #cfd9e1; font-size: 13px; margin-bottom: 30px; } /* Gris más claro para accesibilidad */
.login-derecho .grupo-form { margin-bottom: 15px; text-align: left; }
.login-derecho .grupo-form-mb { margin-bottom: 25px; }

.login-derecho input[type="text"], .login-derecho input[type="password"] {
    background-color: #1f2b38; border: 1px solid transparent; color: #ffffff;
    padding: 14px 20px; border-radius: 4px; font-size: 14px; width: 100%;
    box-sizing: border-box; 
}
.login-derecho input::placeholder { color: #5c6e80; }
.login-derecho input:focus { background-color: #16202a; border: 1px solid #FF0400; outline: none; }

#login.login-split #btn_inicio_sesion {
    background-color: #FFD700; color: #000000; padding: 14px; border-radius: 4px;
    font-size: 15px; font-weight: bold; margin-bottom: 10px; border: none; transition: 0.2s; width: 100%;
    cursor: pointer;
}
#login.login-split #btn_inicio_sesion:hover { background-color: #e6c200; }

@media screen and (min-width: 2500px) {
    #login.login-split {
        max-width: 1400px;
        min-height: 700px;
        border-radius: 20px;
    }
    .login-izquierdo {
        padding: 80px;
    }
    .logo-imagen {
        max-height: 400px;
    }
    .login-derecho {
        padding: 80px 60px;
    }
    .login-derecho h2 {
        font-size: 42px;
        margin-bottom: 10px;
    }
    .login-derecho .subtitulo {
        font-size: 20px;
        margin-bottom: 50px;
    }
    .login-derecho input[type="text"], 
    .login-derecho input[type="password"] {
        padding: 22px 30px;
        font-size: 20px;
        border-radius: 8px;
        margin-bottom: 10px;
    }
    #login.login-split #btn_inicio_sesion {
        padding: 22px;
        font-size: 22px;
        border-radius: 8px;
        margin-top: 15px;
    }
}

@media screen and (max-width: 768px) {
    #login.login-split {
        position: fixed; top: 0; left: 0; transform: none; animation: none;
        flex-direction: column !important; 
        height: 100vh; min-height: 100vh; width: 100%; max-width: 100%;
        border-radius: 0; justify-content: center; align-items: center;
        padding: 20px; background-color: #1f2b38; overflow-y: auto;
    }
    
    .login-izquierdo { width: 100%; flex: none; min-height: auto; display: flex; justify-content: center; background-color: transparent; padding: 10px; margin-bottom: 15px; }
    .logo-imagen { max-width: 250px !important; max-height: 120px !important; height: auto; }
    .login-derecho { width: 100%; flex: none; max-width: 380px; padding: 30px 20px; border-radius: 12px; margin: 0 auto; }
}