/* COMPONENTES — botões, cards, badges, login. */

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.btn:hover { background: var(--fundo); }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-ico { padding: 7px; }

.btn-primary {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--texto-sobre-cor-primaria);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
}

.btn-fantasma {
  background: transparent;
  border: 1px solid transparent;
  color: var(--texto-secundario);
}
.btn-fantasma:hover { background: var(--fundo); color: var(--texto); }

.btn-perigo {
  background: var(--perigo);
  border-color: var(--perigo);
  color: #fff;
}

/* ---------- CARD ---------- */
.cd {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra-sm);
}

/* ---------- BADGE ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--raio-full);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
}

/* Selo de status de conferência (folha): verde quando fecha, laranja quando não. */
.tag-ok, .tag-alerta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tag-ok { color: var(--sucesso-escuro); }
.tag-alerta { color: var(--aviso); }

/* ---------- CONTEÚDO DE APOIO (home, leia-me) ---------- */
.prosa { max-width: 760px; }
.prosa h2 { font-size: 20px; margin: 4px 0 10px; }
.prosa p { color: var(--texto-secundario); margin: 0 0 12px; }
.prosa ul { color: var(--texto-secundario); padding-left: 20px; margin: 0 0 12px; }
.prosa li { margin-bottom: 6px; }
.prosa .destaque {
  background: var(--cor-primaria-suave);
  border-left: 3px solid var(--cor-primaria);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  color: var(--texto);
}
.prosa code {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 1px 6px;
  font-size: 13px;
}

/* ---------- GUIA / SOBRE O SISTEMA ---------- */
.guia h2 {
  color: var(--cor-primaria);
  margin-top: 30px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--cor-primaria-suave);
  scroll-margin-top: 70px;
}
.guia h3 {
  font-size: 15px;
  margin: 16px 0 4px;
  color: var(--texto);
}
.guia .guia-indice-titulo { margin-top: 24px; }
.guia .guia-toc {
  list-style: none;
  padding: 12px 14px;
  margin: 0 0 8px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  columns: 2;
  column-gap: 24px;
}
.guia .guia-toc li { margin-bottom: 6px; break-inside: avoid; }
.guia .guia-toc a { color: var(--cor-primaria); text-decoration: none; }
.guia .guia-toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .guia .guia-toc { columns: 1; } }

/* ---------- LOGIN (tela standalone) ---------- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--fundo);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 32px 28px;
}
.login-marca {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.login-marca .logo-quadro {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--cor-primaria);
  color: var(--cor-primaria);
  display: grid; place-items: center;
}
.login-marca .logo-quadro i { font-size: 24px; }
.login-marca .nome {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
}
.login-marca .sub { font-size: 12px; color: var(--texto-fraco); }

.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.campo input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  font-size: 14px;
  background: var(--branco);
  color: var(--texto);
}
.campo input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}
.login-card .btn-primary { width: 100%; justify-content: center; margin-top: 6px; }
.login-erro {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--perigo);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: var(--raio-sm);
  margin-bottom: 14px;
}
.login-dica {
  margin-top: 18px;
  font-size: 12px;
  color: var(--texto-fraco);
  text-align: center;
}

/* ---------- CAMPO GENÉRICO (input/textarea de formulário) ---------- */
.inp {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  font-size: 14px;
  background: var(--branco);
  color: var(--texto);
}
.inp:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}
.inp-sm { max-width: 140px; }

/* ---------- BARRA DE FORMULÁRIO / FILTROS (Padrao_Formulario) ----------
   Linha de campos alinhados pela base; o botão acompanha a altura de 40px
   graças ao <label>&nbsp;</label> que ocupa a mesma faixa do rótulo. */
.ra-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.ra-campo { display: flex; flex-direction: column; gap: 6px; }
.ra-campo-cresce { flex: 1; min-width: 220px; }
.form-inline { display: inline; }
.toggle-form { display: inline; }
.linha-inativa td { opacity: .5; }

/* Classificação de rubricas: marcadores de estado da verba */
.rub-alerta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aviso);
}
.rub-novo {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
}

/* Evolução do custo-empresa: gráfico de linha (SVG inline, sem lib, self-host). */
.evo-chart { width: 100%; }
.evo-chart svg { width: 100%; height: auto; display: block; }
.evo-line { fill: none; stroke: var(--cor-primaria); stroke-width: 2.5; }
.evo-dot { fill: var(--cor-primaria); }
.evo-grid, .evo-axis { stroke: var(--cor-primaria-suave); stroke-width: 1; }
.evo-lbl { fill: var(--texto-suave); font-size: 12px; }
.evo-metricas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.evo-metricas .btn.ativo {
  background: var(--cor-primaria);
  color: var(--texto-sobre-cor-primaria);
  border-color: var(--cor-primaria);
}

/* Indicadores: mini-gráficos Orçado x Realizado, um por indicador. */
.ind-graf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: 16px;
}
@media (max-width: 920px) { .ind-graf-grid { grid-template-columns: 1fr; } }
.ind-graf-card {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--surface);
  padding: var(--sp-4);
}
.ind-graf-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ind-graf-tit {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 15px;
  color: var(--texto);
}
.ind-graf-ano { font-size: 12px; color: var(--texto-suave); }
.ind-graf-leg {
  display: flex;
  gap: 16px;
  margin: 6px 0 4px;
  font-size: 12px;
  color: var(--texto-secundario);
}
.ind-sw {
  display: inline-block;
  width: 18px;
  height: 0;
  vertical-align: middle;
  margin-right: 6px;
}
.ind-sw-real { border-top: 3px solid var(--cor-primaria); }
.ind-sw-orc { border-top: 2px dashed var(--texto-fraco); }
.ind-graf-plot svg { width: 100%; height: auto; display: block; }
.ind-ln-real { fill: none; stroke: var(--cor-primaria); stroke-width: 2.5; }
.ind-ln-orc { fill: none; stroke: var(--texto-fraco); stroke-width: 2; stroke-dasharray: 5 4; }
.ind-dot-real { fill: var(--cor-primaria); }
.ind-dot-orc { fill: var(--texto-fraco); }
.ind-grid { stroke: var(--borda); stroke-width: 1; }
.ind-zero { stroke: var(--borda-forte); stroke-width: 1.3; }
.ind-lbl { fill: var(--texto-suave); font-size: 11px; }
.ra-campo > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}
.req { color: var(--perigo); margin-left: 2px; }
.ra-bar .btn { height: 40px; }

