/* ==========================================================================
   Sistema de design — Painel de Montagem
   Tokens, componentes base e layout. Cada página adiciona só o que é dela.
   ========================================================================== */

/* A fonte vem DAQUI, não do Google: o projeto não carrega nada de fora (mesma
   regra do código de barras). Hospedar o arquivo também evita contar visita
   pro Google em toda tela do cliente, e o sistema continua com a cara certa
   se a internet da loja estiver ruim.
   Plus Jakarta Sans, variável de 400 a 800 — um arquivo só cobre do texto de
   tabela ao título da vitrine. Licença SIL Open Font 1.1 (ver fontes/LICENCA).
   Dois arquivos porque o latin-ext só é baixado se a página precisar dele. */
@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fontes/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fontes/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* Paleta */
  --azul-500: #2563eb;
  --azul-600: #1d4ed8;
  --azul-700: #1e40af;
  --verde-500: #16a34a;
  --verde-600: #15803d;
  --vermelho-500: #dc2626;
  --vermelho-600: #b91c1c;
  --ambar-500: #d97706;

  /* Superfícies e texto (claro) */
  --fundo: #f1f5f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --superficie-3: #f1f5f9;
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;
  --texto: #0f172a;
  --texto-suave: #475569;
  --texto-fraco: #94a3b8;

  /* Semânticos */
  --primaria: var(--azul-500);
  --primaria-forte: var(--azul-600);
  --sucesso: var(--verde-500);
  --erro: var(--vermelho-500);
  --alerta: var(--ambar-500);

  /* Tons de fundo suave para destaques */
  --primaria-suave: #eff6ff;
  --sucesso-suave: #f0fdf4;
  --erro-suave: #fef2f2;
  --alerta-suave: #fffbeb;

  /* Escala de espaçamento */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  --raio: 10px;
  --raio-sm: 6px;
  --raio-lg: 14px;

  --sombra: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sombra-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --sombra-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.14), 0 4px 8px -2px rgba(15, 23, 42, 0.06);

  --largura-max: 1200px;
  --rail-largura: 60px;
  --flyout-largura: 210px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b1120;
    --superficie: #111827;
    --superficie-2: #1a2234;
    --superficie-3: #232d42;
    --borda: #273348;
    --borda-forte: #384357;
    --texto: #e8edf6;
    --texto-suave: #a6b3c9;
    --texto-fraco: #6b7a94;

    --primaria: #60a5fa;
    --primaria-forte: #3b82f6;
    --sucesso: #4ade80;
    --erro: #f87171;
    --alerta: #fbbf24;

    --primaria-suave: #172554;
    --sucesso-suave: #14301f;
    --erro-suave: #3b1414;
    --alerta-suave: #3a2a09;

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --sombra-lg: 0 16px 32px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

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

/* Rolagem discreta — combina com o resto do design em vez da barra padrão
   do sistema operacional, que destoa em qualquer tema escuro. */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 99px; border: 2px solid var(--fundo); }
*::-webkit-scrollbar-thumb:hover { background: var(--texto-fraco); }

/* Foco visível só pra quem navega pelo teclado (:focus-visible) — mouse não
   precisa do anel, teclado precisa pra saber onde está. Acessibilidade é UX. */
:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

body {
  font-family: 'Jakarta', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  margin: 0;
  padding: 0 var(--e4) var(--e7) calc(var(--rail-largura) + var(--e4));
  line-height: 1.5;
  font-size: 15px;
  transition: padding-left 0.15s ease;
  /* Números de largura FIXA no sistema inteiro. Num ERP quase toda tela é
     coluna de dinheiro, e com número proporcional o "1" é mais estreito que o
     "8": as casas decimais ficam em zigue-zague e comparar duas linhas exige
     ler dígito por dígito. Com tabular, a vírgula de uma linha cai exatamente
     em cima da vírgula da outra. */
  font-variant-numeric: tabular-nums;
}

/* Painel de grupo aberto (Vendas, Cadastros...) empurra o conteúdo mais um
   pouco — some sozinho quando nenhum grupo está aberto. */
body.tem-flyout { padding-left: calc(var(--rail-largura) + var(--flyout-largura) + var(--e4)); }

/* Menu lateral escondido: conteúdo volta a ocupar a largura toda */
body.sidebar-oculta,
body.sidebar-oculta.tem-flyout { padding-left: var(--e4); }

