/* Auth styles - isolated from main app */
:root {
    --primary: #ba4949;
    --primary-700: #a03d3d;
    --bg: #f7f7fb;
    --text: #1f2937;
    --muted: #6b7280;
    --card: #ffffff;
    --border: #e5e7eb;
    --ring: #fca5a5;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center
}

.container {
    width: 100%;
    max-width: 560px;
    padding: 24px
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    padding: 24px
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px
}

.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-weight: 900
}

.logo-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 8px;
}

.title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .2px
}

.subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

.tabs {
    display: flex;
    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    margin: 16px 0
}

.tabs--hidden {
    display: none
}

.tab {
    flex: 1;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    color: #6b7280;
    font-weight: 700
}

.tab.active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05)
}

.form {
    display: grid;
    gap: 12px;
    margin-top: 8px
}

.label {
    font-weight: 600;
    font-size: 13px;
    color: #374151
}

.input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none
}

.input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 4px rgba(252, 165, 165, .25)
}

/* Validation UI: green check for valid, orange exclamation for invalid */
.input.is-valid,
.input.is-invalid {
    padding-right: 38px; /* space for icon */
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}

.input.is-valid {
    border-color: #10b981; /* emerald-500 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.input.is-invalid {
    border-color: #f59e0b; /* amber-500 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

.input.is-invalid:hover { cursor: help; }

/* Password visibility toggle */
.input-wrap {
    position: relative;
}

.input.with-toggle {
    padding-right: 40px; /* space for eye button */
}

.input.with-toggle.is-valid,
.input.with-toggle.is-invalid {
    background-position: right 40px center; /* push validation icon left to avoid overlap with eye */
}

.toggle-visibility {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #9ca3af; /* gray-400 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.toggle-visibility:hover { color: #6b7280; background: #f3f4f6; }

/* Password checklist (registration only) */
.password-checklist {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: 10px 12px;
    display: none;
    z-index: 1200;
}
.password-checklist--floating {
    position: fixed;
    width: 320px;
    max-width: 95vw;
    top: 0;
    left: 0;
    z-index: 3000;
}
.password-checklist.show { display: block; }
.password-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.password-checklist .check-item { display: flex; align-items: center; gap: 8px; color: #6b7280; font-size: 13px; }
.password-checklist .check-item::before { content: ""; width: 16px; height: 16px; background-size: 16px 16px; background-repeat: no-repeat; background-position: center; display: inline-block; }
.password-checklist .check-item.ok { color: #065f46; }
.password-checklist .check-item.ok::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.password-checklist .check-item.pending::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E"); }

.forgot {
    display: inline-block;
    margin-top: 4px;
    color: var(--primary);
    text-decoration: none;
    font-size: 12px
}

.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px
}

.remember-row .remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #374151
}

.remember-row .remember input {
    width: 16px;
    height: 16px
}

.remember-row .forgot {
    margin: 0
}

/* Aceite de termos (cadastro) */
.terms-row {
    margin-top: 4px;
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: #374151;
    line-height: 1.35;
    user-select: none;
}

.terms-check input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.terms-check a {
    font-weight: 800;
    text-decoration: none;
}

.terms-check a:hover {
    text-decoration: underline;
}

.actions {
    display: grid;
    gap: 8px;
    margin-top: 8px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none
}

.btn.primary {
    background: var(--primary);
    color: #fff
}

.btn.primary:hover {
    background: var(--primary-700)
}

/* Sucesso de ação (reset password) */
.btn.success-btn { background:#10b981 !important; color:#0f1e17 !important; border:1px solid #10b981 !important; box-shadow:0 0 0 1px rgba(16,185,129,0.35),0 4px 14px -2px rgba(16,185,129,0.25) !important; }
.btn.success-btn:hover { background:#059669 !important; border-color:#059669 !important; }

/* Estado de loading genérico para botões (reutilizado em login/cadastro) */
.btn.is-loading,
.nav-btn.is-loading {
    opacity: 0.85;
    cursor: progress;
    filter: saturate(0.9);
}

/* Spinner utility */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin .6s linear infinite; }

.btn.ghost {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none
}

.btn.google {
    background: #fff;
    border: 1px solid var(--border);
    color: #374151;
    text-decoration: none
}

.btn.google i {
    color: #DB4437
}

.hr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    color: #6b7280;
    font-size: 12px
}

.hr:before,
.hr:after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--border)
}

.meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px
}

.meta a {
    color: var(--primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
}

.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    display: none
}

.success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    display: none
}

.footer {
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    margin-top: 16px
}

.container>.card+.card {
    margin-top: 12px
}

.container>.footer {
    margin-top: 18px
}

.page-title {
    font-size: 22px;
    font-weight: 900;
    margin: 4px 0 4px
}

.page-subtitle {
    margin: 0 0 12px;
    color: #6b7280;
    font-size: 14px;
    text-align: center
}

.guest {
    margin-top: 16px;
    text-align: center
}

.guest .hint {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 10px
}

.btn.outline {
    background: #fff;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 800;
    text-decoration: none
}

.btn.outline:hover {
    border-color: var(--primary-700);
    color: var(--primary-700)
}

/* UI Alert (reutilizável) */
.ui-alert-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000
}

.ui-alert-overlay.show {
    display: flex
}

.ui-alert {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    width: 360px;
    max-width: 90vw;
    padding: 20px;
    color: var(--text)
}

.ui-alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.ui-alert-title {
    font-size: 16px;
    font-weight: 800
}

.ui-alert-close {
    background: transparent;
    border: 0;
    color: #9ca3af;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ui-alert-close:hover {
    background: #f3f4f6;
    color: #6b7280
}

.ui-alert-body {
    font-size: 14px;
    color: #374151;
    margin: 6px 0 14px
}

.ui-alert-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

/* Disabled state explicit (JS adiciona .is-disabled e disabled attr) */
.btn.is-disabled,[disabled].btn { opacity:0.55 !important; cursor:not-allowed !important; filter:grayscale(0.2); pointer-events:none; }

.alert {
    display: none
}

/* Small screens */
@media (max-width:420px) {
    .container {
        padding: 16px
    }

    .card {
        padding: 18px
    }
}

/* ================= DARK + GOLD THEME OVERRIDES (append-only, non-destructive) ================= */
/* Mantém layout original; apenas aplica paleta escura consistente com app principal e destaque amarelo. */