/* ---------- SELECTBUSCA (Componente_SelectBusca; nunca <select> nativo) ---------- */
.selectbusca { position: relative; }
.sb-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 40px;
  min-width: 200px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  font-size: 14px;
  cursor: pointer;
}
.sb-display .sb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-display .sb-caret { color: var(--texto-fraco); font-size: 14px; }
.sb-placeholder { color: var(--texto-fraco); }
.selectbusca.open .sb-display {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}

.sb-panel {
  position: fixed;
  z-index: 60;
  display: none;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra);
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.selectbusca.open .sb-panel { display: block; }
.sb-search {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  margin-bottom: 6px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  font-size: 13px;
  background: var(--branco);
  color: var(--texto);
}
.sb-search:focus { outline: none; border-color: var(--cor-primaria); }
.sb-opt {
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  font-size: 13.5px;
  cursor: pointer;
}
.sb-opt:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.sb-vazio {
  display: none;
  padding: 10px;
  font-size: 13px;
  color: var(--texto-fraco);
  text-align: center;
}

/* ---------- MULTIBUSCA (escolha múltipla; nunca <select> nativo) ---------- */
.multibusca { position: relative; }
.multibusca.open .sb-display {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}
.multibusca.open .mb-panel { display: block; }
.mb-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  font-size: 13.5px;
  cursor: pointer;
}
.mb-opt:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.mb-opt .mb-check { font-size: 15px; color: var(--cor-primaria); visibility: hidden; }
.mb-opt.sel .mb-check { visibility: visible; }
.mb-opt.sel { color: var(--cor-primaria-escura); font-weight: 600; }
.mb-todos { border-bottom: 1px solid var(--borda); border-radius: 0; margin-bottom: 4px; }

/* ---------- TABELA (shell TabelaAvancada; Padrao_Tabela / Cabecalho) ----------
   O cabeçalho (título + menu) mora DENTRO do card. .tabela-wrap NÃO pode ter
   overflow:hidden — cortaria o popup do menu. O scroll horizontal fica em
   .tabela-scroll (wrapper da DRE larga: overflow-x auto). */
.tabela-wrap {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}
.tabela-cab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda);
}
.tabela-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 15px;
}
.tabela-info { font-size: 12.5px; color: var(--texto-fraco); }
.tabela-acoes { display: flex; align-items: center; gap: 8px; justify-self: end; }

.btn-tab-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto-secundario);
  cursor: pointer;
}
.btn-tab-menu:hover { background: var(--fundo); color: var(--texto); }
.tab-menu-wrap { position: relative; }
.tab-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra);
  padding: 6px;
}
.tab-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.tab-menu-item:hover { background: var(--fundo); }
.tab-menu-item i { font-size: 16px; color: var(--texto-suave); }
.tab-menu-sep { height: 1px; background: var(--borda); margin: 5px 4px; }
/* Rótulo de seção e itens tipo "rádio" (período das colunas da DRE): o check só
   aparece no item ativo. */
.tab-menu-rotulo {
  padding: 6px 10px 2px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-fraco);
}
.tab-menu-item .tab-menu-check { visibility: hidden; color: var(--cor-primaria); }
.tab-menu-item.ativo { color: var(--cor-primaria-escura); font-weight: 600; }
.tab-menu-item.ativo .tab-menu-check { visibility: visible; }

.tabela-scroll { overflow-x: auto; }
table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.tabela thead th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
  padding: 10px 14px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
table.tabela tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  vertical-align: middle;
}
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr:hover td { background: var(--fundo); }
table.tabela .col-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Coluna Ações: slots fixos que só realçam no hover da linha (esmaecimento). */
table.tabela .col-acoes { width: 1%; white-space: nowrap; text-align: right; }
.acao-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: none;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  opacity: .35;
  transition: opacity var(--transicao), background var(--transicao), color var(--transicao);
}
table.tabela tbody tr:hover .acao-slot { opacity: 1; }
.acao-slot:hover { background: var(--fundo); color: var(--texto); }
.acao-slot.perigo:hover { background: #fef2f2; color: var(--perigo); }
.acao-slot i { font-size: 16px; }
.acao-slot:disabled { cursor: default; opacity: .18; }

/* Rodapé de paginação (só aparece quando pagina) */
.oc-pag {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--borda);
}
.oc-pag-info { font-size: 12.5px; color: var(--texto-fraco); }
.oc-pag-ctrls { display: flex; align-items: center; gap: 4px; justify-self: center; }
.oc-pg {
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto-secundario);
  font-size: 13px;
  cursor: pointer;
}
.oc-pg:hover { background: var(--fundo); }
.oc-pg-atual {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--texto-sobre-cor-primaria);
  font-weight: 600;
}

/* ---------- TOGGLE ON/OFF (Padrao_Toggle_OnOff; 42x24, ON #16a34a) ---------- */
.cv-sw {
  position: relative;
  display: inline-block;
  width: 42px; height: 24px;
  cursor: pointer;
  vertical-align: middle;
}
.cv-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-sw-track {
  position: absolute;
  inset: 0;
  border-radius: var(--raio-full);
  background: var(--borda-forte);
  transition: background var(--transicao);
}
.cv-sw-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .2);
  transition: transform var(--transicao);
}
.cv-sw input:checked + .cv-sw-track { background: var(--sucesso); }
.cv-sw input:checked + .cv-sw-track::after { transform: translateX(18px); }
.cv-sw input:focus-visible + .cv-sw-track { box-shadow: 0 0 0 3px var(--cor-primaria-soft); }

