/* Identidade AMG — tema escuro do Gestor Financeiro (spec Aquisição §1). */
@font-face { font-family: "InterAMG"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "InterAMG"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "InterAMG"; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "InterAMG"; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --fundo: #070F1D;
  --superficie: #101D33;
  --superficie2: #0D1830;
  --borda: #1E2E4D;
  --vazio: #2A3A5C;
  --texto: #F2F6FF;
  --texto2: #8A97B5;
  --discreto: #5E6B8C;
  --lateral: #071120;
  --acao: #12C4E8;
  --acao-texto: #04121F;
  --destaque: #12C4E8;
  --feito: #2EE08F;
  --atrasado: #FF6B7A;
  --aviso: #F2B94B;
  /* visto: traço arredondado já centrado no viewBox, usado como máscara */
  --icone-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E");
  --largura-lateral: 264px;
  --raio: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: "SF Pro Display", "InterAMG", -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; color: var(--texto);
  background: radial-gradient(900px 500px at 15% -10%, rgba(18, 196, 232, .10), transparent 60%), var(--fundo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
a { color: var(--acao); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- casca ---------- */
#lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--largura-lateral);
  background: var(--lateral); color: var(--texto); border-right: 1px solid var(--borda); display: flex; flex-direction: column;
  padding: 20px 14px 14px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 6px 24px; }
.marca img { width: 32px; height: 32px; object-fit: contain; }
.marca b { display: block; font-size: 17px; letter-spacing: -.02em; }
.marca small { display: block; font-size: 8px; letter-spacing: .1em; color: var(--destaque); font-weight: 600; margin-top: 3px; white-space: nowrap; }
#menu { display: flex; flex-direction: column; gap: 2px; }
#menu a { color: var(--texto2); padding: 9px 12px; border-radius: 8px; font-weight: 500; }
#menu a:hover { color: var(--texto); background: rgba(18, 196, 232, .07); }
#menu a.ativo { color: var(--texto); background: rgba(18, 196, 232, .14); box-shadow: inset 3px 0 0 var(--destaque); font-weight: 600; }
.sair { margin-top: auto; background: none; border: 1px solid var(--borda); color: var(--texto2); border-radius: 8px; padding: 8px; cursor: pointer; }
.sair:hover { color: var(--texto); }
#conteudo { margin-left: var(--largura-lateral); padding: 24px 28px 48px; min-width: 0; position: relative; }
/* troca de tela: a nova entra de uma vez, com fade curto; a barra só aparece se demorar */
.tela.entrando { animation: entrar-tela .18s ease-out backwards; }
@keyframes entrar-tela { from { opacity: 0; transform: translateY(6px); } }
#conteudo.carregando::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acao), transparent) no-repeat; background-size: 40% 100%;
  animation: carregando 1s linear infinite; }
@keyframes carregando { from { background-position: -40% 0; } to { background-position: 140% 0; } }

@media (max-width: 760px) {
  #lateral { position: static; width: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .marca { padding: 0 8px 0 0; }
  .marca small { display: none; }
  #menu { flex-direction: row; flex-wrap: wrap; }
  #menu a { padding: 6px 10px; }
  .sair { margin-top: 0; margin-left: auto; padding: 6px 10px; }
  #conteudo { margin-left: 0; padding: 16px; }
}

/* ---------- peças comuns ---------- */
h1 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 16px; }
h2 { font-size: 15px; margin: 24px 0 10px; }
.sub { color: var(--texto2); font-size: 12px; }
.vazio { color: var(--texto2); padding: 24px 0; }
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.barra .espaco { flex: 1; }
.botao { background: linear-gradient(180deg, #5FE0F3, #12C4E8); color: var(--acao-texto); border: 1px solid var(--acao); border-radius: 8px; padding: 7px 14px; font-weight: 600; cursor: pointer; }
.botao:disabled { opacity: .5; cursor: default; }
.botao.sec { background: var(--superficie2); color: var(--texto); border-color: var(--borda); }
.botao.perigo { background: var(--superficie2); color: var(--atrasado); border-color: var(--borda); }
.botao.pequeno { padding: 3px 9px; font-size: 12px; font-weight: 500; }
input[type=text], input[type=password], input[type=date], input[type=month], input[type=number], input:not([type]), select, textarea {
  background: var(--superficie2); border: 1px solid var(--borda); border-radius: 8px; padding: 7px 10px; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(18, 196, 232, .35); border-color: var(--acao); }
textarea { width: 100%; resize: vertical; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto2); }
.erro { color: var(--atrasado); font-size: 12px; }
.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.tabela th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto2); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 8px 12px; border-bottom: 1px solid var(--borda); height: 36px; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: rgba(18, 196, 232, .06); }
.apagado { opacity: .55; }
.etiqueta { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--borda); color: var(--texto2); margin-left: 6px; }

