/* ============================================================
   Portal Fiscal — JS Grãos
   ------------------------------------------------------------
   Identidade visual APROVADA, extraída do tema "JS Grãos" dos
   materiais em Documentos\Apresentações (o mesmo tema nos 5
   arquivos). Nada aqui foi escolhido por gosto.

     accent1  #06315A  navy institucional   -> primária
     accent2  #F8B149  âmbar                -> destaque da marca
     accent3  #0E4C82  azul médio           -> links, foco
     accent4  #9DB3C7  azul acinzentado     -> texto secundário
     accent5  #041E37  navy escuro          -> hover, bordas
     accent6  #B8791A  âmbar escuro         -> texto sobre âmbar
     dk1      #12222F  texto principal
     lt2      #EEF3F8  fundo claro
     fontes   Segoe UI Semibold (títulos) / Calibri (corpo)

   O portal usava um verde (1F4A34) que não consta de nenhum
   material aprovado. Foi substituído.

   TODA cor nova entra aqui como token. Cor solta no meio do
   arquivo é o que tornava impossível trocar a identidade —
   eram 16 ocorrências do verde espalhadas.
   ============================================================ */

:root {
  /* --- marca --- */
  --marca-navy:        #06315A;
  --marca-navy-escuro: #041E37;
  --marca-navy-medio:  #0E4C82;
  --marca-ambar:       #F8B149;
  --marca-ambar-claro: #F9D8A1;
  --marca-ambar-escuro:#B8791A;
  --marca-azul-suave:  #9DB3C7;

  /* --- superfícies --- */
  --fundo:          #EEF3F8;
  --superficie:     #FFFFFF;
  --superficie-alt: #F6F9FC;
  --borda:          #D7E2EC;
  --borda-suave:    #E8EFF6;

  /* --- texto --- */
  --texto:          #12222F;
  --texto-medio:    #45586A;
  /* #6C8299 (o tom natural desta família) dá 3,56:1 sobre
     --fundo, abaixo do mínimo legível de 4,5:1. Mesmo matiz,
     só mais escuro: 4,50 sobre --fundo, 5,03 sobre branco. */
  --texto-suave:    #5D7187;

  /* --- estados (mantidos legíveis sobre as superfícies claras) --- */
  --ok-fundo:      #E3F2E8;  --ok-texto:      #1B5E36;
  --alerta-fundo:  #FDF0D9;  --alerta-texto:  #8A5A12;
  --erro-fundo:    #FBE4E4;  --erro-texto:    #9B2222;
  --info-fundo:    #E1ECF7;  --info-texto:    #0E4C82;
  --neutro-fundo:  #E6EDF4;  --neutro-texto:  #45586A;

  /* --- tipografia --- */
  --fonte-titulo: "Segoe UI Semibold", "Segoe UI", Calibri,
                  system-ui, Arial, sans-serif;
  --fonte-corpo:  Calibri, "Segoe UI", system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  background-color: var(--fundo);
  color: var(--texto);
}

.container { display: flex; min-height: 100vh; }

/* ---------------- SIDEBAR ---------------- */

.sidebar {
  width: 230px;
  background-color: var(--marca-navy);
  color: var(--superficie);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  flex-shrink: 0;
}

.sidebar .marca {
  padding: 18px 16px;
  border-bottom: 1px solid var(--marca-navy-escuro);
}

.sidebar .marca strong { display: block; font-size: 15px; }
.sidebar .marca span { font-size: 11px; opacity: .75; }

.sidebar ul { list-style: none; padding: 0; margin: 0; }

.sidebar ul li {
  padding: 13px 16px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  white-space: nowrap;
}

.sidebar ul li:hover { background-color: var(--marca-navy-escuro); }

.sidebar ul li.ativo {
  background-color: var(--marca-navy-escuro);
  border-left: 4px solid var(--ok-texto);
  padding-left: 12px;
}

.sidebar .rodape {
  margin-top: auto;
  padding: 12px 16px;
  font-size: 11px;
  opacity: .7;
  border-top: 1px solid var(--marca-navy-escuro);
  line-height: 1.5;
}