/* ---------- ESTADO VAZIO (Padrao_Estado_Vazio; substitui a tabela) ---------- */
.vz {
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  background: var(--surface);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  color: var(--texto-secundario);
}
.vz-ico {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  margin-bottom: 14px;
}
.vz-ico i { font-size: 30px; }
.vz-titulo { font-family: var(--font-titulo); font-weight: 700; font-size: 17px; color: var(--texto); }
.vz-texto { font-size: 13.5px; color: var(--texto-suave); max-width: 380px; margin: 6px 0 16px; }

/* ---------- BLOCO DE PÁGINA (título de seção + subtítulo curto) ---------- */
.secao { margin-bottom: 16px; }
.secao p { color: var(--texto-secundario); font-size: 13.5px; margin: 4px 0 0; }
.bloco-titulo {
  font-family: var(--font-titulo);
  font-size: 16px;
  font-weight: 700;
  margin: 28px 0 14px;
}

/* ---------- FEEDBACK (flash) ---------- */
.flash {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--raio-sm);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.flash-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.flash-erro { background: #fef2f2; border: 1px solid #fecaca; color: var(--perigo); }

/* ============================ IMPORTAÇÃO ============================ */
/* Card de upload (Padrao_Upload_Arquivo, prefixo im-). */
.im-card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.im-card h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-titulo);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.im-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-secundario);
  display: block;
  margin-bottom: 8px;
}
.im-drop {
  display: block;
  border: 2px dashed var(--borda-forte);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: var(--transicao);
  user-select: none;
}
.im-drop:has(:focus-visible) {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}
.im-drop:hover,
.im-drop.over {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  border-style: solid;
}
.im-drop.loaded {
  border-style: solid;
  border-color: var(--sucesso);
  background: var(--sucesso-suave);
  color: var(--sucesso-escuro);
}
.im-drop i {
  font-size: 36px;
  display: block;
  margin-bottom: 6px;
}
.im-arq {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--sucesso-escuro);
}
.im-inp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.im-acao {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 14px;
}
.im-acao .im-msg { margin-right: auto; font-size: 12.5px; color: var(--texto-secundario); }
.im-acao .im-msg.ok   { color: var(--sucesso-escuro); font-weight: 600; }
.im-acao .im-msg.erro { color: var(--perigo); font-weight: 600; }
#imBtn:disabled { opacity: .45; cursor: not-allowed; }
.im-dica { font-size: 12.5px; color: var(--texto-suave); margin: 4px 0 0; }
/* Lista dos arquivos escolhidos (importação de vários de uma vez) */
.im-lista {
  list-style: none; margin: 12px 0 0; padding: 0; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--borda); border-radius: 8px;
}
.im-lista li {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px;
  border-top: 1px solid var(--borda); font-size: 12.5px;
}
.im-lista li:first-child { border-top: 0; }
.im-lista li i { font-size: 15px; color: var(--texto-suave); flex-shrink: 0; margin-top: 1px; }
.im-lista-nome { font-weight: 600; white-space: nowrap; }
.im-lista-st { margin-left: auto; text-align: right; color: var(--texto-secundario); }
.im-lista li.andamento i { color: var(--cor-primaria); }
.im-lista li.ok i, .im-lista li.ok .im-lista-st { color: var(--sucesso-escuro); }
.im-lista li.erro i, .im-lista li.erro .im-lista-st { color: var(--perigo); }
.im-acao .im-msg a { font-weight: 600; }

