/* CAMINHO: /home1/miille88/eovovo.com.br/assets/css/responsivo.css */
/* ============================================================
   eovovo — responsivo.css
   Camada de ajuste para telas pequenas. É o ÚLTIMO css da fila
   (ver layout.php), então ganha das regras das páginas sem
   precisar de !important e sem mexer no css de cada tela.
   Nada de cor nova aqui: só medida, empilhamento e alvo de dedo.

   REGRA DA CASA: toda regra daqui é presa ao body.pg-* da tela.
   Os nomes de classe se repetem entre as páginas — .acoes existe na
   home E na barra da árvore, .numeros no painel E no admin, .bloco
   nos dois, .dica nos dois, .grade nos dois — e sem o escopo a regra
   de uma tela vaza para a outra.
   ============================================================ */

/* ============================================================
   1. HOME (vitrine)
   ============================================================ */
@media(max-width:760px){
  body.pg-home .hero{padding-top:clamp(26px,6vw,40px)}
  body.pg-home .news-form{flex-direction:column;align-items:stretch}
  body.pg-home .news-form input[type=text],
  body.pg-home .news-form input[type=email],
  body.pg-home .news-form .btn{flex:none;width:100%}
  body.pg-home .grade article{padding-left:16px}
}
@media(max-width:520px){
  body.pg-home .hero h1{font-size:clamp(1.95rem,8.6vw,2.5rem)}
  body.pg-home .chamada{font-size:1.02rem}
  body.pg-home .acoes{flex-direction:column;align-items:stretch}
  body.pg-home .acoes .btn{width:100%;text-align:center}
  body.pg-home .hero-nota{font-size:.82rem}
  body.pg-home .passos-lista li{padding:20px 18px}
  body.pg-home .plano-cartao{padding:26px 20px;border-radius:14px}
  body.pg-home .preco .valor{font-size:2.6rem}
  body.pg-home .plano-itens{max-width:100%}
  body.pg-home .perguntas summary{font-size:1rem;padding-right:30px}
  body.pg-home .fecho-frase{max-width:100%}
}

/* modal de assinatura: no celular ele é quase uma tela inteira */
@media(max-width:520px){
  body.pg-home .assin{padding:10px}
  body.pg-home .assin-caixa{max-height:94dvh;padding:26px 18px 20px;border-radius:16px}
  body.pg-home .assin-copia textarea{font-size:.72rem}
}

/* ============================================================
   2. PAINEL
   ============================================================ */
@media(max-width:760px){
  body.pg-painel .topo{flex-wrap:wrap;gap:8px 14px}
  body.pg-painel .topo nav{gap:8px 14px;flex-wrap:wrap}
  body.pg-painel .topo nav a{padding:4px 0}
  body.pg-painel .faixa{padding:12px 14px}
  body.pg-painel .faixa-btn{margin-left:0;width:100%;text-align:center;padding:10px 16px}
}
@media(max-width:520px){
  body.pg-painel .painel{padding-top:22px}
  body.pg-painel .bloco{padding:18px 16px}
  body.pg-painel .numeros{grid-template-columns:repeat(2,1fr);gap:14px 10px}
  body.pg-painel .arvore-topo{gap:11px;margin-bottom:16px}
  body.pg-painel .arvore-topo h2{font-size:1.22rem}
  body.pg-painel .copiar{flex-direction:column}
  body.pg-painel .copiar button{width:100%;padding:11px}
  body.pg-painel .dica{padding:14px 15px}
}

/* ============================================================
   3. MINHA CONTA
   ============================================================ */
