/* ==========================================================================
   PayAlfa - telas de acesso (login, cadastro, recuperar e redefinir senha)
   Ligada no fim do <head> de cada uma, depois do <style> da pagina.
   Celular e tablet: fundo papel, logo e formulario em cartao branco com fio.
   Desktop (>=1024): painel de marca petroleo chapado a esquerda (pa-auth.js)
   com o alfa grande e uma frase; formulario a direita no papel.
   ========================================================================== */
:root {
    --pa-bg: #F3F4F1; --pa-surface: #FFFFFF; --pa-surface-2: #F7F8F5; --pa-surface-3: #ECEEE9;
    --pa-line: #E4E6E0; --pa-line-2: #D3D6CE;
    --pa-text: #14181B; --pa-text-2: #4A5258; --pa-text-3: #636B72;
    --pa-brand: #0D5C63; --pa-brand-2: #0A4B51; --pa-brand-tint: #E4EFEF;
    --pa-ok: #137A43; --pa-ok-tint: #E6F3EA; --pa-warn: #A15C07; --pa-warn-tint: #FBF0DC; --pa-bad: #C2331F; --pa-bad-tint: #FBE8E4;
    --pa-r-lg: 10px; --pa-r: 6px; --pa-r-sm: 4px;
    /* variaveis herdadas do <style> das paginas (nomes antigos): viram os tons do papel */
    --pure-black: #F3F4F1; --dark-black: #FFFFFF; --darker-black: #F7F8F5; --border-gray: #D3D6CE;
    --text-gray: #4A5258; --light-red: #0D5C63; --pale-red: #0D5C63; --success-color: #137A43; --warning-color: #A15C07;
}

