/* Logística — mesmo visual do PCP (30/09/2026, pedido do Guilherme: "refaça igual do PCP, com
   categorias e subcategorias"). Gerado a partir de public/css/pcp.css trocando o escopo
   (#page-pcp → #page-logistics), o prefixo das classes (.pcp- → .lg-) e as variáveis (--pc- → --lg-).
   Ao mexer no visual do PCP, trazer a mudança para cá também — as duas telas têm de conversar.
   Tudo escopado em #page-logistics: .card, .btn, .data-table e .admin-tabs são do app inteiro. */


#page-logistics {
  --lg-bg: #f5f5f7;
  --lg-surface: #ffffff;
  --lg-surface-2: #fafafc;
  --lg-ink: #1d1d1f;
  --lg-ink-2: #3a3a3c;
  --lg-muted: #636366;            /* 5,5:1 sobre o fundo, 6:1 sobre a carta */
  --lg-hairline: rgba(0, 0, 0, 0.07);
  --lg-sep: rgba(0, 0, 0, 0.13);
  --lg-fill: rgba(118, 118, 128, 0.14);
  --lg-fill-2: rgba(118, 118, 128, 0.08);
  --lg-hover: rgba(0, 0, 0, 0.028);
  --lg-primary: #15293a;          /* azul-marinho da RR */
  --lg-primary-ink: #ffffff;
  --lg-tint: #b4500f;             /* laranja da RR escurecido para texto: 5,1:1 no branco */
  --lg-focus: rgba(236, 106, 28, 0.32);
  --lg-danger-fill: #c81e1e;
  --lg-chrome: rgba(245, 245, 247, 0.74);
  --lg-header: rgba(21, 41, 58, 0.9);
  --lg-header-solid: #15293a;
  --lg-radius: 14px;
  --lg-radius-sm: 9px;
  --lg-shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -18px rgba(0, 0, 0, 0.2);
  --lg-shadow-pop: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 24px 60px -18px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] #page-logistics {
  --lg-bg: #0e1013;
  --lg-surface: #1b1d22;
  --lg-surface-2: #212329;
  --lg-ink: #f5f5f7;
  --lg-ink-2: #d1d1d6;
  --lg-muted: #a1a1a6;            /* 6,6:1 sobre a carta escura */
  --lg-hairline: rgba(255, 255, 255, 0.07);
  --lg-sep: rgba(255, 255, 255, 0.14);
  --lg-fill: rgba(118, 118, 128, 0.28);
  --lg-fill-2: rgba(118, 118, 128, 0.18);
  --lg-hover: rgba(255, 255, 255, 0.035);
  --lg-primary: #f3934f;          /* no escuro o app já usa o laranja como destaque */
  --lg-primary-ink: #1b1206;
  --lg-tint: #f3934f;
  --lg-focus: rgba(243, 147, 79, 0.38);
  --lg-danger-fill: #dc2626;
  --lg-chrome: rgba(14, 16, 19, 0.72);
  --lg-header: rgba(18, 35, 52, 0.88);
  --lg-header-solid: #122334;
  --lg-shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 12px 28px -18px rgba(0, 0, 0, 0.7);
  --lg-shadow-pop: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 24px 60px -18px rgba(0, 0, 0, 0.8);
}

#page-logistics {
  background: var(--lg-bg);
  color: var(--lg-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 250ms ease, color 250ms ease;   /* troca de tema sem susto */
}

/* ── Camada fixa: cabeçalho + abas ─────────────────────────────────────────────────────────── */
#page-logistics .lg-chrome {
  position: sticky;
  top: 0;
  z-index: 100;
}
#page-logistics .lg-chrome .header {
  position: static;
  background-color: var(--lg-header);
  background-image: none;
  border-bottom: 2px solid var(--orange);
  box-shadow: none;
  padding: 10px 16px;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