/* ============================ LOADING ============================ */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.loading-overlay.aberto { display: flex; }
.loading-spinner {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 28px 44px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.spinner-circle {
  width: 44px;
  height: 44px;
  border: 4px solid var(--borda);
  border-top-color: var(--cor-primaria);
  border-radius: 50%;
  animation: spinner-rotate .8s linear infinite;
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
.loading-text { font-size: 14px; font-weight: 600; color: var(--texto); }

/* ============================ DRE ============================ */
.tabela-dre td { vertical-align: middle; }
.tabela-dre .col-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-dre .col-num.neg { color: var(--perigo); }

/* Grupo (linha coletora): faixa azul forte, texto/valores em branco. */
tr.dre-grupo > td {
  font-weight: 700;
  background: var(--cor-primaria);
  color: var(--texto-sobre-cor-primaria);
  border-top: 1px solid var(--cor-primaria-escura);
}
/* Drilldown: grupo totalizador com contas vira clicável; a seta gira ao recolher
   e as contas somem. Ver o script em templates/dre/dre.html. */
tr.dre-grupo.tem-drill > td.orc-desc { cursor: pointer; }
tr.dre-grupo.tem-drill > td.orc-desc:hover { filter: brightness(0.97); }
.dre-drill-seta {
  font-size: 12px;
  margin-right: 6px;
  opacity: .8;
  vertical-align: -1px;
  transition: transform var(--transicao);
}
tr.dre-grupo.recolhido .dre-drill-seta { transform: rotate(-90deg); }
tr.dre-conta.oculta { display: none; }

/* Conta dentro do grupo: código discreto na 1ª coluna, descrição recuada. */
tr.dre-conta > td.orc-cod { color: var(--texto-fraco); }
tr.dre-conta > td.orc-desc { padding-left: 18px; color: var(--texto-secundario); }
tr.dre-conta .dre-cod {
  display: inline-block;
  min-width: 82px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
/* Subtotal: faixa cheia, negrito. */
tr.dre-subtotal > td {
  font-weight: 800;
  background: var(--cor-primaria);
  color: var(--texto-sobre-cor-primaria);
  border-top: 2px solid var(--cor-primaria-escura);
}
tr.dre-subtotal > td.col-num.neg { color: #ffd7d7; }

/* ---------- DRE Orçado x Realizado (12 meses lado a lado) ---------- */
/* Input numérico estreito das grades de reajuste. */
.inp-num { max-width: 92px; text-align: right; }
.inp-orc { width: 100px; text-align: right; padding: 6px 8px; font-size: 12.5px; }
/* Cadastro de Orçamentos: total do ano por linha e cabeçalho de grupo. */
.orc-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
/* Grupo (linha totalizadora): faixa azul forte, valores em branco. */
tr.orc-grupo td { background: var(--cor-primaria); font-weight: 700;
  color: var(--texto-sobre-cor-primaria); }
/* Rótulo da linha em DUAS colunas fixas: Conta (o código) e Descrição. As duas
   grudam na rolagem horizontal. Usado tanto no Cadastro de Orçamentos quanto na
   DRE. Só no orçamento a de código pode ser ocultada pelo menu (classe
   .oculta-conta na tabela): some o código e a Descrição encosta de novo na
   borda esquerda (left volta a 0). */
.tabela-oxr .orc-cod,
.tabela-oxr .orc-desc {
  position: sticky;
  z-index: 2;
  background: var(--surface);
}
.tabela-oxr .orc-cod {
  left: 0;
  width: 98px; min-width: 98px; max-width: 98px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--texto-secundario);
}
.tabela-oxr .orc-desc {
  left: 98px;
  min-width: 240px; max-width: 240px;
  white-space: normal;
  border-right: 2px solid var(--borda);
}
.tabela-oxr.oculta-conta .orc-cod { display: none; }
.tabela-oxr.oculta-conta .orc-desc { left: 0; }
/* Cabeçalho das duas colunas: grudam em cima E à esquerda, acima dos meses. */
.tabela-scroll-fixa thead .orc-cod,
.tabela-scroll-fixa thead .orc-desc { z-index: 6; }
.tabela-oxr thead .orc-cod, .tabela-oxr thead .orc-desc { z-index: 6; }
/* Grupo (faixa azul): as duas células do rótulo herdam o azul; a Descrição é o
   alvo clicável do drilldown (a seta gira ao recolher e as contas somem). */
tr.orc-grupo > td.orc-cod,
tr.orc-grupo > td.orc-desc { background: var(--cor-primaria); color: var(--texto-sobre-cor-primaria); }
tr.orc-grupo.tem-drill > td.orc-desc { cursor: pointer; }
tr.orc-grupo.tem-drill > td.orc-desc:hover { filter: brightness(0.97); }
tr.orc-grupo.recolhido .dre-drill-seta { transform: rotate(-90deg); }
tr.orc-conta.oculta { display: none; }
tr.orc-conta > td.orc-desc { padding-left: 18px; }
/* Coluna de referência (Média original do ano-base): só leitura, ao lado do
   orçado editável. Na conta fica esmaecida com um leve fundo azul (sinaliza que
   não se edita); na faixa do grupo herda o branco-no-azul das totalizadoras. */
.tabela-oxr tr.orc-conta td.orc-media {
  color: var(--texto-secundario);
  background: var(--cor-primaria-suave);
}

/* Zebra das CONTAS da DRE (só o detalhe; grupo e subtotal continuam faixa azul).
   Alterna branca / azul-clara para acompanhar a linha nos 12 meses. A classe
   .dre-zebra é posta pelo template a cada 2ª conta e reinicia em cada grupo
   (loop.cycle). As colunas fixas (Conta/Descrição) precisam do tom explícito,
   senão ficariam brancas ao rolar; por isso a regra com mais classes. */
.tabela-oxr tr.dre-conta.dre-zebra > td { background: var(--cor-primaria-suave); }
.tabela-oxr tr.dre-conta.dre-zebra > td.orc-cod,
.tabela-oxr tr.dre-conta.dre-zebra > td.orc-desc { background: var(--cor-primaria-suave); }

/* Legenda das colunas O / R / %H / %V. */
.dre-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--texto-secundario);
}
.dre-legenda b { color: var(--cor-primaria); margin-right: 4px; }

.tabela-oxr { font-size: 12.5px; }
.tabela-oxr th, .tabela-oxr td { padding: 7px 10px; }

/* Rótulo da linha em DUAS colunas fixas (Conta + Descrição), o mesmo par
   .orc-cod/.orc-desc do Cadastro de Orçamentos. Nas faixas azuis (grupo e
   subtotal), as duas células herdam o azul; a regra precisa de 2 classes + o
   elemento para vencer o fundo branco padrão de .orc-cod/.orc-desc. */
tr.dre-grupo > td.orc-cod, tr.dre-grupo > td.orc-desc,
tr.dre-subtotal > td.orc-cod, tr.dre-subtotal > td.orc-desc {
  background: var(--cor-primaria); color: var(--texto-sobre-cor-primaria);
}

/* Cabeçalho: nome do mês centralizado sobre as 4 subcolunas. */
.tabela-oxr .oxr-mes {
  text-align: center;
  border-left: 2px solid var(--borda);
  color: var(--cor-primaria);
}
.tabela-oxr .oxr-total { background: var(--cor-primaria-suave); }
/* Período das colunas (menu sanduíche). Padrão = mensal: os 4 trimestres ficam
   escondidos. No modo trimestral trocam com os 12 meses; no "só o total" some
   tudo menos o bloco Total do ano. */
.tabela-oxr .oxr-c-tri { display: none; }
.tabela-oxr.modo-tri .oxr-c-mes { display: none; }
.tabela-oxr.modo-tri .oxr-c-tri { display: table-cell; }
.tabela-oxr.so-total .oxr-c-mes { display: none; }
.tabela-oxr .oxr-cab-sub th { text-align: right; font-size: 11px; }

/* Separador visual entre blocos de mês (na última subcoluna, %V). */
.tabela-oxr .cl-fim { border-right: 2px solid var(--borda); }
/* Orçado levemente esmaecido; realizado em destaque. */
.tabela-oxr .cl-orc { color: var(--texto-secundario); }
.tabela-oxr .cl-h, .tabela-oxr .cl-v { color: var(--texto-suave); font-size: 11.5px; }
/* Linhas totalizadoras (faixa azul forte): TODO valor em branco. Especificidade
   com 2 classes para vencer a base 'table.tabela tbody td' (que fixa --texto).
   Os negativos, mais específicos (.neg), mantêm o vermelho-claro logo abaixo. */
.tabela-oxr tr.dre-grupo td,
.tabela-oxr tr.dre-subtotal td,
.tabela-oxr tr.orc-grupo td { color: var(--texto-sobre-cor-primaria); }
.tabela-oxr tr.dre-grupo > td.col-num.neg,
.tabela-oxr tr.dre-subtotal > td.col-num.neg { color: #ffd7d7; }

/* ---------- Grade com cabeçalho fixo + barra de rolagem no topo (Orçamento) ---
   A grade rola DENTRO de uma caixa de altura limitada (definida por JS conforme
   o espaço na tela): o cabeçalho das colunas gruda no topo ao rolar as linhas e a
   barra horizontal fica sempre à vista, sem descer até o fim da lista. A barra
   "fantasma" no topo é espelho da de baixo, sincronizada por JS. Sticky do topo
   só funciona porque a caixa rola por dentro (overflow nos dois eixos). */
.tabela-scroll-fixa { overflow: auto; }
.tabela-scroll-fixa thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--surface);
}