.abas { display: flex; flex-wrap: wrap; gap: 6px; }
.aba { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto2); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.aba.ativa { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); font-weight: 600; }

/* toasts e camada */
#avisos { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); max-width: 360px; }
.toast.erro { background: var(--atrasado); border-color: var(--atrasado); color: var(--acao-texto); }
.camada { position: fixed; inset: 0; background: rgba(4, 10, 20, .72); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; }
.camada .caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; width: min(960px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.camada .caixa header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.camada .caixa header b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camada iframe { border: 0; width: 100%; height: 75vh; }
.camada img { max-width: 100%; max-height: 75vh; object-fit: contain; margin: auto; display: block; }


/* ---------- empresas ---------- */
.bloco { margin-bottom: 14px; }
.lista-tarefas { padding: 4px 16px; }
.tarefa-linha { padding: 10px 0; border-bottom: 1px solid var(--borda); }
.tarefa-linha:last-child { border-bottom: 0; }
.tarefa-nome { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); font-weight: 500; cursor: pointer; }
.tarefa-detalhes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 8px 0 2px 24px; }
.linha-check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.zona-envio { border: 1.5px dashed var(--vazio); border-radius: var(--raio); padding: 18px; text-align: center; color: var(--texto2); background: var(--superficie); cursor: pointer; }
.zona-envio.sobre, .zona-envio:hover { border-color: var(--acao); color: var(--acao); }
.anotacao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; margin-top: 8px; }
.anotacao-texto { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- cadastros ---------- */
.tabela-tipos td { vertical-align: top; }
.tabela-tipos input.dia { width: 64px; }
.tabela-lista { max-width: 640px; }
.tabela-lista input[type=text] { width: 100%; }
.tabela-lista input.dia { width: 80px; }
.janela { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--texto2); font-size: 12px; }
.feriados { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.lista-feriados { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; }
.lista-feriados b { font-weight: 600; margin-right: 4px; }

/* ---------- grade de tarefas ---------- */
.topo-grade { gap: 14px; }
.seletor-ano { display: flex; align-items: center; gap: 4px; color: var(--texto2); }
.seletor-ano button { background: none; border: 1px solid var(--borda); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; color: var(--texto2); }
.seletor-ano b { color: var(--texto); min-width: 40px; text-align: center; }
/* a grade rola dentro da própria caixa: a página não cresce com o número de empresas (Tarefas e Financeiro) */
.grade-caixa { overflow: auto; max-height: max(260px, calc(100dvh - 180px)); overscroll-behavior-x: contain;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.grade-tabela thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--borda); }
.grade-tabela td.empresa { position: sticky; left: 0; z-index: 1; background: var(--superficie); }
.grade-tabela thead th.empresa { left: 0; z-index: 3; }
.grade-tabela tr.listinha td { position: static; }
.grade-tabela { border-collapse: collapse; width: 100%; min-width: 720px; }
.grade-tabela th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto2); font-weight: 600; padding: 9px 4px; border-bottom: 1px solid var(--borda); text-align: center; background: var(--superficie2); }
.grade-tabela th.mes-atual { color: var(--acao); box-shadow: inset 0 -2px 0 var(--acao); }
.grade-tabela th.mes { cursor: pointer; }
.grade-tabela th.mes:hover { color: var(--acao); }
.grade-tabela td { border-bottom: 1px solid var(--borda); text-align: center; padding: 6px 4px; height: 38px; }
.grade-tabela tr:last-child td { border-bottom: 0; }
.grade-tabela .empresa { text-align: left; padding-left: 14px; min-width: 200px; }
.grade-tabela td.empresa a { color: var(--texto); font-weight: 600; }
.grade-tabela td.empresa small { display: block; color: var(--texto2); font-size: 11px; margin-top: 1px; }
.grade-tabela td.e-fora { background: rgba(255, 255, 255, .03); }
.grade-tabela tr.dispensada td.empresa a { color: var(--texto2); }
.grade-tabela .nome-linha { display: flex; align-items: center; gap: 8px; }
.etiqueta-status { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; font-size: 11px; font-weight: 700; text-align: center; color: var(--acao-texto); }
.etiqueta-status.vermelha { background: var(--atrasado); }
.etiqueta-status.laranja { background: var(--aviso); }
.etiqueta-status.cinza { background: var(--vazio); color: var(--texto); }
.sem-pendencias { background: none; border: 0; padding: 0; font-size: 11px; color: var(--discreto); cursor: pointer; }
.sem-pendencias:hover { color: var(--texto2); }
.ver-listinha { display: block; background: none; border: 0; padding: 2px 0 0; font-size: 11px; color: var(--acao); cursor: pointer; }
.grade-tabela tr.listinha td { text-align: left; height: auto; padding: 10px 14px 12px; background: var(--superficie2); }
.grade-tabela tr.listinha .itens-acomp { gap: 4px; margin-bottom: 4px; }
.grade-tabela tr.listinha .item-acomp { padding: 6px 10px; }

