/* ==========================================================================
   SPES — login, cadastro e recuperação de senha (rodada 3)
   Aproxima as telas de conta da identidade das páginas públicas (fontes,
   cores, logotipo, botões e foco) sem tocar em formulário, IDs ou scripts.
   Carregado depois do <style> de cada view; o prefixo "html body" garante a
   precedência também sobre os blocos <style> que algumas views têm no fim.
   Tokens iguais aos de public/css/spes-publico.css.
   ========================================================================== */
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/publico/figtree-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/publico/young-serif-latin.woff2') format('woff2');
}
:root {
  --tinta: #151a33; --tinta-2: #2b3150; --tinta-3: #5b6280; --papel: #f7f4ee; --papel-2: #efeae1; --linha: #e1d9cc;
  --roxo: #6b2fd6; --roxo-escuro: #5222b0; --roxo-claro: #eee7fc; --roxo-medio: #cdbaf6; --roxo-noite: #bba3ff; --marca: #ffd84d;
  --fonte: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-titulo: 'Young Serif', Georgia, 'Times New Roman', serif;
  /* variáveis das próprias views */
  --p: #6b2fd6; --s: #5222b0; --g: #6b2fd6; --dark: #151a33; --muted: #5b6280;
}
html body { font-family: var(--fonte); background: var(--papel); color: var(--tinta); }
html body :is(input, button, select, textarea) { font-family: inherit; }

/* Painel da marca */
html body .panel-left { background: var(--tinta); }
html body .panel-left::before, html body .panel-left::after { display: none; }
html body .pl-logo { color: var(--papel); text-decoration: none; }
html body .spes-logo { position: relative; display: inline-flex; align-items: flex-end; padding: 6px 0 0 4px; font: 400 1.7rem/1 var(--fonte-titulo); letter-spacing: .01em; color: inherit; }
html body .spes-logo svg { position: absolute; left: -3px; top: -3px; width: 24px; height: 18px; transform: rotate(-12deg); color: currentColor; }
html body .pl-eyebrow { background: rgba(255, 216, 77, .12); border-color: rgba(255, 216, 77, .35); color: var(--marca); font-family: var(--fonte); }
html body :is(.pl-title, .fb-header h2, .fb-header h1) { font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: -.01em; font-synthesis: none; }
html body .pl-title :is(span, .hl, .gr) { background: none; -webkit-text-fill-color: currentColor; color: var(--marca); }
html body .pl-title .gr { color: var(--roxo-noite); }
html body .pl-sub { color: #d6d0c4; }
html body .feat-icon { background: rgba(187, 163, 255, .14); color: var(--roxo-noite); }
html body .feat-text { color: #d6d0c4; }
html body .feat-text strong { color: #f2ede4; }
html body .social-proof { background: rgba(255, 255, 255, .05); border-color: rgba(236, 231, 221, .16); }

/* Formulário */
html body .panel-right { background: var(--papel); }
html body .form-box { color: var(--tinta); }
html body .fb-header p { color: var(--tinta-3); }
html body :is(.f-input, .f-select) { border-color: var(--linha); background: #fff; color: var(--tinta); }
html body :is(.f-input, .f-select):focus { border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(107, 47, 214, .18); outline: none; }
html body .f-label i, html body .f-label .fas { color: var(--roxo); }
html body .btn-google-hero { border-color: var(--linha); border-radius: 12px; color: var(--tinta); }
html body .btn-google-hero:hover { border-color: var(--roxo); box-shadow: none; transform: none; color: var(--tinta); }
html body .btn-google-hero .g-badge { background: var(--roxo-claro); color: var(--roxo-escuro); }
html body :is(.btn-submit, .btn-next, .btn-primary-spes) {
  background: var(--roxo); color: #fff; border: 0; border-radius: 12px; box-shadow: none;
  font: 600 1rem/1.2 var(--fonte); letter-spacing: 0; text-transform: none;
}
html body :is(.btn-submit, .btn-next, .btn-primary-spes):hover { background: var(--roxo-escuro); box-shadow: none; transform: none; }
html body :is(.btn-submit, .btn-next, .btn-primary-spes):active { transform: none; }
html body a { color: var(--roxo); }
html body .pl-logo, html body .panel-left a.pl-logo { color: var(--papel); }
html body .link-forgot { color: var(--roxo); }
html body .foco-chip { border-color: var(--linha); color: var(--tinta-2); }
html body .foco-chip:hover { border-color: var(--roxo-medio); }
html body .foco-chip.on { border-color: var(--roxo); background: var(--roxo-claro); color: var(--roxo-escuro); }
html body :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--roxo); outline-offset: 2px; }
html body .panel-left :is(a, button):focus-visible { outline-color: var(--marca); }

/* Recuperação de senha (cabeçalho próprio, fundo claro) */
html body header .logo.pl-logo-claro { color: var(--tinta); text-decoration: none; }
html body header .logo.pl-logo-claro:hover { color: var(--tinta); }
html body :is(.hero-head h2, .page h2) { font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: -.01em; font-synthesis: none; }
html body header .login-btn { background: var(--roxo); color: #fff; border-radius: 12px; box-shadow: none; }
html body header .login-btn:hover { background: var(--roxo-escuro); color: #fff; transform: none; }
html body header .nav-link { color: var(--tinta-2); }
html body .trust-item { color: var(--tinta-3); }

/* Título da tela agora é h1 (antes h2): mesmo tamanho de antes. */
html body .fb-header h1 { font-size: 1.7rem; line-height: 1.15; margin: 0 0 6px; color: var(--tinta); }
html body .title-wrap h1 { font-size: 2.15rem; line-height: 1.15; margin: 0 0 8px; }