/* sheda: visual aprovado em 29/10/2026 (ADR-0015); logo aprovado em 05/11/2026 (ADR-0040). Responsivo: computador, tablet e celular. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fontes/inter-latin.woff2) format("woff2")}
:root{
  --fundo:#F4F6F8; --cartao:#fff; --texto:#1B2430; --suave:#5B6675; --menu-texto:#3A4655;
  --borda:#E3E7EC; --borda-forte:#CDD4DC; --borda-linha:#EEF1F4; --azul:#1F5FBF; --azul-escuro:#174A94; --azul-claro:#E8F0FB;
  --hover:#F0F3F7; --ok:#1E7B3C; --ok-fundo:#E3F4E8; --erro:#B42318; --erro-fundo:#FBE3E3;
  --alerta:#C2410C; --alerta-fundo:#FDEBD8; --raio:12px; --sombra:0 1px 2px rgba(27,36,48,.04);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--azul)}
h1{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 20px}
h2{font-size:17px;font-weight:600;margin:24px 0 10px}
code,pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
pre{white-space:pre-wrap;word-break:break-word;margin:4px 0 0}

.app{display:grid;grid-template-columns:248px 1fr;grid-template-rows:60px 1fr;grid-template-areas:"topo topo" "menu conteudo";min-height:100vh}
.topo{grid-area:topo;display:flex;align-items:center;gap:16px;padding:0 20px;background:var(--cartao);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:20}
.marca{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:var(--texto);text-decoration:none;font-size:17px;white-space:nowrap}
.marca-logo{display:block;height:26px;width:auto}
.icone{flex:none}
.topo-busca{flex:1 1 280px;max-width:520px;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--borda-forte);border-radius:8px;background:#F8F9FB;color:var(--suave)}
.topo-busca:focus-within{border-color:var(--azul);outline:3px solid var(--azul-claro)}
.topo-busca input[type=search]{border:0;background:transparent;outline:none;font:inherit;font-size:14px;color:var(--texto);width:100%;min-height:0;padding:0}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--azul-claro);color:var(--azul-escuro);display:inline-grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.topo-empresa{color:var(--suave);font-size:13px;margin-left:auto;max-width:280px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.topo-usuario{position:relative}
.topo-usuario summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:3px 12px 3px 4px;border:1px solid var(--borda-forte);border-radius:22px;font-size:14px}
.topo-usuario summary::-webkit-details-marker{display:none}
.topo-usuario summary:hover{background:var(--hover)}
.topo-usuario-menu{position:absolute;right:0;top:44px;background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:0 8px 24px rgba(27,36,48,.12);min-width:200px;padding:6px}
.topo-usuario-menu a,.topo-usuario-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:none;font:inherit;color:var(--texto);text-decoration:none;border-radius:6px;cursor:pointer}
.topo-usuario-menu a:hover,.topo-usuario-menu button:hover{background:var(--hover)}
.menu-botao{display:none;border:0;background:none;width:44px;height:44px;place-items:center;border-radius:8px;cursor:pointer;color:var(--texto)}

.menu{grid-area:menu;background:var(--cartao);border-right:1px solid var(--borda);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.menu a,.menu-futuro{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:8px;color:var(--menu-texto);text-decoration:none;font-size:14px}
.menu a:hover{background:var(--hover);color:var(--texto)}
.menu a.on{background:var(--azul-claro);color:var(--azul-escuro);font-weight:600}
.menu-grupo{margin:16px 12px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
button.menu-grupo{display:flex;align-items:center;gap:8px;width:100%;margin:8px 0 2px;min-height:36px;padding:0 12px;border:0;border-radius:8px;background:none;font-family:inherit;cursor:pointer;text-align:left}
button.menu-grupo:hover{background:var(--hover);color:var(--texto)}
button.menu-grupo:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.menu-seta{margin-left:auto;flex:none;transition:transform .15s}
button.menu-grupo[aria-expanded=true] .menu-seta{transform:rotate(180deg)}
.menu-grupo-aviso+.menu-seta{margin-left:0}
.menu-grupo-aviso{margin-left:auto;background:var(--azul);color:#fff;border-radius:999px;padding:0 7px;font-size:11px;letter-spacing:0;line-height:18px}
button.menu-grupo[aria-expanded=true] .menu-grupo-aviso{display:none}
.menu-itens{display:flex;flex-direction:column;gap:2px}.menu-itens[hidden]{display:none}
.menu-futuro{color:var(--suave);font-size:14px;border-radius:8px;cursor:default}

.conteudo{grid-area:conteudo;padding:28px 32px;min-width:0;max-width:1320px;width:100%}
.cabecalho{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cabecalho h1{margin:0}

.cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);padding:20px;box-shadow:var(--sombra)}
.cartao-link{display:flex;flex-direction:column;gap:6px;color:var(--texto);text-decoration:none}
.cartao-link:hover{border-color:var(--azul)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:16px}
.indicador{display:flex;flex-direction:column;gap:4px}
.indicador>span:first-child{font-size:13px;color:var(--suave)}
.indicador strong{display:block;font-size:28px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.indicador strong small{font-size:15px;font-weight:500;color:var(--suave)}
.indicador .pequeno{margin-top:auto}
.suave{color:var(--suave)}
.pequeno{font-size:13px}

.botao{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--borda-forte);border-radius:8px;background:var(--cartao);color:var(--texto);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.botao:hover{background:var(--hover)}
.botao-primario{background:var(--azul);border-color:var(--azul);color:#fff}
.botao-primario:hover{background:var(--azul-escuro)}
.largo{width:100%}

.formulario{max-width:640px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo label{font-weight:600;font-size:14px}
.campo small{color:var(--suave);font-size:13px}
.campo small.erro{color:var(--erro)}
.campo small.atalho-cadastro{display:block;margin-top:2px}.campo small.atalho-cadastro a{font-weight:600}
.campo-erro input,.campo-erro select{border-color:var(--erro)}
.obrigatorio{color:var(--erro)}
input[type=text],input[type=search],input[type=email],input[type=password],input[type=date],input[type=month],input[type=number],select,textarea{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--borda-forte);border-radius:8px;font:inherit;background:#fff;color:var(--texto)}
input:focus:not(.topo-busca input),select:focus,textarea:focus,.botao:focus-visible,a:focus-visible{outline:3px solid var(--azul-claro);outline-offset:1px;border-color:var(--azul)}
.campo ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.campo ul label,.campo-marcar{display:flex;align-items:center;gap:8px;font-weight:400;min-height:36px}
input[type=checkbox]{width:20px;height:20px}
.permissoes{border:1px solid var(--borda);border-radius:8px;margin:0 0 14px;padding:10px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 16px}
.permissoes legend{font-weight:700;padding:0 6px}
.acoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.filtros{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0 14px;margin-bottom:16px;align-items:end}
.filtros .acoes{margin:0 0 16px;justify-content:flex-start}

.tabela-rolavel{padding:0;overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);padding:10px 16px;border-bottom:1px solid var(--borda);white-space:nowrap;background:#FAFBFC}
.tabela td{padding:12px 16px;border-bottom:1px solid var(--borda-linha);vertical-align:top}
.tabela tbody tr:hover td{background:#FAFBFC}
.tabela tr:last-child td{border-bottom:0}
.antes-depois{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.etiqueta{display:inline-block;padding:2px 10px;margin:0 4px 4px 0;border-radius:999px;background:var(--hover);font-size:12px;font-weight:600}
.etiqueta-ok{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-off{background:var(--erro-fundo);color:var(--erro)}

.avisos{margin-bottom:16px}
.aviso{padding:12px 16px;border-radius:8px;background:var(--azul-claro);color:var(--azul-escuro);margin:0 0 12px}
.aviso p{margin:0}
.aviso-success{background:var(--ok-fundo);color:var(--ok)}
.aviso-error{background:var(--erro-fundo);color:var(--erro)}
.aviso-warning{background:var(--alerta-fundo);color:var(--alerta)}
.resultado{border-left:6px solid}
.resultado-ok{border-left-color:var(--ok)}
.resultado-erro{border-left-color:var(--erro)}
.paginas{display:flex;gap:16px;align-items:center;justify-content:center;margin:16px 0}

/* Central de ajuda: Dúvidas e soluções (ADR-0067). */
.ajuda-busca{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:0 0 12px;color:var(--suave)}
.ajuda-busca input[type=search]{border:0;box-shadow:none;outline:none;background:transparent;font:inherit;font-size:15px;width:100%;min-height:28px;padding:0;color:var(--texto)}
.ajuda-busca input[type=search]:focus{outline:none;box-shadow:none;border:0}
.ajuda-busca:focus-within{outline:3px solid var(--azul-claro);border-color:var(--azul)}
.ajuda-assuntos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.ajuda-assuntos a{padding:5px 12px;border:1px solid var(--borda-forte);border-radius:999px;font-size:13px;color:var(--menu-texto);text-decoration:none;background:var(--cartao)}
.ajuda-assuntos a.on{background:var(--azul);border-color:var(--azul);color:#fff}
.ajuda-assunto h2{margin:20px 0 8px}
.ajuda-erro{margin:0 0 8px;padding:14px 16px}
.ajuda-rotulo{margin:0;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--erro)}
.ajuda-problema{margin:2px 0 8px;font-weight:600}
.ajuda-causa-solucao{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 12px;margin:0;font-size:14px}
.ajuda-causa-solucao dt{font-weight:600;color:var(--suave)}
.ajuda-causa-solucao dd{margin:0}
.ajuda-duvida{margin:0 0 8px;padding:12px 16px}
.ajuda-duvida summary{display:flex;align-items:center;gap:8px;font-weight:600}
.ajuda-duvida summary .icone{color:var(--azul)}
.ajuda-duvida p{margin:8px 0 0 26px;font-size:14px}
.botao.ajuda-acao{gap:8px}
.ajuda-contato{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px}
.ajuda-contato h2{margin:0 0 4px}.ajuda-contato p{margin:0}
@media (max-width:600px){.ajuda-causa-solucao{grid-template-columns:1fr}.ajuda-causa-solucao dd{margin-bottom:6px}}

