/* =====================================================================
   PDV — a tela de venda
   =====================================================================

   ─────────────────────────────────────────────────────────────────────
   O CAMPO DE CÓDIGO É O HERÓI
   ─────────────────────────────────────────────────────────────────────
   Tudo se organiza em volta dele. Ele fica no topo, ocupa a largura
   toda, tem 28px de fonte, e NUNCA perde o foco.

   O leitor de código de barras é um teclado: ele digita e dá Enter. Se
   o foco vazar para outro lugar, o próximo bipe vira lixo em um campo
   qualquer — ou pior, some sem ninguém ver.

   ─────────────────────────────────────────────────────────────────────
   O LAYOUT
   ─────────────────────────────────────────────────────────────────────
     ┌──────────────────────────────────────────────────┐
     │ topo: loja · vendedor · caixa                    │
     ├───────────────────────────────┬──────────────────┤
     │ [ CÓDIGO ]                    │  TOTAL           │
     │                               │  R$ 000,00       │
     │ itens                         │                  │
     │  ...                          │  pagamentos      │
     │  ...                          │                  │
     │                               │  [ CONCLUIR ]    │
     ├───────────────────────────────┴──────────────────┤
     │ F2 pagar · F4 desconto · F8 cliente · ESC        │
     └──────────────────────────────────────────────────┘

   As teclas de função ficam VISÍVEIS o tempo todo, no rodapé. É o
   vernacular do balcão brasileiro: todo PDV tem, e o vendedor decora
   em uma semana. Esconder num menu obrigaria a tirar a mão do teclado.
   ===================================================================== */

#pdv {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

/* ─────────────────────────────────────────────
   TOPO
   ───────────────────────────────────────────── */

.topo {
    display: flex;
    align-items: center;
    gap: var(--e5);

    padding: var(--e3) var(--e5);

    background: var(--grafite);
    border-bottom: 1px solid var(--ardosia);
}

.topo__marca {
    /* O símbolo, igual ao rail do ERP. Antes era a palavra "PRIME" em
       texto — duas identidades para o mesmo sistema. */
    display: block;
    flex-shrink: 0;
    opacity: 0.92;
}

/* Quem está na venda. Fica ao lado do número, discreto: é referência,
   não o que o vendedor precisa ler durante o atendimento. */
.topo__cliente {
    font-size: var(--t-mini);
    color: var(--giz-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 26ch;
}

.topo__venda {
    font-family: var(--fonte-valor);
    color: var(--giz-suave);
}

.topo__vendedor {
    font-size: var(--t-mini);
    color: var(--giz-suave);
}

/* ── O CAIXA VIROU BOTÃO ──
   Ponto + número + quanto tem na gaveta, em um alvo clicável. O ponto
   sozinho dizia "aberto" e não dizia mais nada; o dinheiro na gaveta é
   a informação que o vendedor confere antes de cada sangria. */
.chip {
    display: flex;
    align-items: center;
    gap: var(--e2);

    height: 34px;
    padding: 0 var(--e3);

    background: var(--ardosia);
    border: 1px solid var(--fumaca);
    border-radius: 999px;

    font-size: var(--t-mini);
    color: var(--giz-suave);

    transition: border-color var(--transicao), color var(--transicao);
}

.chip:hover {
    border-color: var(--giz-fraco);
    color: var(--giz);
}

.chip:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.chip__valor {
    font-size: var(--t-mini);
    color: var(--giz);
}

.chip__valor:empty { display: none; }

/* ── MAIS AÇÕES ──
   Tela cheia, tema e sair usam-se uma vez por turno. Ficavam na barra
   com o mesmo peso do estado do caixa, que se olha o tempo todo. */
.menu { position: relative; }

.topo__acao {
    display: flex;
    align-items: center;
    gap: var(--e2);

    min-height: 34px;
    padding: 0 var(--e3);

    font-size: var(--t-mini);
}

.topo__pip {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    background: var(--marca);
    border-radius: 50%;

    font-size: var(--t-micro);
    line-height: 1;
    color: #fff;
}

.menu__lista {
    position: absolute;
    top: calc(100% + var(--e2));
    right: 0;
    z-index: 900;

    min-width: 260px;
    padding: var(--e2);

    background: var(--grafite);
    border: 1px solid var(--fumaca);
    border-radius: var(--raio-forte);
    box-shadow: var(--sombra-forte);
}

.menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);

    width: 100%;
    min-height: 40px;
    padding: 0 var(--e3);

    background: transparent;
    border: none;
    border-radius: var(--raio);

    font-size: var(--t-base);
    text-align: left;
    color: var(--giz);
}

.menu__item:hover { background: var(--ardosia); }

.menu__item--perigo { color: var(--brasa); }
.menu__item--perigo:hover { background: var(--brasa-fundo); }

