:root {
    --brand-primary: #5d5bf4;
    --brand-secondary: #8f8ef9;
    --brand-dark: #0f1123;
}

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, rgba(15, 17, 35, 0.98), rgba(93, 91, 244, 0.35));
    color: #0f1123;
    font-family: 'Poppins', sans-serif;
}

.auth-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.auth-hero {
    background: url('/assets/Marca comercial.png') center/cover no-repeat;
    position: relative;
    padding: 4rem;
    color: #fff;
}

.auth-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(9, 10, 22, 0.9), rgba(93, 91, 244, 0.55));
}

.auth-hero .content {
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.auth-form-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.auth-card {
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(11, 12, 26, 0.15);
    padding: 3rem;
    max-width: 420px;
    width: 100%;
}

.auth-card .btn-primary {
    background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));
    border: none;
    border-radius: 999px;
    padding: 0.875rem 1rem;
    font-weight: 600;
    box-shadow: 0 12px 24px rgba(93, 91, 244, 0.35);
}

.auth-card .btn-outline-secondary {
    border-radius: 0 999px 999px 0;
}

@media (max-width: 992px) {
    .auth-layout {
        grid-template-columns: 1fr;
    }

    .auth-hero {
        display: none;
    }
}