/* Painel JuLeon. Mesma família visual dos sites: fundo claro, dourado só em ação e destaque. */
:root {
  --branco: #fff; --superficie: #f7f5f3; --tinta: #3b3635; --cinza: #5e5756; --suave: #6f6764; --linha: #e6e1dd;
  --noite: #2b2726; --dourado: #f0b512; --dourado-escuro: #a87600; --verde: #2e7d4f; --vermelho: #c0392b; --azul: #2f5d8a;
  --margem: 16px; --sombra: 0 1px 2px rgba(59, 54, 53, .05), 0 6px 18px rgba(59, 54, 53, .06);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--superficie); color: var(--tinta); font: 400 15px/1.45 Montserrat, system-ui, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, p, dl, dd, ol { margin: 0; padding: 0; }
a { color: inherit; }
img { display: block; }
.num { text-align: right; white-space: nowrap; }
.forte { font-weight: 700; }

/* botões e campos */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1.5px solid transparent; border-radius: 10px; font: 600 14px/1 Montserrat, system-ui, sans-serif; text-decoration: none; cursor: pointer; color: var(--tinta); background: none; }
.botao:disabled { opacity: .5; cursor: default; }
.botao.ouro { background: var(--dourado); border-color: var(--dourado); }
.botao.ouro:hover:not(:disabled) { background: #dfa80e; }
.botao.claro { background: var(--branco); border-color: var(--linha); }
.botao.claro:hover:not(:disabled) { border-color: var(--cinza); }
.botao.discreto { color: var(--cinza); }
.botao.largo { width: 100%; margin-top: 10px; }
:focus-visible { outline: 2px solid var(--dourado-escuro); outline-offset: 2px; }
.campo { display: grid; gap: 5px; min-width: 0; }
.campo > span { font-size: 12px; font-weight: 600; color: var(--suave); }
input:not([type="checkbox"]), select, textarea { width: 100%; min-height: 44px; padding: 9px 12px; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--branco); color: var(--tinta); font: 400 16px/1.3 Montserrat, system-ui, sans-serif; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--dourado); box-shadow: 0 0 0 3px rgba(240, 181, 18, .22); }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--dourado); margin: 0; }

/* entrada: o mesmo fundo da entrada do catálogo B2B */
.entrada { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: var(--margem); background: var(--noite); color: #f4ede2; overflow: hidden; }
.entrada::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .07; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }
.fundo-entrada { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fundo-entrada::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(46% 42% at 50% 42%, rgba(240, 181, 18, .17), rgba(240, 181, 18, 0) 70%),
  radial-gradient(60% 46% at 50% 30%, rgba(244, 237, 226, .06), rgba(244, 237, 226, 0) 72%),
  linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, .28)); }