#page-logistics .lg-voltar {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 1;
  padding: 2px 9px 5px;
  border-radius: 8px;
  transition: background-color 150ms ease, transform 100ms ease;
}
#page-logistics .lg-voltar:hover { background: rgba(255, 255, 255, 0.12); }
#page-logistics .lg-voltar:active { transform: scale(0.94); }
#page-logistics .lg-titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
#page-logistics .lg-secao {
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.76);
}
#page-logistics .lg-secao::before {
  content: '›';
  margin-right: 8px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
}
#page-logistics .lg-sair { background: rgba(255, 255, 255, 0.14); color: #fff; }
#page-logistics .lg-sair:hover { background: rgba(255, 255, 255, 0.22); }

#page-logistics .lg-abas {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  background: var(--lg-chrome);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--lg-hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
#page-logistics .lg-abas::-webkit-scrollbar { display: none; }
#page-logistics .lg-abas .admin-tab {
  flex: none;
  margin: 0;
  padding: 6px 11px;
  border: 0;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--lg-ink-2);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
#page-logistics .lg-abas .admin-tab:hover { background: var(--lg-fill-2); color: var(--lg-ink); }
#page-logistics .lg-abas .admin-tab:active { transform: scale(0.97); background: var(--lg-fill); }
#page-logistics .lg-abas .admin-tab.active {
  background: var(--lg-surface);
  color: var(--lg-ink);
  box-shadow: 0 0 0 0.5px var(--lg-sep), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* A sombra sob as abas nasce com a rolagem, em vez de uma divisória fixa. */
@supports (animation-timeline: scroll()) {
  #page-logistics .lg-abas {
    box-shadow: 0 1px 0 transparent;
    animation: lg-borda linear both;
    animation-timeline: scroll(root);
    animation-range: 0 40px;
  }
  @keyframes lg-borda {
    to { box-shadow: 0 1px 0 var(--lg-hairline), 0 14px 26px -22px rgba(0, 0, 0, 0.5); }
  }
}

/* Navegador sem blur: a camada fica sólida, senão o texto de baixo aparece através dela. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #page-logistics .lg-abas { background: var(--lg-bg); }
  #page-logistics .lg-chrome .header { background-color: var(--lg-header-solid); }
}

/* ── Conteúdo ───────────────────────────────────────────────────────────────────────────────── */
#page-logistics #logi-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 36px;
}
/* Entrada só na troca de aba (a classe sai no animationend): refazer a tabela ao filtrar não pisca. */
#page-logistics #logi-content.lg-entra { animation: lg-entra-kf 200ms ease-out backwards; }
@keyframes lg-entra-kf { from { opacity: 0; } }

#page-logistics .text-muted { color: var(--lg-muted); }

#page-logistics .lg-toolbar { gap: 8px; margin-bottom: 14px; }
#page-logistics .lg-toolbar > strong:first-child {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin-right: 6px;
  color: var(--lg-ink);
}

/* Cartas: sem borda desenhada, só a sombra de meio pixel e a profundidade. */
#page-logistics .card {
  background: var(--lg-surface);
  border: 0;
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow-card);
  padding: 16px 18px;
}
#page-logistics .card-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-transform: none;
  color: var(--lg-ink);
  margin-bottom: 10px;
}

/* ── Botões: resposta no aperto ─────────────────────────────────────────────────────────────── */
#page-logistics .btn {
  border-radius: var(--lg-radius-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 100ms ease, background-color 150ms ease, box-shadow 150ms ease, filter 150ms ease, opacity 150ms ease;
}
#page-logistics .btn:active { transform: scale(0.97); filter: none; transition-duration: 60ms; }
#page-logistics .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lg-focus); }
#page-logistics .btn:disabled,
#page-logistics .btn[disabled] { opacity: 0.45; cursor: default; transform: none; }
#page-logistics .btn-sm { padding: 6px 12px; font-size: 0.84rem; }
#page-logistics .btn-primary { background: var(--lg-primary); color: var(--lg-primary-ink); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
#page-logistics .btn-primary:hover { filter: brightness(1.08); }
#page-logistics .btn-outline {
  background: var(--lg-surface);
  color: var(--lg-ink);
  border: 1px solid var(--lg-sep);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}
