/* Identidade Vortex (2026-10-23): azul do logo = marca e ação; verde só pra dinheiro entrando; grafite nos títulos e
   nos destaques escuros. Fontes servidas daqui mesmo (licença OFL em /css/fontes): nada de Google Fonts no caminho. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fontes/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fontes/jakarta-latin.woff2") format("woff2");
}

:root {
  --fundo: #f5f7fa;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;
  --titulo: #0f172a;
  --texto: #1e293b;
  --texto-suave: #475569;
  --primaria: #1565c0;
  --primaria-escura: #0d47a1;
  --primaria-clara: #e8f0fc;
  --grafite: #0f172a;
  --perigo: #b91c1c;
  --perigo-fundo: #fdecec;
  --perigo-borda: #f3c4c4;
  --sucesso: #15803d;
  --sucesso-fundo: #e7f6ec;
  --aviso: #b45309;
  --aviso-texto: #8a4b08;
  --aviso-fundo: #fef3e2;
  --menu: var(--grafite);
  --raio: 14px;
  --raio-campo: 10px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fonte-titulo: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* hidden sempre esconde, mesmo em elemento com display próprio (flex, grid) no CSS. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primaria); text-underline-offset: 2px; }
a:hover { color: var(--primaria-escura); }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--titulo); letter-spacing: -0.01em; }
h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.02em; }
h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.sub { color: var(--texto-suave); margin: 0 0 22px; }
td, th, .valor, .numero { font-variant-numeric: tabular-nums; }

/* ---- Estrutura: menu lateral + conteúdo ---- */
.app { display: flex; min-height: 100vh; }
.conteudo { flex: 1; min-width: 0; padding: 32px 36px 56px; max-width: 1200px; }

/* Barra do topo: só no celular (abre o menu). */
.barra-topo { display: none; }

