/* Frente de caixa PetsFood. Roxo da marca é sempre #5d28f9. */
:root {
  --roxo: #5d28f9;
  --roxo-claro: #f1eefb;
  --tinta: #17132b;
  --cinza: #5f5878;
  --cinza-claro: #8e8b99;
  --borda: #e6e2f2;
  --borda-forte: #cfc8e6;
  --fundo: #f4f2f9;
  --verde: #1d6b3a;
  --ambar: #7a4b00;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #ffffff; color: var(--tinta); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #b9a4ff; outline-offset: 2px; }
kbd { font-family: inherit; font-size: 11px; font-weight: 600; color: inherit; opacity: .5; background: none; border: 0; padding: 0; margin-left: 8px; letter-spacing: .03em; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.espaco { flex-grow: 1; }

.faixa-teste { height: 22px; box-sizing: border-box; background: #ffd60a; color: #3d2600; font-size: 12px; font-weight: 800; text-align: center; padding: 3px; letter-spacing: .04em; }

/* entrada, estilo limpo */
:root { --faixa: 0px; }
body.com-faixa { --faixa: 22px; }
.tela { min-height: calc(100vh - var(--faixa)); }
.tela-branca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; background: #ffffff; }
.logo-grande { width: 170px; height: auto; }
.frase-fina { margin: 0; font-size: 22px; font-weight: 300; color: var(--cinza-claro); letter-spacing: -.01em; }
.frase-miuda { margin: 0; font-size: 13px; font-weight: 500; color: var(--cinza-claro); text-align: center; min-height: 18px; }
.frase-miuda.esquerda { text-align: left; }
.campo-codigo { width: 320px; height: 52px; border: 1px solid #dddbe3; border-radius: 12px; padding: 0 18px; font-size: 18px; font-weight: 400; letter-spacing: .3em; text-align: center; background: #ffffff; outline: none; }
.campo-codigo:focus { border-color: #b9a4ff; }
.campo-codigo::placeholder { color: #b8b6c2; font-weight: 300; letter-spacing: 0; }
.campo-codigo.errado { border-color: #e0a0a0; }

/* venda */
.tela-venda { display: flex; flex-direction: column; height: calc(100vh - var(--faixa)); background: var(--fundo); }
.topo { height: 64px; flex-shrink: 0; background: #ffffff; border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.logo-topo { width: 46px; height: auto; }
.topo-titulo { font-size: 20px; font-weight: 800; }
.pilula-vendedor { font-size: 14px; font-weight: 700; color: #3d3654; background: var(--roxo-claro); padding: 6px 14px; border-radius: 999px; border: 0; cursor: pointer; }
.topo-info { font-size: 12px; font-weight: 600; color: var(--cinza-claro); }

.bt { height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--borda-forte); background: #ffffff; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; cursor: pointer; }
.bt-roxo { background: var(--roxo); border-color: var(--roxo); color: #ffffff; font-weight: 800; }
.bt-grande { height: 50px; padding: 0 28px; font-size: 16px; }

.abas { height: 50px; flex-shrink: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 24px 0; }
.aba { border: 0; border-radius: 10px 10px 0 0; background: #e6e2f2; color: #3d3654; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.aba.ativa { background: var(--roxo); color: #ffffff; font-weight: 800; }
.aba:disabled { opacity: .55; cursor: default; }

.miolo { flex-grow: 1; min-height: 0; display: flex; gap: 18px; padding: 0 24px 16px; }
.painel { background: #ffffff; border: 1px solid var(--borda); border-radius: 0 0 18px 18px; padding: 16px 18px; }
.painel-produto { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--roxo); position: relative; }
.painel-cliente { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; align-self: flex-start; }
.cliente-nome { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

.rotulo { font-size: 13px; font-weight: 700; color: var(--cinza); }
.linha-busca { display: flex; align-items: center; gap: 10px; }
.campo-busca { flex-grow: 1; height: 56px; border: 3px solid var(--roxo); border-radius: 14px; padding: 0 16px; font-size: 19px; font-weight: 700; outline: none; background: #ffffff; }
.multiplicador { height: 56px; padding: 0 16px; border-radius: 14px; background: var(--roxo); color: #ffffff; font-size: 20px; font-weight: 800; display: flex; align-items: center; }
.dicas { margin: 0; font-size: 12px; font-weight: 500; color: var(--cinza-claro); }

.sugestoes { position: absolute; left: 18px; right: 18px; top: 112px; z-index: 5; list-style: none; margin: 0; padding: 6px; background: #ffffff; border: 1px solid var(--borda-forte); border-radius: 14px; box-shadow: 0 12px 32px rgba(23, 19, 43, .16); max-height: 440px; overflow: auto; }
.sugestoes li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.sugestoes li .s-nome { flex-grow: 1; font-size: 15px; font-weight: 600; }
.sugestoes li .s-cod { font-size: 12px; font-weight: 600; color: var(--cinza-claro); }
.sugestoes li .s-preco { font-size: 15px; font-weight: 800; white-space: nowrap; }
.sugestoes li.marcado { background: var(--roxo-claro); outline: 2px solid var(--roxo); }

.aviso { margin: 0; font-size: 14px; font-weight: 700; color: var(--ambar); background: #fff1d6; border-radius: 10px; padding: 10px 12px; }
.aviso.bom { color: var(--verde); background: #e3f5e9; }

.tabela-cab, .itens li { display: grid; grid-template-columns: 58px minmax(0, 1fr) 110px 90px 100px 88px; gap: 12px; align-items: center; }
.tabela-cab { padding: 8px 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); border-bottom: 1px solid var(--borda); }
.tabela-cab span:nth-child(n+3) { text-align: right; }
.itens { list-style: none; margin: 0; padding: 0; overflow: auto; flex-grow: 1; }
.itens li { padding: 10px 6px; border-bottom: 1px solid #efedf6; border-radius: 8px; }
.itens li.marcado { background: var(--roxo-claro); }
.itens li.novo { animation: entrou .6s ease-out; }
@keyframes entrou { from { background: #e3f5e9; } to { background: transparent; } }
.i-nome { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 15px; font-weight: 700; }
.i-nome small { font-size: 11px; font-weight: 700; color: #3d3654; background: var(--roxo-claro); border-radius: 999px; padding: 2px 9px; align-self: flex-start; }
.i-num { text-align: right; font-size: 15px; font-weight: 700; }
.i-preco { text-align: right; font-size: 14px; font-weight: 600; color: var(--cinza); }
.i-sub { text-align: right; font-size: 16px; font-weight: 800; }
.vazio { margin: 24px 0 0; text-align: center; font-size: 14px; font-weight: 500; color: var(--cinza-claro); }

.aba-aberto { width: 46px; flex-shrink: 0; border-radius: 0 0 14px 14px; background: #ffffff; border: 1px solid var(--borda); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; cursor: pointer; }
.conta-aberto { width: 26px; height: 26px; border-radius: 999px; background: #f0c36b; color: #3d2600; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.conta-aberto.zero { background: #efedf6; color: var(--cinza-claro); }
.vertical { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 800; color: var(--cinza); white-space: nowrap; }
.atalho-miudo { font-size: 10px; font-weight: 600; color: var(--cinza); opacity: .6; }

.rodape { height: 76px; flex-shrink: 0; background: #ffffff; border-top: 1px solid var(--borda); align-items: center; }
/* o total fica embaixo da lista de produtos, não no canto da tela, para o cliente enxergar */
.rotulo-total { font-size: 16px; font-weight: 700; }
.total { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }

.fundo { position: fixed; inset: 0; background: rgba(23, 19, 43, .35); z-index: 20; }
.gaveta, .resumo { position: fixed; top: 0; right: 0; height: 100vh; background: #ffffff; z-index: 21; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; box-shadow: -12px 0 32px rgba(23, 19, 43, .18); }
.gaveta { width: 330px; }
.resumo { width: 520px; }
.gaveta-cab { display: flex; align-items: center; justify-content: space-between; }
.gaveta-cab h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.lista-aberto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-aberto li { height: 58px; border-radius: 14px; border: 1px solid var(--borda); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 20px; font-weight: 800; cursor: pointer; }
.lista-aberto li small { font-size: 12px; font-weight: 600; color: var(--cinza-claro); }
.lista-aberto li.marcado { border: 3px solid var(--roxo); background: #f7f5fe; }
.resumo-itens { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); border-radius: 14px; overflow: auto; max-height: 50vh; }
.resumo-itens li { display: grid; align-items: center; grid-template-columns: 40px minmax(0, 1fr) 70px 90px; gap: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; border-top: 1px solid #efedf6; }
.resumo-itens li:first-child { border-top: 0; }
.resumo-itens li > span:nth-child(n+3) { text-align: right; }
.resumo-total { margin: 0; text-align: right; font-size: 30px; font-weight: 800; }
.aviso-etapa { margin: 0; font-size: 13px; font-weight: 600; color: var(--ambar); background: #fff1d6; border-radius: 10px; padding: 10px 12px; }

.confirma { position: fixed; z-index: 31; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 440px; background: #ffffff; border-radius: 20px; padding: 24px; box-shadow: 0 20px 48px rgba(23, 19, 43, .25); }
#confirma-fundo { z-index: 30; }
.confirma p { margin: 0 0 18px; font-size: 18px; font-weight: 700; }
.confirma-bts { display: flex; gap: 10px; justify-content: flex-end; }

.toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--tinta); color: #ffffff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; }

.foto { width: 58px; height: 58px; flex-shrink: 0; border-radius: 10px; background: #f4f2f9; border: 1px solid #efedf6; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.foto img { width: 100%; height: 100%; object-fit: contain; background: #ffffff; }
.sugestoes li .foto { width: 52px; height: 52px; }
.resumo-itens li .foto { width: 40px; height: 40px; }
.i-acoes { display: flex; gap: 6px; justify-content: flex-end; }
.bt-icone { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--borda); background: #ffffff; color: var(--cinza); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bt-icone:hover { color: var(--roxo); border-color: var(--borda-forte); }
.i-nome small.coment { background: #fff1d6; color: var(--ambar); }
.editar { width: 620px; }
.ed-titulo { margin: 0 0 6px !important; font-family: 'Fraunces', Georgia, serif; font-size: 24px !important; font-weight: 800; }
.ed-nome { margin: 0 0 16px !important; font-size: 17px !important; font-weight: 700; color: var(--cinza); }
.ed-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.editar label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--cinza); }
.editar input { height: 48px; border: 1px solid var(--borda-forte); border-radius: 10px; padding: 0 12px; font-size: 18px; font-weight: 700; color: var(--tinta); }
.editar input:focus { border: 3px solid var(--roxo); outline: none; }
.editar input[readonly] { background: #f7f6fb; color: var(--cinza); }
.ed-coment { margin-bottom: 8px; }
.ed-coment input { font-size: 15px; font-weight: 600; }
#editar-fundo { z-index: 30; }

/* cliente */
.cli-topo { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.cli-topo p { margin: 0; }
.selo-socio { font-size: 12px; font-weight: 800; color: #ffffff; background: var(--roxo); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.cartao-pontos { border-top: 1px solid #efedf6; padding-top: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.pontos-linha { display: flex; justify-content: space-between; align-items: baseline; }
.rotulo-caps { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); }
.pontos-linha b { font-size: 24px; font-weight: 800; }
.pt-vale { font-size: 14px; font-weight: 700; color: var(--cinza); }
.pt-uso { margin: 0; font-size: 14px; font-weight: 700; }
.pt-uso.bom { color: var(--verde); }
.barra { height: 10px; background: #efedf6; border-radius: 999px; overflow: hidden; }
.barra div { height: 10px; background: var(--roxo); border-radius: 999px; width: 0; transition: width .3s; }
.pt-divisa { border-top: 1px solid #efedf6; padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.pt-ganha { margin: 0; font-size: 14px; font-weight: 800; color: var(--roxo); }
.bt-leve { align-self: flex-start; height: 38px; font-size: 13px; }
.lista-clientes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.lista-clientes li { border: 1px solid var(--borda); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.lista-clientes li.marcado { border: 3px solid var(--roxo); background: #f7f5fe; padding: 10px 14px; }
.lista-clientes .lc-nome { font-size: 18px; font-weight: 800; }
.lista-clientes .lc-extra { font-size: 13px; font-weight: 700; color: #3d3654; }
.lista-clientes .lc-info { font-size: 13px; font-weight: 600; color: var(--cinza); }
.linha-bts { display: flex; align-items: center; gap: 14px; }

#busca-cliente { flex: none; }

/* 60% produto, 40% cliente (pedido do Rafael, 30/09) */
.miolo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 46px; }
.painel-cliente { width: auto; }
.rodape { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 46px; gap: 18px; padding: 0 24px; }
.rodape-venda { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* cartão de pontos: o número é o herói, o valor em reais é o convite */
.cartao-pontos { border-top: 0; padding: 0; margin-top: 6px; gap: 10px; }
.pt-heroi { background: var(--roxo); color: #ffffff; border-radius: 16px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.pt-heroi .pt-num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pt-heroi .pt-rot { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; opacity: .9; }
.pt-heroi .pt-reais { margin-left: auto; background: #ffffff; color: var(--roxo); border-radius: 12px; padding: 8px 12px; text-align: center; line-height: 1.1; }
.pt-reais small { display: block; font-size: 11px; font-weight: 700; color: var(--cinza); }
.pt-reais b { font-size: 22px; font-weight: 800; }
.pt-status { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin: 0; }
.pt-status.bom { color: var(--verde); }
.pt-status .ic { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #efedf6; color: var(--cinza); flex-shrink: 0; }
.pt-status.bom .ic { background: #e3f5e9; color: var(--verde); }
.pt-ganha-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--roxo-claro); border-radius: 12px; padding: 10px 14px; }
.pt-ganha-chip span { font-size: 14px; font-weight: 700; color: #3d3654; }
.pt-ganha-chip b { font-size: 20px; font-weight: 800; color: var(--roxo); white-space: nowrap; }

/* pets, cadastro e ficha */
.cli-pets { display: flex; flex-wrap: wrap; gap: 8px; }
.pet-chip { border: 1px solid var(--borda-forte); background: #ffffff; border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; }
.pet-chip b { font-size: 15px; font-weight: 800; }
.pet-chip span { font-size: 12px; font-weight: 600; color: var(--cinza); }
.pet-chip.novo { border-style: dashed; color: var(--roxo); justify-content: center; font-size: 13px; font-weight: 800; }
.titulo-sec { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
#painel-cadastro label, .ficha label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--cinza); }
#painel-cadastro input, #painel-cadastro select, .ficha input, .ficha select { height: 46px; border: 1px solid var(--borda-forte); border-radius: 10px; padding: 0 12px; font-size: 16px; font-weight: 600; color: var(--tinta); background: #ffffff; }
#painel-cadastro input:focus, #painel-cadastro select:focus, .ficha input:focus, .ficha select:focus { border: 3px solid var(--roxo); outline: none; }
.cad-pets { display: flex; flex-direction: column; gap: 8px; }
.cad-pet { display: grid; grid-template-columns: 34px minmax(0, 1fr) 120px 120px 100px 40px; gap: 10px; align-items: end; }
.cad-pet .num { height: 46px; border-radius: 10px; background: var(--roxo-claro); color: var(--roxo); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ficha { width: 760px; }
.ficha-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin: 10px 0 14px; }
.f-racao { margin: 4px 0 8px !important; font-size: 15px !important; font-weight: 700; }
.f-sugestoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sug-racao { border: 2px solid #1f9d55; background: #e9f8ef; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; animation: pisca 1.4s ease-in-out infinite; }
.sug-racao div { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.sug-racao small { font-size: 12px; font-weight: 700; color: var(--verde); }
.sug-racao b { font-size: 14px; font-weight: 800; }
.sug-racao button { height: 38px; padding: 0 14px; border-radius: 10px; border: 0; background: #1f9d55; color: #ffffff; font-weight: 800; cursor: pointer; white-space: nowrap; }
@keyframes pisca { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .45); } 50% { box-shadow: 0 0 0 6px rgba(31, 157, 85, 0); } }
#ficha-fundo { z-index: 30; }

/* pagamento */
#painel-pagamento:focus { outline: none; }
.grade-formas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.forma { position: relative; height: 74px; border-radius: 12px; border: 1px solid var(--borda-forte); background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--tinta); cursor: pointer; }
.forma.usada { border: 3px solid var(--roxo); background: var(--roxo-claro); }
.forma .tecla { position: absolute; top: 6px; left: 8px; font-size: 11px; font-weight: 700; opacity: .5; }
.nota-fiado { align-self: flex-start; border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--cinza-claro); cursor: pointer; }
.usar-pontos { display: flex; align-items: center; gap: 12px; background: var(--roxo-claro); border-radius: 14px; padding: 12px 14px; }
.usar-pontos div { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.usar-pontos b { font-size: 15px; font-weight: 800; color: #3a1aa8; }
.usar-pontos span { font-size: 12px; font-weight: 600; color: #3d3654; }
.usar-pontos.ativo { background: #e3f5e9; }
.usar-pontos.ativo b { color: var(--verde); }
.parcelas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.parcela { display: grid; grid-template-columns: minmax(0, 1fr) 150px 170px 120px 40px; gap: 10px; align-items: center; }
.parcela .p-nome { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; }
.parcela label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--cinza); }
.parcela input { height: 44px; border: 1px solid var(--borda-forte); border-radius: 10px; padding: 0 12px; font-size: 17px; font-weight: 800; text-align: right; color: var(--tinta); }
.parcela input:focus { border: 3px solid var(--roxo); outline: none; }
.parcela .p-troco { font-size: 15px; font-weight: 800; color: var(--verde); text-align: right; }
.pag-falta { margin: 0; font-size: 16px; font-weight: 800; }
.pag-falta.falta { color: var(--ambar); }
.pag-falta.ok { color: var(--verde); }
/* resumo */
.resumo-contas { display: flex; flex-direction: column; gap: 4px; }
.resumo-contas div { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.resumo-contas .desc { color: var(--roxo); font-weight: 700; }
.resumo-pontos { margin: 0; background: var(--roxo-claro); color: #3a1aa8; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 700; }
.resumo-opcoes { display: flex; gap: 10px; }
.resumo-opcoes label { border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #3d3654; cursor: pointer; }
.resumo-opcoes .op-grande { flex-grow: 1; }
.resumo-opcoes .op-pequena { font-size: 13px; color: var(--cinza); }
.resumo-opcoes input { width: 20px; height: 20px; accent-color: var(--roxo); margin: 0; }
.resumo-feito { background: #e3f5e9; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: #17432a; }
.resumo-feito b { font-size: 16px; }
.resumo-feito ul { margin: 0; padding-left: 18px; }
.i-preco s { color: var(--cinza-claro); font-weight: 600; margin-right: 6px; }

.parcela .p-valor { display: block; height: 44px; line-height: 44px; font-size: 18px; font-weight: 800; color: var(--tinta); text-align: right; padding-right: 12px; }
.parcela .p-troco.falta { color: var(--ambar); }

.desconto-area { display: grid; grid-template-columns: 170px 90px minmax(0, 1fr); gap: 10px; align-items: end; border: 1px dashed var(--borda-forte); border-radius: 14px; padding: 10px 12px; }
.desconto-area label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--cinza); }
.desconto-area input { height: 40px; border: 1px solid var(--borda-forte); border-radius: 10px; padding: 0 10px; font-size: 16px; font-weight: 800; color: var(--tinta); }
.desconto-area #desc-valor, .desconto-area #desc-pct { text-align: right; }
.desconto-area input:focus { border: 3px solid var(--roxo); outline: none; }
.desconto-area input:disabled { background: #f7f6fb; color: var(--cinza-claro); }
.desconto-area #desc-nota { grid-column: 1 / -1; }
.desconto-area.ativo { border-style: solid; border-color: var(--roxo); background: #faf9fe; }

/* promoções na venda */
.promo-bloco { border: 2px solid #1f9d55; background: #e9f8ef; border-radius: 14px; padding: 8px 6px 4px; margin: 6px 0; animation: pisca 1.6s ease-in-out infinite; }
.promo-cab { display: flex; align-items: center; gap: 10px; padding: 0 6px 4px; }
.promo-cab .selo { font-size: 11px; font-weight: 800; color: #ffffff; background: #1f9d55; padding: 3px 9px; border-radius: 999px; }
.promo-cab b { font-size: 14px; font-weight: 800; color: #17432a; }
.promo-cab .eco { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--verde); }
.promo-bloco .linha-item { border-bottom: 0; }
.itens .linha-item.marcado { background: var(--roxo-claro); }
.i-nome small.faltam { background: #fff1d6; color: var(--ambar); }
.total-promo { font-size: 14px; font-weight: 800; color: var(--verde); }
.bt-leve-topo { height: 40px; font-size: 14px; }
/* painel de promoções */
.pr-miolo { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 18px; padding: 16px 24px; }
.pr-lista, .pr-editor { border-radius: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.pr-cab { display: flex; align-items: center; justify-content: space-between; }
.pr-itens { list-style: none; margin: 0; padding: 0; }
.pr-itens li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 170px 110px 120px; gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid #efedf6; cursor: pointer; }
.pr-itens li.aberta { background: var(--roxo-claro); border-radius: 10px; }
.pr-itens b { font-size: 15px; font-weight: 800; }
.pr-itens span { font-size: 13px; font-weight: 600; color: var(--cinza); }
.chave { width: 46px; height: 26px; border-radius: 999px; border: 0; background: #cfc8e6; position: relative; cursor: pointer; }
.chave::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #ffffff; transition: left .15s; }
.chave.ligada { background: #1f9d55; }
.chave.ligada::after { left: 23px; }
.pr-editor label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--cinza); }
.pr-editor input { height: 42px; border: 1px solid var(--borda-forte); border-radius: 10px; padding: 0 12px; font-size: 15px; font-weight: 700; color: var(--tinta); }
.pr-editor input:focus { border: 3px solid var(--roxo); outline: none; }
.pr-ed-titulo { margin: 0; font-size: 18px; font-weight: 800; }
.pr-linha { display: grid; grid-template-columns: 80px 130px minmax(0, 1fr); gap: 10px; }
.pr-linha #pr-qtd { text-align: center; }
.pr-linha #pr-preco { text-align: right; }
.pr-achados-cab { display: flex; justify-content: space-between; align-items: center; }
.pr-todos { color: var(--roxo) !important; font-weight: 800 !important; font-size: 13px !important; }
.pr-achados, .pr-escolhidos { list-style: none; margin: 0; padding: 0; border: 1px solid #efedf6; border-radius: 12px; max-height: 170px; overflow: auto; }
.pr-achados li, .pr-escolhidos li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; border-bottom: 1px solid #f4f2f9; cursor: pointer; }
.pr-achados li.ja { color: var(--cinza-claro); }
.pr-achados li .mais { margin-left: auto; color: var(--roxo); font-weight: 800; }
.pr-escolhidos li .x { margin-left: auto; color: var(--cinza); font-weight: 800; border: 0; background: none; cursor: pointer; }
.pr-conta { margin: 0; font-size: 13px; font-weight: 700; color: var(--verde); }
.pr-bts { display: flex; gap: 10px; }
/* o bloco da promoção é um li da lista, mas não é linha de tabela */
.itens li.promo-bloco { display: block; padding: 8px 6px 4px; }
.promo-bloco .itens { overflow: visible; flex-grow: 0; }
.promo-bloco .linha-item { background: transparent; }

.rodape-venda .bt { white-space: nowrap; }
.total-caixa { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.total-linha { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.total-promo { white-space: nowrap; font-size: 13px; }

/* a lista rola dentro do quadro e nunca passa por baixo do rodapé */
.painel-produto { min-height: 0; }
#itens { min-height: 0; }

.cad-dup { display: flex; align-items: center; gap: 12px; background: #fff1d6; border: 2px solid #f0c36b; border-radius: 14px; padding: 12px 14px; }
.cad-dup div { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.cad-dup b { font-size: 15px; font-weight: 800; color: #5c3a00; }
.cad-dup span { font-size: 13px; font-weight: 600; color: #7a4b00; }

/* oferta do Bling (amarelo, igual à etiqueta de oferta da gôndola) e caixa fechada (azul) */
.i-nome small.oferta, .sugestoes small.oferta { background: #ffd60a; color: #3d2600; font-weight: 800; }
.sugestoes .s-nome small.oferta { display: inline-block; margin-left: 8px; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.i-nome small.caixa-info { background: #e6eeff; color: #1d3f8f; border-radius: 8px; }
.caixa-troca { align-self: flex-start; display: flex; align-items: center; gap: 10px; border: 0; background: #2f5bd3; color: #ffffff; border-radius: 10px; padding: 5px 5px 5px 12px; font-size: 12px; font-weight: 800; cursor: pointer; text-align: left; }
.caixa-troca b { background: #ffffff; color: #2f5bd3; padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
/* grupo de promoção: uma linha que abre e fecha */
.promo-cab { width: 100%; border: 0; background: none; padding: 2px 6px 4px; display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto 70px 90px auto; gap: 10px; align-items: center; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.promo-cab .seta { width: 10px; height: 10px; border-right: 2.5px solid #1d6b3a; border-bottom: 2.5px solid #1d6b3a; transform: rotate(-45deg); margin-left: 2px; transition: transform .15s; }
.promo-bloco.aberto .promo-cab .seta { transform: rotate(45deg); }
.promo-cab .fotos { display: flex; }
.promo-cab .fotos .foto { width: 30px; height: 30px; border-radius: 8px; margin-left: -8px; border: 2px solid #e9f8ef; }
.promo-cab .qtd { text-align: right; font-size: 14px; font-weight: 800; }
.promo-cab .val { text-align: right; font-size: 16px; font-weight: 800; }
.promo-cab .eco { margin-left: 0; }
.promo-bloco { padding: 8px 6px; }

/* convite do Consumidor Final: pontos que ganharia e Incluir cliente (01/10) */
.convite { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.convite[hidden], .cv-selo[hidden], .cv-lista li[hidden] { display: none; }
.cv-selo { background: var(--roxo); color: #ffffff; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.cv-num { width: 66px; height: 66px; flex-shrink: 0; border-radius: 999px; background: #ffd21f; color: #17132b; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; animation: cv-sobe 2.4s ease-in-out infinite; }
.cv-num b { font-size: 24px; font-weight: 800; }
.cv-num small { font-size: 9px; font-weight: 800; text-transform: uppercase; }
@keyframes cv-sobe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.cv-txt { display: flex; flex-direction: column; gap: 3px; }
.cv-txt b { font-size: 16px; font-weight: 800; }
.cv-txt span { font-size: 13px; font-weight: 600; opacity: .88; }
.cv-tit { margin: 2px 0 0; font-size: 11px; font-weight: 800; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; }
.cv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cv-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; }
.cv-ic { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: var(--roxo-claro); color: var(--roxo); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.cv-ic.amarelo { background: #fff6cf; color: #7a4b00; }
.cv-ic.verde { background: #e9f8ef; color: #1d6b3a; }
.cv-bt { height: 48px; border: 0; border-radius: 12px; background: #1f9d55; color: #ffffff; font-size: 16px; font-weight: 800; justify-content: center; }

/* endereço (01/10): bloco do cadastro e do Completar; aviso no painel do cliente */
.end-bloco { border: 2px solid var(--roxo); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: #fbfaff; }
.end-bloco.desligado { border-color: var(--borda-forte); background: #f7f6fb; }
.end-bloco.desligado .end-l1, .end-bloco.desligado .end-l2 { opacity: .45; }
.end-topo { display: flex; align-items: center; gap: 8px; }
.end-tit { font-size: 13px; font-weight: 800; color: var(--roxo); letter-spacing: .03em; text-transform: uppercase; }
.end-obr { font-size: 11px; font-weight: 700; color: #c0392b; }
.end-dica { font-size: 11px; color: var(--cinza); }
.end-l1 { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 14px; }
.end-l2 { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) 170px; gap: 10px 14px; }
.end-msg { margin: 0; min-height: 0; }
.end-msg:empty { display: none; }
.end-msg.bom { color: var(--verde); font-weight: 700; }
.end-naoquis { flex-direction: row !important; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #3d3654; cursor: pointer; }
.end-naoquis input { width: 18px; height: 18px; margin: 0; }
#end-modal .end-bloco { border: 0; padding: 0; background: none; margin: 10px 0 14px; }
#end-modal .end-dica, #end-modal .end-obr { display: none; }
.cli-end { font-size: 13px; font-weight: 600; color: #3d3654; }
.cli-end[hidden] { display: none; }
.cli-end.carregando { color: var(--cinza); }
.cli-end.ok b { font-weight: 800; color: var(--cinza); }
/* com o endereço o cadastro passou da altura da tela: ele rola por dentro, o rodapé fica no lugar */
#painel-cadastro { overflow-y: auto; min-height: 0; }
.cli-end.falta { display: flex; align-items: center; gap: 10px; background: #fff1d6; border: 2px solid #f0c36b; border-radius: 12px; padding: 10px 12px; }
.cli-end.falta div { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.cli-end.falta b { font-size: 14px; font-weight: 800; color: #5c3a00; }
.cli-end.falta span { font-size: 12px; font-weight: 600; color: #7a4b00; }
.cli-end.falta .bt { height: 36px; padding: 0 14px; font-size: 13px; }

/* editar cadastro (Alt+A, 02/10) */
.cli-bts { display: flex; gap: 10px; flex-wrap: wrap; }
.ec-modal { width: 820px; max-height: 92vh; overflow-y: auto; }
.ec-modal .grade-2 { margin: 10px 0 12px; }
.ec-modal label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--cinza); }
.ec-modal .end-bloco { margin-bottom: 10px; }
.ec-modal .end-obr { display: none; }
.ec-nome-bling { display: flex; flex-direction: column; gap: 2px; background: #fff1d6; border: 2px solid #f0c36b; border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.ec-nome-bling[hidden] { display: none; }
.ec-nome-bling b { font-size: 13px; color: #5c3a00; }
.ec-nome-bling span { font-size: 12px; font-weight: 600; color: #7a4b00; }
.ec-modal p.frase-miuda { font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.ec-modal p.aviso { font-size: 14px; margin: 0 0 12px; }

/* vários endereços no Editar cadastro (02/10, quadro 16) */
.ec-lista-tit { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px !important; }
.ec-lista-tit[hidden] { display: none; }
.ec-lista-tit b { font-size: 13px; font-weight: 800; color: var(--roxo); letter-spacing: .03em; text-transform: uppercase; }
.ec-lista-tit span { font-size: 11px; font-weight: 600; color: var(--cinza); }
.ec-lista { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.ec-lista:empty { display: none; }
.ec-card { border: 1px solid var(--borda); border-radius: 12px; padding: 9px 12px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; cursor: pointer; background: #fff; }
.ec-card.sel { border: 2px solid var(--roxo); background: #fbfaff; }
.ec-radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--borda-forte); background: #fff; padding: 0; cursor: pointer; }
.ec-radio.on { border: 6px solid var(--roxo); }
.ec-tx { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; }
.ec-tx b { font-weight: 800; }
.ec-tx small { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--cinza); }
.ec-tag { font-size: 10px; font-weight: 800; color: #fff; background: #1f9d55; padding: 2px 8px; border-radius: 999px; }
.ec-acao { font-size: 12px; font-weight: 700; color: var(--cinza); }
.ec-card.sel .ec-acao { color: var(--roxo); font-weight: 800; }
.ec-novo { align-self: flex-start; border: 0; background: none; color: var(--roxo); font-size: 13px; font-weight: 800; cursor: pointer; padding: 2px 4px; }
.ec-editando { margin: 0 0 6px !important; font-size: 12px !important; font-weight: 800 !important; color: var(--cinza); text-transform: uppercase; letter-spacing: .03em; }
.ec-modal p.ec-bling-regra { margin-top: -2px; }

/* cliente fora do Ponto Animal: some o cartão, fica só o aviso (02/10) */
.cartao-pontos.fora > :not(.pt-fora) { display: none !important; }
.pt-fora { margin: 0; font-size: 14px; font-weight: 700; color: #5f5878; background: #f1eefb; border-radius: 12px; padding: 12px 14px; }
.pt-fora[hidden] { display: none; }

/* dinheiro da gaveta (Alt+., 03/10) e link do painel do dono */
.link-dono { font-size: 12px; font-weight: 700; color: var(--cinza); text-decoration: none; margin-right: 4px; }
.link-dono:hover { color: var(--roxo); text-decoration: underline; }
.gv-modal { width: 480px; }
.gv-modal label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--cinza); margin-bottom: 10px; }
.gv-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.gv-tipo { height: 46px; border-radius: 12px; border: 1px solid var(--borda-forte); background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.gv-tipo.on[data-tipo="retirada"] { border: 2px solid #b3261e; background: #fdecea; color: #b3261e; font-weight: 800; }
.gv-tipo.on[data-tipo="reforco"] { border: 2px solid #1d6b3a; background: #e9f8ef; color: #1d6b3a; font-weight: 800; }
.gv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.gv-chips button { border: 0; font-size: 12px; font-weight: 700; background: var(--roxo-claro); color: var(--roxo); padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.gv-modal p.frase-miuda { font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.gv-modal p.aviso { font-size: 14px; margin: 0 0 12px; }

/* pedido lançado (03/10, quadro 19): roda uma vez, 1,4 s */
.lancado { position: fixed; inset: 0; z-index: 1000; background: rgba(23, 19, 43, .35); display: flex; align-items: center; justify-content: center; }
.lancado[hidden] { display: none; }
.lc-cartao { min-width: 420px; max-width: 90vw; background: #fff; border-radius: 28px; padding: 34px 30px 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 30px 60px rgba(23, 19, 43, .3); }
.lc-icone { position: relative; width: 112px; height: 112px; }
.lc-icone svg { position: relative; }
.lc-onda { position: absolute; inset: 0; border-radius: 50%; background: #1f9d55; opacity: 0; }
.lc-risco { stroke-dasharray: 60; stroke-dashoffset: 60; }
.lc-titulo { text-align: center; white-space: nowrap; margin: 6px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 32px; font-weight: 800; }
.lc-sub { text-align: center; margin: 0; font-size: 16px; font-weight: 700; color: var(--cinza); }
.lc-pontos { margin: 0; font-size: 14px; font-weight: 700; color: #1d6b3a; background: #e9f8ef; padding: 6px 14px; border-radius: 999px; }
.lc-pontos[hidden] { display: none; }
.lancado.rodando { animation: lc-fundo 1.4s ease-out both; }
.lancado.rodando .lc-cartao { animation: lc-cartao 1.4s cubic-bezier(.2, .9, .3, 1.2) both; }
.lancado.rodando .lc-risco { animation: lc-risco 1.4s ease-out both; }
.lancado.rodando .lc-onda { animation: lc-onda 1.4s ease-out both; }
@keyframes lc-fundo { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lc-cartao { 0% { transform: scale(.6); opacity: 0; } 14% { transform: scale(1.06); opacity: 1; } 24% { transform: scale(1); } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.96); opacity: 0; } }
@keyframes lc-risco { 0%, 16% { stroke-dashoffset: 60; } 38%, 100% { stroke-dashoffset: 0; } }
@keyframes lc-onda { 0%, 12% { transform: scale(.8); opacity: .6; } 55%, 100% { transform: scale(1.7); opacity: 0; } }

/* encaixado na moldura do site (painel único): o menu da moldura já tem a logo e o Painel ADM */
.embutido #bt-dono, .embutido .logo-topo { display: none; }

/* endereço opcional no cadastro (05/10) */
#cad-end .end-obr { color: var(--cinza); }

/* tela VENDAS (Alt+P, 05/10) */
.vd-periodos { display: flex; gap: 6px; margin-left: 10px; }
.vd-per { border: 0; font: inherit; font-size: 12px; font-weight: 700; background: var(--roxo-claro); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.vd-per.on { background: var(--tinta); color: #fff; font-weight: 800; }
#vd-busca { height: 40px; width: 300px; border: 2px solid var(--roxo); border-radius: 10px; padding: 0 12px; font-size: 14px; margin-right: 8px; }
.vd-atendentes { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 20px 0; flex-wrap: wrap; }
.vd-atendentes .vd-at-tit { font-size: 11px; font-weight: 800; color: var(--cinza, #5f5878); letter-spacing: .04em; margin-right: 4px; }
.vd-at { border: 1px solid #e6e2f2; background: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.vd-at small { font-size: 11px; color: #8a83a3; font-weight: 700; margin-left: 5px; }
.vd-at.on { background: var(--roxo, #5d28f9); border-color: var(--roxo, #5d28f9); color: #fff; }
.vd-at.on small { color: #e3dbff; }
.vd-miolo { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; padding: 16px 20px; }
.vd-lista { background: #fff; border-radius: 16px; padding: 12px 10px; display: flex; flex-direction: column; min-height: 0; }
.vd-lista ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex-grow: 1; }
.vd-ln { display: grid; grid-template-columns: 60px 80px minmax(0, 1fr) 150px 100px 90px; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; font-size: 13px; cursor: pointer; }
.vd-ln.sel { background: var(--roxo-claro); outline: 2px solid var(--roxo); }
.vd-cab { font-size: 10px; font-weight: 800; color: var(--cinza); letter-spacing: .04em; padding-bottom: 4px; cursor: default; }
.vd-ln .r { text-align: right; }
.vd-tag { margin-left: 6px; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #efedf6; color: #3d3654; }
.vd-tag.verde { background: #e9f8ef; color: #1d6b3a; } .vd-tag.roxo { background: var(--roxo-claro); color: var(--roxo); } .vd-tag.amarelo { background: #fff1d6; color: #7a4b00; }
.vd-rodape { margin-top: 6px; padding: 0 14px; }
.vd-detalhe { background: #fff; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.vd-det-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vd-det-num { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 800; }
.vd-det-cli { margin: 0; font-size: 14px; font-weight: 700; }
.vd-det-itens { border-top: 1px solid #efedf6; padding-top: 8px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.vd-det-ln { display: flex; justify-content: space-between; gap: 10px; }
.vd-det-ln.cinza { color: var(--cinza); }
.vd-det-tot { font-size: 15px; border-top: 1px solid #efedf6; padding-top: 6px; }
.vd-det-pts { margin: 0; font-size: 12px; font-weight: 700; color: var(--verde); }
.vd-det-bts { display: flex; gap: 8px; }
.vd-det-bts .bt-roxo { flex-grow: 1; justify-content: center; }
a.bt { text-decoration: none; color: inherit; }

/* fotos no detalhe da venda (05/10) */
.vd-det-item { align-items: center; padding: 6px 0; border-bottom: 1px solid #f4f2f9; }
.vd-det-item .foto { width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px; background: #f4f2f9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vd-det-item .foto img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.vd-det-txt { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vd-det-txt b { font-size: 13px; font-weight: 700; }
.vd-det-txt small { font-size: 12px; color: var(--cinza); }

/* em aberto de todos (05/10, quadro 26) */
.outros-tit { margin: 12px 0 4px; font-size: 11px; font-weight: 800; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; }
.outros-tit[hidden] { display: none; }
.lista-outros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-outros li.outro { border: 1px dashed var(--borda-forte); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.lista-outros li.outro div { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-outros li.outro b { font-size: 14px; }
.lista-outros li.outro small { font-size: 11px; font-weight: 600; color: var(--cinza); }

/* ENTREGA no pagamento (05/10, quadro 23) */
.entrega-area { border: 1px solid var(--borda-forte); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.entrega-area.ligada { border: 2px solid var(--roxo); background: #fbfaff; }
.ent-topo { display: flex; align-items: center; gap: 10px; }
.ent-topo b { font-size: 15px; }
.ent-chave { width: 44px; height: 26px; border-radius: 999px; border: 0; background: #d9d4ea; position: relative; cursor: pointer; flex-shrink: 0; padding: 0; }
.ent-chave span { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.entrega-area.ligada .ent-chave { background: var(--roxo); }
.entrega-area.ligada .ent-chave span { left: 21px; }
.ent-selo { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #e9f8ef; color: #1d6b3a; }
.ent-selo.amarelo { background: #fff4d6; color: #5c3a00; }
.ent-selo.cinza { background: var(--roxo-claro); color: var(--cinza); }
.ent-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; align-items: end; }
.ent-end { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ent-rot, .ent-taxa { font-size: 11px; font-weight: 800; color: var(--cinza); }
.ent-end-txt { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.ent-link { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--roxo); cursor: pointer; }
.ent-taxa { display: flex; flex-direction: column; gap: 4px; }
.ent-taxa input { height: 40px; border: 1px solid var(--borda-forte); border-radius: 10px; padding: 0 10px; font-size: 16px; font-weight: 800; color: var(--tinta); text-align: right; }
.ent-aviso { margin: 0; font-size: 13px; font-weight: 700; color: #5c3a00; background: #fff4d6; border-radius: 10px; padding: 8px 10px; }

/* "Carregando..." (05/10): aparece quando o servidor demora mais de 1/4 de segundo */
.carregando { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.carregando[hidden] { display: none; }
.carregando-barra { display: none; }
.carregando-selo { display: inline-flex; align-items: center; gap: 10px; background: var(--tinta); color: #fff; font-size: 15px; font-weight: 800; padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 30px rgba(23,19,43,.25); }
.carregando-roda { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: carregando-gira .6s linear infinite; }
@keyframes carregando-anda { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes carregando-gira { to { transform: rotate(360deg); } }
.ent-opcoes { display: flex; gap: 6px; flex-wrap: wrap; }
.ent-op { border: 1px solid var(--borda-forte); background: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.ent-op.on { background: var(--roxo); border-color: var(--roxo); color: #fff; }
#painel-pagamento { overflow-y: auto; min-height: 0; }

/* pontos da compra em destaque e a faixa da regra (quadro 28, 05/10) */
.pt-ganha-card { background: var(--roxo-claro); border-radius: 16px; padding: 12px 18px 14px; display: flex; flex-direction: column; align-items: flex-start; }
.pt-ganha-rot { font-size: 15px; font-weight: 800; color: #3d3654; }
.pt-ganha-num { display: flex; align-items: baseline; gap: 10px; color: var(--roxo); }
.pt-ganha-num b { font-size: 88px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.pt-ganha-num span { font-size: 24px; font-weight: 800; }
.pt-ganha-soc { font-size: 13px; font-weight: 700; color: var(--cinza); margin-top: 2px; }
.pt-faixa { display: flex; align-items: center; gap: 12px; background: #fff4d6; border: 2px solid #f0c36b; border-radius: 14px; padding: 10px 14px; color: #5c3a00; }
.pt-faixa .ic { width: 34px; height: 34px; border-radius: 50%; background: #f0c36b; color: #5c3a00; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.pt-faixa b { font-size: 16px; display: block; }
.pt-faixa div span { font-size: 13px; font-weight: 600; }
.pt-faixa.bom { background: #e9f8ef; border-color: #8fd3a6; color: #1d6b3a; }
.pt-faixa.bom .ic { background: #8fd3a6; color: #1d6b3a; }

/* quadro 29 (05/10): de onde veio cada endereço, CEP pela rua, Bling opcional */
.ec-orig { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }
.ec-orig.app { background: var(--roxo-claro); color: var(--roxo); }
.ec-orig.bling { background: #e8f1ff; color: #1f4fa8; }
.ec-orig.kommo { background: #e9f8ef; color: #1d6b3a; }
.ec-semcep { color: #b54708; font-weight: 800; }
.end-sug { display: flex; flex-direction: column; gap: 6px; }
.end-sug[hidden] { display: none; }
.end-sug > span { font-size: 12px; font-weight: 700; color: #3d3654; }
.end-sug-l { display: flex; gap: 6px; flex-wrap: wrap; }
.end-sug-l button { border: 1px solid var(--borda-forte); background: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; text-align: left; }
.end-sug-l button:hover, .end-sug-l button:focus { border-color: var(--roxo); outline: none; }
.ec-bling-ok { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e6e2f2; border-radius: 12px; padding: 10px 12px; font-size: 13px; cursor: pointer; }
.ec-bling-ok input { width: 18px; height: 18px; accent-color: var(--roxo); margin: 1px 0 0; flex-shrink: 0; }
.ec-bling-ok span { display: flex; flex-direction: column; gap: 2px; }
.ec-bling-ok small { font-size: 12px; color: var(--cinza); }
.ec-editando-l { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ec-apelido { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--cinza); }
.ec-apelido input { height: 34px; width: 200px; border: 1px solid var(--borda-forte); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 700; color: var(--tinta); }