/* Estilos específicos para el Login */

/* CORRECCIÓN: Contenedor con Flexbox para centrado perfecto */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Cursor para el icono del ojo */
#togglePassword {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    color: white;
    border-left: 0;
}

/* Estado inicial (Oculto/Seguro) -> Azul Primario  */
#togglePassword.bg-primary {
    background-color: #2C5D94;
    border-color: #2C5D94;
}

#togglePassword.bg-primary:hover {
    background-color: #1e4470;
    border-color: #1e4470;
}

/* Estado visible (Peligro) -> Rojo */
#togglePassword.bg-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

#togglePassword.bg-danger:hover {
    background-color: #bb2d3b;
    border-color: #bb2d3b;
}

/* Ajuste al input para que pegue bien con el botón coloreado */
#passwordInput {
    border-right: 0;
}

/* Animación suave del ícono */
#iconEye {
    transition: transform 0.2s ease;
}

#togglePassword:active #iconEye {
    transform: scale(0.9);
}