/* PDV — aspecto de sistema.
   Camada carregada por último. Faz cinco coisas e nada além:
     1. fundo grafite limpo (sem grade);
     2. moldura encostada nas bordas da tela (sem respiro em volta da barra
        lateral, da barra do topo e dos painéis principais);
     3. todos os contornos em branco no lugar do laranja;
     4. todo o resto que era laranja (preenchimentos, textos, ícones, barras
        de rolagem, brilhos e a etapa "Preparando") também em branco;
     5. um padrão de barra de rolagem em todas as telas (sem setas, polegar
        branco de pontas redondas; no seletor, polegar pela metade, com
        js/pdv-barra-rolagem.js).
   Para voltar ao visual anterior basta remover o <link> deste arquivo. */

/* ================= 1. Fundo ================= */

:root {
  /* base grafite: um pouco mais clara no alto, como luz de painel */
  --sys-bg-top: #171b23;
  --sys-bg-mid: #10131a;
  --sys-bg-bottom: #0b0d12;

  /* luz branca bem discreta no canto da barra lateral */
  --sys-glow: rgba(255,255,255,.045);

  /* granulação leve: evita faixas visíveis no degradê em monitores comuns */
  --sys-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --sys-background:
    var(--sys-noise) 0 0 / 160px 160px repeat,
    radial-gradient(ellipse 120% 95% at 50% 32%, transparent 58%, rgba(0,0,0,.36) 100%),
    radial-gradient(ellipse 55% 42% at 0% 0%, var(--sys-glow), transparent 72%),
    linear-gradient(180deg, var(--sys-bg-top) 0%, var(--sys-bg-mid) 55%, var(--sys-bg-bottom) 100%);
}

html, body { background: var(--sys-bg-bottom); }

/* As camadas ficam no background do próprio elemento (sem ::before novo nem
   z-index): a ordem da barra lateral (100), modais (200) e seletor (250) não muda. */
#pdvApp, .pdv-login-wrap, .picker-overlay { background: var(--sys-background); }

/* ================= 2. Moldura encostada nas bordas ================= */

/* A barra lateral flutuava a 14px (10px e 8px em telas menores) das bordas
   com cantos arredondados. Agora ocupa a altura toda, colada à esquerda, e
   só uma linha à direita separa a barra do conteúdo. */
#pdvApp #pdvSidebar,
#pdvApp #pdvSidebar.expanded {
  left: 0;
  top: 0;
  bottom: 0;
  border: 0;
  border-right: 1px solid var(--sys-contorno);
  border-radius: 0 !important;
  box-sizing: border-box;
  box-shadow: none;
}
#pdvApp #pdvSidebar.expanded { box-shadow: 12px 0 32px rgba(0,0,0,.45); }

/* Sem o botão de menu (☰) no alto da barra lateral. Fica só escondido: o
   pdv.js liga o clique dele ao carregar e daria erro se o elemento sumisse
   do HTML. pdv-classic-reference.css o reexibia com a mesma força, por isso
   o !important com o mesmo seletor aqui, que carrega depois. */
#pdvApp #pdvSidebar #pdvSidebarToggle { display: none !important; }

/* "Sair" anda junto com a lista. Antes só os ícones rolavam e um espaçador
   prendia o Sair no rodapé; agora a barra lateral inteira rola e o Sair vem
   logo depois do último ícone. As dicas de nome já acompanham a rolagem da
   barra (pdv-sidebar-tooltips.js), e o esmaecimento das pontas da lista sai
   porque a lista em si não rola mais. Mesmos seletores do glass-dark e do
   classic-reference, carregados depois. */
#pdvApp #pdvSidebar {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
}
#pdvApp #pdvSidebar::-webkit-scrollbar { display: none; width: 0; height: 0; }
#pdvApp #pdvSidebar #pdvSectionTabs {
  flex: 0 0 auto;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
#pdvApp #pdvSidebar .pdv-sidebar-spacer { display: none !important; }

/* Coluna única e uniforme: o Sair tem a mesma medida das categorias (linha
   de 60px, 5px de respiro, 3px entre um item e outro) e o desenho dele fica
   no centro do círculo. Antes ele tinha margem própria (15px do WhatsApp,
   linha de 64px) e o desenho deslocado 2px à direita (glass-dark). */
#pdvApp #pdvSidebar { row-gap: 3px; }
#pdvApp #pdvSidebar #pdvLogoutBtn {
  flex: 0 0 60px;
  height: 60px;
  min-height: 60px;
  width: calc(100% - 10px);
  margin: 0 5px !important;
  padding: 5px 0 !important;
}
#pdvApp #pdvLogoutBtn .pdv-row-circle::after { left: 50% !important; }

/* Painel da seção WhatsApp (pdv-whatsapp-web.js), no lugar do "Área em
   preparação": fica visível quando a janela encaixada está atrás do PDV. */
.pdv-whatsapp-painel .pdv-whatsapp-dica { color: var(--pdv-text-dim); max-width: 60ch; line-height: 1.5; }
.pdv-whatsapp-painel ol.pdv-whatsapp-dica { margin: 14px 0 0; padding-left: 22px; }
.pdv-whatsapp-painel ol.pdv-whatsapp-dica li { margin: 4px 0; }
.pdv-whatsapp-painel ol.pdv-whatsapp-dica strong { color: var(--pdv-text); }
.pdv-whatsapp-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pdv-whatsapp-acoes button {
  min-height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--sys-contorno);
  background: rgba(34,38,48,.84);
  color: var(--pdv-text);
  font: 700 14px var(--pdv-reference-font);
  letter-spacing: .3px;
  text-transform: uppercase;
  cursor: pointer;
}
.pdv-whatsapp-acoes .pdv-whatsapp-principal {
  background: linear-gradient(145deg, #ffffff, #e3e7ee);
  border-color: #ffffff;
  color: var(--sys-texto-sobre-branco);
}
.pdv-whatsapp-aviso { margin-top: 14px; color: #ff9b9b; }

/* WhatsApp Web embutido (com a extensão): ocupa a área da aba de borda a
   borda, abaixo da barra do topo. Ao sair da aba só fica escondido. */
#pdvWhatsappArea { display: none; flex: 1 1 auto; min-height: 0; background: #0b0d12; }
#pdvWhatsappArea iframe { display: block; width: 100%; height: 100%; border: 0; }
body.pdv-whatsapp-embutido #pdvMain { display: none !important; }
body.pdv-whatsapp-embutido #pdvWhatsappArea { display: block; }

/* Selo de conversas não lidas no ícone do WhatsApp da barra lateral. */
#pdvSectionTabs [data-sec="whatsapp"] .pdv-row-circle { position: relative; overflow: visible; }
.pdv-whatsapp-selo {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #e5393f;
  color: #ffffff;
  font: 800 11px/20px var(--pdv-reference-font);
  text-align: center;
  box-shadow: 0 0 0 2px var(--sys-bg-top), 0 2px 6px rgba(0,0,0,.45);
  pointer-events: none;
}
/* Anel que se expande em volta do selo só quando chega mensagem nova (não a
   cada troca de aba). O selo em si nunca muda de tamanho: se o navegador
   pausar a animação (página oculta), ele continua do tamanho certo. */
.pdv-whatsapp-selo.pdv-whatsapp-selo-novo { animation: pdv-selo-chegou .9s ease-out 2; }
@keyframes pdv-selo-chegou {
  0%   { box-shadow: 0 0 0 2px var(--sys-bg-top), 0 0 0 2px rgba(229,57,63,.75); }
  100% { box-shadow: 0 0 0 2px var(--sys-bg-top), 0 0 0 12px rgba(229,57,63,0); }
}
@media (prefers-reduced-motion: reduce) { .pdv-whatsapp-selo.pdv-whatsapp-selo-novo { animation: none; } }

/* Sem o balão com o nome da seção ao passar o mouse. O pdv-sidebar-tooltips.js
   continua carregando porque é ele que tira o title dos botões; sem ele o
   navegador mostraria a dica nativa com o mesmo nome. */
#pdvSidebarHint { display: none !important; }

/* O nome da seção ativa (posto pelo pdv-secao-topo.js) fica em maiúsculas,
   como estava o "PONTO DE VENDA". */
.pdv-topbar-brand div > span { text-transform: uppercase; }

/* Busca de produtos do Balcão: encostada à direita da barra do topo, a 20px
   da linha do carrinho, espelhando o nome STEAK FRANGUINHO (20px da borda
   esquerda) e alinhada pelo centro com ele. pdv-classic-reference.css a
   prendia à esquerda com margin-right: auto. */
#pdvApp .pdv-topbar .pdv-visual-search {
  flex: 0 1 auto;   /* encolhe em tela estreita em vez de passar por cima do nome */
  min-width: 0;
  margin-left: auto;
  margin-right: 0;
  align-self: center;
}
#pdvApp .pdv-topbar .pdv-topbar-brand { flex-shrink: 0; }

/* Texto da busca (e o "Buscar produtos (F9)") em maiúsculas. É só a
   aparência: o que foi digitado continua igual para a pesquisa. */
#pdvApp .pdv-visual-search input,
#pdvApp .pdv-visual-search input::placeholder { text-transform: uppercase; }
/* cursor de digitação branco só na busca (o glass-dark deixa laranja em
   todos os campos, com um seletor mais forte) */
#pdvApp .pdv-visual-search input { caret-color: #ffffff !important; }

/* Lupa sem laranja: cinza claro parada, branca com o mouse em cima ou com o
   campo em uso. Mesmos seletores que a pintavam de laranja com !important. */
#pdvApp .pdv-visual-search svg { stroke: rgba(255,255,255,.58) !important; filter: none !important; }
#pdvApp .pdv-visual-search:hover svg,
#pdvApp .pdv-visual-search:focus-within svg { stroke: #ffffff !important; filter: none !important; }

/* O conteúdo começa logo depois da barra (a largura dela vem de
   --pdv-rail-width: 80px, ou 72px no celular). Na cobrança a barra some e
   checkout-reference.css zera a margem com um seletor mais forte. */
.pdv-main-col {
  margin-left: var(--pdv-rail-width);
  padding: 0;
}
.pdv-main-col:has(#atdCartItems) {
  gap: 0;
  padding: 0;
}

/* Barra do topo, catálogo e carrinho viram painéis encaixados: sem cantos,
   sem sombra flutuante e com uma linha só entre um e outro. */
#pdvApp .pdv-topbar {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--sys-contorno);
  border-radius: 0;
  box-shadow: none;
}
#pdvApp .order-catalog,
#pdvApp .order-cart {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#pdvApp .order-cart { border-left: 1px solid var(--sys-contorno); }