:root {
    --brand-gold: #f5c241;
    --brand-gold-hover: #e7b326;
    --brand-gold-border: rgba(245,194,65,0.55);
    --brand-gold-shadow: 0 0 0 1px rgba(245,194,65,0.35), 0 4px 14px -2px rgba(245,194,65,0.25);
    --auth-bg-dark: radial-gradient(1200px 600px at 50% -100px, #121826 10%, #0b0f19 60%), linear-gradient(180deg, #0b0f19, #111827);
    --auth-surface: #141b24;
    --auth-surface-alt: #1b242f;
    --auth-border: #1f2a36;
    --auth-border-soft: #2a3642;
    --auth-text: #d8e0e7;
    --auth-text-soft: #93a2b2;
    --auth-danger-bg: #312022;
    --auth-danger-border: #5e2e30;
}

/* Fundo geral escuro */
body { background: var(--auth-bg-dark) !important; color: var(--auth-text); }

/* Cartões escuros */
.card { background: var(--auth-surface) !important; border-color: var(--auth-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02) !important; }

/* Logo bloco agora dourado sobre superfície translúcida */
.logo { background: var(--brand-gold) !important; color:#1a1f27 !important; box-shadow: var(--brand-gold-shadow); }

/* Títulos / subtítulos */
.page-title { color: var(--brand-gold) !important; letter-spacing:.5px; }
.page-subtitle { color: var(--auth-text-soft) !important; }

/* Tabs (se visíveis) */
.tabs { background: #1d2732 !important; border-color: var(--auth-border) !important; }
.tab { color: var(--auth-text-soft) !important; }
.tab.active { background: var(--auth-surface-alt) !important; color: var(--auth-text) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; }

/* Labels / textos auxiliares */
.label { color: var(--auth-text) !important; }
.remember-row .remember, .remember-row .remember input + span { color: var(--auth-text-soft) !important; }
.remember-row .remember input { accent-color: var(--brand-gold); }
.terms-check { color: var(--auth-text-soft) !important; }
.terms-check input { accent-color: var(--brand-gold); }

/* Inputs */
.input { background: var(--auth-surface-alt) !important; border-color: var(--auth-border-soft) !important; color: var(--auth-text) !important; box-shadow: none !important; }
.input::placeholder { color: #5d6a75 !important; }
.input:focus { border-color: var(--brand-gold) !important; box-shadow: 0 0 0 2px rgba(245,194,65,0.25) !important; }
.input.is-valid { border-color:#10b981 !important; box-shadow:0 0 0 2px rgba(16,185,129,0.25) !important; }
.input.is-invalid { border-color:#f59e0b !important; box-shadow:0 0 0 2px rgba(245,158,11,0.25) !important; }

/* Toggle de senha */
.toggle-visibility { color:#7b8791 !important; }
.toggle-visibility:hover { background:#233140 !important; color: var(--auth-text) !important; }

/* Password checklist */
.password-checklist { background: var(--auth-surface-alt) !important; border-color: var(--auth-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; }
.password-checklist .check-item { color: var(--auth-text-soft) !important; }
.password-checklist .check-item.ok { color:#10b981 !important; }

/* Links */
a, .forgot { color: var(--brand-gold) !important; }
a:hover, .forgot:hover { color: var(--brand-gold-hover) !important; }
.meta a { color: var(--brand-gold) !important; }

/* Separador */
.hr { color: var(--auth-text-soft) !important; }
.hr:before, .hr:after { border-top-color: #253241 !important; }

/* Botões base */
.btn { font-weight:800; transition: background-color .18s, color .18s, border-color .18s; }

/* Botão primário dourado */
.btn.primary { background: var(--brand-gold) !important; color:#1a1f27 !important; border:1px solid var(--brand-gold-border) !important; box-shadow: var(--brand-gold-shadow) !important; }
.btn.primary:hover { background: var(--brand-gold-hover) !important; }

/* Botão Google – mantém contraste mas adapta borda */
.btn.google { background: var(--auth-surface-alt) !important; border:1px solid var(--auth-border-soft) !important; color: var(--auth-text) !important; }
.btn.google:hover { background:#233140 !important; }
.btn.google i { color: var(--brand-gold) !important; }

/* Botão outline convidado vira branco para seguir guideline de secundário branco */
.btn.outline { background:#fff !important; color:#1f2937 !important; border:2px solid #fff !important; }
.btn.outline:hover { background:#f5f5f5 !important; color:#111827 !important; }

/* Botão ghost (alert) vira branco secundário */
.btn.ghost { background:#fff !important; border:1px solid #d1d5db !important; color:#1f2937 !important; }
.btn.ghost:hover { background:#f5f5f5 !important; }

/* Mensagens de erro / sucesso adaptadas para dark */
.error { background: var(--auth-danger-bg) !important; border-color: var(--auth-danger-border) !important; color:#fca5a5 !important; }
.success { background:#052e2b !important; border-color:#0d5d54 !important; color:#34d399 !important; }

/* Alert modal dark */
.ui-alert-overlay { background: rgba(0,0,0,0.6) !important; }
.ui-alert { background: var(--auth-surface) !important; border-color: var(--auth-border) !important; color: var(--auth-text) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.55) !important; position:relative; }
.ui-alert::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--brand-gold); }
.ui-alert-title { color: var(--brand-gold) !important; }
.ui-alert-body { color: var(--auth-text-soft) !important; }
.ui-alert-close { color:#7b8791 !important; }
.ui-alert-close:hover { background:#233140 !important; color: var(--auth-text) !important; }

/* Footer */
.footer { color: #5d6a75 !important; }

/* Acessibilidade: outline visível em foco teclado */
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--brand-gold) !important; outline-offset:2px !important; }

/* Fim overrides */