/* =====================================================================
   Sistema Rifesa Videira — folha de estilo MOBILE-FIRST.

   Quem mais usa este sistema está de pé ao lado de um caminhão, com o
   celular numa mão e uma bobina na outra. Por isso o padrão desta
   folha é o celular, e o desktop é o caso ampliado — não o contrário.

   Três regras que valem em toda a folha:

   1. ALVO DE TOQUE de 44px em qualquer coisa clicável. É o mínimo que
      um dedo acerta sem ampliar a tela.
   2. FONTE de 16px nos campos. Abaixo disso o iOS dá zoom sozinho ao
      focar o campo, e a pessoa perde o enquadramento da tela.
   3. NADA depende de hover. Em tela de toque não existe hover, então
      hover é só realce — nunca a única forma de ver ou alcançar algo.

   Tabelas viram CARDS abaixo de 760px: cada linha empilha, e o rótulo
   da coluna aparece à esquerda pelo atributo `data-rotulo` do <td>.
   ===================================================================== */

:root {
  --tinta: #16202b;
  --tinta-fraca: #5d6b7a;
  --fundo: #f4f6f8;
  --papel: #ffffff;
  --borda: #d7dee6;
  --azul: #1f5f9e;
  --azul-escuro: #17486f;
  --verde: #1d7a4c;
  --vermelho: #b3261e;
  --ambar: #9a6700;
  --ambar-fundo: #fff8e1;

  --toque: 44px;
  --raio: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fundo);
}

/* Instalada como PWA, a página ocupa a tela inteira — inclusive sob o
   entalhe do iPhone e a barra de gestos. Sem isto o cabeçalho fica
   atrás do relógio e a barra de ações, atrás do risquinho de baixo. */
.topo { padding-top: calc(10px + env(safe-area-inset-top)); }
.conteudo {
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
}

a { color: var(--azul); }

/* -- topo ---------------------------------------------------------- */

.topo {
  background: var(--azul-escuro);
  color: #fff;
  padding: 10px 14px;
}
.topo a { color: #fff; text-decoration: none; }

.topo-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--toque);
  position: relative;
}
.marca { font-size: 19px; letter-spacing: .3px; }
.marca strong { font-weight: 700; }

/* No CELULAR as abas somem: três abas largas comeriam a tela toda e
   ainda assim ficariam apertadas. Lá quem navega é o ☰. */
.abas { display: none; }

/* Menu ☰: <details> nativo, sem JavaScript, e por isso funciona mesmo
   se o script falhar. */
.menu-caixa > summary {
  list-style: none;
  cursor: pointer;
  min-height: var(--toque);
  min-width: var(--toque);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}
.menu-caixa > summary::-webkit-details-marker { display: none; }
.menu-caixa > summary::before { content: "☰"; font-size: 22px; }
.menu-caixa[open] > summary::before { content: "✕"; }
.menu-rotulo { display: none; }

.menu-painel { padding: 6px 0 2px; }
.menu-areas, .menu-secundario {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-painel a, .menu-painel button.link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--toque);
  padding: 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  width: 100%;
  text-align: left;
}
/* As três áreas vêm primeiro e maiores: são o que se procura no menu. */
.menu-areas a { font-size: 18px; font-weight: 600; }
.menu-secundario {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: 15px;
}
.menu-secundario form { margin: 0; }
.menu-painel .quem {
  opacity: .8;
  font-size: 13px;
  padding: 10px 4px 2px;
}
button.link {
  background: none; border: none; color: #fff; cursor: pointer;
  font: inherit; text-decoration: underline; padding: 0;
  min-height: var(--toque);
}

/* -- conteúdo ------------------------------------------------------ */

.conteudo { max-width: 1200px; margin: 0 auto; padding: 14px; }

h1 { font-size: 22px; margin: 0 0 4px; line-height: 1.25; }
h2 { font-size: 17px; margin: 22px 0 10px; }
.legenda { color: var(--tinta-fraca); margin: 0 0 16px; font-size: 15px; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
  margin-bottom: 14px;
}
.cartao.estreito { max-width: 620px; }
.cartao > h2:first-child { margin-top: 0; }

.painel-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.indicador {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px;
}
.indicador .rotulo {
  color: var(--tinta-fraca); font-size: 13px; display: block;
}
.indicador .valor {
  font-size: 26px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; display: block;
}
.indicador .unidade { font-size: 13px; color: var(--tinta-fraca); }

/* -- navegação interna da área ------------------------------------- */

/* Cada área tem no máximo quatro destinos. Eles ficam em uma faixa
   rolável: no celular a rolagem horizontal é preferível a quebrar em
   duas linhas, porque mantém a altura da tela previsível. */
.subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -14px 16px;
  padding: 0 14px 2px;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta-fraca);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.subnav a.ativa {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  color: #fff;
}

/* -- segmentação de dados ------------------------------------------ */

/* Filtro por toque, não por formulário. Cada valor é um alvo de 44px
   que já leva o resultado junto — não existe "aplicar filtro". */
.segmentacoes { margin-bottom: 14px; }
.segmentacao + .segmentacao { margin-top: 10px; }
.segmentacao > .rotulo {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--tinta-fraca);
  margin-bottom: 6px;
}
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip.ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.segmentacoes .limpar {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}

/* Multisseleção (18/09/2026), sem mudar o desenho: várias pílulas podem
   estar .ativo ao mesmo tempo na mesma faixa. Pílula sem bobina no
   contexto das outras faixas fica apagada — mas continua um link e
   continua clicável: apagada é "não há resultado agora", não
   "proibido". Marcada e sem bobina continua com a cara de marcada. */
