:root{
  --bg:#f6f3ec;
  --surface:#ffffff;
  --ink:#182231;
  --ink-soft:#5b6779;
  --ink-faint:#8b95a5;
  --line:#e3ddd0;
  --accent:#1f6f63;
  --accent-soft:#e4efec;
  --green:#1f7a4d;
  --green-soft:#e6f3ea;
  --red:#a6402f;
  --red-soft:#f7e6e1;
  --on-accent:#fff;   /* cor do texto/ícone EM CIMA de um fundo --accent */
}

/* Tema alternativo "verde da embalagem": INVERTE o esquema — fundo vira
   verde (tom claro o bastante pra manter o texto escuro --ink legível,
   sem precisar reescrever cor de texto em cada componente), e os botões
   passam a usar o creme que antes era o fundo. --surface continua branco
   de propósito — cartões/tabelas continuam se destacando sobre o verde,
   igual sempre foi sobre o creme. Escolha do usuário, salva no navegador
   — ver função alternarTema() em base.html/landing.html. */
:root[data-tema="verde-embalagem"]{
  --bg:#B7D9A8;
  --accent:#f6f3ec;
  --accent-soft:#fffdf7;
  --line:#9ec48c;
  --on-accent:#1f6f63; /* botão agora é claro, texto precisa ficar escuro */
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  font-size:15.5px;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }

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

.app-sidebar{
  width:220px; flex-shrink:0;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  transition:width 0.15s ease;
}
.app-sidebar .brand{
  font-weight:700; font-size:1.05rem; letter-spacing:-0.01em;
  padding:18px 14px 14px;
  display:flex; align-items:center; gap:8px;
}
.brand-mark{
  width:26px; height:26px; border-radius:7px; background:var(--accent);
  color:var(--on-accent); display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0;
}
.brand-text{ white-space:nowrap; }
.sidebar-toggle{
  margin-left:auto; width:24px; height:24px; border-radius:6px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-faint); font-size:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sidebar-toggle:hover{ background:var(--bg); }

.btn-ver-loja{
  margin:0 12px 10px; padding:9px 10px; border-radius:8px;
  background:var(--accent-soft); color:var(--accent);
  font-size:13.5px; font-weight:700;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.btn-ver-loja:hover{ opacity:0.85; }
.app-sidebar.colapsado .btn-ver-loja{ justify-content:center; padding:9px 0; }

.sidebar-nav{ display:flex; flex-direction:column; gap:2px; padding:0 12px; flex:1; overflow:visible; }
.sidebar-nav > a, .nav-group > a{
  color:var(--ink-soft); font-size:14.5px; font-weight:500;
  padding:9px 10px; border-radius:8px;
  display:flex; align-items:center; gap:8px;
  cursor:grab; white-space:nowrap;
}
.sidebar-nav > a:active, .nav-group > a:active{ cursor:grabbing; }
.sidebar-nav > a:hover, .nav-group > a:hover{ background:var(--bg); }
.sidebar-nav > a.active, .nav-group > a.active{ background:var(--accent-soft); color:var(--accent); }
.sidebar-nav .arrastando{ opacity:0.4; }

.nav-icon{ width:16px; text-align:center; flex-shrink:0; font-size:14px; color:var(--ink-faint); }
.nav-text{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.nav-caret{ font-size:10px; color:var(--ink-faint); flex-shrink:0; }

.drag-alca{
  color:var(--ink-faint); font-size:12px; opacity:0;
  transition:opacity 0.1s ease; flex-shrink:0; width:10px;
}
.sidebar-nav > a:hover .drag-alca, .nav-group > a:hover .drag-alca{ opacity:1; }

/* Grupos com submenu em hover (flyout) */
.nav-group{ position:relative; }
.nav-submenu{
  display:none; position:absolute; left:100%; top:0;
  min-width:190px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:6px; box-shadow:0 6px 24px rgba(24,34,49,0.14);
  z-index:60;
}
/* "ponte" invisível cobrindo o espaço entre o item e o submenu — sem ela,
   o mouse sai da área de hover ao atravessar na diagonal e o menu fecha. */
.nav-submenu::before{
  content:""; position:absolute; left:-10px; top:0; width:10px; height:100%;
}
.nav-group:hover .nav-submenu{ display:block; }
.nav-submenu a{
  display:block; padding:8px 12px; border-radius:6px;
  font-size:13.5px; color:var(--ink-soft); font-weight:500; white-space:nowrap;
}
.nav-submenu a:hover{ background:var(--bg); }
.nav-submenu a.active{ background:var(--accent-soft); color:var(--accent); }

/* Sidebar retraída — só ícones, submenu ainda aparece em hover */
.app-sidebar.colapsado{ width:64px; }
.app-sidebar.colapsado .brand-text,
.app-sidebar.colapsado .nav-text,
.app-sidebar.colapsado .nav-caret,
.app-sidebar.colapsado .drag-alca,
.app-sidebar.colapsado .sidebar-extensoes-label,
.app-sidebar.colapsado .plugin-nome,
.app-sidebar.colapsado .plugin-status{
  display:none;
}
.app-sidebar.colapsado .sidebar-toggle{ margin-left:0; }
.app-sidebar.colapsado .btn-tema{ display:none; }

/* Botão de cor do sistema: bolinha de duas metades (cor atual / branco), igual à da home */
.btn-tema{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--line); padding:0; cursor:pointer;
  margin-left:6px; flex:0 0 22px;
  background:linear-gradient(135deg, var(--accent) 50%, var(--surface) 50%);
}
.btn-tema:hover{ box-shadow:0 0 0 3px var(--accent-soft); }
.app-sidebar.colapsado .brand{ justify-content:center; padding:18px 8px 14px; }
.app-sidebar.colapsado .sidebar-nav > a, .app-sidebar.colapsado .nav-group > a{ justify-content:center; padding:9px 0; }
.app-sidebar.colapsado .plugin-card{ justify-content:center; padding:9px 0; }

.sidebar-extensoes{
  padding:14px 12px 18px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.sidebar-extensoes-label{
  font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink-faint); padding:0 12px 4px;
}
.plugin-card{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-radius:8px; border:1px solid var(--line);
  font-size:13.5px; color:var(--ink-soft); font-weight:500;
}
.plugin-card:hover{ background:var(--bg); }
.plugin-card .plugin-status{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--ink-faint);
}
.plugin-card.ativo{ border-color:var(--accent); background:var(--accent-soft); }
.plugin-card.ativo .plugin-nome{ color:var(--accent-ink, var(--accent)); }
.plugin-card.ativo .plugin-status{ color:var(--accent); }