.bolinha { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0; vertical-align: middle; background: transparent; }
button.bolinha { cursor: pointer; }
button.bolinha:disabled { cursor: default; }
button.bolinha:not(:disabled):hover { transform: scale(1.25); }
.bolinha.e-feito { background: var(--feito); }
.bolinha.e-primeira_entrega { background: var(--feito); box-shadow: 0 0 0 3px rgba(46, 224, 143, .35); }
.bolinha.e-sem_movimento { border: 2.5px solid var(--feito); }
.bolinha.e-a_fazer { border: 2.5px solid var(--vazio); }
.bolinha.e-atrasado { background: var(--atrasado); }
.bolinha.e-dispensada { width: 20px; height: 2px; border-radius: 0; background: var(--discreto); }

.legenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--texto2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.menu-celula { position: absolute; z-index: 30; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); padding: 4px; display: flex; flex-direction: column; min-width: 150px; }
.menu-celula > button { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 7px 10px; border-radius: 6px; cursor: pointer; text-align: left; }
.menu-celula > button:hover { background: var(--superficie2); }

/* ---------- importação ---------- */
.passos { margin: 0 0 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.tabela tr.duplicado td { background: rgba(255, 107, 122, .12); }
.tabela input.dia { width: 64px; }

/* ---------- sino e pop-up de avisos ---------- */
.sino { margin-left: auto; position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--superficie2); border: 1px solid var(--borda); cursor: pointer; }
.sino:hover { border-color: var(--acao); }
.sino svg { width: 20px; height: 20px; }
.sino .contador { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--atrasado); color: var(--acao-texto); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.camada .caixa.caixa-avisos { width: min(460px, 100%); }
.caixa-avisos header { justify-content: space-between; padding: 14px 16px !important; }
.caixa-avisos header b { flex: none !important; }
.linhas-avisos { list-style: none; margin: 0; padding: 6px 0; overflow: auto; }
.linhas-avisos a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 16px; color: var(--texto); }
.linhas-avisos a:hover { background: var(--superficie2); }
.linhas-avisos .texto { overflow-wrap: anywhere; }
.linhas-avisos .detalhe { font-size: 12px; color: var(--texto2); white-space: nowrap; }
.etiqueta-aviso { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; color: var(--acao-texto); white-space: nowrap; background: var(--vazio); }
.etiqueta-aviso.e-atrasado { background: var(--atrasado); }
.etiqueta-aviso.e-hoje { background: var(--acao); }
.etiqueta-aviso.e-comecar { background: var(--feito); }
.etiqueta-aviso.e-avisar, .etiqueta-aviso.e-vence { background: var(--aviso); }
.etiqueta-aviso.e-cobrar { background: var(--texto); }
.nada-hoje { color: var(--texto2); padding: 18px 16px; }
.caixa-avisos footer { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--borda); }
.caixa-avisos footer .espaco { flex: 1; }
.caixa-avisos footer .reabrir { display: inline-flex; align-items: center; gap: 5px; }
.mini-sino { width: 12px; height: 12px; background: var(--texto2); -webkit-mask: url("img/sino.svg") center / contain no-repeat; mask: url("img/sino.svg") center / contain no-repeat; }
@media (max-width: 760px) { .caixa-avisos footer .reabrir { display: none; } }