/* ---------------- CONTEÚDO ---------------- */

.conteudo { flex: 1; padding: 20px 24px 40px; min-width: 0; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.topo h1 { font-size: 20px; margin: 0; }
.topo p { margin: 2px 0 0; font-size: 12px; color: var(--texto-suave); }

.vista { display: none; }
.vista.ativa { display: block; }

/* ---------------- CARDS ---------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.card {
  background: var(--superficie);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
  border-left: 4px solid var(--marca-navy);
}

.card .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-suave);
}

.card .valor { font-size: 22px; font-weight: bold; margin-top: 4px; }
.card .obs { font-size: 11px; color: var(--texto-suave); margin-top: 2px; }

.card.alerta { border-left-color: var(--marca-ambar-escuro); }
.card.erro { border-left-color: var(--erro-texto); }
.card.info { border-left-color: var(--marca-navy-medio); }

/* ---------------- PAINÉIS / TABELAS ---------------- */

.painel {
  background: var(--superficie);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
  margin-bottom: 16px;
}

.painel h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--texto-medio);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.grade-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.tabela-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  background: var(--borda);
  text-align: left;
  padding: 9px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--texto-medio);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

tbody td { padding: 8px 10px; border-bottom: 1px solid var(--borda-suave); }
tbody tr:hover { background: var(--superficie-alt); }
tbody tr.clicavel { cursor: pointer; }

td.num, th.num { text-align: right; white-space: nowrap; }
td.mono { font-family: Consolas, "Courier New", monospace; font-size: 11px; }

.vazio { padding: 22px; text-align: center; color: var(--texto-suave); font-size: 13px; }

/* ---------------- FILTROS / FORMULÁRIOS ---------------- */

.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}

.campo { display: flex; flex-direction: column; gap: 4px; }

.campo label {
  font-size: 11px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .3px;
}

input, select {
  padding: 8px 9px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--superficie);
  width: 100%;
}

input:focus, select:focus { outline: 2px solid var(--marca-navy); outline-offset: -1px; }

button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  background: var(--marca-navy);
  color: var(--superficie);
}

button:hover { background: var(--marca-navy-escuro); }
button:disabled { background: var(--texto-suave); cursor: not-allowed; }

button.secundario { background: var(--superficie); color: var(--marca-navy); border: 1px solid var(--marca-navy); }
button.secundario:hover { background: var(--info-fundo); }
button.perigo { background: var(--erro-texto); }
button.perigo:hover { background: var(--erro-texto); }
button.mini { padding: 4px 9px; font-size: 11px; }

/* Precisa vir DEPOIS de .secundario/.perigo: mesma especificidade que
   `button:disabled`, então quem estiver por último ganha — sem isto um
   botão secundário desabilitado continua com cara de clicável. */
button:disabled,
button.secundario:disabled,
button.perigo:disabled {
  background: var(--borda);
  color: var(--texto-suave);
  border-color: var(--borda);
  cursor: not-allowed;
}

.barra-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0;
}

.resumo-linha {
  font-size: 13px;
  color: var(--texto-medio);
  padding: 8px 0;
}

.resumo-linha strong { color: var(--marca-navy); }

/* ---------------- ETIQUETAS ---------------- */

.tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}

.tag.verde { background: var(--ok-fundo); color: var(--ok-texto); }
.tag.vermelho { background: var(--erro-fundo); color: var(--erro-texto); }
.tag.amarelo { background: var(--alerta-fundo); color: var(--alerta-texto); }
.tag.azul { background: var(--info-fundo); color: var(--info-texto); }
.tag.cinza { background: var(--borda); color: var(--texto-medio); }

/* ---------------- BARRAS (mini gráfico) ---------------- */

.barra-item { margin-bottom: 9px; font-size: 12px; }

.barra-item .cabecalho {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}

.barra-fundo {
  background: var(--borda);
  border-radius: 4px;
  height: 9px;
  overflow: hidden;
}

.barra-preenchida { background: var(--marca-navy); height: 100%; }

/* ---------------- LOG ---------------- */