/* ---- Menu lateral (ícones Lucide em /css/icones.svg) ---- */
.menu {
  --menu-fundo: #ffffff; --menu-texto: #334155; --menu-suave: #64748b; --menu-hover: #f1f5f9;
  --menu-ativo-fundo: var(--primaria-clara); --menu-ativo: var(--primaria-escura); --menu-linha: var(--borda);
  width: 256px; background: var(--menu-fundo); color: var(--menu-texto); flex-shrink: 0; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; transition: width .18s ease; border-right: 1px solid var(--menu-linha);
}
.menu .icone { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu .marca { display: flex; align-items: center; gap: 10px; padding: 20px 14px 16px 20px; color: var(--titulo); font-family: var(--fonte-titulo); font-weight: 800; font-size: 19px; }
.menu .marca .logo { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; display: block; }
.menu .marca .nome span { color: var(--primaria); }
.menu .marca .recolher { margin-left: auto; background: none; border: 0; color: var(--menu-suave); padding: 6px; border-radius: 8px; cursor: pointer; display: grid; height: auto; min-height: 0; }
.menu .marca .recolher:hover { background: var(--menu-hover); color: var(--menu-texto); }
.menu .marca .fechar-menu { display: none; }
.menu .grupos { flex: 1; overflow-y: auto; padding: 0 12px 12px; scrollbar-width: thin; scrollbar-color: var(--menu-linha) transparent; }
.menu summary.modulo {
  display: flex; align-items: center; gap: 8px; padding: 16px 12px 6px; cursor: pointer; list-style: none; border-radius: 8px;
  color: var(--menu-suave); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.menu summary.modulo::-webkit-details-marker { display: none; }
.menu summary.modulo:hover { color: var(--menu-texto); }
.menu summary.modulo > .icone:first-child { display: none; } /* expandido: só o nome do módulo; o ícone aparece recolhido */
.menu summary.modulo > .icone:last-child { display: none; }
.menu summary.modulo::after { content: "\25BE"; margin-left: auto; font-size: 13px; line-height: 1; transition: transform .15s; }
.menu details:not([open]) > summary.modulo::after { transform: rotate(-90deg); }
.menu .item {
  display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 42px; min-height: 0; margin: 1px 0; border-radius: 10px; width: 100%; line-height: normal;
  color: var(--menu-texto); text-decoration: none; font-size: 14px; font-weight: 500; background: none; border: 0; font-family: inherit;
  cursor: pointer; text-align: left; position: relative; transition: background .12s, color .12s;
}
.menu .item .icone { color: var(--menu-suave); }
.menu .item:hover { background: var(--menu-hover); color: var(--titulo); }
.menu .item:hover .icone { color: var(--menu-texto); }
.menu .item.ativo { background: var(--menu-ativo-fundo); color: var(--menu-ativo); font-weight: 600; }
.menu .item.ativo .icone { color: var(--menu-ativo); }
.menu .item:focus-visible, .menu summary.modulo:focus-visible, .menu .marca button:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }
.menu .rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .alerta, .menu .alerta-fechado {
  margin-left: auto; min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--perigo); color: #fff; font-size: 12px;
  font-weight: 700; text-align: center; line-height: 20px; letter-spacing: 0;
}
.menu .alerta-fechado { display: none; }
.menu details:not([open]) .alerta-fechado { display: inline-block; }
.menu .rodape { padding: 10px 12px 14px; border-top: 1px solid var(--menu-linha); font-size: 13px; }
.menu .rodape form { margin: 0; }
.menu .usuario { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--titulo); font-weight: 600; font-size: 14px; }
.menu .avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--grafite); color: #fff; font-size: 12px; font-weight: 700; }
/* Recolhido: só ícones (o nome aparece no title, ao passar o mouse). */
.menu.recolhido { width: 72px; }
.menu.recolhido .rotulo, .menu.recolhido summary.modulo > .icone:last-child, .menu.recolhido .alerta-fechado { display: none; }
.menu.recolhido summary.modulo::after { content: none; }
.menu.recolhido .marca { flex-direction: column; gap: 8px; padding: 16px 0 8px; }
.menu.recolhido .marca .recolher { margin-left: 0; }
.menu.recolhido .grupos { padding: 0 12px 12px; }
.menu.recolhido summary.modulo { justify-content: center; padding: 10px 0 4px; border-top: 1px solid var(--menu-linha); border-radius: 0; margin-top: 6px; pointer-events: none; }
.menu.recolhido summary.modulo > .icone:first-child { display: block; color: var(--menu-suave); width: 14px; height: 14px; }
.menu.recolhido .item { justify-content: center; padding: 0; }
.menu.recolhido .item .alerta { position: absolute; top: 2px; right: 2px; min-width: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
.menu.recolhido .usuario { justify-content: center; padding: 8px 0; }
.menu-fundo { display: none; }

/* ---- Cartões ---- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px; margin-bottom: 20px; box-shadow: var(--sombra); }
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }
/* Filtros no topo das listas: campos lado a lado, quebram de linha sozinhos. */
.cartao.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; padding: 16px 18px; }
.cartao.filtros > div { min-width: 150px; }
.cartao.filtros > .crescer { flex: 1; min-width: 220px; }

