// ═══════════════════════════════════════════════
// FERMENTY — Auth styles
// ═══════════════════════════════════════════════

.auth-body {
    background-color: $green-page;
    min-height: 100vh;
}

.auth-wrapper {
    display: flex;
    min-height: 100vh;
}

// ── Panel izquierdo ───────────────────────────
.auth-left {
    width: 420px;
    flex-shrink: 0;
    background-color: $green-main;
    display: flex;
    flex-direction: column;
    padding: $spacing-xl;

    .auth-left-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .auth-brand {
        color: #fff;
        text-decoration: none;
        font-size: $font-size-xl;
        font-weight: $font-weight-bold;
        display: flex;
        align-items: center;
        gap: $spacing-sm;

        span { color: $orange-main; }
    }

    .auth-left-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: $spacing-2xl 0;

        h2 {
            color: #fff;
            font-size: 1.8rem;
            font-weight: $font-weight-bold;
            line-height: 1.3;
            margin-bottom: $spacing-md;
        }

        p {
            color: $green-light;
            font-size: $font-size-base;
            line-height: 1.6;
            margin-bottom: $spacing-xl;
        }
    }

    .auth-ferments {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-sm;
    }

    .auth-ferment-pill {
        background: rgba(255,255,255,0.15);
        color: $green-light;
        font-size: $font-size-sm;
        padding: 4px 14px;
        border-radius: $radius-pill;
    }

    .auth-left-footer {
        span {
            font-size: $font-size-sm;
            color: rgba(255,255,255,0.5);
        }
    }
}

// ── Panel derecho ─────────────────────────────
.auth-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $spacing-xl;
    background-color: #fff;
}

.auth-form-wrapper {
    width: 100%;
    max-width: 400px;
}

// ── Logo móvil ───────────────────────────────
.auth-brand-mobile {
    color: $green-main;
    text-decoration: none;
    font-size: $font-size-xl;
    font-weight: $font-weight-bold;
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    margin-bottom: $spacing-xl;

    span { color: $orange-main; }
}

// ── Títulos ──────────────────────────────────
.auth-title {
    font-size: $font-size-xl;
    font-weight: $font-weight-bold;
    color: $text-dark;
    margin-bottom: $spacing-xs;
}

.auth-subtitle {
    font-size: $font-size-base;
    color: $text-muted;
    margin-bottom: $spacing-xl;
}

// ── Google button ────────────────────────────
.btn-google {
    background-color: #fff;
    color: $text-dark;
    border: $border-width solid $border-color;
    border-radius: $radius-pill;
    padding: 10px $spacing-xl;
    font-family: $font-ui;
    font-weight: $font-weight-medium;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: $transition-base;
    text-decoration: none;

    &:hover {
        background-color: $green-bg;
        border-color: $green-mid;
        color: $text-dark;
    }
}

// ── Divider ──────────────────────────────────
.auth-divider {
    display: flex;
    align-items: center;
    gap: $spacing-md;
    margin: $spacing-lg 0;

    &::before, &::after {
        content: '';
        flex: 1;
        height: 1px;
        background-color: $border-color;
    }

    span {
        font-size: $font-size-sm;
        color: $text-hint;
        white-space: nowrap;
    }
}

// ── Links ────────────────────────────────────
.auth-link {
    color: $green-mid;
    font-weight: $font-weight-medium;
    text-decoration: none;

    &:hover { color: $green-main; text-decoration: underline; }
}

.auth-link-sm {
    font-size: $font-size-sm;
    color: $text-muted;
    text-decoration: none;

    &:hover { color: $green-mid; }
}

// ── Footer text ──────────────────────────────
.auth-footer-text {
    font-size: $font-size-base;
    color: $text-muted;
    text-align: center;
}

.auth-terms {
    font-size: $font-size-sm;
    color: $text-muted;
}