/* Mesas: o histórico vira uma coluna presa à direita, de cima a baixo. O
   respiro fica só em volta dos cartões de mesa. */
#pdvApp .pdv-hub { padding: 0; gap: 0; }
#pdvApp .pdv-hub-left { padding: 18px; }
#pdvApp .hist-panel {
  border: 0;
  border-left: 1px solid var(--sys-contorno);
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 900px) {
  #pdvApp .hist-panel {
    border-left: 0;
    border-top: 1px solid var(--sys-contorno);
  }
}

/* Mesma linha das divisórias (barra lateral, topo, carrinho) também nas
   quatro bordas da tela, em todas as etapas: login, todas as seções,
   janelas da comanda e da identificação e o seletor de complementos.
   Desenhada por cima de tudo (as camadas da página vão até 1001), sem mudar
   nenhum tamanho e sem pegar clique. O ::after do body estava livre. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  border: 1px solid var(--sys-contorno);
  pointer-events: none;
  z-index: 2147483000;
}

/* Seletor de complementos: a janela ocupa a tela toda (picker-reference.css)
   e o pdv-glass-dark.css devolvia contorno, cantos arredondados e um fio
   claro no topo. Fica encostada nas bordas, sem contorno, como o resto. */
.picker-modal {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Etapas do seletor (colunas "Escolha 1 complemento"...): cantos retos, e o
   vão entre uma coluna e outra igual ao das laterais e do topo (12px). Antes
   eram 28px no meio (identificacao-ajustes.css) contra 12px nas laterais e
   10px no topo. Empilhadas no celular, o vão é a margem de baixo (12px). */
.picker-columns { gap: 12px; padding: 12px; }
/* Cantos suaves nas colunas, iguais aos botões Cancelar e Incluir (8px); o
   cabeçalho e o campo de observação seguem o recorte da coluna. */
.picker-col { border-radius: 8px; }
.picker-col-head { border-radius: 0; }

/* ================= 3. Contornos brancos ================= */

:root {
  /* contorno comum (painéis, cartões, campos) e contorno de destaque
     (item ativo, selecionado, em foco ou sob o mouse) */
  --sys-contorno: rgba(255,255,255,.32);
  --sys-contorno-forte: rgba(255,255,255,.92);

  /* variáveis de borda do tema: valem para dezenas de regras de uma vez */
  --pdv-border: var(--sys-contorno);
  --glass-edge: var(--sys-contorno);
  --glass-orange-edge: var(--sys-contorno);
  --glass-orange-focus: var(--sys-contorno-forte);
  --pdv-selection-border: var(--sys-contorno-forte);
  --pdv-selection-border-hover: #ffffff;
  --pdv-selection-shadow:
    0 10px 22px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.882),
    0 0 8px rgba(255,255,255,.333),
    0 0 22px rgba(255,255,255,.287),
    inset 0 0 18px rgba(255,255,255,.063);
  --pdv-selection-shadow-hover:
    0 12px 26px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.9),
    0 0 10px rgba(255,255,255,.35),
    0 0 30px rgba(255,255,255,.329),
    inset 0 0 20px rgba(255,255,255,.084);
}

/* Contornos escritos como "border-color: var(--pdv-orange)" ou com a cor
   direto no pdv.js. A variável não pode mudar porque também pinta botões e
   preenchimentos, então cada regra é trocada aqui com o mesmo seletor. */
.pin-input { border-color: var(--sys-contorno-forte); }
#modalMesaInput { border-color: var(--sys-contorno-forte) !important; }
.picker-radio.checked { border-color: var(--sys-contorno-forte); }
.atd-tipo-card.selected { border-color: var(--sys-contorno-forte); }
.end-radio.on { border-color: var(--sys-contorno-forte); }
#ckClienteCard { border-color: var(--sys-contorno-forte); }
#pdvModalBody:has(#idTelefone) .end-card.selected { border-color: var(--sys-contorno-forte); }
#pdvModalBody:has(#idTelefone) #endToggle:hover { border-color: var(--sys-contorno-forte); }

/* Regras abaixo: cada contorno laranja escrito direto nas camadas anteriores,
   com o mesmo seletor e a mesma prioridade, trocado por branco. A linha
   nítida fica firme; o brilho difuso fica mais suave que o laranja original. */
.pdv-nav-row.active {
  border-left-color: var(--sys-contorno-forte);
}
.pdv-sidebar.expanded .pdv-nav-row.active {
  border-left-color: var(--sys-contorno-forte);
}
.kanban-card {
  border-left-color: var(--sys-contorno-forte);
}
.order-cats .chip.active {
  border-color: var(--sys-contorno-forte);
}
.order-product:hover {
  border-color: var(--sys-contorno-forte);
  box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 2px, rgba(0, 0, 0, 0.133) 0px 5px 8px;
}
.picker-stepper button {
  border-color: var(--sys-contorno);
}
.end-radio.on {
  box-shadow: 0 0 0 3px var(--sys-contorno-forte) inset;
}
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-color: var(--sys-contorno-forte);
}
.cart-qty-mini button.plus {
  border-color: var(--sys-contorno-forte);
}
.pdv-topbar-mark {
  box-shadow: rgba(255, 255, 255, 0.051) 0px 5px 13px;
}
/* Seletor: sem a linha debaixo da última opção de cada etapa (as linhas só
   separam uma opção da outra). Fica transparente para não mudar a altura,
   e antes da regra da opção marcada, que devolve o contorno neon inteiro. */
.picker-col-list > .picker-opt:last-child { border-bottom-color: transparent; }
/* Campo de observação do seletor: era branco com texto escuro
   (identificacao-ajustes.css). Ocupa o quadrado inteiro da coluna abaixo do
   cabeçalho, sem espaço em volta, no grafite mais claro do trilho onde
   corre a barra de rolagem, com texto claro. Sem contorno próprio: a coluna
   já tem o dela (dois juntos virariam linha dupla); no foco aparece o
   cursor. */
.picker-col-obs .picker-col-list { padding: 0; overflow: hidden; }
.picker-col-obs textarea {
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(37, 43, 51);
  color: var(--pdv-text);
  border: 0;
  border-radius: 0;
}
/* O grafite mais escuro do seletor fica só nos cabeçalhos das etapas
   ("Adicional de molhos", "Observação"...) e no rodapé (produto, Cancelar,
   Incluir), na mesma cor sólida nos dois (semitransparente, o cabeçalho
   ficava mais claro por cima da coluna). O cabeçalho ocupa o topo inteiro
   da coluna, sem a margem de 6px em volta (picker-reference.css); o espaço
   interno cresce os mesmos 6px, para o texto e a lista não saírem do lugar. */
.picker-col-head, .picker-foot { background: #11141b; }
/* Cancelar do seletor no vermelho dos botões de cancelar das outras telas
   (.pdv-btn-cancelar: identificação, endereço, clientes); o
   pdv-glass-dark.css o deixava grafite. */
.picker-foot button.cancel {
  background: #d31305;
  color: #ffffff;
  border-color: transparent;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, .27) 0 8px 16px, rgba(255, 255, 255, .12) 0 1px 0 inset;
}
.picker-foot button.incluir { border-radius: 8px; }
/* Voltar ao lado do Cancelar no rodapé do seletor (acrescentado pelo
   js/pdv-telas-padrao.js), grafite como os outros Voltar: a grade do rodapé
   (picker-reference.css) ganha uma coluna para ele. */
.picker-foot { grid-template-columns: 145px minmax(520px, 1fr) 150px 150px minmax(300px, 380px); }
.picker-foot #pickerVoltarBtn { grid-column: 3; grid-row: 1; }
.picker-foot button.cancel { grid-column: 4; }
.picker-foot button.incluir { grid-column: 5; }
.picker-foot #pickerVoltarBtn {
  min-height: 65px;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: linear-gradient(145deg, #2c313c, #1c1f26);
  color: var(--pdv-text);
  font-family: inherit;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  box-shadow: rgba(0, 0, 0, .27) 0 8px 16px, rgba(255, 255, 255, .12) 0 1px 0 inset;
}
@media (max-width: 1450px) {
  .picker-foot { grid-template-columns: 80px minmax(390px, 1fr) 115px 115px minmax(235px, 280px); }
  .picker-foot #pickerVoltarBtn { font-size: 18px; padding-inline: 16px; }
}
@media (max-width: 760px) {
  .picker-foot { grid-template-columns: 58px minmax(0, 1fr); }
  .picker-foot #pickerVoltarBtn { grid-column: 1 / -1; grid-row: 3; }
  .picker-foot button.cancel { grid-column: 1 / 2; }
  .picker-foot button.incluir { grid-column: 2; }
}
.picker-col-head {
  margin: 0;
  flex-basis: 111px;
  padding: 29px 34px 24px;
}
@media (max-width: 1450px) {
  .picker-col-head { padding-inline: 24px; }
}
@media (max-width: 760px) {
  .picker-col-head { flex-basis: auto; min-height: 100px; }
}
.picker-col-obs textarea::placeholder { color: var(--pdv-text-dim); }
/* Campos de digitar (observação, busca, telefone, endereço, senha...): uma
   linha só. Ao clicar, o navegador desenhava o contorno de foco 2px por fora
   da borda (duas linhas) e o mouse em cima somava um anel colado nela.
   Fica só a borda do próprio campo, que acende em branco no foco. Seletor
   com id para vencer a regra geral de hover (que tem !important). */
:is(#pdvApp, #pdvLogin, #pdvModalOverlay, #pickerOverlay) :is(textarea, input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"])):is(:hover, :focus, :focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
:is(#pdvApp, #pdvLogin, #pdvModalOverlay, #pickerOverlay) :is(textarea, input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"])):is(:focus, :focus-visible) {
  border-color: var(--sys-contorno-forte) !important;
}
/* Seletor de itens: o complemento/molho escolhido (e o adicional com
   quantidade) fica com o mesmo fundo de uma opção comum e contorno branco
   neon. O brilho principal é interno porque a lista rola e cortaria um
   brilho só externo nas pontas. */
.picker-opt:has(.picker-radio.checked), .picker-opt:has([data-paction="minus"]:not(:disabled)) {
  background: transparent;
  border-color: var(--sys-contorno-forte);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.95),
    inset 0 0 12px rgba(255,255,255,.22),
    0 0 10px rgba(255,255,255,.35),
    0 0 20px rgba(255,255,255,.15);
}
.picker-opt:has(.picker-radio.checked) .picker-opt-name { color: var(--pdv-text); }
/* Nomes nas etapas de adicionais (opções com preço) no mesmo tamanho dos
   das outras etapas: o identificacao-ajustes.css os fixava em 18px/24px
   mesmo nas telas até 1450px, onde os demais têm 14px/21px
   (picker-reference.css). */
