/* Superficies de autenticacao e configuracao inicial. Mantidas separadas do painel. */
.sf-auth-page {
    --auth-page: #f6f8fb;
    --auth-surface: #fff;
    --auth-border: #e2e8f0;
    --auth-text: #17243b;
    --auth-muted: #64748b;
    font-family: "Public Sans", system-ui, sans-serif;
}

html[data-bs-theme="dark"] .sf-auth-page {
    --auth-page: #111827;
    --auth-surface: #1b2431;
    --auth-border: #334155;
    --auth-text: #edf2f9;
    --auth-muted: #a7b4c6;
}

.sf-auth-page .auth-bg {
    min-height: 100svh;
    background: var(--auth-page) !important;
}

.sf-auth-page .auth-sidebar {
    width: 36%;
    max-width: 560px;
    padding: clamp(2rem, 4vw, 4rem);
    background: #14263e;
}

.sf-auth-page .auth-sidebar::before,
.sf-auth-page .auth-sidebar::after {
    content: none;
}

.sf-auth-page .auth-form-col {
    min-height: 100svh;
    padding: 3rem 2rem;
    background: var(--auth-page);
}

.sf-auth-page .auth-form-inner,
.sf-auth-page .auth-form-inner .card {
    max-width: 480px;
}

.sf-auth-page .auth-form-inner .card {
    padding: clamp(1.5rem, 3vw, 2.5rem) !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: .875rem !important;
    background: var(--auth-surface);
    box-shadow: none !important;
    color: var(--auth-text);
}

.sf-auth-page .auth-brand {
    display: block;
    text-align: left;
}

.sf-auth-page .card > h1 {
    margin: .25rem 0 .65rem !important;
    color: var(--auth-text);
    font-size: clamp(1.5rem, 2vw, 1.8rem) !important;
    line-height: 1.2;
    text-align: left;
}

.sf-auth-page .card > .text-muted,
.sf-auth-page .auth-step-heading p,
.sf-auth-page .auth-password-hint,
.sf-auth-page .form-text {
    color: var(--auth-muted) !important;
}

.sf-auth-page .card > h1 + p.text-muted,
.sf-auth-page .auth-eyebrow {
    text-align: left;
}

.sf-auth-page .auth-eyebrow {
    display: flex;
    margin: 1rem 0 .35rem;
    color: #c2410c;
}

.sf-auth-page .auth-form-inner .form-label,
.sf-auth-page .auth-step-heading h2 {
    color: var(--auth-text);
}

.sf-auth-page .auth-form-inner .form-label {
    font-size: .8125rem;
    letter-spacing: 0;
}

.sf-auth-page .auth-form-inner .form-control,
.sf-auth-page .auth-form-inner .form-select,
.sf-auth-page .auth-form-inner .btn-primary {
    min-height: 44px;
    border-radius: .5rem;
}

.sf-auth-page .auth-form-inner .form-control,
.sf-auth-page .auth-form-inner .form-select {
    border-color: var(--auth-border);
    background-color: var(--auth-surface);
    color: var(--auth-text);
}

.sf-auth-page .auth-form-inner .form-control::placeholder {
    color: var(--auth-muted);
    opacity: .8;
}

.sf-auth-page .auth-form-inner .form-control:focus,
.sf-auth-page .auth-form-inner .form-select:focus {
    border-color: #f05728 !important;
    box-shadow: 0 0 0 3px rgba(240, 87, 40, .16) !important;
}