/* Título grande pede letra mais junta: no tamanho de display o espaçamento
   que serve pro texto corrido faz a palavra parecer esticada. E `balance`
   evita a última linha com uma palavra sozinha. */
h1, h2, h3 {
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { letter-spacing: -0.03em; }

/* ==========================================================================
   Cabeçalho / navegação
   ========================================================================== */

.app-bar {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--e5) 0 var(--e4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
}

/* Com o menu escondido, o botão flutuante "mostrar menu" fica por cima do
   canto esquerdo — abre espaço pro título não ficar embaixo dele. */
body.sidebar-oculta .app-bar { padding-left: 2.75rem; }

.app-bar h1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.app-bar h1::before {
  content: "";
  width: 4px;
  height: 1.4em;
  border-radius: 99px;
  background: var(--primaria);
}

.usuario-info {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.usuario-nome { font-weight: 600; }

/* Navegação principal — trilho de ícones + painel, igual Tiny/Olist: um
   ícone por área grande do sistema; a área com mais de uma tela abre o
   painel do lado com a lista (Vendas, Cadastros, Estoque). Área de tela
   única (Financeiro, CRM...) navega direto no clique do ícone. */
.nav-principal {
  position: fixed;
  top: 0;
  height: 100dvh;
  margin: 0;
  max-width: none;
  background: var(--superficie);
  border: none;
  border-right: 1px solid var(--borda);
  border-radius: 0;
  overflow-y: auto;
  z-index: 200;
  transition: transform 0.15s ease, visibility 0s linear 0s;
}

/* `visibility` some junto, mas só DEPOIS do slide terminar (delay = duração
   da transição) — sem isso, alguns navegadores deixam um resíduo pintado do
   painel fixo+transformado mesmo com ele fora da tela (as coordenadas do
   elemento conferem certinho, mas o compositor não limpa o layer sozinho).
   Ao reabrir, `visibility` volta na hora (delay 0), só o slide anima. */
body.sidebar-oculta .nav-principal {
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.15s ease, visibility 0s linear 0.15s;
}

.nav-rail {
  left: 0;
  width: var(--rail-largura);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e1);
  padding: var(--e3) var(--e2);
}

.nav-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  aspect-ratio: 1;
  background: none;
  border: none;
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.nav-rail-item:hover { background: var(--superficie-3); color: var(--texto); }

.nav-rail-item.ativo, .nav-rail-item.grupo-aberto {
  background: var(--primaria);
  color: #fff;
}

.nav-rail-icone { width: 21px; height: 21px; flex-shrink: 0; }

/* Painel com a lista de telas do grupo aberto no trilho. Some inteiro
   quando nenhum grupo está aberto — item de tela única não usa isso, vai
   direto pela própria URL do ícone. */
.nav-flyout {
  left: var(--rail-largura);
  width: var(--flyout-largura);
  padding: var(--e4) var(--e2);
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

body:not(.tem-flyout) .nav-flyout { display: none; }

.nav-flyout-grupo { display: flex; flex-direction: column; gap: var(--e1); }
.nav-flyout-grupo[hidden] { display: none; }

.nav-flyout-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
  padding: 0 0.9rem var(--e2);
}

.nav-item {
  padding: 0.6rem 0.9rem;
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.nav-item:hover { background: var(--superficie-3); color: var(--texto); }

.nav-item.ativo {
  background: var(--primaria);
  color: #fff;
  font-weight: 600;
}

/* Botão "esconder menu", no topo do trilho — só o ícone, o trilho é
   estreito demais pra texto. */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background: none;
  border: none;
  color: var(--texto-fraco);
  cursor: pointer;
  font-size: 1.1rem;
  border-radius: var(--raio-sm);
  margin-bottom: var(--e2);
}

.sidebar-toggle:hover { background: var(--superficie-3); color: var(--texto-suave); }

/* Botão flutuante "mostrar menu", só aparece quando o menu está escondido */
.sidebar-mostrar {
  display: none;
  position: fixed;
  top: var(--e4);
  left: var(--e4);
  z-index: 201;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--texto);
  box-shadow: var(--sombra-md);
}

body.sidebar-oculta .sidebar-mostrar { display: block; }