.picker-opt:has(.picker-opt-price) .picker-opt-name { font-size: 18px; line-height: 28px; }
@media (max-width: 1450px) {
  .picker-opt:has(.picker-opt-price) .picker-opt-name { font-size: 14px; line-height: 21px; }
}
/* Linha de ponta a ponta separando o cabeçalho de cada etapa ("Escolha 1
   complemento...") da lista de opções, na cor do contorno da coluna. Fica
   no topo da lista, que rola por baixo dela. */
.picker-col-list { border-top: 1px solid var(--sys-contorno); }
/* "− 1 +" com o mesmo espaçamento curto (8px) em todo lugar: opções do
   seletor (eram 6px em telas até 1450px e 12px acima), quantidade no rodapé
   do seletor (eram 15px) e itens do carrinho do Balcão (eram 9px). */
.picker-stepper, .picker-foot .cart-qty, #atdCartItems .cart-qty-mini { gap: 8px; }
/* Bolinhas "−" e "+" das opções do seletor: na opção ainda não escolhida
   (quantidade 0), as duas nos tons claros: o vermelho do "✕ Cancelar" da
   cobrança (#e5393f) e o verde do botão Incluir (#40c65c). Na opção
   escolhida, as duas no tom forte (#d40000 e #009500), mesmo com a etapa já
   no máximo. Antes, paradas eram quase brancas. A opção escolhida é a que
   tem o "−" funcionando. */
.picker-opt:not(:has([data-paction="minus"]:not(:disabled))) .picker-stepper button[data-paction="minus"] {
  background: #e5393f;
}
.picker-opt:not(:has([data-paction="minus"]:not(:disabled))) .picker-stepper button[data-paction="plus"] {
  background: #40c65c;
}
.picker-opt:has([data-paction="minus"]:not(:disabled)) .picker-stepper button[data-paction="plus"] {
  background: #009500;
}
/* Quantidade do rodapé: o "−" fica claro em 1 (não dá para tirar) e forte
   acima disso; o "+" sempre soma, no verde forte. */
.picker-foot .cart-qty #pkQtyMinus:disabled { background: #e5393f; }
.picker-foot .cart-qty #pkQtyPlus:disabled { background: #40c65c; }
/* Quantidade do rodapé do seletor sem a faixa clara atrás do "− 1 +"
   (pdv-glass-dark.css), igual aos "− +" das opções. */
.picker-foot .cart-qty {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.picker-modal button:focus-visible, .picker-opt:focus-visible {
  outline-color: var(--sys-contorno-forte);
}
.order-cart-actions.atd-actions button:not(:disabled):hover {
  border-color: var(--sys-contorno-forte);
}
.pdv-catalog-scroll::-webkit-scrollbar-thumb, .order-cats::-webkit-scrollbar-thumb, .order-cart-items::-webkit-scrollbar-thumb {
  border-color: var(--sys-contorno);
}
#atdCartItems .cart-card {
  border-color: var(--sys-contorno-forte);
  box-shadow: rgba(0, 0, 0, 0.28) 0px 10px 22px, rgba(255, 255, 255, 0.738) 0px 0px 0px 1px, rgba(255, 255, 255, 0.182) 0px 0px 12px, rgba(255, 255, 255, 0.035) 0px 0px 14px inset;
}
#atdCartItems .cart-card:focus-within, #atdCartItems .cart-card:hover {
  border-color: var(--sys-contorno-forte);
  box-shadow: rgba(255, 255, 255, 0.196) 0px 0px 4px inset;
}
.picker-columns::-webkit-scrollbar-thumb, .picker-col-list::-webkit-scrollbar-thumb {
  border-color: var(--sys-contorno);
}
#pdvModalBody:has(#idTelefone) .end-card.selected {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.288), var(--card-shadow);
}
#atdEntregaBtn:not(:disabled):hover {
  border-color: var(--sys-contorno-forte);
}
.picker-col-obs textarea:focus-visible {
  outline-color: var(--sys-contorno-forte);
}
.picker-opt:hover, .picker-opt[data-paction="radio"]:hover {
  box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 2px inset;
}
.order-cart-actions.atd-actions button:not(:disabled):hover, #atdRetiradaBtn:not(:disabled):hover, #atdEntregaBtn:not(:disabled):hover, .atd-tipo-card:hover, .order-cats .chip:not(.active):hover, .order-cats-bottom .chip:not(.active):hover {
  border-color: var(--sys-contorno-forte);
}
.pdv-visual-search:focus-within {
  border-color: var(--sys-contorno-forte);
  box-shadow: rgba(255, 255, 255, 0.273) 0px 0px 14px, rgba(0, 0, 0, 0.16) 0px 1px 2px inset;
}
.order-cats .chip.active, .order-cats-bottom .chip.active {
  border-color: var(--sys-contorno-forte);
}
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .order-product:focus-visible, .picker-opt:focus-visible {
  outline-color: var(--sys-contorno-forte);
}
.order-cart-actions.atd-actions :is(#atdRetiradaBtn, #atdEntregaBtn):not(:disabled):hover {
  border-color: var(--sys-contorno-forte);
}
#pdvApp :hover::-webkit-scrollbar-thumb, #pdvLogin :hover::-webkit-scrollbar-thumb, .pdv-modal :hover::-webkit-scrollbar-thumb, .picker-modal :hover::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
  box-shadow: rgba(255, 255, 255, 0.6) 1px 0px inset, rgba(255, 255, 255, 0.298) 0px 0px 11px;
}
#atdCartItems .cart-card:hover, #atdCartItems .cart-card:focus-within {
  border-color: var(--sys-contorno-forte);
  box-shadow: rgba(0, 0, 0, 0.34) 0px 12px 26px, rgba(255, 255, 255, 0.864) 0px 0px 0px 1px, rgba(255, 255, 255, 0.266) 0px 0px 20px, rgba(255, 255, 255, 0.056) 0px 0px 18px inset;
}
#pdvApp .pdv-visual-search:focus-within {
  border-color: var(--sys-contorno-forte) !important;
}
#pdvApp #pdvSidebar .pdv-nav-row:is(.active, :hover, :focus-visible) .pdv-row-circle {
  box-shadow: rgba(255, 255, 255, 0.882) 0px 0px 0px 1px, rgba(255, 255, 255, 0.315) 0px 0px 8px, rgba(255, 255, 255, 0.193) 0px 0px 14px, rgba(255, 255, 255, 0.18) 0px 1px 0px inset !important;
}
/* Seção escolhida na barra lateral: sem a moldura quadrada em volta do item
   (pdv-classic-reference.css), só o círculo com o contorno branco neon,
   igual ao do mouse em cima. Mesmos seletores e !important de lá, que
   também apagavam o neon do círculo ativo. */
#pdvApp #pdvSidebar #pdvSectionTabs .pdv-nav-row.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#pdvApp #pdvSidebar #pdvSectionTabs .pdv-nav-row.active .pdv-row-circle {
  box-shadow: rgba(255, 255, 255, 0.882) 0px 0px 0px 1px, rgba(255, 255, 255, 0.315) 0px 0px 8px, rgba(255, 255, 255, 0.193) 0px 0px 14px, rgba(255, 255, 255, 0.18) 0px 1px 0px inset !important;
}
#pdvApp #pdvSidebarToggle:is(:hover, :focus, :active), #pdvApp #pdvSidebar.expanded #pdvSidebarToggle {
  border-color: var(--sys-contorno-forte) !important;
  box-shadow: rgba(255, 255, 255, 0.36) 0px 0px 0px 1px, rgba(255, 255, 255, 0.315) 0px 0px 8px, rgba(255, 255, 255, 0.193) 0px 0px 14px, rgba(255, 255, 255, 0.18) 0px 1px 0px inset !important;
}
#pdvApp .pdv-scroll-thumb {
  box-shadow: rgba(255, 255, 255, 0.495) 1px 0px inset, rgba(255, 255, 255, 0.342) -1px 0px inset !important;
}
#pdvApp .pdv-scroll-thumb:hover, #pdvApp .pdv-scroll-thumb:active, #pdvApp .pdv-scroll-rail:focus-visible > .pdv-scroll-thumb {
  box-shadow: rgba(255, 255, 255, 0.63) 1px 0px inset, rgba(255, 255, 255, 0.342) -1px 0px inset, rgba(255, 255, 255, 0.332) 0px 0px 9px 2px, rgba(255, 255, 255, 0.168) 0px 0px 19px 4px !important;
}
#pdvApp #pdvMain .pdv-scroll-thumb:hover, #pdvApp #pdvMain .pdv-scroll-thumb:active, #pdvApp #pdvMain .pdv-scroll-rail:focus-visible > .pdv-scroll-thumb {
  box-shadow: rgba(255, 255, 255, 0.585) 1px 0px inset, rgba(255, 255, 255, 0.342) -1px 0px inset, rgba(255, 255, 255, 0.273) 0px 0px 5px 1px, rgba(255, 255, 255, 0.122) 0px 0px 10px 1px !important;
}
#pdvSidebarHint.pdv-sidebar-hint {
  border-color: var(--sys-contorno);
  box-shadow: rgba(0, 0, 0, 0.38) 0px 10px 20px, rgba(255, 255, 255, 0.144) 0px 0px 0px 1px, rgba(255, 255, 255, 0.077) 0px 0px 10px, rgba(255, 255, 255, 0.12) 0px 1px inset;
}
#pdvApp #pdvSidebar .pdv-nav-row.cash-open .pdv-row-circle {
  box-shadow: rgba(255, 255, 255, 0.882) 0px 0px 0px 1px, rgba(255, 255, 255, 0.315) 0px 0px 8px, rgba(255, 255, 255, 0.193) 0px 0px 14px, rgba(255, 255, 255, 0.18) 0px 1px 0px inset !important;
}
.pdv-upcoming-panel {
  border-color: var(--sys-contorno);
}
@media (hover: hover) and (pointer: fine) {
  .order-product:hover {
    border-color: var(--sys-contorno-forte);
    box-shadow: rgba(0, 0, 0, 0.42) 0px 18px 34px, rgba(255, 255, 255, 0.855) 0px 0px 0px 2px, rgba(255, 255, 255, 0.252) 0px 0px 18px, rgba(255, 255, 255, 0.158) 0px 0px 36px, rgba(255, 255, 255, 0.049) 0px 0px 24px inset;
  }
}
@media (hover: hover) {
  :where(#pdvApp, #pdvLogin, .pdv-modal, .picker-modal, .picker-overlay) :is(button:not(:disabled), [role="button"]:not([aria-disabled="true"]), [tabindex="0"], .order-product, .cart-card, .end-card, .atd-tipo-card, .pay-tile, .pay-block, .kanban-card, .tile.livre, .tile.ocupada, .chip, .pdv-visual-search, label:has(input[type="radio"]), label:has(input[type="checkbox"]), input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not(:disabled), select:not(:disabled), textarea:not(:disabled), #atdFinalizarBtn:not(.is-disabled)):not(.is-disabled):hover {
    border-color: var(--sys-contorno-forte) !important;
    box-shadow: rgba(255, 255, 255, 0.81) 0px 0px 0px 1px, rgba(255, 255, 255, 0.28) 0px 0px 10px, rgba(255, 255, 255, 0.193) 0px 0px 22px !important;
  }
}

