.login-page {
        background: linear-gradient(135deg, #c2a1f9 0%, #93ebbb 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 20px;
    }

    .login-background {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: color(srgb red green blue);
        opacity: 0.1;
        z-index: 0;
    }

    .login-box {
        width: 100%;
        max-width: 400px;
        position: relative;
        z-index: 1;
    }

    /* Animación para el logo */
    .logo-slide-down {
        animation: slideDown 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(-100px);
    }

    @keyframes slideDown {
        0% {
            opacity: 0;
            transform: translateY(-100px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Animación para la card */
    .card-slide-up {
        animation: slideUp 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(100px);
    }

    @keyframes slideUp {
        0% {
            opacity: 0;
            transform: translateY(100px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .card {
        border-radius: 15px;
        border: none;
        transition: all 0.3s ease;
    }

    .login-card-body {
        padding: 30px;
    }

    .input-group-text {
        background: white;
        border-right: none;
    }

    .form-control {
        border-left: none;
        border-right: none;
        transition: all 0.3s;
    }

    .form-control:focus {
        box-shadow: none;
        border-color: #ced4da;
    }

    .input-group:focus-within {
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.15);
        border-radius: 5px;
    }

    .logo-hover {
        transition: transform 0.3s ease;
    }

    .logo-hover:hover {
        transform: scale(1.05);
    }

    .btn-primary {
        background: linear-gradient(45deg, #667eea, #764ba2);
        border: none;
        transition: all 0.3s;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        background: linear-gradient(45deg, #764ba2, #667eea);
    }

    .btn-outline-secondary {
        border-left: none;
        border-right: 1px solid #ced4da;
        border-top: 1px solid #ced4da;
        border-bottom: 1px solid #ced4da;
    }

    .btn-outline-secondary:hover {
        background: #a9d3fe;
    }

    .back-link {
        cursor: pointer;
        transition: all 0.3s;
    }

    .back-link:hover {
        color: #0056b3 !important;
        text-decoration: underline !important;
    }

    .password-requirements {
        font-size: 12px;
        margin-top: 5px;
        padding: 8px;
        background: #f8f9fa;
        border-radius: 5px;
    }

    .requirement-item {
        margin-bottom: 3px;
    }

    .requirement-item.valid {
        color: #28a745;
    }

    .requirement-item.invalid {
        color: #6c757d;
    }

    .alert {
        border-radius: 10px;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Ocultar/Mostrar secciones */
    #defaultLoginForm {
        display: block;
    }
    
    #recoveryContainer {
        display: none;
    }
    
    .recovery-mode #defaultLoginForm {
        display: none;
    }
    
    .recovery-mode #recoveryContainer {
        display: block;
    }

    /* Estilos para los pasos de recuperación */
.recovery-step {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.password-requirements {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
}

.requirement-item {
    font-size: 12px;
    margin: 5px 0;
    color: #6c757d;
    transition: all 0.3s ease;
}

.requirement-item.valid {
    color: #28a745;
}

.requirement-item.invalid {
    color: #dc3545;
}

.requirement-item i {
    margin-right: 5px;
    width: 16px;
}

/* Estilo para el campo de código */
#verificationCode {
    font-size: 24px;
    letter-spacing: 5px;
    text-align: center;
    font-family: monospace;
}

/* Animaciones para los botones */
.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Mensajes de alerta mejorados */
.alert {
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .login-box {
        width: 90%;
        margin: 0 auto;
    }
    
    #verificationCode {
        font-size: 18px;
        letter-spacing: 3px;
    }
    
    .requirement-item {
        font-size: 11px;
    }
}