/* Auto-ocultar: com o menu escondido, essa faixa invisível na beirada
   esquerda é o gatilho — encostar o mouse nela (ou chegar pelo teclado)
   traz o menu de volta POR CIMA do conteúdo, e tirar o mouse esconde
   sozinho. O conteúdo não é empurrado: quem escondeu o menu quer a largura
   toda, não quer a tela pulando a cada espiada. */
.sidebar-zona {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 14px;
  height: 100dvh;
  z-index: 199;
}

body.sidebar-oculta .sidebar-zona { display: block; }

body.sidebar-oculta.sidebar-espiando .nav-principal {
  transform: translateX(0);
  visibility: visible;
  box-shadow: var(--sombra-lg);
  transition: transform 0.15s ease, visibility 0s linear 0s;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 150;
}

/* Barra fininha de carregamento no topo — mostra que a página está fazendo
   alguma coisa (checar login, montar menu) na fração de segundo antes de
   qualquer conteúdo aparecer. Sem lib, só largura crescendo e sumindo. */
.barra-carregando {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--primaria);
  z-index: 999;
  transition: width 0.4s ease, opacity 0.3s ease;
}

.barra-carregando.completa { width: 100%; opacity: 0; }

/* Barra secundária: ações de configuração (só no painel) */
.nav-config {
  max-width: var(--largura-max);
  margin: calc(var(--e5) * -1 + var(--e3)) auto var(--e5);
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
}

.chip {
  display: inline-block;
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  padding: 0.4rem 0.8rem;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.chip:hover { border-color: var(--borda-forte); color: var(--texto); }
.chip.ativo { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria); }

main {
  max-width: var(--largura-max);
  margin: 0 auto;
}

/* ==========================================================================
   Cartões / seções
   ========================================================================== */

.card,
.painel-acao,
.painel-config,
.painel-historico {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: var(--e5);
  margin-bottom: var(--e5);
  box-shadow: var(--sombra);
}

.card-titulo,
.painel-historico h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
}

.painel-historico h2:not(:first-child) { margin-top: var(--e6); }

.card-subtitulo {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin: calc(var(--e4) * -1) 0 var(--e4);
}

/* ==========================================================================
   Formulários
   ========================================================================== */

label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: var(--e2);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.12s, box-shadow 0.12s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px var(--primaria-suave);
}

input::placeholder { color: var(--texto-fraco); }

/* Campo de destaque: nº do pedido, código do montador, nº de série */
.campo-destaque {
  font-size: 1.5rem !important;
  font-weight: 600;
  padding: 0.75rem 0.9rem !important;
  letter-spacing: 0.02em;
  margin-bottom: var(--e4);
}

.campo-destaque::placeholder {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: normal;
}

/* Texto de apoio abaixo do label */
.ajuda {
  font-size: 0.82rem;
  color: var(--texto-fraco);
  font-weight: 400;
  margin: calc(var(--e2) * -1) 0 var(--e2);
}

/* Linha pequena e cinza embaixo do nome principal numa célula de tabela
   (SKU, detalhe, série...). Usada em várias telas — faltava a regra geral,
   só existia escopada dentro do PDV. */
.sku { font-size: 0.78rem; color: var(--texto-fraco); font-weight: 400; }

/* Nome clicável numa linha de tabela (ex: produto na lista) — abre o
   cadastro/detalhe. Mantém a cor normal do texto até passar o mouse, pra não
   competir visualmente com botão de ação de verdade. */
.link-linha {
  color: inherit;
  text-decoration: none;
}

.link-linha:hover { color: var(--primaria); text-decoration: underline; }

.linha-token {
  display: flex;
  gap: var(--e3);
  align-items: stretch;
  flex-wrap: wrap;
}

.linha-token input { flex: 1; min-width: 140px; }

.linha-checkbox {
  display: flex !important;
  align-items: center;
  gap: var(--e2);
  font-weight: 400 !important;
  color: var(--texto) !important;
  margin-bottom: var(--e2) !important;
  cursor: pointer;
}

.linha-checkbox input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primaria);
  cursor: pointer;
}

.grupo-config {
  padding: var(--e4) 0;
  border-top: 1px solid var(--borda);
}
.grupo-config:first-of-type { border-top: none; padding-top: 0; }

