/* ==========================================================================
   CENTAURUS — RÉPLICA DA TELA DO ALPHA PDV
   Modificado em: 26/10/2026  / Dev - Alex Sergio

   Coordenadas retiradas do form real (Alpha_pdv_lazarus\Fonte\uMain.lfm),
   canvas de 800x599 px, conferidas contra a captura do PDV em execução.
   Fontes Arial, tamanhos = Font.Height do .lfm (valor negativo = px).
   ========================================================================== */

/* ---------- palco: 800x599 escalado por JS (--esc) ---------- */
/* item de grid não encolhe sozinho (min-width:auto): sem isto o palco de
   800px estica a coluna do app e o layout estoura no celular */
.pdv-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; }
.pdv-moldura {
  position: relative;
  height: calc(599px * var(--esc, 1));
  width: calc(800px * var(--esc, 1));
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(16, 19, 26, .28);
  overflow: hidden;
}
.pdv-palco {
  position: absolute; top: 0; left: 0;
  width: 800px; height: 599px;
  transform: scale(var(--esc, 1));
  transform-origin: 0 0;
  background: url('../pdv/fundo.jpg') 0 0 / 100% 100% no-repeat;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  user-select: none;
  cursor: default;
}
.pdv-palco * { box-sizing: border-box; }
/* só os elementos de 1º nível são posicionados por coordenada (como no .lfm);
   o que está dentro deles (linhas da grade, diálogos) segue o fluxo normal */
.pdv-palco > span, .pdv-palco > div { position: absolute; }

/* ---------- caixas brancas (TPanel do Delphi) ---------- */
.pdv-cx {
  background: #fff;
  border: 1px solid #b7bcc4;
  border-radius: 3px;
  display: flex; align-items: center;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
}
.pdv-cx.dir { justify-content: flex-end; }