.menu__tecla {
    font-family: var(--fonte-valor);
    font-size: var(--t-micro);
    color: var(--giz-fraco);
}

.menu__risco {
    height: 1px;
    margin: var(--e2) 0;
    background: var(--ardosia);
}

/* O ponto do caixa: verde aberto, vermelho fechado. É a primeira coisa
   que o vendedor confere ao chegar, e a causa nº 1 de "não consigo
   vender". */
.ponto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brasa);
}

.ponto--aberto { background: var(--jade); }

/* ─────────────────────────────────────────────
   CORPO
   ───────────────────────────────────────────── */

.corpo {
    display: grid;
    grid-template-columns: 1fr 380px;
    overflow: hidden;
}

.esquerda {
    display: grid;
    /* bipe · cabeçalho · lista (estica) · quem vende e quem compra */
    grid-template-rows: auto auto 1fr auto;
    overflow: hidden;
    padding: var(--e4) var(--e5);
}

/* ── O CAMPO DE CÓDIGO ─────────────────────────────────────────── */

.bipe {
    position: relative;
    margin-bottom: var(--e4);
}

.bipe__campo {
    width: 100%;
    height: 76px;
    padding: 0 var(--e5) 0 68px;

    background: var(--grafite);
    color: var(--giz);
    border: 2px solid var(--fumaca);
    border-radius: var(--raio-forte);

    font-family: var(--fonte-valor);
    font-size: var(--t-grande);
    letter-spacing: 0.06em;

    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.bipe__campo:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 4px var(--acento-fundo);
    outline: none;
}

.bipe__campo::placeholder {
    color: var(--giz-fraco);
    letter-spacing: normal;
    font-family: var(--fonte);
    font-size: var(--t-medio);
}

/* O sinal de "pronto para bipar". Pulsa devagar quando o campo tem
   foco — é o único jeito de saber, à distância, que o leitor vai
   funcionar. Sem foco, ele apaga: o aviso de que algo está errado. */
.bipe__sinal {
    position: absolute;
    left: var(--e5);
    top: 50%;
    transform: translateY(-50%);

    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--giz-fraco);

    transition: background var(--transicao);
}

.bipe__campo:focus ~ .bipe__sinal {
    background: var(--jade-forte);
    animation: pulsar 1.6s ease-in-out infinite;
}

@keyframes pulsar {
    0%, 100% { box-shadow: 0 0 0 0 var(--jade-fundo); }
    50%      { box-shadow: 0 0 0 10px transparent; }
}

.bipe--ocupado .bipe__campo {
    opacity: 0.5;
    pointer-events: none;
}

/* ── LISTA DE ITENS ────────────────────────────────────────────── */

.itens {
    overflow-y: auto;
    padding-right: var(--e2);
}

/* O cabeçalho e a linha compartilham a mesma régua. Colunas fixas em
   vez de `auto`: com `auto` a largura muda conforme o valor, e o
   cabeçalho sairia do lugar a cada item bipado. */
.itens__cabecalho,
.item {
    display: grid;
    grid-template-columns: 1fr 118px 110px 130px 34px;
    align-items: center;
    gap: var(--e4);
}

.itens__cabecalho {
    padding: 0 var(--e3) var(--e2);
    border-bottom: 1px solid var(--fumaca);

    font-size: var(--t-mini);
    color: var(--giz-fraco);
}

.centro         { text-align: center; }
.direita-texto  { text-align: right; }

.item {
    padding: var(--e3) var(--e3);

    border-bottom: 1px solid var(--ardosia);
}

.item__unit {
    text-align: right;

    font-family: var(--fonte-valor);
    font-size: var(--t-base);
    color: var(--giz-suave);
}

/* O item que acabou de entrar pisca em âmbar. É a confirmação
   periférica: o vendedor olha para o cliente, não para a tela, e o
   flash na visão lateral já diz "entrou". */
.item--novo {
    animation: piscar 700ms ease-out;
}

@keyframes piscar {
    0%   { background: var(--jade-fundo); }
    100% { background: transparent; }
}

.item__nome {
    font-size: var(--t-medio);
    font-weight: 500;
}

.item__detalhe {
    display: flex;
    gap: var(--e2);
    align-items: center;

    font-size: var(--t-mini);
    color: var(--giz-suave);
}

.item__qtd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
}

.item__qtd-btn {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--ardosia);
    border: 1px solid var(--fumaca);
    border-radius: var(--raio);
    color: var(--giz-suave);

    font-size: var(--t-medio);
    line-height: 1;
}

.item__qtd-btn:hover { background: var(--fumaca); color: var(--giz); }

.item__qtd-valor {
    min-width: 34px;
    text-align: center;
    font-family: var(--fonte-valor);
    font-size: var(--t-medio);
    font-weight: 600;
}

