/* ==========================================================
   VENDAS PELA CAKTO — celular primeiro (360 px).
   A folha de ligar sobe de baixo no celular e vira janela no
   computador. Desligar mora abaixo do rodapé, longe do salvar.
   ========================================================== */
.vd-sec{margin-top:24px;max-width:760px}
.vd-sec h2{font-family:var(--display);font-size:17px;font-weight:700;margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vd-sec h2 small{font-family:inherit;font-weight:500;color:var(--suave);font-size:13px}
.vd-cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:16px;padding:16px;box-shadow:var(--sombra);margin-top:10px}
.vd-largo{width:100%;margin-top:12px}
.vd-mini{padding:4px 12px;min-height:34px;font-size:13px}
.vd-vazio{color:var(--suave);font-size:14px;margin:0}
.vd-aviso{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:14px;background:var(--atraso-fraco);color:var(--atraso);max-width:760px}
.vd-aviso.ok{background:var(--ok-fraco);color:var(--ok)}

/* porta de entrada */
.vd-porta{display:flex;gap:14px;align-items:flex-start}
.vd-porta h3{font-family:var(--display);font-size:16px;margin:0}
.vd-porta p{margin:2px 0 0;color:var(--suave);font-size:14px}
.vd-sinal{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px}
.vd-sinal.ruim{background:var(--atraso-fraco);color:var(--atraso)}
.vd-sinal.bom{background:var(--ok-fraco);color:var(--ok)}
.vd-sinal.medio{background:var(--marca-fraca);color:var(--marca)}
.vd-passos{margin:12px 0 0;padding:0;list-style:none;counter-reset:vdp}
.vd-passos li{counter-increment:vdp;position:relative;padding:8px 0 8px 36px;border-top:1px solid var(--linha);font-size:14px}
.vd-passos li::before{content:counter(vdp);position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:50%;
  background:var(--superficie2);border:1px solid var(--linha-forte);display:grid;place-items:center;font-size:12px;font-weight:700}
.vd-trava{margin:10px 0 0;font-size:13px;background:var(--superficie2);border-radius:10px;padding:8px 10px;color:var(--suave)}
.vd-cartao code,.vd-folha code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--superficie2);
  border:1px solid var(--linha);padding:1px 6px;border-radius:6px;word-break:break-all}
.vd-copiar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vd-ajuda{margin-top:12px}
.vd-ajuda summary{cursor:pointer;font-weight:600;color:var(--marca);font-size:14px}
.vd-ajuda>div{font-size:14px;color:var(--suave);padding-top:6px}
.vd-ajuda>div p{margin:0 0 6px}

/* números */
.vd-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.vd-num{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;padding:12px}
.vd-num b{display:block;font-family:var(--display);font-size:22px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.vd-num span{font-size:12.5px;color:var(--suave)}
.vd-num.alerta b{color:var(--atraso)}

/* linhas de produto */
.vd-prod{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--linha)}
.vd-prod:first-child{border-top:0;padding-top:0}
.vd-meio{flex:1;min-width:0}
.vd-nome{font-weight:600;overflow-wrap:anywhere}
.vd-det{font-size:13px;color:var(--suave)}
.vd-etq{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:1px 9px}
.vd-etq.aviso{background:var(--atraso-fraco);color:var(--atraso)}
.vd-etq.ok{background:var(--ok-fraco);color:var(--ok)}
.vd-etq.off{background:var(--superficie2);color:var(--suave)}

/* folha */
.vd-fundo{position:fixed;inset:0;background:rgba(5,8,14,.5);display:none;z-index:1000}
.vd-fundo.aberto{display:block}
.vd-folha{position:fixed;left:0;right:0;bottom:0;max-height:92dvh;overflow:auto;background:var(--bg);color:var(--texto);
  border-radius:20px 20px 0 0;padding:18px 16px 0;transform:translateY(105%);transition:transform .22s;visibility:hidden;z-index:1001}
.vd-folha.aberta{transform:none;visibility:visible}
@media (min-width:700px){.vd-folha{left:50%;right:auto;width:620px;margin-left:-310px;bottom:24px;border-radius:20px;max-height:88dvh}}
.vd-folha h2{font-family:var(--display);font-size:20px;margin:0}
.vd-campo{display:block;margin-top:16px}
.vd-campo>span{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.vd-campo small,.vd-fixo small{display:block;color:var(--suave);font-size:12.5px;margin-top:4px}
.vd-folha input[type=text],.vd-folha input[type=number],.vd-folha select{width:100%;font:inherit;font-size:16px;padding:11px 12px;
  border-radius:10px;border:1px solid var(--linha-forte);background:var(--superficie);color:var(--texto);min-height:46px}
.vd-fixo{background:var(--superficie2);border:1px solid var(--linha);border-radius:10px;padding:10px 12px;font-size:14px;overflow-wrap:anywhere}
.vd-chips{display:flex;gap:6px;flex-wrap:wrap}
.vd-chip{border:1px solid var(--linha-forte);background:var(--superficie);color:var(--texto);border-radius:999px;padding:7px 14px;font:inherit;font-weight:600;min-height:42px;cursor:pointer}
.vd-chip[aria-pressed="true"]{background:var(--marca);color:var(--marca-texto);border-color:var(--marca)}
.vd-outro{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px}
.vd-outro input{max-width:110px}
.vd-cons{margin-top:18px;border:2px solid var(--marca);border-radius:14px;padding:14px;background:var(--superficie)}
.vd-cons h3{font-family:var(--display);font-size:15px;margin:0 0 6px}
.vd-cons ul,.vd-caixa ul{margin:0;padding-left:18px;font-size:14px}
.vd-cons li,.vd-caixa li{margin:4px 0}
.vd-marcar{display:flex;gap:10px;align-items:flex-start;margin-top:10px;font-size:14px;background:var(--superficie2);padding:10px;border-radius:10px;cursor:pointer}
.vd-marcar input{width:20px;height:20px;margin-top:1px;flex:0 0 auto;accent-color:var(--marca)}
.vd-rodape{position:sticky;bottom:0;background:var(--bg);padding:14px 0 18px;margin-top:18px;border-top:1px solid var(--linha);display:flex;gap:10px}
.vd-rodape .btn{flex:1;min-height:46px}
.vd-zona{margin-top:22px;padding:14px 0 22px;border-top:1px dashed var(--linha-forte)}
.vd-zona summary{cursor:pointer;color:var(--atraso);font-weight:600;font-size:14px}
.vd-caixa{margin-top:10px;background:var(--atraso-fraco);border-radius:12px;padding:12px;font-size:14px}
.vd-caixa p{margin:0 0 6px}
.vd-caixa .vd-marcar{background:transparent;padding:10px 0 0}