.app-main{ flex:1; min-width:0; }
.wrap{ max-width:1200px; margin:0 auto; padding:36px 24px 80px; }

.flash{
  background:var(--accent-soft); color:var(--accent);
  border:1px solid var(--accent);
  padding:10px 16px; border-radius:8px; margin-bottom:22px; font-size:14px;
}

h1{ font-size:1.6rem; margin:0 0 6px; letter-spacing:-0.01em; }
.page-sub{ color:var(--ink-soft); margin:0 0 28px; font-size:14.5px; }

/* Dashboard cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:36px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px;
}
.card .label{ font-size:12.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
.card .num{ font-size:1.9rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.card.entrada .num{ color:var(--green); }
.card.saida .num{ color:var(--red); }
.card.saldo .num{ color:var(--ink); }
.card .sub{ font-size:12.5px; color:var(--ink-faint); margin-top:4px; }

.section-title{
  display:flex; justify-content:space-between; align-items:center;
  margin:0 0 14px;
}
.section-title h2{ font-size:1.05rem; margin:0; }
.section-title a{ font-size:13.5px; color:var(--accent); font-weight:500; }

table{ width:100%; border-collapse:collapse; background:var(--surface); border-radius:12px; overflow:hidden; border:1px solid var(--line); }
th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); padding:10px 16px; border-bottom:1px solid var(--line); }
td{ padding:12px 16px; border-bottom:1px solid var(--line); font-size:14.5px; }
tr:last-child td{ border-bottom:none; }
.tipo-entrada{ color:var(--green); font-weight:600; }
.tipo-saida{ color:var(--red); font-weight:600; }
.valor{ font-variant-numeric:tabular-nums; font-weight:600; }

.contas-alerta{ margin-bottom:24px; display:flex; flex-direction:column; gap:8px; }
.contas-alerta-item{
  background:var(--red-soft); border:1px solid var(--red); border-radius:8px;
  padding:10px 16px; font-size:14px; color:var(--ink-soft);
}
.contas-alerta-item span{ font-weight:700; color:var(--red); }
.contas-alerta-item span:not(.atrasada){ color:#8a5a1a; }
.contas-alerta-item a{ float:right; color:var(--accent); font-weight:600; font-size:13px; }

.empty{
  background:var(--surface); border:1px dashed var(--line); border-radius:12px;
  padding:32px; text-align:center; color:var(--ink-faint); font-size:14.5px;
}

/* Forms */
.form-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:22px 24px; margin-bottom:28px;
}
.form-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.field{ flex:1; min-width:140px; display:flex; flex-direction:column; gap:6px; }
.field > div{ min-width:0; }
.field input, .field select, .field textarea{ min-width:0; }
.field label{ font-size:12.5px; color:var(--ink-soft); font-weight:500; }
.field input, .field select, .field textarea{
  padding:9px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:14.5px; font-family:inherit; background:var(--bg); color:var(--ink);
}
.tipo-toggle{ display:flex; gap:8px; }
.tipo-toggle label{
  flex:1; text-align:center; padding:9px; border:1px solid var(--line); border-radius:8px;
  cursor:pointer; font-size:14px; font-weight:600; color:var(--ink-soft);
}
.tipo-toggle input{ display:none; }
.tipo-toggle input:checked + span{ color:inherit; }
.tipo-toggle .opt-entrada input:checked ~ label, .tipo-toggle label:has(input:checked){ }
.tipo-toggle label.entrada-label:has(input:checked){ background:var(--green-soft); border-color:var(--green); color:var(--green); }
.tipo-toggle label.saida-label:has(input:checked){ background:var(--red-soft); border-color:var(--red); color:var(--red); }