.item__total {
    text-align: right;

    font-family: var(--fonte-valor);
    font-size: var(--t-medio);
    font-weight: 600;
}

/* Preço riscado quando houve desconto: o cliente enxerga o que ganhou,
   e o vendedor tem como mostrar. */
.item__de {
    font-size: var(--t-mini);
    color: var(--giz-fraco);
    text-decoration: line-through;
}

.item__remover {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    border-radius: var(--raio);
    color: var(--giz-fraco);
}

.item__remover:hover { background: var(--brasa-fundo); color: var(--brasa); }

/* ── VAZIO ─────────────────────────────────────────────────────── */
/*
   Tela vazia é convite para agir, não decoração. Ela repete a única
   instrução que importa.
*/

.vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e2);

    height: 100%;
    color: var(--giz-fraco);
}

.vazio__titulo {
    font-size: var(--t-medio);
    color: var(--giz-suave);
}

/* ─────────────────────────────────────────────
   DIREITA — o total
   ───────────────────────────────────────────── */

.direita {
    display: grid;
    grid-template-rows: auto 1fr auto;

    background: var(--grafite);
    border-left: 1px solid var(--ardosia);

    overflow: hidden;
}

.totais {
    padding: var(--e5);
    border-bottom: 1px solid var(--ardosia);
}

.totais__linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    margin-bottom: var(--e2);

    font-size: var(--t-base);
    color: var(--giz-suave);
}

.totais__linha .valor { color: var(--giz); }

.totais__desconto .valor { color: var(--jade); }

/* O TOTAL. Único elemento em âmbar, único em 52px. Legível de um metro
   e meio — a distância do vendedor quando ele se vira para o cliente. */
.totais__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    margin-top: var(--e4);
    padding-top: var(--e4);
    border-top: 1px solid var(--fumaca);
}

.totais__total-rotulo {
    font-size: var(--t-mini);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--giz-suave);
}

.totais__total-valor {
    font-family: var(--fonte-valor);
    font-size: var(--t-total);
    font-weight: 700;
    line-height: 1;

    /* No tom do texto, de propósito. É a regra do tema do ERP: valor
       principal colorido compete com o alerta, e o que faz o total ser
       achado de um metro de distância é o tamanho. */
    color: var(--giz);
}

/* ── PAGAMENTOS ────────────────────────────────────────────────── */

.pagamentos {
    padding: var(--e4) var(--e5);
    overflow-y: auto;
}

.pagamento {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: var(--e2) 0;
    border-bottom: 1px solid var(--ardosia);

    font-size: var(--t-base);
}

.pagamento__forma { color: var(--giz-suave); }

.pagamento__valor {
    margin-left: auto;
    font-family: var(--fonte-valor);
    font-weight: 600;
}

/* ── TIRAR UM PAGAMENTO ──
   Discreto até a mão chegar perto: é uma operação de conserto, não do
   fluxo normal, e um ✕ vermelho fixo ao lado de cada linha faria a
   coluna de pagamentos parecer uma lista de erros. */
.pagamento__tirar {
    width: 28px;
    height: 28px;
    margin-left: var(--e2);

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    border-radius: var(--raio);
    color: var(--giz-fraco);

    opacity: 0;
    transition: opacity var(--transicao), background var(--transicao);
}

.pagamento:hover .pagamento__tirar,
.pagamento__tirar:focus-visible { opacity: 1; }

.pagamento__tirar:hover {
    background: var(--brasa-fundo);
    color: var(--brasa);
}

/* Em tela de toque não há hover: ali o botão fica sempre visível. */
@media (hover: none) {
    .pagamento__tirar { opacity: 1; }
}

.falta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    margin-top: var(--e4);
    padding: var(--e3) var(--e4);

    background: var(--brasa-fundo);
    border-radius: var(--raio);

    color: var(--brasa);
    font-weight: 600;
}

.falta--quitada {
    background: var(--jade-fundo);
    color: var(--jade);
}

.troco {
    margin-top: var(--e3);
    padding: var(--e4);

    background: var(--jade-fundo);
    border: 1px solid var(--jade);
    border-radius: var(--raio);

    text-align: center;
}

.troco__rotulo {
    font-size: var(--t-mini);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jade);
}

/* O troco em 28px porque o vendedor lê em voz alta para o cliente, e
   errar troco é a briga mais fácil de acontecer no balcão. */
.troco__valor {
    font-family: var(--fonte-valor);
    font-size: var(--t-grande);
    font-weight: 700;
    color: var(--jade);
}

.acoes {
    padding: var(--e4) var(--e5) var(--e5);
    border-top: 1px solid var(--ardosia);
}

/* ─────────────────────────────────────────────
   RODAPÉ — as teclas
   ───────────────────────────────────────────── */

