/* =============================================================================
   QuickSend - telas da conta (InfinityID) no estilo do site e do painel (S54, L-061)

   O markup e do pacote (views/infinityid, classes auth-*); o auth.css do pacote
   so garante a renderizacao minima e vem embutido antes desta folha. Aqui o
   QuickSend formata por cima, sem tocar o pacote: cartao com sombra, botao
   principal no gradiente da marca, campos e foco do site, avisos por tipo,
   links em violeta.

   Duas molduras, os mesmos componentes:
   - body.auth-page: login, cadastro, senha, 2FA, convite (layouts/main), com o
     site.css carregado antes. Os tokens --qs-* leem os do site, entao o tema
     escuro do site vale aqui tambem.
   - body.account-screen: sessoes, 2FA e equipe de quem esta logado, dentro do
     painel (layouts/account). Os tokens --qs-* leem os do brand.css.

   Comentarios sem aspas e sem parenteses de funcao CSS: a folha nao passa pelo
   minificador do Optimizer, mas fica pronta se um dia passar (S50, L-056).
   ========================================================================== */

:root {
    --qs-brand: #5b3fe0;
    --qs-brand-strong: #4a2fc7;
    --qs-brand-soft: #efebff;
    --qs-brand-ink: #3b23a8;
    --qs-gradient: linear-gradient(135deg, #6d4ff0 0%, #4a2fc7 100%);
    --qs-on-brand: #ffffff;
    --qs-bg: #f6f5fc;
    --qs-surface: #ffffff;
    --qs-ink: #17162e;
    --qs-ink-2: #4b4867;
    --qs-line: #e4e1f1;
    --qs-line-strong: #d4d0e8;
    --qs-radius: 14px;
    --qs-radius-sm: 10px;
    --qs-shadow: 0 1px 2px rgba(23, 22, 46, .06), 0 8px 24px rgba(23, 22, 46, .06);
    --qs-shadow-brand: 0 6px 16px -6px rgba(74, 47, 199, .55);
    --qs-focus: 0 0 0 3px rgba(91, 63, 224, .22);
    --qs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Avisos por tipo: fundo claro, texto escuro do mesmo tom (AA), filete. */
    --qs-error-bg: #fdecec;
    --qs-error-ink: #7f1d1d;
    --qs-error-line: #dc2626;
    --qs-warning-bg: #fdf3e1;
    --qs-warning-ink: #78350f;
    --qs-warning-line: #d97706;
    --qs-success-bg: #e3f6ea;
    --qs-success-ink: #14532d;
    --qs-success-line: #16a34a;
    --qs-info-bg: #efebff;
    --qs-info-ink: #3b23a8;
    --qs-info-line: #5b3fe0;
}

/* Moldura publica: os tokens do site.css. */
body.auth-page {
    --qs-brand: var(--brand, #5b3fe0);
    --qs-brand-strong: var(--brand-strong, #4a2fc7);
    --qs-brand-soft: var(--brand-soft, #efebff);
    --qs-brand-ink: var(--brand-ink, #3b23a8);
    --qs-on-brand: #ffffff;
    --qs-bg: var(--tint, #f6f5fc);
    --qs-surface: var(--surface, #ffffff);
    --qs-ink: var(--ink, #17162e);
    --qs-ink-2: var(--ink-2, #4b4867);
    --qs-line: var(--line, #e4e1f1);
    --qs-radius: var(--radius, 14px);
    --qs-radius-sm: var(--radius-sm, 10px);
    --qs-shadow: var(--shadow, 0 1px 2px rgba(23, 22, 46, .06), 0 8px 24px rgba(23, 22, 46, .06));
    --qs-font: var(--font, system-ui, sans-serif);

    /* Pontos de extensao do auth.css do pacote. */
    --auth-error: var(--qs-error-line);
    --auth-warning: var(--qs-warning-line);
    --auth-muted: var(--qs-ink-2);
    --auth-disabled-bg: var(--qs-bg);
    --auth-border-soft: var(--qs-line);
    --auth-border-section: var(--qs-line);
    --auth-surface-subtle: var(--qs-brand-soft);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--hero-from, #f3f0ff) 0, var(--qs-bg) 22rem);
    color: var(--qs-ink);
    font-family: var(--qs-font);
}

@media (prefers-color-scheme: dark) {
    body.auth-page {
        --qs-line-strong: #3a3660;
        --qs-gradient: linear-gradient(135deg, #7d63ff 0%, #5b3fe0 100%);
        --qs-error-bg: #3a1518;
        --qs-error-ink: #fecaca;
        --qs-error-line: #f87171;
        --qs-warning-bg: #3a2a10;
        --qs-warning-ink: #fde68a;
        --qs-warning-line: #fbbf24;
        --qs-success-bg: #10301e;
        --qs-success-ink: #bbf7d0;
        --qs-success-line: #4ade80;
        --qs-info-bg: #241d4d;
        --qs-info-ink: #ddd6ff;
        --qs-info-line: #8f7bff;
    }
}

/* Moldura do painel: os tokens do brand.css. */
body.account-screen {
    --qs-brand: var(--color-primary, #5b3fe0);
    --qs-brand-strong: var(--color-primary-dark, #4a2fc7);
    --qs-brand-soft: var(--color-primary-soft, #efebff);
    --qs-brand-ink: var(--color-primary-ink, #3b23a8);
    --qs-gradient: var(--gradient-brand, linear-gradient(135deg, #6d4ff0 0%, #4a2fc7 100%));
    --qs-bg: var(--color-bg, #f6f5fc);
    --qs-surface: var(--color-surface, #ffffff);
    --qs-ink: var(--color-text, #17162e);
    --qs-ink-2: var(--color-text-secondary, #4b4867);
    --qs-line: var(--color-border, #e4e1f1);
    --qs-line-strong: var(--color-border-strong, #d4d0e8);
    --qs-radius: var(--radius-lg, 14px);
    --qs-radius-sm: var(--radius, 10px);
    --qs-shadow: var(--shadow, 0 1px 2px rgba(23, 22, 46, .06), 0 8px 24px rgba(23, 22, 46, .06));
    --qs-shadow-brand: var(--shadow-brand, 0 6px 16px -6px rgba(74, 47, 199, .55));
    --qs-focus: var(--focus-ring, 0 0 0 3px rgba(91, 63, 224, .22));
    --qs-font: var(--font-sans, system-ui, sans-serif);

    --auth-error: var(--qs-error-line);
    --auth-warning: var(--qs-warning-line);
    --auth-muted: var(--qs-ink-2);
    --auth-disabled-bg: var(--qs-bg);
    --auth-border-soft: var(--qs-line);
    --auth-border-section: var(--qs-line);
    --auth-surface-subtle: var(--qs-brand-soft);
}

/* --- Topo e rodape da moldura publica -------------------------------------
   O topo e o do site: site/partials/header com so o logo (AccountLayout::
   siteHeader), desenhado pelo site.css. Nada dele se redefine aqui, para o
   logo nao mudar de lugar entre o site e o login. */

body.auth-page > main { flex: 1 0 auto; }

.account-footer { border-top: 1px solid var(--qs-line); color: var(--qs-ink-2); font-size: .875rem; }
.account-footer__inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1.25rem;
    max-width: 1120px; margin: 0 auto; padding: 1.25rem 16px;
}
.account-footer p { margin: 0; }
.account-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; }
.account-footer a { color: var(--qs-ink-2); text-decoration: none; }
.account-footer a:hover { color: var(--qs-brand-ink); text-decoration: underline; }

/* --- Avisos do layout, acima do cartao, na largura dele ------------------- */

.account-notices { box-sizing: border-box; max-width: 29.5rem; margin: 2rem auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: .5rem; }
.account-notices + .auth-layout { padding-top: 1rem; }

/* --- Cartao ---------------------------------------------------------------- */

.auth-page .auth-layout { padding: 2.5rem 16px 3rem; }
.auth-page .auth-panel { max-width: 27.5rem; }
.auth-page .auth-panel--wide { max-width: 56rem; }
.auth-panel {
    box-sizing: border-box;
    background: var(--qs-surface);
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow);
    padding: 2rem;
    color: var(--qs-ink);
}
.auth-panel--wide { padding: 2rem; }
.auth-header h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: var(--qs-ink); }
.auth-header p, .auth-text, .auth-hint { color: var(--qs-ink-2); }
.auth-hint { font-size: .875rem; }
.auth-status { color: var(--qs-brand); }

/* --- Campos ---------------------------------------------------------------- */

.auth-field label, fieldset.auth-field > legend { color: var(--qs-ink); font-size: .9375rem; }
.auth-field input:not([type="checkbox"]):not([type="radio"]),
.auth-field select,
.auth-field textarea {
    min-height: 2.875rem;
    border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius-sm);
    background: var(--qs-surface);
    color: var(--qs-ink);
    transition: border-color .15s, box-shadow .15s;
}
.auth-field input:not([type="checkbox"]):not([type="radio"]):hover { border-color: var(--qs-brand); }
.auth-field input:not([type="checkbox"]):not([type="radio"]):focus,
.auth-field select:focus,
.auth-field textarea:focus {
    outline: none;
    border-color: var(--qs-brand);
    box-shadow: var(--qs-focus);
}
.auth-field.has-error input:not([type="checkbox"]):not([type="radio"]),
.auth-field input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) {
    border-width: 1px; border-color: var(--qs-error-line);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qs-error-line) 18%, transparent);
}
.auth-field-error { color: var(--qs-error-line); font-weight: 600; }
.auth-field input[readonly], .auth-field input:disabled { background: var(--qs-bg); color: var(--qs-ink-2); border-color: var(--qs-line); }
.auth-panel input[type="checkbox"], .auth-panel input[type="radio"] { accent-color: var(--qs-brand); width: 1.125rem; height: 1.125rem; }

/* --- Botoes ---------------------------------------------------------------- */

.auth-btn {
    min-height: 2.875rem;
    padding: .65rem 1.15rem;
    border: 1.5px solid var(--qs-line);
    border-radius: var(--qs-radius-sm);
    background: var(--qs-surface);
    color: var(--qs-brand-ink);
    font-weight: 600;
    transition: transform .15s, box-shadow .15s, border-color .15s, background-color .15s;
}
.auth-btn:hover { border-color: var(--qs-brand); transform: translateY(-1px); }
.auth-btn--primary {
    border: 0;
    background: var(--qs-gradient);
    color: var(--qs-on-brand);
    box-shadow: var(--qs-shadow-brand);
}
.auth-btn--primary:hover { color: var(--qs-on-brand); background: var(--qs-gradient); filter: brightness(1.06); }
.auth-btn--secondary { border-style: solid; background: var(--qs-brand-soft); border-color: transparent; }
.auth-btn--danger { color: var(--qs-error-line); border-color: color-mix(in srgb, var(--qs-error-line) 45%, transparent); background: var(--qs-surface); }
.auth-btn--danger:hover { border-color: var(--qs-error-line); }
.auth-btn:disabled, .auth-btn[aria-disabled="true"] { transform: none; }

/* --- Links ----------------------------------------------------------------- */

.auth-panel a:not(.auth-btn):not(.auth-account), .auth-link, button.auth-link { color: var(--qs-brand-ink); font-weight: 600; text-underline-offset: 3px; }
.auth-panel a:not(.auth-btn):not(.auth-account):hover, .auth-link:hover { color: var(--qs-brand-strong); }
.auth-field-row a { font-size: .875rem; text-decoration: none; }
.auth-field-row a:hover { text-decoration: underline; }
.auth-footer { text-align: center; color: var(--qs-ink-2); }
.auth-footer p { font-size: .9375rem; }

:where(.auth-btn, .auth-account, .auth-link, .auth-alert-close, .auth-idnote a, .auth-footer a, .auth-field-row a, .auth-alert a, .auth-hint a, .auth-text a):focus-visible {
    outline: none; box-shadow: 0 0 0 3px var(--qs-surface), 0 0 0 6px var(--qs-brand); border-radius: 6px;
}

/* --- Avisos por tipo ------------------------------------------------------- */

.auth-alert {
    border: 1px solid transparent;
    border-left: 4px solid var(--qs-info-line);
    border-radius: var(--qs-radius-sm);
    background: var(--qs-info-bg);
    color: var(--qs-info-ink);
    font-size: .9375rem;
    line-height: 1.5;
}
.auth-alert--info { background: var(--qs-info-bg); color: var(--qs-info-ink); border-color: transparent; border-left-color: var(--qs-info-line); }
.auth-alert--success { background: var(--qs-success-bg); color: var(--qs-success-ink); border-color: transparent; border-left-color: var(--qs-success-line); }
.auth-alert--warning { background: var(--qs-warning-bg); color: var(--qs-warning-ink); border-width: 1px 1px 1px 4px; border-color: transparent; border-left-color: var(--qs-warning-line); }
.auth-alert--error, .auth-alert--danger { background: var(--qs-error-bg); color: var(--qs-error-ink); border-width: 1px 1px 1px 4px; border-color: transparent; border-left-color: var(--qs-error-line); }
.auth-alert--required { border-width: 1px 1px 1px 4px; }
.auth-alert-mark { color: var(--qs-info-line); }
.auth-alert--success .auth-alert-mark { color: var(--qs-success-line); }
.auth-alert--warning .auth-alert-mark { color: var(--qs-warning-line); }
.auth-alert--error .auth-alert-mark, .auth-alert--danger .auth-alert-mark { color: var(--qs-error-line); }
.auth-alert a { color: inherit; font-weight: 700; }
.auth-alert-close { color: inherit; border-radius: 6px; }

/* --- Contas, sessoes, seguranca ------------------------------------------- */

.auth-account {
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius-sm);
    background: var(--qs-surface);
    color: var(--qs-ink);
    transition: border-color .15s, box-shadow .15s;
}
.auth-account:hover { border-color: var(--qs-brand); box-shadow: var(--qs-shadow); }
.auth-account-avatar { border: 0; background: var(--qs-gradient); color: var(--qs-on-brand); }
.auth-account-meta, .auth-account-state { color: var(--qs-ink-2); }
.auth-account-go { color: var(--qs-brand); }
.auth-sessions .auth-session { border-bottom-color: var(--qs-line); }
.auth-section {
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius);
    background: var(--qs-surface);
}
.auth-section h2 { color: var(--qs-ink); font-weight: 700; }
.auth-secret, .auth-recovery-codes code { background: var(--qs-bg); border-radius: 6px; padding: .1rem .35rem; }
.auth-qr { background: #ffffff; border-radius: var(--qs-radius-sm); padding: .5rem; box-sizing: border-box; }

/* InfinityID dito baixo, sem caixa. */
.auth-idnote { color: var(--qs-ink-2); border-top-color: var(--qs-line); }
.auth-idnote-mark { color: var(--qs-brand); }
.auth-idnote strong { color: var(--qs-ink); }

/* --- Dentro do painel ------------------------------------------------------ */

.account-screen .auth-layout { padding: 0 0 2rem; justify-content: flex-start; }
.account-screen .auth-panel { max-width: 36rem; }
.account-screen .auth-panel--wide { max-width: 56rem; }
.account-screen .auth-header h1 { font-size: 1.5rem; }
.account-screen .auth-sessions, .account-screen .auth-accounts { padding: 0; }

/* --- Celular --------------------------------------------------------------- */

@media (max-width: 30rem) {
    .auth-page .auth-layout { padding: 1.25rem 12px 2rem; }
    .auth-panel, .auth-panel--wide { padding: 1.5rem 1.125rem; }
    .account-notices { margin-top: 1.25rem; padding: 0 12px; }
    .auth-header h1 { font-size: 1.5rem; }
}