/* Telas de entrada no estilo das grandes plataformas (ADR-0066): logo, cartão branco no centro e rodapé. */
.entrar{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 16px 24px}
.entrar-logo{display:block;margin:0 0 20px}
.entrar-logo .marca-logo{height:40px;width:auto}
.entrar-cartao{width:100%;max-width:420px;background:var(--cartao);border-radius:20px;padding:36px 32px 32px;box-shadow:0 10px 30px rgba(27,36,48,.10),0 1px 3px rgba(27,36,48,.06)}
.entrar-cartao h1{font-size:22px;text-align:center;margin:0 0 24px}
.entrar-cartao .campo{gap:6px;margin-bottom:16px}
.entrar-cartao .campo label{font-size:13px}
.entrar .entrar-cartao input{min-height:44px;height:44px;font-size:15px;border-radius:10px}
.entrar-cartao .obrigatorio{display:none}
.entrar-cartao input::placeholder{color:#8A94A3}
.senha-com-olho{position:relative}
.senha-com-olho input{width:100%;padding-right:46px}
.senha-olho{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--suave);cursor:pointer}
.senha-olho:hover{color:var(--texto);background:var(--hover)}
.senha-olho:focus-visible{outline:3px solid var(--azul-claro)}
.senha-olho .senha-olho-fechado,.senha-olho[aria-pressed=true] .senha-olho-aberto{display:none}
.senha-olho[aria-pressed=true] .senha-olho-fechado{display:inline}
.entrar-esqueci{display:inline-block;margin:0 0 20px;color:var(--texto);font-size:14px;font-weight:500;text-decoration:none}
.entrar-esqueci:hover{color:var(--azul);text-decoration:underline}
.entrar .entrar-botao{min-height:46px;height:46px;font-size:16px;border-radius:10px}
.entrar-voltar{display:block;margin-top:16px;text-align:center;font-size:14px}
.entrar-caminhos{background:var(--fundo);border-radius:10px;padding:12px 14px;margin:0 0 20px;font-size:14px}
.entrar-caminhos p{margin:0 0 8px}.entrar-caminhos p:last-child{margin:0}
.entrar-inscrever{margin:28px 0 0;text-align:center;font-weight:700;font-size:15px;line-height:1.6}
.entrar-inscrever a{color:var(--texto);text-decoration:none}
.entrar-inscrever a:hover{color:var(--azul);text-decoration:underline}
.entrar-rodape{margin-top:auto;padding-top:32px;text-align:center;font-size:13px;color:var(--suave)}
.entrar-rodape nav{margin-bottom:6px}
.entrar-rodape a{color:var(--texto);text-decoration:none}
.entrar-rodape a:hover{text-decoration:underline}
.entrar-rodape p{margin:0}
.entrar-rodape strong{color:var(--texto)}
@media (max-width:480px){.entrar{padding-top:24px}.entrar-cartao{padding:28px 20px 24px;border-radius:16px}}

/* Tablet */
@media (max-width:1024px){
  .app{grid-template-columns:216px 1fr}
  .conteudo{padding:20px}
  .topo-empresa{display:none}
  .topo-usuario{margin-left:auto}
}
/* Celular: o menu vira gaveta e as tabelas viram cartões */
@media (max-width:720px){
  .app{grid-template-columns:1fr;grid-template-areas:"topo" "conteudo"}
  .topo{padding:0 8px;gap:8px}
  .menu-botao{display:grid}
  .topo-usuario-nome{display:none}
  .marca-logo{height:22px}
  .topo-busca{flex:1 1 auto;min-width:0}
  .topo-usuario summary{padding:3px;border:0}
  .menu{position:fixed;top:60px;left:0;bottom:0;width:min(280px,85vw);z-index:30;transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility .2s;overflow-y:auto}
  /* Fechado, o menu fica invisível de verdade: sem sombra na borda da tela e fora do Tab do teclado (D-007). */
  .menu.aberto{transform:none;visibility:visible;box-shadow:0 8px 24px rgba(27,36,48,.18)}
  .conteudo{padding:16px}
  .tabela thead{display:none}
  .tabela tr{display:block;border-bottom:1px solid var(--borda);padding:8px 0}
  .tabela td{display:flex;gap:12px;border:0;padding:4px 14px}
  .tabela td[data-rotulo]::before{content:attr(data-rotulo);min-width:90px;color:var(--suave);font-size:12px;font-weight:600}
  .antes-depois{grid-template-columns:1fr}
  .acoes .botao{flex:1}
}
@media (prefers-reduced-motion:reduce){.menu,.menu-seta{transition:none}}

