:root {
  --verde: #2f4f3a;
  --verde-claro: #3d6b4c;
  --areia: #f6f5f1;
  --borda: #dcdfd8;
  --texto: #1c211d;
  --texto-fraco: #6a726c;
  --branco: #fff;
  --azul: #1d6fa5;
  --vermelho: #b42318;
  --ambar: #b25e09;
  --sombra: 0 1px 2px rgba(16, 24, 20, .06), 0 4px 14px rgba(16, 24, 20, .05);
  --raio: 8px;
}

* { box-sizing: border-box; }

/* Regras de display nas classes abaixo venceriam o padrao do atributo hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--areia);
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------- topo ------------------------------- */
header.topo {
  background: var(--verde);
  color: #eef2ec;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.topo h1 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: .2px; }
.topo .ug { font-size: 12px; opacity: .82; }
.topo .espaco { flex: 1; }
.abas { display: flex; gap: 4px; }
.abas button {
  background: transparent; border: 0; color: #cfdac9; padding: 7px 14px;
  border-radius: 6px; cursor: pointer;
}
.abas button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.abas button.ativa { background: var(--branco); color: var(--verde); font-weight: 600; }
.mestre {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px; padding: 4px 9px;
}
.mestre label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #cfdac9;
}
.mestre select {
  background: transparent; border: 0; color: #fff; font-weight: 600; font-size: 13px;
  padding: 2px 4px; cursor: pointer;
}
.mestre select option { color: var(--texto); }
.mestre.ativo { background: var(--branco); border-color: var(--branco); }
.mestre.ativo label { color: var(--texto-fraco); }
.mestre.ativo select { color: var(--verde); }

.usuario-topo {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; border-radius: 6px; padding: 5px 9px; width: 150px; font-size: 12px;
}
.usuario-topo::placeholder { color: #cfdac9; }

main { padding: 18px 20px 60px; max-width: 1720px; margin: 0 auto; }
.aba-conteudo { display: none; }
.aba-conteudo.ativa { display: block; }

/* ------------------------------ cartoes ------------------------------ */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cartao {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 13px 15px; box-shadow: var(--sombra);
}
.cartao .rotulo { font-size: 11.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .5px; }
.cartao .numero { font-size: 22px; font-weight: 600; margin-top: 5px; letter-spacing: -.4px; }
.cartao .nota { font-size: 12px; color: var(--texto-fraco); margin-top: 3px; }
.cartao.clicavel { cursor: pointer; }
.cartao.clicavel:hover { border-color: var(--verde-claro); }
.cartao.alerta .numero { color: var(--vermelho); }
.cartao.atencao .numero { color: var(--ambar); }

.painel {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); margin-bottom: 16px;
}
.painel > h2 {
  font-size: 13px; margin: 0; padding: 11px 15px; border-bottom: 1px solid var(--borda);
  text-transform: uppercase; letter-spacing: .5px; color: var(--texto-fraco); font-weight: 600;
}
.painel > .corpo { padding: 14px 15px; }
.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1050px) { .colunas { grid-template-columns: 1fr; } }

/* ------------------------------ filtros ------------------------------ */
.filtros {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px 14px; margin-bottom: 14px; box-shadow: var(--sombra);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
}
.campo { display: flex; flex-direction: column; gap: 3px; }
.campo label { font-size: 11px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .4px; }
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--borda); border-radius: 6px; padding: 6px 8px; background: var(--branco);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid #cfe0d4; border-color: var(--verde-claro); }
.campo.largo input { width: 280px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--borda); background: var(--branco); border-radius: 999px;
  padding: 5px 11px; cursor: pointer; font-size: 12.5px; color: var(--texto-fraco);
}
.chip:hover { border-color: var(--verde-claro); }
.chip.ativo { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }

