/* Porta de entrada da plataforma FBV (entrar, primeiro acesso, tela inicial):
   identidade da Associação, clara e de alto contraste; escura quando o aparelho pede. */
:root { --fundo: #F4F6F1; --cartao: #FFFFFF; --texto: #17211A; --suave: #5B6B5E; --borda: #D5DDD0; --verde: #43692E;
  --verde-escuro: #2B4D23; --verde-claro: #E3EEDC; --erro: #B42318; --ok: #1E7B3A; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --fundo: #0F1611; --cartao: #172019; --texto: #E8EFE6; --suave: #A3B3A5; --borda: #2E3D31;
  --verde: #6FA35A; --verde-escuro: #8DBF77; --verde-claro: #22351F; --erro: #F07065; --ok: #4CC173; color-scheme: dark; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--fundo); color: var(--texto); }
body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; align-items: center; }
.faixa { width: 100%; background: #2B4D23; display: flex; justify-content: center; padding: 28px 16px 22px; }
.faixa img { height: 110px; max-width: 70vw; }
main { width: 100%; max-width: 460px; padding: 0 16px 40px; margin-top: -14px; }
.marca { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px; text-align: center; }
.marca h1 { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--verde-escuro); letter-spacing: .01em; }
.marca p { margin: 2px 0 0; color: var(--suave); font-size: .9rem; }
.texto { color: var(--suave); margin: 18px 2px; }
.texto strong { color: var(--texto); }
label { display: block; font-size: .85rem; color: var(--suave); margin: 10px 0 4px; }
input { width: 100%; font: inherit; color: inherit; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; }
button { width: 100%; font: inherit; font-weight: 600; margin-top: 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--verde);
  background: var(--verde); color: #fff; cursor: pointer; }
button.secundario { background: transparent; color: var(--verde-escuro); }
button:disabled { opacity: .6; cursor: progress; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--verde-claro); outline-offset: 2px; }
.aviso { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--verde-claro); }
.aviso.erro { background: color-mix(in srgb, var(--erro) 12%, var(--cartao)); color: var(--erro); }
.aviso.ok { color: var(--ok); }
.rodape { margin-top: 18px; text-align: center; color: var(--suave); font-size: .85rem; }
.modulos { display: grid; gap: 10px; margin: 6px 0 22px; }
.cartao-modulo { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--cartao); border: 1px solid var(--borda);
  border-left: 5px solid var(--verde); border-radius: 12px; color: inherit; text-decoration: none; }
.cartao-modulo strong { font-size: 1.02rem; }
.cartao-modulo span { color: var(--suave); font-size: .88rem; }
a.cartao-modulo:hover { border-color: var(--verde); }
.cartao-modulo.em-breve { border-left-color: var(--borda); opacity: .75; }
.minhas-passkeys { color: var(--suave); font-size: .9rem; margin: 8px 2px; }
.minhas-passkeys ul { padding-left: 18px; }