.teclas {
    display: flex;
    align-items: center;
    gap: var(--e1);

    /* Rede de baixo, para o monitor estreito: em vez de espremer, a
       barra rola. Nenhuma tecla desaparece. */
    overflow-x: auto;
    scrollbar-width: none;

    padding: var(--e2) var(--e5);

    background: var(--grafite);
    border-top: 1px solid var(--ardosia);
}

.tecla {
    display: flex;
    align-items: center;
    gap: var(--e2);

    /* ── O RÓTULO NÃO ENCOLHE ──
       `.teclas` é flex sem wrap. Sem esta trava, acrescentar uma tecla
       espremia TODAS as outras: o texto quebrava no meio e a fileira
       virava um borrão. Numa barra que só é lida de relance, isso é o
       mesmo que apagar. */
    flex-shrink: 0;
    white-space: nowrap;

    padding: var(--e2) var(--e3);

    background: transparent;
    border: none;
    border-radius: var(--raio);

    font-size: var(--t-micro);
    color: var(--giz-suave);
}

.tecla:hover { background: var(--ardosia); color: var(--giz); }

.tecla__sigla {
    padding: 2px 6px;

    background: var(--ardosia);
    border: 1px solid var(--fumaca);
    border-bottom-width: 2px;
    border-radius: 4px;

    font-family: var(--fonte-valor);
    font-size: var(--t-micro);
    font-weight: 700;
    color: var(--giz);
}

.tecla:disabled { opacity: 0.3; }
.tecla:disabled:hover { background: transparent; }

/* F2 fecha a venda. Era a tecla mais importante do rodapé com o mesmo
   peso de "F6 Kit" — e do mesmo tamanho de uma dica que nem é botão. */
.tecla--principal { color: var(--giz); }

.tecla--principal .tecla__sigla {
    background: var(--acento-fundo);
    border-color: var(--acento);
    color: var(--acento);
}

.tecla--principal:not(:disabled):hover { background: var(--acento-fundo); }

.tecla--saida .tecla__sigla { color: var(--giz-suave); }
.tecla--saida:hover { background: var(--brasa-fundo); color: var(--brasa); }

/* ── AS SEM ATALHO ───────────────────────────────────────────────
   Preço, Kit e Presente não ganharam tecla: doze é o limite do
   teclado e já é o limite da memória de quem decora.

   Sem a etiqueta da sigla elas param de competir com as que têm —
   a barra passa a ter dois pesos em vez de treze itens iguais, e o
   olho encontra a tecla certa sem ler todas. */
/* O risco reproduz o vão entre o ESC e o F1 do teclado físico. */
.teclas__risco {
    width: 1px;
    align-self: stretch;

    margin: var(--e1) var(--e2);

    background: var(--ardosia);
}

/* Recusa de cupom: o texto de apoio vira aviso sem virar erro de
   sistema. "Esse cupom venceu" é resposta de um balcão funcionando. */
.mini--alerta { color: var(--brasa); }

/* ── O EXTRATO ───────────────────────────────────────────────────
   Aparece em toda tela de pagamento. Denso de propósito: é para ser
   lido de relance no meio do atendimento, não estudado. Linhas
   pequenas, o Total e o Falta com peso, e o que abate em outro tom
   para o olho separar entrada de saída sem ler o sinal. */
.extrato {
    margin-bottom: var(--e3);
    padding: var(--e3);

    background: var(--grafite);
    border: 1px solid var(--ardosia);
    border-radius: var(--raio);
}

.extrato__linha {
    display: flex;
    justify-content: space-between;
    gap: var(--e3);

    padding: 3px 0;

    font-size: var(--t-micro);
    color: var(--giz-suave);
}

.extrato__linha--abate { color: var(--giz-fraco); }

.extrato__linha--total {
    margin-top: 4px;
    padding-top: var(--e2);

    border-top: 1px solid var(--ardosia);

    font-weight: 600;
    color: var(--giz);
}

/* O que falta é a única informação que o vendedor procura com pressa.
   Ela não pode ter o mesmo peso da linha de acréscimo. */
.extrato__linha--falta {
    margin-top: 4px;
    padding-top: var(--e2);

    border-top: 1px solid var(--ardosia);

    font-size: var(--t-base);
    font-weight: 700;
    color: var(--acento);
}

.extrato__linha--quitada {
    margin-top: 4px;
    padding-top: var(--e2);

    border-top: 1px solid var(--ardosia);

    font-size: var(--t-base);
    font-weight: 700;
    color: var(--jade);
}

/* ── O CUPOM NO PAGAMENTO ────────────────────────────────────────
   Uma linha só, abaixo das formas. Não é uma forma de pagamento — é
   abatimento antes de pagar — e dar a ela o tamanho de um botão de
   PIX faria o vendedor procurar cupom onde procura cartão. */
