/* Missão · Visita às Famílias — Paróquia Sant'Ana
   Desenhado pra uso na rua: alvo de toque grande, contraste alto,
   uma coluna só, e nada que dependa de precisão do dedo. */

:root{
  --fundo:#0f172a; --fundo-2:#111c34; --cartao:#1a2540; --linha:rgba(255,255,255,.09);
  --ouro:#e8c26a; --ouro-2:#f5dda0; --azul:#5e8cff; --verde:#4ade80;
  --vermelho:#f87171; --amarelo:#fbbf24;
  --texto:#f8fafc; --texto-fraco:#94a3b8;
  --fonte:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--fonte);background:var(--fundo);color:var(--texto);
  line-height:1.5;min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit;text-decoration:none}

/* ---- topo ---- */
.topo{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));
  background:rgba(15,23,42,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo-tit{flex:1;min-width:0;line-height:1.2}
.topo-tit strong{display:block;font-size:1.05rem}
.topo-tit small{color:var(--texto-fraco);font-size:.72rem}
.voltar,.sair{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:12px;background:var(--cartao);border:1px solid var(--linha);
  font-size:1.2rem;color:var(--texto-fraco)
}
.conteudo{max-width:560px;margin:0 auto;padding:18px 16px 40px}

/* ---- cartão de entrada ---- */
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:20px;padding:26px 22px}
.cartao-centro{margin-top:8vh;text-align:center}
.marca-grande{
  width:64px;height:64px;margin:0 auto 16px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--ouro),#b98f36);color:#1a1408;font-size:2rem;font-weight:800;
}
.marca-logo{
  display:block;width:min(210px,60%);height:auto;margin:0 auto 18px;
  border-radius:16px;background:#e8f0f8;padding:10px
}
.titulo-entrada{font-size:1.5rem;line-height:1.25;margin-bottom:22px;font-weight:700}
.titulo-entrada span{color:var(--ouro);font-weight:600;font-size:1.05rem}

/* ---- formulário ---- */
.formulario{display:flex;flex-direction:column;gap:14px;text-align:left}
label{display:block;font-size:.86rem;color:var(--texto-fraco);font-weight:600}
input,select,textarea{
  width:100%;margin-top:6px;padding:14px;border-radius:14px;
  background:var(--fundo-2);border:1px solid var(--linha);color:var(--texto);
  font-family:inherit;font-size:1rem;      /* 16px evita o zoom automático do iOS */
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ouro)}
textarea{min-height:90px;resize:vertical}

.botao{
  display:block;width:100%;padding:16px;border:none;border-radius:14px;
  font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;text-align:center;
}
.botao-principal{background:linear-gradient(135deg,var(--ouro),#c79b3e);color:#1a1408}
.botao-grande{
  background:linear-gradient(135deg,var(--ouro),#c79b3e);color:#1a1408;
  margin:20px 0 6px;padding:20px;font-size:1.1rem;
  box-shadow:0 10px 26px rgba(232,194,106,.22)
}
.botao-secundario{background:var(--cartao);border:1px solid var(--linha);color:var(--texto)}

.dica{margin-top:18px;font-size:.82rem;color:var(--texto-fraco)}

/* ---- avisos ---- */
.aviso{padding:13px 16px;border-radius:14px;margin-bottom:16px;font-size:.9rem;text-align:left}
.aviso-ok{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);color:#bbf7d0}
.aviso-erro{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);color:#fecaca}
.aviso-atencao{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:#fde68a}

/* ---- painel ---- */
.saudacao{margin-bottom:16px;color:var(--texto-fraco)}
.saudacao strong{color:var(--texto)}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.numero{
  background:var(--cartao);border:1px solid var(--linha);border-radius:16px;
  padding:14px 10px;text-align:center
}
.numero b{display:block;font-size:1.7rem;line-height:1;color:var(--ouro)}
.numero span{display:block;margin-top:6px;font-size:.7rem;color:var(--texto-fraco)}
.numero.destaque b{color:var(--amarelo)}

.secao-tit{
  margin:26px 0 10px;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--texto-fraco);font-weight:700
}

/* ---- listas ---- */
.lista{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;overflow:hidden}
.linha{
  display:flex;align-items:center;gap:12px;padding:16px;
  border-bottom:1px solid var(--linha);min-height:64px    /* alvo de toque confortável */
}
.linha:last-child{border-bottom:none}
.linha:active{background:rgba(255,255,255,.04)}
.linha-txt{flex:1;min-width:0;line-height:1.3}
.linha-txt strong{display:block;font-size:1rem}
.linha-txt small{color:var(--texto-fraco);font-size:.78rem}
.bolinha{width:12px;height:12px;border-radius:50%;flex:none}
.seta{color:var(--texto-fraco);font-size:1.3rem}

/* ---- marcadores da visita ---- */
.marcadores{display:grid;gap:10px;margin-top:6px}
.marcador{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;
  background:var(--fundo-2);border:1px solid var(--linha);cursor:pointer
}
.marcador input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--ouro)}
.marcador span{font-size:.95rem;font-weight:500}
.marcador:has(input:checked){border-color:var(--ouro);background:rgba(232,194,106,.08)}

/* ---- opções em blocos (resultado da visita) ---- */
.opcoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.opcao{
  position:relative;padding:16px 12px;border-radius:14px;text-align:center;
  background:var(--fundo-2);border:1px solid var(--linha);cursor:pointer;font-weight:600;font-size:.9rem
}
.opcao input{position:absolute;opacity:0;pointer-events:none}
.opcao:has(input:checked){border-color:var(--ouro);background:rgba(232,194,106,.12);color:var(--ouro-2)}

/* ---- estado offline ---- */
.barra-offline{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--amarelo);color:#1a1408;font-weight:700;font-size:.88rem;text-align:center
}
.pendentes{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:rgba(0,0,0,.2);font-size:.78rem
}