@media(max-width:760px){
  body.pg-conta .topo{flex-wrap:wrap;gap:8px 14px}
  body.pg-conta .topo nav{gap:8px 14px;flex-wrap:wrap}
}
@media(max-width:600px){
  body.pg-conta .cartao{padding:18px 16px}
  body.pg-conta .ola{font-size:1.45rem}
  /* a tabela de colaboradores vira uma pilha de fichas */
  body.pg-conta .lista,
  body.pg-conta .lista tbody,
  body.pg-conta .lista tr,
  body.pg-conta .lista td{display:block;width:100%}
  body.pg-conta .lista tr{padding:12px 0;border-bottom:1px solid #f2ece0}
  body.pg-conta .lista tr:last-child{border-bottom:0}
  body.pg-conta .lista td{padding:2px 0;border-bottom:0}
  body.pg-conta .convite label{flex:1 1 100%}
  body.pg-conta .convite .btn{width:100%;text-align:center}
  body.pg-conta .opcao{padding:12px}
}

/* ============================================================
   4. MAPA DA FAMÍLIA
   A altura era calc(100vh - 52px) e quebrava quando o topo virava
   duas linhas. Agora quem divide a tela é o flex.
   ============================================================ */
body.pg-mapa{display:flex;flex-direction:column;height:100vh;height:100dvh}
body.pg-mapa .mapa-tela{flex:1;height:auto;min-height:0}

@media(max-width:760px){
  body.pg-mapa .topo{flex-wrap:wrap;gap:8px 14px}
  body.pg-mapa .mapa-barra{gap:8px 14px;padding:12px 16px}
  body.pg-mapa .mapa-nota{margin-left:0;max-width:none;flex:1 1 100%}
  body.pg-mapa .legenda-mapa{flex-wrap:wrap;gap:4px}
  body.pg-mapa #mapa{min-height:240px}
}
@media(max-width:520px){
  body.pg-mapa .mapa-barra h1{font-size:1.1rem}
  body.pg-mapa .legenda-mapa{font-size:.76rem}
  body.pg-mapa .mapa-vazio h2{font-size:1.25rem}
}

/* ============================================================
   5. ÁRVORE (construtor)
   ============================================================ */
@media(max-width:900px){
  body.pg-arvore .top .legenda{display:none}  /* legenda de cores não cabe e não é essencial */
  body.pg-arvore .top .tag{display:none}
}
@media(max-width:640px){
  body.pg-arvore .top{height:52px;padding:0 12px;gap:8px}
  body.pg-arvore #stage{inset:52px 0 0 0}
  body.pg-arvore .vazio{inset:52px 0 0 0}
  body.pg-arvore .foco-nav{top:52px;padding:8px 12px;gap:10px}
  body.pg-arvore .foco-nav #focoLabel{font-size:.85rem}
  body.pg-arvore .logo svg{width:26px;height:26px}
  body.pg-arvore .logo .nome{font-size:1.15rem}
  body.pg-arvore .modo-switch{padding:2px}
  body.pg-arvore .modo-switch button{padding:6px 9px;font-size:.76rem}
  body.pg-arvore .top .acoes{margin-left:6px;gap:6px}
  body.pg-arvore .top button{padding:7px 10px;font-size:.78rem}
  /* o "voltar ao painel" fica só com a seta */
  body.pg-arvore .top .voltar-painel{padding:7px 11px;gap:0}
  body.pg-arvore .top .voltar-painel .rot{display:none}
}
@media(max-width:400px){
  body.pg-arvore .logo .nome{display:none}    /* sobra só a folha da marca */
}

/* ficha da pessoa: quatro campos numa linha não cabem em 360px */
@media(max-width:640px){
  body.pg-arvore .overlay{padding:10px}
  body.pg-arvore .modal{border-radius:16px;max-height:94dvh}
  body.pg-arvore .linha{flex-wrap:wrap;gap:0 12px}
  body.pg-arvore .linha .campo{flex:1 1 140px}
  body.pg-arvore .mhead{padding:16px;gap:12px}
  body.pg-arvore .mhead .retrato{width:70px;height:70px;font-size:28px}
  body.pg-arvore .mhead h2{font-size:1.25rem}
  body.pg-arvore .mbody{padding:16px}
  body.pg-arvore .mfoot{padding:12px 16px;gap:8px;flex-wrap:wrap}
  body.pg-arvore .mfoot .save{flex:1 1 100%;order:3;padding:13px}
}

/* os flutuantes do canto de baixo se atropelavam
   (o "voltar ao painel" subiu para a barra e não briga mais aqui) */
@media(max-width:600px){
  body.pg-arvore .mapa{display:none}          /* minimapa */
  body.pg-arvore .zoom{right:12px;bottom:12px;gap:5px}
  body.pg-arvore .zoom button{width:36px;height:36px;font-size:16px}
  body.pg-arvore .sync{left:12px;bottom:12px}
}

/* ============================================================
   6. ÁRVORE ABERTA (visita, somente leitura)
   ============================================================ */
@media(max-width:600px){
  body.pg-publica .mapa{display:none}
  body.pg-publica .zoom{right:12px;bottom:12px;gap:5px}
  body.pg-publica .zoom button{width:36px;height:36px;font-size:16px}
}
@media(max-width:520px){
  body.pg-publica .pub-topo{padding:9px 14px}
  body.pg-publica .pub-cta{padding:8px 15px;font-size:.86rem}
  body.pg-publica .pub-vazio{margin:12vh auto}
}

/* ============================================================
   7. ADMINISTRAÇÃO
   ============================================================ */
@media(max-width:760px){
  body.pg-admin .adm-topo{gap:10px 14px;padding:10px 16px}
  body.pg-admin .adm-abas{margin-left:0;order:3;width:100%}
  body.pg-admin .adm-abas a{padding:7px 11px;font-size:.88rem}
  body.pg-admin .adm-eu{margin-left:auto;order:2}
  body.pg-admin .adm{padding:18px 16px 48px}
  body.pg-admin .bloco{padding:18px 16px}
  body.pg-admin .form-fim .btn-adm{width:100%}
  body.pg-admin .periodo{flex-wrap:wrap}
}
@media(max-width:520px){
  body.pg-admin .num strong{font-size:1.5rem}
  body.pg-admin .grafico{height:104px}
  body.pg-admin .tab{font-size:.86rem}
}

/* ============================================================
   8. TELAS CENTRALIZADAS (entrar / senha / newsletter)
   ============================================================ */
@media(max-width:480px){
  body.pg-login .caixa,
  body.pg-senha .caixa,
  body.pg-newsletter .caixa{
    margin:auto 14px;padding:26px 20px;border-radius:16px;
    box-shadow:0 8px 26px rgba(60,74,58,.08);
  }
  body.pg-login .marca h1,
  body.pg-senha .marca h1,
  body.pg-newsletter .marca h1{font-size:1.7rem}
}

/* ============================================================
   9. ALVO DE DEDO
   Só nos botões grandes. Os miúdos (.mini, .btn-min) ficam como
   são: esticar para 44px deixaria "remover" e "gerenciar" enormes.
   ============================================================ */
@media(pointer:coarse){
  body.pg-home .btn,
  body.pg-home .topo-btn,
  body.pg-conta .btn,
  body.pg-painel .faixa-btn,
  body.pg-admin .btn-adm{min-height:44px}
  body.pg-home .perguntas summary{padding-top:18px;padding-bottom:18px}
}