/* ---------- rótulos ---------- */
.pdv-lbl  { font-size: 11px; color: #000; }
.pdv-lbl9 { font-size: 9px;  color: #000; }
.pdv-val  { font-size: 12px; font-weight: bold; color: #000; }

/* ---------- logo da loja + marcas ---------- */
/* o .lfm reserva 383px para o nome da loja (lblLogo); o TImage é maior e
   no app instalado invade o bloco de informações — aqui fica nos 383px */
.p-logo       { left: 9px;   top: 22px;  width: 383px; height: 108px; }
.p-logo img   { position: absolute; left: 0; top: 0; max-width: 383px; max-height: 108px; }
.p-alphapdv   { left: 713px; top: 541px; width: 60px;  height: 39px; }
.p-alphapdv img { position: absolute; width: 60px; height: 39px; }

/* ---------- bloco de informações (topo direito) ---------- */
.p-l-caixa    { left: 409px; top: 106px; }
.p-caixa      { left: 451px; top: 104px; width: 65px; }
.p-l-cupom    { left: 511px; top: 106px; }
.p-cupom      { left: 551px; top: 104px; width: 80px; }
.p-l-data     { left: 633px; top: 106px; }
.p-data       { left: 685px; top: 104px; width: 97px; text-align: right; }
.p-l-usuario  { left: 409px; top: 121px; }
.p-usuario    { left: 451px; top: 119px; width: 65px; }
.p-l-turno    { left: 511px; top: 121px; }
.p-turno      { left: 551px; top: 119px; width: 80px; }
.p-l-servidor { left: 633px; top: 121px; }
.p-servidor   { left: 685px; top: 119px; width: 97px; text-align: right; }

.p-bevel      { left: 410px; top: 136px; width: 372px; height: 2px;
                border-top: 1px solid #9aa3ad; border-bottom: 1px solid #fff; }

.p-l-situacao { left: 409px; top: 140px; }
.p-situacao   { left: 410px; top: 152px; width: 271px; height: 20px;
                font-size: 16px; font-weight: bold; color: #008000; }
.p-situacao.ocupado { color: #b35c00; }
.p-modo       { left: 730px; top: 144px; width: 50px; height: 24px;
                background: #008000; color: #fff; font-size: 16px; font-weight: bold;
                display: flex; align-items: center; justify-content: center; }

/* ---------- grade de itens ---------- */
.p-grade-cab, .pdv-linha {
  left: 14px; width: 378px;
  display: grid;
  grid-template-columns: 30px 150px 26px 60px 40px 72px;
  align-items: center;
}
/* descrição longa não pode quebrar a linha: corta com reticências,
   como a grade do PDV faz ao estreitar a coluna */
.p-grade-cab span, .pdv-linha span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 17px;
}
.p-grade-cab { top: 147px; height: 14px; font-size: 9px; color: #000080; }
.p-grade {
  left: 14px; top: 163px; width: 378px; height: 396px;
  background: #fff; border: 1px solid #b7bcc4; border-radius: 2px;
  overflow: hidden;
}
.p-grade-rolo { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow-y: auto; }
.pdv-linha {
  position: relative; left: 0; width: 376px; height: 17px;
  font-size: 11px; cursor: pointer;
}
.pdv-linha.sel { background: #000080; color: #fff; }
.p-c2 { text-align: center; }
.p-c3 { text-align: right; padding-right: 4px; }
.p-grade-cab .p-c1 { padding-left: 4px; }
.pdv-linha .p-c1   { padding-left: 4px; }
.p-vazio-grade {
  position: absolute; left: 0; right: 0; top: 150px;
  text-align: center; font-size: 11px; color: #8a8f98;
}

/* ---------- cliente / plano / vendedor ---------- */
.p-l-cliente { left: 410px; top: 180px; }
.p-cliente   { left: 410px; top: 192px; width: 367px; font-size: 12px; font-weight: bold; }
.p-l-plano   { left: 410px; top: 213px; }
.p-plano     { left: 410px; top: 225px; width: 270px; font-size: 12px; font-weight: bold; }
.p-l-vend    { left: 685px; top: 213px; }
.p-vend      { left: 686px; top: 225px; width: 95px; font-size: 12px; font-weight: bold; }

/* ---------- linha de digitação ---------- */
.p-editor { left: 409px; top: 246px; width: 370px; height: 28px; font-size: 20px; }
.p-editor .cursor {
  position: static; display: inline-block; width: 2px; height: 20px;
  background: #000; margin-left: 1px; animation: pisca 1.05s steps(1, end) infinite;
}
@keyframes pisca { 50% { opacity: 0; } }

/* ---------- displays do item ---------- */
.p-l-qtd    { left: 409px; top: 277px; }
.p-l-preco  { left: 512px; top: 277px; }
.p-l-descto { left: 615px; top: 277px; }
.p-l-totit  { left: 688px; top: 277px; }
.p-qtd      { left: 409px; top: 290px; width: 92px;  height: 25px; font-size: 19px; }
.p-x        { left: 502px; top: 293px; width: 10px; font-size: 12px; font-weight: bold; text-align: center; }
.p-preco    { left: 512px; top: 290px; width: 100px; height: 25px; font-size: 19px; }
.p-descto   { left: 615px; top: 290px; width: 70px;  height: 25px; font-size: 19px; }
.p-totit    { left: 688px; top: 290px; width: 90px;  height: 25px; font-size: 19px; }
.p-produto  { left: 409px; top: 321px; width: 370px; height: 32px; font-size: 21px; }

/* ---------- total do cupom ---------- */
.p-l-totcup { left: 409px; top: 358px; }
.p-totcup {
  left: 409px; top: 372px; width: 370px; height: 70px;
  font-size: 58px; color: #f00; font-weight: normal;
  letter-spacing: -1px;
}

/* ---------- recebido / troco ---------- */
.p-l-receb { left: 409px; top: 452px; }
.p-l-troco { left: 607px; top: 452px; }
.p-receb   { left: 409px; top: 465px; width: 193px; height: 52px; font-size: 32px; }
.p-troco   { left: 607px; top: 465px; width: 172px; height: 52px; font-size: 32px; color: #f00; }

/* ---------- rodapé ---------- */
.p-rodape { left: 409px; top: 520px; width: 370px; height: 25px; font-size: 13px; }
.p-ecf {
  left: 409px; top: 545px; width: 370px; height: 18px;
  font-size: 11px; color: #0000c0; text-align: center;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- faixa de comandos F2..F10 ---------- */
.p-teclas { left: 0; top: 574px; width: 800px; height: 25px; }
.p-tecla {
  position: absolute; top: 4px; height: 18px;
  font-size: 11px; color: #fff; background: none; border: 0;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0; cursor: pointer; white-space: nowrap;
}
.p-tecla:hover  { text-decoration: underline; }
.p-tecla:active { opacity: .7; }
.p-tecla[disabled] { opacity: .45; cursor: default; text-decoration: none; }
.p-tecla .sep { opacity: .55; margin-left: 6px; }

/* ---------- diálogos (F4 / F7 / F10) — estilo caixa do Windows ---------- */
.p-modal {
  left: 0; top: 0; width: 800px; height: 599px;
  background: rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.p-dlg {
  position: relative; background: #f0f0f0;
  border: 1px solid #7a7f87; border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  min-width: 300px; max-width: 520px; overflow: hidden;
}
.p-dlg-tit {
  position: relative; background: linear-gradient(#4f7fd0, #2f5fae);
  color: #fff; font-size: 12px; font-weight: bold;
  padding: 5px 9px;
}
.p-dlg-corpo { position: relative; padding: 10px 12px; font-size: 12px; }
.p-dlg-corpo p { position: relative; margin: 0 0 8px; }
.p-opcs { position: relative; max-height: 380px; overflow-y: auto; }
.p-opc {
  position: relative; display: block; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 3px;
  font: 12px Arial, Helvetica, sans-serif; color: #000;
  padding: 4px 8px; cursor: pointer;
}
.p-opc:hover:not([disabled]) { background: #cfe0f7; }
.p-opc[disabled] { color: #9aa0a8; cursor: default; }
.p-opc u { text-decoration: underline; }
.p-opc .dir { float: right; color: #4a5061; }
.p-dlg-pe {
  position: relative; padding: 8px 12px; background: #e6e6e6;
  border-top: 1px solid #c9ccd1; text-align: right;
}
.p-bt {
  position: relative; font: 12px Arial, Helvetica, sans-serif;
  padding: 4px 14px; margin-left: 6px; cursor: pointer;
  background: linear-gradient(#fdfdfd, #e6e6e6);
  border: 1px solid #9aa0a8; border-radius: 3px;
}
.p-bt:hover { background: linear-gradient(#fff, #dceaf8); border-color: #5b8fd6; }
/* a tabela do F7 não pode herdar o estilo de tabela do site */
.p-dlg.largo { width: 470px; max-width: 470px; }
.pdv-palco .p-tabela {
  position: relative; width: 100%; min-width: 0; table-layout: fixed;
  border-collapse: collapse; font: 11px Arial, Helvetica, sans-serif; color: #000;
  margin: 0; box-shadow: none;
}
.pdv-palco .p-tabela th,
.pdv-palco .p-tabela td {
  text-align: left; text-transform: none; letter-spacing: normal;
  padding: 3px 8px; border: 0; border-bottom: 1px solid #edeff2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdv-palco .p-tabela th {
  position: sticky; top: 0; z-index: 1;
  background: #e9edf3; color: #000080; font-size: 10px; font-weight: bold;
  border-bottom: 1px solid #c9ccd1;
}
.pdv-palco .p-tabela th:nth-child(1), .pdv-palco .p-tabela td:nth-child(1) { width: 70px; }
.pdv-palco .p-tabela th:nth-child(3), .pdv-palco .p-tabela td:nth-child(3) { width: 78px; }
.pdv-palco .p-tabela th:nth-child(4), .pdv-palco .p-tabela td:nth-child(4) { width: 82px; }
.pdv-palco .p-tabela tr { cursor: pointer; background: none; }
.pdv-palco .p-tabela tbody tr:hover td { background: #cfe0f7; }
.pdv-palco .p-tabela .dir { text-align: right; }
.pdv-palco .p-tabela .zero td { color: #9aa0a8; }

/* ---------- legenda abaixo do palco ---------- */
.pdv-legenda {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin-top: 14px; font-size: .82rem; color: var(--c-texto-2, #4a5061);
}
.pdv-legenda kbd {
  font: inherit; font-weight: 700;
  background: var(--c-grafite, #1c1b1b); color: #fff;
  border-radius: 4px; padding: 1px 6px; margin-right: 4px;
}
.pdv-legenda .obs { opacity: .8; }

@media (max-width: 700px) {
  .pdv-legenda { font-size: .78rem; }
}

/* ==========================================================================
   Complementos do site novo (26/10/2026)
   ========================================================================== */
#pdvDemo { width: 100%; }
.pdv-legenda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 16px 0 10px; font-size: .92rem; color: var(--suave); }
.pdv-estado { font-weight: 700; color: var(--texto); }
.pdv-estado::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #B5AEA8; margin-right: 8px; }
.pdv-estado.on::before { background: #2E9E5B; box-shadow: 0 0 0 4px rgba(46, 158, 91, .18); }
.pdv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdv-chip { border: 1.5px solid var(--linha); background: #fff; color: var(--texto); border-radius: 999px; padding: 7px 14px; font-size: .88rem; }
.pdv-chip b { color: var(--azul-pdv); font-variant-numeric: tabular-nums; margin-right: 4px; }
.pdv-chip:hover { border-color: var(--azul-pdv); }

/* cupom simulado */
.cp-fundo { position: fixed; inset: 0; z-index: 150; background: rgba(20, 20, 20, .62); display: grid; place-items: center; padding: 18px; }
.cp { width: min(100%, 380px); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 14px; padding: 22px 22px 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); font-family: 'Segoe UI', system-ui, sans-serif; color: #2A2827; }
.cp img { margin: 0 auto 8px; height: 33px; width: auto; }
.cp-selo { margin: 4px 0 12px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1E7A45; background: #E5F5EC; border-radius: 8px; padding: 7px; }
.cp-l { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 3px 0; }
.cp-itens { border-top: 1px dashed #C9C4BF; border-bottom: 1px dashed #C9C4BF; margin: 8px 0; padding: 6px 0; }
.cp-tot { display: flex; justify-content: space-between; font-weight: 800; font-size: 18px; padding: 6px 0; }
.cp-chave { font-family: Consolas, monospace; font-size: 10px; color: #8E8880; text-align: center; word-break: break-all; margin: 10px 0 4px; }
.cp-aviso { text-align: center; font-size: 11px; color: #8E8880; margin: 0 0 12px; }
.cp-fechar { width: 100%; background: #0044AC; color: #fff; border: 0; border-radius: 9px; padding: 12px; font-weight: 700; font-size: 14px; }
.cp-fechar:hover { background: #0A56D0; }

/* dentro do site o palco não usa os fundos do protótipo antigo */
.pdv-moldura { box-shadow: 0 24px 60px rgba(0, 0, 0, .38); border-radius: 10px; }

.pdv-moldura.estatico { box-shadow: none; border-radius: 0; margin: 0; --esc: .6; }