/* estoque_sienge — folha de estilo única.
   Tabelas largas (movimentações tem 25 colunas) rolam dentro do próprio
   container; a página nunca rola na horizontal. */

:root {
  /* Menu lateral — mesmas cores do módulo do DP, para os sistemas da casa
     terem a mesma cara. */
  --sw: 240px;
  --nav: #0f172a;
  --nav-txt: #cbd5e1;
  --azul: #0b3d63;
  --azul-claro: #14567f;
  --borda: #d8dee6;
  --fundo: #f4f6f9;
  --texto: #1f2933;
  --suave: #667486;
  --erro: #b42318;
  --erro-fundo: #fef3f2;
  --aviso-fundo: #fffaeb;
  --aviso-borda: #f0c36d;
  --verde: #067647;
  --vermelho: #b42318;
  /* Altura única de input/select/botão dos filtros — é o que mantém o botão
     "Consultar" do mesmo tamanho da caixa ao lado. */
  --altura-campo: 42px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
}

/* ------------------------------------------ barra de atualização ------ */
/* Logo abaixo do topo, alinhada com o conteúdo: hora do dado que está na tela,
   contagem para a próxima consulta automática e o botão que a antecipa. */
.barra-dados {
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 18px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--suave);
}
.barra-dados strong { color: var(--texto); font-weight: 600; }
.acoes-dados { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.botao-atualizar, .botao-exportar, .botao-subtela {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid var(--azul);
  border-radius: 6px;
  background: #fff;
  color: var(--azul);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.botao-atualizar:hover { background: var(--azul); color: #fff; }
/* Verde de planilha, e não o azul do sistema: são duas ações diferentes lado a
   lado, e uma baixa arquivo. */
.botao-exportar { border-color: var(--verde); color: var(--verde); }
.botao-exportar::before { content: "⤓"; font-size: 15px; line-height: 1; }
.botao-exportar:hover { background: var(--verde); color: #fff; }

/* --------------------------------------------------------- conteúdo --- */
.conteudo { max-width: 1600px; margin: 0 auto; padding: 20px 18px 60px; }
h1 { font-size: 20px; margin: 0 0 4px; color: var(--azul); }

.endpoint {
  margin: 0 0 18px;
  color: var(--suave);
  font-size: 13px;
  max-width: 900px;
}
.endpoint code {
  background: #e7edf4;
  color: var(--azul-claro);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12.5px;
}
.selecionado { margin: 0 0 12px; font-size: 14px; color: var(--suave); }

/* ---------------------------------------------------------- filtros --- */
.filtros {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  /* Pelo topo, não pelo rodapé: campos com <small> de ajuda são mais altos e,
     alinhados pela base, empurrariam o botão para baixo da linha dos inputs. */
  align-items: flex-start;
}
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.campo-largo { min-width: 260px; flex: 1; }
.campo-botao { min-width: auto; }
.campo label { font-size: 12px; line-height: 1.45; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .3px; }
.campo small { font-size: 11.5px; color: var(--suave); }

/* Espaçador invisível com a altura exata do <label> das outras colunas: faz o
   botão começar na mesma linha dos inputs. */
.campo-botao::before { content: ""; display: block; height: calc(12px * 1.45); }
.campo-botao button { height: var(--altura-campo); padding: 0 22px; }

input, select {
  /* 16px evita o zoom automático do iOS ao focar o campo. */
  font: inherit;
  font-size: 16px;
  height: var(--altura-campo);
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: #fff;
  color: var(--texto);
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--azul-claro); outline-offset: -1px; }

button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--azul);
  color: #fff;
  cursor: pointer;
}
button:hover { background: var(--azul-claro); }

/* ---------------------------------------------- totais (entradas/saídas) --- */
.totais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.total-item {
  background: #fff;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--azul);
  border-radius: 8px;
  padding: 10px 14px;
}
.total-item .rotulo {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--suave);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.total-item strong { display: block; font-size: 19px; margin: 2px 0 1px; }
.total-item .detalhe { font-size: 11.5px; color: var(--suave); }
/* Entrada em verde, saída em vermelho — as mesmas cores dos chips E/S da
   tabela de movimentações, para os dois lados falarem a mesma língua. */
.valor-entrada { color: var(--verde); }
.valor-saida { color: var(--vermelho); }
/* Insumo cadastrado com mais de uma unidade no período: a soma de quantidade
   mistura escalas (ver nota da tela de entradas e saídas). */
.alerta-unidade { color: #b54708; cursor: help; margin-left: 4px; font-size: 12px; }
.tabela .t-unidade { white-space: nowrap; }

/* --------------------------------------------------------- alertas ---- */
.alerta {
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-borda);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 14px;
}
.alerta.erro { background: var(--erro-fundo); border-color: #fda29b; color: var(--erro); }

/* --------------------------------------------------------- tabelas ---- */
.tabela-wrap {
  /* "scroll" e não "auto": a barra horizontal fica sempre à vista, em vez de
     aparecer só depois que o usuário descobre que a tabela rola. */
  overflow-x: scroll;
  overflow-y: auto;
  /* Teto de altura para a barra horizontal ficar ao alcance: sem ele a barra
     mora no rodapé da tabela, e com 200 linhas seriam 7 mil pixels de rolagem
     até chegar nela. É também o que faz o cabeçalho grudado (thead sticky)
     funcionar — sem altura limitada ele não tem de onde grudar. */
  max-height: calc(100vh - 190px);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
  /* Firefox */
  scrollbar-width: auto;
  scrollbar-color: #b6c2d0 #eef2f7;
}
/* Chrome/Safari escondem a barra até o primeiro gesto; esta fica desenhada. */
.tabela-wrap::-webkit-scrollbar { height: 14px; width: 14px; }
.tabela-wrap::-webkit-scrollbar-track { background: #eef2f7; border-radius: 0 0 8px 8px; }
.tabela-wrap::-webkit-scrollbar-thumb {
  background: #b6c2d0;
  border: 3px solid #eef2f7;
  border-radius: 8px;
}
.tabela-wrap::-webkit-scrollbar-thumb:hover { background: #8e9fb2; }
.tabela {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  font-size: 13.5px;
}
.tabela th, .tabela td {
  padding: 8px 12px;
  border-bottom: 1px solid #eef1f5;
  text-align: left;
  white-space: nowrap;
}
.tabela thead th {
  position: sticky;
  top: 0;
  background: #eef2f7;
  color: var(--azul);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 2px solid var(--borda);
  cursor: help;
}
.tabela tbody tr:nth-child(even) { background: #fafbfc; }
.tabela tbody tr:hover { background: #eef5fb; }
.tabela .t-num, .tabela .t-qtd, .tabela .t-moeda, .tabela .t-dias,
.tabela .t-media, .tabela .t-cobertura { text-align: right; }
/* Só no CABEÇALHO das colunas calculadas o rótulo pode quebrar em duas linhas.
   São rótulos longos ("Última movimentação", "Consumo médio/mês", "Dias de
   cobertura") sobre células curtas: em nowrap, eles sozinhos estica(va)m a
   tabela 142px além da área visível e jogavam a cobertura para fora da tela. */
.tabela thead th.t-data, .tabela thead th.t-dias,
.tabela thead th.t-media, .tabela thead th.t-cobertura { white-space: normal; }
/* Ociosidade: o número muda de cor conforme o tempo parado (ver _tabela.html). */
.tabela .dias { font-variant-numeric: tabular-nums; }
/* Nome do centro de custo na lista de entradas e saídas: uma linha só, cortado
   com reticências (o nome inteiro fica no title). Sem teto, "Inpasa -
   Rondonópolis-MT (Fases I e II e DDGS) - Engedelta Engenharia" empurra as
   colunas de valor para fora da tela e deixa a linha com cinco alturas. */
.tabela .t-centro {
  white-space: nowrap;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabela .dias-alerta { color: #b54708; font-weight: 600; }
.tabela .dias-critico { color: var(--vermelho); font-weight: 700; }
/* Só as descrições longas (insumo, fornecedor, marca) quebram linha, e com
   largura suficiente para não virarem coluna de 3 linhas. As demais colunas de
   texto são curtas ("TR", "39") e ficam em nowrap para não desperdiçar espaço —
   a tabela já rola na horizontal. */
.tabela .t-desc { white-space: normal; min-width: 240px; }
.vazio { color: #b9c2cd; }

.tabela .link-detalhe { color: var(--azul-claro); text-decoration: none; font-weight: 600; }
.tabela .link-detalhe:hover { text-decoration: underline; }
/* A lista de centros de custo tem 6 colunas curtas; não precisa do min-width
   de 900px que existe para a tabela de 25 colunas das movimentações. */
.tabela-estreita { min-width: 0; }
.nota { font-size: 12px; color: var(--suave); margin: 8px 2px 0; }
.nota code { background: #e7edf4; padding: 1px 5px; border-radius: 4px; }

/* ------------------------------------------------ ficha do detalhe ---- */
.voltar { margin: 0 0 10px; font-size: 13.5px; }
.voltar a { color: var(--azul-claro); text-decoration: none; font-weight: 600; }
.voltar a:hover { text-decoration: underline; }
.titulo-secao { font-size: 15px; color: var(--azul); margin: 22px 0 10px; }
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
}
.ficha > div { background: #fff; padding: 12px 14px; }
.ficha dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--suave); font-weight: 600; }
.ficha dd { margin: 4px 0 0; font-size: 14.5px; }
.ficha .campo-api {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #9aa6b4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: 11.5px;
  font-weight: 600;
}
.chip-input { background: #ecfdf3; color: var(--verde); }
.chip-output { background: #fef3f2; color: var(--vermelho); }

/* Tipos de movimento na tabela de entradas e saídas: o nome como o Sienge
   registra, com a contagem de lançamentos colada. A cor separa entrada de saída
   na leitura rápida (transferência é neutra porque acontece nos dois sentidos). */
/* nowrap no chip: o nome do tipo não pode quebrar no meio ("Estorno de /
   inicialização"); quem quebra é a célula, entre um chip e outro. */
.chip-tipo {
  background: #eef2f7;
  color: var(--azul);
  margin: 0 4px 2px 0;
  padding: 2px 8px;
  white-space: nowrap;
}
.chip-tipo-1, .chip-tipo-7 { background: #ecfdf3; color: var(--verde); }
.chip-tipo-2, .chip-tipo-4, .chip-tipo-6 { background: #fef3f2; color: var(--vermelho); }
.chip-conta { opacity: .65; margin-left: 5px; font-weight: 700; }
/* Com o nome inteiro, uma linha de quatro tipos passaria de 500px: a célula
   empilha os chips em vez de esticar a tabela para todo mundo. */
.tabela .t-tipos { white-space: normal; min-width: 150px; max-width: 300px; }

/* ---------------------------------------------------------- rodapé ---- */
.rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 12px 2px;
  font-size: 13.5px;
  color: var(--suave);
}
.rodape .paginas { display: flex; gap: 12px; }
.rodape a { color: var(--azul-claro); text-decoration: none; font-weight: 600; }
.rodape a:hover { text-decoration: underline; }
.rodape .off { color: #c3cbd5; }
.rodape .raw-toggle { margin-left: auto; }

/* ------------------------------------------------------- JSON bruto --- */
.raw { margin-top: 8px; }
.raw h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); margin: 18px 0 6px; }
.raw pre {
  background: #0f1b26;
  color: #d6e2ee;
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  white-space: pre;
}
.raw pre.url { color: #9fd5a3; white-space: pre-wrap; word-break: break-all; }
.raw pre.json { max-height: 560px; overflow-y: auto; }

/* ----------------------------------------------------------- login ---- */
.login-caixa {
  max-width: 380px;
  margin: 70px auto;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 30px 28px;
  box-shadow: 0 2px 10px rgba(15, 27, 38, .06);
}
.login-caixa h1 { text-align: center; margin-bottom: 2px; }
.sub-login { text-align: center; color: var(--suave); font-size: 13px; margin: 0 0 22px; }
.login-caixa .campo { margin-bottom: 14px; min-width: 0; }
.login-caixa button { width: 100%; margin-top: 6px; }

/* ----------------------------------------------------------- mobile --- */
@media (max-width: 720px) {
    .conteudo { padding: 16px 12px 50px; }
  /* Empilhada, a barra fica em duas linhas: carimbo em cima, botões ocupando a
     largura embaixo (é alvo de dedo, não de mouse). */
  .barra-dados { padding: 12px 12px 0; gap: 4px 12px; }
  /* Três botões com rótulo longo não cabem lado a lado em 390px: sem o wrap a
     barra estourava a largura e a PÁGINA inteira passava a rolar na horizontal.
     A base de 45% deixa dois por linha e joga o terceiro para baixo. */
  .acoes-dados { margin-left: 0; width: 100%; gap: 8px; flex-wrap: wrap; }
  .botao-atualizar, .botao-exportar, .botao-subtela {
    flex: 1 1 45%;
    justify-content: center;
    padding: 10px 12px;
  }
  .filtros { padding: 12px; gap: 10px; }
  .campo, .campo-largo { min-width: 100%; }
  /* No celular a tabela volta a crescer com a página: rolagem dentro de
     rolagem no toque atrapalha mais do que ajuda, e de lado o dedo arrasta
     direto. */
  .tabela-wrap { max-height: none; min-height: 0; }
  /* Empilhado, cada campo é uma linha: o espaçador do label só deixaria um
     vão em branco acima do botão. */
  .campo-botao::before { display: none; }
  .campo-botao button { width: 100%; }
  .rodape .raw-toggle { margin-left: 0; }
}

/* resumo da aba View */
.resumo-view{margin:14px 0 6px;color:#334155;font-size:.92rem}
.resumo-view .chip{display:inline-block;background:#eef2f7;border:1px solid #dbe3ec;
  border-radius:999px;padding:2px 10px;margin-left:6px;font-size:.85rem}

/* aba Insumos — diagnóstico das APIs */
h2.secao{font-size:1.05rem;margin:26px 0 10px;color:#0f2b46}
.sit{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:600;white-space:nowrap}
.sit-ok{background:#e7f6ec;color:#166534;border:1px solid #b7e4c7}
.sit-bloq{background:#fdecec;color:#991b1b;border:1px solid #f5c2c2}
.sit-lim{background:#fef6e0;color:#92400e;border:1px solid #fae0a6}
.sit-nao{background:#eef2f7;color:#475569;border:1px solid #dbe3ec}
.dim-nota{color:#64748b;font-size:.8rem}
.campos-lista{white-space:normal;max-width:520px;font-size:.78rem;color:#475569;line-height:1.45}

/* regras contábeis: centros de custo de cada grupo */
.grupo-membros{margin:2px 0 18px;line-height:2}
.chip-cc{display:inline-block;background:#eef2f7;border:1px solid #dbe3ec;border-radius:6px;
  padding:1px 8px;margin-right:5px;font-size:.8rem;font-family:ui-monospace,Consolas,monospace}

/* contagem da regra contábil no resumo da View */
.chip-ok{background:#e7f6ec;border-color:#b7e4c7;color:#166534}
.chip-falta{background:#fef6e0;border-color:#fae0a6;color:#92400e}

/* ── Subtela (modal) ───────────────────────────────────────────────────────
   Sem JavaScript: um checkbox escondido guarda o estado de aberto/fechado e o
   CSS reage a ele. O seletor precisa ser "+" (irmão ADJACENTE) — com "~" todo
   modal que viesse depois na página abriria junto. */
/* Na barra do topo, ao lado de Exportar/Atualizar: mesma forma que eles (a
   regra lá em cima), só o ícone e o cursor mudam — é ação de abrir, não de
   baixar. */
.botao-subtela { cursor: pointer; user-select: none; }
.botao-subtela::before { content: "▤"; font-size: 14px; line-height: 1; }
.botao-subtela:hover { background: var(--azul); color: #fff; }

.modal { display: none; }

.modal-toggle:checked + .modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* O fundo é um label: clicar fora fecha, sem script. */
.modal-fundo {
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 40, .55);
  cursor: pointer;
}

.modal-caixa {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1320px, 100%);
  max-height: 90vh;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(15, 26, 40, .3);
  overflow: hidden;
}

.modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid #e3e8ef;
}

.modal-topo h2 { margin: 0 0 4px; font-size: 18px; }
.modal-sub { margin: 0; font-size: 13px; color: #5a6b80; }

.modal-fechar {
  flex: none;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #d5dce6;
  background: #f7f9fc;
  color: #44546a;
  font-size: 20px;
  cursor: pointer;
  user-select: none;
}

.modal-fechar:hover { background: #ecf1f8; }

/* A rolagem é da tabela, não da caixa: o cabeçalho e o rodapé ficam fixos. */
.modal-tabela {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 0 22px;
}

.modal .alerta { margin: 12px 22px 0; }

.modal-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 22px 18px;
  border-top: 1px solid #e3e8ef;
  background: #f7f9fc;
}

.modal-rodape .nota { margin: 0; flex: 1 1 380px; }

@media (max-width: 640px) {
  .modal-toggle:checked + .modal { padding: 0; }
  .modal-caixa { max-height: 100vh; border-radius: 0; }
  .modal-tabela, .modal-topo, .modal-rodape { padding-left: 14px; padding-right: 14px; }
}

/* Os dois downloads da subtela. O .botao-exportar do topo da página é vazado;
   aqui o principal vem preenchido para os dois não se confundirem à distância —
   são arquivos diferentes e clicar no errado só se descobre ao abrir. */
.modal-botoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.modal-botoes .botao-exportar { background: var(--verde); color: #fff; }
.modal-botoes .botao-exportar:hover { filter: brightness(1.08); }

.modal-botoes .botao-secundario {
  background: #fff;
  color: var(--azul);
  border-color: #b7c6d8;
}

.modal-botoes .botao-secundario:hover {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  filter: none;
}

/* ── Tela de usuários ──────────────────────────────────────────────────── */
.alerta.ok { background: #e7f6ec; border-color: #b7e4c7; color: #166534; }

/* Ações dentro da linha da tabela: cada uma é um <form> próprio (POST + CSRF),
   e sem o flex o input e o botão quebrariam em duas linhas. */
.linha-acao { display: flex; gap: 6px; align-items: center; margin: 0; }
.linha-acao input {
  flex: 1;
  min-width: 120px;
  padding: 6px 8px;
  border: 1px solid #d5dce6;
  border-radius: 5px;
  font-size: 13px;
}

.botao-linha {
  padding: 6px 12px;
  border: 1px solid var(--azul);
  border-radius: 5px;
  background: #fff;
  color: var(--azul);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.botao-linha:hover { background: var(--azul); color: #fff; }

.botao-perigo { border-color: #d98080; color: var(--erro); }
.botao-perigo:hover { background: var(--erro); border-color: var(--erro); color: #fff; }


/* ══ MENU LATERAL ══════════════════════════════════════════════════════════
   Substituiu a barra de abas no topo (18/08/2026). Mesma estrutura do módulo
   do DP: sidebar fixa à esquerda, conteúdo deslocado por margin-left, e no
   celular ela vira gaveta comandada por um checkbox (sem JavaScript). */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sw);
  height: 100vh;
  background: var(--nav);
  color: var(--nav-txt);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.sidebar .marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.marca-logo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
}

.marca-txt { display: flex; flex-direction: column; line-height: 1.2; }
.marca-txt strong { color: #fff; font-size: .98rem; }
.marca-txt span { color: #94a3b8; font-size: .76rem; }

.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  flex: 1;
  overflow-y: auto;
}

.menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--nav-txt);
  font-weight: 500;
  font-size: .93rem;
  text-decoration: none;
}

.menu a .ic { width: 20px; text-align: center; opacity: .8; font-size: 1rem; }
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu a.ativo { background: #1d4ed8; color: #fff; }

.sair {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sair .quem { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sair .quem-nome {
  color: #fff;
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sair .quem-rot { color: #94a3b8; font-size: .72rem; }

.sair a {
  background: rgba(255, 255, 255, .08);
  border-radius: 7px;
  padding: 7px 12px;
  color: #e2e8f0;
  font-size: .85rem;
  flex-shrink: 0;
  text-decoration: none;
}

.sair a:hover { background: var(--erro); color: #fff; }

/* Conteúdo e barra de dados saem de baixo da sidebar. */
body.com-sidebar .conteudo,
body.com-sidebar .barra-dados { margin-left: var(--sw); }
body.com-sidebar .conteudo { max-width: none; }

.menu-toggle, .menu-abrir, .menu-backdrop { display: none; }

/* Até 992px a sidebar vira gaveta: fica fora da tela e entra pelo ☰. */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
  }
  .menu-abrir {
    display: flex;
    position: fixed;
    top: 12px;
    left: 12px;
    /* Abaixo da gaveta (40) e do backdrop (35): com a gaveta aberta o ☰ some
       atrás dela em vez de ficar por cima do logo, e o toque naquele ponto cai
       no backdrop, que fecha. Fechada, a gaveta está fora da tela e o ☰ recebe
       o clique normalmente. */
    z-index: 30;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: var(--nav);
    color: #fff;
    border-radius: 9px;
    cursor: pointer;
    font-size: 1.2rem;
  }
  .menu-toggle:checked ~ .sidebar { transform: translateX(0); }
  .menu-toggle:checked ~ .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 35;
  }
  /* Sem sidebar ocupando espaço, e a barra desce para não ficar sob o ☰. */
  body.com-sidebar .conteudo,
  body.com-sidebar .barra-dados { margin-left: 0; }
  body.com-sidebar .barra-dados { padding-left: 66px; }
}

/* ── Subtela "Atualizar API" ───────────────────────────────────────────────
   Reaproveita todo o modal da importação; só precisa ser mais estreita (são
   dois campos de data, não uma tabela de 9 colunas). */
.modal-caixa.modal-estreito { width: min(560px, 100%); }

.form-modal { display: flex; flex-direction: column; min-height: 0; }
.form-modal .nota { margin: 0; padding: 0 22px 4px; }

/* Sem a borda e o fundo do formulário de filtros da página: aqui ele já está
   dentro de uma caixa. */
.filtros-modal {
  border: none;
  background: none;
  box-shadow: none;
  padding: 18px 22px 6px;
  margin: 0;
}

/* ── Indicador de varredura em curso ───────────────────────────────────────
   A busca no Sienge leva de segundos a meio minuto. Enquanto roda, os botões
   dão lugar a este indicador — o usuário vê que está andando e não clica de
   novo (o que dispararia uma segunda varredura). */
.carregando { display: none; }

.form-modal.enviando .acoes-envio { display: none; }

.form-modal.enviando .carregando {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--azul);
  font-size: 14px;
}

.carregando small { display: block; font-weight: 400; color: var(--suave); }

.girando {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2.5px solid #d7e2f2;
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* Com a varredura em curso os campos ficam inertes: mudá-los não muda o que já
   foi enviado, e deixá-los ativos sugere que ainda dá para corrigir. */
.form-modal.enviando .filtros-modal { opacity: .55; pointer-events: none; }

/* Quem pede para reduzir animação vê um pulso suave em vez do giro. */
@media (prefers-reduced-motion: reduce) {
  .girando { animation: pulsar 1.4s ease-in-out infinite; }
  @keyframes pulsar { 50% { opacity: .35; } }
}