/* ---------- Cabeçalho ---------- */
header{background:var(--branco);border-bottom:1px solid var(--linha);padding:0 24px}
.header-inner{
  max-width:1040px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;padding:16px 0;
}
.marca{display:flex;align-items:center;gap:14px}
.marca img{height:56px;width:auto;display:block}
/* a logo leva de volta para a página inicial */
.marca a{display:block;border-radius:10px;transition:opacity .15s}
.marca a:hover{opacity:0.85}
.marca a:focus-visible{outline:3px solid var(--mata);outline-offset:2px}
/* a seta de voltar, antes do logo (posta pelo js/comum/comum.js nas telas internas) */
.voltar-tela{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;
  border:1px solid var(--linha);border-radius:12px;background:var(--branco);color:var(--mata);cursor:pointer;
  margin-right:-4px;transition:background .15s;
}
.voltar-tela:hover{background:var(--mata-claro)}
.voltar-tela:focus-visible{outline:3px solid var(--mata);outline-offset:2px}
.voltar-tela svg{width:22px;height:22px}
.marca h1{font-size:1.35rem;font-weight:800;letter-spacing:-0.01em;color:var(--mata-escuro);line-height:1.2}
.marca p{font-size:0.8rem;color:var(--tinta-suave)}
.eu{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
/* Alterar senha e Sair ficam no topo, iguais para administrador e distribuidor */
#acoesTopo{display:none}
#btnAlterarSenha,#btnSair{border:none;background:none;padding:0}
#btnAlterarSenha:hover,#btnSair:hover{text-decoration:underline}
#btnAlterarSenha{color:var(--tinta-suave)}
body.logado #acoesTopo{display:flex;gap:8px}
#btnAtualizar{padding:0;border:none;background:none;color:var(--mata-escuro);font-weight:700}
#btnAtualizar:hover{text-decoration:underline}
#quemEsta{font-size:0.9rem;color:var(--tinta-suave)}
#quemEsta strong{color:var(--tinta)}

select,input{
  font-family:inherit;font-size:0.9rem;color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--linha);border-radius:12px;
  padding:8px 12px;
}
/* o select toma a largura da opção mais longa: no celular, sem isto, passa da tela */
select{max-width:100%}
select:focus,input:focus,button:focus-visible{outline:2px solid var(--mata);outline-offset:1px}

/* ---------- Abas ---------- */
nav{max-width:1040px;margin:20px auto 0;padding:0 24px}
.nav-linha{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.abas{display:inline-flex;background:var(--branco);border:1px solid var(--linha);border-radius:16px;padding:4px;gap:2px;flex-wrap:wrap}
.abas button{
  font-family:'Baloo 2','Nunito',sans-serif;font-size:0.92rem;font-weight:600;
  background:none;border:none;border-radius:12px;
  padding:8px 16px;cursor:pointer;color:var(--tinta-suave);
}
.abas button.ativa{background:var(--mata);color:var(--sobre-cor);font-weight:700}
/* subopções de um grupo de abas (Tecnologia → Gestão / Aprovações): mais leves que as de cima */
.abas.sub-abas{background:transparent;border:none;padding:0;margin-top:8px}
.abas.sub-abas[hidden]{display:none}
.abas.sub-abas button{font-size:0.86rem;padding:6px 14px;border:1px solid var(--linha);background:var(--branco)}
.abas.sub-abas button.ativa{background:var(--mata-claro);color:var(--mata-escuro);border-color:var(--mata)}
/* Vendas do portal · Vendas antigas, no alto de uma lista de vendas (separarPorOrigem, em comum.js) */
.abas.sub-abas.abas-origem{margin:0 0 12px}
.ledger .abas.sub-abas.abas-origem{margin:10px 14px}

main{max-width:1040px;margin:0 auto;padding:24px 24px 8px}
.painel-secao{display:none}
.painel-secao.visivel{display:block}

/* ---------- Blocos ---------- */
.bloco{
  background:var(--branco);border:1px solid var(--linha);border-radius:18px;
  padding:20px;margin-bottom:20px;
}
.bloco h2{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.bloco .sub{font-size:0.85rem;color:var(--tinta-suave);margin-bottom:14px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin-bottom:14px}
.campo label,.rotulo-campo{display:block;font-size:0.8rem;color:var(--tinta-suave);margin-bottom:4px}
.campo label b{color:var(--alerta);font-weight:600}
.campo input,.campo textarea{width:100%}
.campo textarea{font-family:inherit;font-size:1rem;padding:11px 14px;border:1px solid var(--linha);border-radius:14px;background:var(--branco);color:var(--tinta);resize:vertical}
.campo .dica{font-size:0.72rem;color:var(--tinta-suave);margin-top:3px}
.troca{margin-top:14px;font-size:0.88rem;color:var(--tinta-suave)}
.troca a{color:var(--mata-escuro);font-weight:600}