/* ---------- pendências e validades ---------- */
.itens-acomp { display: flex; flex-direction: column; gap: 6px; }
.item-acomp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; }
.item-acomp.em-contagem { border-color: rgba(242, 185, 75, .45); }
.item-acomp .obs { overflow-wrap: anywhere; }
.item-acomp select { padding: 3px 8px; font-size: 12px; }
.item-acomp .acoes-item { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.item-acomp .etiqueta { margin-left: 0; }
.etiqueta.urgente { border-color: var(--atrasado); color: var(--atrasado); }
.vencido { color: var(--atrasado); font-weight: 600; font-size: 12px; }
.contando { color: var(--aviso); font-weight: 600; font-size: 12px; }
.form-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.form-linha .linha-check { padding: 0; }
.vazio-curto { color: var(--texto2); padding: 6px 0; font-size: 13px; }
.itens-acomp.concluidas { margin-top: 8px; opacity: .8; }
.form-linha + .link-discreto { display: inline-block; margin-top: 10px; }

/* ---------- aquisição ---------- */
.aquisicao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: 16px; align-items: start; }
.lead { display: block; color: inherit; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px 14px 12px; margin-bottom: 12px; }
.lead:hover { border-color: var(--vazio); }
.lead.sel { outline: 2px solid var(--acao); box-shadow: 0 0 28px rgba(18, 196, 232, .14); }
.lead .topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 4px 14px; }
.lead .topo b { font-size: 14.5px; }
.lead .desde { margin-left: auto; font-size: 11px; color: var(--texto2); }
.situacao { font-size: 12px; font-weight: 600; color: var(--feito); }
.situacao.nutricao { color: var(--aviso); }
.situacao.nao_fechou { color: var(--atrasado); }
.situacao.cliente { color: var(--acao); }

/* bolinha da etapa: 28px; o visto é o ícone --icone-visto, centralizado, e entra com um "pop" */
.ponto { position: relative; z-index: 1; display: block; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--superficie); border: 2.5px solid var(--vazio); }
.ponto.ok { background: var(--feito); border-color: var(--feito); box-shadow: 0 0 12px rgba(46, 224, 143, .35);
  animation: aparecer .35s ease-out var(--d, 0s) backwards; }
.ponto.ok::after { content: ""; position: absolute; inset: 0; margin: auto; width: 62%; height: 62%; background: var(--acao-texto);
  -webkit-mask: var(--icone-visto) center / contain no-repeat; mask: var(--icone-visto) center / contain no-repeat;
  animation: marcar .4s cubic-bezier(.3, 1.7, .5, 1) calc(var(--d, 0s) + .2s) backwards; }