.tabela-scroll-topo { overflow-x: auto; overflow-y: hidden; height: 14px; }
.tabela-scroll-topo-inner { height: 1px; }

/* DRE: cabeçalho de DUAS linhas. A 1ª (nome do mês) gruda em top:0 pela regra
   genérica acima; a 2ª (O/R/%H/%V) gruda logo abaixo dela, e a altura da 1ª é
   medida por JS e chega em --cab1-h. O canto (rótulo, rowspan=2) fica em top:0. */
.tabela-scroll-fixa .oxr-cab-sub th { top: var(--cab1-h, 33px); }

/* --------------------------------------------------------------------------
   Matriz de permissões (Cadastro de Funções — módulo Usuários V4)
   -------------------------------------------------------------------------- */
.perm-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--cor-primaria-suave);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
  color: var(--texto-secundario);
}
.perm-aviso .ph { color: var(--cor-primaria); font-size: 20px; flex: 0 0 auto; }

.perm-matriz {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
}
.perm-matriz-cab { font-weight: 600; color: var(--texto); margin-bottom: 12px; }
.perm-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.perm-grupo { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; }
.perm-grupo-tit {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.perm-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--texto);
  border-radius: 6px;
}
.perm-item:hover { background: var(--fundo); }
.perm-item input { width: 16px; height: 16px; accent-color: var(--cor-primaria); cursor: pointer; }
.perm-fixo { font-size: 12px; color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   Dashboard — gráfico Orçado x Realizado por conta (SVG self-host)
   -------------------------------------------------------------------------- */
.gd-card {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 16px;
}
.gd-cabecalho { margin-bottom: 4px; }
.gd-titulo-conta { font-weight: 700; color: var(--texto); }
.gd-sub-conta { font-size: 12.5px; color: var(--texto-suave); }
.gd-contas-lista { margin-top: 3px; font-size: 12px; color: var(--texto-fraco); }

/* Legenda das séries. */
.gd-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 0 6px;
  font-size: 12.5px;
  color: var(--texto-secundario);
}
.gd-leg { display: inline-flex; align-items: center; gap: 6px; }
.gd-amostra { display: inline-block; width: 16px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.gd-am-col { background: var(--cor-primaria-soft); border: 1px solid var(--cor-primaria); }
.gd-am-real { height: 3px; border-radius: 2px; background: var(--cor-primaria); }
.gd-am-orc { height: 3px; border-radius: 2px; background: var(--sucesso); }
.gd-am-tend {
  height: 0; width: 16px;
  border-top: 2px dashed var(--texto-suave);
  background: transparent;
}

/* Área do gráfico. O SVG escala pela largura, mantendo a proporção do viewBox. */
.gd-grafico { width: 100%; }
.gd-svg { width: 100%; height: auto; display: block; }

/* Elementos do SVG (cores dos tokens; o SVG é inline, então var() vale). */
.gd-grade { stroke: var(--borda); stroke-width: 1; }
.gd-zero { stroke: var(--borda-forte); stroke-width: 1.5; }
.gd-col { fill: var(--cor-primaria-soft); stroke: var(--cor-primaria); stroke-width: 1; }
.gd-linha { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.gd-real { stroke: var(--cor-primaria); }
.gd-orc { stroke: var(--sucesso); }
.gd-tend { stroke: var(--texto-suave); stroke-width: 2; stroke-dasharray: 6 4; }
.gd-pt-real { fill: var(--cor-primaria); }
.gd-pt-orc { fill: var(--sucesso); }
.gd-eixo-x { fill: var(--texto-suave); font-size: 12px; text-anchor: middle; }
.gd-eixo-y { fill: var(--texto-suave); font-size: 12px; text-anchor: end; }
/* Rótulo de valor de cada coluna: dentro da barra, junto à base (longe das linhas
   de realizado/orçado, que passam pelo topo). Tinta de texto, nunca a da série. */
.gd-val { fill: var(--texto-secundario); font-size: 11px; font-weight: 600; text-anchor: middle;
  stroke: var(--surface); stroke-width: 3; stroke-linejoin: round; paint-order: stroke; }

/* Pizza da composição dos custos (Custos Diretos / Despesas Variáveis / Fixas).
   Cor fixa por grupo (slot 1..3); fatias separadas por um vão da cor do fundo;
   rótulos de % em tinta de texto, nunca na cor da série. */
.gp-card { margin-top: var(--sp-4); }
.gp-corpo {
  display: grid;
  /* Pizza e tabela lado a lado quando o card cabe; senão uma embaixo da outra. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-5);
  align-items: center;
  margin-top: 10px;
}
.gp-grafico { width: 100%; max-width: 460px; justify-self: center; }
.gp-grafico svg { width: 100%; height: auto; display: block; }
.gp-fatia { stroke: var(--surface); stroke-width: 2; transition: opacity var(--transicao); }
.gp-corpo.foco .gp-fatia { opacity: .45; }
.gp-corpo.foco .gp-fatia.ativa { opacity: 1; }
.gp-c1 { fill: var(--cor-primaria); }
.gp-c2 { fill: var(--grafico-serie-2); }
.gp-c3 { fill: var(--grafico-serie-3); }
.gp-c4 { fill: var(--grafico-serie-4); }
.gp-rot { fill: var(--texto); font-size: 13px; font-weight: 600; }
.gp-rot-val { fill: var(--texto-suave); font-size: 12px; }
.gp-guia { fill: none; stroke: var(--borda-forte); stroke-width: 1; }
.gp-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 8px; vertical-align: -1px; }
.gp-sw.gp-c1 { background: var(--cor-primaria); }
.gp-sw.gp-c2 { background: var(--grafico-serie-2); }
.gp-sw.gp-c3 { background: var(--grafico-serie-3); }
.gp-sw.gp-c4 { background: var(--grafico-serie-4); }
.gp-tabela-wrap { min-width: 0; overflow-x: auto; }
.gp-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.gp-tabela th { text-align: left; font-size: 12px; font-weight: 600;
  color: var(--texto-suave); padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.gp-tabela td { padding: 8px; border-bottom: 1px solid var(--borda); color: var(--texto); }
.gp-tabela td:first-child { white-space: nowrap; }
.gp-tabela .col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gp-tabela tr.ativa td { background: var(--cor-primaria-suave); }
.gp-tabela tfoot td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--borda-forte); }
.gp-nota { margin-top: 8px; font-size: 12px; color: var(--texto-suave); }

/* ---- Comparativo de Faturamento (modules/comparativo) ---------------------
   Quadros comparativos (ano base vs. anterior), mês a mês + acumulado. Reusa
   table.tabela; acrescenta 1a coluna fixa, coluna Acumulado destacada, o
   crescimento em verde/vermelho abaixo do valor e a linha de total. */
.cmp-intro { margin-bottom: 14px; }
.cmp-fontes { color: var(--texto-secundario); font-size: 13px; margin-top: 4px; }
.cmp-secao {
  font-size: 15px; font-weight: 700; color: var(--cor-primaria);
  margin: 22px 0 8px; padding-bottom: 4px;
  border-bottom: 2px solid var(--cor-primaria-suave);
}
.cmp-quadro { margin-bottom: 14px; }
table.cmp-tab td.cmp-desc, table.cmp-tab th.cmp-desc {
  position: sticky; left: 0; z-index: 2;
  background: var(--branco); text-align: left;
  min-width: 210px; text-transform: none;
  box-shadow: 1px 0 0 var(--borda);
}
table.cmp-tab thead th.cmp-desc { z-index: 3; }
table.cmp-tab .col-num { min-width: 92px; white-space: nowrap; }
table.cmp-tab tbody td.cmp-acum,
table.cmp-tab thead th.cmp-acum {
  font-weight: 700; box-shadow: -1px 0 0 var(--borda);
}
table.cmp-tab .col-num.neg { color: var(--perigo); }
.cmp-cr { font-size: 11px; font-weight: 600; line-height: 1.1; margin-top: 2px; }
.cmp-cr.pos { color: var(--sucesso-escuro); }
.cmp-cr.neg { color: var(--perigo); }
table.cmp-tab tr.cmp-total > td {
  font-weight: 700; background: var(--cor-primaria-suave);
  border-top: 2px solid var(--cor-primaria);
}
table.cmp-tab tr.cmp-total > td.cmp-desc { background: var(--cor-primaria-suave); }
table.cmp-tab tr.cmp-total > td.col-num.neg { color: var(--perigo); }

/* Indicadores: par Orcado x Realizado por indicador. A 1a linha do par
   (Orcado, mais discreta) leva um traco no topo para separar os grupos. */
table.cmp-tab tr.ind-grupo > td { border-top: 2px solid var(--cor-primaria-suave); }
table.cmp-tab tr.ind-orc > td { color: var(--texto-secundario); }
table.cmp-tab tr.ind-orc > td.col-num.neg,
table.cmp-tab tr.ind-real > td.col-num.neg { color: var(--perigo); }
.cmp-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--texto-secundario); background: var(--cor-primaria-suave);
  border-radius: 6px; padding: 1px 7px; margin-left: 4px;
}

/* Zebra dos Indicadores (tela principal): o par vem Orçado + Realizado por
   indicador. Deixamos a linha do Orçado branca e a do Realizado em azul-claro,
   então a tabela fica "uma branca / uma azul" e o realizado (o número que
   importa) salta aos olhos. A coluna fixa Indicador recebe o mesmo tom. */
table.ind-tab tr.ind-real > td { background: var(--cor-primaria-suave); }
table.ind-tab tr.ind-real > td.cmp-desc { background: var(--cor-primaria-suave); }

/* Zebra da Base de cálculo: linhas comuns alternam branca / azul-clara; as
   linhas destaque (o próprio indicador, .cmp-total) mantêm o realce forte. */
table.cmp-zebra tbody tr:nth-child(even):not(.cmp-total) > td { background: var(--cor-primaria-suave); }
table.cmp-zebra tbody tr:nth-child(even):not(.cmp-total) > td.cmp-desc { background: var(--cor-primaria-suave); }

/* ============================================================
   RECEBIMENTO (Conferencia por bipagem)
   Cores de estado usam os tokens --sucesso / --aviso / --perigo
   (nunca o hex da marca; so o var(--cor-primaria)).
   ============================================================ */

/* Acoes na lista de conferencias: botao Bipar + icones. */
.rec-acoes { display: inline-flex; align-items: center; gap: 4px; }

/* Cartoes de resumo (esperado / bipado / ok / falta / sobra). */
.rec-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.rec-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
}
.rec-card-rot { font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.rec-card-num {
  font-family: var(--font-titulo); font-weight: 700; font-size: 24px;
  color: var(--texto); line-height: 1;
}
.rec-card-ok    { border-left-color: var(--sucesso); }
.rec-card-falta { border-left-color: var(--aviso); }
.rec-card-sobra { border-left-color: var(--perigo); }

/* Painel de bipagem. */
.rec-scan {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--sombra-sm);
}
.rec-scan-linha { display: flex; gap: 10px; align-items: stretch; }
.rec-scan-inp {
  flex: 1 1 auto;
  font-size: 18px;
  padding: 12px 14px;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  width: 100%;
}
.rec-scan-inp:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}
.rec-scan-hint { font-size: 12.5px; color: var(--texto-suave); margin-top: 8px; }

