/*** 1. VARIABLES Y CONFIGURACIÓN CORPORATIVA ***/
:root {
    --logo: url('../../Rutaswin/img/rutaswin-logo-david.png');
    --background: url('../../Rutaswin/img/Pantalla_RutasWin_V1.jpg');
    --outstandingColor: #20639B; /* Tu azul corporativo */
    --outstandingColor-dark: #16466e;
    --outstandingColor-light: #5e727e;
    --outstandingColor-superlight: rgba(201, 207, 232, 0.4);
}

@import url('https://fonts.googleapis.com/css?family=Cairo&display=swap');

* {
    font-family: 'Cairo', sans-serif;
    box-sizing: border-box;
}

/* 2. FONDO DE PANTALLA - DEGRADADO VERTICAL CORREGIDO */
html, body {
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Asegúrate de que esta línea esté exacta, con todas las comas */
    background: linear-gradient(
        to bottom,
        rgba(16, 70, 110, 0.9) 0%,
        rgba(16, 70, 110, 0.7) 40%,
        rgba(255, 255, 255, 0.2)100%
    ), var(--background) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    overflow: hidden;
}

form {
    background: transparent !important;
    height: auto !important;
    width: auto !important;
}

/* 3. EL CUADRO PRINCIPAL */
#login.login {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    width: 90em !important;
    height: 45em !important;
    background: var(--background) !important;
    background-size: cover !important;
    background-position: left center !important;
    box-shadow: 0px 0px 25px rgba(0,0,0,0.4) !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    border: none !important;
}

/* 4. COLUMNA BLANCA */
.divlogin {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    width: 30em !important;
    margin: 0 !important;
    background-color: white !important;
    padding: 0 40px !important;
    border-radius: 0px 5px 5px 0px !important;
    box-sizing: border-box !important;
    box-shadow: -10px 0 20px rgba(0,0,0,0.05) !important;
    z-index: 1 !important;
    position: relative !important;
}

.divlogin::after {
    content: 'Powered by';
    position: absolute !important;
    bottom: 20px !important;
    right: 70px !important;
    font-size: 11px !important;
    color: #999 !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 400 !important;
}

.divlogin::before {
    content: 'Aicom' !important;
    position: absolute !important;
    bottom: 20px !important;
    right: 25px !important;
    font-size: 11px !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;

    background: linear-gradient(to right,
    #E6007E 0%, #E6007E 22%,
    #333 23%, #333 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* 5. EL LOGO - MAXIMIZADO Y POSICIONADO ARRIBA */
.flip-card {
    /* El margen negativo de -40px "tira" de todo hacia arriba */
    margin: -40px auto 1em auto !important;
    width: 100% !important;
    max-width: 320px !important;
    /* Reducimos el alto base para que el formulario suba */
    height: 7em !important;
    overflow: visible !important;
}

.flip-card-flipper, .flip-card-back {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

#logo.logo {
    background-image: var(--logo) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    /* ESCALADO Y AJUSTE DE POSICIÓN */
    /* El scale(1.8) lo hace grande, el translateY(-20px) lo empuja más hacia arriba */
    transform: scale(5) translateY(-10px) !important;
}

/* 6. INPUTS (CELLS) - VERSIÓN FINAL BLINDADA */
.login .cell {
    display: flex !important;
    align-items: center !important;
    background-color: var(--outstandingColor-superlight) !important;
    width: 100% !important;
    max-width: 22em !important;
    border-radius: 5px !important;
    margin: 0.8em auto !important;
    padding: 10px 15px !important;
    border: 1px solid #c5d0e5 !important;
    position: relative !important;
}

.login .cell:focus-within i.flx-icon {
    color: var(--outstandingColor) !important;
    transform: scale(1.1) !important;
    transition: color 0.3s ease !important;
}

.login input[type='text'],
.login input[type='password'] {
    background: transparent !important;
    border: none !important;
    color: var(--outstandingColor) !important;
    font-size: 16px !important;
    outline: none !important;
    padding-left: 10px !important;
    flex: 1 !important;
}

.login input[type='password'] {
    padding-right: 35px !important;
}

.login i.flx-icon {
    color: var(--outstandingColor-light) !important;
    font-size: 1.2em !important;
}

.login .cell #pass-status {
    position: absolute !important;
    display: block !important;
    right: 15px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    color: var(--outstandingColor-light) !important;
    font-size: 1.2em !important;
    z-index: 1000 !important;
    margin: 0 !important;
}

/* 7. BOTÓN LOGIN */
#MainButton.mainbutton {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 18em !important;
    height: 3em !important;
    margin: 2em auto 1.2em auto !important;
    color: white !important;
    background: var(--outstandingColor) !important;
    border-radius: 4px !important;
    border: none !important;
    font-weight: bold !important;
    font-size: 16px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.2s ease-in-out !important;
    cursor: pointer !important;
}

    #MainButton.mainbutton:hover {
        background: var(--outstandingColor-dark) !important;
        transform: none !important;
        box-shadow: none !important;
    }

    #MainButton.mainbutton:active {
        background: #103d61 !important;
        transform: none !important;
    }