.ponto.agora { border-color: var(--feito); animation: pulsar 1.8s infinite; }
.ponto.nutri { border-color: var(--aviso); background: #2A2414; animation: pulsar-ambar 1.8s infinite; }
.ponto.agora::after, .ponto.nutri::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--feito); }
.ponto.nutri::after { background: var(--aviso); }
.ponto.parou { border-color: var(--atrasado); }
@keyframes aparecer { from { opacity: 0; transform: scale(.6); } }
@keyframes marcar { from { transform: scale(0); } }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(46, 224, 143, .55); } 70% { box-shadow: 0 0 0 10px rgba(46, 224, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 224, 143, 0); } }
@keyframes pulsar-ambar { 0% { box-shadow: 0 0 0 0 rgba(242, 185, 75, .55); } 70% { box-shadow: 0 0 0 10px rgba(242, 185, 75, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 185, 75, 0); } }

/* trilho horizontal: 10 colunas iguais, bolinha centralizada sobre o nome da etapa */
.trilho { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.trilho .linha, .trilho .cheia { position: absolute; top: 12.5px; left: 5%; height: 3px; border-radius: 2px; }
.trilho .linha { right: 5%; background: var(--vazio); }
.trilho .cheia { width: var(--ate); background: var(--feito); box-shadow: 0 0 8px rgba(46, 224, 143, .5); animation: encher 1.4s ease-out backwards; }
@keyframes encher { from { width: var(--de, 0%); } }
.trilho .col { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.trilho .col span { font-size: 9.5px; color: var(--texto2); text-align: center; line-height: 1.25; hyphens: auto; -webkit-hyphens: auto; }
.trilho .col span.feito { color: var(--feito); font-weight: 600; }
.trilho .col span.atual { color: var(--texto); font-weight: 700; }
.trilho .col span.atual.amb { color: var(--aviso); }

/* ficha: rastreio vertical; cada etapa concluída desenha o trecho até a próxima */
.ficha-aq { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.ficha-aq h2 { font-size: 14px; }
.passos-v { margin-top: 4px; }
.passo { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.passo::before { content: ""; position: absolute; left: 12.5px; top: 14px; bottom: -14px; width: 3px; background: var(--vazio); border-radius: 2px; }
.passo.ok::after { content: ""; position: absolute; left: 12.5px; top: 14px; width: 3px; height: 100%; background: var(--feito); border-radius: 2px;
  box-shadow: 0 0 8px rgba(46, 224, 143, .5); animation: encher-v .3s ease-out calc(var(--d, 0s) + .15s) backwards; }
.passo:last-child::before, .passo:last-child::after { display: none; }
@keyframes encher-v { from { height: 0; } }
.passo .txt { padding-top: 4px; min-width: 0; flex: 1; }
.passo b { display: block; font-size: 12.5px; }
.passo small { display: block; color: var(--texto2); font-size: 11px; }
.passo.ok b { color: var(--feito); }
.passo .dica { margin-top: 2px; }
.data-editavel { background: none; border: 0; padding: 0; color: var(--texto2); font-size: 11px; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.data-editavel:disabled { cursor: default; text-decoration: none; }
.data-entrada { padding: 2px 30px 2px 6px !important; font-size: 12px; width: 120px !important; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.botao.amb { background: var(--aviso); border-color: var(--aviso); color: var(--acao-texto); }
.link-discreto { background: none; border: 0; padding: 0; color: var(--texto2); font-size: 11px; text-decoration: underline; cursor: pointer; }
.desvio { margin-top: 8px; border: 1px dashed var(--aviso); border-radius: 8px; padding: 6px 9px; font-size: 11px; color: var(--aviso); background: rgba(242, 185, 75, .08); }
.desvio .link-discreto { color: var(--aviso); }
.campos-aq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campos-aq input { width: 100%; }
.ficha-aq .tabela td.sub { display: none; }
.linha-etapa { margin-bottom: 8px; }
.caixa-form { width: min(560px, 100%) !important; }
.caixa-form .corpo { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.aviso-caixa { border: 1px dashed var(--aviso); border-radius: 8px; padding: 10px 12px; color: var(--aviso); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.aviso-caixa .linha-check { color: var(--texto); padding: 0; }
.lista-caixas { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.lista-caixas .linha-check { padding: 0; color: var(--texto); }

/* depois de uma ação, só o que mudou anima */
.sem-animacao .ponto.ok:not(.novo), .sem-animacao .ponto.ok:not(.novo)::after,
.sem-animacao .lead:not(.mudou) .cheia, .sem-animacao .passo.ok:not(.novo)::after { animation: none; }

@media (max-width: 1100px) {
  .aquisicao { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .trilho .col span:not(.atual) { visibility: hidden; }
  .campos-aq { grid-template-columns: 1fr; }
}

/* ---------- financeiro ---------- */
.totais { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.totais > div { flex: 1; min-width: 150px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; }
.totais b { display: block; font-size: 19px; margin-top: 2px; }
.grade-financeiro { min-width: 980px; }
.grade-financeiro .num { text-align: right; white-space: nowrap; padding-right: 12px; }
.grade-tabela.grade-financeiro td.empresa small.saiu { color: var(--aviso); }
.tabela-avulsos .num { text-align: right; white-space: nowrap; }
.rolagem-x { overflow-x: auto; margin-top: 10px; border-radius: var(--raio); }
.tabela-avulsos td { white-space: nowrap; }
.valor-aberto { color: var(--atrasado); font-weight: 700; }
.menu-celula .menu-data { padding: 6px 10px; }
.lista-valores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.lista-valores .link-discreto { margin-left: 8px; }

/* ---------- painel da competência (aba Tarefas) ---------- */
.painel-comp { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 18px; }
.painel-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.painel-topo b { font-size: 14px; }
.painel-topo .sub { margin-left: auto; }
.painel-topo .seta { background: none; border: 1px solid var(--borda); border-radius: 6px; width: 28px; height: 28px; color: var(--texto2); cursor: pointer; }
.painel-topo .seta:hover { color: var(--acao); border-color: var(--acao); }
.painel-corpo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rosca { width: 124px; height: 124px; flex: none; }
.rosca .fatia { animation: desenhar-fatia .3s ease-out var(--d, 0s) backwards; }
@keyframes desenhar-fatia { from { stroke-dasharray: 0 251.33; } }
.rosca .total { fill: var(--texto); font-size: 20px; font-weight: 700; }
.rosca .rotulo { fill: var(--texto2); font-size: 8px; }
.legenda-painel { display: flex; flex-direction: column; gap: 8px; font-size: 13px; flex: 1; min-width: 180px; max-width: 260px; }
.legenda-painel div { display: flex; align-items: center; gap: 8px; }
.legenda-painel i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legenda-painel b { margin-left: auto; font-variant-numeric: tabular-nums; }
.alertas-painel { display: flex; gap: 10px; flex: 1; min-width: 240px; }
.alerta-painel { flex: 1; border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--texto2);
  animation: subir-alerta .3s ease-out var(--d, 0s) backwards; }
.alerta-painel b { display: block; font-size: 26px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.alerta-painel.atraso { background: rgba(255, 107, 122, .10); border: 1px solid rgba(255, 107, 122, .35); }
.alerta-painel.atraso b { color: var(--atrasado); }
.alerta-painel.vencendo { background: rgba(242, 185, 75, .10); border: 1px solid rgba(242, 185, 75, .35); }
.alerta-painel.vencendo b { color: var(--aviso); }
@keyframes subir-alerta { from { opacity: 0; transform: translateY(8px); } }
.painel-comp.sem-animacao * { animation: none !important; }
@media (max-width: 760px) {
  .painel-corpo { flex-direction: column; align-items: stretch; gap: 14px; }
  .rosca { align-self: center; }
  .legenda-painel { max-width: none; }
}
/* painel clicável: a classificação escolhida lista as empresas embaixo e filtra a grade */
.legenda-painel .item-legenda { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: inherit;
  font: inherit; padding: 4px 6px; border-radius: 6px; cursor: pointer; text-align: left; }
.legenda-painel .item-legenda:hover, .legenda-painel .item-legenda.ativo { background: rgba(18, 196, 232, .12); }
button.alerta-painel { font: inherit; text-align: left; cursor: pointer; }
.alerta-painel.atraso.ativo { box-shadow: 0 0 0 2px var(--atrasado); }
.alerta-painel.vencendo.ativo { box-shadow: 0 0 0 2px var(--aviso); }
.rosca .fatia { cursor: pointer; }
.lista-painel:empty { display: none; }
.lista-painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px;
  margin: -8px 0 18px; animation: subir-alerta .2s ease-out backwards; }
.lista-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lista-topo .espaco { flex: 1; }
.itens-lista { display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.item-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--borda); }
.item-lista > a { font-weight: 600; color: var(--texto); min-width: 160px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--superficie2); border: 1px solid var(--borda); border-radius: 14px;
  padding: 3px 10px; font-size: 12px; color: var(--texto); cursor: pointer; }
.chip:hover { border-color: var(--acao); }
.chip small { color: var(--texto2); font-size: 11px; }
.chip.atrasado { border-color: rgba(255, 107, 122, .5); }
.chip.atrasado small { color: var(--atrasado); }
.chip.vencendo { border-color: rgba(242, 185, 75, .5); }
.chip.vencendo small { color: var(--aviso); }
.filtros-painel { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros-painel button { background: var(--superficie2); border: 1px solid var(--borda); border-radius: 16px; padding: 4px 12px;
  font-size: 12px; color: var(--texto2); cursor: pointer; }
.filtros-painel button b { color: var(--texto); }
.filtros-painel button.ativa { background: rgba(18, 196, 232, .14); border-color: var(--acao); color: var(--texto); }
.grade-tabela tr.destaque td { animation: destacar-linha 1.8s ease-out; }
@keyframes destacar-linha { from { background-color: rgba(18, 196, 232, .28); } }
.lista-caixas-empresas { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; }
.lista-caixas-empresas .linha-check { padding: 6px 4px; color: var(--texto); }

/* bolinha que acabou de ser marcada (Tarefas e Financeiro) */
.bolinha.acendeu { animation: acender .35s ease-out backwards; }
@keyframes acender { from { transform: scale(.55); } 60% { transform: scale(1.15); } }

/* ---------- calendário da casa (o mesmo do Gestor Financeiro) ---------- */
.datacampo { position: relative; display: inline-flex; align-items: center; }
.datacampo input.dt { flex: 1; min-width: 0; width: 140px; padding-right: 34px; font-variant-numeric: tabular-nums; }
.datacampo .calbt { position: absolute; right: 4px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  background: transparent; border: 0; color: var(--texto2); border-radius: 7px; cursor: pointer; }
.datacampo .calbt:hover { background: rgba(255, 255, 255, .07); color: var(--acao); }
.datacampo .calbt svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal { display: none; position: fixed; z-index: 80; width: min(266px, calc(100vw - 32px)); background: #0E1A2F;
  border: 1px solid var(--borda); border-radius: 14px; padding: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  animation: sobe .16s ease-out backwards; }
.cal.on { display: block; }
.cal .topo { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal .topo b { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; letter-spacing: -.015em; text-transform: capitalize; }
.cal .nav { width: 26px; height: 26px; padding: 0; background: transparent; border: 1px solid var(--borda); color: var(--texto2);
  font-size: 13px; line-height: 1; border-radius: 8px; cursor: pointer; }
.cal .nav:hover { color: var(--acao); border-color: var(--acao); background: rgba(18, 196, 232, .08); }
.cal .sem, .cal .dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal .sem span { text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--discreto); padding-bottom: 5px; }
.cal .dias button { height: 31px; padding: 0; background: transparent; border: 0; color: var(--texto); font-size: 12.5px; font-weight: 500;
  border-radius: 9px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal .dias button:hover { background: rgba(255, 255, 255, .08); }
.cal .dias button.fora { color: var(--discreto); font-weight: 400; }
.cal .dias button.hoje { box-shadow: inset 0 0 0 1px var(--acao); color: var(--acao); }
.cal .dias button.sel { background: linear-gradient(180deg, #5FE0F3, var(--acao)); color: var(--acao-texto); font-weight: 700; }
.cal .pe { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda); }
.cal .pe button { flex: 1; }
@keyframes sobe { from { opacity: 0; transform: translateY(6px); } }
.mescampo { display: inline-flex; align-items: center; gap: 4px; }
.mescampo input { width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.mescampo .mes-anterior { order: -1; }
.mescampo button { background: none; border: 1px solid var(--borda); border-radius: 8px; width: 28px; height: 32px; color: var(--texto2); cursor: pointer; flex: none; }
.mescampo button:hover { color: var(--acao); border-color: var(--acao); }
.datacampo.invalido input, .mescampo.invalido input { border-color: var(--atrasado); }
.erro-campo { display: block; margin-top: 4px; }

/* ---------- responsivo: celular, tablet e computador ---------- */
/* caixas e pop-ups entram com uma subida curta */
.camada .caixa { animation: subir-caixa .2s ease-out backwards; }
@keyframes subir-caixa { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1100px) {
  :root { --largura-lateral: 216px; }
}
@media (max-width: 760px) {
  /* campos com 16 px: o iPhone não dá zoom sozinho ao tocar */
  input, select, textarea { font-size: 16px; }
  .item-acomp select, input.data-entrada { font-size: 16px !important; }
  .mescampo input { width: 108px; }
  /* menu: marca, sino e Sair numa linha; os itens numa faixa que rola de lado, sem quebrar */
  #lateral { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca sair" "menu menu";
    align-items: center; gap: 6px 8px; padding: 8px 12px; }
  #lateral .marca { grid-area: marca; padding: 0; }
  #lateral .sair { grid-area: sair; margin: 0; }
  #menu { grid-area: menu; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  #menu::-webkit-scrollbar { display: none; }
  #menu a { white-space: nowrap; padding: 7px 12px; }
  #menu a.ativo { box-shadow: inset 0 -2px 0 var(--destaque); }
  /* caixas ocupam a largura toda e rolam por dentro; o cabeçalho com Cancelar fica fixo */
  .camada { padding: 12px; }
  .camada .caixa, .caixa-form { width: 100% !important; max-height: calc(100dvh - 24px); }
  .camada .caixa .corpo, .linhas-avisos { overflow: auto; }
  /* formulários de uma linha quebram sem cortar campos */
  .form-linha > input, .form-linha > select, .form-linha > .datacampo, .form-linha > .mescampo { flex: 1 1 140px; min-width: 0; }
  /* tabelas largas rolam dentro delas mesmas; a página nunca rola de lado */
  .tabela { display: block; overflow-x: auto; }
  /* a coluna presa dos nomes fica estreita para sobrar lugar para os meses; o nome quebra em linhas */
  .grade-tabela .empresa { min-width: 0; width: 128px; max-width: 128px; padding-left: 10px; }
  .grade-tabela td.empresa { white-space: normal; overflow-wrap: anywhere; }
  .grade-tabela .nome-linha { flex-wrap: wrap; gap: 4px; }
  .grade-tabela .sem-pendencias { display: none; }
  .topo-grade { gap: 8px; }
}
/* toque: área de pelo menos 40 px nas bolinhas, sem mudar o desenho, e botões pequenos maiores */
@media (pointer: coarse) {
  button.bolinha { position: relative; }
  button.bolinha::after { content: ""; position: absolute; inset: -10px; }
  .botao.pequeno, .seletor-ano button, .painel-topo .seta, .mescampo button, .cal .nav { min-height: 40px; min-width: 40px; }
  .datacampo .calbt { width: 40px; height: 40px; right: 0; }
  .datacampo input.dt { padding-right: 44px; }
  .aba, .ver-listinha, .sem-pendencias, .data-editavel, .chip, .filtros-painel button { min-height: 40px; }
  .cal .dias button { height: 40px; }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}