/* Números de destaque (Vendas, painel) */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.indicador .rotulo-indicador { font-size: 14px; color: var(--texto-suave); }
.indicador .valor { font-family: var(--fonte-titulo); font-weight: 800; font-size: 28px; color: var(--titulo); letter-spacing: -0.02em; line-height: 1.15; }
.indicador .detalhe { font-size: 13px; color: var(--texto-suave); }
.indicador.escuro { background: var(--grafite); border-color: var(--grafite); }
.indicador.escuro .rotulo-indicador, .indicador.escuro .detalhe { color: #cbd5e1; }
.indicador.escuro .valor { color: #fff; }
.detalhe.positivo { color: var(--sucesso); font-weight: 600; }
.indicador.escuro .detalhe.positivo { color: #86efac; }
.detalhe.negativo { color: var(--perigo); font-weight: 600; }

/* Categorias: categoria de cima e as subcategorias recuadas embaixo dela. */
.arvore-categorias, .arvore-categorias ul { list-style: none; margin: 0; padding: 0; }
.arvore-categorias > li { border-bottom: 1px solid #eef2f6; padding: 6px 0; }
.arvore-categorias > li:last-child { border-bottom: 0; }
.arvore-categorias ul { margin-left: 22px; border-left: 2px solid var(--borda); padding-left: 14px; }
.linha-categoria { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.nome-categoria { font-weight: 600; color: var(--titulo); }
.arvore-categorias ul .nome-categoria { font-weight: 500; }
.acoes-categoria { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* Escolher categoria no produto + criar ali mesmo (/js/categoria-rapida.js). */
.categoria-escolha { display: flex; gap: 8px; align-items: flex-start; }
.categoria-escolha select { flex: 1; min-width: 0; }
.categoria-nova { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.categoria-nova input { flex: 1; min-width: 160px; }
.categoria-nova select { flex: 1; min-width: 160px; }

/* ---- Tabelas ---- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 600; border-bottom-color: var(--borda); white-space: nowrap; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--superficie-2); }
tr:last-child td { border-bottom: 0; }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
.tabela-rolagem { overflow-x: auto; }

/* ---- Formulários ---- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 18px; }
.grade .largo { grid-column: span 2; }
label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-campo);
  font: inherit; background: #fff; color: var(--titulo); transition: border-color .12s, box-shadow .12s;
}
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--primaria); }
input[type="file"] { padding: 8px; }
textarea { min-height: 88px; }
input:hover, select:hover, textarea:hover { border-color: #94a3b8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-clara); }
input:disabled, select:disabled { background: var(--superficie-2); color: var(--texto-suave); }
input::placeholder { color: #94a3b8; }
.dica { font-size: 12.5px; color: var(--texto-suave); margin-top: 4px; }
.acoes { margin-top: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

button, .botao {
  display: inline-block; min-height: 44px; padding: 10px 18px; line-height: 22px; border-radius: var(--raio-campo); text-align: center;
  border: 1px solid var(--primaria); background: var(--primaria); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background .12s, border-color .12s, color .12s;
}
button:hover, .botao:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); color: #fff; }
button:focus-visible, .botao:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
button.secundario, .botao.secundario { background: #fff; color: var(--titulo); border-color: var(--borda-forte); }
button.secundario:hover, .botao.secundario:hover { background: var(--superficie-2); border-color: #94a3b8; color: var(--titulo); }
button.perigo, .botao.perigo { background: #fff; color: var(--perigo); border-color: var(--perigo-borda); }
button.perigo:hover, .botao.perigo:hover { background: var(--perigo-fundo); color: var(--perigo); border-color: var(--perigo); }
button.sucesso, .botao.sucesso { background: var(--sucesso); border-color: var(--sucesso); }
/* Desabilitado tem que parecer desabilitado (antes ficava azul e só não clicava) */
button:disabled, button:disabled:hover { background: #eef2f6; color: #8a94a3; border-color: #dbe1e8; cursor: not-allowed; }
button.pequeno, .botao.pequeno { min-height: 34px; padding: 5px 12px; font-size: 13px; }
form.inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; flex-wrap: wrap; }
form.inline select, form.inline input { width: auto; min-height: 38px; padding: 6px 10px; }
form.inline button { min-height: 38px; padding: 7px 14px; font-size: 14px; }

/* ---- Mensagens e selos ---- */
.msg { padding: 13px 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid transparent; }
.msg.erro { background: var(--perigo-fundo); color: var(--perigo); border-color: var(--perigo-borda); }
.msg.sucesso { background: var(--sucesso-fundo); color: var(--sucesso); border-color: #bfe5cc; }
.msg.aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border-color: #f6d9ae; }

.selo { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.selo.sim { background: var(--sucesso-fundo); color: var(--sucesso); }
.selo.nao { background: #eef2f6; color: var(--texto-suave); }
.selo.pendente { background: var(--aviso-fundo); color: var(--aviso-texto); }
.selo.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.selo.info { background: var(--primaria-clara); color: var(--primaria-escura); }

.token { font-family: Consolas, "Courier New", monospace; font-size: 15px; background: var(--primaria-clara); border: 1px dashed var(--primaria); padding: 10px 12px; border-radius: 10px; word-break: break-all; }
.segredo { font-family: Consolas, "Courier New", monospace; font-size: 18px; font-weight: 700; letter-spacing: .05em; }

/* ---- Fotos do produto (cadastro) e foto em tamanho grande (/js/fotos.js) ---- */
.fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.foto-cartao { margin: 0; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: var(--superficie); }
.foto-cartao.principal { border-color: var(--primaria); box-shadow: 0 0 0 1px var(--primaria); }
.foto-abrir { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: #f1f5f9; cursor: zoom-in; aspect-ratio: 1; min-height: 0; }
.foto-abrir:hover { background: #f1f5f9; }
.foto-abrir img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fotos-colar { border: 2px dashed var(--borda-forte); border-radius: 12px; padding: 16px; color: var(--texto-suave); background: var(--superficie-2); }
.fotos-colar:focus-visible, .fotos-colar.arrastando { border-color: var(--primaria); background: var(--primaria-clara); outline: none; }
.fotos-colar strong { color: var(--titulo); }
.fotos-pendentes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.foto-pendente { position: relative; margin: 0; width: 96px; height: 96px; border: 1px solid var(--borda); border-radius: 10px; background: #f1f5f9; overflow: hidden; }
.foto-pendente img { width: 100%; height: 100%; object-fit: contain; display: block; }
.foto-pendente-remover { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 999px;
  background: rgba(15, 23, 42, .7); color: #fff; font-size: 16px; line-height: 24px; cursor: pointer; }
.fotos-colar-aviso { color: var(--aviso-texto); font-size: 14px; margin-top: 6px; min-height: 0; }
.foto-cartao figcaption { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; }
.miniatura { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #f1f5f9; display: block; cursor: zoom-in; border: 1px solid var(--borda); }
.miniatura.vazia { cursor: default; }
.foto-grande { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .88); display: none; align-items: center; justify-content: center; padding: 48px 72px; }
.foto-grande.aberta { display: flex; }
.foto-grande img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.foto-grande button { position: absolute; background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
  width: 44px; height: 44px; min-height: 0; font-size: 28px; line-height: 1; padding: 0; display: grid; place-items: center; }
.foto-grande button:hover { background: rgba(255, 255, 255, .28); }
.foto-grande button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.foto-grande-fechar { top: 14px; right: 14px; }
.foto-grande-anterior { left: 14px; top: 50%; transform: translateY(-50%); }
.foto-grande-proxima { right: 14px; top: 50%; transform: translateY(-50%); }
.foto-grande-contador { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #e2e8f0; font-size: 14px; }

/* ---- Busca com sugestões (/js/busca-produto.js, /js/busca-cliente.js) ---- */
.campo-busca { flex: 1; min-width: 260px; max-width: 460px; }
.campo-busca input { width: 100%; }
.sugestoes { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); max-height: 360px; overflow-y: auto; padding: 4px; }
.sugestao { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  text-align: left; font: inherit; font-weight: 400; color: var(--texto); cursor: pointer; white-space: normal; justify-content: flex-start; }
.sugestao:hover, .sugestao.marcada { background: var(--primaria-clara); color: var(--texto); }
.sugestao-foto { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: #f1f5f9 center / cover no-repeat; }
.sugestao-texto { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sugestao-texto strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugestao-preco { font-weight: 600; white-space: nowrap; }
.sugestoes-vazio { padding: 8px 10px; margin: 0; }

/* ---- Login, assistente e telas sem menu ---- */
.tela-acesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: radial-gradient(1200px 600px at 50% -10%, #e3edfb 0%, var(--fundo) 60%); }
.tela-acesso .cartao { width: 100%; max-width: 400px; padding: 32px; box-shadow: 0 12px 40px rgba(15, 23, 42, .08); }
.tela-acesso .marca { color: var(--titulo); padding: 0 0 22px; font-family: var(--fonte-titulo); font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.tela-acesso .marca img { width: 46px; height: 46px; object-fit: contain; }
.tela-acesso .marca .nome span { color: var(--primaria); }
.tela-acesso form > div { margin-bottom: 16px; }
.tela-acesso button { width: 100%; }

/* Acesso de suporte Vortex: faixa fixa no topo de toda página do lojista enquanto a equipe Vortex estiver na conta. */
.faixa-suporte {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--aviso); color: #fff; padding: 7px 16px; font-size: .9rem; text-align: center;
}
body:has(.faixa-suporte) { padding-top: 34px; }

/* ---- Celular e tablet pequeno: menu vira gaveta aberta pelo botão da barra do topo; tabelas rolam de lado ---- */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .barra-topo {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40; height: 60px; padding: 0 12px 0 16px;
    background: var(--superficie); border-bottom: 1px solid var(--borda);
  }
  body:has(.faixa-suporte) .barra-topo { top: 34px; }
  .barra-topo .logo { width: 30px; height: 30px; object-fit: contain; }
  .barra-topo .titulo-barra { flex: 1; min-width: 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: 17px; color: var(--titulo);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-topo .abrir-menu { width: 44px; height: 44px; min-height: 0; padding: 0; background: #fff; color: var(--titulo); border: 1px solid var(--borda); border-radius: 12px; }
  .barra-topo .abrir-menu .icone { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  .menu, .menu.recolhido {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(300px, 86vw); height: 100%;
    transform: translateX(-102%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(15, 23, 42, .2);
  }
  body.menu-aberto .menu { transform: none; }
  .menu { overflow-y: auto; }
  .menu .grupos { flex: none; overflow: visible; }
  .menu.recolhido .rotulo, .menu.recolhido .alerta-fechado { display: initial; }
  .menu.recolhido .item { justify-content: flex-start; padding: 0 12px; }
  .menu.recolhido summary.modulo { justify-content: flex-start; padding: 16px 12px 6px; border-top: 0; pointer-events: auto; }
  .menu.recolhido summary.modulo > .icone:first-child { display: none; }
  .menu.recolhido summary.modulo::after { content: "\25BE"; }
  .menu.recolhido .marca { flex-direction: row; padding: 20px 14px 16px 20px; }
  .menu .marca .recolher { display: none; }
  .menu .marca .fechar-menu { display: grid; margin-left: auto; width: 40px; height: 40px; min-height: 0; padding: 0; place-items: center;
    background: none; border: 0; color: var(--menu-suave); border-radius: 10px; }
  .menu-fundo { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.menu-aberto .menu-fundo { opacity: 1; pointer-events: auto; }
  body.menu-aberto { overflow: hidden; }
  .menu .item { height: 46px; }

  .conteudo { padding: 20px 16px 40px; }
  h1 { font-size: 22px; }
  .cartao { padding: 16px; border-radius: 12px; }
  .grade { grid-template-columns: 1fr; }
  .grade .largo { grid-column: auto; }
  .cartao.filtros > div { flex: 1 1 140px; min-width: 0; }
  .cartao.filtros > .crescer { flex: 1 1 100%; }
  .cartao.filtros input { max-width: none !important; }
  .cartao.filtros > button, .cartao.filtros > .botao { flex: 1 1 auto; }
  /* Tabela larga rola de lado dentro do cartão, sem empurrar a página. */
  .cartao > table, .cartao > form > table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table { font-size: 14px; }
  .acoes > button, .acoes > .botao { flex: 1 1 auto; }
  .indicador .valor { font-size: 24px; }
  .foto-grande { padding: 56px 12px; }
}

/* Rótulo só pra leitor de tela (o campo já se explica pelo placeholder e pelo lugar). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Lucro, margem e markup no cadastro do produto (/js/calculo-lucro.js). */
.calculo-lucro { margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); }
.calculo-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.calculo-item .rotulo-indicador { font-size: 13px; color: var(--texto-suave); }
.calculo-item .valor { font-family: var(--fonte-titulo); font-weight: 800; font-size: 22px; color: var(--titulo); }
.calculo-item .valor.negativo { color: var(--perigo); }
.calculo-item .conta { font-size: 12.5px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.aviso-calculo { margin: 12px 0 0; color: var(--perigo); font-weight: 600; font-size: 14px; }
.explicacao { margin-top: 12px; font-size: 14px; }
.explicacao summary { cursor: pointer; color: var(--primaria); font-weight: 600; }
.explicacao p { margin: 8px 0 0; line-height: 1.55; }

/* ---- Início e Relatórios ---- */
.conteudo-largo { max-width: 1320px; }
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sobretitulo { margin: 0 0 4px; color: var(--texto-suave); font-size: 14px; }
.menu .grupos > .item:first-child { margin-top: 2px; }

.filtros-periodo { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.segmentado { display: inline-flex; padding: 4px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; flex-wrap: wrap; gap: 2px; }
.segmentado a { padding: 8px 14px; border-radius: 9px; color: #334155; text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; }
.segmentado a:hover { background: var(--superficie-2); color: var(--titulo); }
.segmentado a.ativo { background: var(--grafite); color: #fff; font-weight: 600; }
.segmentado a:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
.periodo-escolher { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.periodo-escolher > div { min-width: 140px; }
.periodo-escolher input, .periodo-escolher select { min-height: 42px; padding: 8px 10px; }
.periodo-escolher button { min-height: 42px; padding: 9px 16px; }

.variacao { font-weight: 600; }
.variacao.subiu { color: var(--sucesso); }
.variacao.caiu { color: var(--perigo); }
.indicador.escuro .variacao.subiu { color: #86efac; }
.indicador.escuro .variacao.caiu { color: #fca5a5; }
.indicador.escuro .variacao:not(.subiu):not(.caiu) { color: #cbd5e1; font-weight: 400; }
.detalhe.negativo { color: var(--perigo); font-weight: 600; }
td.negativo { color: var(--perigo); font-weight: 600; }
td.positivo { color: var(--sucesso); font-weight: 600; }
td.sem-custo { color: var(--texto-suave); }

.grade-painel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 4px; }
.grade-painel > .cartao, .grade-painel > form.cartao { margin-bottom: 16px; min-width: 0; }
.grade-painel > .largo-2 { grid-column: span 2; }
.cartao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.cartao-topo h2 { margin: 0; }
.cartao-topo a { font-size: 14px; font-weight: 600; text-decoration: none; }
.cartao.vazio { text-align: left; padding: 28px; }

/* Gráfico de barras (relatorio-fragmentos :: grafico) */
.grafico-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--texto-suave); margin-bottom: 10px; }
.grafico-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.cor-atual { background: var(--primaria); }
.cor-comparacao { background: #cbd5e1; }
.grafico-barras { display: flex; align-items: stretch; gap: 6px; height: 220px; overflow-x: auto; padding-bottom: 2px; }
.grafico-coluna { flex: 1 0 22px; display: flex; flex-direction: column; min-width: 22px; }
.grafico-pilha { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--borda); }
.grafico-pilha .barra { display: block; width: 42%; max-width: 26px; border-radius: 4px 4px 0 0; }
.grafico-pilha .barra.atual { background: var(--primaria); }
.grafico-pilha .barra.comparacao { background: #cbd5e1; }
.grafico-coluna.agora .barra.atual { background: var(--primaria-escura); box-shadow: 0 0 0 2px var(--primaria-clara); }
.grafico-coluna:hover .barra.atual { background: var(--primaria-escura); }
.grafico-rotulo { text-align: center; font-size: 11.5px; color: var(--texto-suave); padding-top: 6px; white-space: nowrap; }

/* Barras horizontais (formas de pagamento, categorias) */
.lista-barras { display: flex; flex-direction: column; gap: 14px; }
.linha-barra-texto { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.linha-barra-texto span { color: var(--texto-suave); }
.trilho { height: 10px; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.trilho span { display: block; height: 100%; border-radius: 999px; background: var(--primaria); min-width: 2px; }
.linha-barra.sub { margin-left: 18px; }
.linha-barra.sub .trilho { height: 6px; }
.linha-barra.sub .trilho span { background: #7aa7e0; }

/* Precisa da sua atenção */
.avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avisos li > a, .avisos li > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 16px; border-radius: 12px; text-decoration: none; color: var(--texto);
  border-left: 0; position: relative; }
.avisos li > a strong, .avisos li > div strong { color: var(--titulo); font-size: 14px; }
.avisos li > a span, .avisos li > div span { color: var(--texto-suave); font-size: 13px; }
.avisos li > a::before, .avisos li > div::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; }
.avisos li.perigo > * { background: var(--perigo-fundo); }
.avisos li.perigo > *::before { background: var(--perigo); }
.avisos li.aviso > * { background: var(--aviso-fundo); }
.avisos li.aviso > *::before { background: var(--aviso); }
.avisos li.info > * { background: var(--primaria-clara); }
.avisos li.info > *::before { background: var(--primaria); }
.avisos li > a:hover { filter: brightness(.98); }

/* Caixas agora */
.caixas-agora { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.caixa-agora { border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.caixa-agora-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.valor-caixa { font-family: var(--fonte-titulo); font-weight: 800; font-size: 20px; color: var(--titulo); }

/* Abas dos relatórios */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 20px; overflow-x: auto; }
.abas a { padding: 10px 14px; color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent;
  margin-bottom: -1px; white-space: nowrap; }
.abas a:hover { color: var(--titulo); }
.abas a.ativa { color: var(--primaria-escura); border-bottom-color: var(--primaria); }

/* Curva ABC */
.curvas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.curva { display: flex; gap: 12px; align-items: center; }
.letra-curva { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 18px; color: #fff; }
.letra-curva.pequena { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
.letra-curva.curva-A { background: var(--sucesso); }
.letra-curva.curva-B { background: var(--aviso); }
.letra-curva.curva-C { background: #64748b; }

@media (max-width: 1100px) {
  .grade-painel { grid-template-columns: 1fr; }
  .grade-painel > .largo-2 { grid-column: auto; }
}
@media (max-width: 860px) {
  .filtros-periodo { flex-direction: column; align-items: stretch; }
  .segmentado { display: flex; }
  .segmentado a { flex: 1 1 auto; text-align: center; padding: 9px 8px; }
  .periodo-escolher > div { flex: 1 1 130px; min-width: 0; }
  .grafico-barras { height: 170px; gap: 3px; }
  .grafico-coluna { flex-basis: 16px; min-width: 16px; }
  .grafico-rotulo { font-size: 10px; }
  .curvas { grid-template-columns: 1fr; }
  .cabecalho-pagina .botao { width: 100%; }
}

/* Contas a receber */
.barra-vencimento { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); }
.barra-vencimento-acao { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.barra-vencimento-acao input[type="date"] { min-height: 34px; padding: 4px 8px; }
tr.estornado td { color: var(--texto-suave); text-decoration: line-through; }
tr.estornado td:last-child { text-decoration: none; }
a.indicador-link { text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
a.indicador-link:hover { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-clara); }

/* Código de ativação do caixa: grande e espaçado, pra ler e digitar sem erro. */
.codigo-ativacao { font-family: Consolas, "Courier New", monospace; font-size: 26px; font-weight: 700; letter-spacing: .12em; color: var(--titulo);
  background: var(--primaria-clara); border: 1px dashed var(--primaria); border-radius: 10px; padding: 10px 14px; display: inline-block; }

/* Promoções: os quatro tipos como cartões clicáveis; dias da semana e lojas como fichas marcáveis. */
.tipos-promocao { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tipo-promocao { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio);
  text-decoration: none; color: var(--texto); background: var(--superficie); }
.tipo-promocao strong { color: var(--titulo); font-family: var(--fonte-titulo); }
.tipo-promocao span { font-size: 13px; color: var(--texto-suave); }
.tipo-promocao:hover, .tipo-promocao:focus-visible { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-clara); outline: none; }
.rotulo-campo { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--titulo); }
.dias-semana { display: flex; flex-wrap: wrap; gap: 8px; }
.dias-semana label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--borda);
  border-radius: 999px; font-weight: 500; cursor: pointer; }
.dias-semana label:has(input:checked) { border-color: var(--primaria); background: var(--primaria-clara); color: var(--primaria-escura); }
.dias-semana input { width: auto; margin: 0; }