/* Faixa de retorno da ultima bipagem. */
.rec-feed {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 14px;
  border-radius: var(--raio-sm);
  font-size: 14px; font-weight: 600;
  background: var(--fundo); color: var(--texto-secundario);
}
.rec-feed i { font-size: 18px; }
.rec-feed-desc { font-weight: 400; color: var(--texto-suave); }
.rec-feed-ok    { background: var(--sucesso-suave); color: var(--sucesso-escuro); }
.rec-feed-falta { background: rgba(217, 119, 6, 0.10); color: var(--aviso); }
.rec-feed-sobra { background: rgba(220, 38, 38, 0.09);  color: var(--perigo); }
.rec-feed-exced { background: rgba(217, 119, 6, 0.10); color: var(--aviso); }

/* Linhas da tabela por estado. */
table.tabela tbody tr.rec-ok    > td { background: var(--sucesso-suave); }
table.tabela tbody tr.rec-falta > td { background: rgba(217, 119, 6, 0.07); }
table.tabela tbody tr.rec-sobra > td { background: rgba(220, 38, 38, 0.07); }
table.tabela tbody tr.rec-exced > td { background: rgba(217, 119, 6, 0.07); }
.rec-cod { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-sit-sobra { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--perigo); white-space: nowrap; }
.rec-sit-falta { font-size: 12px; font-weight: 600; color: var(--aviso); white-space: nowrap; }
.rec-txt-perigo { color: var(--perigo); }