#page-logistics .btn-outline:hover { background: var(--lg-surface-2); border-color: var(--lg-muted); }
#page-logistics .btn-gray { background: var(--lg-fill); color: var(--lg-ink); }
#page-logistics .btn-gray:hover { background: var(--lg-fill-2); }
#page-logistics .btn-danger { background: var(--lg-danger-fill); color: #fff; }

/* ── Campos ─────────────────────────────────────────────────────────────────────────────────── */
#page-logistics input[type=text], #page-logistics input[type=number], #page-logistics input[type=password],
#page-logistics input[type=date], #page-logistics input[type=month], #page-logistics input[type=search],
#page-logistics input[type=time], #page-logistics input[type=email], #page-logistics select, #page-logistics textarea {
  border: 1px solid var(--lg-sep);
  border-radius: var(--lg-radius-sm);
  background-color: var(--lg-surface);   /* nunca o atalho background: apaga a seta do select */
  color: var(--lg-ink);
  padding: 7px 10px;
  font-size: 0.875rem;
  line-height: 1.3;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
#page-logistics input:focus,
#page-logistics select:focus,
#page-logistics textarea:focus {
  outline: none;
  border-color: var(--lg-tint);
  box-shadow: 0 0 0 3px var(--lg-focus);
}
#page-logistics input::placeholder, #page-logistics textarea::placeholder { color: var(--lg-muted); opacity: 0.85; }
#page-logistics input[type=checkbox], #page-logistics input[type=radio] { accent-color: var(--lg-tint); }
/* Campos que moram dentro da tabela ou de filtros compactos mantêm o tamanho deles. */
#page-logistics input.lg-inp,
#page-logistics select.lg-inp { padding: 4px 7px; font-size: 0.82rem; border-radius: 7px; max-width: 150px; }
#page-logistics .colet-filtros input { padding: 5px 9px; font-size: 13px; }
#page-logistics .form-group label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0; color: var(--lg-ink-2); }

/* ── Tabelas ────────────────────────────────────────────────────────────────────────────────── */
#page-logistics table.data-table {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
#page-logistics table.data-table th {
  background: var(--lg-surface-2);
  color: var(--lg-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 9px 10px;
  border-bottom: 1px solid var(--lg-sep);
}
#page-logistics table.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--lg-hairline);
  color: var(--lg-ink);
}
#page-logistics table.data-table tbody tr:last-child td { border-bottom: 0; }
#page-logistics table.data-table tr:hover td { background: var(--lg-hover); }
#page-logistics .lg-table-wrap.card { overflow: auto; }

#page-logistics .lg-du,
#page-logistics .lg-status,
#page-logistics .status-pill { font-weight: 600; letter-spacing: 0.01em; }
#page-logistics .empty-state { color: var(--lg-muted); }

/* Cadastros: o menu gruda logo abaixo da camada fixa (altura medida pelo pcp/index.js). */
#page-logistics .lg-cad-menu {
  top: calc(var(--lg-chrome-h, 100px) + 12px);
  background: var(--lg-surface);
  border: 0;
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow-card);
  padding: 8px;
}
#page-logistics .lg-cad-menu button { font-weight: 500; border-radius: 8px; color: var(--lg-ink); transition: background-color 120ms ease; }
#page-logistics .lg-cad-menu button:hover { background: var(--lg-fill-2); }
#page-logistics .lg-cad-card { scroll-margin-top: calc(var(--lg-chrome-h, 100px) + 12px); }

/* Barra do envio ao SH (Coletados/Entradas SH) no mesmo material das cartas. */
#page-logistics .colet-envio { background: var(--lg-surface-2); border-color: var(--lg-sep); }

/* ── Modal da programação: escurece para focar e a carta surge do centro ────────────────────── */
.lg-program-modal {
  background: rgba(0, 0, 0, 0.3);
  animation: lg-escurece 180ms ease-out backwards;
}
.lg-program-modal .lg-program-box {
  background: var(--lg-surface);
  color: var(--lg-ink);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--lg-shadow-pop);
  padding: 18px;
  animation: pcp-surge 240ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.lg-program-modal .lg-program-title { font-size: 1.05rem; letter-spacing: -0.015em; }