/* Carrinho do Balcão: Retirada, Entrega e o botão verde (BALCÃO + total).
   Ao passar o mouse aparece o contorno branco neon, com o fundo de sempre,
   também com o carrinho vazio ou sem cliente, quando eles ainda não fazem
   nada. Nesses casos o clique continua sem efeito: Retirada e Entrega ficam
   desabilitados e o pdv.js ignora o verde travado. O cursor é a mãozinha,
   sem a placa de "proibido". O verde travado não recebia o mouse
   (pointer-events: none no pdv.css), por isso não acendia. */
#pdvApp .order-cart-actions.atd-actions :is(#atdRetiradaBtn, #atdEntregaBtn):disabled,
#pdvApp #atdFinalizarBtn.is-disabled {
  cursor: pointer;
}
#pdvApp #atdFinalizarBtn.is-disabled { pointer-events: auto; }
@media (hover: hover) {
  #pdvApp .order-cart-actions.atd-actions :is(#atdRetiradaBtn, #atdEntregaBtn):hover,
  #pdvApp #atdFinalizarBtn:hover {
    border-color: var(--sys-contorno-forte) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.81), 0 0 10px rgba(255,255,255,.28), 0 0 22px rgba(255,255,255,.193) !important;
  }
}

/* ================= 4. Sem laranja em nada ================= */

/* A cor-base laranja do tema vira branca. Ela pinta botões, textos de
   destaque, a bolinha marcada do seletor e vários preenchimentos de uma vez.
   (Definida em pdv.css, pdv-visual.css e pdv-glass-dark.css; esta carrega
   por último.) */
:root {
  --pdv-orange: #ffffff;
  --pdv-reference-orange: linear-gradient(180deg, #e3e7ee 0%, #ffffff 100%);
}

/* Onde o fundo laranja virou branco e o texto já era branco, o texto passa a
   escuro para continuar legível. */
:root { --sys-texto-sobre-branco: #14171e; }
#envSaveBtn,
.kanban-add-fab,
.comanda-row .pay-btn,
.order-cart-actions:not(.atd-actions) button,
.order-cats .chip.active { color: var(--sys-texto-sobre-branco) !important; }

/* Itens no carrinho da comanda de mesa: pdv-visual.css dava fundo branco ao
   cartão e o tema escuro deixa o texto claro, então ficavam ilegíveis (já
   era assim antes). Mesmo fundo dos demais cartões do tema. */
.order-cart-items .cart-card {
  background: rgba(34,38,48,.84);
  border-color: var(--sys-contorno);
}
/* Nome da forma de pagamento no teclado de valor ("Dinheiro"...): pdv.css
   deixava #333 sobre o fundo grafite (já era assim antes). */
.paykeypad-method-label { color: var(--pdv-text); }

/* Quantidade de cada item no carrinho do Balcão: pdv-visual.css deixava
   #292929 com um seletor mais forte que o do tema escuro (já era assim). */
#atdCartItems .cart-qty-mini span { color: var(--pdv-text); }

/* "⟳ Clique aqui para atualizar" no cadastro de endereço: #444/#666 sobre o
   grafite, quase invisível (já era assim). */
#endRecalcular, #endRecalcular * { color: var(--pdv-text-dim); }

/* preço em verde, como no carrinho do Balcão (vinha #292929 da camada antiga) */
.order-cart-items .cart-card-price { color: var(--pdv-price-green); }

/* Linha "TOTAL" da cobrança: o fundo laranja virou branco, o texto fica escuro. */
.checkout-summary .summary-line.total,
.checkout-summary .summary-line.total * { color: var(--sys-texto-sobre-branco) !important; }

/* Fiado tinha uma cor própria bronze (#9c6b2f), na faixa do laranja: vira
   branca, no mesmo seletor que a define. As demais formas de pagamento
   mantêm suas cores. */
[data-paymethod*="fiado" i], [data-ui-method*="fiado" i] { --payment-color: #ffffff; }

/* "← Mesas" já vinha com texto grafite sobre o fundo grafite (pdv.css usa
   var(--pdv-dark)); fica na cor de texto do tema para aparecer. */
.order-back { color: var(--pdv-text); }

/* Etapa "Preparando" do quadro de retirada/entrega: o pdv.js escreve a cor
   #ff6a00 direto no HTML (cabeçalho da coluna, faixa do cartão e botão de
   avançar), então a troca é pelo atributo style. */
.kanban-col-head[style*="ff6a00"] {
  background: #ffffff !important;
  color: var(--sys-texto-sobre-branco) !important;
}
.kanban-card[style*="ff6a00"] { border-left-color: #ffffff !important; }
.kanban-advance[style*="ff6a00"] {
  background: #ffffff !important;
  color: var(--sys-texto-sobre-branco) !important;
}

/* Títulos de categoria no catálogo do Balcão ("COMBOS DE FRANGO"...): mesmas
   cores dos botões de categoria do rodapé. O da categoria que está na tela
   fica branco e troca junto com o botão conforme o catálogo rola; os outros
   ficam grafite com contorno discreto. Antes todos tinham o mesmo brilho.
   Mesmo seletor e !important da regra do pdv-glass-dark.css; o contorno é
   uma sombra interna para não mudar a altura do título. */
#pdvApp .pdv-catalog-scroll .pdv-category-section .order-cat-banner {
  background: rgba(34,38,48,.88) !important;
  color: var(--pdv-text);
  box-shadow: 0 5px 10px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 .8px var(--sys-contorno) !important;
}
#pdvApp .pdv-catalog-scroll .pdv-category-section.pdv-category-active .order-cat-banner {
  background: linear-gradient(145deg, #ffffff, #e3e7ee) !important;
  color: var(--sys-texto-sobre-branco);
  box-shadow: var(--pdv-selection-shadow), inset 0 0 0 .8px var(--sys-contorno-forte) !important;
}

/* Barras de rolagem brancas em todo o PDV (catálogo, colunas do seletor,
   carrinho, listas e janelas), com o trilho escuro de sempre. Antes: cinza
   parado e laranja com o mouse em cima. O catálogo tinha um cinza com
   !important no pdv-classic-reference.css, por isso o !important lá. */
:root { --pdv-scrollbar-thumb: #ffffff; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb,
#pdvApp ::-webkit-scrollbar-thumb, #pdvLogin ::-webkit-scrollbar-thumb,
.pdv-modal ::-webkit-scrollbar-thumb, .picker-modal ::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #d9dee6 0%, #ffffff 45%, #d9dee6 100%);
}
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-thumb,
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-thumb:hover,
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-thumb:active {
  background: linear-gradient(90deg, #d9dee6 0%, #ffffff 45%, #d9dee6 100%) !important;
}

/* Regras abaixo: cada laranja escrito direto nas camadas anteriores (fundos,
   degradês, textos, ícones, cursor, barras de rolagem e brilhos), com o
   mesmo seletor e a mesma prioridade, trocado por branco. Degradês de dois
   tons de laranja viram branco para cinza-claro, para manter o relevo. */
.pdv-login-card button {
  background-image: linear-gradient(145deg, #ffffff, #e3e7ee);
}
.pdv-nav-row.active {
  background-color: rgba(255, 255, 255, 0.11);
}
.pdv-sidebar.expanded .pdv-nav-row.active {
  background-color: rgba(255, 255, 255, 0.11);
}
.tile.ocupada {
  background-color: rgba(255, 255, 255, 0.35);
}
.tile.ocupada.time-orange {
  background-color: rgba(255, 255, 255, 0.28);
}
.atd-tipo-card.selected {
  background-color: rgba(255, 255, 255, 0.18);
}
.picker-col-sub {
  color: #ffffff;
}
.picker-stepper button {
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.pdv-nav-row.active .pdv-row-label {
  color: #ffffff;
}
.cart-qty-mini button.plus {
  color: #ffffff;
}
.pdv-nav-row.active, .pdv-sidebar.expanded .pdv-nav-row.active {
  background-image: linear-gradient(135deg, #ffffff, #e3e7ee);
}
.picker-head .close-x:hover {
  color: #ffffff;
}
.picker-col-title::before {
  color: #ffffff;
}
.order-products {
  scrollbar-color: #ffffff rgb(238, 238, 238);
}
.order-cart-actions.atd-actions button:not(:disabled):hover {
  background-color: #ffffff;
}
.pdv-visual-search {
  color: #ffffff;
}
.atd-tipo-card.selected, #ckClienteCard {
  background-color: rgba(255, 255, 255, 0.18);
}
.checkout-summary .summary-line.total {
  background-color: #ffffff;
}
.pay-block[data-paymethod*="fiado" i] .pay-block-ico {
  color: #ffffff;
}
.endtela-pin span {
  background-color: #ffffff;
}
.endtela-balao span {
  color: #ffffff;
}
#atdEntregaBtn:not(:disabled):hover {
  background-color: #ffffff;
}
.order-cats .chip.active, .order-cats-bottom .chip.active {
  background-image: linear-gradient(145deg, #ffffff, #e3e7ee);
}
/* Com o mouse em cima, o botão de categoria marcado continua branco: o
   pdv-glass-dark.css trocava o fundo pelo grafite e o texto escuro sumia.
   Era o único branco de "selecionado" que escurecia (varredura em todas as
   seções, na comanda e na cobrança). */
.order-cats .chip.active:hover, .order-cats-bottom .chip.active:hover {
  background-image: linear-gradient(145deg, #ffffff, #e3e7ee);
}
/* Identificação e cadastro de endereço (tela cheia): o mesmo fundo grafite
   das outras telas, sem os focos de luz nos cantos (eram laranja no
   pdv-glass-dark.css e tinham virado brancos). */
#pdvModalOverlay:has(#idTelefone), #pdvModalOverlay:has(#endCep) {
  background: var(--sys-background);
}
/* Identificação: Telefone, Nome e "Cadastrar endereço" com a mesma largura
   (até 1100px), começando e terminando nas mesmas bordas. Antes eram 900px
   nos campos e 1210px no endereço (checkout-reference.css), mesmos
   seletores de lá. Em telas menores ocupam a largura disponível. */
#pdvModalBody:has(#idTelefone) > .pdv-field,
#pdvModalBody:has(#idTelefone) #endWrap { width: min(1100px, 100%); }
/* Identificação: faixa de cima espelhando a de baixo (Cancelar, Voltar,
   Salvar): o título fica centralizado na faixa, com a mesma folga (26px)
   em cima e embaixo, e uma linha de ponta a ponta separa a faixa dos
   campos. Sem o "✕": a tela fecha por Cancelar ou Voltar. */
#pdvModalBody:has(#idTelefone) { padding-top: 0; padding-left: 34px; padding-right: 34px; }
#pdvModalBody:has(#idTelefone) > h3 {
  margin: 0 -34px 16px;
  padding: 26px 34px;
  min-height: 0;
  gap: 12px;
  border-bottom: 1px solid var(--sys-contorno);
}
#pdvModalBody:has(#idTelefone) #modalCloseBtn { display: none; }
/* Identificação com a mesma fonte, tamanhos, alinhamento e espaçamento da
   tela de endereço (identificacao-ajustes.css / pdv-glass-dark.css):
   títulos de 16px com ícone de 26x32 e 12px de vão (eram 36px e 34x34),
   margens laterais de 34px (eram 40px), campos de 66px com texto de 18px e
   rótulo de 14px (eram 72px, 20px e 15px), 16px entre os campos (eram
   14px) e a faixa de baixo com 18px/26px de folga e botões de 150x54 e
   texto de 17px (eram 26px/36px, 130x57 e 18px; Salvar tinha 276px). */
#pdvModalBody:has(#idTelefone) > h3::after,
#pdvModalBody:has(#idTelefone) .end-titulo::after,
#pdvModalBody:has(#idTelefone) #endToggle::after { font-size: 16px; line-height: 19.2px; }
#pdvModalBody:has(#idTelefone) > h3::before,
#pdvModalBody:has(#idTelefone) .end-titulo::before,
#pdvModalBody:has(#idTelefone) #endToggle::before { width: 26px; height: 32px; }
#pdvModalBody:has(#idTelefone) .end-titulo,
#pdvModalBody:has(#idTelefone) #endToggle { gap: 12px; }
#pdvModalBody:has(#idTelefone) #endToggle {
  min-height: 66px;
  margin-top: 0;
  padding: 0 16px;
  box-sizing: border-box;
}
#pdvModalBody:has(#idTelefone) #endSeta { font-size: 18px; }
#pdvModalBody:has(#idTelefone) > .pdv-field { margin-bottom: 16px; }
#pdvModalBody:has(#idTelefone) .pdv-field label {
  top: 10px;
  left: 16px;
  font-size: 14px;
  line-height: 17px;
}
#pdvModalBody:has(#idTelefone) > .pdv-field:has(#idTelefone) label { left: 110px; }
#pdvModalBody:has(#idTelefone) .pdv-field input {
  height: 66px;
  padding: 28px 16px 9px;
  font-size: 18px;
}
#pdvModalBody:has(#idTelefone) > .pdv-field:has(#idTelefone)::before { height: 66px; }
#pdvModalBody:has(#idTelefone) .pdv-field textarea { font-size: 18px; }
/* Novo/Editar cliente (aba Clientes) com a mesma cara da Identificação: o
   js/pdv-telas-padrao.js põe nele a marca que ativa todas as regras de lá.
   Aqui só o que é dele: o título (o da Identificação vem escrito no CSS,
   "IDENTIFICAÇÃO"; este usa o próprio texto) e a ordem Voltar, Cancelar,
   Salvar. */
#pdvModalBody:has(#cadTelefone) > h3 {
  font-size: 16px;
  line-height: 19.2px;
  text-transform: uppercase;
}
#pdvModalBody:has(#cadTelefone) > h3::after { content: none; }
#pdvModalBody:has(#cadTelefone) .pdv-id-actions #cadVoltarBtn { order: 1; }
#pdvModalBody:has(#cadTelefone) .pdv-id-actions #cadCancelarBtn { order: 2; }
#pdvModalBody:has(#cadTelefone) .pdv-id-actions #cadSalvarBtn { order: 3; }

/* Janelas pequenas (Abrir mesa, Vincular entregador, Transferir item,
   Dividir conta, PIN, Importar lista, detalhe do histórico) no mesmo padrão
   da Identificação e do endereço, sem virar tela cheia: título de 16px em
   maiúsculas numa faixa com 26px de folga e linha de ponta a ponta, o "✕"
   centralizado nela; campos de 66px com rótulo de 14px dentro da caixa e
   texto de 18px, 16px entre eles; botões de 54px, texto de 17px, Cancelar
   vermelho (#d31305) e Salvar/Confirmar/Importar verde (#40bf59), numa
   faixa com linha em cima; cantos de 8px. A janela tem 24px de folga. Os
   !important vencem estilos escritos direto no HTML pelo pdv.js. */
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) { border-radius: 8px; }
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) > h3 {
  margin: -24px -24px 16px;
  padding: 26px 58px 26px 24px;
  border-bottom: 1px solid var(--sys-contorno);
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: left !important;
}
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) > .close-x { top: 21px; right: 24px; }
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) .pdv-field {
  position: relative;
  margin-bottom: 16px;
}
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) .pdv-field label {
  position: absolute;
  top: 10px;
  left: 16px;
  right: 16px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: #aeb8c5;
  pointer-events: none;
  z-index: 1;
}
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) .pdv-field :is(input, select) {
  height: 66px;
  padding: 28px 16px 9px;
  font-size: 18px;
  border-radius: 8px;
}
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) .pdv-field textarea {
  padding: 34px 16px 14px;
  font-size: 18px;
  border-radius: 8px;
}
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) .pdv-id-actions {
  display: flex;
  gap: 12px;
  margin: 16px -24px -24px;
  padding: 18px 24px;
  border-top: 1px solid var(--sys-contorno);
}
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) .pdv-id-actions button,
#pdvModalBody #envSaveBtn,
#pdvModalBody .split-confirm-btn {
  flex: 1;
  min-height: 54px;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 17px !important;
  font-weight: 400 !important;
}
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) .pdv-id-actions .pdv-btn-cancelar {
  background: #d31305;
  color: #ffffff;
}
#pdvModalBody:not(:has(#idTelefone)):not(:has(.endtela)) .pdv-id-actions .pdv-btn-salvar,
#pdvModalBody #envSaveBtn,
#pdvModalBody .split-confirm-btn,
#pdvModalBody .kp-enter,
#pdvModalBody .pin-enter {
  background: #40bf59 !important;
  color: #ffffff !important;
}