.cupom-linha {
    display: flex;
    align-items: center;
    gap: var(--e2);

    margin-top: var(--e3);
    padding-top: var(--e3);

    border-top: 1px solid var(--ardosia);
}

.cupom-linha .campo { flex: 1; }

.cupom-linha__ok {
    flex: 1;

    font-size: var(--t-micro);
    color: var(--jade);
}

/* Dica não é botão: não tem borda, não responde ao mouse, não pede
   clique. A diferença entre "você pode apertar" e "isto é uma
   informação" estava apagada. */
.dica {
    padding: var(--e2) var(--e3);

    font-size: var(--t-micro);
    color: var(--giz-fraco);
}

.dica b {
    font-family: var(--fonte-valor);
    font-weight: 700;
    color: var(--giz-suave);
}

/* ─────────────────────────────────────────────
   FORMAS DE PAGAMENTO
   ───────────────────────────────────────────── */

.formas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e3);
}

.forma {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e1);

    min-height: 72px;
    padding: var(--e3) var(--e4);

    background: var(--ardosia);
    border: 1px solid var(--fumaca);
    border-radius: var(--raio);

    text-align: left;
}

.forma:hover { border-color: var(--acento); }

.forma__nome { font-weight: 600; }

.forma__atalho {
    font-size: var(--t-micro);
    color: var(--giz-fraco);
}

/* ─────────────────────────────────────────────
   TELA CHEIA — venda concluída
   ───────────────────────────────────────────── */
/*
   Depois de concluir, a tela inteira vira a confirmação. Não é
   celebração: é o momento em que o vendedor lê o troco em voz alta e
   entrega o cupom. Some sozinha e o campo de código volta a piscar.
*/

.concluida {
    position: fixed;
    inset: 0;
    z-index: 950;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e4);

    background: var(--carvao);

    animation: aparecer 160ms ease-out;
}

.concluida__marca {
    font-size: var(--t-mini);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--giz-fraco);
}

.concluida__valor {
    font-family: var(--fonte-valor);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--jade);
}

.concluida__troco {
    padding: var(--e4) var(--e6);

    background: var(--ambar-fundo);
    border: 2px solid var(--ambar);
    border-radius: var(--raio-forte);

    text-align: center;
}

.concluida__troco-valor {
    font-family: var(--fonte-valor);
    font-size: var(--t-total);
    font-weight: 700;
    color: var(--ambar);
}

/* ─────────────────────────────────────────────
   LOGIN
   ───────────────────────────────────────────── */

#login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: var(--e4);
}

.login__caixa {
    width: min(400px, 100%);
    padding: var(--e6);

    background: var(--grafite);
    border: 1px solid var(--ardosia);
    border-radius: var(--raio-forte);
    box-shadow: var(--sombra-forte);
}

.login__marca {
    margin-bottom: var(--e6);
    text-align: center;

    font-size: var(--t-grande);
    font-weight: 700;
    letter-spacing: 0.18em;
}

.login__marca span { color: var(--marca); }

/* ─────────────────────────────────────────────
   TELAS ESTREITAS
   ───────────────────────────────────────────── */
/*
   Abaixo de 900px o layout de duas colunas quebra: o total empilha
   embaixo dos itens. Continua utilizável num tablet de vitrine, mesmo
   não sendo o alvo.
*/

@media (max-width: 900px) {
    .corpo {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .direita {
        border-left: none;
        border-top: 1px solid var(--ardosia);
        max-height: 45vh;
    }

    .totais__total-valor { font-size: var(--t-grande); }

    /* Os rótulos das teclas somem; as siglas ficam. Num tablet o
       teclado físico raramente existe, mas o atalho continua valendo
       para quem plugou um. */
    .tecla span:not(.tecla__sigla) { display: none; }
}

/* O botão de reimprimir, na tela de venda concluída.

   Discreto de propósito: a tela existe para anunciar o troco, e um
   botão chamativo competiria com o número que o vendedor precisa ler
   em voz alta. */
.concluida__cupom {
    margin-top: var(--e4, 16px);
    background: transparent;
    border: 1px solid var(--giz-fraco);
    color: var(--giz);
}

.concluida__cupom:hover {
    border-color: var(--acento);
    color: var(--acento);
}

/* O resultado da consulta de preço.

   O preço é o que o cliente está esperando ouvir, então é o maior
   elemento da caixa — o vendedor lê de relance, sem procurar. */
.consulta {
    margin-top: var(--e3, 12px);
    padding: var(--e4, 16px);
    border: 1px solid var(--fumaca);
    border-radius: var(--raio);
}

.consulta__nome {
    font-size: var(--t-medio);
    line-height: 1.3;
    margin-bottom: 4px;
}

.consulta__preco {
    font-size: var(--t-grande);
    font-weight: 700;
    color: var(--giz);
    margin-bottom: 4px;
}

.consulta--vazia .consulta__nome { color: var(--giz-fraco); }

/* ═══════════════════════════════════════════════════════════════════
   A TELA DE ESPERA (caixa fechado)
   ═══════════════════════════════════════════════════════════════════

   Cobre o PDV inteiro. Um aviso que se pode ignorar seria ignorado —
   e bipar sem caixa cria uma venda que só dá erro na hora de pagar,
   com o cliente esperando.

   Mesmo desenho da tela de venda concluída: o vendedor já reconhece
   essa forma como "o PDV está te dizendo algo". */
.espera {
    position: fixed;
    inset: 0;
    z-index: 940;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e4);

    background: var(--carvao);

    animation: aparecer 160ms ease-out;
}