.btn{
  display:inline-block; padding:10px 20px; border-radius:8px; border:none;
  background:var(--accent); color:var(--on-accent); font-weight:600; font-size:14.5px; cursor:pointer;
}
.btn:hover{ opacity:0.92; }

.thumb-produto{
  width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0;
  background:var(--bg); border:1px solid var(--line);
}
.thumb-produto-vazio{
  display:flex; align-items:center; justify-content:center;
}
.badge{ display:inline-block; font-size:11.5px; padding:2px 9px; border-radius:999px; font-weight:600; }
.badge.digital{ background:var(--accent-soft); color:var(--accent); }
.badge.fisico{ background:#efe4d0; color:#8a5a1a; }
.badge.combo{ background:#ece1f5; color:#6b3fa0; }
.badge.servico{ background:#dcecf7; color:#2266a0; }

/* Produtos: layout com filtro lateral */
.produtos-layout{ display:flex; gap:24px; align-items:flex-start; }
.filtro-lateral{
  width:170px; flex-shrink:0;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:16px;
}
.filtro-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); margin-bottom:10px; }
.filtro-item{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; font-size:14px; color:var(--ink-soft); font-weight:500;
  margin-bottom:2px;
}
.filtro-item:hover{ background:var(--bg); }
.filtro-item.ativo{ background:var(--accent-soft); color:var(--accent); }
.filtro-count{ font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.filtro-item.ativo .filtro-count{ color:var(--accent); }
.produtos-main{ flex:1; min-width:0; }

/* Ações de linha (editar/excluir) */
.col-acoes{ white-space:nowrap; text-align:right; }
.acao-link{
  font-size:13px; font-weight:600; border:none; background:none; cursor:pointer;
  padding:0; margin-left:14px; font-family:inherit;
}
.acao-link.editar{ color:var(--accent); }
.acao-link.excluir{ color:var(--red); }
.acao-link:hover{ text-decoration:underline; }

@media (max-width:700px){
  .produtos-layout{ flex-direction:column; }
  .filtro-lateral{ width:100%; display:flex; gap:8px; overflow-x:auto; }
  .filtro-item{ white-space:nowrap; }
}

/* Categorias e etiquetas */
.secoes-duas{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media (max-width:760px){ .secoes-duas{ grid-template-columns:1fr; } }

.grid-gateways{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:760px){ .grid-gateways{ grid-template-columns:1fr; } }

/* Blocos colapsáveis (Integrações) */
.lista-colapsavel{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start; }
@media (max-width:760px){ .lista-colapsavel{ grid-template-columns:1fr; } }

.grade-templates{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
.cartao-template{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
}
/* Miniatura ao vivo: um iframe da própria vitrine, encolhido — sempre
   reflete o template de verdade (cor, hero, texto do botão), nunca fica
   desatualizado como um print estático ficaria. */
.preview-template{
  display:block; position:relative; width:100%; aspect-ratio:4/3;
  overflow:hidden; background:var(--bg); border-bottom:1px solid var(--line);
}
.preview-template iframe{
  position:absolute; top:0; left:0; width:400%; height:400%;
  transform:scale(0.25); transform-origin:top left;
  border:none; pointer-events:none;
}
.cartao-template-corpo{ padding:16px 18px 18px; }
.cartao-template-topo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.colapsavel{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden;
}
.colapsavel summary{
  display:flex; align-items:center; gap:10px;
  padding:16px 20px; cursor:pointer; list-style:none;
  font-weight:600; font-size:15px; color:var(--ink);
}
.colapsavel summary::-webkit-details-marker{ display:none; }
.colapsavel-nome{ flex:1; }
.colapsavel-seta{
  color:var(--ink-faint); font-size:12px; transition:transform 0.15s ease;
}
.colapsavel[open] .colapsavel-seta{ transform:rotate(180deg); }
.colapsavel summary:hover{ background:var(--bg); }
.colapsavel-corpo{
  padding:0 20px 20px;
  border-top:1px solid var(--line);
  padding-top:16px;
}

/* Livro Diário */
.livro-data-bar{
  display:flex; align-items:center; gap:16px;
  margin:6px 0 26px;
}
.livro-nav{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--ink-soft); flex-shrink:0;
}
.livro-nav:hover{ background:var(--bg); }
.livro-dia-destaque{
  font-size:2.2rem; font-weight:700; letter-spacing:-0.02em;
  color:var(--ink); display:flex; align-items:baseline; gap:8px;
}
.livro-hoje-badge{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  background:var(--accent-soft); color:var(--accent); padding:3px 9px; border-radius:999px;
}
.livro-mes-ano{
  margin-left:auto; font-size:14.5px; color:var(--ink-soft); font-weight:500;
}

.colapsavel summary .livro-resumo-pago{ font-size:13px; font-weight:600; color:var(--red); }
.colapsavel summary .livro-resumo-recebido{ font-size:13px; font-weight:600; color:var(--green); }

.livro-saldo-dia{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  background:var(--bg); border-top:1px solid var(--line);
  font-size:15px; color:var(--ink-soft); font-weight:500;
}
.livro-saldo-dia strong{ font-size:1.3rem; font-variant-numeric:tabular-nums; }

.lista-gerenciavel{ background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.item-gerenciavel{ padding:10px 16px; border-bottom:1px solid var(--line); }
.item-gerenciavel:last-child{ border-bottom:none; }

.item-visualizacao{ display:flex; align-items:center; gap:10px; }
.item-nome{ font-size:14.5px; color:var(--ink); flex:1; }

.item-edicao{ display:flex; align-items:center; gap:10px; }
.item-edicao input[type=text]{
  border:1px solid var(--line); background:var(--bg); font-size:14.5px; color:var(--ink); font-family:inherit;
  padding:6px 10px; border-radius:6px; flex:1; min-width:0;
}

.item-uso{ font-size:12px; color:var(--ink-faint); white-space:nowrap; }
.etiqueta-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }

.etiqueta-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:2px 9px 2px 6px; border-radius:999px;
  background:var(--bg); color:var(--ink-soft); margin-right:4px; margin-top:3px;
}

.checklist-etiquetas{ display:flex; flex-wrap:wrap; gap:8px; }
.checklist-etiquetas label{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px 5px 8px;
  font-size:13.5px; cursor:pointer; color:var(--ink-soft);
}
.checklist-etiquetas input{ width:auto; }

.ranking-list{ background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.ranking-item{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); }
.ranking-item:last-child{ border-bottom:none; }
.ranking-item .pos{ font-weight:700; color:var(--ink-faint); font-size:14px; width:20px; }
.ranking-item .nome{ flex:1; font-weight:600; }
.ranking-item .qtd{ color:var(--ink-soft); font-size:14px; font-variant-numeric:tabular-nums; }

/* Mobile: por último no arquivo de propósito — precisa vencer regras como
   .cards{grid-template-columns:repeat(3,1fr)} que são declaradas depois do
   ponto onde este bloco ficava antes (empate de especificidade = quem vem
   por último no arquivo vence, media query ou não). */
@media (max-width:820px){
  /* Barra lateral estreita, só ícones (mesmo visual do modo "colapsado" do
     desktop) — fica fixa na lateral esquerda em vez de comer a largura da
     tela ou virar uma barra horizontal que corta palavra no meio. Hover pra
     abrir submenu não existe no toque, então o toque no ícone do grupo abre
     o submenu como um flyout (JS abaixo); toque de novo, ou num item do
     submenu, navega normal. */
  .app-sidebar{
    width:60px !important; height:100vh; position:sticky; top:0; z-index:50;
    flex-shrink:0;
  }
  .app-sidebar .brand{ flex-direction:column; padding:12px 4px; gap:4px; }
  .app-sidebar .brand-text, .app-sidebar .nav-text,
  .app-sidebar .nav-caret, .app-sidebar .drag-alca,
  .app-sidebar .sidebar-extensoes{ display:none; }
  .sidebar-toggle{ display:none; }
  .sidebar-nav{
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px;
    scrollbar-width:none;
  }
  .sidebar-nav::-webkit-scrollbar{ display:none; }
  .sidebar-nav > a, .nav-group > a{ justify-content:center; padding:11px 0; }
  /* Flyout do submenu no toque: JS alterna esta classe (hover não existe
     no toque). Reaproveita o posicionamento absoluto que já existe pro
     hover de desktop (left:100%, ao lado da barra). */
  .nav-group.aberto .nav-submenu{ display:block; }
  .nav-submenu a{ font-size:14px; padding:10px 14px; }
  .wrap{ padding:20px 14px 60px; }
  .cards{ grid-template-columns:1fr; }
  /* Tabela vira caixa que rola de lado — mantém as colunas alinhadas
     (thead/tbody continuam dentro da mesma table), só o container que
     ganha overflow-x. Truque padrão pra tabela responsiva sem editar
     cada template que tem <table>. */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  th, td{ padding:10px 12px; }
  /* Tabela de /produtos tinha 9 colunas — de sobra até pra rolar de lado
     sem ficar claro que dava pra rolar (aparecia só uma lasca da coluna
     "Tipo" cortada na borda, parecendo quebrado). Esconde as colunas
     secundárias (Tipo, Vendas, Receita, Margem, Lucro) no celular,
     deixando Nome/Preço/Estoque/Ações visíveis sem precisar de scroll —
     o resto continua disponível no relatório/no PC. */
  .col-opcional{ display:none; }
}

/* Tabela de produtos no celular: nem escondendo colunas cabia de verdade
   (a coluna Nome com foto+texto já é larga o bastante sozinha, e larguras
   fixas em % quebravam cabeçalho tipo "Estoque" letra por letra). Vira
   lista de cartões empilhados — cada <tr> fica um cartão, cada <td> uma
   linha dentro dele com o rótulo da coluna na frente (via `data-label` +
   `::before`, técnica padrão de tabela responsiva sem duplicar HTML). */
@media (max-width:600px){
  .tabela-produtos{ display:block; border:none; background:none; }
  .tabela-produtos thead{ display:none; }
  .tabela-produtos tbody{ display:block; }
  /* Cada <tr> vira um cartão. Flex-wrap: a foto+nome (1ª célula, 100% de
     largura) empurra pra primeira linha sozinha; Preço e Estoque, sendo
     bem mais estreitos, ficam lado a lado na linha seguinte; Ações (100%
     de largura também) fecha o cartão embaixo, com uma linha separando. */
  .tabela-produtos tr{
    display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line);
    border-radius:12px; padding:12px 14px; margin-bottom:10px;
  }
  .tabela-produtos td{ display:block; border:none; padding:3px 0; }
  .tabela-produtos td[data-label]::before{
    content:attr(data-label) ": "; font-weight:600; color:var(--ink-faint);
    font-size:11px; text-transform:uppercase; letter-spacing:0.02em;
  }
  .tabela-produtos td:first-child{ width:100%; }
  .tabela-produtos td[data-label="Preço"], .tabela-produtos td[data-label="Estoque"]{ margin-right:20px; }
  /* `.tabela-produtos td{...}` acima tem mais especificidade que
     `.col-opcional` sozinho (bloco de 820px) e vencia ele, fazendo Tipo/
     Vendas/Receita/Margem/Lucro voltarem a aparecer nos cartões — reforça
     aqui com o mesmo nível de especificidade. */
  .tabela-produtos td.col-opcional{ display:none; }
  .tabela-produtos .col-acoes{ display:flex; gap:14px; width:100%; margin-top:6px; padding-top:8px; border-top:1px solid var(--line); }
  .tabela-produtos .col-acoes .acao-link{ margin-left:0; }
}

/* Novidades: último item do menu, separado e em amarelo-canário para chamar atenção sem brigar com a marca. */
.sidebar-nav > a.nav-novidades{ margin-top:18px; background:#fff3b0; color:#5c4a00; font-weight:700; border:1px solid #f0d85a; }
.sidebar-nav > a.nav-novidades:hover{ background:#ffec85; }
.sidebar-nav > a.nav-novidades.active{ background:#ffe566; color:#4a3b00; border-color:#d9b800; }