.grupo-config > label:first-child {
  color: var(--texto);
  font-size: 0.9rem;
  margin-bottom: var(--e3);
}

/* ==========================================================================
   Botões
   ========================================================================== */

.botoes {
  display: flex;
  gap: var(--e3);
  flex-wrap: wrap;
}

.btn {
  flex: 1;
  min-width: 150px;
  padding: 0.8rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: var(--raio-sm);
  cursor: pointer;
  color: #fff;
  background: var(--primaria);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: filter 0.12s, transform 0.05s, box-shadow 0.12s;
}

.btn:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--sombra-md); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-iniciar, .btn-primario { background: var(--primaria); }
.btn-concluir, .btn-sucesso, .btn-aprovar { background: var(--sucesso); }
.btn-perigo, .btn-reprovar { background: var(--erro); }

/* Botão secundário / discreto */
.btn-link {
  background: none;
  border: none;
  color: var(--primaria);
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
  font-weight: 500;
}

.btn-link:hover { text-decoration: underline; }

.acoes-secundarias {
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.btn-cancelar-link { color: var(--erro); }

/* ==========================================================================
   Mensagens e destaques
   ========================================================================== */

.mensagem {
  margin: var(--e4) 0 0;
  font-weight: 500;
  font-size: 0.9rem;
  min-height: 1.4em;
}

.mensagem:empty { margin: 0; min-height: 0; }

.mensagem.erro,
.mensagem.ok {
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-sm);
  border-left: 3px solid;
}

.mensagem.erro {
  color: var(--erro);
  background: var(--erro-suave);
  border-color: var(--erro);
}

.mensagem.ok {
  color: var(--sucesso);
  background: var(--sucesso-suave);
  border-color: var(--sucesso);
}

.preview {
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--primaria-suave);
  border-left: 3px solid var(--primaria);
  border-radius: var(--raio-sm);
  font-size: 0.9rem;
  color: var(--texto);
}

.preview.preview-alerta {
  background: var(--erro-suave);
  border-color: var(--erro);
}

.hidden { display: none !important; }

/* ==========================================================================
   Tabelas
   ========================================================================== */

.tabela-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead th {
  text-align: left;
  padding: 0.7rem var(--e3);
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

tbody td {
  padding: 0.7rem var(--e3);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s; }
tbody tr:hover td { background: var(--superficie-2); }

/* Status como pílula */
.status-em_montagem,
.status-montagem,
.status-pronto,
.status-concluido,
.status-cancelado,
.status-aguardando_teste,
.status-em_teste,
.status-area_tecnica,
.status-aguardando_embalagem {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-em_montagem,
.status-montagem,
.status-aguardando_teste,
.status-em_teste,
.status-aguardando_embalagem {
  background: var(--primaria-suave);
  color: var(--primaria);
}

.status-pronto,
.status-concluido {
  background: var(--sucesso-suave);
  color: var(--sucesso);
}

.status-cancelado,
.status-area_tecnica {
  background: var(--erro-suave);
  color: var(--erro);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 720px) {
  /* Tela estreita: o menu nunca empurra o conteúdo — fica escondido por
     padrão (bancada.js/nav-auth.js já cuidam disso) e, quando aberto, some
     por cima do conteúdo como uma gaveta, com fundo escurecido atrás. */
  body, body.sidebar-oculta, body.tem-flyout, body.sidebar-oculta.tem-flyout { padding: 0 var(--e3) var(--e6); font-size: 14px; }
  .app-bar { padding: var(--e4) 0 var(--e3); }
  .app-bar h1 { font-size: 1.15rem; }

  .nav-principal {
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: var(--sombra-md);
    transition: transform 0.15s ease, visibility 0s linear 0.15s;
  }
  body:not(.sidebar-oculta) .nav-principal {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.15s ease, visibility 0s linear 0s;
  }
  body:not(.sidebar-oculta) .sidebar-backdrop { display: block; }
  /* Sem mouse não existe "encostar na beirada": no celular vale o botão. */
  body.sidebar-oculta .sidebar-zona { display: none; }
  .nav-item { font-size: 0.88rem; }
  .nav-flyout { width: calc(100vw - var(--rail-largura)); max-width: 260px; }

  .card, .painel-acao, .painel-config, .painel-historico { padding: var(--e4); }
  .btn { min-width: 100%; }
}