.espera__marca {
    font-size: var(--t-mini);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--acento);
}

.espera__titulo {
    font-size: var(--t-grande);
    color: var(--giz);
}

.espera__acoes {
    display: flex;
    gap: var(--e3, 12px);
    flex-wrap: wrap;
    justify-content: center;
}

/* A sigla da tecla dentro do botão: ensina o atalho no lugar onde a
   pessoa está olhando, em vez de exigir que ela decore o rodapé. */
.espera__acoes .tecla__sigla {
    margin-left: 8px;
    opacity: 0.6;
}

/* ─────────────────────────────────────────────
   DETALHES DO CAIXA
   ─────────────────────────────────────────────

   A gaveta por dentro, sem sair do PDV. Antes isto existia só no
   painel: para saber quanto tinha em dinheiro, ou o que já foi de
   sangria no turno, o vendedor abria outro sistema — com o balcão
   sem PDV enquanto isso.

   Três abas porque são três perguntas diferentes:
     dados gerais  → como está a gaveta agora
     movimentos    → o que entrou e saiu, e quem lançou
     devoluções    → o dinheiro que voltou para o cliente
   ───────────────────────────────────────────── */

.modal--largo { width: min(860px, 100%); }

.modal__sub {
    margin: 2px 0 0;
    font-size: var(--t-mini);
    color: var(--giz-suave);
}

.abas {
    display: flex;
    gap: var(--e1);

    padding: 0 var(--e5);
    border-bottom: 1px solid var(--ardosia);
}

.aba {
    padding: var(--e3) var(--e3);

    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;

    font-size: var(--t-base);
    color: var(--giz-suave);
}

.aba:hover { color: var(--giz); }

.aba--ativa {
    border-bottom-color: var(--giz);
    color: var(--giz);
    font-weight: 600;
}

/* ── A FICHA ──
   Pares rótulo/valor em duas colunas. O rótulo é pequeno e apagado, o
   valor é o que se lê — invertido, o olho precisa procurar o dado
   dentro do texto. */
.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--e5) var(--e4);
}

.ficha__rotulo {
    font-size: var(--t-mini);
    color: var(--giz-suave);
}

.ficha__valor {
    margin-top: 2px;
    font-size: var(--t-medio);
    font-family: var(--fonte-valor);
}

.ficha__valor--texto {
    font-family: var(--fonte);
    font-size: var(--t-base);
}

/* ── ESTADO ──
   Verde não basta: quem olha de longe precisa da palavra. */
.selo {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);

    padding: var(--e1) var(--e3);

    background: var(--ardosia);
    border-radius: 999px;

    font-size: var(--t-mini);
}

.selo--aberto { background: var(--jade-fundo); color: var(--jade); }
.selo--fechado { background: var(--ardosia);   color: var(--giz-suave); }

/* ── TABELA DE MOVIMENTOS ──
   Uma linha por lançamento. O valor com sinal e cor: entrada em jade,
   saída em brasa. Sem isso, "R$ 500,00" numa lista de sangrias e
   suprimentos não diz para que lado o dinheiro foi. */
.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-base);
}

.tabela th {
    padding: var(--e2) var(--e3);
    border-bottom: 1px solid var(--fumaca);

    font-size: var(--t-mini);
    font-weight: 400;
    text-align: left;
    color: var(--giz-fraco);
}

.tabela td {
    padding: var(--e3);
    border-bottom: 1px solid var(--ardosia);
    vertical-align: top;
}

.tabela tr:last-child td { border-bottom: none; }

.tabela .num {
    text-align: right;
    font-family: var(--fonte-valor);
    white-space: nowrap;
}

.tabela__total td {
    border-top: 1px solid var(--fumaca);
    border-bottom: none;
    font-weight: 600;
}

.entrada { color: var(--jade); }
.saida   { color: var(--brasa); }

.hora {
    font-family: var(--fonte-valor);
    font-size: var(--t-mini);
    color: var(--giz-suave);
    white-space: nowrap;
}

/* ── VAZIO DENTRO DO MODAL ──
   Convite, não lamento: diz o que fazer, não que não há nada. */
