/* ---------- Botões ---------- */
/* vale para <button> e para links que levam a outra página (<a class="acao">),
   para os dois ficarem iguais */
.acao{
  font-family:inherit;font-size:0.85rem;font-weight:700;
  border-radius:12px;padding:8px 15px;cursor:pointer;border:1px solid transparent;
}
a.acao{display:inline-block;text-decoration:none}
a.acao:hover{text-decoration:none}
.primario{background:var(--mata);color:var(--sobre-cor)}
.primario:hover{background:var(--mata-hover)}
.secundario{background:var(--branco);color:var(--tinta);border-color:var(--borda-botao)}
.secundario:hover{border-color:var(--tinta-suave)}
.perigo{background:var(--branco);color:var(--alerta);border-color:var(--alerta)}
.perigo:hover{background:var(--alerta-claro)}
button:disabled{opacity:0.45;cursor:not-allowed}

/* ---------- Municípios ---------- */
.ferramentas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.ferramentas input[type=text]{flex:1;min-width:180px}
.ferramentas-tabela{margin-bottom:0;padding:12px 18px;border-bottom:1px solid var(--linha)}
.ledger{border:1px solid var(--linha);border-radius:18px;background:var(--branco);overflow:hidden}
.ledger-cabeca{
  display:flex;justify-content:space-between;padding:12px 18px;
  border-bottom:1px solid var(--linha);font-size:0.82rem;color:var(--tinta-suave);gap:10px;flex-wrap:wrap;
}
.linha-mun{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 18px;border-bottom:1px solid var(--linha);flex-wrap:wrap;
}
.linha-mun:last-child{border-bottom:none}
.linha-mun .nome{font-size:0.95rem;font-weight:500}
.carimbo{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Baloo 2';font-weight:700;font-size:0.8rem;
  color:var(--mata-escuro);background:var(--mata-claro);
  border:1.5px solid var(--mata);border-radius:6px;
  padding:3px 10px;transform:rotate(-1.2deg);
}
.vence{font-size:0.75rem;color:var(--tinta-suave)}
.vence.urgente{color:var(--alerta);font-weight:600}
.grupo-admin>summary{cursor:pointer;list-style:none;user-select:none}
.grupo-admin>summary::-webkit-details-marker{display:none}
.grupo-admin>summary>span:first-child::before{content:'▸  ';color:var(--mata-escuro)}
.grupo-admin[open]>summary>span:first-child::before{content:'▾  '}
/* Etiqueta pequena ao lado de um nome. A classe `aviso` também é a caixa grande de
   recado (.aviso, mais abaixo): como ela vem depois no arquivo, sem esta repetição a
   etiqueta herdava o tamanho da caixa e ficava um balão no meio da linha. */
.badge-mail,.badge-mail.aviso{display:inline-block;font-size:0.72rem;font-weight:700;
  padding:2px 9px;border-radius:9px;margin:0 0 0 8px;vertical-align:1px;border:none;line-height:1.6}