html { height: auto !important; overflow: visible; }
html body {
    background: var(--pa-bg) !important; color: var(--pa-text);
    font-family: 'Public Sans', system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased; margin: 0;
    padding: 0 !important; height: auto !important; min-height: 100dvh;
    display: block !important; overflow-x: clip !important; overflow-y: visible !important;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body .card-title, html body .modal-title {
    font-family: 'Public Sans', system-ui, sans-serif !important; letter-spacing: -0.015em;
}

/* ---------- moldura ---------- */
html body .page-wrapper {
    min-height: 100vh; min-height: 100dvh; width: 100%; max-width: none !important; margin: 0 !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 20px !important; box-sizing: border-box; position: relative;
}
/* logo alinhado a borda esquerda do cartao, nao centralizado solto */
html body .logo-container { width: 100%; max-width: 420px; margin: 0 0 20px !important; padding: 0 !important; text-align: left !important; }
html body .page-wrapper:has(.register-card) .logo-container { max-width: 460px; }
html body .logo-container .logo { height: 32px !important; width: auto !important; max-width: none !important; display: block; margin-left: 0; filter: none !important; }

html body .login-card, html body .register-card, html body .forgot-card, html body .reset-card {
    width: 100% !important; max-width: 420px !important; margin: 0 !important; box-sizing: border-box;
    background: var(--pa-surface) !important; border: 1px solid var(--pa-line) !important;
    border-radius: var(--pa-r-lg) !important; box-shadow: none !important; padding: 32px !important;
    animation: none !important;
}
html body .register-card { max-width: 460px !important; }

html body .card-title { font-size: 22px !important; font-weight: 650 !important; color: var(--pa-text) !important; margin: 0 0 6px !important; text-align: left !important; line-height: 1.25; }
html body .card-subtitle { font-size: 14px !important; color: var(--pa-text-2) !important; text-align: left !important; line-height: 1.5; margin: 0 0 24px !important; }
html body .login-card .card-title { margin-bottom: 24px !important; }
html body .illustration-container { display: none !important; }

/* ---------- campos ---------- */
html body .form-group { margin-bottom: 18px !important; }
html body .form-label { display: block; font-size: 14px !important; font-weight: 500 !important; color: var(--pa-text) !important; margin-bottom: 6px !important; text-transform: none !important; letter-spacing: 0 !important; }
html body .form-label sup { color: var(--pa-text-3) !important; font-size: 11px; top: -0.3em; }
/* .form-input e .form-select sao do cadastro; .form-control das outras telas */
html body .form-control, html body .form-input, html body .form-select {
    height: 44px !important; background-color: var(--pa-surface) !important; border: 1px solid var(--pa-line-2) !important;
    border-radius: var(--pa-r) !important; color: var(--pa-text) !important; font-size: 15px !important; font-weight: 400 !important;
    box-shadow: none !important; font-family: inherit !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
html body .form-control::placeholder, html body .form-input::placeholder { color: var(--pa-text-3) !important; opacity: 1; }
html body .form-control:hover, html body .form-input:hover, html body .form-select:hover { border-color: #B9BDB3 !important; }
html body .form-control:focus, html body .form-input:focus, html body .form-select:focus { border-color: var(--pa-brand) !important; box-shadow: 0 0 0 3px var(--pa-brand-tint) !important; outline: 0 !important; }
html body .form-input.is-invalid, html body .form-select.is-invalid, html body .form-control.is-invalid { border-color: var(--pa-bad) !important; }
html body .form-input.is-invalid:focus, html body .form-select.is-invalid:focus, html body .form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--pa-bad-tint) !important; }
/* o <select> nao pode ter padding vertical, senao corta a fonte */
html body .form-select { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 42px; color: var(--pa-text) !important; }
html body .form-select option { background: #fff; color: var(--pa-text); }
html body .input-icon { color: var(--pa-text-3) !important; font-size: 16px !important; }
html body .input-wrapper:focus-within .input-icon { color: var(--pa-brand) !important; }
html body .field-hint { color: var(--pa-text-3) !important; font-size: 13px !important; }
/* olho da senha: alvo de toque de 40px */
html body .password-toggle, html body .show-password-btn {
    color: var(--pa-text-3) !important; width: 40px; height: 40px; right: 2px !important; padding: 0 !important;
    display: flex; align-items: center; justify-content: center; border-radius: var(--pa-r); background: none !important; border: 0 !important;
}
html body .password-toggle:hover, html body .show-password-btn:hover { color: var(--pa-text) !important; }
html body input:-webkit-autofill { -webkit-text-fill-color: var(--pa-text) !important; box-shadow: 0 0 0 100px #fff inset !important; caret-color: var(--pa-text); }

/* ---------- botoes ---------- */
html body .btn-primary, html body .btn.btn-primary, html body .btn-next {
    height: 44px !important; width: 100%; background: var(--pa-brand) !important; border: 0 !important; border-radius: var(--pa-r) !important;
    color: #fff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
    box-shadow: none !important; transform: none !important; transition: background-color .15s ease !important;
    padding: 0 16px !important; margin-top: 4px;
}
html body .btn-primary:hover, html body .btn-next:hover { background: var(--pa-brand-2) !important; transform: none !important; box-shadow: none !important; }
html body .btn-primary:disabled, html body .btn-next:disabled { background: var(--pa-brand) !important; opacity: .55 !important; transform: none !important; }
html body .btn-primary:focus-visible, html body .btn-next:focus-visible, html body .btn-back:focus-visible, html body .btn-secondary:focus-visible { outline: 2px solid var(--pa-brand); outline-offset: 2px; }
html body .btn-secondary, html body .btn-outline-secondary, html body .btn-back {
    height: 44px !important; background: var(--pa-surface) !important; border: 1px solid var(--pa-line-2) !important; border-radius: var(--pa-r) !important;
    color: var(--pa-text) !important; font-weight: 600 !important; font-size: 15px !important; box-shadow: none !important; transform: none !important;
    padding: 0 16px !important;
}
html body .btn-secondary:hover, html body .btn-outline-secondary:hover, html body .btn-back:hover { background: var(--pa-surface-2) !important; transform: none !important; }
html body .buttons-row { gap: 10px !important; margin-top: 24px !important; }
html body .buttons-row .btn-back { flex: 0 0 auto !important; min-width: 108px; }

/* ---------- links ---------- */
html body .forgot-password { margin-top: 8px !important; text-align: right; }
html body .forgot-password a, html body .register-link a, html body .login-link a, html body .card-links a, html body .footer-text a, html body .footer-links a {
    color: var(--pa-brand) !important; font-weight: 600 !important; text-decoration: none !important;
    /* alvo de toque de 40px sem mexer no fluxo do texto */
    display: inline-block; padding: 11px 0; margin: -11px 0; line-height: 18px;
}
html body .forgot-password a { font-size: 14px; font-weight: 500 !important; }
html body .forgot-password a:hover, html body .register-link a:hover, html body .login-link a:hover, html body .card-links a:hover, html body .footer-text a:hover, html body .footer-links a:hover { text-decoration: underline !important; text-underline-offset: 3px; color: var(--pa-brand-2) !important; }
html body .register-link, html body .login-link, html body .footer-text { color: var(--pa-text-2) !important; font-size: 14px !important; margin: 20px 0 0 !important; text-align: left !important; }
html body .footer-text p { margin: 0; }
html body .footer-links { margin-top: 20px !important; font-size: 14px !important; text-align: left !important; }
html body .footer-links .divider { margin: 6px 0 !important; color: var(--pa-text-3) !important; font-size: 13px !important; }
/* "Voltar a pagina inicial": fica abaixo, separado por fio, sem seta decorativa */
html body .back-to-home {
    border: 0 !important; border-top: 1px solid var(--pa-line) !important; border-radius: 0 !important; background: none !important;
    color: var(--pa-text-2) !important; font-size: 14px !important; text-decoration: none !important;
    padding: 16px 0 0 !important; margin: 20px 0 0 !important; min-height: 40px; display: flex !important; align-items: center; justify-content: flex-start !important; gap: 6px; transform: none !important;
}
html body .back-to-home svg { display: none; }
html body .back-to-home:hover { color: var(--pa-text) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* caixa de aceite dos termos */
html body .checkbox-wrapper { align-items: center !important; min-height: 40px; }
html body .checkbox-input { flex: 0 0 18px; width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--pa-brand); }
html body .checkbox-label { padding: 10px 0; color: var(--pa-text-2) !important; font-size: 14px !important; }
html body .checkbox-label a { color: var(--pa-brand) !important; font-weight: 600 !important; text-underline-offset: 3px; }
html body #termos-hint { color: var(--pa-text-3) !important; }

/* ---------- passos do cadastro: faixa segmentada + rotulo do passo ---------- */
html body .pa-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 13px; }
html body .pa-steps-head b { font-weight: 600; color: var(--pa-text); font-size: 14px; }
html body .pa-steps-head span { color: var(--pa-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body .wizard-icons { display: flex !important; gap: 4px !important; justify-content: stretch !important; padding: 0 !important; margin: 0 0 24px !important; }
html body .wizard-step { flex: 1 1 0 !important; min-width: 0; height: 4px; border-radius: 2px; background: var(--pa-surface-3); transition: background-color .2s ease; }
html body .wizard-step:last-child { flex: 1 1 0 !important; }
html body .wizard-step::after { display: none !important; content: none !important; }
html body .wizard-step.active, html body .wizard-step.completed, html body .wizard-step:has(.wizard-icon.active), html body .wizard-step:has(.wizard-icon.completed) { background: var(--pa-brand); }
html body .wizard-icon { display: none !important; }
/* o passo entra sem esmaecer: nada de conteudo semitransparente no meio da leitura */
html body .form-step, html body .form-step.active { animation: none !important; opacity: 1 !important; }

/* forca da senha e requisitos */
html body .strength-bar-wrap { background: var(--pa-surface-3) !important; height: 4px !important; }
html body .password-strength { color: var(--pa-text-2) !important; }
html body .pw-reqs { color: var(--pa-text-2) !important; font-size: 13px !important; }
html body .pw-reqs li i { color: var(--pa-text-3) !important; }
html body .pw-reqs li.ok, html body .pw-reqs li.ok i { color: var(--pa-ok) !important; }

/* ---------- avisos ---------- */
html body .alert { border: 1px solid transparent !important; border-left-width: 1px !important; border-radius: var(--pa-r) !important; font-size: 14px !important; line-height: 1.5; padding: 12px 14px !important; margin-bottom: 20px !important; }
html body .alert-danger, html body .alert-error { background: var(--pa-bad-tint) !important; color: var(--pa-bad) !important; border-color: #F1C7BF !important; }
html body .alert-success { background: var(--pa-ok-tint) !important; color: var(--pa-ok) !important; border-color: #BFDFC9 !important; }
html body .alert-warning { background: var(--pa-warn-tint) !important; color: var(--pa-warn) !important; border-color: #EDD3A6 !important; }
html body .strength-text.weak { color: var(--pa-bad) !important; }
html body .strength-text.medium { color: var(--pa-warn) !important; }
html body .strength-text.strong { color: var(--pa-ok) !important; }
html body .password-strength-indicator { background: var(--pa-surface-3) !important; height: 4px !important; }
html body .password-requirements { color: var(--pa-text-2) !important; }
html body .password-requirements .icon.unchecked { color: var(--pa-text-3) !important; }
html body .password-requirements .icon.checked { color: var(--pa-ok) !important; }
html body .overlay { background: rgba(243,244,241,0.92) !important; color: var(--pa-text) !important; }
html body .spinner-border { border-color: var(--pa-line-2) !important; border-right-color: var(--pa-brand) !important; }
html body .success-icon { background: var(--pa-ok) !important; animation: none !important; border-radius: 50%; }
html body .success-icon i { color: #FFFFFF !important; }

/* aviso flutuante: cartao branco com fio, icone em tinta da cor do tipo
   (o pa-auth.js poe .toast-success/.toast-warning/.toast-error) */
html body .toast-container { top: 16px !important; right: 16px !important; left: auto; width: auto !important; max-width: none !important; }
html body .toast-container .toast, html body .toast {
    background: var(--pa-surface) !important; border: 1px solid var(--pa-line-2) !important; border-left: 1px solid var(--pa-line-2) !important; border-radius: var(--pa-r-lg) !important;
    box-shadow: 0 8px 24px rgba(20,24,27,0.08) !important; color: var(--pa-text) !important;
    min-width: 0 !important; width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 32px); box-sizing: border-box;
    padding: 14px 44px 14px 14px !important; transition: transform .2s ease, opacity .2s ease !important;
}
html body .toast .toast-check {
    width: 32px !important; height: 32px !important; font-size: 16px !important; border-radius: var(--pa-r) !important;
    background: var(--pa-brand-tint) !important; color: var(--pa-brand) !important; font-weight: 400 !important;
}
html body .toast .message { margin: 0 0 0 12px !important; }
html body .toast .text-1 { font-size: 14px !important; font-weight: 600 !important; color: var(--pa-text) !important; }
html body .toast .text-2 { font-size: 14px !important; color: var(--pa-text-2) !important; }
html body .toast .progress { background: transparent !important; height: 2px !important; }
html body .toast .progress::before { background: var(--pa-brand) !important; }
html body .toast-success .toast-check { background: var(--pa-ok-tint) !important; color: var(--pa-ok) !important; }
html body .toast-warning .toast-check { background: var(--pa-warn-tint) !important; color: var(--pa-warn) !important; }
html body .toast-error .toast-check { background: var(--pa-bad-tint) !important; color: var(--pa-bad) !important; }
html body .toast-success .progress::before { background: var(--pa-ok) !important; }
html body .toast-warning .progress::before { background: var(--pa-warn) !important; }
html body .toast-error .progress::before { background: var(--pa-bad) !important; }
html body .toast .toast-close { top: 8px !important; right: 6px !important; width: 32px; height: 32px; padding: 0 !important; display: flex; align-items: center; justify-content: center; color: var(--pa-text-3) !important; opacity: 1 !important; }
html body .toast .toast-close:hover { color: var(--pa-text) !important; }

/* ---------- modal de dois fatores do login ---------- */
html body .modal-backdrop, html body .modal-backdrop.show { background: #14181B !important; opacity: .32 !important; }
html body .modal-content { border-radius: var(--pa-r-lg) !important; background: var(--pa-surface) !important; border: 1px solid var(--pa-line) !important; box-shadow: 0 16px 40px rgba(20,24,27,0.12) !important; }
html body .modal-header { background: transparent !important; border-bottom: 1px solid var(--pa-line) !important; padding: 18px 24px !important; }
html body .modal-title { font-size: 17px !important; font-weight: 600 !important; color: var(--pa-text) !important; display: flex; align-items: center; gap: 8px; }
html body .modal-title i { color: var(--pa-brand) !important; }
html body .modal-body { text-align: center; padding: 20px 24px !important; }
html body .modal-body p { color: var(--pa-text-2) !important; font-size: 14px; margin: 0 0 4px; }
html body .modal-body small { color: var(--pa-text-3) !important; font-size: 13px; display: block; }
html body .modal-footer { padding: 16px 24px 20px !important; border-top: 0 !important; gap: 10px; }
html body .modal-footer .btn { margin: 0 !important; }
html body .modal-footer .btn i { display: none; }
html body .twofa-input-group { margin: 18px 0 !important; }
html body .twofa-digit {
    border-width: 1px !important; border-color: var(--pa-line-2) !important; background: var(--pa-surface) !important; color: var(--pa-text) !important;
    border-radius: var(--pa-r) !important; font-weight: 600 !important; font-feature-settings: "tnum" 1; font-family: 'IBM Plex Mono', monospace !important;
}
html body .twofa-digit.active { border-color: var(--pa-brand) !important; box-shadow: 0 0 0 3px var(--pa-brand-tint) !important; }
/* utilitarios do Bootstrap que o login usa sem carregar o Bootstrap */
html body .text-center { text-align: center; }
html body .mb-4 { margin-bottom: 16px; }
html body .me-1 { margin-right: 4px; }
html body .me-2 { margin-right: 8px; }

/* ---------- modal de termos do cadastro ---------- */
html body .terms-modal-overlay { background: rgba(20,24,27,0.32) !important; }
html body .terms-modal { border-radius: var(--pa-r-lg) !important; background: var(--pa-surface) !important; border: 1px solid var(--pa-line) !important; box-shadow: 0 16px 40px rgba(20,24,27,0.12) !important; animation: none !important; }
html body .terms-modal-header { border-bottom: 1px solid var(--pa-line) !important; }
html body .terms-modal-header h2 { font-size: 17px !important; font-weight: 600 !important; color: var(--pa-text) !important; }
html body .terms-modal-close { width: 40px; height: 40px; padding: 0 !important; margin: -8px -10px -8px 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pa-r); color: var(--pa-text-3) !important; }
html body .terms-modal-close:hover { color: var(--pa-text) !important; background: var(--pa-surface-2) !important; }
html body .terms-updated { color: var(--pa-text-3) !important; font-size: 13px !important; }
html body .terms-updated a { color: var(--pa-brand) !important; }
html body .terms-section h3 { color: var(--pa-text) !important; border-bottom: 1px solid var(--pa-line) !important; font-size: 15px !important; }
html body .terms-section p, html body .terms-section ul li { color: var(--pa-text-2) !important; font-size: 14px !important; }
html body .terms-section ul li strong, html body .terms-section p strong { color: var(--pa-text) !important; }
html body .terms-alert { background: var(--pa-surface-2) !important; border: 1px solid var(--pa-line) !important; border-left: 1px solid var(--pa-line) !important; border-radius: var(--pa-r) !important; color: var(--pa-text-2) !important; font-size: 14px !important; }
html body .terms-alert strong { color: var(--pa-bad) !important; }
html body .terms-modal-body::-webkit-scrollbar-track { background: var(--pa-surface-2) !important; }
html body .terms-modal-body::-webkit-scrollbar-thumb { background: var(--pa-line-2) !important; }
html body .terms-modal-footer { border-top: 1px solid var(--pa-line) !important; }
html body .scroll-hint { color: var(--pa-text-3) !important; font-size: 13px !important; }
html body .terms-scroll-btn, html body .terms-accept-btn { min-height: 40px; border-radius: var(--pa-r) !important; font-size: 14px !important; font-weight: 600 !important; padding: 0 16px !important; transition: background-color .15s ease, opacity .15s ease !important; }
html body .terms-scroll-btn { background: var(--pa-surface) !important; border: 1px solid var(--pa-line-2) !important; color: var(--pa-text) !important; }
html body .terms-scroll-btn:hover { background: var(--pa-surface-2) !important; }
html body .terms-accept-btn { background: var(--pa-brand) !important; color: #fff !important; }
html body .terms-accept-btn.unlocked:hover { background: var(--pa-brand-2) !important; transform: none !important; box-shadow: none !important; }

/* ---------- painel de marca (so desktop) ---------- */
.pa-auth-aside { display: none; }
@media (min-width: 1024px) {
    html body .page-wrapper { margin-left: 42% !important; width: 58% !important; }
    html body .logo-container { display: none !important; }
    .pa-auth-aside {
        display: flex; flex-direction: column; justify-content: space-between;
        position: fixed; left: 0; top: 0; bottom: 0; width: 42%; box-sizing: border-box;
        padding: 40px 56px 36px; background: #0D5C63; color: #FFFFFF; overflow: hidden;
    }
    .pa-auth-aside .pa-aw { display: inline-flex; align-items: baseline; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: #FFFFFF; text-decoration: none; align-self: flex-start; }
    .pa-auth-aside .pa-aw b { font-weight: 700; }
    .pa-auth-aside .pa-aw span { font-weight: 400; }
    .pa-auth-aside .pa-mid { max-width: 420px; }
    .pa-auth-aside .pa-alpha { display: block; width: 168px; height: auto; margin: 0 0 36px -2px; }
    .pa-auth-aside h2 { font-size: 30px; line-height: 1.22; font-weight: 600; color: #FFFFFF; margin: 0; letter-spacing: -0.02em; }
    .pa-auth-aside p { margin: 0; font-size: 14px; color: #CFE3E4; }
    .pa-auth-aside p a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
    .pa-auth-aside p a:hover { text-decoration-thickness: 2px; }
    .pa-auth-aside a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
}
@media (min-width: 1024px) and (max-height: 640px) {
    .pa-auth-aside .pa-alpha { width: 112px; margin-bottom: 24px; }
}

/* ---------- celular ---------- */
@media (max-width: 480px) {
    html body .login-card, html body .register-card, html body .forgot-card, html body .reset-card { padding: 24px 20px !important; }
    html body .page-wrapper { padding: 24px 16px 32px !important; justify-content: flex-start; }
    html body .logo-container { margin-bottom: 16px !important; }
    html body .logo-container .logo { height: 30px !important; }
    html body .card-title { font-size: 21px !important; }
    html body .toast-container { left: 16px; right: 16px !important; }
    html body .toast { width: 100%; }
    /* iOS nao da zoom ao focar campo com 16px */
    html body .form-control, html body .form-select, html body .form-input { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html body .toast, html body .wizard-step { transition: none !important; }
}

/* recuperar senha: "Fazer login ou Criar nova conta" numa linha */
html body .footer-links { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
html body .footer-links .divider { margin: 0 !important; font-size: 14px !important; }

/* ajustes finos */
html body .btn-next { margin-top: 0 !important; }
html body .form-control, html body .form-input { background-image: none; }
html body .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236B737A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 40px !important;
    -webkit-appearance: none; appearance: none;
}
html body .checkbox-wrapper { padding: 0 !important; }
html body #termos-hint { font-size: 13px !important; }

/* erro do login repetido dentro do cartao, junto do botao (o aviso flutuante some sozinho) */
html body .pa-inline-err {
    display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px;
    background: var(--pa-bad-tint); border: 1px solid #F1C7BF; border-radius: var(--pa-r);
    color: var(--pa-bad); font-size: 14px; line-height: 1.45;
}
html body .pa-inline-err.is-warn { background: var(--pa-warn-tint); border-color: #EDD3A6; color: var(--pa-warn); }
html body .pa-inline-err i { font-size: 15px; line-height: 1.35; }

/* ================== acabamento (23/09) ==================
   O painel estava plano demais: botao chapado, cartao sem papel, aro de foco do
   navegador. Aqui entra o acabamento que separa painel financeiro de modelo
   pronto: profundidade de 1px, aro de foco da casa, tecla que afunda ao apertar
   e numero alinhado. Sem brilho, sem degrade berrante, sem animacao. */

/* --- tecla: base --- */
html body .btn, html body .btn-k, html body .btn-action, html body .btn-cfg,
html body .btn-pagination, html body .btn-preset, html body .modal-preset-btn {
    letter-spacing: -0.006em !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease,
                box-shadow .14s ease, transform .07s ease !important;
}
html body .btn:active:not(:disabled):not(.disabled),
html body .btn-k:active:not(:disabled), html body .btn-action:active:not(:disabled),
html body .btn-cfg:active:not(:disabled), html body .btn-pagination:active:not(:disabled) {
    transform: translateY(1px) !important; opacity: 1;
}
/* aro de foco da casa (o azul do navegador entregava o modelo pronto) */
html body .btn:focus-visible, html body .btn-k:focus-visible, html body .btn-action:focus-visible,
html body .btn-cfg:focus-visible, html body .btn-pagination:focus-visible,
html body .btn-preset:focus-visible, html body .modal-preset-btn:focus-visible,
html body a:focus-visible, html body summary:focus-visible, html body [role="button"]:focus-visible {
    outline: 2px solid transparent !important; outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(13,92,99,0.22) !important;
}

/* --- tecla principal: petroleo com relevo de 1px --- */
html body .btn-primary, html body #notificationModal .btn-primary,
html body .btn-k.black, html body .btn-dark, html body .btn-k.blue,
html body .form-control.btn, html body input.form-control.btn-primary {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 58%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1.5px rgba(10,52,56,0.24) !important;
}
html body .btn-primary:hover, html body #notificationModal .btn-primary:hover,
html body .btn-k.black:hover, html body .btn-dark:hover,
html body .form-control.btn:hover, html body input.form-control.btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 2px 4px rgba(10,52,56,0.20) !important;
}
html body .btn-primary:active, html body .btn-k.black:active, html body .btn-dark:active,
html body .form-control.btn:active {
    box-shadow: inset 0 1px 2px rgba(6,38,41,0.30) !important;
}
/* mesmas camadas para as teclas de estado */
html body .btn-success, html body .btn-k.green { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1.5px rgba(10,60,36,0.24) !important; }
html body .btn-danger, html body .btn-k.red { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1.5px rgba(96,26,15,0.24) !important; }
html body .btn-warning { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1.5px rgba(80,46,6,0.24) !important; }
html body .btn-success:active, html body .btn-danger:active, html body .btn-warning:active,
html body .btn-k.green:active, html body .btn-k.red:active { box-shadow: inset 0 1px 2px rgba(0,0,0,0.22) !important; }

/* --- tecla secundaria: papel branco que levanta no toque --- */
html body .btn-secondary, html body .btn-light, html body .btn-outline-secondary,
html body .btn-outline-primary, html body .btn-k.ghost, html body .btn-preset,
html body .modal-preset-btn, html body .btn-pagination {
    box-shadow: 0 1px 1.5px rgba(20,24,27,0.05) !important;
}
html body .btn-secondary:hover, html body .btn-light:hover, html body .btn-outline-secondary:hover,
html body .btn-outline-primary:hover, html body .btn-k.ghost:hover, html body .btn-preset:hover,
html body .modal-preset-btn:hover, html body .btn-pagination:hover:not(:disabled) {
    box-shadow: 0 2px 4px rgba(20,24,27,0.07) !important;
}
html body .btn-secondary:active, html body .btn-light:active, html body .btn-outline-secondary:active,
html body .btn-outline-primary:active, html body .btn-k.ghost:active {
    box-shadow: inset 0 1px 2px rgba(20,24,27,0.10) !important;
}
/* tecla desativada nao levanta nem afunda */
html body .btn:disabled, html body .btn.disabled, html body .btn-k:disabled,
html body .btn-pagination:disabled {
    box-shadow: none !important; transform: none !important;
}
/* acao de linha de tabela continua discreta (sem relevo) */
html body .table-wrap td .btn-k.sm, html body table.t td .btn-k.sm,
html body td .btn-sm.btn-light, html body td .btn-sm.btn-outline-secondary {
    box-shadow: none !important;
}
html body .table-wrap td .btn-k.black.sm, html body table.t td .btn-k.black.sm {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1px 1.5px rgba(10,52,56,0.22) !important;
}

/* --- papel: cartao com uma sombra de 1px, nao so o fio --- */
html body .card, html body .pa-panel, html body .box, html body .table-wrap {
    box-shadow: 0 1px 2px rgba(20,24,27,0.035) !important;
}
html body .modal-content, html body .offcanvas {
    box-shadow: 0 18px 44px rgba(20,24,27,0.16), 0 2px 8px rgba(20,24,27,0.08) !important;
}
html body .dropdown-menu {
    box-shadow: 0 10px 26px rgba(20,24,27,0.12), 0 1px 3px rgba(20,24,27,0.07) !important;
}

/* --- campo: aro da casa no foco, nao o azul do navegador --- */
html body .form-control:focus, html body .form-select:focus, html body textarea:focus,
html body input[type="text"]:focus, html body input[type="email"]:focus,
html body input[type="password"]:focus, html body input[type="number"]:focus,
html body input[type="date"]:focus, html body input[type="search"]:focus, html body select:focus {
    border-color: var(--pa-brand, #0D5C63) !important;
    box-shadow: 0 0 0 3px rgba(13,92,99,0.14) !important;
    outline: none !important;
}

/* --- numero alinhado em coluna (valor, taxa, data) --- */
html body .card, html body table, html body .pa-recibo, html body .stat, html body .kpi {
    font-variant-numeric: tabular-nums;
}


/* ================= nivel ALFA: acesso com a mesma linguagem do site e do cadastro ================= */
@media (min-width: 1024px) {
    .pa-auth-aside { background: radial-gradient(700px 420px at 90% 10%, rgba(31,138,147,.38), transparent 62%), radial-gradient(600px 380px at 0% 100%, rgba(13,92,99,.5), transparent 60%), linear-gradient(180deg, #061719, #082326) !important; padding: 36px 48px 32px !important; }
    .pa-auth-aside::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse at 60% 40%, #000 15%, transparent 72%); }
    .pa-auth-aside > * { position: relative; z-index: 1; }
    .pa-auth-aside .pa-auth-fluxo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; z-index: 0; pointer-events: none; }
    .pa-auth-aside .pa-aw { display: inline-flex !important; align-items: center !important; gap: 10px; font-size: 20px !important; }
    .pa-auth-aside .pa-aw svg { width: 30px; height: 30px; }
    .pa-auth-aside .pa-aw b { font-weight: 800 !important; }
    .pa-auth-aside .pa-mid { max-width: 440px; }
    .pa-auth-aside h2 { font-size: 40px !important; line-height: 1.06 !important; font-weight: 800 !important; letter-spacing: -.04em !important; }
    .pa-auth-aside h2 em { font-style: normal; background: linear-gradient(90deg, #7FD8C9, #3FB6BF 50%, #C9F2EA); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .pa-auth-aside .pa-sub { margin: 14px 0 0 !important; font-size: 15.5px !important; color: #B9D3D3 !important; max-width: 40ch; line-height: 1.55; }
    .pa-auth-aside .pa-lista { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
    .pa-auth-aside .pa-lista li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
    .pa-auth-aside .pa-lista svg { width: 38px; height: 38px; padding: 9px; border-radius: 11px; color: #7FD8C9; background: rgba(127,216,201,.08); border: 1px solid rgba(127,216,201,.22); box-sizing: border-box; }
    .pa-auth-aside .pa-lista b { display: block; color: #fff; font-size: 15px; font-weight: 700; }
    .pa-auth-aside .pa-lista span { font-size: 13.5px; color: #9FBDBB; line-height: 1.5; }
    .pa-auth-aside .pa-pe { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .pa-auth-aside .pa-status { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: #CFE3E1 !important; text-decoration: none !important; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
    .pa-auth-aside .pa-status:hover { background: rgba(255,255,255,.08); }
    .pa-auth-aside .pa-status i { width: 8px; height: 8px; border-radius: 50%; background: #8FB0AE; }
    .pa-auth-aside .pa-status.ok i { background: #7FD8C9; animation: pa-auth-pulso 2.2s ease-out infinite; }
    .pa-auth-aside .pa-status.bad i { background: #F0665A; }
    @keyframes pa-auth-pulso { 0% { box-shadow: 0 0 0 0 rgba(127,216,201,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(127,216,201,0); } }
}
html body .login-card, html body .register-card, html body .forgot-card, html body .reset-card {
    border-radius: 18px !important; padding: 36px !important; box-shadow: 0 1px 2px rgba(20,24,27,.04), 0 24px 60px rgba(6,23,25,.08) !important;
    animation: pa-auth-entra .5s cubic-bezier(.2,.7,.2,1) both !important;
}
@keyframes pa-auth-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html body .card-title { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.03em !important; }
html body .form-control, html body .form-input, html body .form-select { height: 50px !important; border-radius: 10px !important; font-size: 15.5px !important; }
html body .form-control:focus, html body .form-input:focus, html body .form-select:focus { box-shadow: 0 0 0 4px rgba(13,92,99,.12) !important; }
html body .btn-primary, html body .btn.btn-primary, html body .btn-next {
    height: 50px !important; border-radius: 10px !important; font-size: 15.5px !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 58%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 1.5px rgba(10,52,56,.26), 0 10px 24px rgba(13,92,99,.18) !important;
    transition: background-color .15s ease, transform .07s ease !important;
}
html body .btn-primary:active, html body .btn-next:active { transform: translateY(1px) !important; }
html body .btn-secondary, html body .btn-outline-secondary, html body .btn-back { height: 50px !important; border-radius: 10px !important; }
html body .login-card .card-title::after { content: "Entre com o seu usuário ou e-mail."; display: block; margin-top: 6px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--pa-text-2); }
html body .login-card #login-button + .register-link::before { content: "Conexão protegida. Nunca pedimos a sua senha por e-mail ou WhatsApp."; display: block; margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--pa-surface-2); border: 1px solid var(--pa-line); font-size: 12.5px; color: var(--pa-text-3); font-weight: 400; }
@media (max-width: 480px) { html body .login-card, html body .forgot-card, html body .reset-card { padding: 26px 20px !important; } html body .card-title { font-size: 24px !important; } }
@media (prefers-reduced-motion: reduce) { html body .login-card, html body .forgot-card, html body .reset-card { animation: none !important; } }

/* ================= lateral com foto (23/09): a pessoa recebendo, texto na sombra de baixo ================= */
@media (min-width: 1024px) {
    .pa-auth-aside { background: #061719 !important; justify-content: flex-start !important; }
    .pa-auth-aside::after { display: none !important; }
    .pa-auth-aside .pa-foto { position: absolute; left: 0; right: 0; top: -12%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 30%; z-index: 0; animation: pa-foto-entra 1.4s cubic-bezier(.2,.7,.2,1) both; }
    @keyframes pa-foto-entra { from { transform: scale(1.05); filter: brightness(.7); } to { transform: none; filter: none; } }
    .pa-auth-aside::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,23,25,.62) 0%, rgba(6,23,25,0) 13%, rgba(6,23,25,0) 38%, rgba(6,23,25,.78) 50%, rgba(6,23,25,.95) 58%, rgba(6,23,25,.98) 100%); }
    .pa-auth-aside .pa-mid { margin-top: auto; max-width: 470px; }
    .pa-auth-aside h2 { font-size: 42px !important; }
    .pa-auth-aside h2 em { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #7FD8C9 !important; }
    .pa-auth-aside .pa-sub { color: #C8DCDB !important; }
    .pa-auth-aside .pa-lista { margin-top: 26px; gap: 12px; }
    .pa-auth-aside .pa-lista li { grid-template-columns: 34px 1fr; }
    .pa-auth-aside .pa-lista svg { width: 34px; height: 34px; padding: 8px; background: rgba(6,23,25,.55); border-color: rgba(127,216,201,.28); }
    .pa-auth-aside .pa-lista span { color: #AFC9C7; }
    .pa-auth-aside .pa-pe { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.10); }
    .pa-auth-aside .pa-status { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: #CFE3E1 !important; text-decoration: none !important; padding: 7px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.16); background: rgba(6,23,25,.5); }
    .pa-auth-aside .pa-status i { width: 8px; height: 8px; border-radius: 50%; background: #8FB0AE; }
    .pa-auth-aside .pa-status.ok i { background: #7FD8C9; }
    .pa-auth-aside .pa-status.bad i { background: #F0665A; }
    /* aviso de Pix chegando no celular da foto */
    .pa-auth-aside .pa-aviso { position: absolute; z-index: 2; top: 96px; right: 32px; width: min(320px, calc(100% - 64px)); display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 13px 12px; border-radius: 18px; background: rgba(246,248,247,.9); color: #0B1F21; box-shadow: 0 20px 50px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(-14px) scale(.98); }
    .pa-auth-aside .pa-aviso.on { animation: pa-aviso 5.4s cubic-bezier(.2,.7,.2,1) forwards; }
    .pa-auth-aside .pa-aviso.fixo { opacity: 1; transform: none; }
    @keyframes pa-aviso { 0% { opacity: 0; transform: translateY(-14px) scale(.98); } 9% { opacity: 1; transform: none; } 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
    .pa-aviso .av-ic { width: 36px; height: 36px; flex: none; border-radius: 9px; background: #DCEDEC; display: grid; place-items: center; }
    .pa-aviso .av-ic img { width: 20px; height: 20px; object-fit: contain; }
    .pa-aviso .av-tx { min-width: 0; flex: 1; }
    .pa-aviso .av-l1 { display: flex; justify-content: space-between; font-size: 12.5px; color: #4F5F61; }
    .pa-aviso .av-l1 b { font-weight: 600; color: #0B1F21; }
    .pa-aviso .av-t { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 700; color: #0B1F21; }
    .pa-aviso .av-v { font-variant-numeric: tabular-nums; }
    .pa-aviso .av-d { display: block; margin-top: 1px; font-size: 13px; color: #4F5F61 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pa-aviso em { position: absolute; left: 14px; bottom: -10px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #C3D8D7; background: rgba(6,23,25,.85); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 1px 7px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
    .pa-auth-aside .pa-lista { display: none; }
    .pa-auth-aside h2 { font-size: 36px !important; }
}
@media (prefers-reduced-motion: reduce) { .pa-auth-aside .pa-foto { animation: none; } }

/* ================= celular: topo com foto e titulo (23/09) ================= */
.pa-cel-topo { display: none; }
@media (max-width: 1023.98px) {
    .pa-cel-topo { display: block; position: relative; height: 236px; overflow: hidden; background: #061719; color: #fff; }
    .pa-cel-topo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: pa-foto-entra 1.2s cubic-bezier(.2,.7,.2,1) both; }
    .pa-cel-topo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,23,25,.65) 0%, rgba(6,23,25,.05) 34%, rgba(6,23,25,.35) 60%, rgba(6,23,25,.92) 100%); }
    .pa-cel-marca { position: absolute; z-index: 1; left: 18px; top: 16px; display: inline-flex; align-items: center; gap: 9px; color: #fff !important; text-decoration: none !important; font-size: 19px; letter-spacing: -.02em; }
    .pa-cel-marca svg { width: 30px; height: 30px; }
    .pa-cel-marca b { font-weight: 800; }
    .pa-cel-tit { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 44px; margin: 0; font-size: 28px; line-height: 1.08; font-weight: 800; letter-spacing: -.035em; color: #fff; }
    .pa-cel-tit em { font-style: normal; color: #7FD8C9; }
    /* espaco reservado desde a primeira pintura: o topo entra sem empurrar o formulario */
    body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 236px; background: #061719; }
    body .logo-container { display: none !important; }
    body .page-wrapper { position: relative; z-index: 2; margin-top: 208px; padding-top: 0 !important; }
    body.pa-com-topo .page-wrapper { margin-top: -28px; }
    .pa-cel-topo { z-index: 1; }
    @keyframes pa-foto-entra { from { transform: scale(1.05); filter: brightness(.7); } to { transform: none; filter: none; } }
}
@media (prefers-reduced-motion: reduce) { .pa-cel-topo img { animation: none; } }

/* ================= ajustes do QA de acesso (23/09) ================= */
/* iPhone da zoom ao tocar em campo com fonte menor que 16px: a regra de 15,5px acima vencia a do celular */
@media (max-width: 767.98px) {
    html body .form-control, html body .form-input, html body .form-select { font-size: 16px !important; }
}
/* aviso de sucesso dentro do cartao (ex.: voltou da redefinicao de senha) */
html body .pa-inline-ok {
    display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px;
    background: var(--pa-ok-tint); border: 1px solid #BFE0CB; border-radius: 10px;
    color: var(--pa-ok); font-size: 14px; line-height: 1.45;
}
html body .pa-inline-ok i { font-size: 15px; line-height: 1.35; }
html body .pa-inline-ok b { font-weight: 700; }
/* lateral estreita (1024 a 1279): titulo menor para nao empurrar o texto para cima do cartao "Pix recebido" */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .pa-auth-aside { padding: 32px 36px 28px !important; }
    .pa-auth-aside h2 { font-size: 34px !important; }
    .pa-auth-aside .pa-sub { font-size: 14.5px !important; }
    .pa-auth-aside .pa-lista { margin-top: 20px; gap: 10px; }
}
/* o pa-auth.js poe .pa-apertado quando nao sobra espaco entre a marca e o titulo para o cartao */
@media (min-width: 1024px) {
    .pa-auth-aside.pa-apertado .pa-lista { display: none; }
    .pa-auth-aside .pa-aviso.pa-sem-lugar { display: none; }
}
