/* ---------- Página inicial: áreas do portal e quadro de notícias ---------- */

/* O topo é o mesmo em todas as telas (css/layout.css): logo, título da área e,
   à direita, Atualizar, quem está conectado e as ações da conta. */
body.verificando main,body.verificando footer,body.verificando .eu{visibility:hidden}

/* ---------- Página de entrada da administração ---------- */
.entrada{max-width:640px;margin:0 auto;padding:32px 24px}
.entrada .bloco{margin-bottom:14px}

.home-conteudo{max-width:1040px;margin:0 auto;padding:28px 24px 48px}
.home-titulo{font-size:1.15rem;font-weight:700;margin:6px 0 14px}

/* ---------- Áreas (esquerda) e links da empresa (direita) ---------- */
.home-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:24px;align-items:start;margin-bottom:38px;
}
@media(max-width:820px){ .home-grid{grid-template-columns:1fr} }

/* ---------- Cards das áreas ---------- */
.home-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
}
/* o card da área que o servidor não mandou (a que está em ajustes, só do Nível 1) some (home.js) */
.area[hidden]{display:none}
.area{
  display:flex;flex-direction:column;gap:8px;
  background:var(--branco);border:1px solid var(--linha);border-radius:18px;
  padding:22px 20px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
a.area:hover{border-color:var(--mata);box-shadow:0 10px 24px rgba(126,29,148,0.10);transform:translateY(-2px)}
a.area:focus-visible{outline:3px solid var(--mata);outline-offset:2px}
.area-icone{
  width:46px;height:46px;border-radius:14px;margin-bottom:4px;
  background:var(--mata-claro);color:var(--mata-escuro);
  display:flex;align-items:center;justify-content:center;
}
.area-icone svg{width:24px;height:24px}
.area-nome{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.12rem;font-weight:700}
.area-texto{font-size:0.9rem;color:var(--tinta-suave);flex:1}
.area-acao{font-size:0.88rem;font-weight:700;color:var(--mata-escuro);align-self:flex-end;text-align:right}

.area-avisos{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.area-avisos:empty{display:none}
.area-aviso{
  display:inline-block;font-size:0.72rem;font-weight:700;color:var(--alerta);
  background:var(--alerta-claro);border-radius:999px;padding:3px 9px;
}

.area.indisponivel{opacity:0.62;cursor:default}
.area.indisponivel .area-icone{background:var(--linha);color:var(--tinta-suave)}
.area.indisponivel .area-acao{color:var(--tinta-suave);font-weight:600}

/* notícias em cima, links embaixo, na mesma coluna */
.home-lateral{display:flex;flex-direction:column;gap:26px}

/* ---------- Cadastros do escritório (administrador geral) ---------- */
.topo-links{display:flex;align-items:center;gap:12px}
.aprovacoes{font-size:0.8rem;font-weight:700;color:var(--mata-escuro)}
.aprovacoes.tem-pendente{color:var(--alerta)}
.sub-painel{font-size:0.88rem;color:var(--tinta-suave);margin:-6px 0 16px}
.cadastro{background:var(--branco);border:1px solid var(--linha);border-radius:16px;padding:16px 18px;margin-bottom:12px}
.cadastro-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cadastro-topo strong{font-size:0.98rem}
.cadastro-acoes{display:flex;gap:8px;flex-wrap:wrap}
.badge-aviso{
  font-size:0.7rem;font-weight:700;color:var(--alerta);background:var(--alerta-claro);
  border-radius:999px;padding:3px 9px;margin-left:8px;white-space:nowrap;
}
.cadastro-areas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--linha)}
.cadastro-areas p{font-size:0.82rem;color:var(--tinta-suave)}
.cadastro-areas .area-nivel{display:flex;align-items:center;gap:6px;font-size:0.85rem}
.cadastro-areas select{font-size:0.82rem;padding:5px 8px;border-radius:10px}
.cadastro-areas select:disabled{opacity:0.5}

/* linha clicável de quem já faz parte do escritório */
.cartao-pessoa{border-bottom:1px solid var(--linha)}
.cartao-pessoa:last-child{border-bottom:none}
.pessoa-topo{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 18px;cursor:pointer;
}
.pessoa-topo:hover{background:var(--fundo)}
.cartao-pessoa .cadastro-areas{margin:0;padding:12px 18px 16px;border-top:1px solid var(--linha)}