.log {
  background: var(--texto);
  color: var(--borda);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11.5px;
  line-height: 1.55;
  padding: 12px;
  border-radius: 8px;
  height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.log .erro { color: var(--erro-fundo); }
.log .aviso { color: var(--marca-ambar); }

/* ---------------- MODAL ---------------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal.oculto { display: none; }

.modal-caixa {
  background: var(--superficie-alt);
  border-radius: 12px;
  width: min(96vw, 960px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 20px 45px rgba(0,0,0,.3);
}

.modal-caixa h2 { margin: 0 0 4px; font-size: 17px; }

.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 16px;
  margin: 14px 0;
}

.grade-campos div { font-size: 13px; }
.grade-campos span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--texto-suave);
  letter-spacing: .3px;
}

/* ---------------- AVISOS ---------------- */

.aviso-caixa {
  background: var(--alerta-fundo);
  border: 1px solid var(--marca-ambar);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--alerta-texto);
  margin-bottom: 14px;
  line-height: 1.55;
}

.notificacao {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: var(--marca-navy);
  color: var(--superficie);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 90;
  max-width: 380px;
}

.notificacao.oculta { display: none; }
.notificacao.falha { background: var(--erro-texto); }

/* ---------------- LOGIN ---------------- */

.login-tela {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--marca-navy) 0%, var(--marca-navy-escuro) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.login-tela.oculta { display: none; }

.login-caixa {
  background: var(--superficie);
  border-radius: 12px;
  width: min(94vw, 380px);
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.login-caixa .marca-login {
  text-align: center;
  margin-bottom: 20px;
}

.login-caixa .marca-login strong {
  display: block;
  font-size: 19px;
  color: var(--marca-navy);
}

.login-caixa .marca-login span {
  font-size: 11px;
  color: var(--texto-suave);
  letter-spacing: .3px;
}

.login-caixa .campo { margin-bottom: 12px; }

.login-caixa button { width: 100%; padding: 11px; margin-top: 6px; }

.login-erro {
  background: var(--erro-fundo);
  border: 1px solid var(--erro-fundo);
  color: var(--erro-texto);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 12.5px;
  margin-top: 12px;
}

.login-erro.oculta { display: none; }

.login-nota {
  font-size: 11px;
  color: var(--texto-suave);
  text-align: center;
  margin-top: 16px;
  line-height: 1.5;
}

/* identificacao do usuario logado, na barra lateral */

.sidebar .usuario {
  padding: 10px 16px;
  border-top: 1px solid var(--marca-navy-escuro);
  font-size: 11.5px;
  line-height: 1.5;
}

.sidebar .usuario strong { display: block; font-size: 12.5px; }

.sidebar .usuario .papel {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: bold;
  text-transform: uppercase;
  background: rgba(255,255,255,.16);
}

.sidebar .usuario button {
  margin-top: 8px;
  width: 100%;
  padding: 6px;
  font-size: 11px;
  background: rgba(255,255,255,.12);
  color: var(--superficie);
}

.sidebar .usuario button:hover { background: rgba(255,255,255,.24); }

.somente-admin.escondido { display: none !important; }

/* ---------------- MANUAL ---------------- */

.manual { max-width: 900px; }

.manual h2 {
  font-size: 16px;
  color: var(--marca-navy);
  margin: 26px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ok-fundo);
}

.manual h2:first-child { margin-top: 0; }

.manual h3 {
  font-size: 13px;
  color: var(--texto-medio);
  margin: 18px 0 6px;
  text-transform: none;
  letter-spacing: 0;
}

.manual p,
.manual li {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--texto-medio);
}

.manual ul,
.manual ol { padding-left: 20px; margin: 8px 0; }

.manual li { margin-bottom: 5px; }

.manual code {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}

.manual table { margin: 10px 0 14px; }
.manual table td { vertical-align: top; }

.manual .receita {
  background: var(--superficie-alt);
  border-left: 3px solid var(--marca-navy);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 10px 0;
}

.manual .receita strong { color: var(--marca-navy); }

.manual .cuidado {
  background: var(--alerta-fundo);
  border-left: 3px solid var(--marca-ambar-escuro);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 10px 0;
  color: var(--alerta-texto);
}