.lg-program-modal textarea {
  background: var(--lg-surface-2);
  color: var(--lg-ink);
  border: 1px solid var(--lg-sep);
  border-radius: 10px;
}
@keyframes lg-escurece { from { background-color: rgba(0, 0, 0, 0); } }
@keyframes pcp-surge { from { opacity: 0; transform: scale(0.97); } }

/* ── Acessibilidade ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #page-logistics *,
  .lg-program-modal,
  .lg-program-modal * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  #page-logistics .lg-abas { box-shadow: 0 1px 0 var(--lg-hairline) !important; }
  #page-logistics .btn:active,
  #page-logistics .lg-abas .admin-tab:active,
  #page-logistics .lg-voltar:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  #page-logistics .lg-chrome .header {
    background-color: var(--lg-header-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #page-logistics .lg-abas {
    background: var(--lg-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  #page-logistics,
  .lg-program-modal {
    --lg-hairline: rgba(0, 0, 0, 0.22);
    --lg-sep: rgba(0, 0, 0, 0.4);
    --lg-muted: #48484a;
    --lg-ink-2: #1d1d1f;
  }
  [data-theme="dark"] #page-logistics,
  [data-theme="dark"] .lg-program-modal {
    --lg-hairline: rgba(255, 255, 255, 0.24);
    --lg-sep: rgba(255, 255, 255, 0.45);
    --lg-muted: #d1d1d6;
    --lg-ink-2: #f5f5f7;
  }
  #page-logistics .card { box-shadow: 0 0 0 1px var(--lg-sep); }
}

/* ── Cabeçalho em três partes: marca, seções, ações (15/09/2026) ────────────────────────────────
   As SEÇÕES são um controle segmentado no centro do cabeçalho; a barra translúcida de baixo mostra
   só as abas da seção. Dois níveis curtos em vez de uma fileira de 18 abas: a pessoa escolhe o
   assunto e depois a tela, e a barra nunca precisa rolar para o lado no computador. */
#page-logistics .lg-chrome .header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
}
#page-logistics .lg-marca { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
#page-logistics .lg-logo { height: 24px; width: auto; flex: none; }
#page-logistics .lg-titulo {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-logistics .lg-acoes { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#page-logistics .lg-secoes {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  overflow-x: auto;
  scrollbar-width: none;
}
#page-logistics .lg-secoes::-webkit-scrollbar { display: none; }
#page-logistics .lg-secao-btn {
  flex: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.84);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  padding: 5px 13px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
#page-logistics .lg-secao-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
#page-logistics .lg-secao-btn:active { transform: scale(0.97); }
#page-logistics .lg-secao-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); }
#page-logistics .lg-secao-btn.active { background: #ffffff; color: #15293a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

/* ── Formulários (revisão de 15/09/2026) ───────────────────────────────────────────────────── */
#page-logistics { --lg-danger-text: #b91c1c; --lg-warn-text: #b45309; }
[data-theme="dark"] #page-logistics { --lg-danger-text: #fca5a5; --lg-warn-text: #fbbf24; }

/* Excluir ou cancelar dentro de uma lista é ação secundária: texto na cor do risco, fundo só ao
   passar o mouse. Botão vermelho cheio em cada linha gritava mais que o conteúdo. */
#page-logistics table.data-table .btn-danger,
#page-logistics .am-remover { background: transparent; color: var(--lg-danger-text); box-shadow: none; }
#page-logistics table.data-table .btn-danger:hover,
#page-logistics .am-remover:hover { background: var(--lg-danger-fill); color: #fff; }
#page-logistics table.data-table .btn-warning { background: transparent; color: var(--lg-warn-text); box-shadow: inset 0 0 0 1px currentColor; }
#page-logistics table.data-table .btn-warning:hover { background: var(--lg-fill-2); }