.sf-auth-page .auth-form-inner .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sf-auth-page .auth-form-inner .input-group > .btn {
    border-color: var(--auth-border) !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.sf-auth-page .auth-form-inner .btn-primary {
    font-weight: 600;
}

.sf-auth-page .auth-form-inner .btn-primary:focus-visible,
.sf-auth-page .auth-form-inner a:focus-visible,
.sf-auth-page .auth-form-inner button:focus-visible {
    outline: 3px solid rgba(240, 87, 40, .35);
    outline-offset: 2px;
}

.sf-auth-page .step-indicator {
    gap: .75rem;
    margin: 1.5rem 0 1.75rem;
}

.sf-auth-page .step-indicator::before { content: none; }

.sf-auth-page .step-item {
    padding: .65rem .25rem;
    border: 1px solid var(--auth-border);
    border-radius: .625rem;
    background: var(--auth-surface);
}

.sf-auth-page .step-item.active {
    border-color: #f05728;
    background: rgba(240, 87, 40, .055);
}

.sf-auth-page .step-number {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: .25rem;
    background: transparent;
    color: var(--auth-muted);
    font-size: .8125rem;
}

.sf-auth-page .step-item.active .step-number,
.sf-auth-page .step-item.completed .step-number {
    background: transparent;
    color: #c2410c;
}

.sf-auth-page .step-label { color: var(--auth-muted); }
.sf-auth-page .step-item.active .step-label { color: var(--auth-text); }

.sf-auth-page .registration-details,
.sf-auth-page .registration-details-toggle {
    border-style: solid;
    border-color: var(--auth-border);
    background: var(--auth-surface);
    color: var(--auth-text);
}

.sf-auth-page .registration-details-title { color: var(--auth-text); }

/* O wizard nao carrega o tema do painel; usa as mesmas proporcoes e tons claros. */
.sf-onboarding-page {
    --primary: #f05728;
    --primary-h: #d04820;
    --dark: #14263e;
    --radius: .875rem;
    min-height: 100svh;
    padding: 3rem 1rem 2rem;
    background: #f6f8fb;
    color: #17243b;
    font-family: "Public Sans", system-ui, sans-serif;
}

.sf-onboarding-page .ob-logo { margin-bottom: 1.5rem; }

.sf-onboarding-page .skip-btn {
    top: 1.25rem;
    right: 1.25rem;
    padding: .5rem .75rem;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    background: #fff;
    color: #475569;
}

.sf-onboarding-page .skip-btn:hover { background: #f1f5f9; color: #17243b; }

.sf-onboarding-page .step-dot {
    border-color: #cbd5e1;
    background: #fff;
    color: #64748b;
}

.sf-onboarding-page .step-dot.active { box-shadow: none; }
.sf-onboarding-page .step-line { background: #cbd5e1; }

.sf-onboarding-page .ob-card {
    max-width: 820px;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: 1px solid #e2e8f0;
    border-radius: .875rem;
    box-shadow: none;
}

.sf-onboarding-page .ob-title {
    margin-bottom: .5rem;
    color: #17243b;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
}

.sf-onboarding-page .ob-sub { margin-bottom: 1.75rem; color: #64748b; }
.sf-onboarding-page .ob-field { margin-bottom: 1.125rem; }
.sf-onboarding-page .ob-field label,
.sf-onboarding-page .theme-label { color: #475569; }

.sf-onboarding-page .ob-input {
    min-height: 44px;
    padding: .65rem .8rem;
    border-width: 1px;
    border-radius: .5rem;
    background: #fff;
}

.sf-onboarding-page .seg-item,
.sf-onboarding-page .mode-card,
.sf-onboarding-page .pay-item,
.sf-onboarding-page .theme-opt,
.sf-onboarding-page .logo-drop {
    border-width: 1px;
    border-color: #e2e8f0;
    border-radius: .625rem;
    background: #fff;
    box-shadow: none;
}

.sf-onboarding-page .seg-item:hover,
.sf-onboarding-page .theme-opt:hover,
.sf-onboarding-page .btn-next:hover,
.sf-onboarding-page .btn-os:hover {
    transform: none;
    box-shadow: none;
}

.sf-onboarding-page .seg-item.sel,
.sf-onboarding-page .mode-card.sel,
.sf-onboarding-page .pay-item.sel,
.sf-onboarding-page .theme-opt.sel {
    border-color: #f05728;
    background: #fff7f3;
    box-shadow: none;
}

.sf-onboarding-page .success-icon { background: #f05728; }
.sf-onboarding-page .ob-footer { color: #64748b; }

.sf-onboarding-page button:focus-visible,
.sf-onboarding-page input:focus-visible,
.sf-onboarding-page .seg-item:focus-visible,
.sf-onboarding-page .mode-card:focus-visible {
    outline: 3px solid rgba(240, 87, 40, .24);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .sf-auth-page .auth-form-col { padding: 2rem 1rem; }
}

@media (max-width: 575.98px) {
    .sf-auth-page .auth-form-col { padding: 1rem; }
    .sf-auth-page .auth-form-inner .card { padding: 1.5rem !important; }
    .sf-auth-page .step-indicator { gap: .4rem; }
    .sf-auth-page .step-item { padding: .5rem .15rem; }
    .sf-auth-page .step-label {
        overflow: visible;
        font-size: .6875rem;
        line-height: 1.2;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .sf-onboarding-page { padding: 4rem 1rem 1.5rem; }
    .sf-onboarding-page .ob-card { padding: 1.5rem 1.125rem; }
    .sf-onboarding-page .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-onboarding-page .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-onboarding-page .ob-row { flex-direction: column; gap: 0; }
}