.manual .nao-faz {
  background: var(--erro-fundo);
  border-left: 3px solid var(--erro-texto);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 10px 0;
  color: var(--erro-texto);
}

.manual dl { margin: 8px 0; }

.manual dt {
  font-weight: bold;
  color: var(--marca-navy);
  font-size: 13px;
  margin-top: 10px;
}

.manual dd {
  margin: 2px 0 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-medio);
}

/* ---------------- RESPONSIVO ---------------- */

@media (max-width: 780px) {
  .container { flex-direction: column; }
  .sidebar { width: 100%; min-height: auto; }
  .sidebar ul { display: flex; overflow-x: auto; }
  .sidebar ul li { border-bottom: none; }
  .sidebar .rodape { display: none; }
}

/* ---------------- IMPRESSÃO DE XML ---------------- */

/* `.oculto` existia só para o modal; a tela de impressão precisa
   esconder o resultado enquanto ninguém pesquisou. Genérico, com
   !important para vencer o `display` do elemento. */
.oculto { display: none !important; }

/* A chave tem 44 dígitos: monoespaçada e espaçada para conferir a
   digitação sem contar com o dedo na tela. */
.chave-entrada {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 0.7px;
}

.contador-chave {
  margin-top: 8px;
  font-size: 12px;
  color: var(--texto-suave);
}

.contador-chave.ok { color: var(--ok-texto); font-weight: 600; }
.contador-chave.falta { color: var(--alerta-texto); }
.contador-chave.erro { color: var(--erro-texto); font-weight: 600; }

.grade-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px;
  margin-bottom: 14px;
}

.grade-dados .item .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texto-suave);
}

.grade-dados .item .valor {
  font-size: 13.5px;
  color: var(--texto);
  word-break: break-word;
}

/* O visor reaproveita a aparência do log (fundo escuro, monoespaçado),
   mas com altura maior: XML de NF-e completa passa de 200 linhas. */
.visor-xml {
  background: var(--texto);
  color: var(--borda);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 14px;
  border-radius: 8px;
  max-height: 480px;
  overflow: auto;
  white-space: pre;
  margin: 0;
  tab-size: 2;
}

/* Ao imprimir a PÁGINA (Ctrl+P no portal), o XML é a única coisa que
   interessa: o resto da interface vira papel desperdiçado. */
@media print {
  .sidebar, .filtros, .barra-acoes, .contador-chave,
  .topo, #avisoImpressao { display: none !important; }

  .visor-xml {
    background: var(--superficie);
    color: #000;
    max-height: none;
    overflow: visible;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--borda);
    font-size: 9px;
  }
}

/* ============================================================
   IDENTIDADE DA MARCA — ajustes finais
   ------------------------------------------------------------
   Vem depois do resto de propósito: são refinamentos sobre as
   regras acima, e ficar no fim deixa claro o que é identidade
   visual e o que é estrutura.
   ============================================================ */

/* ---- logotipo no menu ---- */
/* O símbolo é âmbar sobre navy, que é a aplicação da marca em
   fundo escuro mostrada nos materiais aprovados. */
.sidebar .marca {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--marca-navy-escuro);
  background: linear-gradient(
    180deg,
    var(--marca-navy-escuro) 0%,
    var(--marca-navy) 100%
  );
}

.sidebar .marca img {
  height: 34px;
  width: auto;
  align-self: flex-start;
}

.sidebar .marca strong {
  font-family: var(--fonte-titulo);
  letter-spacing: .2px;
}

.sidebar .marca span { color: var(--marca-azul-suave); opacity: 1; }

/* Item ativo com a marca do âmbar à esquerda — é o único lugar
   onde o destaque aparece no menu, para não competir com o logo. */
.sidebar ul li.ativo {
  border-left: 3px solid var(--marca-ambar);
  padding-left: 13px;
}

/* ---- títulos ---- */
h1, h2, h3, .painel h3, .titulo-vista {
  font-family: var(--fonte-titulo);
  color: var(--marca-navy);
  letter-spacing: .1px;
}

/* ---- botões ---- */
button { font-family: var(--fonte-corpo); }