/* Cadastros: o salvar de cada carta fica na borda direita, como ação final da carta. */
#page-logistics .lg-cad-card > .btn:last-child { display: flex; width: fit-content; margin-left: auto; margin-top: 12px; }
#page-logistics .lg-cad-card > .text-muted { line-height: 1.55; max-width: 78ch; }
#page-logistics .lg-form-grid { gap: 12px 16px; }
/* Linha de "adicionar" com rótulo em cada campo, separada da lista por um fio. */
#page-logistics .lg-linha-add {
  display: flex;
  gap: 8px 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lg-hairline);
}
#page-logistics .lg-linha-add .form-group { margin: 0; }
/* Ação que sobrescreve muita coisa fica afastada da comum, com o próprio fio. */
#page-logistics .lg-perigo {
  display: flex;
  gap: 8px 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--lg-hairline);
}

@media (max-width: 900px) {
  #page-logistics .lg-chrome .header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  #page-logistics .lg-acoes { grid-column: 2; grid-row: 1; }
  #page-logistics .lg-secoes { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}

@media (max-width: 640px) {
  #page-logistics #logi-content { padding: 12px 12px 28px; }
  #page-logistics .lg-secao { display: none; }
  #page-logistics .lg-titulo { padding-left: 10px; }
  #page-logistics .lg-toolbar > strong:first-child { font-size: 1.2rem; }
}

/* ── Próprios da Logística (30/09/2026) ─────────────────────────────────────────────────────── */
/* Controle segmentado dentro da tela: Incluir venda | Aprovações; Operadores | Crachás | Operações. */
#page-logistics .lg-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--lg-fill);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
#page-logistics .lg-seg::-webkit-scrollbar { display: none; }
#page-logistics .lg-seg-btn {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--lg-ink-2);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
#page-logistics .lg-seg-btn:hover { color: var(--lg-ink); }
#page-logistics .lg-seg-btn:active { transform: scale(0.97); }
#page-logistics .lg-seg-btn.active {
  background: var(--lg-surface);
  color: var(--lg-ink);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.18);
}
#page-logistics .lg-seg-btn:focus-visible { outline: 3px solid var(--lg-focus); outline-offset: 1px; }

/* Painéis do quadro: dois atalhos grandes para as telas que abrem em página própria. */
#page-logistics .lg-paineis { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-width: 760px; }
#page-logistics .lg-painel {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--lg-ink);
  background: var(--lg-surface);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow-card);
  padding: 18px;
  transition: transform 100ms ease, box-shadow 150ms ease;
}
#page-logistics .lg-painel:hover { box-shadow: var(--lg-shadow-pop); }
#page-logistics .lg-painel:active { transform: scale(0.98); }
#page-logistics .lg-painel:focus-visible { outline: 3px solid var(--lg-focus); outline-offset: 2px; }
#page-logistics .lg-painel-ico { grid-row: 1 / span 2; font-size: 1.9rem; line-height: 1; }
#page-logistics .lg-painel-nome { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.012em; }
#page-logistics .lg-painel-desc { font-size: 0.84rem; color: var(--lg-muted); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) {
  #page-logistics .lg-seg-btn:active, #page-logistics .lg-painel:active { transform: none; }
}

/* ── Indicadores (30/09/2026) ───────────────────────────────────────────────────────────────── */
#page-logistics {
  --lg-azul: #0a64d6;
  --lg-verde: #1f8a4c;
  --lg-laranja: #c2560f;
  --lg-vermelho: #c81e1e;
  --lg-roxo: #7a4b86;
  --lg-barra: #0a64d6;
  --lg-barra-pico: #15293a;
}
[data-theme="dark"] #page-logistics {
  --lg-azul: #5aa2ff;
  --lg-verde: #4cc27e;
  --lg-laranja: #f3934f;
  --lg-vermelho: #ff6b5f;
  --lg-roxo: #c7a3d2;
  --lg-barra: #5aa2ff;
  --lg-barra-pico: #f3934f;
}
#page-logistics .lg-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
#page-logistics .lg-periodo .lg-seg { margin-bottom: 0; }
#page-logistics .lg-periodo-datas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#page-logistics .lg-periodo-datas input { width: auto; min-width: 0; padding: 6px 9px; font-size: 0.86rem; }
#page-logistics .lg-periodo-txt { font-size: 0.8rem; color: var(--lg-muted); margin-left: auto; }