.btn {
  border: 1px solid var(--borda); background: var(--branco); border-radius: 6px;
  padding: 7px 13px; cursor: pointer;
}
.btn:hover { border-color: var(--verde-claro); }
.btn.primario { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.btn.primario:hover { background: var(--verde-claro); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.pequeno { padding: 4px 9px; font-size: 12.5px; }

/* ------------------------------ tabela ------------------------------ */
.tabela-caixa {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: auto; box-shadow: var(--sombra); max-height: calc(100vh - 300px);
}
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; background: #eff1ec; border-bottom: 1px solid var(--borda);
  text-align: left; padding: 8px 10px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-fraco); white-space: nowrap; z-index: 2;
}
tbody td { border-bottom: 1px solid #eef0ea; padding: 7px 10px; vertical-align: middle; }
tbody tr:hover { background: #f7faf6; cursor: pointer; }
tbody tr.selecionada { background: #eaf3ec; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.truncar { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; color: #fff; white-space: nowrap;
}
.tag.vazia { background: #94a3a0; }
.marca { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.marca.atraso { background: #fdecea; color: var(--vermelho); }
.marca.hoje { background: #fff4e5; color: var(--ambar); }
.marca.ok { background: #e7f5ec; color: #196c3a; }
.barra { height: 5px; background: #e8ebe6; border-radius: 3px; overflow: hidden; min-width: 54px; }
.barra > i { display: block; height: 100%; background: var(--verde-claro); }

.rodape-tabela { display: flex; align-items: center; gap: 12px; padding: 10px 2px; flex-wrap: wrap; }
.rodape-tabela .info { color: var(--texto-fraco); font-size: 12.5px; }

.barra-lote {
  position: sticky; bottom: 0; background: var(--verde); color: #fff; border-radius: var(--raio);
  padding: 10px 14px; display: none; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.barra-lote.visivel { display: flex; }
.barra-lote select, .barra-lote input { border-radius: 6px; border: 0; padding: 5px 8px; }

/* ------------------------------ gaveta ------------------------------ */
.fundo {
  position: fixed; inset: 0; background: rgba(20, 28, 22, .38); display: none; z-index: 40;
}
.fundo.aberto { display: block; }
.gaveta {
  position: fixed; top: 0; right: 0; height: 100%; width: min(920px, 96vw); background: var(--areia);
  box-shadow: -8px 0 30px rgba(0, 0, 0, .18); z-index: 50; transform: translateX(100%);
  transition: transform .18s ease; display: flex; flex-direction: column;
}
.gaveta.aberta { transform: none; }
.gaveta > header {
  background: var(--branco); border-bottom: 1px solid var(--borda); padding: 13px 18px;
  display: flex; align-items: flex-start; gap: 14px;
}
.gaveta > header h2 { margin: 0 0 3px; font-size: 17px; }
.gaveta > header .sub { color: var(--texto-fraco); font-size: 12.5px; }
.gaveta .fechar { border: 0; background: transparent; font-size: 22px; cursor: pointer; color: var(--texto-fraco); line-height: 1; }
.gaveta .conteudo { overflow: auto; padding: 16px 18px 40px; flex: 1; }
.gaveta-abas { display: flex; gap: 3px; padding: 0 18px; background: var(--branco); border-bottom: 1px solid var(--borda); }
.gaveta-abas button {
  border: 0; background: transparent; padding: 9px 12px; cursor: pointer; font-size: 13px;
  color: var(--texto-fraco); border-bottom: 2px solid transparent;
}
.gaveta-abas button.ativa { color: var(--verde); font-weight: 600; border-bottom-color: var(--verde); }

.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.grade-form .campo input, .grade-form .campo select, .grade-form .campo textarea { width: 100%; }
.grade-form .largura-total { grid-column: 1 / -1; }
.acoes-form { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.salvo { color: #196c3a; font-size: 13px; }

dl.dados { display: grid; grid-template-columns: 190px 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
dl.dados dt { color: var(--texto-fraco); }
dl.dados dd { margin: 0; }

.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { padding: 8px 0 8px 16px; border-left: 2px solid var(--borda); position: relative; }
.linha-tempo li::before {
  content: ''; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--verde-claro);
}
.linha-tempo li.sistema::before { background: #94a3a0; }
.linha-tempo .quando { font-size: 11.5px; color: var(--texto-fraco); }

.vazio { padding: 26px; text-align: center; color: var(--texto-fraco); }

/* ---------------------------- graficos ---------------------------- */
.barras { display: flex; flex-direction: column; gap: 7px; }
.barras .linha { display: grid; grid-template-columns: 200px 1fr 120px; gap: 10px; align-items: center; font-size: 12.5px; }
.barras .trilho { background: #eef0ea; border-radius: 4px; height: 16px; overflow: hidden; }
.barras .trilho > i { display: block; height: 100%; background: var(--verde-claro); }
.barras .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.progresso { background: #e8ebe6; border-radius: 5px; height: 9px; overflow: hidden; margin: 8px 0; }
.progresso > i { display: block; height: 100%; background: var(--verde-claro); transition: width .3s; }

.aviso {
  background: #fff8e6; border: 1px solid #f0dca8; border-radius: var(--raio);
  padding: 10px 13px; margin-bottom: 14px; font-size: 13px;
}
.aviso.erro { background: #fdecea; border-color: #f3c0ba; }

.notificacao {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--texto); color: #fff; padding: 10px 18px; border-radius: 7px;
  z-index: 100; box-shadow: var(--sombra); font-size: 13px;
}
.notificacao.erro { background: var(--vermelho); }

/* ===================== componentes acrescentados ===================== */

/* --- selecao multipla --- */
.multi { position: relative; }
.multi > button {
  border: 1px solid var(--borda); background: var(--branco); border-radius: 6px;
  padding: 6px 26px 6px 8px; cursor: pointer; text-align: left; min-width: 150px;
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative;
}
.multi > button::after {
  content: '▾'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--texto-fraco);
}
.multi > button.tem-selecao { border-color: var(--verde); font-weight: 600; }
.multi .painel-multi {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 320px; max-width: 460px;
  max-height: 320px; overflow: auto; background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 8px; display: none;
}
.multi.aberto .painel-multi { display: block; }
.multi .painel-multi label {
  display: flex; gap: 7px; align-items: flex-start; padding: 4px 5px; border-radius: 5px;
  cursor: pointer; font-size: 12.8px; line-height: 1.3;
}
.multi .painel-multi label:hover { background: #f2f5f0; }
.multi .painel-multi .acoes-multi {
  display: flex; gap: 8px; border-bottom: 1px solid var(--borda); padding-bottom: 6px; margin-bottom: 6px;
}
.multi .painel-multi .acoes-multi button {
  border: 0; background: transparent; color: var(--azul); cursor: pointer; font-size: 12px; padding: 2px 4px;
}
.multi .busca-multi { width: 100%; margin-bottom: 6px; border: 1px solid var(--borda); border-radius: 5px; padding: 5px 7px; }

/* --- cabecalho ordenavel --- */
thead th.ord { cursor: pointer; user-select: none; white-space: nowrap; }
thead th.ord:hover { color: var(--verde); }
thead th.ord .seta { opacity: .35; margin-left: 3px; font-size: 10px; }
thead th.ord.ativa { color: var(--verde); }
thead th.ord.ativa .seta { opacity: 1; }

/* --- agrupamento --- */
tr.grupo > td {
  background: #eaefe7; font-weight: 600; border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda); font-size: 12.5px; padding: 6px 10px;
}
tr.grupo .resumo-grupo { float: right; font-weight: 500; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

/* --- filtros avancados --- */
.filtros-avancados { display: none; width: 100%; border-top: 1px dashed var(--borda); margin-top: 4px; padding-top: 10px; gap: 10px; flex-wrap: wrap; }
.filtros-avancados.aberto { display: flex; }
.linha-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; width: 100%; }

/* --- visoes salvas --- */
.visoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.visoes .rotulo-visoes { font-size: 11.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .4px; }
.visao-chip { display: inline-flex; align-items: center; gap: 5px; }
.visao-chip .x { color: var(--texto-fraco); font-weight: 700; padding: 0 2px; }
.visao-chip .x:hover { color: var(--vermelho); }

/* --- funil de execucao --- */
.funil { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: #e8ebe6; }
.funil > span { display: block; height: 100%; }
.funil-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 9px; font-size: 12.5px; }
.funil-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

/* --- barras com duas series --- */
.barras .trilho.duplo { position: relative; }
.barras .trilho.duplo > i.secundaria { position: absolute; left: 0; top: 0; height: 100%; background: var(--verde); opacity: .95; }
.barras .trilho > i.clara { background: #a8c3ae; }

.marca.pf { background: #eef2ff; color: #3730a3; }
.marca.pj { background: #ecfdf5; color: #065f46; }
.marca.aviso { background: #fff4e5; color: var(--ambar); }
.marca.neutra { background: #eef0ea; color: var(--texto-fraco); }

.legenda-tabela { font-size: 12px; color: var(--texto-fraco); margin: 6px 2px 0; }

/* ===================== refinamento visual ===================== */

:root {
  --raio-g: 10px;
  --sombra-alta: 0 10px 30px rgba(16, 24, 20, .13), 0 2px 8px rgba(16, 24, 20, .07);
  --foco: 0 0 0 3px rgba(61, 107, 76, .22);
}

body { -webkit-font-smoothing: antialiased; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.chip:focus-visible, th.ord:focus-visible {
  outline: none; box-shadow: var(--foco); border-radius: 6px;
}

.painel, .filtros, .cartao, .tabela-caixa { border-radius: var(--raio-g); }

/* --- barra de ferramentas da tabela --- */
.ferramentas {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.ferramentas .contagem { font-size: 13px; color: var(--texto-fraco); }
.ferramentas .contagem strong { color: var(--texto); font-size: 14px; }
.ferramentas .espacador { flex: 1; }

.btn-icone {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda); background: var(--branco); border-radius: 7px;
  padding: 6px 11px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.btn-icone:hover { border-color: var(--verde-claro); background: #f7faf6; }
.btn-icone.ativo { border-color: var(--verde); color: var(--verde); font-weight: 600; }
.btn-icone .conta {
  background: var(--verde); color: #fff; border-radius: 999px;
  font-size: 11px; padding: 0 6px; font-weight: 600; line-height: 17px;
}

/* --- seletor de colunas --- */
.caixa-suspensa { position: relative; }
.suspenso {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: 330px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta); padding: 10px; display: none;
}
.caixa-suspensa.aberto .suspenso { display: block; }
.suspenso h4 {
  margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-fraco); font-weight: 600;
}
.lista-colunas { max-height: 340px; overflow: auto; margin: 0 -4px; }
.lista-colunas .grupo-col {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-fraco);
  padding: 8px 6px 3px; border-top: 1px solid var(--borda); margin-top: 4px;
}
.lista-colunas .grupo-col:first-child { border-top: 0; margin-top: 0; }
.item-coluna {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 13px;
}
.item-coluna:hover { background: #f2f5f0; }
.item-coluna label { flex: 1; cursor: pointer; display: flex; gap: 7px; align-items: center; }
.item-coluna .mover { display: flex; gap: 2px; opacity: 0; }
.item-coluna:hover .mover { opacity: 1; }
.item-coluna .mover button {
  border: 0; background: transparent; cursor: pointer; color: var(--texto-fraco);
  padding: 0 3px; font-size: 11px; line-height: 1;
}
.item-coluna .mover button:hover { color: var(--verde); }
.item-coluna.fixa label { color: var(--texto-fraco); }
.acoes-suspenso {
  display: flex; gap: 8px; border-top: 1px solid var(--borda); margin-top: 8px; padding-top: 8px;
}
.acoes-suspenso button {
  border: 0; background: transparent; color: var(--azul); cursor: pointer; font-size: 12.5px; padding: 2px 4px;
}

/* --- filtros ativos --- */
.filtros-ativos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filtro-ativo {
  display: inline-flex; align-items: center; gap: 6px; background: #eaf3ec;
  border: 1px solid #cfe0d4; color: var(--verde); border-radius: 999px;
  padding: 3px 6px 3px 11px; font-size: 12.5px; font-weight: 500;
}
.filtro-ativo b { font-weight: 600; }
.filtro-ativo button {
  border: 0; background: transparent; cursor: pointer; color: var(--verde);
  font-size: 15px; line-height: 1; padding: 0 3px; border-radius: 50%;
}
.filtro-ativo button:hover { background: rgba(47, 79, 58, .14); }
.limpar-tudo { border: 0; background: transparent; color: var(--azul); cursor: pointer; font-size: 12.5px; }

/* --- tabela: densidade e coluna fixa --- */
table.compacta tbody td { padding: 3px 8px; font-size: 12.5px; }
table.compacta thead th { padding: 6px 8px; }
table.compacta .barra { height: 4px; }

thead th.fixa, tbody td.fixa {
  position: sticky; left: 0; z-index: 3; background: var(--branco);
}
thead th.fixa { z-index: 5; background: #eff1ec; }
thead th.fixa-2, tbody td.fixa-2 { left: 28px; }
tbody tr:hover td.fixa { background: #f7faf6; }
tbody tr.selecionada td.fixa { background: #eaf3ec; }
tbody td.fixa-2 { box-shadow: 1px 0 0 var(--borda); }
thead th.fixa-2 { box-shadow: 1px 0 0 var(--borda); }

tbody tr { transition: background .08s; }

/* --- carregando --- */
.tabela-caixa { position: relative; }
.tabela-caixa.carregando::after {
  content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); z-index: 8;
}
.tabela-caixa.carregando::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 9;
  background: linear-gradient(90deg, transparent, var(--verde-claro), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; animation: desliza 1s infinite linear;
}
@keyframes desliza { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* --- estado vazio --- */
.vazio-rico { padding: 46px 24px; text-align: center; color: var(--texto-fraco); }
.vazio-rico .simbolo { font-size: 30px; opacity: .35; }
.vazio-rico h3 { margin: 10px 0 5px; font-size: 15px; color: var(--texto); font-weight: 600; }
.vazio-rico p { margin: 0 0 14px; font-size: 13px; }

/* --- gaveta: cabecalho e abas fixos --- */
.gaveta > header { position: sticky; top: 0; z-index: 3; }
.gaveta-abas { position: sticky; top: 0; z-index: 2; }
.secao-form {
  grid-column: 1 / -1; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-fraco); font-weight: 600; border-bottom: 1px solid var(--borda);
  padding-bottom: 5px; margin: 6px 0 0;
}
.secao-form:first-child { margin-top: 0; }

/* --- teclado --- */
kbd {
  background: #eef0ea; border: 1px solid var(--borda); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: inherit; color: var(--texto-fraco);
}

/* ===================== painel ===================== */

.bloco { margin-bottom: 22px; }
.bloco > .titulo-bloco {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; flex-wrap: wrap;
}
.bloco > .titulo-bloco h2 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: -.1px; }
.bloco > .titulo-bloco .apoio { font-size: 12.5px; color: var(--texto-fraco); }
.bloco > .titulo-bloco .espacador { flex: 1; }

/* --- resumo executivo --- */
.resumo {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra); padding: 18px 20px;
}
.resumo-topo { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.numero-chave .rotulo {
  font-size: 11.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .5px;
}
.numero-chave .valor {
  font-size: 27px; font-weight: 600; letter-spacing: -.7px; margin-top: 3px; line-height: 1.1;
}
.numero-chave .apoio { font-size: 12.5px; color: var(--texto-fraco); margin-top: 3px; }
.numero-chave.destaque .valor { color: var(--verde); }
.resumo-divisor { width: 1px; background: var(--borda); align-self: stretch; }

.funil { height: 30px; border-radius: 7px; }
.funil > span { transition: width .4s ease; }
.funil-legenda { font-size: 12.5px; }

/* --- pendencias --- */
.lista-pendencias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 8px;
}
.pendencia {
  display: flex; align-items: center; gap: 11px; background: var(--branco);
  border: 1px solid var(--borda); border-left: 3px solid var(--borda);
  border-radius: 8px; padding: 9px 12px; cursor: pointer; text-align: left; width: 100%;
  font: inherit; color: inherit;
}
.pendencia:hover { border-color: var(--verde-claro); border-left-color: var(--verde-claro); background: #f7faf6; }
.pendencia .qtd { font-size: 20px; font-weight: 600; min-width: 42px; letter-spacing: -.5px; }
.pendencia .txt { flex: 1; line-height: 1.25; }
.pendencia .txt b { display: block; font-size: 13px; font-weight: 600; }
.pendencia .txt span { font-size: 11.5px; color: var(--texto-fraco); }
.pendencia.grave { border-left-color: var(--vermelho); }
.pendencia.grave .qtd { color: var(--vermelho); }
.pendencia.media { border-left-color: var(--ambar); }
.pendencia.media .qtd { color: var(--ambar); }
.pendencia.zerada { opacity: .55; }
.pendencia.zerada .qtd { color: var(--texto-fraco); }

/* --- grafico de colunas --- */
.colunas-grafico { width: 100%; height: 190px; display: block; }
.colunas-grafico .grade { stroke: #e8ebe6; stroke-width: 1; }
.colunas-grafico .rotulo-eixo { font-size: 9.5px; fill: var(--texto-fraco); }
.colunas-grafico .col-fundo { fill: #dfe6dd; }
.colunas-grafico .col-frente { fill: var(--verde-claro); }
.colunas-grafico g.coluna:hover .col-fundo { fill: #cdd8ca; }
.colunas-grafico g.coluna:hover .col-frente { fill: var(--verde); }
.legenda-grafico { display: flex; gap: 16px; font-size: 12px; color: var(--texto-fraco); margin-top: 8px; }
.legenda-grafico i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

/* --- barras clicaveis --- */
.barras .linha.clicavel { cursor: pointer; border-radius: 5px; padding: 1px 4px; margin: 0 -4px; }
.barras .linha.clicavel:hover { background: #f2f5f0; }
.barras .linha.clicavel:hover .trilho > i.clara { background: #97b8a0; }
.barras .participacao { font-size: 11px; color: var(--texto-fraco); min-width: 34px; text-align: right; }
.barras .linha { grid-template-columns: 200px 1fr 118px 38px; }

/* --- seletor de paineis --- */
.suspenso.paineis { width: 265px; }

/* ===================== autenticacao ===================== */
.tela-login {
  position: fixed; inset: 0; z-index: 200; background: var(--verde);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.tela-login.visivel { display: flex; }
.cartao-login {
  background: var(--branco); border-radius: 12px; box-shadow: var(--sombra-alta);
  padding: 30px 32px; width: 100%; max-width: 380px;
}
.cartao-login h1 { margin: 0 0 3px; font-size: 19px; }
.cartao-login .sub { color: var(--texto-fraco); font-size: 13px; margin-bottom: 22px; }
.cartao-login .campo { margin-bottom: 14px; }
.cartao-login .campo input { width: 100%; padding: 9px 11px; font-size: 14px; }
.cartao-login .btn { width: 100%; padding: 10px; font-size: 14px; }
.erro-login {
  background: #fdecea; border: 1px solid #f3c0ba; color: var(--vermelho);
  border-radius: 6px; padding: 9px 11px; font-size: 13px; margin-bottom: 14px; display: none;
}
.erro-login.visivel { display: block; }

.usuario-topo-info {
  display: flex; align-items: center; gap: 9px; color: #eef2ec; font-size: 13px;
}
.usuario-topo-info .quem { line-height: 1.2; text-align: right; }
.usuario-topo-info .quem b { display: block; font-weight: 600; }
.usuario-topo-info .quem span { font-size: 11px; opacity: .8; }
.usuario-topo-info button {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 12px;
}
.usuario-topo-info button:hover { background: rgba(255, 255, 255, .22); }
.marca-perfil {
  background: rgba(255, 255, 255, .18); border-radius: 4px; padding: 1px 6px;
  font-size: 10px; letter-spacing: .4px; text-transform: uppercase;
}

.tabela-usuarios td, .tabela-usuarios th { vertical-align: middle; }
.linha-inativa { opacity: .5; }
.senha-gerada {
  background: #f0f7f2; border: 1px solid #cfe0d4; border-radius: 7px;
  padding: 12px 14px; margin: 12px 0; font-size: 13px;
}
.senha-gerada code {
  display: inline-block; background: var(--branco); border: 1px solid var(--borda);
  border-radius: 5px; padding: 4px 10px; font-size: 15px; font-weight: 600;
  letter-spacing: 1px; margin: 6px 0;
}
.somente-leitura { display: none !important; }

/* ===================== modal ===================== */
.fundo-modal {
  position: fixed; inset: 0; background: rgba(20, 28, 22, .45); z-index: 150;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.fundo-modal.aberto { display: flex; }
.modal {
  background: var(--branco); border-radius: 12px; box-shadow: var(--sombra-alta);
  width: 100%; max-width: 520px; max-height: 92vh; display: flex; flex-direction: column;
}
.modal > header {
  padding: 16px 20px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 12px;
}
.modal > header h3 { margin: 0; font-size: 16px; flex: 1; }
.modal > header .fechar { border: 0; background: transparent; font-size: 22px; cursor: pointer; color: var(--texto-fraco); }
.modal > .corpo { padding: 18px 20px; overflow: auto; }
.modal > footer {
  padding: 14px 20px; border-top: 1px solid var(--borda);
  display: flex; gap: 10px; align-items: center; background: #fafbf9; border-radius: 0 0 12px 12px;
}
.modal > footer .espacador { flex: 1; }

.campo-form { margin-bottom: 15px; }
.campo-form label { display: block; font-size: 12px; color: var(--texto-fraco); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .4px; }
.campo-form input, .campo-form select { width: 100%; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 6px; font-size: 14px; }
.campo-form .dica { font-size: 11.5px; color: var(--texto-fraco); margin-top: 4px; }
.campo-form.erro input, .campo-form.erro select { border-color: var(--vermelho); }
.campo-form .msg-erro { color: var(--vermelho); font-size: 12px; margin-top: 4px; display: none; }
.campo-form.erro .msg-erro { display: block; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.escolha-perfil { display: flex; flex-direction: column; gap: 7px; }
.escolha-perfil label {
  display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--borda);
  border-radius: 8px; padding: 9px 11px; cursor: pointer; text-transform: none;
  letter-spacing: 0; font-size: 13px; color: var(--texto); margin: 0;
}
.escolha-perfil label:hover { border-color: var(--verde-claro); }
.escolha-perfil label.marcado { border-color: var(--verde); background: #f2f7f3; }
.escolha-perfil b { display: block; font-size: 13px; }
.escolha-perfil span { font-size: 11.5px; color: var(--texto-fraco); }

.linha-senha { display: flex; gap: 8px; }
.linha-senha input { flex: 1; font-family: "Cascadia Mono", Consolas, monospace; }

/* ===================== usuarios ===================== */
.cartoes-usuarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 16px; }
.inicial {
  width: 30px; height: 30px; border-radius: 50%; background: var(--verde-claro); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
  font-weight: 600; flex-shrink: 0;
}
.inicial.inativo { background: #b6bdb6; }
.celula-usuario { display: flex; align-items: center; gap: 10px; }
.celula-usuario .dados b { display: block; font-size: 13px; }
.celula-usuario .dados span { font-size: 11.5px; color: var(--texto-fraco); font-family: "Cascadia Mono", Consolas, monospace; }

.selo-perfil { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.selo-perfil.admin { background: #ede9fe; color: #5b21b6; }
.selo-perfil.operador { background: #e0f2fe; color: #075985; }
.selo-perfil.consulta { background: #f1f5f9; color: #475569; }
.ponto-online { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; margin-right: 5px; }

/* ===================== trilha de alteracoes ===================== */
.painel.largo { grid-column: 1 / -1; }
.painel h2 select.mini {
  font-size: 11.5px; padding: 1px 4px; margin-left: 8px; border-radius: 5px;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
}

/* A linha do sistema fica mais discreta: o que interessa e o lancamento humano. */
#tabelaAlteracoes tr.linha-sistema td { color: var(--texto-fraco); }
#tabelaAlteracoes .valor-antigo { color: var(--texto-fraco); text-decoration: line-through; }
.vazio-inline { color: var(--texto-fraco); font-style: italic; }

.paginacao { display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: 13px; }

.lista-atualizacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-atualizacoes li { padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 12.5px; }
.lista-atualizacoes li:last-child { border-bottom: 0; }
.lista-atualizacoes .topo { display: flex; justify-content: space-between; gap: 10px; }
.lista-atualizacoes .topo a { font-weight: 600; }
.lista-atualizacoes .quando, .lista-atualizacoes .quem { color: var(--texto-fraco); font-size: 11.5px; }
.lista-atualizacoes .mudanca { margin: 2px 0 1px; }
.lista-atualizacoes li.sistema .mudanca { color: var(--texto-fraco); }

.dica-campo { font-size: 11px; color: var(--texto-fraco); margin-top: 2px; display: block; }
.campo input[readonly] { background: #f2f4f0; color: var(--texto-fraco); }

/* ===================== carteira, natureza e comentarios ===================== */

/* Sub-abas da pagina de empenhos: todos / meus */
.sub-abas { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--borda); }
.sub-abas button {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 7px 12px; font-size: 13.5px; font-weight: 600; color: var(--texto-fraco);
  display: inline-flex; align-items: center; gap: 6px;
}
.sub-abas button:hover { color: var(--texto); }
.sub-abas button.ativa { color: var(--verde); border-bottom-color: var(--verde); }
.sub-abas .conta {
  background: var(--verde); color: #fff; border-radius: 999px;
  font-size: 11px; padding: 0 6px; font-weight: 600; line-height: 17px;
}
.sub-abas button:not(.ativa) .conta { background: #c3ccc0; }
.sub-abas .conta:empty { display: none; }
.sub-abas .apoio { margin-left: 8px; font-size: 12px; color: var(--texto-fraco); }

/* Natureza da despesa: numero, entao fonte de tabela */
.natureza { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .3px; }

/* Cartoes de lista do painel */
.topo-cartao { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.topo-cartao .numero { font-size: 24px; font-weight: 700; line-height: 1; }
.topo-cartao .apoio { font-size: 12px; color: var(--texto-fraco); }
.lista-cartao { list-style: none; margin: 0; padding: 0; }
.lista-cartao li {
  display: grid; grid-template-columns: 104px 1fr; gap: 2px 8px;
  padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 12.5px;
}
.lista-cartao li:last-child { border-bottom: 0; }
.lista-cartao a { font-weight: 600; }
.lista-cartao .detalhe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lista-cartao .favorecido { grid-column: 2; color: var(--texto-fraco); font-size: 11.5px; }

/* Comentarios do empenho */
.novo-comentario, .comentario { display: flex; gap: 10px; padding: 12px 0; }
.novo-comentario { border-bottom: 1px solid var(--borda); padding-top: 0; }
.novo-comentario .inicial, .comentario .inicial {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--verde); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.comentario .inicial { background: #c3ccc0; color: #2f3a2c; }
.corpo-comentario { flex: 1; min-width: 0; }
.novo-comentario textarea {
  width: 100%; resize: vertical; font: inherit; padding: 8px 10px;
  border: 1px solid var(--borda); border-radius: 7px; background: var(--fundo); color: var(--texto);
}
.novo-comentario .acoes { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.novo-comentario .apoio { font-size: 11.5px; color: var(--texto-fraco); }
.comentario .topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.comentario .topo strong { font-size: 13px; }
.comentario .quando { font-size: 11.5px; color: var(--texto-fraco); }
/* O recado do fornecedor costuma vir em linhas: preserva o que foi digitado. */
.comentario .texto { font-size: 13px; line-height: 1.5; margin-top: 2px; white-space: pre-wrap; }
.comentarios .comentario + .comentario { border-top: 1px solid var(--borda); }

.gaveta-abas .conta {
  background: #c3ccc0; color: #2f3a2c; border-radius: 999px;
  font-size: 10.5px; padding: 0 5px; font-weight: 700; margin-left: 4px;
}
.gaveta-abas .conta:empty { display: none; }

/* O bloco de comentarios fecha a aba de controle, depois do formulario. */
.bloco-comentarios { margin-top: 20px; border-top: 1px solid var(--borda); padding-top: 14px; }
.bloco-comentarios .secao-form { margin-top: 0; }

.suspenso .dica-suspenso {
  margin: -4px 0 8px; font-size: 11.5px; color: var(--texto-fraco); line-height: 1.4;
}
.item-coluna .mover button[disabled] { opacity: .3; cursor: default; }

/* ===================== tabela: sinais e situacao ===================== */

/*
 * Sinal de nota sobre o dado. Circulo vazado, 13px, no cinza do texto fraco:
 * some no conjunto e aparece quando se olha a linha. A etiqueta ambar anterior
 * gritava em centenas de linhas, e aviso que grita em toda linha e ruido.
 */
.sinal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%; border: 1px solid #c3ccc0;
  font-size: 9px; font-weight: 700; font-style: italic; line-height: 1;
  color: var(--texto-fraco); cursor: help; vertical-align: 1px; user-select: none;
}
.sinal:hover { border-color: var(--ambar); color: var(--ambar); }

/* Natureza do favorecido: so a excecao aparece, e discreta. */
.sigla {
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px;
  color: var(--texto-fraco); vertical-align: 1px;
}

/* O que ninguem preencheu ainda nao precisa de cor. */
.ausente { color: #b9c2b6; }

/*
 * Etiqueta da situacao: fundo claro e texto escuro do mesmo matiz, derivados de
 * --cor pelo color-mix. Em tabela densa le muito melhor que a cor cheia com
 * texto branco. A primeira declaracao e o reserva para navegador sem color-mix.
 */
.tag-situacao {
  display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border: 1px solid transparent;
  background: #eef0ea; color: #39423a;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .tag-situacao {
    background: color-mix(in srgb, var(--cor) 13%, #fff);
    border-color: color-mix(in srgb, var(--cor) 30%, #fff);
    color: color-mix(in srgb, var(--cor) 78%, #000);
  }
}

/* Numero em tabela alinha melhor com digito de largura fixa. */
td.num, th.num, .mono { font-variant-numeric: tabular-nums; }

/* Legenda do codigo de cores, recolhida por omissao. */
.legenda-cores { margin: 10px 2px 0; font-size: 12px; color: var(--texto-fraco); }
.legenda-cores summary { cursor: pointer; user-select: none; }
.legenda-cores summary:hover { color: var(--texto); }
.legenda-cores > div { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.legenda-cores button { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; }
.legenda-cores p { margin: 0; font-size: 11.5px; }

/* ===================== contatos do fornecedor ===================== */
.bloco-contatos { margin-top: 20px; border-top: 1px solid var(--borda); padding-top: 14px; }
.bloco-contatos .secao-form { margin-top: 0; }
.lista-contatos { list-style: none; margin: 0 0 10px; padding: 0; }
.lista-contatos li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--borda);
  font-size: 12.5px;
}
.lista-contatos li:last-child { border-bottom: 0; }
.lista-contatos .meio { color: var(--texto-fraco); font-size: 11.5px; }
.lista-contatos .valor { font-weight: 600; }
.lista-contatos .pessoa { color: var(--texto-fraco); }
.lista-contatos .vazio-contatos { display: block; color: var(--texto-fraco); font-style: italic; }
.novo-contato { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.novo-contato select { width: 130px; }
.novo-contato input { flex: 1; min-width: 150px; }
.novo-contato select, .novo-contato input {
  font: inherit; padding: 5px 8px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--fundo); color: var(--texto);
}

/* ===================== secoes com cor propria ===================== */
/* Mesma linguagem visual da situacao: cor como codigo, nao como enfeite. */
.tag-secao {
  display: inline-block; max-width: 100%; padding: 1px 7px; border-radius: 5px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border: 1px solid transparent;
  background: #eef0ea; color: #39423a;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .tag-secao {
    background: color-mix(in srgb, var(--cor) 13%, #fff);
    border-color: color-mix(in srgb, var(--cor) 32%, #fff);
    color: color-mix(in srgb, var(--cor) 76%, #000);
  }
}

.lista-secoes { list-style: none; margin: 0; padding: 0; }
.lista-secoes li {
  display: grid; grid-template-columns: minmax(130px, 220px) 1fr auto auto;
  gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borda);
}
.lista-secoes li:last-child { border-bottom: 0; }
.lista-secoes .uso { font-size: 12px; color: var(--texto-fraco); }
.lista-secoes .paleta { display: flex; gap: 3px; }
.opcao-cor {
  width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12);
  cursor: pointer; padding: 0;
}
.opcao-cor.atual { outline: 2px solid var(--texto); outline-offset: 1px; }
.opcao-cor:hover { transform: scale(1.18); }

.linha-nova-secao { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.linha-nova-secao input { flex: 1; }
.amostra-cor {
  width: 22px; height: 22px; border-radius: 5px; flex: 0 0 22px;
  border: 1px solid rgba(0, 0, 0, .12);
}