/* Atualização de cadastro pelo próprio membro (/cadastro).
   Formulário longo lido quase sempre no celular: campo largo, alvo de toque
   grande e uma cor só para dizer "isto aqui falta". */

.cad-hero{background:#173b3f;color:#fff;padding:64px 0 52px}
.cad-hero .eyebrow{color:#f2b544}
.cad-hero h1{font-size:clamp(2rem,5vw,2.9rem);margin:.2em 0 .3em}
.cad-hero p{max-width:52ch;opacity:.85}
.cad-hero .back-link{color:#fff;opacity:.8;display:inline-block;margin-bottom:18px}

.cad-section{padding-top:38px}
.cad-container{max-width:900px}

.cad-card{background:#fff;border:1px solid #e6e2da;border-radius:22px;padding:32px}
.cad-card-estreito{max-width:480px;margin:0 auto}
.cad-card h2{margin:0 0 8px;font-size:clamp(1.2rem,5vw,1.45rem);line-height:1.25;color:#173b3f;overflow-wrap:anywhere;text-wrap:balance}
.cad-card>p{color:#5c6360;margin:0 0 22px}

.cad-flash{border-radius:16px;padding:15px 18px;margin-bottom:22px;font-size:.95rem;line-height:1.5}
.cad-flash-success{background:#e8f4ec;color:#1e5433;border:1px solid #bcdfc9}
.cad-flash-erro{background:#fdecec;color:#8f2222;border:1px solid #f3c4c4}
.cad-flash-aviso{background:#fdf3dd;color:#7a5a12;border:1px solid #f0dca6}

/* ---- formulário ---- */
.cad-form{display:flex;flex-direction:column;gap:14px}
/* min-width:0 pela mesma razão dos campos: o label é item de grid dentro de
   .cad-linha e .cad-campos, e sem isto ele se recusa a ficar menor que o campo
   que carrega dentro. */
.cad-form label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.88rem;color:#2c3532;min-width:0}
.cad-form label small{font-weight:400;color:#7b8582;font-size:.8rem}
/* Altura única para todo campo — input, select e date rendem diferente entre si
   e a coluna ficava serrilhada. 16px de fonte é regra do iOS: abaixo disso o
   Safari dá zoom sozinho ao focar o campo. */
.cad-form input,.cad-form select{
  font:inherit;font-size:16px;line-height:1.25;padding:0 13px;border:1.5px solid #d9d4ca;border-radius:11px;
  background:#fdfcfa;color:#1f2937;width:100%;height:46px;box-sizing:border-box;
  /* Sem isto o campo não encolhe: todo item de grid e de flex nasce com
     min-width:auto, ou seja, "nunca menor que o meu conteúdo". Um input de data
     no iPad pede uma largura grande, a coluna não cede, e o campo transborda por
     cima do vizinho. */
  min-width:0;
}
/* No iOS o input de data é desenhado pelo sistema e ignora a largura pedida —
   ele se dimensiona pelo texto "dd/mm/aaaa" do jeito dele. Tirando a aparência
   nativa, ele volta a ser uma caixa comum que obedece width:100%. O seletor de
   data continua abrindo normalmente ao tocar. */
.cad-form input[type=date]{
  padding-right:9px;-webkit-appearance:none;appearance:none;text-align:left;
  /* Safari alinha o texto pelo topo da caixa quando a altura é fixa. */
  display:block;
}
.cad-form select{padding-right:34px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6360' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px}
.cad-form input[type=checkbox],.cad-form input[type=radio]{height:auto;width:auto}
.cad-form input:focus,.cad-form select:focus{outline:none;border-color:#173b3f;box-shadow:0 0 0 3px rgba(23,59,63,.12)}
.cad-form .button{align-self:flex-start;margin-top:6px}
/* minmax(0,1fr) e não 1fr: "1fr" quer dizer minmax(auto,1fr), e o "auto" deixa
   a coluna crescer além do container para caber o conteúdo. É a linha das duas
   datas (conversão e batismo) que transbordava no iPad. O .cad-campos abaixo já
   estava certo; esta tinha ficado para trás. */
.cad-linha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* Os dois campos da linha alinham pela BASE, não pelo topo. Quando um rótulo
   tem duas linhas ("Data da conversão / se lembrar") e o vizinho tem uma, os
   campos ficavam 26px desencontrados e a linha parecia torta — um campo
   montado sobre o outro. Com margin-top:auto o rótulo fica em cima e a caixa
   desce até encostar embaixo, nivelando as duas. */
.cad-linha label{justify-content:flex-start}
.cad-linha label>input,.cad-linha label>select{margin-top:auto}
.cad-ajuda{margin-top:20px;font-size:.9rem;color:#6b7280;line-height:1.6}
.cad-info{background:#f4f2ee;border-radius:12px;padding:12px 14px;font-size:.9rem;color:#3d4744}
.cad-detalhe{margin-top:22px;border-top:1px solid #eceae4;padding-top:16px}
.cad-detalhe summary{cursor:pointer;font-weight:600;font-size:.9rem;color:#173b3f}
.cad-detalhe .cad-form{margin-top:14px}
.cad-detalhe-data p{font-size:.88rem;color:#6b7280;line-height:1.6;margin:10px 0 0}

/* ---- cabeçalho da ficha ---- */
.cad-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}
/* Nome longo (a base tem um de 50 caracteres) precisa caber sem estourar a
   tela nem virar quatro linhas: a fonte encolhe junto com a largura, a quebra
   fica equilibrada e palavra comprida demais é partida em vez de vazar. */
.cad-topo h2{
  margin:.1em 0 0;font-size:clamp(1.2rem,5.4vw,1.6rem);line-height:1.2;color:#173b3f;
  overflow-wrap:anywhere;hyphens:auto;text-wrap:balance;max-width:100%;
}
.cad-topo>div{min-width:0}
.cad-sair button{background:none;border:1.5px solid #d9d4ca;border-radius:999px;padding:8px 18px;cursor:pointer;font:inherit;font-size:.85rem;color:#5c6360}
.cad-sair button:hover{border-color:#173b3f;color:#173b3f}

.cad-familia{background:#fff;border:1px solid #e6e2da;border-radius:18px;padding:18px 20px;margin-bottom:22px}
.cad-familia>strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#8a8a8a;margin-bottom:12px}
.cad-familia p{margin:12px 0 0;font-size:.85rem;color:#7b8582}
.cad-familia-chips{display:flex;flex-wrap:wrap;gap:10px}
.cad-familia-chips a{
  display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:10px 16px;border-radius:14px;
  border:1.5px solid #e6e2da;color:#2c3532;font-weight:600;font-size:.92rem;background:#fdfcfa;
}
.cad-familia-chips a small{font-weight:400;font-size:.75rem;color:#8a8a8a}
.cad-familia-chips a.ativo{border-color:#173b3f;background:#173b3f;color:#fff}
.cad-familia-chips a.ativo small{color:rgba(255,255,255,.75)}

/* ---- progresso ---- */
.cad-progresso{margin-bottom:26px}
.cad-barra{height:10px;border-radius:999px;background:#e6e2da;overflow:hidden}
.cad-barra span{display:block;height:100%;background:linear-gradient(90deg,#2f7d68,#5aa88c);border-radius:999px;transition:width .4s ease}
.cad-progresso p{margin:10px 0 0;font-size:.9rem;color:#5c6360}

/* ---- seções ---- */
.cad-ficha{gap:26px}
.cad-grupo{border:1px solid #e6e2da;border-radius:22px;background:#fff;padding:26px;margin:0}
.cad-grupo legend{font-weight:700;color:#173b3f;font-size:1.1rem;padding:0 10px}
.cad-grupo-texto{margin:0 0 18px;font-size:.9rem;color:#7b8582}
.cad-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.cad-campo{display:flex;flex-direction:column}
.cad-campo-largo{grid-column:1/-1}
.cad-campo[hidden]{display:none}

/* O amarelo é o único destaque da tela: some assim que a pessoa preenche. */
.cad-falta label,.cad-falta .cad-rotulo{position:relative}
.cad-falta input,.cad-falta select{border-color:#e6b800;background:#fffdf3}
.cad-falta b{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#8a6a00;background:#fdf3dd;
  border-radius:999px;padding:2px 9px;margin-left:6px;font-weight:700;vertical-align:middle;
}
.cad-rotulo{display:block;font-weight:600;font-size:.9rem;color:#2c3532;margin-bottom:10px}

.cad-legal{font-size:.82rem;color:#7b8582;line-height:1.6;background:#f4f2ee;border-radius:14px;padding:16px 18px;margin:0}

@media (max-width:720px){
  .cad-campos,.cad-linha{grid-template-columns:1fr}
  .cad-card,.cad-grupo{padding:22px 18px;border-radius:18px}
  .cad-topo{flex-direction:column}
  .cad-hero{padding:44px 0 36px}
}

/* ===== Assistente em 5 passos ===== */
.cad-passos{display:flex;gap:6px;margin-bottom:10px}
.cad-passos span{flex:1;height:6px;border-radius:999px;background:#e6e2da}
.cad-passos span.feito{background:#2f7d68}
.cad-passos span.atual{background:#5aa88c}

.cad-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:6px}
.cad-nav .button{margin:0}
.cad-ficha .cad-nav .button{align-self:auto}

/* O personagem: presente, mas nunca no caminho de quem só quer preencher. */
.cad-mascote{display:flex;align-items:center;gap:14px;background:#eef5f0;border:1px solid #d6e6dc;
  border-radius:18px;padding:14px 18px;margin-bottom:20px;animation:cad-entra .45s ease}
.cad-mascote svg{width:54px;height:54px;flex:none}
.cad-mascote p{margin:0;font-weight:600;color:#1e5443;line-height:1.4}
@keyframes cad-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cad-mascote{animation:none}
  .cad-barra span{transition:none}
}

.cad-salvo{margin:14px 0 0;font-size:.82rem;color:#7b8582;min-height:1.2em}
.cad-salvo[data-estado=ok]{color:#2f7d68}
.cad-salvo[data-estado=erro]{color:#a14444;font-weight:600}

.cad-escolha{display:grid;gap:10px}
.cad-escolha button{width:100%;text-align:left;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  padding:16px 18px;border:1.5px solid #d9d4ca;border-radius:14px;background:#fdfcfa;color:#173b3f}
.cad-escolha button:hover{border-color:#173b3f}

/* ===== Foto ===== */
/* Um ao lado do outro quando cabe; empilhados no celular estreito. */
.cad-foto-acoes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cad-foto-botao{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;
  border:1.5px dashed #c9c2b5;border-radius:16px;background:#fdfcfa;cursor:pointer;font-weight:600;color:#173b3f;
  text-align:center}
.cad-foto-botao:hover{border-color:#173b3f}
.cad-foto-botao input{display:none}
/* ===== Saúde e cuidado (Área do Membro) ===== */
.cad-saude-voltar{display:inline-block;font-size:.84rem;font-weight:700;color:#2f6b6f;margin-bottom:14px}
.cad-saude-chamada ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.cad-saude-chamada a strong{display:block;font-size:.96rem;line-height:1.3}
.cad-saude-chamada a small{color:#7b8582;font-size:.78rem}
.cad-saude-filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.cad-saude-filtros a{padding:7px 13px;border:1.5px solid #d9d4ca;border-radius:999px;font-size:.8rem;font-weight:700;color:#173b3f}
.cad-saude-filtros a.ativo{background:#173b3f;border-color:#173b3f;color:#fff}
.cad-saude-filtros a small{font-weight:400;opacity:.7}
.cad-saude-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cad-saude-lista a{display:block;padding:16px 18px;border:1.5px solid #e6e1d8;border-radius:14px;background:#fdfcfa}
.cad-saude-lista a:hover{border-color:#173b3f}
.cad-saude-lista small{display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#a08a4e}
.cad-saude-lista strong{display:block;font-size:1.02rem;line-height:1.3;margin:4px 0}
.cad-saude-lista p{margin:0 0 8px;font-size:.88rem;color:#5c6b68}
.cad-saude-lista span{font-size:.78rem;color:#7b8582}
.cad-saude-assunto{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#a08a4e;margin:0}
.cad-saude-assinatura{font-size:.84rem;color:#5c6b68;margin:6px 0 18px}
.cad-saude-capa{width:100%;height:auto;border-radius:14px;margin-bottom:18px}
.cad-saude-texto{font-size:1rem;line-height:1.75;color:#2f3b39}
/* O aviso não compete com o texto, mas também não se esconde. */
.cad-saude-aviso{margin-top:26px;padding:14px 16px;border-left:3px solid #c9a227;background:#fbf7ec;
  font-size:.82rem;line-height:1.6;color:#5c6b68;border-radius:0 10px 10px 0}

/* Enquadrar no celular: janela redonda, foto arrastável por dentro. */
.cad-foto-ajuste{margin-top:16px}
.cad-foto-dica{margin:0 0 10px;font-size:.86rem;color:#7b8582}
.cad-foto-janela{position:relative;width:min(240px,68vw);aspect-ratio:1;margin:0 auto;overflow:hidden;
  border-radius:50%;background:#efece6;cursor:grab;touch-action:none;user-select:none;
  box-shadow:0 4px 18px rgba(0,0,0,.14)}
.cad-foto-janela:active{cursor:grabbing}
.cad-foto-janela img{position:absolute;max-width:none;pointer-events:none}
/* Círculo de mira por cima, para a pessoa ver onde a foto será cortada. */
.cad-foto-mira{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.9)}
.cad-foto-zoom{display:block;width:min(240px,68vw);margin:14px auto 0;font-size:.8rem;font-weight:600;color:#173b3f}
.cad-foto-zoom input{display:block;width:100%;margin-top:6px}
.cad-foto-decisao{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.cad-foto-previa{margin-top:14px}
.cad-foto-previa img,.cad-foto-atual img{width:120px;height:120px;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.cad-foto-atual{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cad-foto-atual p{margin:0;font-size:.86rem;color:#7b8582}
.cad-foto-status{margin:12px 0 0;font-size:.86rem;color:#7b8582}
.cad-foto-status[data-estado=ok]{color:#2f7d68;font-weight:600}
.cad-foto-status[data-estado=erro]{color:#a14444;font-weight:600}
.cad-foto-legal{font-size:.8rem;color:#7b8582;margin:10px 0 0}

/* `.cad-form label` empilha e engrossa tudo; aqui o texto é um parágrafo de
   autorização ao lado da caixa, não um rótulo de campo. */
.cad-form label.cad-check{flex-direction:row;gap:12px;align-items:flex-start;font-weight:400;font-size:.9rem;line-height:1.55;color:#3d4744}
.cad-form label.cad-check input{width:22px;height:22px;flex:none;margin-top:2px}

/* ===== Filhos ===== */
.cad-filhos{background:#fff;margin-top:22px}
.cad-filhos h3{margin:0 0 6px;font-size:1.05rem;color:#173b3f}
.cad-filhos-lista{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.cad-filhos-lista li{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border:1px solid #e6e2da;border-radius:14px;background:#fdfcfa}
.cad-filhos-lista li>div{min-width:0;overflow-wrap:anywhere}
.cad-filhos-lista small{display:block;color:#7b8582;font-size:.78rem;margin-top:3px}
.cad-filhos-acoes{display:flex;gap:10px;align-items:center}
.cad-filhos-acoes form{margin:0}
.cad-remover{background:none;border:0;color:#a14444;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;padding:8px}
.cad-filho-novo{margin:0}

/* ===== Área do membro ===== */
.cad-concluido{margin-bottom:22px}
.cad-concluido>p{color:#3d4744;margin:0 0 6px}
.cad-ainda-falta{color:#8a6a00;font-size:.9rem}
.cad-acoes-linha{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.cad-acoes-linha form{margin:0}
.cad-container-area{max-width:1160px}
.cad-area-grid{display:grid;gap:22px;align-items:start}
.cad-area-lateral{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start;grid-auto-flow:dense}
.cad-area-lateral>.cad-card{min-width:0;height:100%;box-shadow:0 10px 32px rgba(23,59,63,.055)}
.cad-avisos{box-shadow:0 10px 32px rgba(23,59,63,.055)}
/* Ordem visual equilibrada: os cartões deixam de formar uma pilha única à direita. */
.cad-carteira{order:1}
.cad-aniversarios{order:2}
.cad-pastor{order:3;grid-column:1/-1}
.cad-push{order:4}
.cad-atalhos{order:5}
.cad-area-lateral.sem-aniversarios .cad-carteira{grid-column:1/-1}
.cad-area-grid h3{margin:0 0 14px;font-size:1.05rem;color:#173b3f}
.cad-vazio{color:#7b8582;font-size:.85rem;margin:10px 0 0}
.cad-aviso{border-top:1px solid #eceae4;padding:16px 0}
.cad-aviso:first-of-type{border-top:0;padding-top:0}
.cad-aviso.fixado{background:#fdf8ec;border-radius:12px;padding:16px;border-top:0;margin-bottom:10px}
.cad-aviso h4{margin:0 0 4px;font-size:1rem;color:#173b3f}
.cad-aviso small{color:#8a8a8a;font-size:.76rem}
.cad-aviso p{margin:8px 0 0;color:#3d4744;font-size:.92rem;line-height:1.6}

.cad-carteira-cartao{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  background:linear-gradient(135deg,#173b3f,#2f7d68);color:#fff;border-radius:18px;padding:18px}
.cad-carteira-foto{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5)}
.cad-carteira-inicial{display:grid;place-items:center;background:rgba(255,255,255,.18);font:700 1.6rem "Libre Franklin",sans-serif}
.cad-carteira-cartao strong{display:block;font-size:.98rem;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
.cad-carteira-cartao small{display:block;opacity:.8;font-size:.76rem;margin-top:3px}
.cad-carteira-qr{grid-column:1/-1;justify-self:center;background:#fff;border-radius:10px;padding:6px;margin-top:6px}
.cad-carteira-nota{font-size:.8rem;color:#7b8582;margin:12px 0 0}

@media (min-width:721px){
  .cad-carteira-cartao{grid-template-columns:72px minmax(0,1fr) 96px;padding:22px}
  .cad-carteira-foto{width:72px;height:72px}
  .cad-carteira-qr{grid-column:auto;width:96px;height:96px;margin-top:0}
}

.cad-aniversarios ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cad-aniversarios li{display:flex;align-items:center;gap:12px;font-size:.92rem}
.cad-aniversarios b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#f4f2ee;
  font-size:.82rem;color:#173b3f;flex:none}
.cad-aniversarios li.hoje b{background:#f2b544;color:#4a3200}
.cad-push-estado{font-size:.84rem;color:#7b8582;margin:12px 0 0}
.cad-atalhos a{display:block;padding:11px 0;border-top:1px solid #eceae4;font-weight:600;color:#173b3f;font-size:.92rem}
.cad-atalhos a:first-of-type{border-top:0}

@media (max-width:820px){
  .cad-area-lateral{grid-template-columns:1fr}
  .cad-area-lateral>.cad-card{grid-column:1!important;height:auto}
}
@media (max-width:720px){
  .cad-nav{flex-direction:column-reverse;align-items:stretch}
  .cad-nav .button{width:100%;text-align:center}
  .cad-filhos-lista li{flex-direction:column;align-items:stretch}
  .cad-filhos-acoes{justify-content:space-between}
  .cad-area-grid,.cad-area-lateral{gap:16px}
  .cad-area-lateral>.cad-card,.cad-avisos{box-shadow:none}
  .cad-concluido{margin-bottom:16px}
  .cad-acoes-linha{display:grid;grid-template-columns:1fr}
  .cad-acoes-linha form,.cad-acoes-linha .button{width:100%}
}

/* O atributo hidden precisa vencer o display das classes de botão: sem isto o
   "Instalar o app" aparece antes de o navegador oferecer a instalação, e o
   campo condicional escondido volta a aparecer. */
.cad-container [hidden]{display:none!important}

/* ===== Botões de seleção (permissão de aniversário) ===== */
.cad-opcoes{display:flex;gap:10px;flex-wrap:wrap}
.cad-opcao{flex:1;min-width:120px;display:flex!important;flex-direction:row!important;align-items:center;gap:10px;
  border:1.5px solid #d9d4ca;border-radius:11px;padding:0 14px;height:46px;background:#fdfcfa;cursor:pointer;font-weight:600}
.cad-opcao input{accent-color:#2f7d68;width:20px;height:20px;margin:0}
.cad-opcao:has(input:checked){border-color:#2f7d68;background:#eef5f0;color:#1e5443}
.cad-dica{font-size:.8rem;color:#7b8582;margin-top:7px;display:block}

/* ===== A pombinha ===== */
.cad-pomba{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
/* Anel verde e sombra forte: branco sobre o creme do site ela sumia, e o
   Fabiano nem viu que existia uma pombinha na tela. */
.cad-pomba-botao{pointer-events:auto;width:66px;height:66px;padding:0;border:3px solid #fff;border-radius:50%;
  cursor:pointer;background:#173b3f;box-shadow:0 10px 26px rgba(23,59,63,.34);display:grid;place-items:center;
  animation:cad-voa 3.4s ease-in-out infinite}
.cad-pomba-botao svg{width:100%;height:100%;border-radius:50%;display:block}
.cad-pomba-botao:hover{box-shadow:0 10px 28px rgba(23,59,63,.3)}
.cad-pomba-botao:active{transform:scale(.94)}
/* A asa bate sozinha, devagar: é o que dá vida sem virar distração. */
.cad-asa{transform-origin:26px 40px;animation:cad-asa 3.4s ease-in-out infinite}
.cad-pomba-balao{pointer-events:auto;margin:0;max-width:min(260px,calc(100vw - 48px));background:#173b3f;color:#fff;
  font-size:.9rem;font-weight:600;line-height:1.4;padding:12px 15px;border-radius:16px 16px 4px 16px;
  box-shadow:0 8px 24px rgba(23,59,63,.25);animation:cad-balao .32s ease}
.cad-pomba-balao[hidden]{display:none}

@keyframes cad-voa{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cad-asa{0%,100%{transform:rotate(0deg)}45%{transform:rotate(-13deg)}60%{transform:rotate(3deg)}}
@keyframes cad-balao{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .cad-pomba-botao,.cad-asa,.cad-pomba-balao{animation:none}
}

/* Espaço no fim da página para a pombinha nunca cobrir o último botão. */
.cad-section{padding-bottom:108px}
@media (max-width:720px){
  .cad-pomba{right:12px;bottom:12px}
  .cad-pomba-botao{width:58px;height:58px}
  .cad-opcao{min-width:0}
}

/* ===== "!" com o que falta ===== */
/* O "!" acompanha o texto, mas o balão se alinha ao BLOCO do nome, não ao
   botão: com nome longo o botão para no meio da linha e o balão vazava pela
   borda. Só a setinha corre até ele (posição calculada no JS). */
.cad-topo>div{position:relative;min-width:0}
.cad-pendencia{position:static;display:inline-block;vertical-align:middle;margin-left:10px}
.cad-pendencia-sino{
  width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;padding:0;
  background:#f2b544;color:#4a3200;font:700 1.15rem/1 "Libre Franklin",sans-serif;
  box-shadow:0 0 0 0 rgba(242,181,68,.7);animation:cad-pisca 2s ease-out infinite;
}
.cad-pendencia-sino:hover{background:#e5a52f}
.cad-pendencia-sino[aria-expanded=true]{animation:none;background:#173b3f;color:#fff}
@keyframes cad-pisca{
  0%{box-shadow:0 0 0 0 rgba(242,181,68,.7);transform:scale(1)}
  60%{box-shadow:0 0 0 12px rgba(242,181,68,0);transform:scale(1.08)}
  100%{box-shadow:0 0 0 0 rgba(242,181,68,0);transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.cad-pendencia-sino{animation:none}}

/* Ancorado à esquerda do "!", e não centralizado nele: o botão costuma cair no
   começo da linha, e centralizar jogava metade do aviso para fora da tela. */
.cad-pendencia-caixa{
  position:absolute;top:calc(100% + 10px);left:0;right:auto;z-index:40;
  width:max-content;max-width:min(320px,calc(100vw - 44px));background:#173b3f;color:#fff;
  border-radius:16px;padding:16px 18px;box-shadow:0 14px 34px rgba(12,40,43,.3);text-align:left;
  /* O balão mora DENTRO do <h2>, que parte palavra em qualquer letra para o
     nome longo caber. Aqui dentro isso não vale: "Vida na igreja" virava uma
     letra por linha. E a largura se mede pela tela, não pelo bloco do nome —
     na Área do Membro esse bloco é do tamanho de "Fabiano". */
  overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:wrap;font-weight:400;
}
.cad-pendencia-caixa[hidden]{display:none}
.cad-pendencia-caixa::before{content:"";position:absolute;bottom:100%;left:var(--seta,16px);
  border:8px solid transparent;border-bottom-color:#173b3f}
.cad-pendencia-caixa strong{display:block;font-size:.95rem;margin-bottom:10px}
.cad-pendencia-caixa ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cad-pendencia-caixa a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  color:#fff;font-size:.88rem;font-weight:600;padding:8px 10px;border-radius:10px;text-decoration:none}
.cad-pend-nome{min-width:0}
.cad-pend-passo{font-size:.72rem;font-weight:400;opacity:.7;white-space:nowrap;flex:none}
.cad-pendencia-caixa a:hover{background:rgba(255,255,255,.12)}


/* Fale com o pastor, na área do membro */
.cad-pastor textarea{font:inherit;font-size:16px;padding:12px 13px;border:1.5px solid #d9d4ca;border-radius:11px;
  background:#fdfcfa;width:100%;resize:vertical;min-height:96px}
.cad-pastor textarea:focus{outline:none;border-color:#173b3f;box-shadow:0 0 0 3px rgba(23,59,63,.12)}
.cad-pastor-historico{margin-top:20px;border-top:1px solid #eceae4;padding-top:16px}
.cad-pastor-historico>strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#8a8a8a;margin-bottom:12px}
.cad-pastor-historico article{padding:12px 0;border-top:1px solid #f2f0ea}
.cad-pastor-historico article:first-of-type{border-top:0}
.cad-pastor-historico small{color:#8a8a8a;font-size:.78rem}
.cad-pastor-historico p{margin:6px 0 0;font-size:.9rem;color:#3d4744;line-height:1.55}
.cad-pastor-resposta{margin-top:10px;padding:12px 14px;background:#eef5f0;border-radius:12px}
.cad-pastor-resposta strong{display:block;font-size:.78rem;color:#1e5443;margin-bottom:4px}

/* Aniversariantes: nome e sobrenome, bolo no dia e o atalho de parabéns */
.cad-aniversarios li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px}
.cad-aniv-nome{min-width:0;overflow-wrap:anywhere}
.cad-aniversarios li.hoje .cad-aniv-nome{font-weight:700;color:#173b3f}
.cad-aniv-zap{flex:none;white-space:nowrap;font-size:.78rem;font-weight:700;text-decoration:none;
  padding:7px 12px;border-radius:999px;background:#e8f4ec;color:#1e5433;border:1px solid #bcdfc9}
.cad-aniv-zap:hover{background:#d7ecdf}
.cad-aniversarios li.hoje .cad-aniv-zap{background:#f2b544;border-color:#e0a52f;color:#4a3200}
@media (max-width:400px){
  .cad-aniversarios li{grid-template-columns:30px 1fr;row-gap:6px}
  .cad-aniv-zap{grid-column:2;justify-self:start}
}

/* Painel de ajuda da pombinha */
.cad-pomba-ajuda{pointer-events:auto;width:min(320px,calc(100vw - 32px));background:#fff;border:1px solid #d6e6dc;
  border-radius:18px;padding:18px;box-shadow:0 16px 40px rgba(12,40,43,.22);max-height:min(60vh,460px);overflow:auto;
  animation:cad-balao .28s ease}
.cad-pomba-ajuda[hidden]{display:none}
.cad-pomba-ajuda-titulo{margin:0 0 4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:#8a8a8a;font-weight:700}
.cad-pomba-dica{margin:0 0 14px;font-size:.88rem;color:#1e5443;font-weight:600;line-height:1.45}
.cad-pomba-ajuda ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cad-pomba-ajuda li strong{display:block;font-size:.86rem;color:#173b3f}
.cad-pomba-ajuda li span{display:block;font-size:.82rem;color:#5c6360;line-height:1.5;margin-top:2px}
.cad-pomba-zap{display:block;margin-top:16px;padding-top:14px;border-top:1px solid #eceae4;
  font-size:.85rem;font-weight:700;color:#1e5443;text-decoration:none}
.cad-pomba-zap:hover{text-decoration:underline}

/* ===== Data em três partes (dia / mês / ano) =====
   Substitui o <input type="date">. O calendário nativo do Android é o ponto em
   que o cadastro mais travava: para chegar a 1954 é preciso descobrir que o
   título do mês é um botão. Aqui não há nada a descobrir — três caixas, e o
   mês pelo nome. Alvo de toque maior que o resto do formulário de propósito:
   quem mais usa esta tela tem 70 anos e dedo grosso. */
.cad-data{display:flex;flex-direction:column;gap:5px;min-width:0}
.cad-data-rotulo{font-weight:600;font-size:.88rem;color:#2c3532}
.cad-data-partes{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) minmax(0,.9fr);gap:8px;margin-top:auto}
.cad-data-parte{display:block;min-width:0}
.cad-form .cad-data select,.cad-form .cad-data input{height:52px;font-size:16px}
.cad-form .cad-data select{padding-right:28px;background-position:right 9px center}
.cad-form .cad-data-ano input{text-align:center;letter-spacing:.04em}
.cad-data-dica{font-size:.8rem;color:#7b8582;line-height:1.5;font-weight:400}
/* A conferência em voz de gente: "12 de março de 1954". É o que evita o erro
   silencioso de escolher o mês errado e só descobrir na secretaria. */
.cad-data-eco{margin:2px 0 0;font-size:.85rem;font-weight:600;color:#1e5443;min-height:1.2em}
.cad-data-eco:empty{display:none}
.cad-data-eco[data-estado=aprox]{color:#7a5a12}
.cad-data-eco[data-estado=falta]{color:#8a6a00}
.cad-falta .cad-data select,.cad-falta .cad-data input{border-color:#e6b800;background:#fffdf3}
/* O aviso de que a data aproximada serve fica junto do campo, não no rodapé:
   a dúvida "e se eu não lembrar?" acontece com o dedo em cima do seletor. */
.cad-dica-aprox{background:#f0f6f2;border:1px solid #d6e6dc;border-radius:12px;padding:11px 13px;
  font-size:.85rem;color:#1e5443;line-height:1.5;margin:0 0 12px}
@media (max-width:400px){
  .cad-data-partes{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-auto-rows:auto}
  .cad-data-ano{grid-column:1/-1}
}

/* ===== Agenda do membro (vem do /servir) ===== */
.cad-agenda{margin-bottom:22px}
.cad-agenda-topo{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between}
.cad-agenda-topo h3{margin:0 0 14px;font-size:1.05rem;color:#173b3f}
.cad-agenda-mais{background:none;border:1.5px solid #d9d4ca;border-radius:999px;padding:7px 15px;cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:600;color:#5c6360}
.cad-agenda-mais:hover{border-color:#173b3f;color:#173b3f}
.cad-agenda-estado{margin:0;font-size:.9rem;color:#5c6360;line-height:1.55}
.cad-agenda-estado[hidden]{display:none}
.cad-agenda-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cad-agenda-lista:empty{display:none}
.cad-agenda-item{display:grid;gap:2px;background:#f7f9f7;border:1px solid #e6e2da;border-left:4px solid #2f7d68;
  border-radius:12px;padding:12px 14px}
.cad-agenda-item b{font-size:.95rem;color:#173b3f}
.cad-agenda-item b::first-letter{text-transform:uppercase}
.cad-agenda-item span{font-size:.9rem;color:#3d4744}
.cad-agenda-item small{font-size:.8rem;color:#7b8582}
/* Hoje e amanhã em destaque: é o que muda o que a pessoa faz depois de ler. */
.cad-agenda-item.perto{background:#fdf8ec;border-left-color:#f2b544}
.cad-agenda-item.troca{border-left-color:#c98a2e}
.cad-agenda-troca{color:#8a6a00;font-weight:600}
.cad-agenda-abrir{display:inline-block;margin-top:14px;font-weight:700;color:#1e5443;font-size:.9rem;text-decoration:none}
.cad-agenda-abrir:hover{text-decoration:underline}

/* A janelinha que aparece ao entrar. Não é modal de verdade (aria-modal=false):
   ela informa e sai de cena, não prende a pessoa numa decisão. */
.cad-agenda-flutuante{position:fixed;inset:0;z-index:70;display:grid;place-items:end center;
  background:rgba(12,40,43,.35);opacity:0;transition:opacity .25s ease;padding:16px}
.cad-agenda-flutuante[hidden]{display:none}
.cad-agenda-flutuante.aberta{opacity:1}
.cad-agenda-caixa{position:relative;width:min(460px,100%);background:#fff;border-radius:22px;padding:24px;
  box-shadow:0 24px 60px rgba(12,40,43,.3);transform:translateY(16px);transition:transform .25s ease;
  max-height:min(80vh,640px);overflow:auto}
.cad-agenda-flutuante.aberta .cad-agenda-caixa{transform:none}
.cad-agenda-caixa h3{margin:.15em 0 16px;font-size:1.15rem;color:#173b3f}
.cad-agenda-fechar{position:absolute;top:10px;right:12px;background:none;border:0;font-size:1.7rem;line-height:1;
  color:#8a8a8a;cursor:pointer;padding:6px 10px}
.cad-agenda-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cad-agenda-acoes .button{flex:1 1 auto;text-align:center}
@media (min-width:721px){.cad-agenda-flutuante{place-items:center}}
@media (prefers-reduced-motion:reduce){
  .cad-agenda-flutuante,.cad-agenda-caixa{transition:none}
  .cad-agenda-caixa{transform:none}
}

/* ===== Inscrições em eventos, na Área do Membro ===== */
.cad-inscricoes{margin-bottom:22px}
.cad-inscricoes h4.cad-insc-titulo{margin:22px 0 10px;font-size:.95rem}
.cad-insc-abertos,.cad-insc-minhas{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cad-insc-abertos li,.cad-insc-minhas li{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.cad-insc-abertos strong,.cad-insc-minhas strong{display:block}
.cad-insc-abertos small,.cad-insc-minhas small{color:#6b7c74;font-size:.82rem}
.cad-insc-abertos .button,.cad-insc-minhas .button{padding:8px 16px;font-size:.86rem}
.cad-insc-status{border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600;background:#eef1ee}
.cad-insc-status.insc-status-aguardando{background:#fdf1d8;color:#8a6414}
.cad-insc-status.insc-status-em_analise{background:#dff2f5;color:#1d5f74}
.cad-insc-status.insc-status-pago,.cad-insc-status.insc-status-cortesia{background:#e2f1e4;color:#265c30}
.cad-insc-status.insc-status-cancelado,.cad-insc-status.insc-status-expirado{background:#f1eceb;color:#6d5b57}

/* ---- "ver os anteriores": o que saiu da primeira tela sem sumir ---- */
.cad-mais{margin-top:14px;border-top:1px solid #eceae4;padding-top:12px}
.cad-mais>summary{cursor:pointer;font-size:.85rem;font-weight:600;color:#3d5c5f;list-style:none}
.cad-mais>summary::-webkit-details-marker{display:none}
.cad-mais>summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.cad-mais[open]>summary::before{content:"▾ "}
.cad-mais>summary:hover{color:#173b3f;text-decoration:underline}
.cad-mais>ul{margin-top:12px}
.cad-mais .cad-aviso,.cad-mais>article{margin-top:14px}

/* ---- convite para instalar na tela de início ---- */
.cad-instalar{position:relative;border-left:4px solid #b39758}
.cad-instalar h3{margin-right:26px}
.cad-instalar-fechar{position:absolute;right:12px;top:10px;border:0;background:none;font-size:1.5rem;
  line-height:1;color:#9aa5a3;cursor:pointer;padding:2px 6px}
.cad-instalar-fechar:hover{color:#3d4744}
.cad-instalar-acoes{margin-top:14px}
.cad-instalar-passos{margin:0;padding-left:22px;font-size:.88rem;color:#3d4744;line-height:1.7}
.cad-instalar-passos li+li{margin-top:6px}