/* detalhe de uma implantação */
.implantacao-detalhe{padding:14px 18px 18px;border-top:1px solid var(--linha)}
.implantacao-detalhe h3{font-size:0.9rem;font-weight:700;margin:16px 0 6px}
.implantacao-detalhe h3:first-of-type{margin-top:10px}
.implantacao-detalhe .linha-reserva{padding-left:0;padding-right:0}
.implantacao-detalhe .bloco-interno{margin-bottom:6px}
/* os arquivos de uma etapa: um por linha, separados (arquivosDaEtapa, em js/implantacao/desenho.js) */
.implantacao-detalhe .arquivo-da-etapa{justify-content:flex-start;padding:6px 0;border-top:1px dashed var(--linha)}
/* aviso, na linha do município, de etapa que entrou depois que ele estava concluído */
.etapa-nova{color:var(--alerta);font-weight:700}
/* o responsável do município: o contato que a equipe procura primeiro, em destaque */
.implantacao-detalhe .contato-responsavel{background:var(--mata-claro);border-left:4px solid var(--mata);border-radius:10px;padding:12px 14px;margin-bottom:10px}
/* o relógio de cada implantação: verde há tempo, amarelo resta 10% do prazo, vermelho venceu */
.relogio{width:32px;height:32px;flex-shrink:0}
/* relógio e seta sempre lado a lado, mesmo quando a linha quebra */
.relogio-seta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.seta-abrir{width:22px;height:22px;color:var(--mata);transition:transform .15s}
.seta-abrir.aberta{transform:rotate(90deg)}
.relogio.verde{color:var(--verde)}
.relogio.amarelo{color:var(--amarelo)}
.relogio.vermelho{color:var(--vermelho)}

/* ---------- O aceite do uso dos dados pessoais, no cadastro e no convite ---------- */
.uso-dados{border:1px solid var(--linha);border-radius:14px;padding:12px 14px;margin:14px 0;background:var(--branco);font-size:0.86rem;color:var(--tinta-suave)}
.uso-dados strong{color:inherit;font-size:0.95rem}
.uso-dados p{margin:6px 0}
.uso-dados ul{margin:4px 0 6px;padding-left:20px}
.uso-dados li{margin:2px 0}
.aceite-dados{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:10px;font-weight:700;color:var(--mata-escuro)}
.aceite-dados input{width:auto;margin:3px 0 0;flex:none}

/* ---------- Escolha do tipo, no cadastro ---------- */
.tipos-cadastro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px;margin-bottom:16px}
.tipo-opcao{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  border:1px solid var(--linha);border-radius:14px;padding:12px 14px;background:var(--branco);
}
.tipo-opcao:hover{border-color:var(--mata)}
.tipo-opcao input{margin-top:3px;accent-color:var(--mata)}
.tipo-opcao strong{display:block;font-size:0.92rem}
.tipo-opcao em{display:block;font-style:normal;font-size:0.78rem;color:var(--tinta-suave);margin-top:2px}
.tipo-opcao:has(input:checked){border-color:var(--mata);background:var(--mata-claro)}

.ver-todas{
  display:inline-block;margin-top:10px;font-size:0.85rem;font-weight:700;color:var(--mata-escuro);
}

/* as telas "ver todas" usam a página inteira, não a coluna estreita */
.lista-cheia{max-width:720px}

/* ---------- Tabela de links da empresa ---------- */
.tabela-links{
  width:100%;border-collapse:collapse;
  background:var(--branco);border:1px solid var(--linha);border-radius:16px;
  overflow:hidden;font-size:0.9rem;
}
.tabela-links th,.tabela-links td{padding:11px 14px;text-align:left;vertical-align:top}
.tabela-links th{font-weight:600;color:var(--tinta)}
/* a fonte do link fica encostada à direita e só ocupa o que precisa */
.tabela-links td{
  color:var(--tinta-suave);font-size:0.78rem;text-align:right;
  width:1%;white-space:nowrap;padding-left:8px;
}
.tabela-links tr+tr th,.tabela-links tr+tr td{border-top:1px solid var(--linha)}
.tabela-links a{color:var(--mata-escuro);font-weight:600}
.link-pendente{color:var(--tinta-suave);font-style:italic}

/* ---------- Quadro de notícias ---------- */
.noticias{display:flex;flex-direction:column;gap:12px}
.noticia{background:var(--branco);border:1px solid var(--linha);border-radius:16px;padding:16px 18px}
.noticia h3{font-size:1rem;font-weight:700;margin-bottom:2px;line-height:1.3}
/* na página inicial, o título da notícia tem a cor dos links importantes ao lado */
#quadroNoticias .noticia h3{color:var(--mata-escuro)}
.noticia .quando{font-size:0.8rem;color:var(--tinta-suave);margin-bottom:8px}
.noticia p{font-size:0.9rem;white-space:pre-line}   /* respeita as quebras de linha do texto */
.noticias-vazio{
  background:var(--branco);border:1px dashed var(--linha);border-radius:16px;
  padding:18px;color:var(--tinta-suave);font-size:0.9rem;
}

.home-rodape{
  max-width:1040px;margin:0 auto;padding:0 24px 40px;
  font-size:0.82rem;color:var(--tinta-suave);line-height:1.7;
}
.home-rodape a{color:var(--mata-escuro)}

@media(max-width:560px){
}