.badge-mail.conf{background:var(--mata-claro);color:var(--mata-escuro)}
.badge-mail.aviso{background:var(--alerta-claro);color:var(--alerta)}
.badge-mail.senha{background:var(--linha);color:var(--tinta)}
.badge-mail.ok{background:var(--verde-claro);color:var(--verde)}
.badge-mail.erro{background:var(--vermelho-claro);color:var(--vermelho)}
.numero.pendente .valor{color:var(--alerta)}
.acoes-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- Aviso / vazio ---------- */
.vazio{text-align:center;padding:48px 24px;color:var(--tinta-suave);font-size:0.95rem}
.vazio strong{color:var(--tinta)}
.aviso{
  background:var(--mata-claro);border:1px solid var(--mata);border-radius:14px;
  padding:12px 16px;font-size:0.9rem;margin-bottom:16px;color:var(--mata-escuro);
}
/* o indicador do envio de arquivo: enviando (barra), enviado, não enviado */
.status-envio{margin-top:12px;padding:10px 14px;border-radius:12px;border:1px solid var(--linha);font-size:0.9rem}
.status-envio.enviando{background:var(--mata-claro);border-color:var(--mata);color:var(--mata-escuro)}
.status-envio.ok{background:var(--verde-claro);border-color:var(--verde);color:var(--verde)}
.status-envio.erro{background:var(--alerta-claro);border-color:var(--alerta);color:var(--alerta)}
/* aviso forte dentro de um bloco (ex.: falta o contrato assinado pela prefeitura) */
.aviso-contrato{margin:4px 0 12px;padding:10px 14px;border-radius:12px;border:1px solid var(--alerta);background:var(--alerta-claro);color:var(--alerta);font-size:0.9rem}
.barra-envio{margin-top:8px;height:8px;border-radius:99px;background:var(--branco);overflow:hidden}
.barra-envio span{display:block;height:100%;background:var(--mata);transition:width .2s}
.aviso.limite{background:var(--alerta-claro);border-color:var(--alerta);color:var(--alerta)}

/* ---------- Perfil / admin ---------- */
.dados-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px 18px;margin-top:8px}
.dado p:first-child{font-size:0.72rem;color:var(--tinta-suave)}
.dado p:last-child{font-size:0.92rem;font-weight:500;word-break:break-word}

.numeros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0;background:var(--branco);border:1px solid var(--linha);border-radius:18px;overflow:hidden;margin-bottom:20px;
}
.numero{background:var(--branco);padding:20px}
/* cada card desenha a própria divisória (por dentro, à esquerda e em cima), e a grade é branca:
   assim a sobra de uma linha incompleta fica branca, e não um bloco colorido. O -1px empurra a
   divisória da primeira coluna e da primeira linha para baixo da borda de fora. */