/* Cadastros */
.formulario-largo{max-width:1000px}
.grupo{border:0;border-top:1px solid var(--borda);margin:0 0 8px;padding:16px 0 0}
.grupo:first-of-type{border-top:0;padding-top:0}
.grupo legend{font-weight:700;font-size:15px;padding:0 8px 0 0}
.grade-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 16px;align-items:start}
.grade-campos .campo-inteiro{grid-column:1/-1}
.grade-campos .campo-marcar{flex-direction:row;flex-wrap:wrap;align-items:center;min-height:44px;margin-bottom:16px}
.grade-campos .campo-marcar small{flex-basis:100%}
.campo .campo-inteiro ul,.campo-inteiro .campo ul{max-height:320px;overflow-y:auto;border:1px solid var(--borda);border-radius:8px;padding:8px}
.campo ul li label{font-weight:400}
.campo-busca{grid-column:span 2}
.grade-acoes{margin-top:16px}
.grade-acoes h2{margin-top:0}
.botao-perigo{border-color:var(--erro);color:var(--erro)}
.botao-perigo:hover{background:var(--erro-fundo)}
form.inline{display:inline}
textarea{min-height:88px}
@media (max-width:720px){.campo-busca{grid-column:auto}}
/* Estoque */
.numero{text-align:right;white-space:nowrap}
.tabela th.numero{text-align:right}
.negativo{color:var(--erro);font-weight:700}
.linha-negativa td{background:var(--erro-fundo)}
.linha-pendente td{background:var(--alerta-fundo)}
.campo-numero{max-width:120px;text-align:right}
.botao-pequeno{min-height:36px;padding:0 12px;font-size:13px;margin:2px 0}
/* Trilha: registro de ações e de erros */
.etiqueta-concluido{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-recusado,.etiqueta-sem_permissao{background:var(--alerta-fundo);color:var(--alerta)}
.etiqueta-erro{background:var(--erro-fundo);color:var(--erro)}
.detalhes{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:6px 16px;margin:0}
.detalhes dt{font-weight:600}.detalhes dd{margin:0;overflow-wrap:anywhere}
.tabela-compacta th,.tabela-compacta td{padding:4px 8px;font-size:13px;overflow-wrap:anywhere}
.codigo-erro{font-family:ui-monospace,monospace;letter-spacing:1px}
@media (max-width:640px){.detalhes{grid-template-columns:1fr}}
@media print{.topo,.menu,.nao-imprimir,.mensagens{display:none!important}.app{display:block}details>summary{list-style:none}}
.form-em-linha{display:inline}
/* Site público */
.aviso-info{background:var(--azul-claro);color:var(--azul-escuro)}
.faixa-assinatura{margin:0 0 16px}
.site{min-height:100vh;display:flex;flex-direction:column}
.site main{flex:1}
.site-secao{max-width:1120px;margin:0 auto;padding:40px 24px}
.site-estreito{max-width:640px}
.plano h3{margin:0 0 6px;font-size:17px}
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
.plano{display:flex;flex-direction:column;gap:4px}.plano p{margin:0}.plano .botao{margin-top:auto}
.plano-destaque{border:2px solid var(--azul)}
.plano-preco{font-size:24px;font-weight:700}.plano-preco small{font-size:14px;color:var(--suave);font-weight:400}
.opcao-plano{display:flex;gap:8px;align-items:center;padding:8px 0}
.texto-legal h1{font-size:22px}.texto-legal h2{font-size:16px}
.texto-rolavel{max-height:50vh;overflow:auto}
@media (max-width:860px){
  .planos{grid-template-columns:1fr}
  .site-secao{padding-left:16px;padding-right:16px}
}
.campo.campo-marcar{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
.campo.campo-marcar>input{width:auto;min-height:0;margin:4px 0 0;flex:0 0 auto}
.campo.campo-marcar>label{flex:1;font-weight:400}
.campo.campo-marcar>small{flex-basis:100%}
.plano>.etiqueta{align-self:flex-start}
/* Visual novo (ADR-0015): painel, busca geral e títulos */
.caminho{margin:0 0 4px;font-size:13px;color:var(--suave)}
.caminho a{color:var(--suave)}
.cabecalho h1{margin:0}
.acoes-topo{display:flex;gap:8px;flex-wrap:wrap}
.painel-colunas{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.painel-colunas>.cartao{margin:0}
.cartao-titulo{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 12px}
.cartao-titulo h2,.atencao h2{margin:0;font-size:16px}
.atencao{display:flex;flex-direction:column;gap:12px}
.atencao-item{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:8px;color:var(--texto);text-decoration:none;font-size:14px}
.atencao-item span{color:var(--menu-texto);font-size:13px}
.atencao-alerta{background:var(--alerta-fundo)}
.atencao-info{background:var(--azul-claro)}
a.atencao-item:hover{outline:1px solid var(--borda-forte)}
.resultado-busca{margin-bottom:16px}
.resultado-busca h2{margin:0 0 8px;font-size:16px}
.resultado-busca ul{margin:0;padding-left:20px}
.resultado-busca li{padding:4px 0}
@media (max-width:1024px){.painel-colunas{grid-template-columns:1fr}}
@media (max-width:1024px){.painel-colunas .atencao{order:-1}}
@media (max-width:720px){
  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .indicador{padding:14px}.indicador strong{font-size:24px}
  .acoes-topo{width:100%}.acoes-topo .botao{flex:1}
}
/* Vendas (ADR-0016) */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--borda);margin:0 0 16px;overflow-x:auto}
.abas a{padding:10px 16px;color:var(--menu-texto);text-decoration:none;border-bottom:2px solid transparent;font-weight:500;white-space:nowrap}
.abas a.on{color:var(--azul-escuro);border-bottom-color:var(--azul);font-weight:600}
.etiqueta-venda-aberto{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-venda-concluida{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-venda-convertido{background:var(--hover);color:var(--menu-texto)}
.etiqueta-venda-cancelada{background:var(--erro-fundo);color:var(--erro)}
.etiqueta-venda-expirado{background:var(--alerta-fundo);color:var(--alerta)}
.etiqueta-canal-fisica{background:var(--hover);color:var(--menu-texto)}
.etiqueta-canal-online{background:var(--azul-claro);color:var(--azul-escuro)}
.indicador-canal{border-top:3px solid var(--borda)}
.indicador-canal-fisica{border-top-color:var(--menu-texto)}
.indicador-canal-online{border-top-color:var(--azul)}
.indicador-canal-total{border-top-color:var(--azul-escuro)}
.tabela-canais td:first-child{white-space:nowrap}
.tabela-canais th{white-space:nowrap}
.tabela-canais tfoot td{border-top:1px solid var(--borda);background:var(--hover)}
.tabela-canais tfoot tr.total td{font-weight:600}
h1 .etiqueta{vertical-align:middle;font-size:13px;margin-left:6px}
.adicionar-item{display:flex;flex-wrap:wrap;gap:0 12px;align-items:flex-end;margin-bottom:16px;padding-bottom:4px}
.adicionar-item .campo-busca{flex:1 1 320px}
.adicionar-item .campo-qtd{flex:0 0 100px}
.adicionar-item .acoes{margin:0 0 16px}
.venda-colunas{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.venda-lateral{display:flex;flex-direction:column;gap:16px}
.venda-lateral .cartao h2{margin:0 0 12px;font-size:16px}
.tabela-itens .campo-numero{width:88px;min-height:40px;padding:6px 8px}
.tabela-itens td,.tabela-itens th{padding-left:10px;padding-right:10px}
.totais .detalhes{grid-template-columns:1fr auto;margin-bottom:12px}.totais .detalhes dd{text-align:right;white-space:nowrap}
.total-geral{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;margin:8px 0 0;padding-top:12px;border-top:1px solid var(--borda)}
.total-geral b{font-size:24px}
.pagamento-linha{border:0;padding:0;margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pagamento-linha legend{padding:0;margin-bottom:4px}
.pagamento-linha input,.pagamento-linha select{min-height:40px}
.lista-simples{margin:0;padding-left:18px}
.barra-acoes{position:sticky;bottom:0;background:var(--fundo);padding:12px 0;margin-top:16px;border-top:1px solid var(--borda);z-index:5}
.botao-padrao-oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.impressao{background:#fff}
.folha{max-width:820px;margin:0 auto;padding:32px 24px}
.folha-topo{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid var(--texto);padding-bottom:12px;margin-bottom:16px}
.folha-topo h1,.folha-topo h2{margin:0}.folha-topo p{margin:2px 0}.folha-doc{text-align:right}
.folha-total{text-align:right;font-size:16px;margin:16px 0}
@media (max-width:1024px){.venda-colunas{grid-template-columns:1fr}}
@media print{.impressao .folha{padding:0}.barra-acoes,.adicionar-item{display:none!important}}

/* Verificação em duas etapas (ADR-0017) */
.etiqueta-alerta{background:var(--alerta-fundo);color:var(--alerta)}
.duas-etapas-passos{display:grid;gap:16px;max-width:640px}
.duas-etapas-passos h2{font-size:17px;margin:0 0 8px}
.qr-code{display:inline-block;background:#fff;padding:8px;border-radius:8px;border:1px solid var(--borda)}
.qr-code svg{display:block;width:220px;height:220px}
.chave-secreta{font-size:16px;letter-spacing:.06em;word-break:break-all}

/* Importação por planilha (ADR-0018) */
.importar-colunas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.importar-colunas{grid-template-columns:1fr}}
.passos{padding-left:20px;margin:0 0 16px}
.passos li{margin-bottom:8px}
.positivo{color:var(--ok);font-weight:700}
.etiqueta-importacao-conferida{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-importacao-importada{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-importacao-descartada{background:var(--hover);color:var(--menu-texto)}

/* Financeiro (v0.11) */
.etiqueta-titulo-aberto{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-titulo-parcial{background:var(--alerta-fundo);color:var(--alerta)}
.etiqueta-titulo-quitado{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-titulo-cancelado{background:var(--hover);color:var(--menu-texto)}
.etiqueta-titulo-atrasado{background:var(--erro-fundo);color:var(--erro)}
.etiqueta-compra-rascunho{background:var(--hover);color:var(--menu-texto)}
.etiqueta-compra-enviado{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-compra-parcial{background:var(--alerta-fundo);color:var(--alerta)}
.etiqueta-compra-recebido{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-compra-cancelado{background:var(--erro-fundo);color:var(--erro)}
.etiqueta-compra-atrasado{background:var(--erro-fundo);color:var(--erro)}
.riscado{text-decoration:line-through;opacity:.7}
.lista-marcar div{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.4rem}
.lista-marcar label{display:flex;gap:.4rem;align-items:center;font-weight:normal}
.autorizacao{border:1px solid var(--borda);border-radius:8px;padding:8px 14px 2px;margin:8px 0 12px}
.autorizacao legend{font-weight:600;padding:0 6px}
.modulos-acesso{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:8px}
.modulo-acesso{border:1px solid var(--borda);border-radius:8px;padding:8px 12px}
.modulo-acesso legend{padding:0 6px}
.modulo-acesso .campo-marcar{display:flex;gap:6px;align-items:flex-start;margin:4px 0}
.modulo-acesso .campo-marcar b{white-space:nowrap}
/* Relatórios: classes da curva ABC e quadro de ajuda (RN-604) */
.etiqueta-abc-a{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-abc-b{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-abc-c{background:var(--hover);color:var(--menu-texto)}
.ajuda{margin-bottom:16px}
.ajuda summary{cursor:pointer;font-weight:600;display:flex;gap:8px;align-items:center}
.ajuda ul{margin:8px 0 0;padding-left:20px}
/* Relatórios de vendas, clientes e vendedores: barras simples e duas colunas que viram uma no celular */
/* .grade.grade-2: as regras compactas de .grade nas telas largas vinham depois e espremiam os cartões (Minha conta). */
.grade.grade-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grade-2>section{min-width:0}
.barra-linha{display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;padding:4px 0}
.barra{display:block;height:10px;background:var(--hover);border-radius:5px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--azul);border-radius:5px}
a.indicador{color:inherit;text-decoration:none}
a.indicador.on{outline:2px solid var(--azul)}
.etiqueta-cliente-novo{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-cliente-ativo{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-cliente-em_risco{background:var(--alerta-fundo);color:var(--alerta)}
.etiqueta-cliente-perdido{background:var(--erro-fundo);color:var(--erro)}
.barra-larga{grid-template-columns:minmax(90px,30%) 1fr auto}
/* Gráficos em SVG feitos no servidor: metas (boca de jacaré) e dashboards (RN-606) */
.grafico{width:100%;height:auto;display:block}
.grafico-grade{stroke:var(--borda);stroke-width:1}
.grafico-rotulo{fill:var(--suave);font-size:11px}
.grafico-meta{fill:none;stroke:var(--suave);stroke-width:2;stroke-dasharray:6 4}
.grafico-realizado{fill:none;stroke:var(--azul);stroke-width:3}
.grafico-boca-area{fill:var(--alerta-fundo);opacity:.7}
.grafico-hoje{stroke:var(--borda-forte);stroke-width:1;stroke-dasharray:2 3}
.legenda{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:8px 0 0;color:var(--suave)}
.legenda-meta,.legenda-realizado{display:inline-block;width:22px;height:0;border-top:2px dashed var(--suave);vertical-align:middle}
.legenda-realizado{border-top:3px solid var(--azul)}
.grafico-boca{overflow-x:auto}
.grafico-boca .grafico{min-width:540px}
.dia-a-dia>summary{cursor:pointer;list-style:none}
.dia-a-dia>summary h2{display:inline-block}
.dia-a-dia>summary::before{content:"▸ ";color:var(--suave)}
.dia-a-dia[open]>summary::before{content:"▾ "}
.grafico-barra{fill:var(--azul)}
.grafico-barra-negativa{fill:var(--erro)}
.grafico-zero{stroke:var(--borda-forte);stroke-width:1}

/* Ofertas (RN-701 a RN-706) */
.etiqueta-oferta-rascunho{background:var(--hover);color:var(--menu-texto)}
.etiqueta-oferta-valendo{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-oferta-agendada{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-oferta-encerrada,.etiqueta-oferta-terminou{background:var(--hover);color:var(--suave)}
.etiqueta-em-oferta{background:var(--alerta-fundo);color:var(--alerta)}
.previa-mensagem{white-space:pre-wrap;background:var(--hover);border-radius:8px;padding:12px;margin:0;font:inherit}
.datas-oferta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.acoes-tabela{padding:12px 16px}
/* Ajuda e suporte (ADR-0035) */
.etiqueta-chamado-aguardando_suporte{background:var(--alerta-fundo);color:var(--alerta)}
.etiqueta-chamado-aguardando_loja{background:var(--azul-claro);color:var(--azul)}
.etiqueta-chamado-resolvido{background:var(--ok-fundo);color:var(--ok)}
.lista-dados{display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);gap:6px 16px;margin:0 0 12px}
.lista-dados dt{font-weight:600}.lista-dados dd{margin:0;overflow-wrap:anywhere}
.conversa{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.mensagem{max-width:760px}.mensagem-suporte{margin-left:auto;border-left:4px solid var(--azul)}
.mensagem-texto{margin:0;overflow-wrap:anywhere}
.mensagem-foto{max-width:100%;max-height:320px;border-radius:8px;border:1px solid var(--borda)}
.faixa-suporte{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.faixa-suporte form{margin:0}
.menu-contador{margin-left:auto;background:var(--azul);color:#fff;border-radius:999px;padding:0 8px;font-size:12px;font-weight:700}
@media (max-width:600px){.lista-dados{grid-template-columns:1fr}.lista-dados dt{margin-top:6px}}
/* Entregas (ADR-0041) */
.etiqueta-entrega-a_enviar{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-entrega-em_transito{background:var(--alerta-fundo);color:var(--alerta)}
.etiqueta-entrega-entregue{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-entrega-nao_entregue,.etiqueta-entrega-atrasada{background:var(--erro-fundo);color:var(--erro)}
.etiqueta-entrega-cancelada{background:var(--hover);color:var(--suave)}
.opcoes-cartao{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:16px}
.opcoes-cartao .opcao{display:flex;gap:10px;align-items:center;border:1px solid var(--borda);border-radius:10px;padding:12px 14px;cursor:pointer;font-weight:500;min-height:48px}
.opcoes-cartao .opcao:has(input:checked){border-color:var(--azul);background:var(--azul-claro);color:var(--azul-escuro)}
.entrega-form .campo ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.etapas-entrega{display:grid;grid-template-columns:repeat(3,1fr);gap:0;list-style:none;padding:0;margin:0 0 16px;counter-reset:etapa}
.etapas-entrega li{position:relative;padding:28px 8px 0;text-align:center;display:flex;flex-direction:column;font-size:14px;color:var(--suave)}
.etapas-entrega li::before{content:"";position:absolute;top:8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--borda);z-index:1}
.etapas-entrega li::after{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--borda)}
.etapas-entrega li:first-child::after{display:none}
.etapas-entrega li.feito{color:var(--texto)}
.etapas-entrega li.feito::before,.etapas-entrega li.feito::after{background:var(--ok)}
.etapas-entrega li.atraso::before{background:var(--erro)}
.etapas-entrega li span{font-size:13px}
.historico-entrega{list-style:none;padding:0 0 0 14px;margin:0 0 12px;border-left:2px solid var(--borda)}
.historico-entrega li{margin:0 0 12px;position:relative}
.historico-entrega li::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--azul)}
.historico-entrega li:not(:first-child)::before{background:var(--borda)}
details.cartao>summary{cursor:pointer;margin-bottom:4px}
details.cartao[open]>summary{margin-bottom:12px}
.folha-destino{border:1px solid var(--texto);border-radius:6px;padding:10px 14px;margin:0 0 16px}
.folha-destino p{margin:2px 0}
.folha-assinatura{margin:32px 0 16px}
.folha-assinatura div{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px}
.minha-conta{align-items:start}.minha-conta h2{margin-top:0}

/* Fechamento do período (ADR-0051) */
.filtros-atalhos{grid-column:1/-1;margin:0 0 12px}
.demonstrativo tr.subtotal,.demonstrativo tr.subtotal td{background:var(--hover)}
.demonstrativo tr.total td{border-top:2px solid var(--texto);font-size:17px}
@media (max-width:720px){
  .demonstrativo tr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
  .demonstrativo td{display:block}
  .demonstrativo td[data-rotulo]::before{display:none}
  .demonstrativo td:first-child{flex:1 1 100%}
  .demonstrativo td:empty{display:none}
}

/* Markup ao lado do preço de venda no cadastro do produto (RN-136) */
.markup{margin-top:-6px;margin-bottom:12px;font-size:.9rem}
.markup .markup-texto{margin:0 0 4px}
.markup-abaixo .markup-texto{color:var(--erro);background:var(--erro-fundo);border-radius:6px;padding:6px 8px;font-weight:600}

/* Telas mais compactas no computador e no tablet (ADR-0053): menos espaço vazio, mesma letra legível.
   No celular (até 720 px) os botões e campos continuam com 44 px de altura, para o dedo. */
@media (min-width:721px){
  body{font-size:14px}
  h1{font-size:22px;margin-bottom:14px}
  h2{font-size:16px;margin:18px 0 8px}
  .app{grid-template-columns:232px 1fr;grid-template-rows:54px 1fr}
  .topo-busca{height:36px}
  .topo-usuario summary{min-height:36px}
  .menu{padding:10px 10px 16px;gap:0}
  .menu a,.menu-futuro{min-height:32px;gap:10px;padding:0 10px;font-size:13.5px}
  .menu-grupo{margin:10px 10px 2px}
  button.menu-grupo{min-height:30px;margin:4px 0 0;padding:0 10px}
  .menu-itens{gap:0}
  .conteudo{padding:18px 24px;max-width:1480px}
  .cabecalho{margin-bottom:12px}
  .cartao{padding:14px 16px}
  .grade{gap:12px;margin-bottom:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .indicador{gap:2px}
  .indicador strong{font-size:22px}
  .botao{min-height:36px;padding:0 14px}
  .botao-pequeno{min-height:30px;padding:0 10px}
  input[type=text],input[type=search],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{min-height:36px;padding:6px 10px}
  textarea{min-height:72px}
  .campo{gap:4px;margin-bottom:12px}
  .campo label{font-size:13px}
  .campo small{font-size:12px}
  .campo ul label,.campo-marcar{min-height:30px}
  .grade-campos{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 14px}
  .grade-campos .campo-marcar{min-height:36px;margin-bottom:12px}
  .grupo{padding-top:12px;margin-bottom:4px}
  .filtros{gap:0 12px;margin-bottom:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .filtros .acoes{margin-bottom:12px}
  .tabela{font-size:13.5px}
  .tabela th{padding:8px 12px;font-size:11.5px}
  .tabela td{padding:7px 12px;vertical-align:middle}
  .cartao-titulo{padding:12px 16px 8px}
  .atencao{gap:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .atencao h2{grid-column:1/-1}
  .atencao>.suave{grid-column:1/-1;margin:0}
  .atencao-item{padding:10px 12px}
  .abas a{padding:8px 14px}
  .aviso{padding:10px 14px}
}

/* Lista de busca (ADR-0054): janela com a lista ao clicar no campo de produto, cliente, marca, NCM... */
.lista-busca{position:relative}
.lista-busca-painel,.campo ul.lista-busca-painel{display:block;position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);min-width:260px;max-height:300px;overflow-y:auto;margin:0;padding:4px;list-style:none;background:var(--cartao);border:1px solid var(--borda-forte);border-radius:10px;box-shadow:0 10px 28px rgba(27,36,48,.16)}
.lista-busca-painel[hidden],.campo ul.lista-busca-painel[hidden]{display:none}
.lista-busca-painel li{display:flex;flex-direction:column;gap:1px;padding:7px 10px;border-radius:6px;cursor:pointer;line-height:1.3}
.lista-busca-painel li small{color:var(--suave);font-size:12px}
.lista-busca-painel li.ativo,.lista-busca-painel li:hover{background:var(--azul-claro)}
.lista-busca-painel li.lista-busca-vazio{cursor:default;color:var(--suave)}
.lista-busca-painel li.lista-busca-vazio:hover{background:none}
.lista-busca>input{padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6675' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}

/* Venda: desconto em % e em R$ (ADR-0055) */
.tabela-itens .campo-pct{width:64px}
.desconto-duplo{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.com-sufixo{display:flex;align-items:center;gap:6px}
.com-sufixo>span{color:var(--suave);font-weight:600;font-size:13px}
.com-sufixo>input{min-width:0;text-align:right}

/* Ícones de ação nas linhas e janelas de Dados e Excluir (ADR-0056) */
.coluna-acoes{text-align:right;white-space:nowrap;width:1%}
.acoes-linha{display:inline-flex;gap:2px;align-items:center;justify-content:flex-end}
.icone-botao{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid transparent;border-radius:8px;background:none;color:var(--menu-texto);cursor:pointer;padding:0;text-decoration:none}
.icone-botao:hover{background:var(--azul-claro);color:var(--azul-escuro);border-color:var(--azul-claro)}
.icone-botao:focus-visible{outline:3px solid var(--azul-claro);border-color:var(--azul)}
.icone-perigo:hover{background:var(--erro-fundo);color:var(--erro);border-color:var(--erro-fundo)}
.janela{border:1px solid var(--borda);border-radius:var(--raio);padding:18px 20px;max-width:min(520px,calc(100vw - 32px));width:100%;box-shadow:0 20px 48px rgba(27,36,48,.25);color:var(--texto)}
.janela::backdrop{background:rgba(27,36,48,.35)}
.janela-titulo{margin:0 0 12px;font-size:17px}
.dados-registro{grid-template-columns:minmax(120px,160px) 1fr;margin-bottom:8px}
@media (max-width:720px){
  .tabela td.coluna-acoes{justify-content:flex-start;width:auto}
  .icone-botao{width:40px;height:40px}
}
/* Garantias (ADR-0058) */
.etiqueta-garantia-aberta{background:var(--alerta-fundo);color:var(--alerta)}
.etiqueta-garantia-aguardando{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-garantia-finalizada{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-garantia-cancelada{background:var(--hover);color:var(--menu-texto)}
.aviso-garantia{display:inline-block;margin-top:2px;font-size:12px;color:var(--alerta);font-weight:600}
/* Fluxo de caixa único (ADR-0059) */
.etiqueta-fluxo-passado{background:var(--ok-fundo);color:var(--ok)}
.etiqueta-fluxo-agora{background:var(--azul-claro);color:var(--azul-escuro)}
.etiqueta-fluxo-futuro{background:var(--hover);color:var(--menu-texto)}
tr.fluxo-agora td{border-top:2px solid var(--azul)}
/* Dashboards: cartão que abre o gráfico numa janela (ADR-0060) */
button.cartao-grafico{font:inherit;text-align:left;cursor:pointer;width:100%;color:inherit}
button.cartao-grafico:hover,button.cartao-grafico:focus-visible{border-color:var(--azul)}
.cartao-grafico .comparacao{display:block;margin-top:2px}
.janela.janela-grafico{max-width:min(780px,calc(100vw - 32px))}
.grafico-rotulo-nome{fill:var(--texto)}
.dash-graficos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.dash-graficos h2{margin:8px 0}
@media (max-width:900px){.dash-graficos{grid-template-columns:1fr}}
/* Fechamento como DRE (ADR-0061) */
.demonstrativo tr.detalhe td{color:var(--suave);font-size:.92em}
.demonstrativo tr.detalhe td:first-child{padding-left:28px}
.demonstrativo .negativo-suave{color:var(--erro)}
.grade.grade-kpi{grid-template-columns:repeat(5,minmax(0,1fr))}
.cartao-destaque{border-top:3px solid var(--azul)}
.cartao-destaque.lucro-negativo{border-top-color:var(--erro)}
.cartao-destaque.lucro-negativo strong{color:var(--erro)}
.lista-notas{margin:8px 0 0;padding-left:18px;color:var(--suave);font-size:13px}
.lista-notas li{margin:2px 0}
@media (max-width:1100px){.grade.grade-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.grade.grade-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Ainda mais compacto no computador (ADR-0061): cartões, títulos e números menores, como num painel de BI. */
@media (min-width:721px){
  body{font-size:13px}
  h1{font-size:19px;margin-bottom:10px}
  h2{font-size:14.5px;margin:14px 0 6px}
  .app{grid-template-columns:216px 1fr;grid-template-rows:48px 1fr}
  .topo-busca{height:32px}
  .menu a,.menu-futuro{min-height:29px;font-size:13px}
  .conteudo{padding:14px 20px}
  .cartao{padding:10px 12px;border-radius:8px}
  .grade{gap:8px;margin-bottom:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .indicador>span:first-child{font-size:12px}
  .indicador strong{font-size:18px}
  .indicador strong small{font-size:12px}
  .indicador .pequeno,.pequeno{font-size:12px}
  .botao{min-height:32px;padding:0 12px}
  .botao-pequeno{min-height:28px;padding:0 9px;font-size:12.5px}
  input[type=text],input[type=search],input[type=email],input[type=password],input[type=date],input[type=number],input[type=month],select,textarea{min-height:32px;padding:4px 9px}
  .campo{margin-bottom:10px}
  .tabela{font-size:13px}
  .tabela th{padding:6px 10px;font-size:11px}
  .tabela td{padding:5px 10px}
  .cartao-titulo{padding:10px 12px 6px}
  .cartao-titulo h2,.atencao h2{font-size:14.5px}
  .abas a{padding:7px 12px}
  .aviso{padding:8px 12px}
  .demonstrativo tr.total td{font-size:15px}
}
.campo ul label{font-weight:400}
.janela-despesas .janela-rolagem{max-height:60vh;overflow-y:auto}
.janela-despesas tr.subtotal td{background:var(--hover)}
/* Painel no estilo BI (ADR-0062): cartões compactos, grade de 12 colunas, gráficos ECharts */
.bi-topo{align-items:center;margin-bottom:8px}
.bi-topo p{margin:0}
.bi-legenda{white-space:nowrap;margin-left:6px}
.bi-cor{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:-1px;margin:0 3px 0 8px}
.bi-cor-melhor{background:var(--ok)}.bi-cor-pior{background:var(--erro)}
.bi-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:8px}
.bi-kpi{display:flex;flex-direction:column;gap:1px;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--cartao);border:1px solid var(--borda);border-left:3px solid var(--azul);border-radius:8px;padding:8px 10px;min-width:0}
.bi-kpi:hover,.bi-kpi:focus-visible{border-color:var(--azul);box-shadow:0 2px 8px rgba(31,95,191,.12)}
.bi-kpi-titulo{font-size:11.5px;font-weight:600;color:var(--suave);line-height:1.3}
.bi-kpi strong{font-size:16.5px;font-weight:700;line-height:1.25;white-space:nowrap;letter-spacing:-.01em}
.bi-kpi-comparacao{font-size:11.5px;font-weight:600;color:var(--suave)}
.bi-kpi-comparacao.positivo{color:var(--ok)}.bi-kpi-comparacao.negativo{color:var(--erro)}
.bi-kpi-detalhe{font-size:11px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin-bottom:10px}
.bi-bloco{background:var(--cartao);border:1px solid var(--borda);border-radius:8px;padding:8px 10px 6px;min-width:0}
.bi-bloco h2{margin:0 0 4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--menu-texto)}
.bi-4{grid-column:span 4}.bi-6{grid-column:span 6}.bi-8{grid-column:span 8}.bi-12{grid-column:1/-1}
.bi-grafico{width:100%;height:200px}
.bi-grafico.bi-alto{height:230px}.bi-grafico.bi-medio{height:210px}.bi-grafico.bi-medidor{height:170px}
.bi-nota{margin:0;text-align:center;font-size:12px;color:var(--suave)}
.bi-sem-meta{height:200px;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;color:var(--suave)}
.bi-sem-meta p{margin:0}
.bi-vazio{height:120px;display:grid;place-content:center;margin:0}
.bi-tabela th,.bi-tabela td{padding:5px 10px}
.bi-participacao{display:inline-block;width:56px;height:6px;background:var(--hover);border-radius:3px;margin-right:6px;vertical-align:middle;overflow:hidden}
.bi-participacao i{display:block;height:100%;background:var(--azul);border-radius:3px}
.janela-grafico .bi-grafico{min-width:min(700px,calc(100vw - 80px))}
@media (max-width:1100px){.bi-4{grid-column:span 6}.bi-8{grid-column:1/-1}}
@media (max-width:720px){.bi-4,.bi-6,.bi-8{grid-column:1/-1}.bi-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bi-bloco h2 .bi-media{float:right;font-weight:600;text-transform:none;letter-spacing:0;color:var(--suave)}
.bi-media i{display:inline-block;width:16px;border-top:1px dashed var(--suave);vertical-align:middle;margin-right:4px}
.bi-explica{margin:4px 0 2px;padding-top:6px;border-top:1px solid var(--borda-linha);font-size:11.5px;line-height:1.45;color:var(--suave)}
/* Relatório de vendas: resumo do período no fim (ADR-0069) */
.resumo-vendas-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 16px;margin:0 0 12px}
.resumo-vendas-numeros>div{border-left:3px solid var(--azul-claro);padding:2px 0 2px 10px}
.resumo-vendas-numeros dt{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.resumo-vendas-numeros dd{margin:2px 0 0;font-weight:700;font-size:16px}
.resumo-vendas-numeros dd.pequeno{font-weight:400;font-size:12px}
.resumo-vendas h3{margin:8px 0 6px}
/* Relatório de orçamentos (ADR-0070) */
.alerta-texto{color:var(--alerta)}
.itens-orcamento{margin:0;padding-left:16px;font-size:13px;line-height:1.35}
.tabela-orcamentos td{vertical-align:top}

/* Cores das áreas e menu escuro (ADR-0076). Cada área tem uma cor fixa, usada no menu, nos atalhos do início e no
   título das telas da área. A cor nunca vem sozinha: sempre com ícone e nome. O menu escuro é o padrão; a empresa
   pode voltar ao claro em Configurações → Aparência. */
:root{
  --area-cadastros:#2563EB; --area-estoque:#0D9488; --area-vendas:#16A34A; --area-financeiro:#D97706;
  --area-compras:#7C3AED; --area-relatorios:#DB2777; --area-administracao:#64748B; --area-ajuda:#0891B2;
  --area-plataforma:#0891B2; --laranja-marca:#F59E0B;
}
.area-cadastros{--cor-area:var(--area-cadastros)}.area-estoque{--cor-area:var(--area-estoque)}
.area-vendas{--cor-area:var(--area-vendas)}.area-financeiro{--cor-area:var(--area-financeiro)}
.area-compras{--cor-area:var(--area-compras)}.area-relatorios{--cor-area:var(--area-relatorios)}
.area-administracao{--cor-area:var(--area-administracao)}.area-ajuda{--cor-area:var(--area-ajuda)}
.area-plataforma{--cor-area:var(--area-plataforma)}
.app{--m-fundo:#0F1E36;--m-texto:#C9D3E3;--m-forte:#fff;--m-hover:#18294A;--m-on:#1F3560;--m-grupo:#93A3BC;--m-linha:#24375A;--m-borda:#0F1E36}
.app.menu-claro{--m-fundo:var(--cartao);--m-texto:var(--menu-texto);--m-forte:var(--texto);--m-hover:var(--hover);--m-on:var(--azul-claro);--m-grupo:var(--suave);--m-linha:var(--borda);--m-borda:var(--borda)}
.menu{background:var(--m-fundo);border-right-color:var(--m-borda);scrollbar-color:var(--m-linha) transparent}
.menu a{color:var(--m-texto)}
.menu a:hover{background:var(--m-hover);color:var(--m-forte)}
.menu a.on{background:var(--m-on);color:var(--m-forte);box-shadow:inset 3px 0 0 var(--laranja-marca)}
.menu-claro .menu a.on{color:var(--azul-escuro)}
.menu a:focus-visible,button.menu-grupo:focus-visible{outline:2px solid var(--laranja-marca);outline-offset:-2px}
.menu-grupo{display:flex;align-items:center;gap:8px;color:var(--m-grupo)}
button.menu-grupo{color:var(--m-texto);text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
button.menu-grupo:hover{background:var(--m-hover);color:var(--m-forte)}
button.menu-grupo[aria-expanded=true]{color:var(--m-forte)}
.menu-chip{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;flex:none;background:var(--cor-area,var(--area-administracao));color:#fff}
.menu-chip .icone{width:14px;height:14px}
.menu-itens{margin:0 0 4px 16px;padding-left:4px;border-left:1px solid var(--m-linha)}
@media (min-width:721px){.menu-itens a{padding:0 8px;gap:8px}}
.menu .pequeno{font-size:12px}
.marca-logo-branca{display:none}
@media (min-width:721px){
  .app{grid-template-columns:232px 1fr}  /* um pouco mais largo: os nomes das telas cabem numa linha */
  .menu-escuro .topo{background:linear-gradient(90deg,var(--m-fundo) 0 232px,var(--cartao) 232px)}
  .menu-escuro .marca{width:196px;flex:none}
  .menu-escuro .marca .marca-logo:not(.marca-logo-branca){display:none}
  .menu-escuro .marca .marca-logo-branca{display:block}
  .menu .icone{width:18px;height:18px}
}
/* Título da tela com a cor da área dela. */
.com-area .conteudo .cabecalho h1{border-left:4px solid var(--cor-area);padding-left:10px}

/* Início com atalhos coloridos por área (ADR-0076). Botões grandes, com ícone e nome, na cor da área. */
.botao-venda{background:var(--area-vendas);border-color:var(--area-vendas);color:#fff}
.botao-venda:hover{background:#15803D;border-color:#15803D;color:#fff}
.indicador[class*="area-"]{border-top:3px solid var(--cor-area)}
.atencao-faixa{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px}
.atencao-faixa h2{margin:0 6px 0 0;font-size:13px;color:var(--suave);font-weight:600}
.atencao-faixa .atencao-item{flex-direction:row;padding:4px 12px;border-radius:999px;font-size:12.5px}
.atencao-faixa .atencao-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.atencao-faixa a.atencao-item:hover{filter:brightness(.96)}
.atencao-ok{background:var(--ok-fundo);color:var(--ok);margin:0}
.inicio-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px 18px}
.inicio-area h2{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--cor-area)}
.inicio-area h2::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--cor-area)}
.inicio-botoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inicio-botao{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:88px;padding:12px 8px;border-radius:12px;text-align:center;font-weight:600;font-size:13px;line-height:1.25;color:var(--texto);text-decoration:none;background:var(--cartao);background:color-mix(in srgb,var(--cor-area) 8%,var(--cartao));border:1px solid color-mix(in srgb,var(--cor-area) 28%,var(--cartao));transition:transform .12s,box-shadow .12s}
.inicio-botao:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(27,36,48,.10);border-color:var(--cor-area)}
.inicio-botao:focus-visible{outline:3px solid var(--cor-area);outline-offset:2px}
.inicio-icone{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--cor-area);color:#fff}
@media (prefers-reduced-motion:reduce){.inicio-botao{transition:none}.inicio-botao:hover{transform:none}}
@media (max-width:720px){.inicio-areas{grid-template-columns:1fr}.inicio-botao{min-height:76px}}
.inicio-botoes{grid-auto-rows:1fr}
@media (min-width:1200px){.inicio-numeros{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}

/* Tela de venda rápida (ADR-0077): busca no alto, itens com foto e − / +, e à direita só o que fecha a venda:
   cliente, total grande, pagamento com troco e o botão Concluir. No celular a coluna da direita desce. */
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
kbd{font:600 10px ui-monospace,Menlo,Consolas,monospace;padding:1px 5px;border-radius:4px;background:var(--hover);border:1px solid var(--borda);color:var(--suave);vertical-align:middle}
.botao-venda kbd,.botao-primario kbd{background:rgba(255,255,255,.2);border-color:transparent;color:#fff}
.botao-link{background:none;border:0;padding:4px 0;color:var(--azul);cursor:pointer;font:inherit;text-align:left}
.botao-link:hover{text-decoration:underline}
.pdv{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}
.pdv-principal,.pdv-lateral{display:flex;flex-direction:column;gap:10px;min-width:0}
.pdv .cartao h2{margin:0 0 8px;font-size:14px;display:flex;align-items:center;gap:6px}
.pdv-busca{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end}
.pdv-busca .campo{margin:0}
.pdv-busca .campo-busca{flex:1 1 320px}
.pdv-busca .campo-qtd{flex:0 0 80px}
.pdv-busca input#item{font-size:15px;min-height:42px}
.pdv-itens{padding:0}
.pdv-itens .tabela td{vertical-align:middle}
.pdv-col-foto{width:52px;padding-right:0!important}
.pdv-foto{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;object-fit:cover;background:var(--hover)}
.sem-foto{background:color-mix(in srgb,var(--area-vendas) 14%,var(--cartao));color:#14532D;font-weight:700;font-size:12px}
.pdv-vazio{padding:28px 14px!important;text-align:center}
.qtd-passos{display:inline-flex;align-items:stretch;border:1px solid var(--borda-forte);border-radius:8px;overflow:hidden;background:var(--cartao)}
.qtd-passos .campo-numero{width:54px!important;border:0!important;border-radius:0;text-align:center;min-height:34px!important;padding:4px!important}
.qtd-botao{width:30px;border:0;background:var(--hover);color:var(--azul);font-size:16px;font-weight:700;cursor:pointer;padding:0}
.qtd-botao:hover{background:var(--azul-claro)}
.qtd-botao:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
.pdv-col-remover{width:40px}
.pdv-resumo{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:8px 12px}
.pdv-vendedor{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.pdv-vendedor select{min-height:34px;width:auto}
.pdv-mais summary{cursor:pointer;font-weight:600;color:var(--azul)}
.pdv-mais-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 12px;margin-top:10px}
.pdv-mais-campos .campo-inteiro{grid-column:1/-1}
.pdv-cliente{display:flex;align-items:center;gap:10px}
.pdv-total{background:#0F1E36;border-color:#0F1E36;color:#fff}
.pdv-total-rotulo{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#C9D3E3}
.pdv-total-valor{margin:2px 0 6px}
.pdv-total-valor b{font-size:34px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pdv-total-linhas{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0 0 8px;font-size:12.5px;color:#C9D3E3}
.pdv-total-linhas dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.pdv-desconto{border-top:1px solid #24375A;padding-top:8px}
.pdv-desconto label{font-size:12px;font-weight:600;color:#C9D3E3}
.pdv-desconto small{color:#93A3BC;font-size:11px}
.pdv-desconto input{background:#16294A;border-color:#2A3E62;color:#fff}
.pdv-desconto .com-sufixo span{color:#C9D3E3}
.pdv-formas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.pdv-forma{border:1px solid var(--borda-forte);border-radius:8px;background:var(--cartao);padding:7px 4px;font:600 12px/1.2 inherit;cursor:pointer;color:var(--texto)}
.pdv-forma:hover{border-color:var(--area-vendas)}
.pdv-forma[aria-pressed=true]{border-color:var(--area-vendas);background:color-mix(in srgb,var(--area-vendas) 12%,var(--cartao));color:#14532D}
.pdv-troco{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-items:center;margin:4px 0 8px}
.pdv-troco label{font-size:12px;font-weight:600}
.pdv-troco-valor{grid-column:1/-1;margin:0;display:flex;justify-content:space-between;background:#FEF3C7;color:#78350F;border-radius:8px;padding:8px 10px;font-weight:700;font-variant-numeric:tabular-nums}
.pdv-troco-valor.falta{background:var(--erro-fundo);color:var(--erro)}
.pdv-botoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pdv-botoes .botao{justify-content:center}
.pdv-concluir{grid-column:1/-1;min-height:48px;font-size:16px}
@media (max-width:1024px){
  .pdv{grid-template-columns:1fr}
}
/* Celular: cada item vira um cartão de 3 linhas (foto, nome e subtotal; qtd. e preço; descontos). */
@media (max-width:720px){
  .pdv-itens .tabela tr[data-item]{display:grid;grid-template-columns:44px 1fr 1fr 36px;grid-template-areas:"foto prod sub del" "foto qtd preco preco" ". dp dr dr";gap:6px 8px;padding:10px 12px}
  .pdv-itens .tabela tr[data-item] td{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0;text-align:left}
  .pdv-itens .tabela tr[data-item] td::before{min-width:0;font-size:11px}
  .pdv-itens .tabela tr[data-item] td:nth-child(1){grid-area:foto}
  .pdv-itens .tabela tr[data-item] td:nth-child(2){grid-area:prod}
  .pdv-itens .tabela tr[data-item] td:nth-child(2)::before{display:none}
  .pdv-itens .tabela tr[data-item] td:nth-child(2) br{display:none}
  .pdv-itens .tabela tr[data-item] td:nth-child(3){grid-area:qtd}
  .pdv-itens .tabela tr[data-item] td:nth-child(4){grid-area:preco}
  .pdv-itens .tabela tr[data-item] td:nth-child(5){grid-area:dp}
  .pdv-itens .tabela tr[data-item] td:nth-child(6){grid-area:dr}
  .pdv-itens .tabela tr[data-item] td:nth-child(7){grid-area:sub;text-align:right;align-items:flex-end}
  .pdv-itens .tabela tr[data-item] td:nth-child(8){grid-area:del;align-items:flex-end}
  .pdv-itens .tabela tr[data-item] input{width:100%;min-width:0}
  .pdv-itens .qtd-passos{display:flex}
  .pdv-itens .qtd-passos input{flex:1}
}
@media print{.pdv-busca,.pdv-botoes,.qtd-botao{display:none!important}}
.pdv [hidden]{display:none!important}
.pdv-forma{font-size:11.5px;padding:6px 4px}
/* Foto do produto no cadastro (ADR-0077) */
.foto-produto{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:12px}
.foto-produto-imagem img,.foto-produto-imagem .sem-foto{display:grid;place-items:center;width:120px;height:120px;border-radius:12px;object-fit:cover;background:var(--hover);font-size:22px}
.foto-produto-texto{flex:1 1 260px;min-width:0}
.foto-produto-texto h2{margin:0 0 4px;font-size:14px}
.foto-produto-envio{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.foto-produto-envio input[type=file]{flex:0 1 auto;min-width:0;max-width:100%}
/* Cartões de números com a cor da área em todas as telas, no padrão do Início (ADR-0079). O cartão que já tem a
   própria área (ex.: "Vendas de hoje" no Início) fica com a dela; os de canal e o do lucro têm cores próprias. */
:where(.com-area) .indicador:not(.indicador-canal):not(.cartao-destaque){border-top:3px solid var(--cor-area)}
/* Cartões do dashboard: o mesmo filete em cima, com a cor do assunto da aba (vendas verde, estoque verde-água). */
.com-area .bi-kpi{border-left:1px solid var(--borda);border-top:3px solid var(--cor-area)}
/* Janela de exportação (ADR-0080) */
.janela.janela-exportar{max-width:min(620px,calc(100vw - 32px))}
.janela-exportar fieldset{border:1px solid var(--borda);border-radius:var(--raio);padding:10px 14px;margin:0 0 12px}
.janela-exportar legend{font-size:12px;font-weight:600;color:var(--suave);padding:0 6px}
.exportar-secoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 14px}
.exportar-secoes .campo-marcar{min-height:32px}
.exportar-secoes .botao-link{grid-column:1/-1}
.janela-exportar .filtros{margin-bottom:0}
.janela-exportar .acoes{justify-content:flex-end;flex-wrap:wrap}