/* Ajeitor: estilo base. Cores e medidas ficam nas variáveis abaixo. */
:root {
  --fundo: #f2f5f7;
  --superficie: #ffffff;
  --texto: #10212b;
  --texto-suave: #5a6b76;
  --borda: #e1e7eb;
  --borda-forte: #c9d3da;
  --primaria: #0f766e;          /* verde-petróleo: botões, links, foco */
  --primaria-escura: #115e59;
  --primaria-clara: #e6f6f4;
  --destaque: var(--primaria);
  --menu-fundo: #0e2430;
  --menu-fundo-2: #12303e;
  --menu-texto: #c4d3db;
  --ok: #15803d;
  --erro: #b91c1c;
  --aviso: #a16207;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(16, 33, 43, .05), 0 1px 8px rgba(16, 33, 43, .04);
  --largura-menu: 252px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
}

/* Cor de cada módulo: --mod (forte, no menu escuro), --mod-texto (sobre fundo claro), --mod-fundo (fundo claro). */
.mod-vendas { --mod: #2dd4bf; --mod-texto: #0f766e; --mod-fundo: #ccfbf1; }
.mod-cadastros { --mod: #a5b4fc; --mod-texto: #4338ca; --mod-fundo: #e0e7ff; }
.mod-estoque { --mod: #fbbf24; --mod-texto: #b45309; --mod-fundo: #fef3c7; }
.mod-financeiro { --mod: #7dd3fc; --mod-texto: #0369a1; --mod-fundo: #e0f2fe; }
.mod-analises { --mod: #d8b4fe; --mod-texto: #7e22ce; --mod-fundo: #f3e8ff; }
.mod-configuracoes { --mod: #cbd5e1; --mod-texto: #475569; --mod-fundo: #e2e8f0; }
.mod-administracao { --mod: #fda4af; --mod-texto: #be123c; --mod-fundo: #ffe4e6; }
.mod-personalizados { --mod: #fdba74; --mod-texto: #c2410c; --mod-fundo: #ffedd5; }

* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.5; }
a { color: var(--primaria); }
a:hover { color: var(--primaria-escura); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; letter-spacing: -0.02em; }
.icone { flex: 0 0 auto; display: block; }

/* Layout com menu lateral */
.layout { display: grid; grid-template-columns: var(--largura-menu) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .2s; }
.menu-recolhido .layout { grid-template-columns: 72px minmax(0, 1fr); }
.menu {
  background: linear-gradient(180deg, var(--menu-fundo), var(--menu-fundo-2)); color: var(--menu-texto);
  display: flex; flex-direction: column; padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.menu-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; min-width: 0; flex: 1; }
.marca:hover { color: #fff; }
.marca-logo {
  flex: 0 0 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  letter-spacing: .02em; color: #06302b; background: linear-gradient(135deg, #5eead4, #fbbf24);
}
.marca-logo .logo-produto { width: 76%; height: 76%; }
.marca-texto { display: flex; flex-direction: column; font-weight: 700; font-size: 1.02rem; line-height: 1.2; min-width: 0; }
.marca-texto small { font-weight: 500; font-size: .78rem; color: var(--menu-texto); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-botao {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: transparent; color: var(--menu-texto); cursor: pointer;
}
.menu-botao:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.so-celular { display: none; }
.menu-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu-link {
  display: flex; align-items: center; gap: 11px; color: var(--menu-texto); text-decoration: none;
  padding: 7px 10px; border-radius: 9px; font-size: .93rem; position: relative;
}
.menu-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-link.ativo { background: rgba(255, 255, 255, .11); color: #fff; font-weight: 600; }
.menu-link.ativo::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mod, #5eead4); }
.menu-inicio { margin-bottom: 6px; }
.menu-inicio .icone { color: #5eead4; }
.menu-modulo summary {
  list-style: none; display: flex; align-items: center; gap: 11px; cursor: pointer; user-select: none;
  padding: 8px 10px; border-radius: 9px; color: #e7eff3; font-weight: 600; font-size: .9rem;
}
.menu-modulo summary::-webkit-details-marker { display: none; }
.menu-modulo summary:hover { background: rgba(255, 255, 255, .06); }
.modulo-icone {
  flex: 0 0 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--mod);
  background: color-mix(in srgb, var(--mod) 16%, transparent);
}
.modulo-icone .icone { width: 16px; height: 16px; }
.modulo-seta { margin-left: auto; opacity: .55; transition: transform .15s; }
.modulo-seta .icone { width: 15px; height: 15px; }
.menu-modulo[open] .modulo-seta { transform: rotate(90deg); }
.menu-itens { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 8px 14px; margin-left: 13px; border-left: 1px solid rgba(255, 255, 255, .09); }
.menu-itens .menu-link { font-size: .89rem; padding: 6px 10px; }
.menu-itens .menu-link .icone { width: 16px; height: 16px; opacity: .75; }
.menu-itens .menu-link.ativo .icone { opacity: 1; color: var(--mod); }
.menu-itens .menu-link.ativo::before { left: -15px; }
.menu-rodape { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 12px; margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.menu-rodape form { margin-left: auto; }
.avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #06302b; background: #99f6e4; }
.rodape-nome { display: flex; flex-direction: column; font-size: .88rem; color: #fff; line-height: 1.25; min-width: 0; }
.rodape-nome small { color: var(--menu-texto); opacity: .75; font-size: .76rem; }

/* Menu recolhido: só os ícones */
.menu-recolhido .rotulo-menu, .menu-recolhido .marca-texto, .menu-recolhido .modulo-seta { display: none; }
.menu-recolhido .menu-topo { flex-direction: column; }
.menu-recolhido .menu-modulo .menu-itens { display: none; }
.menu-recolhido .menu-link, .menu-recolhido .menu-modulo summary { justify-content: center; padding: 8px 0; }
.menu-recolhido .menu-modulo.contem-ativo .modulo-icone { outline: 2px solid var(--mod); outline-offset: 2px; }
.menu-recolhido .menu-rodape { flex-direction: column; }
.menu-recolhido .menu-rodape form { margin-left: 0; }

.conteudo { padding: 28px 36px 48px; max-width: 1180px; width: 100%; }
.modulo-selo {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--mod-texto); background: var(--mod-fundo); padding: 4px 10px 4px 8px; border-radius: 999px; margin-bottom: 10px;
}
.modulo-selo .icone { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .layout, .menu-recolhido .layout { grid-template-columns: minmax(0, 1fr); }
  .menu { position: static; height: auto; padding: 10px 14px; }
  .menu-topo { margin-bottom: 0; flex-direction: row !important; }
  .so-celular { display: grid; }
  .so-computador { display: none; }
  .menu-nav, .menu-rodape, .menu .versao-sistema { display: none; }
  .menu-celular-aberto .menu-nav { display: flex; margin-top: 12px; }
  .menu-celular-aberto .menu-rodape { display: flex; }
  .menu-celular-aberto .menu .versao-sistema { display: block; }
  .menu-recolhido .rotulo-menu, .menu-recolhido .marca-texto { display: flex; }
  .menu-recolhido .menu-modulo .menu-itens { display: flex; }
  .menu-recolhido .menu-link, .menu-recolhido .menu-modulo summary { justify-content: flex-start; padding: 8px 10px; }
  .tabela.itens select, .tabela.itens .moeda { min-width: 140px; }
  .conteudo { padding: 18px 16px 40px; }
}

/* Telas de acesso (login, senha) */
.acesso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.acesso { background: radial-gradient(circle at 20% 10%, #d5f5f0, transparent 45%), radial-gradient(circle at 90% 90%, #fdf0c9, transparent 40%), var(--fundo); }
.cartao-acesso { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 32px; width: 100%; max-width: 400px; box-shadow: 0 12px 40px rgba(16, 33, 43, .1); }
.marca-acesso { color: var(--texto); margin-bottom: 22px; }
.marca-acesso span:last-child { display: flex; flex-direction: column; font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.marca-acesso small { font-weight: 500; font-size: .8rem; color: var(--texto-suave); }
.rodape-acesso { margin-top: 16px; font-size: .9rem; }

/* Formulários */
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
/* Nomes dos campos sempre em caixa alta, no mesmo padrão dos títulos das tabelas. */
.campo label, label.check { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #3b4d58; }
.campo input, .campo select, .campo textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--borda-forte); border-radius: 9px; background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus, .tabela input:focus, .tabela select:focus, .filtros input:focus, .filtros select:focus {
  outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 20%, transparent);
}
.campo small { color: var(--texto-suave); }
.campo small.erro, .com-erro label { color: var(--erro); }
.campo-check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.formulario { max-width: 640px; }
.acoes { display: flex; gap: 16px; align-items: center; margin-top: 8px; }

.botao {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; background: var(--primaria); color: #fff;
  border: 1px solid var(--primaria); border-radius: 10px; padding: 9px 18px; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 118, 110, .25); transition: background .15s;
}
.botao:hover { background: var(--primaria-escura); color: #fff; }
.botao .icone { width: 17px; height: 17px; }
button.link { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* Blocos */
.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra); }
.estreito { max-width: 460px; }
.cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.cabecalho h1 { margin: 0; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; display: flex; flex-direction: column; box-shadow: var(--sombra); position: relative; }
.rotulo { font-size: .8rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; }
.nota { color: var(--texto-suave); font-size: .9rem; }
.passos { padding-left: 20px; }
.qrcode { width: 200px; height: 200px; display: block; margin: 12px 0; background: #fff; }

/* Tabelas */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.tabela th, .tabela td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); background: #f6f8fa; font-weight: 700; }
.tabela tbody tr:hover td { background: #f9fbfc; }
.tabela tr:last-child td { border-bottom: 0; }
.nowrap { white-space: nowrap; }
.alteracao { font-size: .85rem; }
.selo { display: inline-block; font-size: .76rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: #eef2f5; color: #3b4d58; white-space: nowrap; }
.selo.ok { background: #dcfce7; color: var(--ok); }

@media (max-width: 760px) {
  .tabela { display: block; overflow-x: auto; }
}

/* Seleção de empresa */
.lista-empresas { display: grid; gap: 10px; max-width: 560px; }
.item-empresa {
  width: 100%; text-align: left; font: inherit; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px;
}
.item-empresa:hover, .item-empresa.atual { border-color: var(--primaria); }
.item-empresa span { color: var(--texto-suave); }

/* Mensagens */
.mensagens { margin-bottom: 16px; }
.mensagem { padding: 10px 14px 10px 16px; border-radius: 10px; margin-bottom: 8px; background: #f0f9ff; border: 1px solid #bae6fd; border-left-width: 4px; }
.mensagem.success { background: #f0fdf4; border-color: #bbf7d0; }
.mensagem.error { background: #fef2f2; border-color: #fecaca; color: var(--erro); }
.mensagem.warning { background: #fefce8; border-color: #fde68a; color: var(--aviso); }

/* Cadastros */
.botao.secundario { background: #fff; color: var(--primaria); border: 1px solid var(--borda-forte); box-shadow: none; }
.botao.secundario:hover { background: var(--primaria-clara); border-color: var(--primaria); color: var(--primaria-escura); }
.filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros input[type=search] { flex: 1; min-width: 200px; font: inherit; padding: 9px 11px 9px 36px; border: 1px solid var(--borda-forte); border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b76' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center / 17px; }
.filtros select { font: inherit; padding: 9px 11px; border: 1px solid var(--borda-forte); border-radius: 10px; background: #fff; }
.formulario-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; max-width: 900px; }
.formulario-grade .campo:has(textarea), .formulario-grade .acoes, .formulario-grade > .mensagem { grid-column: 1 / -1; }
@media (max-width: 760px) { .formulario-grade { grid-template-columns: minmax(0, 1fr); } }
.paginacao { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.migalha { margin: 0 0 4px; font-size: .9rem; }
.migalha a { color: var(--texto-suave); }

/* Importação */
.resultado-importacao .erro { color: var(--erro); }

/* Estoque e compras */
.num { text-align: right; white-space: nowrap; }
.tabela tfoot td { background: #fafaf9; border-top: 1px solid var(--borda); }
.tabela tr.alerta td { background: #fef2f2; }
.tabela tr.estornado td { color: var(--texto-suave); text-decoration: line-through; }
.tabela tr.saldo-anterior td { background: #fafaf9; font-style: italic; }
.tabela.itens select { max-width: 280px; }
.tabela input, .tabela select { font: inherit; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; max-width: 160px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.barra-acoes { margin-top: 20px; }
button.link.perigo { color: var(--erro); }
h2 { font-size: 1.1rem; margin: 24px 0 10px; }
details.estornar summary, details.estornar-nota summary { cursor: pointer; color: var(--erro); }
.mensagem ul { margin: 6px 0 0; padding-left: 20px; }

/* Ordem de serviço */
.barra-status { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
form.inline { display: inline; }
.linha-inclusao { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; margin-top: 10px; padding: 14px 16px; }
.linha-inclusao .campo { margin-bottom: 8px; min-width: 130px; }
.linha-inclusao .campo small:not(.erro) { display: none; }
.linha-inclusao > button { margin-bottom: 10px; }
.resumo-total { display: flex; gap: 28px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.resumo-total div { display: flex; flex-direction: column; text-align: right; }
.resumo-total span { font-size: .8rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.resumo-total .grande strong { font-size: 1.4rem; }
.textos p { margin: 0 0 8px; }
.selo.status-em_execucao, .selo.status-aguardando_peca { background: #fef9c3; color: #854d0e; }
.selo.status-concluida { background: #dbeafe; color: #1e40af; }
.selo.status-faturada, .selo.status-entregue { background: #dcfce7; color: var(--ok); }
.selo.status-cancelada { background: #fee2e2; color: var(--erro); }
.cartao.destaque { border-color: var(--destaque); }

/* Desconto: valor + R$/% lado a lado */
.desconto-duplo { display: flex; gap: 6px; }
.desconto-duplo input { flex: 1; min-width: 0; }
.campo .desconto-duplo select { flex: 0 0 auto; width: auto; padding-right: 6px; }

/* Relatórios (DRE, fluxo de caixa) */
.acoes-cabecalho { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.filtro-data { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.filtro-data input { font: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
.atalhos { display: flex; gap: 12px; align-items: center; font-size: .9rem; }
.atalhos a.ativo { font-weight: 700; text-decoration: none; }
.tabela.dre td { padding-top: 7px; padding-bottom: 7px; }
.dre-grupo td { font-weight: 600; background: #fafaf9; }
.dre-natureza td { color: var(--texto-suave); }
.dre-subtotal td { font-weight: 700; border-top: 2px solid var(--texto); }
.dre-final td { font-size: 1.05rem; background: #f5f5f4; }
.num.negativo { color: var(--erro); }
.texto-ok { color: var(--ok); }
.texto-erro { color: var(--erro); }

/* Painel da tela inicial */
.painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cartao .detalhe { font-size: .85rem; color: var(--texto-suave); }
.cartao a.rotulo { text-decoration: none; }
.grafico-meses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 180px; padding: 12px 4px 0; border-bottom: 1px solid var(--borda); }
.grafico-meses .coluna { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.grafico-meses .valor { font-size: .75rem; color: var(--texto-suave); white-space: nowrap; }
.grafico-meses .barra { width: 60%; max-width: 44px; min-height: 2px; background: linear-gradient(180deg, #14b8a6, #0f766e); border-radius: 6px 6px 0 0; }
.grafico-meses .coluna:hover .barra { background: #115e59; }
.grafico-rotulos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; text-align: center; font-size: .8rem; color: var(--texto-suave); padding-top: 4px; }
@media (max-width: 760px) { .grafico-meses .valor { display: none; } }
a.cartao { text-decoration: none; color: inherit; }
a.cartao:hover { border-color: var(--texto-suave); }
.grafico-meses a.coluna { text-decoration: none; }
.painel-grade .cartao strong { font-size: 1.25rem; }

/* Campos de dinheiro: "R$" dentro do campo */
.moeda { position: relative; display: flex; }
.moeda > span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; font-size: .95em; }
.moeda > input { width: 100%; padding-left: 38px !important; }
.selo.alerta { background: #fee2e2; color: var(--erro); }

/* Tabelas de itens com campos (entrada avulsa, parcelas) */
.tabela.itens td { vertical-align: middle; }
.tabela.itens select { max-width: 220px; }
.tabela.itens input[name$="-quantidade"], .tabela.itens input[name$="-fator_conversao"] { width: 84px; }
.tabela.itens input[name$="-codigo_fornecedor"] { width: 110px; }
.tabela.itens .moeda { width: 130px; }
.tabela.itens input[type="date"] { width: 170px; }

/* Vendas, consignação e produção */
.selo.status-orcamento, .selo.status-rascunho { background: #fef9c3; color: #854d0e; }
.selo.status-aberta, .selo.status-enviada { background: #dbeafe; color: #1e40af; }
.selo.status-encerrada, .selo.status-concluida, .selo.status-confirmado { background: #dcfce7; color: var(--ok); }
.selo.status-estornada, .selo.status-estornado { background: #fee2e2; color: var(--erro); }
.selo.canal { background: #f5f5f4; }
.tabela.itens input[name$="-desconto"], .tabela.itens input[name$="-vendida"], .tabela.itens input[name$="-devolvida"] { width: 96px; }
.tabela td.destaque-num { font-weight: 700; }
.bloco-faturar { margin-top: 24px; }
.bloco-faturar h2 { margin-top: 0; }
.painel-duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; margin-bottom: 8px; }
.painel-duplo h2 { margin-top: 4px; }
@media (max-width: 760px) { .painel-duplo { grid-template-columns: 1fr; } }

/* Análises */
.abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); margin: 8px 0 16px; }
.abas a { padding: 9px 14px; text-decoration: none; color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.abas a { display: inline-flex; align-items: center; gap: 7px; }
.abas a .icone { width: 16px; height: 16px; }
.abas a.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }
.abas a:hover { color: var(--texto); }
.dfc-atividade td { font-weight: 700; background: #fafaf9; }
/* Celular: nenhum bloco pode ficar mais largo que a tela (listas longas e tabelas rolam por dentro). */
.painel-duplo > section, .formulario-grade > *, .painel-grade > *, .cartoes > * { min-width: 0; }
.campo select, .campo input, .campo textarea { max-width: 100%; }

/* Cartões do painel com ícone */
.cartao .icone-cartao {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--mod-texto, var(--primaria)); background: var(--mod-fundo, var(--primaria-clara));
}
.cartao .icone-cartao .icone { width: 18px; height: 18px; }
.painel-grade .cartao { padding-right: 58px; }
a.cartao { transition: border-color .15s, transform .15s, box-shadow .15s; }
a.cartao:hover { border-color: var(--borda-forte); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 33, 43, .08); }
.cartao.alerta-cartao { border-color: #fecaca; background: linear-gradient(180deg, #fff, #fff7f7); }
.titulo-secao { display: flex; align-items: center; gap: 8px; }
.titulo-secao .icone { color: var(--mod-texto, var(--primaria)); }
.cabecalho .acoes { margin-top: 0; flex-wrap: wrap; }
.dre-subtotal td { border-top-color: var(--borda-forte); }
.dre-final td { background: var(--primaria-clara); }
.mensagem.success { border-left-color: var(--ok); }
.mensagem.error { border-left-color: var(--erro); }
.mensagem.warning { border-left-color: #eab308; }
.saudacao { margin-bottom: 18px; }
.saudacao h1 { margin: 0; }
.saudacao .nota { margin: 2px 0 0; }
.saudacao .nota::first-letter { text-transform: uppercase; }
.tabela th.num, .tabela td.num { text-align: right; }

/* Aplicativo (PWA) */
.botao-instalar { border: 1px dashed rgba(94, 234, 212, .45); background: rgba(94, 234, 212, .08); color: #ccfbf1; font: inherit; cursor: pointer; width: 100%; margin-top: 10px; }
.botao-instalar .icone { color: #5eead4; }
.botao-instalar[hidden], .faixa-instalar[hidden], .dica-ios[hidden] { display: none; }
.faixa-instalar {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--raio);
  background: linear-gradient(90deg, #e6f6f4, #fdf6e3); border: 1px solid #b7e4dd;
}
.faixa-instalar > div:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.faixa-instalar > div:nth-child(2) span { color: var(--texto-suave); font-size: .9rem; }
.faixa-icone { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--primaria); }
.faixa-acoes { display: flex; align-items: center; gap: 14px; }
@media (max-width: 760px) { .faixa-instalar { flex-wrap: wrap; } .faixa-acoes { width: 100%; } }

.avisos-app { position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top)); z-index: 50; display: flex; flex-direction: column; gap: 8px; width: min(560px, calc(100% - 24px)); }
.aviso-app {
  display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 12px 10px 16px; border-radius: 12px;
  background: #10212b; color: #fff; box-shadow: 0 10px 30px rgba(16, 33, 43, .25); font-size: .92rem;
}
.aviso-app .botao { padding: 6px 14px; background: #5eead4; border-color: #5eead4; color: #06302b; }
#aviso-offline { background: #7c2d12; }

.dica-ios { position: fixed; inset: 0; background: rgba(16, 33, 43, .5); z-index: 60; display: grid; place-items: end center; padding: 16px; }
.dica-caixa { background: #fff; border-radius: 16px; padding: 20px 22px; width: min(440px, 100%); margin-bottom: env(safe-area-inset-bottom); }
.dica-caixa h2 { margin-top: 0; }
.dica-caixa ol { padding-left: 20px; line-height: 1.7; }

.sem-conexao { text-align: center; }
.sem-conexao .marca-acesso { justify-content: center; }
.icone-grande { width: 64px; height: 64px; color: var(--texto-suave); margin: 8px auto 4px; display: block; }

/* Barra de baixo: celular e app instalado (o menu completo abre pelo botão "Menu") */
.barra-app { display: none; }
@media (max-width: 760px) {
  .barra-app {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--borda);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(16, 33, 43, .06);
  }
  .barra-app a, .barra-app button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; min-height: 48px;
    font: inherit; font-size: .7rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; background: none; border: 0; cursor: pointer;
  }
  .barra-app .icone { width: 22px; height: 22px; }
  .barra-app .ativo { color: var(--primaria); }
  .barra-app .ativo .icone { background: var(--primaria-clara); border-radius: 999px; padding: 2px 12px; width: 46px; box-sizing: content-box; height: 22px; margin: 0 -12px; }
  .conteudo { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .menu { padding-top: calc(10px + env(safe-area-inset-top)); }
}
/* App instalado no computador: sem barra do navegador, o topo fica um pouco mais "app". */
.modo-app .menu { padding-top: calc(16px + env(safe-area-inset-top)); }
@media (max-width: 760px) {
  .cabecalho { flex-wrap: wrap; }
  .cabecalho > .botao, .cabecalho > .acoes { width: 100%; }
  .cabecalho > .acoes .botao, .cabecalho > .botao { flex: 1; justify-content: center; }
  .botao-instalar { display: none; }
  .menu-celular-aberto .botao-instalar:not([hidden]) { display: flex; }
}

/* Cadastro de produto: preço e margem */
.dica-margem { color: var(--primaria); font-weight: 600; }
.dica-margem.negativa { color: var(--erro); }
.quadro-margem { margin-bottom: 18px; }
.quadro-margem h2 { margin-top: 0; }
.quadro-margem .cartoes { margin-bottom: 0; }
.quadro-margem .cartao .link { align-self: flex-start; color: var(--primaria); font-size: .85rem; }
/* Custo sozinho na linha: assim cada preço fica ao lado da sua margem. */
.formulario-grade .campo:has([data-precificacao="custo"]) { grid-column: 1 / -1; max-width: calc(50% - 10px); }
@media (max-width: 760px) { .formulario-grade .campo:has([data-precificacao="custo"]) { max-width: none; } }

/* Conciliação bancária */
.texto-suave { color: var(--texto-suave); }
.botao.pequeno { padding: 5px 12px; font-size: .85rem; }
.painel.vazio { text-align: center; color: var(--texto-suave); }
.tabela-extrato td.marcar, .tabela-extrato th.marcar { width: 34px; text-align: center; }
.tabela-extrato input[type="checkbox"] { width: 18px; height: 18px; }
.filtro-linha { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.filtro-linha { max-width: none; }
.formulario-grade.filtro-linha .acoes { margin: 0; grid-column: auto; padding-bottom: 14px; }
.barra-lote-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.barra-lote-topo .titulo-secao { margin: 0; font-size: 1rem; }
.barra-lote .campo small { display: none; }
details.opcao > summary { list-style: none; cursor: pointer; }
details.opcao > summary::-webkit-details-marker { display: none; }
details.opcao > summary .titulo-secao { margin: 0; }
details.opcao > summary .titulo-secao::after { content: "▸"; margin-left: auto; color: var(--texto-suave); }
details.opcao[open] > summary .titulo-secao::after { content: "▾"; }
details.opcao[open] > summary { margin-bottom: 10px; }
.lista-escolha { display: grid; gap: 6px; margin: 8px 0 12px; }
.lista-escolha label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }
.lista-escolha label:has(input:checked) { border-color: var(--primaria); background: #f0fdfa; }
.aviso-conciliacao { display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin-bottom: 16px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a; color: #78350f; text-decoration: none; }
.aviso-conciliacao .icone { flex: none; width: 22px; height: 22px; }
.aviso-conciliacao:hover { background: #fef3c7; }
.conferencia-venda { grid-column: 1 / -1; margin: 0 0 8px; font-size: .92rem; }
.conferencia-venda:empty { display: none; }
.conferencia-venda.ok { color: var(--ok); }
.conferencia-venda.aviso { color: #92400e; }
.conferencia-venda.erro { color: var(--erro); }

/* DRE: natureza clicável e lista de lançamentos */
.dre-abrir { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;
  display: inline-flex; align-items: baseline; gap: 6px; }
.dre-abrir::before { content: "▸"; font-size: .8em; color: var(--primaria); transition: transform .15s; display: inline-block; }
.dre-abrir[aria-expanded="true"]::before { transform: rotate(90deg); }
.dre-abrir:hover { color: var(--primaria); text-decoration: underline; }
.dre-abrir small { color: var(--texto-suave); font-weight: 400; }
.dre-lancamentos > td { background: #f8fafb; padding-top: 4px; padding-bottom: 12px; }
.tabela-interna { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela-interna th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.tabela-interna td { padding: 5px 8px; border-bottom: 1px solid #eef1f3; }
.tabela-interna th.num, .tabela-interna td.num { text-align: right; }
.tabela-interna tfoot td { font-weight: 600; border-bottom: 0; }
@media (max-width: 760px) { .tabela-interna th:nth-child(3), .tabela-interna td:nth-child(3) { display: none; } }

/* Módulos da instalação */
.lista-modulos { display: grid; gap: 8px; }
.item-modulo { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; background: #fff; }
.item-modulo.desligado { background: #f8fafc; }
.item-modulo.desligado .texto-modulo strong { color: var(--texto-suave); }
.icone-modulo { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--primaria-clara, #e6f4f2); color: var(--primaria); }
.icone-modulo .icone { width: 20px; height: 20px; }
.texto-modulo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.texto-modulo small { color: var(--texto-suave); }
.nome-modulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chave { position: relative; flex: none; width: 46px; height: 26px; }
.chave input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chave span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .15s; pointer-events: none; }
.chave span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.chave input:checked + span { background: var(--primaria); }
.chave input:checked + span::after { transform: translateX(20px); }
.chave input:focus-visible + span { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* Versão do sistema (rodapé do menu e tela de login) */
.versao-sistema { font-size: .72rem; color: rgba(255, 255, 255, .38); padding: 2px 14px 10px; letter-spacing: .02em; }
.cartao-acesso .versao-sistema { color: var(--texto-suave); text-align: center; padding: 14px 0 0; margin: 0; }
.menu-recolhido .versao-sistema { display: none; }