/* Botões de ação das seções nas mesmas cores das telas de cadastro:
   Cancelar/Excluir/Cancelar mesa no vermelho #d31305, Salvar/Novo
   cliente/Confirmar pedido no verde #40bf59 (vinham #e5393f e #00a651), e
   os secundários da comanda (Identificar, Voltar) no grafite do Voltar
   (tinham virado brancos na troca do laranja). O "Cancelar mesa" tinha texto
   escuro sobre o vermelho; fica branco. Cores de etapa do quadro (Aguardando
   etc.) e o "✕ Cancelar" da cobrança seguem com as cores próprias. */
#pdvApp .pdv-btn-cancelar { background: #d31305; color: #ffffff; }
#pdvApp .pdv-btn-salvar { background: #40bf59; color: #ffffff; }
#pdvApp .order-cart-actions:not(.atd-actions) :is(#identificarBtn, #voltarBtn2) {
  background: linear-gradient(145deg, #2c313c, #1c1f26) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: var(--pdv-text) !important;
}
#pdvApp .order-cart-actions:not(.atd-actions) #cancelarMesaBtn {
  background: #d31305 !important;
  color: #ffffff !important;
}
#pdvApp .order-cta #checkoutBtn:not(:disabled) { background: #40bf59; }
#pdvModalBody:has(#idTelefone) .pdv-id-actions { padding: 18px 26px; }
@media (min-width: 761px) {
  #pdvModalBody:has(#idTelefone) .pdv-id-actions button {
    min-width: 150px;
    min-height: 54px;
    padding: 0 22px;
    font-size: 17px;
  }
  #pdvModalBody:has(#idTelefone) .pdv-id-actions .pdv-btn-salvar { width: auto; }
}
/* Botões de baixo na ordem Voltar, Cancelar, Salvar (no HTML vêm Cancelar,
   Voltar, Salvar); só a posição muda, cada um faz o mesmo de antes. */
#pdvModalBody:has(#idTelefone) .pdv-id-actions #idVoltarBtn { order: 1; }
#pdvModalBody:has(#idTelefone) .pdv-id-actions #idCancelarBtn { order: 2; }
#pdvModalBody:has(#idTelefone) .pdv-id-actions #idSalvarBtn { order: 3; }
/* Tela de endereço, coluna do formulário: título numa faixa com a mesma
   folga da Identificação (26px em cima e embaixo) e uma linha reta de ponta
   a ponta da coluna. Todos os vãos entre os campos com 16px, na vertical e
   entre as colunas de Número/Cidade e Bairro/UF (eram 14px). O aviso
   ("Localização ajustada à mão"...) só ocupa espaço quando tem mensagem:
   vazio, deixava 48px entre CEP e Rua. */
.endtela-form > .endtela-titulo {
  margin: -34px -34px 16px;
  padding: 26px 34px;
  border-bottom: 1px solid var(--sys-contorno);
}
.endtela-form > .endtela-aviso:empty { display: none; }
.endtela-form .endtela-linha { column-gap: 16px; }
/* Tela de endereço: o Voltar (acrescentado pelo js/pdv-telas-padrao.js)
   com a mesma cara do Voltar da Identificação; o tamanho vem da regra dos
   botões dessa faixa (identificacao-ajustes.css). */