#page-logistics .lg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
#page-logistics .lg-kpi { background: var(--lg-surface); border-radius: var(--lg-radius); box-shadow: var(--lg-shadow-card); padding: 14px 16px; }
#page-logistics .lg-kpi-v { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--lg-ink); }
#page-logistics .lg-kpi-r { font-size: 0.82rem; font-weight: 600; color: var(--lg-ink-2); margin-top: 4px; }
#page-logistics .lg-kpi-s { font-size: 0.76rem; color: var(--lg-muted); margin-top: 2px; }
#page-logistics .lg-kpi.verde .lg-kpi-v { color: var(--lg-verde); }
#page-logistics .lg-kpi.azul .lg-kpi-v { color: var(--lg-azul); }
#page-logistics .lg-kpi.vermelho .lg-kpi-v { color: var(--lg-vermelho); }
#page-logistics .lg-kpi.laranja .lg-kpi-v { color: var(--lg-laranja); }
#page-logistics .lg-kpi.roxo .lg-kpi-v { color: var(--lg-roxo); }

#page-logistics .lg-card-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#page-logistics .lg-grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
#page-logistics .lg-mini-kpis { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; color: var(--lg-muted); margin: 2px 0 12px; }
#page-logistics .lg-mini-kpis b { color: var(--lg-ink); font-variant-numeric: tabular-nums; font-size: 0.95rem; }

/* Colunas (SVG) */
#page-logistics .lg-ch-rola { overflow-x: auto; margin: 4px -4px 0; padding: 0 4px; }
#page-logistics .lg-ch { display: block; width: 100%; height: auto; font-family: inherit; }
#page-logistics .lg-ch-grade { stroke: var(--lg-hairline); stroke-width: 1; }
#page-logistics .lg-ch-eixo { fill: var(--lg-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
#page-logistics .lg-ch-valor { fill: var(--lg-ink-2); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
#page-logistics .lg-ch-barra { fill: var(--lg-barra); opacity: 0.88; transition: opacity 120ms ease; }
#page-logistics .lg-ch-barra.pico { fill: var(--lg-barra-pico); opacity: 1; }
#page-logistics .lg-ch g:hover .lg-ch-barra { opacity: 1; }
#page-logistics .lg-ch-media { stroke: var(--lg-laranja); stroke-width: 1.2; stroke-dasharray: 4 4; }
#page-logistics .lg-ch-media-txt { fill: var(--lg-laranja); font-size: 10.5px; font-weight: 600; }

/* Barras horizontais (HTML) */
#page-logistics .lg-bl { display: grid; gap: 7px; }
#page-logistics .lg-bl-linha { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 0.84rem; }
#page-logistics .lg-bl-linha.zero { opacity: 0.55; }
#page-logistics .lg-bl-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lg-ink-2); }
#page-logistics .lg-bl-trilho { height: 8px; border-radius: 999px; background: var(--lg-fill-2); overflow: hidden; }
#page-logistics .lg-bl-fill { display: block; height: 100%; border-radius: 999px; background: var(--lg-azul); min-width: 2px; }
#page-logistics .lg-bl-fill.verde { background: var(--lg-verde); }
#page-logistics .lg-bl-fill.laranja { background: var(--lg-laranja); }
#page-logistics .lg-bl-fill.roxo { background: var(--lg-roxo); }
#page-logistics .lg-bl-valor { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* Produção individual no mesmo tom */
#page-logistics .logi-prod-nome { color: var(--lg-ink); }
#page-logistics .logi-prod-total { color: var(--lg-verde); font-weight: 700; }
#page-logistics .logi-prod-barra { height: 8px; border-radius: 999px; background: var(--lg-fill-2); }
#page-logistics .logi-prod-barra > span { background: var(--lg-verde); border-radius: 999px; }
#page-logistics .logi-prod-et { color: var(--lg-muted); }
#page-logistics .logi-prod-et b { color: var(--lg-ink); }
@media (max-width: 640px) {
  #page-logistics .lg-periodo-txt { margin-left: 0; }
  #page-logistics .lg-bl-linha { grid-template-columns: minmax(80px, 40%) 1fr auto; }
}