.nada {
    padding: var(--e7) var(--e4);
    text-align: center;
    color: var(--giz-suave);
}

/* ── CONTAGEM ──
   Uma linha por forma de recebimento. O campo é grande e alinhado à
   direita porque quem preenche está com dinheiro na mão. */
.contagem {
    display: grid;
    grid-template-columns: 1fr 180px;
    align-items: center;
    gap: var(--e3) var(--e4);
}

.contagem__forma { font-size: var(--t-base); }

.contagem__qtd {
    display: block;
    font-size: var(--t-mini);
    color: var(--giz-fraco);
}

.contagem__campo {
    height: 52px;
    text-align: right;
    font-family: var(--fonte-valor);
    font-size: var(--t-medio);
}

/* O resultado do fechamento, do tamanho da notícia que ele é. */
.resultado {
    padding: var(--e5);
    border-radius: var(--raio-forte);
    text-align: center;
}

.resultado--bateu  { background: var(--jade-fundo);  color: var(--jade); }
.resultado--faltou { background: var(--brasa-fundo); color: var(--brasa); }
.resultado--sobrou { background: var(--ambar-fundo); color: var(--ambar); }

.resultado__valor {
    font-family: var(--fonte-valor);
    font-size: var(--t-grande);
    font-weight: 700;
}

/* O corpo do modal com abas não tem padding próprio: quem o aplica é o
   painel de dentro, uma vez, para as abas encostarem na borda. */
.sem-padding { padding: 0 !important; }

.quando {
    margin-left: auto;
    font-size: var(--t-mini);
    color: var(--giz-suave);
}

/* ── A GAVETA ──
   O número que se confere com a mão. Sozinho, grande, sobre um fundo
   próprio: no meio da ficha ele era mais um par rótulo/valor. */
.gaveta {
    padding: var(--e4) var(--e5);

    background: var(--carvao);
    border: 1px solid var(--ardosia);
    border-radius: var(--raio-forte);
}

.gaveta__valor {
    margin-top: var(--e1);
    font-size: var(--t-grande);
    font-weight: 700;
}

.mov__tipo { font-weight: 500; }

.mov__motivo:empty { display: none; }

.mov__quem {
    font-size: var(--t-mini);
    color: var(--giz-suave);
}


/* ─────────────────────────────────────────────
   QUEM VENDE E QUEM COMPRA
   ─────────────────────────────────────────────

   Dois controles no pé da coluna, abaixo da lista. Não no topo: o
   topo é do código de barras, e qualquer coisa grande ali disputa o
   olho com o campo que precisa estar sempre em foco.

   Ficam sempre visíveis, com ou sem escolha feita, porque o estado
   em branco é a informação mais importante dos dois: "Sem vendedor"
   avisa que a comissão desta venda não tem dono.
   ───────────────────────────────────────────── */

.quem {
    display: grid;
    gap: var(--e3);

    padding-top: var(--e4);
    margin-top: var(--e3);
    border-top: 1px solid var(--ardosia);
}

.quem__campo {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "rotulo rotulo"
        "valor  tecla";
    align-items: center;
    gap: var(--e1) var(--e3);

    padding: var(--e2) var(--e3) var(--e3);

    background: var(--ardosia);
    border: 1px solid transparent;
    border-radius: var(--raio);

    text-align: left;

    transition: border-color var(--transicao), background var(--transicao);
}

.quem__campo:hover { border-color: var(--fumaca); }

.quem__campo:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.quem__rotulo {
    grid-area: rotulo;
    font-size: var(--t-mini);
    color: var(--giz-suave);
}

.quem__valor {
    grid-area: valor;

    display: flex;
    align-items: center;
    gap: var(--e2);
    min-width: 0;

    font-size: var(--t-base);
    color: var(--giz);
}

.quem__valor > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quem__icone {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--giz-suave);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.quem__tecla {
    grid-area: tecla;
    font-family: var(--fonte-valor);
    font-size: var(--t-micro);
    color: var(--giz-fraco);
}

/* Sem vendedor não é um estado neutro: é uma venda cuja comissão
   ainda não tem dono. O âmbar pede a escolha sem travar a venda. */
.quem__campo--vazio .quem__valor { color: var(--ambar); }
.quem__campo--vazio .quem__icone { stroke: var(--ambar); }

/* ─────────────────────────────────────────────
   O CUPOM
   ─────────────────────────────────────────────
   O iframe que imprime. Não pode usar `display:none`: navegador não
   imprime o que não está no layout. Fica com tamanho zero e fora da
   tela, que é diferente de não existir. */

.quadro-impressao {
    position: fixed;
    width: 0;
    height: 0;
    border: 0;
    left: -9999px;
    top: -9999px;
}