.endtela-acoes .pdv-btn-voltar {
  background: linear-gradient(145deg, #2c313c, #1c1f26);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--pdv-text);
}
#pdvApp :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select), #pdvLogin :is(input, textarea, select) {
  caret-color: #ffffff;
}
.pdv-nav-row.active .pdv-row-circle::after {
  background-color: #ffffff;
}
#pdvApp :hover::-webkit-scrollbar-thumb, #pdvLogin :hover::-webkit-scrollbar-thumb, .pdv-modal :hover::-webkit-scrollbar-thumb, .picker-modal :hover::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(90deg, #e3e7ee 0%, #ffffff 45%, #e3e7ee 100%);
}
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-thumb {
  background-color: #ffffff;
}
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #ffffff;
}
#pdvApp .pdv-scroll-thumb {
  background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 48%, #ffffff 100%);
}

/* ================= 5. Barras de rolagem ================= */

/* Um padrão só em todas as telas com rolagem (seções, carrinho, janelas,
   seletor e login): sem setas nas pontas, trilho grafite e polegar branco
   com as pontas redondas. O polegar é uma pílula em SVG sem viewBox, então
   o raio da ponta fica sempre redondo, qualquer que seja o comprimento.
   Barras escondidas de propósito (barra lateral) seguem escondidas: elas
   usam scrollbar-width: none, que vence este desenho.
   O desenho ::-webkit-scrollbar só vale com scrollbar-width e
   scrollbar-color em auto (o pdv-glass-dark.css já deixa assim no Chrome).
   :where() deixa a especificidade baixa; o !important vence as regras de
   polegar, trilho e largura das camadas anteriores. Fica no fim do arquivo. */
:where(#pdvApp, #pdvLogin, .pdv-modal, .picker-modal) ::-webkit-scrollbar,
:where(.pdv-modal, .picker-modal)::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
:where(#pdvApp, #pdvLogin, .pdv-modal, .picker-modal) ::-webkit-scrollbar-button,
:where(.pdv-modal, .picker-modal)::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
:where(#pdvApp, #pdvLogin, .pdv-modal, .picker-modal) ::-webkit-scrollbar-track,
:where(#pdvApp, #pdvLogin, .pdv-modal, .picker-modal) ::-webkit-scrollbar-corner,
:where(.pdv-modal, .picker-modal)::-webkit-scrollbar-track,
:where(.pdv-modal, .picker-modal)::-webkit-scrollbar-corner {
  background: rgb(37, 43, 51) !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
:where(#pdvApp, #pdvLogin, .pdv-modal, .picker-modal) ::-webkit-scrollbar-thumb,
:where(.pdv-modal, .picker-modal)::-webkit-scrollbar-thumb {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='3' fill='%23ffffff'/%3E%3C/svg%3E") center / 6px 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 32px;
  min-width: 32px;
}
:where(#pdvApp, #pdvLogin, .pdv-modal, .picker-modal) ::-webkit-scrollbar-thumb:horizontal,
:where(.pdv-modal, .picker-modal)::-webkit-scrollbar-thumb:horizontal {
  background-size: 100% 6px !important;
}

/* Catálogo do Balcão: o mesmo padrão, com o tamanho de antes (polegar de
   comprimento normal). O pdv-classic-reference.css o deixava fino e cinza
   com !important e o pdv-glass-dark.css tinha trilho e polegar próprios,
   também com !important: aqui vão os mesmos seletores. */
#pdvApp .pdv-catalog-scroll {
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
}
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
}
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-track,
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-corner {
  background: rgb(37, 43, 51) !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-thumb,
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-thumb:hover,
#pdvApp .pdv-catalog-scroll::-webkit-scrollbar-thumb:active {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='3' fill='%23ffffff'/%3E%3C/svg%3E") center / 6px 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  min-height: 40px !important;
}

/* Seletor de complementos (cada etapa e a barra de baixo, entre as
   colunas): a mesma espessura do resto (10px de trilho, polegar de 6px), com metade do
   comprimento normal. O polegar do navegador continua inteiro (é ele que se
   arrasta), mas só a pílula branca aparece: ocupa 50% dele e corre lá
   dentro conforme a rolagem (--pdv-rolagem, de 0 no início a 1 no fim,
   posta pelo js/pdv-barra-rolagem.js). Assim encosta no topo no início e no
   fundo no fim, sempre dentro da parte que se arrasta. */
.picker-col-list, .picker-columns {
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
}
.picker-modal .picker-col-list::-webkit-scrollbar,
.picker-modal .picker-columns::-webkit-scrollbar {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
}
.picker-modal .picker-col-list::-webkit-scrollbar-thumb,
.picker-modal .picker-col-list::-webkit-scrollbar-thumb:hover,
.picker-modal .picker-col-list::-webkit-scrollbar-thumb:active {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='3' fill='%23ffffff'/%3E%3C/svg%3E") center calc(var(--pdv-rolagem, 0) * 100%) / 6px 50% no-repeat !important;
  min-height: 48px !important;
}
.picker-modal .picker-columns::-webkit-scrollbar-thumb,
.picker-modal .picker-columns::-webkit-scrollbar-thumb:hover,
.picker-modal .picker-columns::-webkit-scrollbar-thumb:active {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='3' fill='%23ffffff'/%3E%3C/svg%3E") calc(var(--pdv-rolagem, 0) * 100%) center / 50% 6px no-repeat !important;
  min-width: 48px !important;
}

/* ================= 6. Escala única de tamanhos ================= */

/* Todas as telas na mesma proporção, sem nenhuma parecer ampliada ou
   reduzida (antes iam de 10px a 22px de texto e de 31px a 65px de botão):
     12px  marcas e horários (selos, hora, forma de pagamento)
     13px  informação secundária (endereço, tempo, subtítulos)
     14px  texto comum
     16px  nomes e títulos
     18px  valores em destaque
     botões de ação 54px de altura com texto de 17px; botões dentro de
     listas e cartões 40px com texto de 14px.
   O Balcão (catálogo e carrinho) já estava nessa proporção e não muda. */

/* Retirada e Entrega (quadros) */
#pdvApp .kanban-col-head > span { font-size: 14px; }
#pdvApp .kanban-card-id { font-size: 12px; }
#pdvApp .kanban-card-name { font-size: 16px; }
#pdvApp .kanban-card-timer, #pdvApp .kanban-card-timer span { font-size: 13px; }
#pdvApp .kanban-card-price { font-size: 16px; }
#pdvApp .kanban-card-pay { font-size: 12px; }
#pdvApp .kanban-card-addr, #pdvApp .kanban-card-entregador { font-size: 13px; }
#pdvApp .kanban-empty { font-size: 14px; }
#pdvApp .kanban-entregador-btn { min-height: 40px; font-size: 14px; }

/* Mesas e histórico */
#pdvApp .tile-name { font-size: 16px; }
#pdvApp .tile-meta, #pdvApp .tile-meta span { font-size: 13px; }
#pdvApp .hist-title { font-size: 16px; }
#pdvApp .hist-mesa { font-size: 14px; }
#pdvApp .hist-badge, #pdvApp .hist-time, #pdvApp .hist-methods { font-size: 12px; }
#pdvApp .hist-row-mid { font-size: 13px; }
#pdvApp .hist-total { font-size: 14px; }

/* Comandas da mesa */
#pdvApp .pdv-hub > h2 { font-size: 18px; }
#pdvApp .order-back { min-height: 40px; font-size: 14px; }
#pdvApp .comanda-row .num, #pdvApp .comanda-row .name { font-size: 14px; }
#pdvApp .comanda-row .total { font-size: 18px; }
#pdvApp .comanda-row .time { font-size: 13px; }
#pdvApp .comanda-row .abrir-btn { min-height: 40px; font-size: 14px; }
#pdvApp .add-comanda-btn { min-height: 54px; font-size: 17px; }

/* Caixa e Clientes */
#pdvApp .caixa-card > h3 { font-size: 16px; }
#pdvApp .caixa-card > .panel-sub, #pdvApp .caixa-summary-row > span { font-size: 14px; }
#pdvApp .caixa-summary-row.total > span { font-size: 16px; }
#pdvApp #caixaFecharBtn, #pdvApp #caixaAbrirBtn, #pdvApp .cli-toolbar button { min-height: 54px; font-size: 17px; }
#pdvApp .caixa-card .pdv-field > label { font-size: 14px; }
#pdvApp .cli-row-info > strong { font-size: 16px; }
#pdvApp .cli-row-info > span { font-size: 14px; }
#pdvApp .cli-row-info > .cli-row-end, #pdvApp .cli-row-pedidos { font-size: 13px; }
#pdvApp .cli-row-acoes button { min-height: 40px; font-size: 14px; }

/* Seletor de complementos: o rodapé estava maior que o resto (botões de
   65px, preço de 22px); títulos e opções numa medida só em qualquer tela. */
.picker-col-title { font-size: 16px; }
.picker-col-sub { font-size: 13px; }
.picker-opt-name, .picker-opt:has(.picker-opt-price) .picker-opt-name { font-size: 14px; line-height: 21px; }
.picker-opt-price { font-size: 14px; line-height: 18px; }
.picker-foot { flex: 0 0 auto; min-height: 0; padding-block: 18px; }
.picker-foot .pname { font-size: 16px; line-height: 22px; }
.picker-foot .pfrom { font-size: 13px; }
.picker-foot .pprice { font-size: 18px; line-height: 24px; }
.picker-foot :is(button.cancel, button.incluir, #pickerVoltarBtn) {
  min-height: 54px;
  padding-block: 0;
  font-size: 17px;
  line-height: 22px;
}
.picker-foot button.incluir strong { font-size: 17px; }

/* Faixa de baixo com a mesma altura em todas as telas: 110px, a da faixa
   dos botões de categoria do Balcão (era 115px no seletor e 91px na
   Identificação, no Novo cliente e no endereço), com o conteúdo
   centralizado na altura. */
.picker-foot {
  height: 110px;
  min-height: 110px;
  padding-block: 0;
  box-sizing: border-box;
  align-items: center;
  align-content: center;
}
#pdvModalBody:has(#idTelefone) .pdv-id-actions {
  height: 110px;
  padding-block: 0;
  box-sizing: border-box;
  align-items: center;
}
.endtela-rodape {
  height: 110px;
  min-height: 110px;
  padding-block: 0;
  box-sizing: border-box;
  align-items: center;
}
@media (max-width: 760px) {
  .picker-foot, .endtela-rodape, #pdvModalBody:has(#idTelefone) .pdv-id-actions { height: auto; }
}

/* Cobrança: a coluna da esquerda usava a barra fina do navegador (11px):
   passa ao mesmo desenho das outras; "Dividir Conta" é botão de ação. */
#pdvApp .checkout-left { scrollbar-width: auto !important; scrollbar-color: auto !important; }
#pdvApp .split-bill-btn { min-height: 54px; font-size: 17px; }

/* Balcão com cliente identificado: os cartões (cliente, entrega, voltar)
   ocupam a mesma faixa dos botões Retirada/Entrega, com a mesma linha
   reta em cima, o mesmo fundo, altura (139px), folga (12px), vão (9px) e
   cartões da mesma altura dos botões (113px). Antes a linha era cinza-clara
   do tema antigo, sem fundo, e tudo um pouco maior. */
#pdvApp .order-cart .atd-tipo-cards {
  box-sizing: border-box;
  height: 139px;
  padding: 12px;
  gap: 9px;
  border-top: 1px solid var(--sys-contorno);
  background: rgb(30, 34, 43);
}
#pdvApp .order-cart .atd-tipo-cards .atd-tipo-card {
  height: 113px;
  min-height: 0;
  box-sizing: border-box;
}
#pdvApp .order-cart .atd-tipo-cards .atd-tipo-card { overflow: hidden; justify-content: center; }
#pdvApp .order-cart .atd-tipo-cards .atd-tipo-card > :is(strong, span:not(.atd-tipo-ico)) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* linha reta entre os cartões do cliente e a faixa do botão verde, como
   aparece entre Retirada/Entrega e o botão */
#pdvApp .order-cart .atd-tipo-cards { border-bottom: 1px solid var(--sys-contorno); }

/* Pagamento (Balcão, Mesa e Entrega usam a mesma tela): cartões do
   cliente, da entrega e o Voltar no mesmo tamanho e vão do Balcão
   (113px de altura, 9px entre eles, texto numa linha com "..."). Eram
   124px e 10px. */
#pdvApp .checkout-cards { gap: 9px; }
#pdvApp .checkout-cards .atd-tipo-card {
  height: 113px;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  justify-content: center;
}
#pdvApp .checkout-cards .atd-tipo-card > :is(strong, span:not(.atd-tipo-ico)) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Coluna da direita do pagamento com as mesmas faixas do carrinho do
   Balcão: cartões numa faixa de ponta a ponta (139px, linha em cima e
   embaixo, fundo grafite, 12px de folga) e o botão verde numa faixa de
   110px embaixo (botão de 86px com 12px de folga), as duas encostadas no
   fim da tela, na mesma altura das do Balcão. */
#pdvApp .checkout-right { padding-bottom: 0 !important; overflow-x: hidden !important; }
#pdvApp .checkout-right > .checkout-cards {
  box-sizing: border-box;
  height: 139px;
  margin: 0 -10px 0 !important;
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--sys-contorno);
  border-bottom: 1px solid var(--sys-contorno);
  background: rgb(30, 34, 43);
}
#pdvApp .checkout-right > #finalizarBtn.checkout-cta {
  box-sizing: border-box;
  height: 86px !important;
  min-height: 0 !important;
  margin: 12px 2px;
  padding-block: 0 !important;
}/* Resumo encostado na faixa dos cartões, com o mesmo vão de 10px que separa a soma dos produtos;
   o espaço que sobra fica para a lista de formas de pagamento, em cima. */