.des { position: absolute; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #e2dbd5; opacity: .105; vector-effect: non-scaling-stroke; }
.des * { vector-effect: non-scaling-stroke; }
.des.escova { left: -5vw; top: 6vh; height: 82vh; transform: rotate(-17deg); }
.des.tesoura { right: -3vw; top: -9vh; height: 66vh; transform: rotate(23deg); }
.des.pente { right: -9vw; bottom: -3vh; width: min(46vw, 700px); transform: rotate(-13deg); opacity: .095; }
.des.presilha { left: 9vw; bottom: -2vh; width: min(26vw, 400px); transform: rotate(11deg); opacity: .09; }
.curva { position: absolute; border-radius: 50%; border: 1px solid rgba(240, 181, 18, .5); }
.curva.a { width: 92vmin; height: 92vmin; left: -50vmin; top: -52vmin; }
.curva.b { width: 108vmin; height: 108vmin; right: -60vmin; bottom: -62vmin; border-color: rgba(240, 181, 18, .42); }
.cartao-entrada { position: relative; z-index: 2; width: min(400px, 100%); display: grid; gap: 16px; padding: 28px 22px 24px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(244, 237, 226, .14); border-radius: 20px; backdrop-filter: blur(8px); }
.cartao-entrada img { margin: 0 auto; }
.cartao-entrada h1 { text-align: center; font-size: 16px; font-weight: 600; color: #f4ede2; }
.entrada .campo > span { color: rgba(244, 237, 226, .7); }
.entrada input:not([type="checkbox"]) { background: rgba(0, 0, 0, .28); border-color: rgba(244, 237, 226, .22); color: #f4ede2; }
.entrada input:-webkit-autofill { -webkit-text-fill-color: #f4ede2; box-shadow: 0 0 0 40px #38322f inset; }
.entrada :focus-visible { outline-color: var(--dourado); }
.entrada .erro { color: #ffb4a8; background: rgba(192, 57, 43, .18); }
.erro { padding: 10px 12px; border-radius: 10px; color: var(--vermelho); background: #fbeeec; font-size: 14px; }
@media (max-width: 899px) {
  .des.escova { left: -34vw; top: -13vh; height: 38vh; transform: rotate(-26deg); }
  .des.tesoura { right: -36vw; top: -15vh; height: 34vh; transform: rotate(28deg); }
  .des.pente { right: -46vw; bottom: -5vh; width: 96vw; transform: rotate(-20deg); }
  .des.presilha { display: none; }
  .curva.a { width: 78vmin; height: 78vmin; left: -46vmin; top: -44vmin; }
  .curva.b { width: 88vmin; height: 88vmin; right: -54vmin; bottom: -50vmin; }
}

/* topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 8px var(--margem); background: rgba(247, 245, 243, .95); border-bottom: 1px solid var(--linha); }
.menu { display: flex; gap: 4px; }
.menu a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--cinza); text-decoration: none; }
.menu a:hover { background: #ece8e4; }
.menu a[aria-current="page"] { background: var(--noite); color: var(--branco); }
.topo .botao, .topo .voltar { margin-left: auto; }
.voltar { font-weight: 600; font-size: 14px; text-decoration: none; }
.miolo { max-width: 1280px; margin: 0 auto; padding: 16px var(--margem) 48px; display: grid; gap: 16px; min-width: 0; }

/* resumo por canal */
.canais { display: grid; gap: 12px; }
.canal { padding: 16px; background: var(--branco); border-radius: 16px; box-shadow: var(--sombra); display: grid; gap: 10px; }
.canal h2 { font-size: 16px; font-weight: 700; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numeros div { display: grid; gap: 2px; }
.numeros b { font-size: 26px; line-height: 1; font-weight: 700; }
.numeros span { font-size: 12px; color: var(--suave); }
.numeros .destaque b { color: var(--dourado-escuro); }
.valor-mes { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 14px; }
.valor-mes span { color: var(--suave); }

/* abas e filtros */
.abas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.abas button { flex: 0 0 auto; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--linha); border-radius: 999px; background: var(--branco); color: var(--cinza); font: 600 14px/1 Montserrat, system-ui, sans-serif; cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--noite); border-color: var(--noite); color: var(--branco); }
.filtros { display: grid; gap: 10px; align-items: end; }
.mais-filtros summary { min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--cinza); cursor: pointer; }
.mais-filtros-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.mais-filtros-grade .botao { grid-column: 1 / -1; }
.contagem { min-height: 20px; font-size: 13px; color: var(--suave); }
.selecao { position: sticky; top: 66px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; background: var(--branco); border: 1.5px solid var(--dourado); border-radius: 12px; font-weight: 600; font-size: 14px; }
.vazio { display: grid; gap: 4px; padding: 44px 20px; text-align: center; background: var(--branco); border-radius: 16px; color: var(--cinza); }
.vazio strong { color: var(--tinta); font-size: 16px; }
.paginas { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; }

/* leads */
.mais-filtros-grade.tres .botao { grid-column: 1 / -1; }
.cidades { font-size: 13px; color: var(--suave); }
.cidades span { font-weight: 600; }
.tabela-leads small { display: block; color: var(--suave); font-size: 12.5px; overflow-wrap: anywhere; }
.tabela-leads .contato { font-weight: 600; white-space: nowrap; }
.tabela-pedidos.tabela-leads tr { padding: 14px; }
.tabela-leads .c-cliente b { font-weight: 600; overflow-wrap: anywhere; }
.c-acao { grid-column: 1 / -1; }
.botao.pequeno { min-height: 40px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.selo-lead { min-height: 40px; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #ece8e4; border-color: transparent; color: var(--cinza); }
.selo-lead.novo { background: var(--dourado); color: var(--noite); }
.selo-lead.contatado { background: #e3ecf5; color: var(--azul); }
.selo-lead.negociando { background: #eeeaf6; color: #54468a; }
.selo-lead.cliente { background: #e4f2ea; color: var(--verde); }
.caixa-anotacao { width: min(460px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 20px; color: var(--tinta); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.caixa-anotacao::backdrop { background: rgba(43, 39, 38, .5); }
.caixa-anotacao form { display: grid; gap: 14px; }
.caixa-anotacao h2 { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.caixa-acoes { display: flex; justify-content: flex-end; gap: 8px; }

/* selos */
.selo, .canal-rotulo { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.selo { background: #ece8e4; color: var(--cinza); }
.selo.novo { background: var(--dourado); color: var(--noite); }
.selo.em_separacao { background: #e3ecf5; color: var(--azul); }
.selo.faturado, .selo.enviado { background: #eeeaf6; color: #54468a; }
.selo.entregue { background: #e4f2ea; color: var(--verde); }
.selo.cancelado { background: #fbeeec; color: var(--vermelho); }
.canal-rotulo { border: 1px solid var(--linha); background: var(--branco); color: var(--cinza); }
.canal-rotulo.b2b { border-color: var(--noite); color: var(--noite); }

/* lista: cartões no celular, tabela no computador */
.tabela-pedidos { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabela-pedidos thead { display: none; }
.tabela-pedidos tbody { display: grid; gap: 10px; }
.tabela-pedidos tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 14px 14px 46px; background: var(--branco); border-radius: 14px; box-shadow: var(--sombra); }
.tabela-pedidos tr.novo { box-shadow: inset 3px 0 0 var(--dourado), var(--sombra); }
.tabela-pedidos td { min-width: 0; }
.tabela-pedidos td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 11px; color: var(--suave); }
.tabela-pedidos td.num { text-align: left; font-weight: 700; }
.c-marca { position: absolute; left: 14px; top: 16px; }
.c-numero a { font-weight: 700; text-decoration: none; }
.c-cliente { grid-column: 1 / -1; }
.c-cliente a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.c-cliente small { display: block; color: var(--suave); }

/* ficha */
.ficha-cabeca { display: grid; gap: 14px; }
.ficha-cabeca h1 { font-size: 26px; font-weight: 700; line-height: 1.15; margin-bottom: 8px; }
.quando { margin-left: 8px; font-size: 13px; color: var(--suave); }
.acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acoes .ouro { grid-column: 1 / -1; order: -1; }
.aviso { min-height: 20px; font-size: 13px; font-weight: 600; color: var(--verde); }
.ficha-grade { display: grid; gap: 16px; min-width: 0; }
.ficha-grade > div, .ficha-grade > aside { display: grid; gap: 16px; align-content: start; min-width: 0; }
.bloco { display: grid; gap: 10px; padding: 16px; background: var(--branco); border-radius: 16px; box-shadow: var(--sombra); min-width: 0; }
.bloco h2 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.rolagem { overflow-x: auto; }
.tabela-itens { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.tabela-itens th { padding: 6px 8px; text-align: left; font-size: 12px; color: var(--suave); border-bottom: 1px solid var(--linha); }
.tabela-itens th.num { text-align: right; }
.tabela-itens td { padding: 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela-itens small { display: block; color: var(--suave); }
.c-foto { width: 56px; }
.c-foto img { border: 1px solid var(--linha); border-radius: 8px; object-fit: contain; background: var(--branco); }
.total-ficha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--cinza); }
.total-ficha strong { font-size: 22px; color: var(--tinta); }
.obs { white-space: pre-wrap; overflow-wrap: anywhere; }
.dados { display: grid; gap: 10px; }
.dados dt { font-size: 12px; color: var(--suave); }
.dados dd { overflow-wrap: anywhere; font-weight: 500; }
.historico { list-style: none; display: grid; gap: 10px; }
.historico li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.historico span { color: var(--suave); white-space: nowrap; }

/* folha do romaneio */
#impressao { display: none; }
#impressao.visivel { display: block; padding: 16px; }
.barra-romaneios { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 8px var(--margem); background: var(--superficie); border-bottom: 1px solid var(--linha); }
.barra-romaneios .marcar { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.barra-romaneios .ouro { margin-left: auto; }
.folha { max-width: 780px; margin: 0 auto 20px; padding: 28px; background: var(--branco); color: #222; font-size: 12.5px; }
.folha-topo { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--tinta); }
.folha-topo h1 { font-size: 18px; font-weight: 700; line-height: 1.2; }
.folha-topo p { font-size: 11px; color: #555; }
.folha-numero { margin-left: auto; text-align: right; display: grid; gap: 2px; }
.folha-numero strong { font-size: 19px; }
.folha section { margin-top: 14px; }
.folha h2 { margin-bottom: 7px; padding-bottom: 3px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #555; border-bottom: 1px solid #ddd; }
.folha-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.folha-dados .larga { grid-column: 1 / -1; }
.folha-dados dt { font-size: 9.5px; color: #666; }
.folha-dados dd { font-weight: 600; overflow-wrap: anywhere; }
.folha-itens { width: 100%; border-collapse: collapse; }
.folha-itens th { padding: 5px 6px; text-align: left; font-size: 10px; background: #f3efe9; }
.folha-itens th.num { text-align: right; }
.folha-itens td { padding: 5px 6px; border-bottom: 1px solid #e4e0db; vertical-align: top; }
.folha-itens b { font-weight: 600; }
.folha-itens small { display: block; color: #666; font-size: 10px; }
.folha-itens tr { break-inside: avoid; }
.folha-itens .grupo td { padding-top: 9px; font-weight: 700; font-size: 11px; border-bottom: 1px solid #999; }
.folha-itens .conf { width: 26px; }
.caixa { display: block; width: 14px; height: 14px; border: 1.5px solid #333; border-radius: 2px; }
.folha-rodape { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; break-inside: avoid; }
.folha-rodape h2 { margin-bottom: 4px; }
.folha-obs p { white-space: pre-wrap; overflow-wrap: anywhere; }
.folha-totais { display: grid; gap: 4px; align-content: start; }
.folha-totais div { display: flex; justify-content: space-between; gap: 12px; }
.folha-totais .total { padding-top: 4px; border-top: 2px solid var(--tinta); font-size: 15px; font-weight: 700; }
.assinaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; break-inside: avoid; }
.assinaturas div { padding-top: 4px; border-top: 1px solid #333; font-size: 10px; color: #555; }

/* itens no celular: tudo visível, sem rolar para o lado */
@media (max-width: 719px) {
  .rolagem { overflow: visible; }
  .tabela-itens, .tabela-itens tbody { display: block; min-width: 0; }
  .tabela-itens thead { display: none; }
  .tabela-itens tr { display: grid; grid-template-columns: 48px auto auto 1fr; gap: 3px 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
  .tabela-itens td { padding: 0; border: 0; min-width: 0; }
  .tabela-itens td:nth-child(1) { grid-row: 1 / 3; width: 48px; }
  .tabela-itens td:nth-child(3) { grid-column: 2 / -1; grid-row: 1; }
  .tabela-itens td:nth-child(2) { grid-column: 2; grid-row: 2; color: var(--suave); }
  .tabela-itens td:nth-child(4) { grid-column: 3; grid-row: 2; text-align: left; font-weight: 700; }
  .tabela-itens td:nth-child(4)::after { content: " pç"; font-weight: 400; }
  .tabela-itens td:nth-child(5) { display: none; }
  .tabela-itens td:nth-child(6) { grid-column: 4; grid-row: 2; }
  .c-foto img { width: 44px; height: 44px; }
}
@media (min-width: 720px) {
  :root { --margem: 24px; }
  .canais { grid-template-columns: 1fr 1fr; }
  .filtros { grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); }
  .mais-filtros summary { display: none; }
  .mais-filtros-grade { grid-template-columns: 1fr 1fr 1fr auto; }
  .mais-filtros-grade .botao { grid-column: auto; }
  .mais-filtros-grade.tres { grid-template-columns: 1fr 1fr auto; }
  .mais-filtros-grade.tres .botao { grid-column: auto; }
  .ficha-cabeca { grid-template-columns: 1fr auto; align-items: start; }
  .acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .acoes .ouro { order: 0; }
}
@media (min-width: 1000px) {
  .ficha-grade { grid-template-columns: minmax(0, 1fr) 340px; }
  .tabela-pedidos { display: table; background: var(--branco); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
  .tabela-pedidos thead { display: table-header-group; }
  .tabela-pedidos tbody { display: table-row-group; }
  .tabela-pedidos tr { display: table-row; padding: 0; box-shadow: none; }
  .tabela-pedidos tr.novo { box-shadow: none; }
  .tabela-pedidos tr.novo td:first-child { box-shadow: inset 3px 0 0 var(--dourado); }
  .tabela-pedidos th { padding: 11px 12px; text-align: left; font-size: 12px; color: var(--suave); border-bottom: 1px solid var(--linha); }
  .tabela-pedidos th.num { text-align: right; }
  .tabela-pedidos td { display: table-cell; padding: 11px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
  .tabela-pedidos td[data-rotulo]::before { display: none; }
  .tabela-pedidos td.num { text-align: right; }
  .c-marca { position: static; width: 40px; }
  .tabela-pedidos.tabela-leads tr { padding: 0; }
  .c-acao { width: 1%; }
  .tabela-pedidos tbody tr:hover td { background: #fbf9f7; }
}
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  .so-tela { display: none !important; }
  #impressao { display: block !important; padding: 0 !important; }
  .folha { max-width: none; margin: 0; padding: 0; box-shadow: none; break-after: page; }
  .folha:last-child { break-after: auto; }
  .folha-itens th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}