/* ─────────────────────────────────────────────
   FIM DA VENDA
   ───────────────────────────────────────────── */

.concluida__vias {
    display: flex;
    gap: var(--e3);
    margin-top: var(--e5);
}

.concluida__saida {
    display: flex;
    align-items: center;
    gap: var(--e4);
    margin-top: var(--e5);
}

/* A contagem regressiva é informação, não pressão: fica pequena e
   apagada, e para de correr quando a mão mexe. */
.concluida__saida .mini { color: var(--giz-fraco); }

/* ─────────────────────────────────────────────
   CLIENTE
   ───────────────────────────────────────────── */

/* As tags do motor, na linha do cliente. É a diferença entre atender e
   ATENDER: "Aniversariante do dia" muda a conversa no balcão. */
.selos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    margin-top: var(--e2);
}

.selo-tag {
    padding: 1px var(--e2);

    border: 1px solid var(--fumaca-forte);
    border-radius: 999px;

    font-size: var(--t-micro);
    color: var(--giz-suave);
}

.escolha--bloqueada { opacity: 0.55; }

.escolha--bloqueada .escolha-titulo::after {
    content: " · bloqueado";
    color: var(--brasa);
    font-weight: 400;
}

/* Duas colunas no cadastro: nome e rua ocupam a linha inteira, o resto
   divide. Campo curto em linha própria faz o formulário parecer mais
   longo do que é — e formulário que parece longo não é preenchido no
   balcão. */
.grade-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e3) var(--e4);
}

.grade-2 .crescer-2 { grid-column: 1 / -1; }

@media (max-width: 720px) {
    .grade-2 { grid-template-columns: 1fr; }
}

/* Presente marcado. Âmbar porque muda duas coisas de verdade: o que
   sai na impressora e o que o CRM aprende sobre o cliente. */
.quem__campo--marcado {
    border-color: var(--ambar);
    background: var(--ambar-fundo);
}

.quem__campo--marcado .quem__valor { color: var(--ambar); }
.quem__campo--marcado .quem__icone { stroke: var(--ambar); }

/* A condicional vencida na lista. Brasa porque é a que precisa de
   conversa — e a que some do radar se ninguém olhar. */
.escolha--atrasada { border-color: var(--brasa); }

.escolha--atrasada .escolha-titulo { color: var(--brasa); }

/* O valor à direita da escolha: alinha a coluna de dinheiro na lista
   de condicionais. */
.escolha-valor {
    margin-left: auto;
    font-family: var(--fonte-valor);
    font-weight: 600;
}

/* ── A LISTA QUE PODE TER TRINTA ──
   Rola dentro do modal em vez de esticar a janela até fora da tela.
   A altura é fixa de propósito: o campo de busca e o resumo ficam
   sempre visíveis, e é neles que se resolve uma lista longa. */
.rolagem {
    max-height: 46vh;
    overflow-y: auto;
    padding-right: var(--e2);
}

/* O resumo do que está na rua. Vira âmbar quando há vencida — o número
   que muda a conversa com o cliente. */
.resumo--alerta { color: var(--ambar); }

/* A forma que tem saldo disponível. Jade porque é dinheiro que o
   cliente já tem aqui — e o vendedor precisa ver antes de ele decidir
   pagar de outro jeito. */
.forma--tem-saldo {
    border-color: var(--jade-forte);
}

.forma--tem-saldo .forma__atalho { color: var(--jade); }

.forma:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.forma:disabled:hover { border-color: var(--fumaca); }

/* O vale na tela do balcão. Grande porque o vendedor lê em voz alta e
   o cliente confere de onde está. */
.vale-tela {
    font-family: var(--fonte-valor);
    font-size: var(--t-total);
    font-weight: 700;
    line-height: 1;
}

.vale-tela__codigo {
    margin-top: var(--e2);
    font-family: var(--fonte-valor);
    font-size: var(--t-grande);
    letter-spacing: 0.15em;
    color: var(--giz-suave);
}

/* A forma que precisa de autorização. Continua clicável — o gerente
   libera ali mesmo, e o cliente não ouve uma negativa que talvez não
   seja negativa. */
.forma--atencao { border-color: var(--ambar); }

.forma--atencao .forma__atalho { color: var(--ambar); }

/* O plano do carnê, na frase que o vendedor fala em voz alta. */
.crediario-resumo {
    font-family: var(--fonte-valor);
    font-size: var(--t-grande);
    font-weight: 700;
    text-align: center;
}

/* Por que não há caixa aqui. Pode ser "nenhum aberto" ou "aberto em
   outro terminal" — e a segunda é a que evita o vendedor achar que o
   sistema quebrou. */
.espera__motivo {
    max-width: 420px;
    margin: var(--e3) auto 0;
    text-align: center;
    color: var(--ambar);
}

.espera__motivo:empty { display: none; }