#pdvApp .checkout-right > .pay-list { flex: 1 1 auto; min-height: 0; }
#pdvApp .checkout-right > .checkout-summary { flex: 0 0 auto; margin-top: auto !important; padding-bottom: 7px !important; }
#pdvApp .checkout-right > #finalizarBtn.checkout-cta { flex-shrink: 0; }
/* Divisa catálogo | carrinho igual à do pagamento (barra, linha da esquerda, linha do carrinho). */
#pdvApp .order-catalog { box-sizing: border-box; border-right: 1px solid var(--glass-orange-edge); }
/* Pagamento com a mesma proporção do Balcão: a coluna da direita tem a largura do carrinho
   (1/3 da área ao lado da barra lateral) e começa no mesmo ponto da tela. */
@media (min-width: 761px) {
  #pdvApp .checkout-left { flex: 1 1 auto !important; width: auto !important; }
  #pdvApp .checkout-right { flex: 0 0 calc((100% - 80px) / 3) !important; width: calc((100% - 80px) / 3) !important; max-width: none !important; border-top: 0 !important; border-right: 0 !important; }
}
/* Faixa da soma dos pagamentos com linha em cima e embaixo, como as outras faixas. */
#pdvApp .checkout-summary .summary-line.pago { border-top: 1px solid var(--sys-contorno) !important; border-bottom: 1px solid var(--sys-contorno) !important; border-radius: 0 !important; box-shadow: none !important; }
/* Resumo: todos os nomes e valores em negrito; a soma dos pagamentos com o texto na mesma
   coluna das faixas de baixo (10px da coluna + 10px da faixa) e no mesmo tamanho. */
#pdvApp .checkout-summary .summary-line, #pdvApp .checkout-summary .summary-line * { font-weight: 700 !important; }
#pdvApp .checkout-summary .summary-line.pago { padding-inline: 20px !important; font-size: 18px !important; line-height: 24px !important; align-items: center; }
/* Letra escura em fundo claro parece mais fina: a taxa passa a usar letra branca como as
   outras faixas coloridas. */
#pdvApp .checkout-summary .summary-line.taxa, #pdvApp .checkout-summary .summary-line.taxa * { color: #fff !important; }
/* Pagamento com algo lançado: o cartão Voltar vira Cancelar (js/pdv-telas-padrao.js), no
   mesmo vermelho dos outros botões de cancelar (#d31305), com a fonte dos outros cartões, e o "✕ Cancelar" solto do resumo some. */
#pdvApp #cancelarPagsBtn { display: none !important; }
#pdvApp .checkout-cards #ckVoltarBtn.pdv-voltar-cancelar .atd-tipo-ico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important; }
#pdvApp .checkout-cards #ckVoltarBtn.pdv-voltar-cancelar { background: #d31305 !important; border-color: #d31305 !important; }
#pdvApp .checkout-cards #ckVoltarBtn.pdv-voltar-cancelar strong { color: #fff !important; }
#pdvApp .checkout-cards #ckVoltarBtn.pdv-voltar-cancelar .atd-tipo-ico { background-color: #fff !important; }
/* Formas de pagamento já lançadas (lista no topo da coluna da direita): sempre com o
   mesmo contorno branco neon dos cartões de cliente e entrega, qualquer que seja a forma. */
#pdvApp .checkout-right .pay-list .pay-row {
  border-color: var(--sys-contorno-forte) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.882), 0 0 8px rgba(255,255,255,.333), 0 0 22px rgba(255,255,255,.286), inset 0 0 18px rgba(255,255,255,.063) !important;
}
/* Teclado do valor no pagamento: tudo centralizado na coluna, sem rolagem, com vãos
   iguais (10px entre visor e teclas, como entre as teclas; 16px até a forma e até o Voltar). */
#pdvApp .checkout-left > .paykeypad-wrap { box-sizing: border-box; flex: 1 1 auto; min-height: 100%; padding: 0 !important; gap: 0 !important; justify-content: center !important; align-items: center !important; }
#pdvApp .paykeypad-wrap > .paykeypad-display { margin: 0 0 10px !important; }
#pdvApp .paykeypad-wrap > .paykeypad { margin: 0 !important; }
#pdvApp .paykeypad-wrap > .paykeypad-method { margin: 16px 0 !important; justify-content: center; }
#pdvApp .paykeypad-wrap > .paykeypad-back { margin: 0 !important; }
/* Voltar e Precisa de troco como a última linha do teclado (js/pdv-troco.js): mesma
   altura, cantos, fundo e fonte das teclas, duas colunas cada; ícone + nome como nos
   cartões Voltar do PDV. Ligado, o Precisa de troco ganha o contorno neon. */
#pdvApp .paykeypad > .pdv-kp-acao { grid-column: span 2; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; padding: 0 !important; white-space: nowrap; min-width: 0; width: auto; font-size: 18px !important; font-weight: 400 !important; text-transform: uppercase; text-align: center; line-height: 1.2; }
#pdvApp .paykeypad > .pdv-kp-acao .pdv-kp-ico { display: none !important; }
#pdvApp .paykeypad > .pdv-kp-voltar:last-child { grid-column: 1 / -1; }
#pdvApp .paykeypad > .pdv-kp-acao .pdv-kp-ico { display: block; width: 24px; height: 24px; flex: 0 0 24px; background: currentColor; -webkit-mask: var(--pdv-kp-ico) center/contain no-repeat; mask: var(--pdv-kp-ico) center/contain no-repeat; }
#pdvApp .paykeypad > .pdv-kp-voltar { --pdv-kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%205%203%2012l7%207M3%2012h10a8%208%200%200%201%208%208%22%2F%3E%3C%2Fsvg%3E"); }
#pdvApp .paykeypad > .pdv-kp-troco { --pdv-kp-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%209h3V5m14%200v4h3M2%2015h3v4m14%200v-4h3%22%2F%3E%3C%2Fsvg%3E"); }
#pdvApp .paykeypad > #pdvTrocoBtn.is-on {
  border-color: var(--sys-contorno-forte) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.882), 0 0 8px rgba(255,255,255,.333), 0 0 22px rgba(255,255,255,.286), inset 0 0 18px rgba(255,255,255,.063) !important;
}
#pdvApp .paykeypad-wrap .paykeypad-display { position: relative; }
#pdvApp .paykeypad-wrap .pdv-troco-dica {
  position: absolute; top: 8px; right: 12px; left: 12px;
  font-size: 13px; line-height: 16px; font-weight: 400; text-align: right;
  color: var(--pdv-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Teclado aberto: a forma escolhida (ícone + nome) vai para o título do alto, no lugar de
   "FORMA DE PAGAMENTO" (js/pdv-troco.js), e sai de baixo do teclado. */
#pdvApp .paykeypad-wrap > .paykeypad-method { display: none !important; }
#pdvApp .checkout-titles .checkout-title.pdv-titulo-forma { display: flex; align-items: center; justify-content: center; gap: 14px; }
#pdvApp .checkout-title.pdv-titulo-forma .paykeypad-method-ico { display: block; width: 40px; height: 40px; flex: 0 0 40px; }
#pdvApp .checkout-title.pdv-titulo-forma .paykeypad-method-ico svg { width: 100%; height: 100%; display: block; }
#pdvApp .checkout-title.pdv-titulo-forma .paykeypad-method-label { font: inherit; color: inherit; text-transform: uppercase; }
/* Última linha do teclado no Dinheiro: VOLTAR e PRECISA DE TROCO lado a lado, de borda a
   borda do teclado, com 10px entre eles e a mesma folga dos dois lados de cada nome
   (118 : 216 dos 334px livres = 27px de folga em cada botão). */
#pdvApp .paykeypad > .pdv-kp-linha { grid-column: 1 / -1; display: grid; grid-template-columns: 118fr 216fr; gap: inherit; min-width: 0; }
#pdvApp .paykeypad > .pdv-kp-linha > .pdv-kp-acao { grid-column: auto; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; white-space: nowrap; min-width: 0; font-size: 18px !important; font-weight: 400 !important; text-transform: uppercase; }
#pdvApp .paykeypad > .pdv-kp-linha .pdv-kp-ico { display: none !important; }
#pdvApp .paykeypad > .pdv-kp-linha > #pdvTrocoBtn.is-on {
  border-color: var(--sys-contorno-forte) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.882), 0 0 8px rgba(255,255,255,.333), 0 0 22px rgba(255,255,255,.286), inset 0 0 18px rgba(255,255,255,.063) !important;
}
/* Depois de lançar com troco, o botão PRECISA DE TROCO vira TROCO R$ x,xx em verde. */
#pdvApp .paykeypad > .pdv-kp-linha > #pdvTrocoBtn.is-troco { background: #40bf59 !important; border-color: #40bf59 !important; color: #fff !important; box-shadow: none !important; }