/* ---- textos auxiliares (usados em todas as telas) ---- */
.opcional{color:var(--texto-fraco);font-weight:400;font-size:.78rem}
.explica{font-size:.82rem;color:var(--texto-fraco);margin:8px 0;line-height:1.5}
.explica b{color:var(--texto)}
.link{color:var(--ouro);text-decoration:underline}

/* ---- equipe e administração ---- */

/* gaveta de cadastro: a lista é o que a pessoa veio ver, o formulário
   fica ali do lado esperando o toque */
.cartao-form{
  background:var(--cartao);border:1px solid var(--linha);
  border-radius:18px;overflow:hidden;margin-bottom:16px
}
.cartao-form>summary{
  padding:18px 16px;cursor:pointer;list-style:none;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.cartao-form>summary::-webkit-details-marker{display:none}
.cartao-form>summary::after{content:'＋';color:var(--ouro);font-size:1.2rem;flex:none}
.cartao-form[open]>summary{border-bottom:1px solid var(--linha)}
.cartao-form[open]>summary::after{content:'×'}
.cartao-form .formulario{padding:16px}

/* ficha de uma pessoa ou de uma equipe dentro da .lista */
.ficha{border-bottom:1px solid var(--linha)}
.ficha:last-child{border-bottom:none}
.ficha>summary{
  display:flex;align-items:center;gap:10px;padding:16px;min-height:64px;
  cursor:pointer;list-style:none
}
.ficha>summary::-webkit-details-marker{display:none}
.ficha>summary::after{content:'⌄';color:var(--texto-fraco);font-size:1.3rem;flex:none}
.ficha[open]>summary::after{content:'⌃'}
.ficha[open]>summary{border-bottom:1px solid var(--linha)}
.ficha>summary:active{background:rgba(255,255,255,.04)}
.ficha-corpo{padding:14px 16px 18px;background:rgba(0,0,0,.16)}

.etiquetas{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;flex:none;max-width:45%}
.etiqueta{
  padding:3px 8px;border-radius:999px;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap
}
.et-ouro{background:rgba(232,194,106,.16);color:var(--ouro-2)}
.et-azul{background:rgba(94,140,255,.18);color:#bfd0ff}
.et-amarelo{background:rgba(251,191,36,.16);color:#fde68a}
.et-vermelho{background:rgba(248,113,113,.16);color:#fecaca}

/* botões de ação: alvo de toque de 44px mesmo lado a lado */
.acoes-linha{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.acoes-linha form{margin:0}
.btn-linha{
  display:inline-block;padding:12px 14px;border-radius:12px;
  background:var(--fundo-2);border:1px solid var(--linha);color:var(--texto);
  font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;text-align:center
}
.btn-linha:active{background:rgba(255,255,255,.06)}
.btn-destaque{border-color:rgba(232,194,106,.5);color:var(--ouro-2)}
.btn-perigo{border-color:rgba(248,113,113,.4);color:#fecaca}

.bloco-form{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:8px;align-items:flex-start
}
.bloco-tit{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--texto-fraco)}
.bloco-form .marcadores{width:100%}

/* link de convite: aparece uma vez só, então precisa saltar aos olhos */
.caixa-convite{
  background:rgba(232,194,106,.09);border:1px solid rgba(232,194,106,.38);
  border-radius:18px;padding:18px 16px;margin-bottom:18px
}
.caixa-convite strong{display:block;color:var(--ouro-2);margin-bottom:2px}
.caixa-convite .campo-link{font-size:.82rem;font-family:ui-monospace,Menlo,Consolas,monospace}
.caixa-convite form{margin:0}

@media (min-width:620px){
  .opcoes{grid-template-columns:repeat(4,1fr)}
}