/* Rodape de totais. */
table.tabela tfoot tr.rec-tot > td {
  font-weight: 700; color: var(--texto);
  border-top: 2px solid var(--borda-forte);
  background: var(--fundo);
}

/* Filtro "so pendencias" e abas de filtro do resultado. */
.rec-chk { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--texto-secundario); cursor: pointer; }
.rec-filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.rec-filtros .btn.ativo {
  background: var(--cor-primaria); color: var(--texto-sobre-cor-primaria);
  border-color: var(--cor-primaria);
}

/* Impressao do resultado. */
.print-only { display: none; }
.rec-print-cab { margin-bottom: 12px; font-size: 13px; color: var(--texto-secundario); }
@media print {
  .no-print, .sidebar, .topo, .topbar, header, nav { display: none !important; }
  .print-only { display: block; }
  .rec-cards { margin-top: 8px; }
  table.tabela tbody tr.rec-ok    > td,
  table.tabela tbody tr.rec-falta > td,
  table.tabela tbody tr.rec-sobra > td,
  table.tabela tbody tr.rec-exced > td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Recebimento: autoria/auditoria. */
.rec-por { display: block; color: var(--texto-suave); font-size: 11.5px; }

.rec-aud {
  margin-top: 18px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
}
.rec-aud-tit {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-titulo); font-size: 15px; font-weight: 700;
  color: var(--texto); margin: 0 0 12px;
}
.rec-aud-tit i { color: var(--cor-primaria); }
.rec-aud-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.rec-aud-rot {
  font-size: 12px; font-weight: 700; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px;
}
.rec-aud-tab { width: 100%; }
.rec-aud-vazio { font-size: 13px; color: var(--texto-suave); margin: 4px 0; }
.rec-aud-tl { list-style: none; margin: 0; padding: 0; }
.rec-aud-tl li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 13px;
}
.rec-aud-tl li:last-child { border-bottom: none; }
.rec-aud-quando { color: var(--texto-suave); font-variant-numeric: tabular-nums; font-size: 12px; }
.rec-aud-acao { font-weight: 600; color: var(--texto); }
.rec-aud-quem { color: var(--texto-secundario); }
.rec-aud-det { color: var(--texto-suave); }

/* Conferentes (resumo na lista do histórico) + trava de reabertura */
.rec-conf { font-size: 12.5px; color: var(--texto-secundario); }
.rec-conf-vazio { font-size: 12px; color: var(--texto-suave); font-style: italic; }
.rec-trava {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--texto-suave);
}
.rec-trava i { font-size: 14px; }