/* ================= 7. Polimento (auditoria de 2026-10-03) ================= */

/* Manrope de verdade em todas as telas. O "inherit" do pdv-glass-dark.css
   perdia para regras mais fortes das camadas antigas: a Identificação, o
   Novo cliente e o endereço saíam em Arial (#pdvModalBody:has(#idTelefone)
   no checkout-reference.css) e o rodapé do seletor, os "− +" e a quantidade
   em Roboto (font: ... Roboto no picker-reference.css). Só a família muda;
   tamanho, peso e espaçamento continuam os de cada regra. Os números ficam
   com largura fixa também onde o "font:" das camadas antigas desligava. */
:is(#pdvApp, #pdvLogin, .pdv-modal, .picker-modal, .pdv-overlay, .picker-overlay, #pdvModalOverlay, #pickerOverlay),
:is(#pdvApp, #pdvLogin, .pdv-modal, .picker-modal, .pdv-overlay, .picker-overlay, #pdvModalOverlay, #pickerOverlay) * {
  font-family: "Manrope", "Segoe UI", Arial, sans-serif !important;
  font-variant-numeric: tabular-nums;
}

/* Quadro de Retirada/Entrega: na etapa "Pronto" o texto branco sobre o
   amarelo (#f2c200) tinha contraste 1,7:1, ilegível. As cores das etapas
   continuam as mesmas; só o texto e o ícone do avançar ficam escuros, como
   já é na etapa "Preparando" (branca). */
.kanban-col-head[style*="f2c200"],
.kanban-advance[style*="f2c200"] { color: var(--sys-texto-sobre-branco) !important; }
/* O mesmo texto escuro em "Aguardando" (vermelho #e5393f, era 4,2:1 com
   branco) e "Retirado"/"Entregue" (verde #00a651, era 3,2:1; escuro dá
   5,5:1). "Trânsito" (azul) segue branco, que lá lê melhor. */
.kanban-col-head:is([style*="e5393f"], [style*="00a651"]),
.kanban-advance:is([style*="e5393f"], [style*="00a651"]) { color: var(--sys-texto-sobre-branco) !important; }

/* Avançar do cartão do quadro com 44x44 (eram 34x34): é tocado com o dedo
   na correria do balcão e ficava fácil de errar. */
#pdvApp .kanban-advance {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  font-size: 17px;
}

/* "×" de remover mesa livre: o alvo era 20x18. O desenho fica no mesmo canto
   e do mesmo tamanho; a área de toque cresce para 36x36 em volta dele. */
#pdvApp .tile-del {
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  font-size: 18px;
}
#pdvApp .tile-del:hover { color: var(--pdv-text); }

/* Selos do histórico de mesas ("Cancelada" / "Encerrada"): vinham do tema
   claro (fundo rosa/verde-claro) e ficavam com 3,6:1 e 2,9:1. No tema
   grafite viram selos escuros tingidos, com o texto claro da mesma cor. */
#pdvApp .hist-badge {
  background: rgba(64, 191, 89, .16);
  color: #7fe095;
  box-shadow: inset 0 0 0 1px rgba(64, 191, 89, .45);
}
#pdvApp .hist-row.cancelada .hist-badge {
  background: rgba(211, 19, 5, .2);
  color: #ff9a92;
  box-shadow: inset 0 0 0 1px rgba(255, 110, 100, .45);
}

/* Fechar Caixa no vermelho único dos botões de cancelar/excluir (#d31305);
   era o #e5393f antigo, o único vermelho diferente entre as ações. O pdv.js
   escreve a cor no style do botão, por isso o !important. */
#pdvApp #caixaFecharBtn { background: #d31305 !important; color: #ffffff !important; }

/* Nome da seção na barra do topo ("BALCÃO", "MESA"...) em 12px, o menor
   tamanho da escala (marcas e horários); eram 11px, fora da escala. */
#pdvApp .pdv-topbar-brand div > span { font-size: 12px; }

/* Ícones de linha no lugar dos emoji das Mesas e dos quadros (postos pelo
   js/pdv-icones.js): mesmo traço dos ícones da barra lateral, na cor do texto
   em volta, alinhados pelo meio da linha. */
#pdvApp .pdv-ico { display: inline-flex; flex: none; width: 16px; height: 16px; vertical-align: -3px; }
#pdvApp .pdv-ico svg { width: 100%; height: 100%; display: block; }
#pdvApp .tile-meta > span { display: inline-flex; align-items: center; gap: 5px; }
#pdvApp .tile-meta .pdv-ico { width: 15px; height: 15px; opacity: .8; }
#pdvApp .tile-icon { display: grid; place-items: center; line-height: 1; }
#pdvApp .tile-icon .pdv-ico { width: 30px; height: 30px; }
#pdvApp .kanban-col-icon { display: inline-flex; align-items: center; }
#pdvApp .kanban-col-icon .pdv-ico { width: 18px; height: 18px; }
#pdvApp .kanban-card-timer { display: flex; align-items: center; gap: 5px; }
#pdvApp .kanban-card-timer .pdv-ico { width: 15px; height: 15px; opacity: .8; }
#pdvApp :is(.kanban-card-addr, .kanban-card-entregador) .pdv-ico { width: 15px; height: 15px; margin-right: 5px; }
#pdvApp .kanban-entregador-btn .pdv-ico { width: 16px; height: 16px; margin-right: 6px; }
#pdvApp .kanban-advance { display: grid; place-items: center; padding: 0; }
#pdvApp .kanban-advance .pdv-ico { width: 22px; height: 22px; }
#pdvApp .comanda-row .time .pdv-ico { width: 15px; height: 15px; margin-right: 5px; opacity: .8; }

/* Botões "−" e "+" com 40px (eram 32px no seletor e no carrinho do Balcão e
   33px na quantidade do rodapé do seletor): o tamanho dos botões dentro de
   listas e cartões, mais fácil de acertar com o dedo. As barras desenhadas do
   sinal crescem junto. */
.picker-stepper button,
.picker-foot .cart-qty button,
#atdCartItems .cart-qty-mini button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}
.picker-stepper button::before,
#atdCartItems .cart-qty-mini button::before { width: 16px; height: 3px; }
.picker-stepper button[data-paction="plus"]::after,
#atdCartItems .cart-qty-mini button.plus::after { width: 3px; height: 16px; }
/* Quantidade entre o "−" e o "+" do seletor: era #555 sobre o grafite
   (2:1, quase sumia). Zero fica no cinza-claro do tema; escolhida, branca. */
.picker-stepper span { color: var(--pdv-text-dim); }
.picker-opt:has([data-paction="minus"]:not(:disabled)) .picker-stepper span { color: var(--pdv-text); }

/* Carrinho do Balcão em telas até 1280px (o carrinho fica com ~300px): o
   nome do item tinha só ~100px ao lado dos botões e quebrava no meio da
   palavra ("Complement / o"). O nome passa a ocupar a largura toda ao lado
   da foto; valor e "− 1 +" dividem a linha de baixo. */
@media (min-width: 761px) and (max-width: 1280px) {
  #atdCartItems .cart-card { grid-template-columns: 55px minmax(0, 1fr) auto; row-gap: 6px; }
  #atdCartItems .cart-card-img { grid-row: 1 / span 2; align-self: start; }
  #atdCartItems .cart-card-title { grid-column: 2 / -1; grid-row: 1; align-self: start; overflow-wrap: break-word; }
  #atdCartItems .cart-card-price { grid-column: 2; grid-row: 2; align-self: center; }
  #atdCartItems .cart-qty-mini { grid-column: 3; grid-row: 2; align-self: center; }
  #atdCartItems .cart-subitem { grid-column: 2 / -1; }
}

/* Cartões do cliente, da entrega e Voltar (Balcão e pagamento) em telas até
   1280px: com três cartões iguais de ~90px, o telefone saía "(11) 99999-..."
   e o endereço "Sem endere...". O Voltar só precisa do ícone e da palavra,
   então cede largura ao cartão do cliente, onde o telefone cabe inteiro numa
   linha; o endereço usa até duas linhas. O ícone fica com 24px para tudo
   caber nos mesmos 113px de altura. */
@media (min-width: 761px) and (max-width: 1280px) {
  #pdvApp :is(.order-cart .atd-tipo-cards, .checkout-cards):has(> .atd-tipo-card:nth-child(3)) {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .75fr);
  }
  #pdvApp :is(.order-cart .atd-tipo-cards, .checkout-cards) .atd-tipo-card { padding: 10px 6px; gap: 4px; }
  #pdvApp :is(.order-cart .atd-tipo-cards, .checkout-cards) .atd-tipo-card .atd-tipo-ico { width: 24px; height: 24px; }
  #pdvApp :is(#atdTipoEntrega, #ckTipoEntrega) > span:not(.atd-tipo-ico) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 16px;
  }
}