/* 8. TEXTOS INFERIORES */
.others {
    text-align: center !important;
    margin: 15px auto 0 auto !important;
    width: 100% !important;
    max-width: 16em !important;
    display: block !important;
}

#RememberMe {
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 5px 0 0 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    accent-color: var(--outstandingColor) !important;
}

#RememberMeLabel {
    display: inline-block !important;
    vertical-align: middle !important;
    color: #444 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

#ForgotPasswordHyperLink {
    display: block !important;
    margin-top: 20px !important;
    font-weight: bold !important;
    color: #444 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: opacity 0.3s ease !important;
}

    /* Aseguramos que al pasar el ratón no aparezca el fondo oscuro */
    #ForgotPasswordHyperLink:hover {
        background: transparent !important;
        color: var(--outstandingColor) !important;
        text-decoration: underline !important;
    }

/* 9. LIMPIEZA ELEMENTOS EXTRA */
#poweredBy-flx, .trademark {
    display: none !important;
}


/* 10. ADAPTACIÓN PARA MÓVILES Y TABLETS */

/* Tablets y pantallas medianas (Menos de 992px) */
@media (max-width: 992px) {
    #login.login {
        width: 95% !important;
        height: auto !important;
        flex-direction: column !important; /* Apilamos imagen y login */
        justify-content: center !important;
    }

    .divlogin {
        width: 100% !important;
        border-radius: 5px !important;
        padding: 40px 20px !important;
    }

    /* Reducimos un poco el escalado del logo para que no se salga en tablets */
    #logo.logo {
        transform: scale(3.5) translateY(0px) !important;
    }
}

/* Móviles (Menos de 728px) */
@media (max-width: 728px) {
    html, body {
        overflow-y: auto !important; /* Permitimos scroll si el móvil es pequeño */
        align-items: flex-start !important;
        padding: 20px 0 !important;
    }

    #login.login {
        width: 90% !important;
        margin: 0 auto !important;
        background: white !important; /* En móvil quitamos la imagen de fondo del cuadro para que se lea mejor */
    }

    .divlogin {
        box-shadow: none !important;
    }

    /* Ajustamos el logo para que quepa perfectamente en pantallas estrechas */
    #logo.logo {
        transform: scale(2.5) translateY(0px) !important;
    }

    .flip-card {
        margin: 20px auto !important;
        height: 6em !important;
    }

    /* Ajustamos los inputs para que aprovechen el ancho en móviles */
    .login .cell {
        max-width: 100% !important;
    }

    /* Bajamos los textos de 'Powered by' para que no estorben */
    .divlogin::after, .divlogin::before {
        position: relative !important;
        bottom: 0 !important;
        right: 0 !important;
        text-align: center !important;
        display: block !important;
        margin-top: 10px !important;
    }
}

/* Pantallas muy grandes (Más de 1200px) */
/* Tu código actual ya funciona bien aquí, pero aseguramos el centrado */
@media (min-width: 1200px) {
    #login.login {
        width: 90em !important;
        max-width: 95vw !important;
    }
}