.chip.indisponivel {
  background: var(--fundo, #f4f6f8);
  border-style: dashed;
  color: var(--tinta-fraca);
  font-weight: 500;
}
.chip.ativo.indisponivel {
  background: var(--azul);
  border: 1px dashed rgba(255, 255, 255, .8);
  color: #fff;
  font-weight: 600;
}

@media (min-width: 761px) {
  .chips { flex-wrap: wrap; overflow-x: visible; }
  .segmentacao { display: flex; align-items: flex-start; gap: 12px; }
  .segmentacao > .rotulo { flex: 0 0 96px; padding-top: 12px; margin: 0; }
  .segmentacao > .chips { flex: 1; min-width: 0; }
}

/* -- tabelas ------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; background: var(--papel); }
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid var(--borda); }
th {
  background: #eef2f6; font-size: 12px; text-transform: uppercase;
  letter-spacing: .3px; white-space: nowrap;
}
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; background: #eef2f6; }
code { font-family: "Cascadia Mono", Consolas, monospace; font-size: 14px; }

/* Tabela vira lista de cards no celular. O rótulo da coluna vem do
   atributo data-rotulo do próprio <td>, então nenhuma informação
   depende de o cabeçalho estar visível. */
@media (max-width: 760px) {
  /* Em modo card nada vaza para o lado, então o container de rolagem
     horizontal sai de cena. Mantê-lo criaria um contexto de rolagem
     próprio e a lista apareceria cortada dentro do cartão. */
  .rolagem { overflow: visible; }

  table.cartoes, table.cartoes thead, table.cartoes tbody,
  table.cartoes tr, table.cartoes td, table.cartoes tfoot {
    display: block;
    width: 100%;
  }
  table.cartoes thead { display: none; }
  table.cartoes tr {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: 10px;
    padding: 4px 0;
    background: var(--papel);
  }
  table.cartoes td {
    border: none;
    border-bottom: 1px dashed #e8edf2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    padding: 9px 12px;
  }
  table.cartoes td:last-child { border-bottom: none; }
  table.cartoes td::before {
    content: attr(data-rotulo);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--tinta-fraca);
    text-align: left;
    flex: 0 0 auto;
  }
  /* Célula sem rótulo (a de ações) ocupa a linha inteira. */
  table.cartoes td[data-rotulo=""]::before,
  table.cartoes td:not([data-rotulo])::before { content: none; }
  table.cartoes td.acoes-celula {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    background: #fafbfc;
  }
  table.cartoes td.destaque {
    font-size: 18px;
    font-weight: 700;
  }
  /* Célula com campo de digitação: o rótulo sobe e o campo ocupa a
     linha inteira. Campo espremido ao lado do rótulo é onde o dedo
     erra. */
  table.cartoes td:has(input, select, textarea) {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 6px;
  }
  table.cartoes td:has(input, select, textarea)::before {
    text-align: left;
  }
  table.cartoes td .linha-campos { width: 100%; }
  table.cartoes tfoot tr { background: #eef2f6; }
}

@media (min-width: 761px) {
  tbody tr:hover { background: #f8fafc; }
}

/* -- formulários --------------------------------------------------- */

form .campo { margin-bottom: 14px; }
label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 15px; }

input[type=text], input[type=number], input[type=password],
input[type=search], input[type=datetime-local], select, textarea {
  width: 100%;
  max-width: 100%;
  /* 16px evita o zoom automático do iOS ao focar o campo. */
  font-size: 16px;
  font-family: inherit;
  padding: 11px 12px;
  min-height: var(--toque);
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: #fff;
}
select { appearance: none; background-image: none; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(31, 95, 158, .35);
  border-color: var(--azul);
}
.ajuda { font-size: 14px; color: var(--tinta-fraca); margin-top: 4px; }
.erro { color: var(--vermelho); font-size: 14px; margin-top: 4px; }

.linha-campos { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.linha-campos .campo { flex: 1 1 140px; margin-bottom: 0; min-width: 0; }
.linha-campos .campo.largo { flex: 2 1 220px; }
.linha-campos .campo.botao-campo { flex: 1 1 100%; }

@media (min-width: 761px) {
  .linha-campos .campo.botao-campo { flex: 0 0 auto; }
}

/* -- botões -------------------------------------------------------- */

.botao, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque);
  padding: 11px 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid var(--azul);
  border-radius: 6px;
  background: var(--azul);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.botao.secundario, button.secundario { background: #fff; color: var(--azul); }
.botao.perigo, button.perigo {
  background: var(--vermelho); border-color: var(--vermelho); color: #fff;
}
.botao.sucesso, button.sucesso {
  background: var(--verde); border-color: var(--verde); color: #fff;
}
.botao.grande { min-height: 56px; padding: 14px 24px; font-size: 18px; }
.botao.pequeno, button.pequeno {
  min-height: 38px; padding: 7px 12px; font-size: 14px; font-weight: 600;
}
.botao[disabled], button[disabled] {
  opacity: .5; cursor: not-allowed;
}

@media (min-width: 761px) {
  .botao:hover, button:hover:not([disabled]) { filter: brightness(.94); }
}

.acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 14px; }
.acoes form { margin: 0; }
.acoes > .botao, .acoes > form > button { flex: 1 1 160px; }

@media (min-width: 761px) {
  .acoes > .botao, .acoes > form > button { flex: 0 0 auto; }
}

/* Barra de ação principal fixa: a ação mais importante da tela fica
   sempre ao alcance do polegar, sem rolar até o fim da lista. */
.barra-fixa {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  padding: 10px calc(14px + env(safe-area-inset-right))
           calc(10px + env(safe-area-inset-bottom))
           calc(14px + env(safe-area-inset-left));
  margin: 14px calc(-14px - env(safe-area-inset-right)) 0
          calc(-14px - env(safe-area-inset-left));
  background: rgba(244, 246, 248, .96);
  border-top: 1px solid var(--borda);
  backdrop-filter: blur(6px);
}
.barra-fixa > * { flex: 1; }
.barra-fixa form { display: flex; }
.barra-fixa form > button { width: 100%; }

/* -- avisos e selos ------------------------------------------------ */

.avisos { list-style: none; padding: 0; margin: 0 0 16px; }
.aviso {
  padding: 12px 14px; border-radius: 6px; margin-bottom: 8px;
  border-left: 5px solid var(--azul); background: #e8f0f8;
  font-size: 15px;
}
.aviso.success { border-color: var(--verde); background: #e6f4ec; }
.aviso.error { border-color: var(--vermelho); background: #fbe9e7; }
.aviso.warning { border-color: var(--ambar); background: var(--ambar-fundo); }

.selo {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  background: #e6ebf1; color: var(--tinta-fraca);
}
.selo.em_andamento, .selo.aberto { background: #e8f0f8; color: var(--azul-escuro); }
.selo.aguardando_precificacao, .selo.rascunho { background: var(--ambar-fundo); color: var(--ambar); }
.selo.concluido, .selo.disponivel, .selo.precificado, .selo.processado {
  background: #e6f4ec; color: var(--verde);
}
.selo.cancelado, .selo.cancelada { background: #fbe9e7; color: var(--vermelho); }
.selo.etiquetada { background: #e8f0f8; color: var(--azul); }
.selo.aguardando_conferencia { background: #e8f0f8; color: var(--azul-escuro); }
.selo.em_correcao { background: #fbe9e7; color: var(--vermelho); }
.selo.etiqueta_pendente { background: var(--ambar-fundo); color: var(--ambar); }
.selo.etiqueta_impressa { background: #e6f4ec; color: var(--verde); }

/* -- etapas do recebimento ----------------------------------------- */

/* Os dois OKs lado a lado, com a etapa atual em destaque. É o que deixa
   claro, sem ler texto, que "Finalizar lançamento" não é o fim. No
   celular as etapas empilham; no PC ficam em linha. */
.etapas {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: grid; gap: 6px; grid-template-columns: 1fr;
}
.etapas li {
  display: grid; grid-template-columns: 32px 1fr; column-gap: 10px;
  align-items: center;
  padding: 8px 12px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--papel);
  color: var(--tinta-fraca);
}
.etapas .numero-etapa {
  grid-row: span 2; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: #e6ebf1; color: var(--tinta-fraca);
}
.etapas .nome-etapa { font-weight: 700; }
.etapas .ok-etapa { font-size: 13px; }
.etapas li.feita .numero-etapa { background: #e6f4ec; color: var(--verde); }
.etapas li.atual {
  border: 2px solid var(--azul); color: var(--tinta); background: #f4f8fc;
}
.etapas li.atual .numero-etapa { background: var(--azul); color: #fff; }
.etapas li.atual.correcao { border-color: var(--vermelho); background: #fdf3f2; }
.etapas li.atual.correcao .numero-etapa { background: var(--vermelho); }

@media (min-width: 761px) {
  .etapas { grid-template-columns: repeat(3, 1fr); }
}

/* -- conferência --------------------------------------------------- */

.pendentes {
  margin-top: 14px; padding: 12px 14px;
  border-left: 5px solid var(--ambar); background: var(--ambar-fundo);
  border-radius: 6px;
}
.pendentes h3 { margin: 0 0 6px; font-size: 17px; }
.lista-pendentes { margin: 0 0 12px; padding-left: 20px; }
.lista-pendentes li { margin: 3px 0; }
.texto-alerta { color: var(--ambar); }
.acoes.impressao { margin: 8px 0; }
.contador {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--ambar); color: #fff;
  font-size: 12px; font-weight: 700; text-align: center; line-height: 20px;
}
.botao.alerta { background: var(--ambar); border-color: var(--ambar); color: #fff; }
.botao.desabilitado { opacity: 0.55; }
.selo.removida_ajuste { background: #f0e6e5; color: #7d1a14; }
.selo.reservada { background: #ede7f6; color: #5b3fa8; }
.selo.expedida { background: #e3e8ee; color: #43546a; }

.destaque-atencao {
  border-left: 5px solid var(--ambar); background: var(--ambar-fundo);
  padding: 12px 14px; border-radius: 6px; margin-bottom: 14px;
  font-size: 15px;
}
.destaque-atencao ul { margin: 8px 0 0; padding-left: 20px; }

/* O aviso que NÃO pode passar despercebido: etiqueta antiga que precisa
   ser descartada, e saída de bobina do estoque. A especificação pede,
   com todas as letras, que isto não seja "mensagem pequena" — duas
   etiquetas com o mesmo código e pesos diferentes circulando no pátio é
   pior do que nenhuma. Por isso ele é vermelho, ocupa a largura toda e
   vem ANTES do formulário, não depois. */
.destaque-perigo {
  border: 2px solid var(--vermelho);
  border-left-width: 6px;
  background: #fbe9e7;
  color: #7d1a14;
  padding: 14px 16px;
  border-radius: var(--raio);
  margin-bottom: 16px;
  font-size: 16px;
}
.destaque-perigo p { margin: 8px 0 0; }
.destaque-perigo strong { font-size: 17px; }

/* O contador das duas áreas do recebimento. "12 bobinas | 8.430,50 kg"
   precisa ser lido de relance, de pé, ao lado do caminhão. */
.resumo-lote {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--tinta-fraca);
}
.resumo-lote.forte {
  color: var(--verde);
  font-size: 19px;
}

.codigo-grande {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Ação de exceção ao lado da navegação da área. */
.acoes-area { margin: 0 0 14px; }

.entrar { max-width: 400px; margin: 30px auto; }

/* -- aviso de conexão ---------------------------------------------- */

/* Barra fina no topo quando o aparelho perde a rede. O sistema é
   online-first: avisar cedo evita que alguém bipe dez bobinas e
   descubra no fim que nada foi salvo. */
.aviso-offline {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--vermelho);
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}

/* -- leitor de código de barras ------------------------------------ */

.bipar {
  background: var(--papel);
  border: 2px solid var(--azul);
  border-radius: var(--raio);
  padding: 14px;
  margin-bottom: 14px;
}
.bipar label { font-size: 16px; }
.bipar input {
  font-size: 20px;
  font-family: "Cascadia Mono", Consolas, monospace;
  letter-spacing: .5px;
  min-height: 54px;
}

/* Feedback da bipada. Quem está bipando olha a tela de relance, com a
   bobina na outra mão: o retorno de cada leitura precisa ser legível a
   um braço de distância, não uma linha de texto miúdo. */
.pagina-scanner .avisos { margin-bottom: 14px; }
.pagina-scanner .aviso {
  font-size: 19px;
  font-weight: 600;
  padding: 16px 18px;
  border-left-width: 8px;
  line-height: 1.3;
}

/* O painel do resultado, colado no leitor. Verde ou vermelho ocupando
   a largura toda: a resposta tem de ser vista, não lida. */
.bipagem {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 14px;
  border: 2px solid;
}
.bipagem .marca {
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  flex: 0 0 auto;
}
.bipagem .corpo { min-width: 0; }
.bipagem .titulo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.2;
}
.bipagem .codigo { margin-top: 4px; }
.bipagem .codigo code { font-size: 18px; font-weight: 700; }
.bipagem .detalhe { margin-top: 4px; font-size: 15px; }

.bipagem-ok {
  background: #e6f4ec;
  border-color: var(--verde);
  color: #12522f;
}
.bipagem-ok .marca { color: var(--verde); }

.bipagem-erro {
  background: #fbe9e7;
  border-color: var(--vermelho);
  color: #7f1a14;
}
.bipagem-erro .marca { color: var(--vermelho); }

/* Quantas já entraram, sem rolar. A mesma informação do rodapé,
   repetida no alto de propósito: lá embaixo ela acompanha o botão de
   fechar; aqui responde "quantas já bipei?" durante a separação. */
.contador-carrinho {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-variant-numeric: tabular-nums;
}
.contador-carrinho .quantidade { font-size: 20px; font-weight: 700; }
.contador-carrinho .peso { font-size: 22px; font-weight: 700; }
.contador-carrinho .separador { color: var(--borda); }

/* -- página Início ------------------------------------------------- */

/* Um menu visual e nada mais. Botões grandes porque a pergunta é uma
   só, e a resposta tem de caber num toque. */
.atalhos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
.atalho {
  display: block;
  padding: 20px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 6px solid var(--azul);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--tinta);
  min-height: 88px;
}
.atalho .rotulo {
  display: block;
  font-size: 21px;
  font-weight: 700;
  color: var(--azul-escuro);
}
.atalho .descricao {
  display: block;
  margin-top: 4px;
  color: var(--tinta-fraca);
  font-size: 15px;
}
.atalho-estoque { border-left-color: var(--verde); }
.atalho-expedicao { border-left-color: var(--ambar); }
.atalho-cadastros, .atalho-dashboard { border-left-color: var(--tinta-fraca); }

/* Feedback ao TOCAR. Em tela de toque não existe hover, e o realce
   cinza que o navegador dá por conta própria some no iOS quando o
   elemento tem fundo próprio — então o afundamento é declarado aqui.
   Fica FORA de media query de propósito: é o celular que precisa
   dele. */
.atalho:active {
  background: #eef2f6;
  border-color: var(--azul);
  transform: translateY(1px);
}

@media (min-width: 761px) {
  .atalhos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .atalho:hover { border-color: var(--azul); background: #f8fafc; }
}

/* -- rodapé de totais ---------------------------------------------- */

/* O que o carrinho tem AGORA fica sempre visível, junto do botão que
   fecha a expedição. Rolar a lista para descobrir o peso, com o
   caminhão esperando, é justamente o que se quer evitar. */
.rodape-acao {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 16px calc(-14px - env(safe-area-inset-right)) 0
          calc(-14px - env(safe-area-inset-left));
  padding: 12px calc(14px + env(safe-area-inset-right))
           calc(12px + env(safe-area-inset-bottom))
           calc(14px + env(safe-area-inset-left));
  background: rgba(244, 246, 248, .97);
  border-top: 1px solid var(--borda);
  backdrop-filter: blur(6px);
}
.rodape-totais {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.rodape-totais .quantidade { font-size: 20px; font-weight: 700; }
.rodape-totais .peso { font-size: 24px; font-weight: 700; }
.rodape-acao .acoes { margin-top: 0; }

@media (min-width: 761px) {
  .rodape-acao {
    position: static; background: none; border-top: 1px solid var(--borda);
    backdrop-filter: none; margin: 18px 0 0; padding: 14px 0 0;
  }
}

/* -- blocos secundários -------------------------------------------- */

/* Histórico, auditoria e envios de e-mail continuam existindo — só
   deixam de ocupar a tela de quem está operando. Ficam a um toque. */
.secundario {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 14px;
}
.secundario > summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--toque);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 600;
  color: var(--tinta-fraca);
}
.secundario > summary::-webkit-details-marker { display: none; }
.secundario > summary::before { content: "▸"; font-size: 14px; }
.secundario[open] > summary::before { content: "▾"; }
.secundario > summary:hover { color: var(--tinta); }
.secundario .corpo { padding: 0 14px 14px; }
.secundario .corpo > :first-child { margin-top: 0; }

/* -- desktop ------------------------------------------------------- */

@media (min-width: 761px) {
  body { font-size: 15px; }
  .conteudo { padding: 20px; }
  .topo { padding-top: 10px; }
  h1 { font-size: 25px; }
  .cartao { padding: 18px; }

  .topo { padding: 0 20px; }
  .topo-barra { max-width: 1200px; margin: 0 auto; gap: 28px; min-height: 56px; }

  /* Aqui as três abas são a navegação, e ficam com cara de aba mesmo:
     sublinhado grosso na ativa, na base da barra. */
  .abas { display: flex; gap: 4px; flex: 1; align-self: stretch; }
  .abas a {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 4px solid transparent;
    color: rgba(255, 255, 255, .82);
  }
  .abas a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); }
  .abas a.ativa { color: #fff; border-bottom-color: #fff; }

  /* O ☰ vira um menu suspenso discreto, só com o que é secundário. */
  .menu-caixa { flex: 0 0 auto; position: relative; }
  .menu-caixa > summary::before { content: "⋯"; font-size: 24px; }
  .menu-caixa[open] > summary::before { content: "⋯"; }
  .menu-rotulo { display: inline; font-size: 14px; }
  .menu-painel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 220px;
    padding: 6px;
    background: var(--azul-escuro);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--raio);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
  }
  /* As áreas já são abas no desktop; repeti-las aqui seria ruído. */
  .menu-areas { display: none; }
  .menu-secundario { margin-top: 0; padding-top: 0; border-top: none; }
  .menu-painel a, .menu-painel button.link {
    min-height: 40px; padding: 0 10px; border-bottom: none; border-radius: 6px;
  }
  .menu-painel a:hover, .menu-painel button.link:hover {
    background: rgba(255, 255, 255, .12);
  }
  .menu-painel .quem {
    border-top: 1px solid rgba(255, 255, 255, .2);
    margin-top: 6px; padding: 8px 10px 2px; display: block;
  }

  button.link { min-height: 0; }
  .barra-fixa {
    position: static; background: none; border-top: none;
    backdrop-filter: none; margin: 14px 0 0; padding: 0;
  }
  .barra-fixa > * { flex: 0 0 auto; }
}

/* =====================================================================
   DASHBOARD GERENCIAL
   =====================================================================
   Área PC-FIRST, ao contrário do resto desta folha. Quem usa a
   Dashboard está sentado, num monitor, com mouse, comparando colunas —
   não de pé ao lado de um caminhão. O layout parte do desktop; o
   celular é o caso reduzido (menu vira faixa rolável, segmentações
   empilham, régua e tabelas rolam para o lado).

   Visual de BI interno, não de template: fundo cinza-claro, cartões
   brancos com borda discreta e sem sombra, azul como único destaque,
   cabeçalho de tabela azul-claro, pouco arredondamento.

   Tudo aqui mora sob `.dashboard` / `.pagina-dashboard`: nada vaza para
   as telas de operação.
   ===================================================================== */

.pagina-dashboard {
  --dash-azul-claro: #e9f1f9;
  --dash-azul-borda: #b9cfe4;
  --dash-cinza: #9aa5b1;
  --dash-raio: 3px;
}

.dashboard { display: block; font-size: 14px; }
.dashboard h1 { font-size: 20px; margin: 0; }
.dashboard h2 { font-size: 15px; margin: 18px 0 8px; }
.dashboard .legenda { font-size: 13px; margin: 0 0 10px; }
.dashboard .cartao {
  border-radius: var(--dash-raio);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.dashboard .cartao-titulo { margin: 0 0 8px; }
.dashboard .com-espaco { margin-top: 10px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.dashboard a:focus-visible,
.dashboard button:focus-visible,
.dashboard input:focus-visible,
.dashboard th:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}

/* -- menu lateral --------------------------------------------------- */

.dash-lateral {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -14px 12px;
  padding: 0 14px 4px;
}
.dash-lateral::-webkit-scrollbar { display: none; }
.dash-lateral-titulo { display: none; }
.dash-lateral a {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: var(--dash-raio);
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.dash-lateral a.ativa {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  color: #fff;
}

/* -- título e subabas ---------------------------------------------- */

.dash-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 20px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 10px;
}
.dash-cabecalho h1 { padding-bottom: 7px; }
.dash-abas {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.dash-abas::-webkit-scrollbar { display: none; }
.dash-abas a {
  flex: 0 0 auto;
  padding: 8px 14px 7px;
  color: var(--tinta-fraca);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.dash-abas a:hover { color: var(--tinta); background: var(--dash-azul-claro); }
.dash-abas a.ativa { color: var(--azul-escuro); border-bottom-color: var(--azul); }

/* -- faixa de filtros ------------------------------------------------ */

/* Não é um cartão: é a "planilha" onde as caixas ficam, como os objetos
   de filtro sobre uma Tabela Dinâmica. Cada componente tem a própria
   borda. */
.painel-filtros {
  margin-bottom: 12px;
  --excel-borda: #c8ced6;
  --excel-borda-item: #d4d9df;
  --excel-cabecalho: #f3f6fa;
  --excel-azul: #2f6db3;
  --excel-azul-escuro: #245a96;
  --excel-azul-hover: #e6eff9;
  --excel-cinza-fundo: #f1f3f5;
  --excel-cinza-texto: #a3abb4;
}
.sem-periodo {
  font-size: 13px;
  color: var(--tinta-fraca);
  background: var(--papel);
  border: 1px solid var(--excel-borda);
  border-left: 3px solid var(--excel-borda);
  padding: 6px 10px;
  margin-bottom: 8px;
}

.botao-filtro {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--excel-azul);
  border-radius: 2px;
  background: var(--papel);
  color: var(--excel-azul);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.botao-filtro:hover { background: var(--excel-azul-hover); }
.botao-filtro.discreto { border-color: var(--excel-borda); color: var(--tinta-fraca); }
.botao-filtro.desabilitado { border-color: var(--excel-borda-item); color: var(--excel-cinza-texto); cursor: default; }
.botao-filtro.desabilitado:hover { background: var(--papel); }

/* O botão "Limpar filtro" do Excel: funil com X, pequeno, no cabeçalho.
   Apagado quando não há o que limpar. */
.limpar-filtro {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #4b5561;
}
.limpar-filtro .x { stroke: #c62828; }
a.limpar-filtro:hover { background: #fdeceb; border-color: #f1b8b4; }
.limpar-filtro.inativo { color: #c3c9d0; }
.limpar-filtro.inativo .x { stroke: #d6dade; }

/* Barra segmentada compacta: atalhos, escala e ordenação. */
.barra-segmentada, .controle-segmentado {
  display: inline-flex;
  border: 1px solid var(--excel-borda, #c8ced6);
  border-radius: 2px;
  background: var(--papel);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.barra-segmentada::-webkit-scrollbar { display: none; }
.barra-segmentada a, .controle-segmentado a {
  padding: 2px 8px;
  font-size: 12px;
  line-height: 18px;
  color: #3a4552;
  text-decoration: none;
  border-right: 1px solid var(--excel-borda-item, #d4d9df);
  white-space: nowrap;
}
.barra-segmentada a:last-child, .controle-segmentado a:last-child { border-right: 0; }
.barra-segmentada a:hover, .controle-segmentado a:hover { background: var(--excel-azul-hover, #e6eff9); }
.barra-segmentada a.ativo, .controle-segmentado a.ativa {
  background: var(--excel-azul, #2f6db3);
  color: #fff;
}
.barra-segmentada.escalas a { font-size: 11px; letter-spacing: .3px; }
.controle-segmentado { margin-bottom: 10px; }

/* -- linha do tempo (Excel) ----------------------------------------- */

.linha-tempo {
  background: var(--papel);
  border: 1px solid var(--excel-borda);
  margin-bottom: 8px;
}
.linha-tempo-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 5px 8px 4px;
  border-bottom: 1px solid #e4e8ed;
}
.linha-tempo-identidade {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-right: auto;
  min-width: 0;
}
.linha-tempo-titulo {
  font-size: 13px;
  font-weight: 600;
  color: #2b3542;
}
.linha-tempo-intervalo-aplicado {
  font-size: 13px;
  font-weight: 700;
  color: var(--excel-azul-escuro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.linha-tempo-intervalo-aplicado .seta { margin: 0 3px; color: var(--tinta-fraca); font-weight: 400; }
.linha-tempo-detalhe { font-size: 12px; color: var(--tinta-fraca); }
.linha-tempo-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.linha-tempo-datas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--tinta-fraca);
  margin: 0;
}
.linha-tempo-datas label { display: inline-flex; align-items: center; gap: 3px; margin: 0; font-weight: 400; }
.dashboard .linha-tempo-datas input {
  min-height: 22px;
  height: 22px;
  width: 118px;
  padding: 0 4px;
  font-size: 12px;
  border: 1px solid var(--excel-borda);
  border-radius: 2px;
}
.linha-tempo-datas button {
  height: 22px;
  min-height: 22px;
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--excel-azul);
  background: var(--papel);
  border: 1px solid var(--excel-borda);
  border-radius: 2px;
  cursor: pointer;
}
.linha-tempo-datas button:hover { background: var(--excel-azul-hover); }

/* A régua: anos em cima, meses (ou dias) no meio, barra contínua
   embaixo. Sem vão entre os blocos — é uma régua, não botões. */
.linha-tempo-regua {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  padding: 2px 8px 6px;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: #c8ced6 transparent;
}
.linha-tempo-regua .bloco {
  flex: 1 0 46px;
  min-width: 46px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #56606b;
}
.linha-tempo-regua.escala-dia .bloco { flex-basis: 26px; min-width: 26px; }
.linha-tempo-regua.escala-ano .bloco { flex-basis: 80px; }
.linha-tempo-regua .bloco-marcador {
  height: 15px;
  font-size: 11px;
  font-weight: 700;
  color: #2b3542;
  white-space: nowrap;
  overflow: visible;
  padding-left: 3px;
}
.linha-tempo-regua .bloco.inicio-grupo .bloco-marcador { border-left: 1px solid #b9c1ca; }
.linha-tempo-regua .bloco-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  line-height: 16px;
}
.linha-tempo-regua .bloco-barra {
  display: block;
  height: 14px;
  margin-top: 1px;
  background: #dde3ea;
  border-right: 1px solid #fff;
}
.linha-tempo-regua .bloco.vazio .bloco-barra { background: #eef1f4; }
.linha-tempo-regua .bloco.vazio .bloco-rotulo { color: #a3abb4; }
.linha-tempo-regua .bloco:hover .bloco-barra { background: #b8cde6; }
.linha-tempo-regua .bloco:hover .bloco-rotulo { color: #2b3542; }
.linha-tempo-regua .bloco.selecionado .bloco-barra,
.linha-tempo-regua .bloco.previa .bloco-barra {
  background: var(--excel-azul);
  border-right-color: var(--excel-azul);
}
.linha-tempo-regua .bloco.selecionado .bloco-rotulo { color: var(--excel-azul-escuro); font-weight: 700; }
.linha-tempo-regua .bloco.ponta-inicio .bloco-barra { border-radius: 7px 0 0 7px; }
.linha-tempo-regua .bloco.ponta-fim .bloco-barra { border-radius: 0 7px 7px 0; border-right-color: #fff; }
.linha-tempo-regua .bloco.ponta-inicio.ponta-fim .bloco-barra { border-radius: 7px; }
.linha-tempo-regua .bloco.previa .bloco-barra { background: #7aa6d8; border-radius: 0; }
.linha-tempo-regua .bloco.atual .bloco-rotulo { text-decoration: underline; }
.linha-tempo-regua .bloco:focus-visible { outline-offset: -2px; }

/* -- segmentações (Excel) ------------------------------------------- */

.dash-segmentacoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.segmentador {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--excel-borda);
  background: var(--papel);
  min-width: 0;
}
.segmentador.com-selecao { border-color: #9fb9d8; }
.segmentador-cabecalho {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 4px 0 8px;
  background: var(--excel-cabecalho);
  border-bottom: 1px solid #e1e6ec;
}
.segmentador-titulo {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  color: #2b3542;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard input.segmentador-busca {
  flex: 0 1 96px;
  width: 96px;
  min-width: 50px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0 5px;
  font-size: 12px;
  border: 1px solid var(--excel-borda);
  border-radius: 2px;
  background: #fff;
}

/* Os itens: botões retangulares de borda fina, como os do Excel. Uma
   coluna para nomes; duas para gramatura e largura. A caixa mostra seis
   linhas e rola por dentro — o cabeçalho (e o botão de limpar) não sai
   do lugar. */
.segmentador-opcoes {
  --item: 22px;
  --espaco: 3px;
  --visiveis: 6;
  list-style: none;
  margin: 0;
  padding: 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco);
  align-content: start;
  max-height: calc(var(--item) * var(--visiveis) + var(--espaco) * (var(--visiveis) - 1) + 10px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c8ced6 transparent;
}
.segmentador-opcoes.colunas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmentador-opcoes::-webkit-scrollbar { width: 8px; }
.segmentador-opcoes::-webkit-scrollbar-thumb { background: #c8ced6; border-radius: 4px; }
.segmentador-opcoes li { margin: 0; min-width: 0; }
.segmentador-opcoes li[hidden] { display: none; }
.segmentador-opcoes li.vazio { grid-column: 1 / -1; font-size: 12px; color: var(--tinta-fraca); padding: 2px; }

.opcao {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--item, 22px);
  padding: 0 6px 0 4px;
  border: 1px solid var(--excel-borda-item);
  border-radius: 2px;
  background: #fff;
  color: #26303b;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
}
.opcao .marca {
  flex: 0 0 10px;
  width: 10px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.opcao .texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opcao:hover { background: var(--excel-azul-hover); border-color: #a9c3e2; }
.opcao.marcada {
  background: var(--excel-azul);
  border-color: var(--excel-azul-escuro);
  color: #fff;
}
.opcao.marcada:hover { background: var(--excel-azul-escuro); }
/* Sem dado no contexto: cinza e esmaecido, mas clicável (como no Excel). */
.opcao.indisponivel {
  background: var(--excel-cinza-fundo);
  border-color: #e3e6ea;
  color: var(--excel-cinza-texto);
}
.opcao.indisponivel:hover { background: #e9edf1; border-color: #cfd5dc; color: #7c8792; }
/* Marcado e sem dado: continua MARCADO, com o mesmo azul e o mesmo ✓.
   Até 15/09/2026 ele ficava azul-claro e riscado — e, com o estoque
   real (tipos que quase não compartilham gramatura nem largura), quase
   toda multisseleção deixava a escolha anterior com cara de desmarcada:
   parecia que o segundo clique substituía o primeiro. "Sem dados" agora
   é só um aviso pequeno à direita e uma borda tracejada por dentro. */
.opcao.indisponivel.marcada {
  background: var(--excel-azul);
  border-color: var(--excel-azul-escuro);
  color: #fff;
  outline: 1px dashed rgba(255, 255, 255, .75);
  outline-offset: -4px;
}
.opcao.indisponivel.marcada:hover { background: var(--excel-azul-escuro); color: #fff; }
.opcao.indisponivel.marcada::after {
  content: "sem dados";
  margin-left: auto;
  padding-left: 4px;
  font-size: 10px;
  font-style: italic;
  white-space: nowrap;
  opacity: .85;
}

/* O resumo: uma caixa discreta, sem repetir o que os slicers mostram. */
.filtros-ativos {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--excel-borda);
  background: var(--papel);
  font-size: 12px;
  min-width: 0;
}
.filtros-ativos-cabecalho {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  background: var(--excel-cabecalho);
  border-bottom: 1px solid #e1e6ec;
  font-size: 13px;
  font-weight: 600;
  color: #2b3542;
}
.filtros-ativos-cabecalho strong { margin-left: 4px; color: var(--excel-azul-escuro); }
.filtros-ativos-lista {
  list-style: none;
  margin: 0;
  padding: 5px 8px 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.filtros-ativos-lista li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 19px;
}
.filtros-ativos-lista span { color: var(--tinta-fraca); }
.filtros-ativos-acoes { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 7px; }

/* -- KPIs: faixa compacta ------------------------------------------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.kpi {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul);
  border-radius: var(--dash-raio);
  padding: 7px 10px;
  min-width: 0;
}
.kpi .rotulo {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--tinta-fraca);
}
.kpi .valor {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi .valor.menor { font-size: 18px; }
.kpi .unidade { font-size: 12px; color: var(--tinta-fraca); }
.kpi.sem-dado { border-left-color: var(--borda); }
.kpi.sem-dado .valor { color: var(--tinta-fraca); font-weight: 600; font-size: 15px; }

.secao-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 16px; }
.secao-titulo h2 { margin: 0 0 6px; }
.secao-titulo .legenda { margin: 0 0 6px; }

/* -- ausência de dado ------------------------------------------------ */

/* Ausência NÃO é zero. Zero é uma afirmação — a de que se vendeu nada;
   ausência é "não há como saber". */
.sem-dado-aviso {
  background: #f8fafc;
  border: 1px dashed var(--borda);
  border-radius: var(--dash-raio, 4px);
  padding: 14px;
  color: var(--tinta-fraca);
  text-align: center;
  font-size: 14px;
  margin-bottom: 12px;
}

/* -- gráficos (CSS e SVG, sem biblioteca) ---------------------------- */

.barras { margin: 2px 0 0; }
.barra-linha {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) 3fr minmax(100px, auto);
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
}
.barra-linha .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-linha .trilho { background: #eef2f6; height: 14px; overflow: hidden; }
.barra-linha .preenchida { background: var(--azul); height: 100%; }
.barra-linha .numero { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.grafico-cartao { padding-bottom: 6px; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; margin-bottom: 4px; }
.grafico-legenda .serie::before {
  content: ""; display: inline-block; width: 14px; height: 3px;
  vertical-align: middle; margin-right: 5px;
}
.grafico-legenda .serie.compra::before { background: var(--ambar); }
.grafico-legenda .serie.venda::before { background: var(--azul); }
.grafico-linhas { width: 100%; height: 160px; display: block; }
.grafico-linhas .eixo { stroke: var(--borda); stroke-width: 1; }
.grafico-linhas .linha { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.grafico-linhas .linha.compra { stroke: var(--ambar); }
.grafico-linhas .linha.venda { stroke: var(--azul); }

/* -- alertas -------------------------------------------------------- */

/* `.alerta` também é usado na conferência do recebimento: as regras
   gerais ficam como sempre foram, e a Dashboard só compacta o dela. */
.alertas { display: grid; gap: 6px; margin-bottom: 12px; }
.alerta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 6px;
  border-left: 5px solid var(--ambar);
  background: var(--ambar-fundo);
  font-size: 15px;
}
.alerta.aviso { border-left-color: var(--azul); background: #e8f0f8; }
.alerta a { font-weight: 600; white-space: nowrap; }
.dashboard .alerta { padding: 7px 12px; border-radius: var(--dash-raio); border-left-width: 4px; font-size: 14px; }

/* -- tabelas da dashboard ------------------------------------------- */

/* Aqui a tabela NÃO vira card: comparar números exige colunas
   alinhadas. No desktop ela tem altura máxima e o cabeçalho fica fixo;
   no celular rola para o lado dentro do próprio cartão. */
.dashboard .rolagem { overflow: auto; max-height: 70vh; }
.dashboard table.dados { width: 100%; font-size: 13px; }
.dashboard table.dados th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--dash-azul-claro);
  color: var(--azul-escuro);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid var(--dash-azul-borda);
  white-space: nowrap;
  text-align: left;
}
.dashboard table.dados td {
  padding: 4px 8px;
  border-bottom: 1px solid #edf1f5;
}
/* A primeira coluna é o nome (tipo, grupo, cliente): quebrar em três
   linhas estraga a leitura da tabela inteira. */
.dashboard table.dados td:first-child { white-space: nowrap; }
.dashboard table.dados td.numero,
.dashboard table.dados th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard table.dados tbody tr:hover { background: #f5f8fb; }
.dashboard table.dados th.ordenavel { cursor: pointer; }
.dashboard table.dados th.ordenavel::after { content: " ↕"; color: var(--dash-cinza); font-weight: 400; }
.dashboard table.dados th[aria-sort="ascending"]::after { content: " ▲"; color: var(--azul); }
.dashboard table.dados th[aria-sort="descending"]::after { content: " ▼"; color: var(--azul); }

.marca-fraca { color: var(--tinta-fraca); }
.destaque-numero { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .linha-tempo-controles { width: 100%; }
  .linha-tempo-datas { flex-wrap: wrap; }
  .dashboard .rolagem { max-height: none; }
}

@media (min-width: 1000px) {
  /* O layout de verdade: menu lateral fixo à esquerda. */
  .dashboard {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .dash-lateral {
    flex-direction: column;
    overflow: visible;
    margin: 0;
    padding: 8px 0;
    position: sticky;
    top: 12px;
    gap: 1px;
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--dash-raio);
  }
  .dash-lateral-titulo {
    display: block;
    padding: 2px 14px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tinta-fraca);
  }
  .dash-lateral a {
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    background: none;
    justify-content: flex-start;
    min-height: 36px;
    padding: 0 14px 0 11px;
    color: var(--tinta);
  }
  .dash-lateral a:hover { background: var(--dash-azul-claro); }
  .dash-lateral a.ativa {
    background: var(--dash-azul-claro);
    border-left-color: var(--azul);
    color: var(--azul-escuro);
  }
  .conteudo { max-width: 1500px; }
  .conteudo.pagina-dashboard { max-width: 1880px; }

  /* Segmentações e o resumo lado a lado: quatro caixas + resumo, ou
     três + resumo, numa linha só nos monitores comuns. */
  .dash-segmentacoes[data-quantidade="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(200px, .9fr); }
  .dash-segmentacoes[data-quantidade="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(200px, .9fr); }
}

/* Monitores baixos (1366×768, 1440×900): os filtros não podem comer a
   tela. A ajuda da régua sai (fica no title e no aria-label) e as
   segmentações mostram cinco opções em vez de seis. */
@media (min-width: 1000px) and (max-height: 920px) {
  .segmentador-opcoes { --visiveis: 5; }
}