/* Login modernizado */
body{align-items: center;}
.login{
    display: flex;
    overflow: hidden;
    width: calc(100% - 40px);
    height: 100%;
    max-width: 1100px;
    max-height: 500px;
    min-width: 400px;
    min-height: 550px;
    border-radius: 20px;
    border: none;
    background: var(--background_1);
    box-shadow: var(--box_shadow_lg);
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
}
.login:hover {transform: translateY(-2px);box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);}
.login_box{width: 100%;height: 100%;display: flex;flex-direction: column;position: relative;align-items: center;justify-content: center;padding: 32px;gap: 24px;}
.login_background{
    width: 100%;
    height: 100%;
    inset: 0;
    margin: auto;
    position: absolute;
    background-image: url('/static/tractos.png');
    background-size: cover;
    background-position: start;
    border-radius: 20px 0 0 20px;
}
.login_opacity{
    width: 100%;
    height: 100%;
    inset: 0;
    margin: auto;
    position: absolute;
}
.login_title{
    width: 100%;
    padding: 0 20px;
    line-height: 30px;
    height: fit-content;
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: white;
    margin: auto;
    position: absolute;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 1);
    letter-spacing: -0.5px;
    bottom: 50px;
    z-index: 1;
}
.login_logo{width: 200px;height: 100px;filter: drop-shadow(0 4px 8px rgba(31, 64, 135, 0.2));transition: transform 0.3s ease;display: flex;align-items: center;justify-content: center;}
.login_logo img{width: 180px;}
.login_logo:hover {transform: scale(1.05);}
.login_text{width: 100%;text-align: center;font-size: 18px;font-weight: 600;color: var(--text_1);line-height: 1.4;}
.login_form{gap: 24px;width: calc(100% - 20px);max-width: 350px;display: flex;flex-direction: column;}
.login_footer{font-size: 11px;display: flex;align-items: center;justify-content: center;gap: 8px;color: var(--text_3);}
.login_footer div{font-weight: 500;}
.login_footer img{width: 21px;min-width: 21px;opacity: 0.8;transition: opacity 0.3s ease;}
.login_footer img:hover {opacity: 1;}
.login_remember{
    gap: 10px;
    width: 100%;
    height: 30px;
    font-size: 12px;
    padding: 0 10px;
    color: var(--text_2);
    display: flex;
    align-items: center;
    font-weight: 500;
    background: var(--background_2);
    border: 1px solid var(--border_1);
    transition: all 0.3s ease;
    border-radius: 5px;
    cursor: pointer;
}
.login_remember input{width: 12px;height: 12px;cursor: pointer;}
.login_remember:hover {background: var(--background_3);}
/* Botones */
.session{
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--gradient_primary);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(31, 64, 135, 0.2);
    letter-spacing: 0.5px;
}
.session:hover, .session:focus{transform: translateY(-2px);box-shadow: 0 8px 16px rgba(31, 64, 135, 0.3);}
.session:active {transform: translateY(0);}
/* Responsive mejorado */
@media screen and (max-width: 900px){
    .login_title{font-size: 24px;}
}
@media screen and (max-width: 700px){
    .login{flex-direction: column;max-width: 450px;max-height: 650px;min-width: calc(100% - 40px);border-radius: 16px;}
    .login_head{max-height: 180px !important;}
    .login_background{border-radius: 16px 16px 0 0;}
    .login_opacity{background: rgba(31, 64, 135, 0.2);border-radius: 16px 16px 0 0;}
    .login_title{margin-top: 0px;font-size: 20px;}
    .login_logo{width: 100px;}
    .login_box{padding: 24px;gap: 20px;}
}