/* =====================================================================
   Rede de Apoiadores · v0.1.0 · casca de aplicação
   Só o que o protótipo não trazia: a moldura de página (o protótipo
   desenhava as telas dentro de um iPhone 13 de 390x845). O conteúdo de
   cada tela é o markup original, sem redesenho.
   ===================================================================== */
body{margin:0;background:var(--jf-neutro-50);-webkit-font-smoothing:antialiased}

/* ---- telas de apoiador (390px reais do protótipo, agora fluidas) ---- */
body.app-mobile{display:flex;flex-direction:column;align-items:center;background:var(--jf-neutro-50)}
body.app-mobile .tela{
  width:100%;max-width:430px;min-height:100dvh;background:#fff;
  display:flex;flex-direction:column;font-size:16px;line-height:1.5;
  color:var(--jf-neutro-900);font-family:var(--jf-sans)
}
@media(min-width:900px){
  body.app-mobile{align-items:flex-start;padding:0}
  body.app-mobile .tela{box-shadow:var(--jf-sh-3)}
}
/* rodapé de ação fixo: o protótipo usa flex:none + 88px */
body.app-mobile .tela > div[style*="flex:1"]{overflow-y:auto}

/* ---- telas de painel (1920x1040 no protótipo, agora fluidas) ---- */
body.app-painel{background:var(--jf-superficie-2)}
body.app-painel .tela{min-height:100dvh;display:flex;flex-direction:column;font-family:var(--jf-sans);color:var(--jf-neutro-900);background:#fff}
body.app-painel .tela > div[style*="display:flex;height:100%"]{min-height:100dvh}

/* ---- utilitários de estado (não existiam no documento) ---- */
[hidden]{display:none!important}
.jf-oculto{display:none!important}
.jf-flag-off{position:relative;opacity:.42;pointer-events:none}
.jf-flag-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:8px;
  border-radius:999px;background:var(--jf-azul-100);color:var(--jf-azul-900);
  font-size:11px;font-weight:700;letter-spacing:.04em;vertical-align:middle}
.jf-campo-real{flex:1;min-width:0;border:0;outline:none;background:transparent;
  font-family:var(--jf-sans);font-size:17px;font-weight:500;color:var(--jf-neutro-900)}
.jf-campo-real::placeholder{color:var(--jf-neutro-400)}
.jf-caixa:focus-within{border:2px solid var(--jf-azul-500)!important;box-shadow:var(--jf-sh-foco)}
.jf-caixa.tem-erro{border:2px solid var(--jf-vermelho-600)!important}
.jf-msg-erro{display:flex;gap:8px;align-items:flex-start;margin-top:8px;
  font-size:15px;font-weight:500;color:var(--jf-vermelho-600)}
.jf-msg-erro[hidden]{display:none}
.jf-fita-demo{width:100%;display:flex;align-items:center;gap:8px;justify-content:center;min-height:32px;
  background:var(--jf-azul-100);color:var(--jf-azul-900);font-size:12px;font-weight:700;
  letter-spacing:.02em;padding:6px 12px;text-align:center}
.jf-fita-demo a{color:var(--jf-azul-500)}
.jf-btn-real{border:0;font-family:var(--jf-sans);cursor:pointer}
.jf-btn-real[disabled]{opacity:.38;cursor:not-allowed}
.jf-carregando{position:relative;pointer-events:none;opacity:.7}

/* a nav de seções acompanha a rolagem (no protótipo a tela tinha altura fixa) */
body.app-mobile .tela > nav{position:sticky;bottom:0;z-index:3}

/* cada passo do cadastro é uma tela inteira: cabeçalho + corpo + ação no rodapé */
body.app-mobile .tela > section{display:flex;flex-direction:column;flex:1;min-height:0}
body.app-mobile .tela > section[hidden]{display:none}