.numero{box-shadow:inset 1px 0 0 var(--linha),inset 0 1px 0 var(--linha);margin:-1px 0 0 -1px}
.numero .valor{font-family:'Baloo 2';font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-0.02em}
#periodoCustom input[type=date]{padding:8px 10px;border:1px solid var(--linha);border-radius:10px;font-family:'Nunito',sans-serif;font-size:0.85rem;color:var(--tinta);background:var(--branco)}
.titulo-cards{font-size:1.02rem;margin:4px 0 10px}
.numero{position:relative}
.numero .periodo{font-size:0.7rem;color:var(--tinta-suave);margin-bottom:2px}
.valor-mensal{font-family:'Baloo 2';font-weight:800;font-size:1.6rem;color:var(--verde);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px;line-height:1.15}
.numero.monetario .valor{font-size:1.35rem}
.kits-linha{font-size:0.85rem;font-weight:700;color:var(--tinta);display:flex;align-items:center;gap:5px;margin-bottom:2px}
.kits-linha .seta svg{width:15px;height:15px}
.numero.ativa .kits-linha{color:var(--sobre-cor)}
.prop-venda{background:var(--verde-claro)}
.prop-recusada{background:var(--vermelho-claro)}
.btn-check{color:var(--verde);border-color:var(--verde-borda);font-weight:800;padding:7px 11px}
.btn-x{color:var(--vermelho);border-color:var(--vermelho-borda);font-weight:800;padding:7px 11px}
.btn-check.ativo{background:#1D8A4E;color:#fff;border-color:#1D8A4E}
.btn-x.ativo{background:#C0392B;color:#fff;border-color:#C0392B}
.btn-lixo{display:inline-flex;align-items:center;padding:8px 9px}
.valor-mensal.vencida{color:var(--alerta)}
.numero.ativa .valor-mensal.vencida{color:#FFD3A8}
.numero.ativa .valor-mensal{color:#8FF0B8}
.numero.ativa .seta.sobe{color:#8FF0B8}
.numero.ativa .seta.desce{color:#FFC0B5}
.numero.ativa .periodo{color:#E9D9F2}
.seta{display:inline-flex;align-items:center}
.seta.sobe{color:var(--verde)}
.seta.desce{color:var(--vermelho)}
.ico-xls{position:absolute;top:10px;right:10px;width:20px;height:20px;cursor:pointer;opacity:.85}
.ico-xls:hover{opacity:1}
.numero.clicavel{cursor:pointer}
.numero.clicavel:hover{background:var(--mata-claro)}
.numero.ativa,.numero.ativa:hover{background:var(--mata)}
.numero.ativa .valor,.numero.ativa .rotulo{color:var(--sobre-cor)}
.numero .rotulo{font-size:0.82rem;color:var(--tinta-suave);margin-top:6px}

.linha-reserva{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--linha);flex-wrap:wrap;
}
.linha-reserva:last-child{border-bottom:none}
.linha-reserva .mun{font-weight:600;font-size:0.95rem}
.linha-reserva .quem{font-size:0.85rem;color:var(--tinta-suave)}
.uf-tag{font-weight:700;color:var(--mata-escuro);margin-right:6px;font-size:0.8rem}

.cartao-vendedor{
  background:var(--branco);border:1px solid var(--linha);border-radius:16px;
  padding:16px 18px;margin-bottom:12px;
}
.cartao-vendedor .topo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.cartao-vendedor .topo strong{font-size:1.02rem}

/* ---------- Janela de senha ---------- */
.dialogo{
  width:min(520px,calc(100vw - 32px));margin:auto;
  background:var(--branco);color:var(--tinta);border:1px solid var(--linha);border-radius:18px;
  padding:22px 24px;
}
.dialogo::backdrop{background:var(--fundo-escurecido)}
.dialogo h2{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.dialogo .sub{font-size:0.85rem;color:var(--tinta-suave);margin-bottom:14px}
.dialogo .campos{grid-template-columns:1fr}
.dialogo-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

/* ---------- Modos: vendedor x administrador ---------- */
.so-admin{display:none!important}
body.modo-admin .abas button.so-admin{display:inline-block!important}
/* Pesquisar municípios: de quem tem rede.municipios (a equipe e, desde a v0.4.4, o distribuidor Nível 4 e 5).
   Só esconde: a funcionalidade desligada continua escondendo para todos (js/comum/comum.js) */
body:not(.pode-pesquisar) .so-pesquisa{display:none!important}
body.modo-admin .so-vendedor{display:none!important}
body.deslogado nav{display:none!important}
/* a aba de proposta muda conforme quem está olhando */
body.modo-admin .so-vendedor-prop{display:none!important}
body:not(.modo-admin) .so-admin-prop{display:none!important}
/* exportar para Excel é de quem administra */
body:not(.pode-exportar) .ico-xls{display:none!important}
/* o que só aparece para quem decide (enviar material, por exemplo) */
body.pode-decidir .pode-decidir-so{display:block!important}
/* o formulário de material é de quem pode disponibilizar material */
body.pode-material .pode-material-so{display:block!important}

/* quem escreve mas não aprova */
.papel-escreve{
  font-size:0.72rem;font-weight:700;color:var(--mata-escuro);background:var(--mata-claro);
  border-radius:999px;padding:3px 9px;margin-left:6px;white-space:nowrap;
}

/* ---------- Toast ---------- */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--tinta);color:var(--branco);
  padding:10px 20px;border-radius:14px;font-size:0.9rem;
  opacity:0;pointer-events:none;transition:opacity 0.25s;z-index:50;max-width:90vw;text-align:center;
}
#toast.mostrar{opacity:1}
@media (prefers-reduced-motion:reduce){
  #toast{transition:none}
  .carimbo{transform:none}
}
@media(max-width:560px){.numero .valor{font-size:2rem}}

/* ---------- Permissões de um papel (cargo ou perfil) ----------
   Uma lista que se lê de cima para baixo: o que a permissão é, o que ela libera,
   o que vale hoje, e o campo para mudar. Mesmo desenho das outras listas do
   portal (nome forte, explicação em cinza, situação em etiqueta). */
.permissoes{border-top:1px solid var(--linha);padding:14px 18px 18px}
.permissoes-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:0.9rem;color:var(--tinta);margin-bottom:6px}
.permissoes-area{margin-top:14px;border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.permissoes-area-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  background:var(--papel);padding:8px 14px;font-weight:700;font-size:0.88rem;color:var(--mata-escuro)}
.permissoes-area-topo .quem{font-weight:400}
.permissao{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--linha)}
.permissao:first-of-type{border-top:none}
.permissao-texto{display:flex;flex-direction:column;gap:2px;min-width:min(240px,100%);flex:1}
.permissao-nome{font-weight:700;font-size:0.92rem;color:var(--tinta)}
.permissao-porque{font-style:italic}
/* O campo é a resposta: verde para permitido, cinza para não permitido. Quem passa
   os olhos na coluna já lê o que aquele papel pode, sem ler linha por linha. */
.permissao-campo{font-size:0.85rem;padding:6px 10px;border-radius:10px;min-width:160px;font-weight:700}
.permissao-campo.sim{background:var(--mata-claro);color:var(--mata-escuro);border-color:var(--mata)}
.permissao-campo.nao{background:var(--branco);color:var(--tinta)}
.permissao-voltar{border:none;background:none;padding:0;margin-left:8px;font:inherit;font-size:0.76rem;
  font-weight:600;color:var(--mata-escuro);text-decoration:underline;cursor:pointer}
/* o que foi decidido na mão fica marcado: é o que difere do padrão */
.permissao.ajustada{background:var(--alerta-claro)}
/* a etiqueta não pode sumir no fundo da própria linha */
.permissao.ajustada .badge-mail.aviso{background:var(--branco)}
.permissoes>.acao{margin-top:16px}
@media(max-width:720px){
  .permissao{align-items:flex-start}
  .permissao-campo{width:100%}
}

/* Resumo da Venda (Administração): tabelas do relatório e o "Não informado" */
.tabela-resumo-caixa{overflow-x:auto;margin:6px 0 14px}
.tabela-resumo{width:100%;border-collapse:collapse;font-size:0.82rem}
.tabela-resumo th{text-align:left;font-weight:700;color:var(--tinta-suave);border-bottom:2px solid var(--linha);padding:6px 8px;white-space:nowrap}
.tabela-resumo td{border-bottom:1px solid var(--linha);padding:6px 8px;vertical-align:top}
.campos-resumo{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:4px 14px;font-size:0.9rem;margin:6px 0 10px}
.campos-resumo dt{color:var(--tinta-suave)}
.campos-resumo dd{margin:0}
.nao-informado{color:var(--tinta-suave);font-style:italic}
/* a linha do tempo do Resumo da Venda: um dia por grupo, cada acontecimento numa bolinha da linha */
.linha-do-tempo,.linha-do-tempo ol{list-style:none;margin:0;padding:0}
.linha-do-tempo{border-left:2px solid var(--linha);margin:10px 0 4px 6px}
.ldt-dia{padding:0 0 6px 18px}
.ldt-data{display:inline-block;font-weight:700;font-size:0.85rem;color:var(--tinta);margin:2px 0 4px;position:relative}
.ldt-data::before{content:"";position:absolute;left:-25px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--mata)}
.ldt-dia,.ldt-evento{min-width:0}
.ldt-evento{border:1px solid var(--linha);border-radius:10px;padding:8px 12px;margin:0 0 8px;font-size:0.9rem;overflow-wrap:anywhere}
.indicadores-resumo{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:8px 0 4px}
.indicadores-resumo div{border:1px solid var(--linha);border-radius:10px;padding:10px 12px}
.indicadores-resumo .rot{display:block;font-size:0.78rem;color:var(--tinta-suave)}
.indicadores-resumo .val{display:block;font-weight:700;margin-top:2px}
@media(max-width:640px){.campos-resumo{grid-template-columns:1fr}.campos-resumo dt{margin-top:6px}}

/* Envio de arquivo: o <input type="file"> fica dentro de um <label class="acao"> e escondido.
   Com [hidden] ele saía do teclado; assim continua invisível, mas recebe o foco (Tab) e o
   rótulo mostra onde ele está. */
label > input[type="file"][hidden]{display:block !important;position:absolute;width:1px;height:1px;
  opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
label:has(> input[type="file"]){position:relative}
label:focus-within{outline:3px solid var(--mata);outline-offset:2px}
[role="button"][data-clique]:focus-visible{outline:3px solid var(--mata);outline-offset:2px}

/* Celular: os campos e as grades não estouram a largura em telas de 320-360px, e o iPhone não
   dá zoom ao tocar num campo (ele dá quando a letra é menor que 16px). */
@media (max-width:480px){
  main, header, nav{padding-left:12px;padding-right:12px}
  .bloco{padding:14px}
  input, select, textarea{font-size:16px}
}

/* Textos coloridos de situação (venda concretizada, aguardando, cancelada), nos dois temas */
.texto-verde{color:var(--verde)}
.texto-amarelo{color:var(--amarelo)}
.texto-vermelho{color:var(--vermelho)}

/* ---------- O botão do tema (js/comum/tema.js) ---------- */
.botao-tema{font-size:1rem;line-height:1;padding:7px 10px}
.botao-tema.solto{position:fixed;right:16px;bottom:16px;z-index:50;box-shadow:0 4px 14px rgba(0,0,0,.18)}
/* o que é papel continua papel: arquivos e imagens abertos na tela ficam sobre fundo branco */
:root[data-tema="escuro"] iframe,:root[data-tema="escuro"] .fundo-papel{background:#fff}

/* O prazo dos cadastros EAD na Tecnologia (js/tecnologia/cadastros-ead.js) */
.prazo-ead{display:inline-block;font-size:0.82rem;padding:3px 10px;border-radius:999px;white-space:nowrap}
.prazo-ead.folga{background:var(--verde-claro);color:var(--verde)}
.prazo-ead.perto{background:var(--alerta-claro);color:var(--alerta)}
.prazo-ead.vencido{background:var(--vermelho-claro);color:var(--vermelho)}

/* A planilha EAD vista no navegador (Tecnologia): larga, com rolagem, cabeçalho fixo */
.dialogo.dialogo-planilha{width:min(1200px,96vw);max-width:none}
.tabela-planilha{max-height:70vh;overflow:auto;border:1px solid var(--linha);border-radius:10px}
.tabela-planilha table{border-collapse:collapse;font-size:0.82rem;min-width:100%}
.tabela-planilha th,.tabela-planilha td{border-bottom:1px solid var(--linha);padding:5px 9px;text-align:left;white-space:nowrap}
.tabela-planilha thead th{position:sticky;top:0;background:var(--mata-claro);color:var(--mata-escuro);font-weight:700}
.tabela-planilha td.num-linha{color:var(--tinta-suave);text-align:right}

/* A prévia do contrato gerado do modelo (Candidatos → Lista de candidatos → Gerar contrato): o texto
   preenchido, com os dados do cadastro em destaque (js/administracao/distribuidores-docs.js) */
.previa-contrato{max-height:60vh;overflow:auto;border:1px solid var(--linha);border-radius:12px;padding:16px 20px;
  background:var(--branco);font-size:.9rem;line-height:1.55;text-align:justify}
.previa-contrato p{margin:0 0 10px}
.previa-contrato mark{background:var(--mata-claro);color:var(--tinta);padding:0 2px;border-radius:3px}