:root { --preto:#111; --laranja:#c8551a; --cinza:#777; --borda:#e2e2e2; --fundo:#fafafa; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--preto); background:#fff; }
.oculto { display:none !important; }

/* logo antes do nome: a concessionaria precisa saber de quem e a ferramenta.
   Monograma e nao a marca por extenso — no topo de 48px o texto ficaria ilegivel. */
.topo { background:var(--preto); color:#fff; padding:14px 20px; display:flex; align-items:center; gap:12px; }
.logo-f77 { height:26px; width:auto; flex:none; }
.topo .conc { margin-left:auto; }
.marca { font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.conc { font-size:13px; color:#bbb; }

main { max-width:1180px; margin:0 auto; padding:20px; }
h1 { font-size:22px; margin:0 0 14px; }
.campo { width:100%; padding:10px 12px; border:1px solid var(--borda); border-radius:6px; font-size:14px; }

.lista-conc { list-style:none; padding:0; margin:14px 0 0; }
.lista-conc li { border:1px solid var(--borda); border-radius:6px; padding:11px 13px; margin-bottom:7px; cursor:pointer; }
.lista-conc li:hover { border-color:var(--preto); }
.lista-conc b { display:block; font-size:15px; }
.lista-conc span { font-size:11.5px; color:var(--cinza); }

.abas { display:flex; gap:0; border-bottom:1px solid var(--borda); margin-bottom:16px; }
.aba { background:none; border:0; border-bottom:2px solid transparent; padding:9px 14px; font-size:14px; color:var(--cinza); cursor:pointer; }
.aba.ativa { color:var(--preto); font-weight:700; border-bottom-color:var(--laranja); }

.filtros { margin-bottom:14px; }
/* coluna, nao linha: agora sao duas fileiras (genero e modelagem) e em flex-row
   elas ficariam lado a lado. */
.chips { margin-top:9px; display:flex; flex-direction:column; gap:0; }
.chip { background:#eee; border:0; border-radius:20px; padding:4px 12px; font-size:11.5px; color:#555; cursor:pointer; }
.chip.ativo { background:var(--preto); color:#fff; }

.colunas { display:flex; gap:18px; align-items:flex-start; }
.catalogo { flex:1; min-width:0; }
.grupo { background:#e9e5df; padding:7px 14px; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#444; border-radius:4px; margin:16px 0 8px; }
.produto { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid #eee; }
/* contain, nunca cover: a estampa e o que a concessionaria esta comprando. Cover
   cortava o desenho no meio — a de Belo Horizonte perdia a ponte. Melhor sobrar
   fundo em volta do que entregar a arte cortada. */
.produto img { width:120px; height:120px; object-fit:contain; border-radius:5px; background:var(--fundo); flex:none; cursor:zoom-in; }

/* Lupa: clicar na foto abre a estampa grande. Nas fotos em modelo a estampa sai
   pequena no thumb, e a concessionaria precisa ver o desenho pra decidir. */
.lupa { position:fixed; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center;
  justify-content:center; z-index:50; cursor:zoom-out; padding:20px; }
.lupa img { max-width:min(92vw,900px); max-height:88vh; object-fit:contain; border-radius:6px; background:#fff; }
.lupa .legenda { position:absolute; bottom:16px; left:0; right:0; text-align:center; color:#fff;
  font-size:13px; padding:0 20px; }
.lupa .fechar { position:absolute; top:14px; right:18px; color:#fff; font-size:30px; line-height:1;
  background:none; border:none; cursor:pointer; }
.produto .sem-foto { width:120px; height:120px; border-radius:5px; background:var(--fundo); border:1px dashed var(--borda); flex:none; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--cinza); }
.ref { font-size:10.5px; color:var(--cinza); letter-spacing:.02em; }
.nome { font-size:15px; font-weight:600; margin:1px 0 3px; }
.meta { font-size:11.5px; color:var(--cinza); margin-bottom:8px; }
.grade { display:flex; gap:7px; align-items:flex-end; flex-wrap:wrap; }
.grade label { font-size:9.5px; color:var(--cinza); text-align:center; display:block; }
.grade input { width:44px; padding:5px; text-align:center; border:1px solid #ccc; border-radius:4px; font-size:13px; }
.grade input.preenchido { border-color:var(--laranja); background:#fff6e8; font-weight:700; }
.linha-total { margin-left:8px; font-size:11px; color:var(--cinza); }
.linha-total b { display:block; font-size:14px; color:var(--preto); }
.perso { margin-top:8px; font-size:11px; color:#555; }
.perso button { margin-left:5px; }

.resumo { width:230px; flex:none; background:var(--preto); color:#fff; border-radius:6px; padding:14px; position:sticky; top:16px; font-size:12px; }
.resumo h2 { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#999; margin:0 0 10px; font-weight:600; }
.resumo .li { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid #333; align-items:flex-start; }
.resumo .li-txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
/* Ref antes do nome: e por ela que a concessionaria confere o pedido e fala com o
   Andre. "BRASILIA" e "BRASILIA 2" sao nomes parecidos e refs diferentes. */
.resumo .li-ref { font-size:10px; color:#8a8a8a; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.resumo .li b { flex:none; }

/* Abaixo do minimo: a linha vermelha diz quanto falta, em vez de so marcar erro.
   Sem o numero, a concessionaria tem que abrir a peca pra descobrir. */
.resumo .li.abaixo { border-left:3px solid #e0644f; padding-left:8px; margin-left:-11px; }
.resumo .li.abaixo .li-ref, .resumo .li.abaixo span { color:#f0a294; }
.resumo .li.abaixo b { color:#e0644f; }
.resumo .li-falta { font-size:10.5px; color:#e0644f; font-weight:600; }
.resumo .fim { margin-top:11px; padding-top:9px; border-top:1px solid #555; display:flex; justify-content:space-between; font-size:14px; font-weight:700; }
.botao { display:block; width:100%; background:var(--laranja); color:#fff; border:0; border-radius:5px; padding:10px; font-size:13px; font-weight:700; margin-top:11px; cursor:pointer; }
.botao:disabled { background:#555; cursor:not-allowed; }
.salvo { font-size:10px; color:#888; text-align:center; margin-top:7px; }

.hist { border:1px solid var(--borda); border-radius:6px; padding:11px 13px; margin-bottom:9px; font-size:13px; }
.hist .estado { font-size:11.5px; }
.aguardando { color:#b8860b; } .aprovado { color:#2a7a3a; } .reprovado { color:#b03030; } .antigo { color:var(--cinza); }

.dados-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:11px; max-width:760px; }
.dados-grid label { font-size:11px; color:var(--cinza); display:block; margin-bottom:3px; }

/* pre-line: o erro do minimo lista os produtos em varias linhas, e textContent
   sozinho renderiza tudo grudado. border-radius menor porque agora e caixa de
   texto, nao pilula. */
.aviso { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--preto); color:#fff; padding:12px 20px; border-radius:10px; font-size:13px; z-index:60; white-space:pre-line; text-align:left; max-width:min(90vw,460px); line-height:1.45; box-shadow:0 6px 24px rgba(0,0,0,.3); }

@media (max-width:820px) {
  .colunas { flex-direction:column; }
  .resumo { width:100%; position:static; }
  .produto img, .produto .sem-foto { width:84px; height:84px; }
}


/* ══ painel da Harley ══════════════════════════════════════════════════
   A Julia decide aqui se a janela foi boa. Numero sozinho nao responde isso —
   por isso barra proporcional ao lado de cada linha: a comparacao entra pelo
   olho antes da leitura. */
.abas { display:flex; gap:4px; border-bottom:1px solid var(--borda); margin:0 0 18px; }
.aba { background:none; border:none; border-bottom:2px solid transparent; padding:10px 16px;
  font-size:14px; color:var(--cinza); cursor:pointer; font-family:inherit; }
.aba.ativa { color:var(--preto); border-bottom-color:var(--preto); font-weight:600; }
.aba b { background:var(--preto); color:#fff; border-radius:9px; padding:1px 7px; font-size:11px; margin-left:5px; }
.aba b:empty { display:none; }

.filtro-janela { display:flex; align-items:center; gap:9px; margin-bottom:16px; font-size:13px; color:var(--cinza); }
.filtro-janela select { font-family:inherit; font-size:13px; padding:6px 9px; border:1px solid var(--borda); border-radius:5px; background:#fff; }

.cartoes { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:22px; }
.cartao { background:var(--preto); color:#fff; border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:3px; }
.cartao .rot { font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.65; }
.cartao b { font-size:24px; line-height:1.15; }
.cartao .sub { font-size:11px; opacity:.6; }

.bloco { margin-bottom:26px; }
.bloco h3 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--cinza);
  margin:0 0 9px; font-weight:600; }
.bloco .vazio { color:var(--cinza); font-size:13px; margin:0 0 8px; }

.tab { width:100%; border-collapse:collapse; font-size:13px; }
.tab th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--cinza); font-weight:600; padding:0 8px 6px 0; border-bottom:1px solid var(--borda); }
.tab td { padding:8px 8px 8px 0; border-bottom:1px solid var(--borda); vertical-align:middle; }
.tab tr.destaque td { background:#fbf7ef; }
.tab .det { display:block; font-size:11px; color:var(--cinza); }
.cel-barra { width:34%; }

.barra { background:var(--fundo); border-radius:3px; height:7px; overflow:hidden; }
.barra i { display:block; height:100%; background:var(--preto); border-radius:3px; }

@media (max-width:700px) {
  .cel-barra { display:none; }
  .cartao b { font-size:20px; }
}


/* ══ faixa da janela ═══════════════════════════════════════════════════
   A concessionaria precisa se programar. Sem prazo visivel ela so descobre que
   perdeu a janela quando tenta enviar — e ai ja e tarde. Contagem grande de
   proposito: o prazo e a informacao que faz ela agir hoje em vez de semana que vem. */
.faixa-janela { background:var(--fundo); border:1px solid var(--borda);
  border-left:4px solid var(--preto); border-radius:6px; padding:12px 16px;
  margin-bottom:18px; }
.fj-topo { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-size:13px; color:var(--cinza); }
.fj-topo b { color:var(--preto); font-weight:600; }

.fj-contagem { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:9px; }
.fj-rot { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--cinza); }
.fj-bloco { display:inline-flex; align-items:baseline; gap:4px; }
.fj-bloco b { font-size:22px; font-weight:700; line-height:1; color:var(--preto);
  font-variant-numeric:tabular-nums; }
.fj-bloco i { font-style:normal; font-size:11px; color:var(--cinza); }

/* Ultimos 3 dias: laranja Harley. */
.faixa-janela.urgente { border-left-color:var(--laranja); background:#fdf6f1; }
.faixa-janela.urgente .fj-bloco b { color:var(--laranja); }
.faixa-janela.urgente .fj-rot { color:var(--laranja); font-weight:600; }

.faixa-janela.encerrada { border-left-color:#b03030; background:#fdf3f3; }
.faixa-janela.encerrada .fj-topo, .faixa-janela.encerrada .fj-topo b { color:#b03030; }

@media (max-width:700px) {
  .fj-bloco b { font-size:19px; }
}

/* ══ produto abaixo do minimo ══════════════════════════════════════════
   Aparece enquanto ela digita, nao so quando tenta enviar: descobrir no clique
   de enviar obriga a cacar 6 produtos numa lista de 115. Zero nao marca —
   significa que ela nao quer aquele produto, nao que errou. */
.produto.abaixo-minimo { background:#fdf3f3; border-left:3px solid #b03030;
  padding-left:11px; margin-left:-14px; }
.produto.abaixo-minimo .tot { color:#b03030; }
.produto.abaixo-minimo input.preenchido { border-color:#b03030; background:#fff; color:#b03030; }

.dica-minimo { color:#b03030; font-size:11px; align-self:center; white-space:nowrap; }
.dica-minimo:empty { display:none; }


/* ══ filtro em dois niveis ═════════════════════════════════════════════
   Genero primeiro, modelagem dentro. Uma fileira unica com 9 modelagens
   misturava CLASSIC (masculino) com BASIC (feminino) e INFANTIL — a
   concessionaria tinha que saber de cor qual modelagem era de quem. */
.linha-chips { display:flex; gap:7px; flex-wrap:wrap; }
.linha-chips.secundaria { margin-top:7px; padding-left:2px; }
.chip.menor { font-size:12px; padding:4px 11px; opacity:.9; }
.grupo span { font-weight:400; color:var(--cinza); }


/* ══ composicao do pedido ══════════════════════════════════════════════
   Barra empilhada e nao pizza: o carrinho tem 230px de largura, e uma pizza
   nesse tamanho vira bolinha ilegivel com legenda maior que o grafico. A barra
   ocupa a largura toda e a proporcao entra pelo olho na hora. */
.composicao { margin-top:14px; padding-top:12px; border-top:1px solid #333; }
.composicao h3 { font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:#999; margin:0 0 8px; font-weight:600; }

.comp-barra { display:flex; height:8px; border-radius:4px; overflow:hidden; background:#333; margin-bottom:9px; }
.comp-barra i { display:block; height:100%; }

.comp-li { display:flex; align-items:center; gap:6px; font-size:11.5px; padding:2px 0; color:#ccc; }
.comp-li span { flex:1; }
.comp-li b { color:#fff; font-variant-numeric:tabular-nums; }
.comp-li em { font-style:normal; color:#8a8a8a; min-width:32px; text-align:right;
  font-variant-numeric:tabular-nums; }
.comp-li .ponto { width:8px; height:8px; border-radius:2px; flex:none; }

/* Laranja Harley no masculino por ser o maior volume; os outros em tons que
   separam bem no fundo preto. */
.g-masculino { background:var(--laranja); }
.g-feminino  { background:#d9b382; }
.g-infantil  { background:#7fa6a0; }
.g-outros    { background:#666; }


/* ══ ir do carrinho ate a peça ═════════════════════════════════════════
   Com 115 produtos, achar de novo a peça que esta abaixo do minimo era cacar na
   rolagem. A linha do carrinho leva ate ela e o cursor ja cai no primeiro tamanho. */
.resumo .li[data-ir-para] { cursor:pointer; }
.resumo .li[data-ir-para]:hover .li-txt span:not(.li-ref):not(.li-falta) { text-decoration:underline; }
.resumo .li[data-ir-para]:focus-visible { outline:2px solid var(--laranja); outline-offset:2px; border-radius:3px; }

/* Pisca ao chegar: sem isso, rolar 40 produtos deixa a duvida de qual e. */
@keyframes piscar-produto {
  0%, 100% { background:transparent; }
  20%, 60% { background:#fff4d6; }
}
.produto.piscando { animation:piscar-produto 1.6s ease-in-out; }
.produto.piscando.abaixo-minimo { animation:none; background:#fdf3f3; }

@media (prefers-reduced-motion: reduce) {
  .produto.piscando { animation:none; box-shadow:inset 0 0 0 2px var(--laranja); }
}


/* ══ filtro da fila de pedidos ═════════════════════════════════════════ */
.filtros-pedido { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.chips-status { display:flex; gap:6px; flex-wrap:wrap; }
.chips-status .chip i { font-style:normal; opacity:.55; font-size:10.5px; margin-left:2px; }
.chips-status .chip.ativo i { opacity:.75; }
.campo-busca { flex:1; min-width:200px; padding:7px 11px; border:1px solid var(--borda);
  border-radius:6px; font-family:inherit; font-size:13px; }

.btn-imprimir { margin-left:auto; background:none; border:1px solid var(--borda);
  border-radius:6px; padding:6px 14px; font-family:inherit; font-size:12.5px;
  color:var(--cinza); cursor:pointer; }
.btn-imprimir:hover { border-color:var(--preto); color:var(--preto); }

/* ══ impressao ═════════════════════════════════════════════════════════
   A Julia leva o painel pra reuniao. Esconde o que nao serve no papel em vez de
   gerar um PDF por outro caminho: versao paralela da tela desatualiza sozinha. */
@media print {
  @page { margin:14mm; }
  body { background:#fff; }
  .topo { background:none; color:var(--preto); border-bottom:2px solid var(--preto);
    padding-left:0; padding-right:0; }
  .abas, .filtro-janela, .btn-imprimir, .aviso, .filtros-pedido, #secao-pedidos { display:none !important; }
  #secao-painel { display:block !important; }

  /* Cartao preto sai chapado no papel e gasta tinta a toa. */
  .cartao { background:none; color:var(--preto); border:1px solid #bbb; }
  .cartao .rot, .cartao .sub { color:#555; }
  .cartoes { grid-template-columns:repeat(4,1fr); }

  /* Barra vira contorno: fundo escuro imprime sujo em impressora comum. */
  .barra { border:1px solid #999; background:none; }
  .barra i { background:#666; }

  /* Bloco nao pode partir no meio da folha. */
  .bloco { break-inside:avoid; page-break-inside:avoid; }
  .tab { font-size:11px; }
  .tab tr.destaque td { background:none; font-weight:600; }
}


/* ══ manchete do painel ════════════════════════════════════════════════
   A efetividade nao e mais um cartao na fileira. E a pergunta que a Julia tem, e
   o unico numero do painel que mede a FABRICA e nao a rede. Medido em producao:
   74% — nenhum pedido Harley foi entregue completo. */
.manchete { border:1px solid var(--borda); border-left:5px solid var(--preto);
  border-radius:8px; padding:16px 20px; margin-bottom:18px;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.mh-rot { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--cinza); }
.mh-num { font-size:44px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
.mh-sub { font-size:13px; color:var(--cinza); margin-left:auto; }
.mh-sub b { color:var(--preto); }

.manchete.bom      { border-left-color:#2a7a3a; }
.manchete.bom      .mh-num { color:#2a7a3a; }
.manchete.atencao  { border-left-color:var(--laranja); }
.manchete.atencao  .mh-num { color:var(--laranja); }
.manchete.ruim     { border-left-color:#b03030; background:#fdf3f3; }
.manchete.ruim     .mh-num { color:#b03030; }

/* ══ bloco de contato ══════════════════════════════════════════════════
   O unico bloco do painel que pede acao. Por isso destacado. */
.bloco.alerta { border:1px solid #e8d7b8; background:#fdfaf3; border-radius:8px; padding:14px 16px; }
.bloco.alerta h3 { color:#8a6d3b; }
.al-li { display:flex; gap:10px; align-items:baseline; padding:4px 0; font-size:13px; }
.al-li b { min-width:150px; }
.al-li span { color:var(--cinza); }

/* ── tabelas ─────────────────────────────────────────────────────────── */
/* Cabecalho segue o alinhamento da propria coluna. Com th sempre a esquerda e
   numero a direita, cada titulo apontava pra coluna errada — 'PEDIDOS' no canto
   esquerdo com o valor la na outra ponta.

   Numero de quantidade e valor fica a DIREITA e nao centralizado: alinhado pela
   direita, 2.933 e 97 empilham unidade sob unidade e da pra comparar batendo o
   olho. Centralizado, cada linha comeca num ponto diferente.
   Coluna estreita (UF, contagem, percentual) vai centralizada: e um dado curto,
   nao uma grandeza pra comparar. */
.tab td.num, .tab th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tab td.cen, .tab th.cen { text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tab td.mono { font-size:11px; color:var(--cinza); }
.tab tr.apagada td { opacity:.5; }
.tab tr.apagada i { font-style:normal; color:#b03030; }

.pct { font-weight:600; }
.pct.bom { color:#2a7a3a; }
.pct.atencao { color:var(--laranja); }
.pct.ruim { color:#b03030; }

@media print {
  .manchete { break-inside:avoid; }
  .manchete.ruim { background:none; }
  .bloco.alerta { background:none; }
}


/* ══ entrada por codigo ════════════════════════════════════════════════
   A URL virou publica e curta; o segredo agora e o codigo. Esta caixa e o
   unico ponto entre a internet e a tabela de precos de atacado. */
.cx-codigo { cursor:default; }
.cartao-codigo { background:#fff; border-radius:10px; padding:26px 28px; max-width:340px;
  width:100%; display:flex; flex-direction:column; gap:10px; cursor:default; }
.cartao-codigo h2 { margin:0; font-size:19px; }
.cartao-codigo p { margin:0; font-size:13px; color:var(--cinza); }
.cartao-codigo input { font-size:24px; letter-spacing:.12em; text-align:center;
  padding:12px; border:2px solid var(--borda); border-radius:8px; font-family:inherit;
  text-transform:uppercase; font-variant-numeric:tabular-nums; }
.cartao-codigo input:focus { outline:none; border-color:var(--laranja); }
.erro-codigo { color:#b03030; font-size:12.5px; min-height:16px; }
.erro-codigo:empty { min-height:0; }
.cartao-codigo .acoes { display:flex; gap:10px; align-items:center; margin-top:4px; }
.cartao-codigo .botao { flex:1; }
.btn-txt { background:none; border:none; color:var(--cinza); font-family:inherit;
  font-size:13px; cursor:pointer; padding:8px 4px; }
.btn-txt:hover { color:var(--preto); }

/* Tela de codigo da Julia: ocupa a pagina, nao e modal. Sem codigo nao ha nada
   atras pra ver, e modal sobre tela vazia so confunde. */
.cartao-codigo.sozinho { margin:60px auto; border:1px solid var(--borda); box-shadow:none; }
.cartao-codigo.sozinho .botao { width:100%; }