:root {
  --vinho: #6b1f33;
  --vinho-2: #8a2a44;
  --fundo: #f7f3f1;
  --card: #fff;
  --texto: #2b1d21;
  --suave: #7a6a6e;
  --linha: #ece4e1;
  --verde: #1f7a4d;
  --verde-bg: #e6f4ec;
  --amarelo: #8a6100;
  --amarelo-bg: #fff4d6;
  --vermelho: #b3261e;
  --raio: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--vinho); }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }

.topo { background: var(--vinho); color: #fff; }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.marca { color: #fff; text-decoration: none; font-weight: 700; }
.sair { color: #f3d9df; font-size: 14px; text-decoration: none; }
main.wrap { padding-top: 16px; padding-bottom: 56px; }

h1 { font-size: 22px; margin: 4px 0 12px; }
h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .7px; color: var(--suave);
  margin: 28px 0 10px; display: flex; align-items: center; gap: 8px;
}
.nota { color: var(--suave); font-size: 13px; margin: 6px 0 0; }
.centro { text-align: center; }
.voltar { margin: 0 0 8px; font-size: 14px; }
.voltar a { text-decoration: none; }
.vinho-txt { color: var(--vinho); font-weight: 700; }
.verde-txt { color: var(--verde); font-weight: 700; }

.card { background: var(--card); border-radius: var(--raio); padding: 16px; box-shadow: 0 1px 2px rgba(60,20,30,.06), 0 0 0 1px var(--linha); }
.card.sem-pad { padding: 0; overflow: hidden; }

/* saldo */
.saldo { text-align: center; padding: 22px 16px; }
.saldo .ola { margin: 0 0 10px; font-size: 17px; }
.saldo .rotulo { margin: 0; color: var(--suave); font-size: 13px; text-transform: uppercase; letter-spacing: .7px; }
.saldo .valor { margin: 4px 0 0; font-size: 40px; font-weight: 800; color: var(--vinho); font-variant-numeric: tabular-nums; line-height: 1.15; }
.saldo.ok .valor { color: var(--verde); }
.pix { margin-top: 16px; background: var(--fundo); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.pix small { color: var(--suave); }
.pix strong { word-break: break-all; margin-bottom: 4px; }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px;
  background: var(--vinho); color: #fff; font: inherit; font-weight: 600; font-size: 15px; padding: 10px 14px;
  text-decoration: none; cursor: pointer; min-height: 46px; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn.sec { background: #fff; color: var(--vinho); box-shadow: inset 0 0 0 1.5px var(--vinho); }
.btn.verde { background: #1f9d57; }
.btn.perigo { background: #fff; color: var(--vermelho); box-shadow: inset 0 0 0 1.5px var(--vermelho); }
.btn.bloco { width: 100%; }
.btn.peq { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.link-btn { background: none; border: 0; color: var(--vinho); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 0; cursor: pointer; }
.x { background: none; border: 0; color: var(--suave); font-size: 16px; cursor: pointer; padding: 6px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.topo-acoes { margin: 0 0 14px; }

/* pedidos */
.pedido { margin-bottom: 10px; position: relative; }
.ped-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.ped-topo > span { color: var(--suave); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.itens { list-style: none; margin: 0; padding: 0; }
.itens li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 15px; }
.itens li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.itens .entrega { color: var(--suave); }
.ped-total { display: flex; justify-content: space-between; border-top: 1px dashed var(--linha); margin-top: 8px; padding-top: 8px; }
.ped-total strong { font-variant-numeric: tabular-nums; }
.parcial-info { margin: 8px 0 0; font-size: 14px; color: #9a3412; }
.editar { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.selo { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: .4px; }
.selo.aberto { background: var(--amarelo-bg); color: var(--amarelo); }
.selo.parcial { background: #fde8e4; color: #9a3412; }
.selo.pago { background: var(--verde-bg); color: var(--verde); }
.cont { background: var(--vinho); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 8px; letter-spacing: 0; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.lista li:last-child { border-bottom: 0; }
.linha-acao { display: flex; align-items: center; gap: 4px; }
.linha-acao form { margin: 0; }

details.historico { margin-top: 24px; }
details.historico summary, details.card summary { cursor: pointer; font-weight: 600; color: var(--vinho); padding: 6px 0; }
details.historico[open] summary { margin-bottom: 10px; }
.form-pag { margin-top: 12px; }

.dica { margin-top: 24px; font-size: 14px; }
.dica p { margin: 6px 0 10px; }

/* clientes (admin) */
.busca { margin-bottom: 10px; }
.cli { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--linha); }
.cli:last-child { border-bottom: 0; }
.cli small { display: block; color: var(--suave); font-size: 13px; }
.cab-cliente { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cab-cliente h1 { margin: 4px 0 12px; }

/* formulários */
label { display: block; font-size: 13px; font-weight: 600; color: var(--suave); margin: 14px 0 4px; }
input, select {
  width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 10px;
  background: #fff; color: var(--texto); min-height: 44px;
}
input:focus, select:focus { outline: none; border-color: var(--vinho-2); }
input.pin { font-size: 32px; text-align: center; letter-spacing: 14px; font-weight: 700; margin: 12px 0; }
.login { padding: 28px 20px; }
.erro { background: #fde8e6; color: var(--vermelho); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.aviso-ok { background: var(--verde-bg); color: var(--verde); padding: 10px 12px; border-radius: 10px; font-weight: 600; margin: 0 0 12px; }
.alerta { background: var(--amarelo-bg); color: var(--amarelo); padding: 10px 12px; border-radius: 10px; font-size: 14px; margin: 14px 0 0; }
.prefixo { display: flex; align-items: center; border: 1.5px solid var(--linha); border-radius: 10px; background: #fff; overflow: hidden; }
.prefixo span { padding: 0 0 0 12px; color: var(--suave); font-size: 14px; white-space: nowrap; }
.prefixo input { border: 0; padding-left: 2px; min-width: 0; }
.cliente-sel { margin: 0 0 4px; }

/* itens do pedido */
.atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { border: 1.5px solid var(--vinho); background: #fbf3f5; color: var(--vinho); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.itens-cab, .item-row { display: grid; grid-template-columns: 52px 1fr 86px 28px; gap: 6px; align-items: center; }
.itens-cab { font-size: 12px; color: var(--suave); margin-bottom: 4px; }
.item-row { margin-bottom: 6px; }
.item-row input { padding: 10px 8px; }
.i-qtd { text-align: center; }
.i-valor { text-align: right; }
.auto { position: relative; }
.sug {
  position: absolute; z-index: 10; left: 0; right: -120px; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none;
  background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(40,10,20,.18), 0 0 0 1px var(--linha); max-height: 260px; overflow: auto;
}
.sug li { padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.sug li:hover, .sug li.ativo { background: #fbf3f5; }
.sug li b { color: var(--vinho); white-space: nowrap; }
.sug li small { color: var(--suave); }
.total-box strong { display: block; font-size: 24px; color: var(--vinho); padding-top: 6px; font-variant-numeric: tabular-nums; }