/* Pessoas numa página só (30/09/2026): atalhos no topo e blocos empilhados. */
#page-logistics .lg-ancoras { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--lg-fill); margin-bottom: 8px; max-width: 100%; overflow-x: auto; }
#page-logistics .lg-bloco { scroll-margin-top: calc(var(--lg-chrome-h, 100px) + 12px); margin-top: 18px; }
#page-logistics .lg-bloco-tit { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--lg-ink); }
#page-logistics .lg-chip { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--lg-laranja); background: var(--lg-fill-2); border-radius: 999px; padding: 1px 8px; margin-bottom: 3px; }
#page-logistics .lg-linha-kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 0.5px solid var(--lg-hairline); font-size: 0.86rem; }
#page-logistics .lg-linha-kv span { color: var(--lg-muted); }
#page-logistics .lg-linha-kv b { font-variant-numeric: tabular-nums; }
/* Mapa do Brasil (Indicador frete › Para onde mandamos) */
#page-logistics .lg-mapa { display: block; width: 100%; max-width: 520px; height: auto; margin: 6px auto 0; }
#page-logistics .lg-mp-uf { fill: var(--lg-fill-2); stroke: var(--lg-surface); stroke-width: 1.2; stroke-linejoin: round; }
#page-logistics .lg-mp-uf.com { fill: var(--lg-azul); }
#page-logistics .lg-mp-uf:hover { stroke: var(--lg-ink-2); }
#page-logistics .lg-mp-cid { fill: var(--lg-laranja); fill-opacity: 0.72; stroke: var(--lg-surface); stroke-width: 1; }
#page-logistics .lg-mp-cid:hover { fill-opacity: 1; }
#page-logistics .lg-mp-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 0.76rem; color: var(--lg-muted); margin-top: 6px; }
#page-logistics .lg-mp-leg span { display: inline-flex; align-items: center; gap: 6px; }
#page-logistics .lg-mp-leg i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--lg-azul); }
#page-logistics .lg-mp-leg i.cid { border-radius: 50%; background: var(--lg-laranja); }
/* Para onde vendemos: uma caixinha por região com a % das vendas */
#page-logistics .lg-regioes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
#page-logistics .lg-regiao { background: var(--lg-surface-2); border-radius: var(--lg-radius-sm); padding: 10px 12px; box-shadow: inset 0 0 0 0.5px var(--lg-hairline); }
#page-logistics .lg-regiao-nome { font-size: 0.8rem; font-weight: 600; color: var(--lg-ink-2); }
#page-logistics .lg-regiao-pct { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: var(--lg-azul); font-variant-numeric: tabular-nums; line-height: 1.15; }
#page-logistics .lg-regiao-sub { font-size: 0.74rem; color: var(--lg-muted); margin-top: 2px; }

/* ── Materiais › Estoque de revenda (30/09/2026, logistics/estoque-revenda.js) ─────────────────────
   A tela usa o visual da consulta do almoxarifado (.ae-* em almox-estoque.css); aqui só o que é dela,
   com as cores do .ae para acompanhar o tema escuro. */
#page-logistics .lrv .ae-tab td.lrv-neg { color: var(--ae-danger); }
#page-logistics .lrv-bar { white-space: nowrap; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
#page-logistics .lrv .ae-tab tr.lrv-det td { background: var(--ae-surface-2); }
#page-logistics .lrv-vendas { display: grid; gap: 4px; font-size: 0.82rem; padding: 2px 4px 6px; }
#page-logistics .lrv-balde { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ae-muted); margin-top: 6px; }
#page-logistics .lrv-v { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
#page-logistics .lrv-v .etapa { color: var(--ae-muted); }
#page-logistics .lrv-v .qtd { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
#page-logistics .lrv-nota { line-height: 1.5; margin-top: 12px; }