/* ENVIO: notas fiscais expansíveis no resultado (uma NF por bloco) */
.env-nf {
  border: 1px solid var(--borda);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--surface);
  overflow: hidden;
}
.env-nf-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.env-nf-cab::-webkit-details-marker { display: none; }
.env-nf-cab:hover { background: var(--fundo); }
.env-nf-tit { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.env-nf-car { transition: transform .15s ease; color: var(--texto-suave); }
.env-nf[open] .env-nf-car { transform: rotate(90deg); }
.env-nf-meta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.env-nf-num { font-size: 12.5px; color: var(--texto-suave); }
.env-nf-tab { border-top: 1px solid var(--borda); }
@media print {
  .env-nf { break-inside: avoid; border-color: #999; }
  .env-nf-car { display: none; }
}

/* Impressao em A4 retrato (a DRE tem PDF proprio via reportlab). */
@page { size: A4 portrait; margin: 12mm; }

/* Indicadores: impressao so dos graficos, 2 colunas, sem cortar nenhum card. */
.ind-print-cab {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto-secundario);
}
@media print {
  .ind-graf-wrap { border: none !important; box-shadow: none !important; padding: 0 !important; }
  .ind-graf-wrap .tabela-cab { display: none !important; }
  .ind-graf-grid { grid-template-columns: 1fr 1fr !important; gap: 6mm; padding: 0 !important; }
  .ind-graf-card { break-inside: avoid; border-color: #999; padding: 8px 10px; }
  .ind-graf-plot svg,
  .ind-ln-real, .ind-ln-orc,
  .ind-dot-real, .ind-dot-orc,
  .ind-sw-real, .ind-sw-orc {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================ NOTAS EXPLICATIVAS ============================ */
/* Tela Relatórios > Notas Explicativas (prefixo ne-). Texto da nota com largura
   de leitura; o mesmo estilo de texto (.ne-texto) vale no editor e na lista. */
.ne-cab-periodo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 12px; max-width: 900px;
}
.ne-nova { margin-left: auto; }
.ne-periodo { font-family: var(--font-titulo); font-size: 18px; margin: 0; color: var(--texto); }
.ne-periodo span { color: var(--texto-suave); font-weight: 500; }

.ne-lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; max-width: 900px; }
.ne-nota {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px 12px;
  box-shadow: var(--sombra-sm);
  scroll-margin-top: 80px;
}
.ne-nota-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ne-nota-tit { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ne-num {
  font-size: 12px; font-weight: 700; color: var(--cor-primaria);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.ne-nota-tit h3 { font-size: 15px; margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.ne-acoes { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.ne-vinculo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 10px 0 2px; padding: 8px 10px;
  background: var(--fundo); border-radius: var(--raio-sm);
  font-size: 12.5px;
}
.ne-linha { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--texto-secundario); }
.ne-nums { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.ne-nums div { display: flex; gap: 5px; }
.ne-nums dt { color: var(--texto-suave); }
.ne-nums dd { margin: 0; color: var(--texto); font-variant-numeric: tabular-nums; font-weight: 600; }
.ne-sem-num { color: var(--texto-suave); }

.ne-texto { font-size: 14px; line-height: 1.6; color: var(--texto); overflow-wrap: anywhere; }
.ne-nota .ne-texto { margin-top: 10px; }
.ne-texto p { margin: 0 0 8px; }
.ne-texto ul, .ne-texto ol { margin: 0 0 8px; padding-left: 22px; }
.ne-texto li { margin-bottom: 3px; }
.ne-texto > :last-child { margin-bottom: 0; }

.ne-meta { margin-top: 10px; font-size: 11.5px; color: var(--texto-suave); }

.ne-vazio {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; margin-bottom: 20px; max-width: 900px;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  color: var(--texto-suave); font-size: 13.5px;
}
.ne-vazio i { font-size: 20px; }

.ne-form { max-width: 900px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.ne-form-tit { font-family: var(--font-titulo); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 7px; }
.ne-form-linha { margin: 0; }
.ne-campo-dre { flex: 1; min-width: 260px; }
.ne-editor-caixa {
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  background: var(--branco); overflow: hidden;
}
.ne-editor-caixa:focus-within { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-soft); }
.ne-barra {
  display: flex; align-items: center; gap: 2px; padding: 4px 6px;
  border-bottom: 1px solid var(--borda); background: var(--fundo);
}
.ne-bt {
  width: 32px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--raio-sm); background: transparent;
  color: var(--texto-secundario); cursor: pointer;
}
.ne-bt i { font-size: 17px; }
.ne-bt:hover { background: var(--borda); color: var(--texto); }
.ne-bt.on { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.ne-sep { width: 1px; height: 18px; background: var(--borda-forte); margin: 0 4px; }
.ne-editor { min-height: 160px; max-height: 480px; overflow-y: auto; padding: 10px 12px; outline: none; }
.ne-editor.ne-vazio-ed::before {
  content: attr(data-placeholder); color: var(--texto-fraco); pointer-events: none; position: absolute;
}
.ne-form-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ne-aviso { color: var(--perigo); font-size: 13px; font-weight: 600; }
/* Tela de cadastro (notas/form.html): bloco "A que se refere" no topo. */
.ne-voltar {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  color: var(--texto-secundario); font-size: 13px; font-weight: 600; text-decoration: none;
}
.ne-voltar:hover { color: var(--cor-primaria); }
.ne-grupo {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-sm);
}
.ne-grupo-tit {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-suave);
}
.ne-campo-filial { min-width: 220px; }
.ne-dica { margin: 0; font-size: 12.5px; color: var(--texto-suave); }

/* ============================ RELATÓRIO AOS SÓCIOS ============================ */
.rel-card { max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.rel-tit { font-family: var(--font-titulo); font-weight: 700; font-size: 16px; }
.rel-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rel-lista li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 10px 0; border-top: 1px solid var(--borda); font-size: 13px;
}
.rel-lista li:first-child { border-top: 0; }
.rel-rotulo { font-weight: 600; min-width: 110px; }
.rel-notas { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--texto-secundario); }
.rel-notas:hover { color: var(--cor-primaria); }
.rel-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rel-dica { font-size: 12.5px; color: var(--texto-suave); }
.rel-lista a.tag-alerta:hover { text-decoration: underline; }