button.secundario {
  background: var(--superficie);
  color: var(--marca-navy);
  border: 1px solid var(--borda);
}

button.secundario:hover {
  background: var(--info-fundo);
  border-color: var(--marca-navy-medio);
}

/* Foco visível em toda a navegação por teclado: acessibilidade
   não é opcional num sistema que outros setores usam. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
.sidebar ul li:focus-visible {
  outline: 2px solid var(--marca-ambar);
  outline-offset: 2px;
}

/* ---- cabeçalho de tabela ---- */
thead th {
  font-family: var(--fonte-titulo);
  color: var(--marca-navy);
  background: var(--superficie-alt);
  border-bottom: 2px solid var(--borda);
}

/* ---- cartões: a faixa lateral usa a cor do estado ---- */
.card { border-left: 3px solid var(--marca-navy); }
.card .rotulo { color: var(--texto-suave); }
.card .valor { font-family: var(--fonte-titulo); color: var(--marca-navy); }

/* ---- login ---- */
.login-tela {
  background: linear-gradient(
    160deg,
    var(--marca-navy-escuro) 0%,
    var(--marca-navy) 55%,
    var(--marca-navy-medio) 100%
  );
}

/* Cartão do login é branco -> versão colorida da marca.
   O tamanho vem daqui, e não de um style= no HTML, senão
   existem dois lugares para mudar a mesma coisa. */
.marca-login img {
  height: 46px;
  width: auto;
  margin-bottom: 12px;
}

.marca-login strong {
  font-family: var(--fonte-titulo);
  color: var(--marca-navy);
}

/* ---- rodapé do menu ---- */
.sidebar .rodape { color: var(--marca-azul-suave); }

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Tablet: o menu vira faixa horizontal rolável (regra que já
   existia); aqui só garantimos que o logo acompanhe. */
@media (max-width: 780px) {
  .sidebar .marca {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .sidebar .marca img { height: 26px; }

  /* No celular o menu já é uma faixa; o bloco do usuário empilhado
     roubava ~110px antes do conteúdo começar. Vira uma linha só. */
  .sidebar .usuario {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
  }
  .sidebar .usuario strong { display: inline; }
  .sidebar .usuario br { display: none; }
  .sidebar .usuario .papel { margin-top: 0; }
  .sidebar .usuario button {
    margin-top: 0;
    width: auto;
    margin-left: auto;
    padding: 5px 14px;
  }
}

/* Celular */
@media (max-width: 480px) {
  .sidebar .marca img { height: 22px; }
  .marca-login img { height: 38px; }
  .sidebar .marca strong { font-size: 14px; }
  .sidebar .marca span { font-size: 10px; }
}

/* Telas grandes / TV: o conteúdo para de esticar e centraliza,
   senão uma tabela de 12 colunas fica ilegível em 4K. */
@media (min-width: 1700px) {
  .conteudo { max-width: 1600px; margin: 0 auto; }
}

/* ------------------------------------------------------------------
   CENTRAL DE RELATÓRIOS
   ------------------------------------------------------------------
   As abas escolhem QUAL relatório, não filtram o que está na tela —
   por isso têm peso visual de navegação (âmbar da marca embaixo da
   ativa), e não de botão de ação.                                   */

.abas-relatorio {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}

.abas-relatorio .aba {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  font-family: var(--fonte-titulo);
  font-size: 0.92rem;
  color: var(--texto-medio);
  cursor: pointer;
}

.abas-relatorio .aba:hover {
  color: var(--marca-navy);
  background: var(--superficie-alt);
}

.abas-relatorio .aba.ativa {
  color: var(--marca-navy);
  border-bottom-color: var(--marca-ambar);
}

/* A ressalva de cada relatório. Fica ACIMA da tabela de propósito:
   depois dos números, ninguém lê. */
.nota-relatorio {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--superficie-alt);
  border-left: 3px solid var(--marca-azul-suave);
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: var(--texto-medio);
  line-height: 1.5;
}

.nota-relatorio:empty { display: none; }

@media (max-width: 780px) {
  .abas-relatorio .aba { flex: 1 1 100%; text-align: left; }
}