/* ====================== POPPINS ======================
 * Hospedada aqui, nao no Google. O caixa ja depende da internet
 * para falar com o servidor, mas uma origem a menos e uma coisa a
 * menos para falhar no meio do expediente - e o texto nao chega ao
 * Google a cada carga de pagina.
 *
 * So os pesos que a interface usa (400, 600, 700, 800), nos subsets
 * latinos. O devanagari que o Google serve junto nao tem uso aqui.
 * `swap`: o texto aparece na fonte do sistema e troca quando a
 * Poppins chega, em vez de a tela ficar em branco.
 * ==================================================== */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/poppins-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/poppins-800-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==================== CHAKRA PETCH ====================
 * So para a marca da casa, no alto do cabecalho.
 *
 * A Poppins e geometrica e larga: em caixa alta, o nome da loja virava
 * uma faixa de letras redondas que competia com o resto do cabecalho
 * em vez de se destacar dele.
 *
 * Um peso so, 600, nos dois subsets latinos: e um elemento de uma
 * linha, e cada peso a mais e um arquivo a mais para carregar.
 * Hospedada aqui, como a Poppins, pelo mesmo motivo - uma origem a
 * menos para falhar no meio do expediente, e o nome da loja nao vai ao
 * Google a cada carga de pagina.
 * ====================================================== */

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/chakra-petch-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * PDV Cloud CronosApp — folha de estilo
 *
 * Referência visual: tela do PDV atual (cabeçalho escuro, menu lateral com
 * ícones, pedido à esquerda e lançamento à direita).
 * Resolução de referência: 1280x720, ocupando toda a tela, SEM rolagem de
 * página (D15). Uso em monitor de toque: alvo tocável de no mínimo 52px.
 */

:root {
    --verde-escuro: #053D38;
    --verde-menu: #7FA98A;
    --verde-menu-ativo: #559260;
    /* Fundo dos botões do menu, medido na barra do PDV atual. É escuro de
       propósito: com o texto branco em cima dá 9:1 de contraste, contra
       3,7:1 de um verde médio — é daí que vem a legibilidade daquela
       barra, não do tamanho do ícone. */
    --verde-menu-inativo: #07524C;
    --verde-botao: #A9C9AE;
    --verde-botao-borda: #8FB596;
    --verde-claro: #DCE8DE;

    /* Verde do FINALIZAR. É variável porque a caixa "A RECEBER" usa o
       mesmo tom quando a conta está quitada — se um mudar sem o outro, a
       tela passa a dizer duas coisas sobre o mesmo estado. */
    --verde-receber: #1C7A34;

    /* Amarelo de "ainda falta receber". Só aceita texto escuro: com branco
       o contraste cai para 1,8:1 e o valor fica ilegível de pé, a um metro
       da tela, que é a distância de quem opera o caixa. */
    --amarelo-falta: #FFC107;
    /* Caixas de valor do recebimento. Os três tons saíram medidos da tela
       do PDV atual, pixel a pixel: o fundo é bem mais tingido que o
       `--verde-claro`, e o rótulo é verde, não cinza. */
    --verde-caixa: #A3CCAB;
    --verde-caixa-borda: #8CBB96;
    --verde-caixa-rotulo: #34675C;
    /* Ciano das ações do recebimento — ADD DESCONTO, formas de pagamento e
       CPF/CNPJ são a mesma família de botão. */
    --ciano: #17A2B8;
    --ciano-borda: #148EA1;
    /* Borda dos campos de digitar do recebimento: azulada, para não se
       confundir com as caixas de valor, que são verdes. */
    --azul-campo: #7F9BB0;
    --laranja: #F26800;
    --laranja-escuro: #C85400;
    --cinza-fundo: #E7ECEA;
    --cinza-campo: #F2F5F3;
    --cinza-linha: #C9D6CE;
    --cinza-texto: #6B6B6B;
    --branco: #fff;
    --erro: #AA0303;
    --sucesso: #1C7A34;
    --azul-item: #1F3F7A;   /* texto da lista de itens, como no PDV atual */

    /* Estados da mesa. O azul claro é o único cartão de fundo claro do
       mapa, e é por isso que ele salta. Em branco ele daria 2,8:1, abaixo
       do mínimo, então o texto dele vai de verde-escuro: 5,8:1. */
    --mesa-ocupada: #1F4E9C;
    --mesa-parada: #7FB8F5;   /* ocupada e sem consumir há 30min */
    --mesa-outro: #F2B705;    /* presa em outro aparelho — o mesmo do app do garçom */

    --h-cabecalho: 66px;
    --h-rodape: 30px;
    --l-menu: 92px;
    --raio: 8px;
    --gap: 8px;
    --toque: 52px;

    font-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
    /* A pilha atrás da Poppins não é decoração: enquanto o woff2 carrega,
       e se ele falhar, é ela que o caixa lê. */
    font-family: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;
    color: #333;
    background: var(--verde-escuro);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

button, input, select { font-family: inherit; font-size: 1rem; }
button { cursor: pointer; border: none; background: none; }

/* `hidden` quer dizer escondido, e aqui ele precisa ganhar de tudo.

   O `display: none` do navegador vem de um seletor fraquíssimo, e
   qualquer `.btn { display: flex }` nosso passa por cima dele: o
   elemento marcado como oculto aparecia assim mesmo. Foi o que pôs o
   "Aguardando retorno" e os botões da espera na tela do TEF Mobile
   antes de a cobrança sair. */
[hidden] { display: none !important; }

/* ============================ ESTRUTURA ============================ */

.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.cabecalho {
    height: var(--h-cabecalho);
    background: var(--verde-escuro);
    color: var(--branco);
    display: grid;
    grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
    align-items: center;
    padding: 0 12px;
    flex-shrink: 0;
}

.cabecalho .logo { display: flex; align-items: center; }
.cabecalho .logo img { height: 46px; width: auto; display: block; object-fit: contain; }

.cabecalho .centro {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-align: center;
    /* Deixa a coluna encolher: sem isto, uma marca comprida empurra o
       logo e o SAIR para fora do cabeçalho em vez de ser cortada. */
    min-width: 0;
}
/* A marca da casa é a primeira coisa do cabeçalho, e por isso é a maior.
   Era menor do que o selo logo abaixo, e o olho batia no "Ponto de
   Venda" — que é igual em toda loja — antes de bater no nome da casa.

   Não quebra em duas linhas: o cabeçalho tem altura fixa, e marca
   comprida empurraria o selo para fora dele. O que não couber é cortado
   com reticências, que é o que a largura do campo já promete no
   cadastro. */
.cabecalho .empresa {
    /* Outra família, e não a Poppins do resto: em caixa alta a
       geométrica virava uma faixa de letras redondas que competia com o
       cabeçalho em vez de se destacar dele. Fallback na Poppins e na
       família do sistema, para o instante entre a página abrir e a
       fonte chegar. */
    font-family: 'Chakra Petch', 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;
    /* 14px. A raiz é 16px, então 0,875rem — o resto da folha fala em
       rem, e um px solto aqui fugiria da escala de todo mundo. */
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cabecalho .selo {
    background: var(--laranja);
    color: var(--branco);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: .85rem;
    line-height: 1;
    padding: 7px 40px;
    border-radius: 20px;
    text-transform: uppercase;
    white-space: nowrap;
}
.cabecalho .selo.homologacao { background: var(--erro); }

/* Sem caixa pareado: a administração entrando pela web. Outra cor porque é
   outro lugar do sistema, e confundir os dois é o que se quer evitar. */
.cabecalho .selo.administracao { background: var(--verde-menu-inativo); }

/* A terceira coluna: a marca da loja (só para o admin do sistema) e o SAIR.
   As duas num flex para o grid de três colunas continuar valendo. */
.acoes-cabecalho { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.loja-da-sessao {
    display: flex; align-items: center; gap: 10px;
    color: var(--branco);
    height: 48px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    max-width: 320px;
}
.loja-da-sessao .dizeres {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    min-width: 0;
}
.loja-da-sessao .dizeres > span {
    font-size: .55rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: .8;
}
.loja-da-sessao strong {
    font-size: .72rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}

/* Trocar de loja mora aqui dentro, ao lado do nome: dizer onde se está e
   mudar de lugar são a mesma conversa.

   Laranja, o destaque da casa: é a única coisa clicável do cabeçalho
   além do SAIR, e contra o verde escuro o contorno branco sozinho se
   confundia com a moldura da própria marca. */
.loja-da-sessao .trocar-loja {
    background: var(--laranja);
    color: var(--branco);
    font-size: .55rem; font-weight: 800; letter-spacing: 1px;
    padding: 7px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
.loja-da-sessao .trocar-loja:active { filter: brightness(.9); }

.cabecalho .sair { display: flex; justify-content: flex-end; }
.cabecalho .sair button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    color: var(--branco); font-size: .6rem; font-weight: 800; letter-spacing: 1px;
    min-width: 64px; height: 48px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .25);
}
.cabecalho .sair button:active { background: rgba(255, 255, 255, .15); }
.cabecalho .sair img { width: 22px; filter: brightness(0) invert(1); }

.corpo { display: flex; flex: 1; min-height: 0; gap: var(--gap); padding: var(--gap); }

.menu { width: var(--l-menu); display: flex; flex-direction: column; gap: var(--gap); flex-shrink: 0; }

.menu a {
    background: var(--verde-menu-inativo);
    color: var(--branco);
    border-radius: var(--raio);
    min-height: 70px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-decoration: none;
    font-size: .58rem; font-weight: 800; line-height: 1.25; text-align: center; letter-spacing: .5px;
    padding: 8px 4px;
}
/*
 * Ícone desenhado por máscara: a cor vem do próprio botão, sem precisar de
 * dois arquivos nem de filtro de inversão.
 */
.menu a .icone {
    width: 24px; height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

/*
 * O módulo em uso sai do verde: é a única coisa laranja da barra, então o
 * operador acha onde está pela cor, antes de ler o rótulo.
 *
 * Texto e ícone brancos, como nos demais: o branco sobre o laranja dá
 * 3,1:1, abaixo do mínimo da WCAG para texto pequeno, mas a barra inteira
 * fica com um tratamento só e o item em uso já se distingue pela cor.
 */
.menu a.ativo { background: var(--laranja); color: var(--branco); }

/*
 * Alertas de impressão, no pé da barra, com a forma dos módulos. O
 * `margin-top: auto` o empurra para baixo: separado dos módulos, não é
 * confundido com um lugar para onde se vai.
 * Vermelho de erro, e não laranja: o laranja já quer dizer "você está
 * aqui", e um alerta com a cor do módulo em uso seria lido como mais um
 * módulo. A contagem vai no canto, como selo, para o rótulo e o triângulo
 * ficarem no lugar em que o olho os acha nos outros botões.
 */
.menu-ocorrencias {
    position: relative;
    margin-top: auto;
    /* Um respiro do rodapé: colado na borda, o botão parecia parte dela. */
    margin-bottom: 14px;
    /* Pisca lento: o triângulo e o rótulo alternam entre branco e amarelo,
       1,2 s em cada cor, com a troca seca de um pisca-pisca. O fundo fica
       parado — um botão que muda de lugar ou some é um botão que se perde.
       O ícone é máscara pintada com `currentColor`, então animar a cor do
       texto leva o triângulo junto. */
    animation: alerta-pisca 2.4s linear infinite;
    background: var(--erro);
    color: var(--branco);
    border: 0;
    border-radius: var(--raio);
    min-height: 70px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font: inherit; font-size: .58rem; font-weight: 800; line-height: 1.25; letter-spacing: .5px;
    padding: 8px 4px;
    cursor: pointer;
}
.menu-ocorrencias[hidden] { display: none; }
/*
 * O amarelo é o âmbar da casa (`--amarelo-falta`), e não o laranja: o
 * laranja, sobre o vermelho de erro, quase some (os dois são escuros), e o
 * triângulo pareceria apagado na metade colorida do ciclo.
 *
 * Sem exceção para `prefers-reduced-motion`, de propósito. O Windows
 * Server — e quase toda máquina acessada por área de trabalho remota — vem
 * com as animações do sistema desligadas, e o navegador repassa isso como
 * "reduzir movimento": com a exceção, o alerta não piscava justamente nos
 * PDVs da loja. Um alerta que precisa ser visto não é animação decorativa.
 */
@keyframes alerta-pisca {
    0%, 47%   { color: var(--branco); }
    50%, 97%  { color: var(--amarelo-falta); }
    100%      { color: var(--branco); }
}
.menu-ocorrencias .icone {
    width: 24px; height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}
.menu-ocorrencias .contagem {
    position: absolute; top: 5px; right: 5px;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    background: var(--branco); color: var(--erro);
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 800;
}

.lista-ocorrencias { list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.lista-ocorrencias li {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-left: 4px solid var(--erro); background: var(--cinza-campo);
    font-size: .85rem; text-align: left;
}
.lista-ocorrencias li.ocorrencia-desvio { border-left-color: var(--amarelo-falta); }
.lista-ocorrencias li.ocorrencia-ok { border-left-color: var(--sucesso); }
.lista-ocorrencias li.ocorrencia-nota { border-left-color: var(--cinza-linha); background: transparent; }
.lista-ocorrencias li span { color: var(--cinza-texto); }
.modal-ocorrencias { max-width: 560px; }
.acoes-ocorrencia { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.acoes-ocorrencia form { display: flex; gap: 6px; align-items: center; }
/* Largura mínima medida para "Desviar para…" e nomes de impressora de até
   20 letras, na fonte da casa: com a largura do conteúdo, a lista cortava o
   próprio rótulo ("Desviar p"). */
/* Os comandos para a máquina do gerenciador, no cadastro do dispositivo. */
/* Botões do tamanho do texto, lado a lado: o `.btn` padrão ocupa a linha
   inteira, e três comandos empilhados em barras empurravam o teste da
   impressora para debaixo da barra de salvar. */
.comandos-da-maquina > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.comandos-da-maquina .btn { width: auto; flex: 0 0 auto; min-height: 38px; padding: 0 18px; }
.comandos-da-maquina select { width: auto; flex: 0 1 360px; min-height: 38px; }

/* A última atualização pedida à máquina. A recusada e a que não confirmou
   são as que pedem alguém: vermelhas. */
.situacao-atualizacao { margin-top: 8px; font-size: .85rem; font-weight: 700; }
.situacao-atualizacao.situacao-ok { color: var(--sucesso); }
.situacao-atualizacao.situacao-andamento { color: var(--cinza-texto); }
.situacao-atualizacao.situacao-recusada,
.situacao-atualizacao.situacao-sem_confirmar { color: var(--erro); }

/* A segunda via da comanda, nos detalhes da mesa e do pedido. */
.reimprimir-comanda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.reimprimir-comanda .rotulo { font-size: .8rem; font-weight: 700; color: var(--cinza-texto); }
.acoes-ocorrencia select { min-width: 190px; min-height: 36px; padding: 0 8px; border: 1px solid var(--cinza-linha); border-radius: 4px; background: var(--branco); font: inherit; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }

/*
 * A tela ocupa a altura toda, mesmo sobrando branco.
 *
 * Painel do tamanho do conteúdo deixava uma faixa verde embaixo que variava
 * de página para página — a lista de quatro operadores terminava no meio da
 * tela e a de vinte mesas ia até o fim. A moldura tem de ser a mesma sempre:
 * é ela que diz onde a tela começa e acaba. O vazio dentro dela é só vazio.
 *
 * `> ` de propósito: o `.painel` dentro da tela de venda é filho de uma
 * grade, e lá quem manda nas alturas é a grade.
 */
.conteudo > .painel,
.conteudo > .tela-lista,
.conteudo > .tela-fiscal { flex: 1; min-height: 0; }

.rodape-status {
    height: var(--h-rodape);
    background: var(--verde-claro);
    border-top: 1px solid var(--verde-menu);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: .66rem; color: var(--verde-escuro); font-weight: 600;
    padding: 0 14px; flex-shrink: 0; text-align: center;
}
.rodape-status .separador { color: var(--verde-menu); }
.rodape-status .copyright { font-weight: 400; opacity: .7; }

/* ========================== TELA DE VENDA ========================== */

/* 42/58, a proporção do PDV atual: o pedido é uma lista estreita, o
   recebimento tem seis botões de forma lado a lado e precisa da folga. */
.venda { display: grid; grid-template-columns: 42fr 58fr; gap: var(--gap); flex: 1; min-height: 0; }

.painel {
    background: var(--branco);
    border: 2px solid var(--verde-menu);
    border-radius: var(--raio);
    display: flex; flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/*
 * Faixa do pedido: rótulo pequeno e número grande, como no PDV atual — o
 * operador precisa ler o número do pedido de relance, à distância.
 */
.faixa-pedido {
    background: var(--laranja);
    color: var(--branco);
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 5px 14px;
    font-weight: 700; letter-spacing: 1px;
}
.faixa-pedido .rotulo { font-size: .78rem; opacity: .95; }
.faixa-pedido .valor { font-size: 1.4rem; font-weight: 800; margin-left: 8px; }
.faixa-pedido .divisor { margin: 0 14px; opacity: .55; font-weight: 400; }

/*
 * Lista de itens: densa de propósito. Numa conta de restaurante é comum
 * passar de 20 itens, e o operador precisa ver o máximo sem rolar.
 */
/*
 * Cabeçalho e corpo são tabelas separadas: assim a barra de rolagem começa
 * abaixo do cabeçalho, em vez de correr por trás dele.
 * As duas usam table-layout fixo e as mesmas larguras, para as colunas
 * ficarem alinhadas; o JS reserva no cabeçalho a largura da barra.
 */
.itens-cabecalho { flex: 0 0 auto; background: #93A39B; }
.itens-cabecalho table,
.itens table { width: 100%; border-collapse: collapse; font-size: .78rem; table-layout: fixed; }

.itens-cabecalho th {
    background: #93A39B; color: #17251F;
    padding: 5px 10px; text-align: left;
    font-size: .7rem; font-weight: 700; letter-spacing: .3px;
    border-bottom: 1px solid #7E8F86;
}

.itens { flex: 1; overflow-y: auto; min-height: 0; background: var(--branco); }
.itens td {
    padding: 4px 10px;
    color: var(--azul-item);
    line-height: 1.5;
    border: none;
}
.itens tbody tr:nth-child(even) td { background: #EDEDED; }

/* Larguras compartilhadas pelas duas tabelas */
.itens .item, .itens-cabecalho .item { width: 52px; }
.itens .qtde, .itens-cabecalho .qtde { width: 68px; }
.itens .valor, .itens-cabecalho .valor { width: 104px; }
.itens .item { color: var(--azul-item); }

.itens .dir, .itens-cabecalho .dir { text-align: right; white-space: nowrap; }
.itens .cen, .itens-cabecalho .cen { text-align: center; }
.itens td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itens .vazio { text-align: center; color: var(--cinza-texto); padding: 36px 10px; }
.itens td small { color: var(--cinza-texto); }

.rodape-pedido {
    border-top: 2px solid var(--verde-menu);
    display: grid; grid-template-columns: 1fr 280px;
    gap: var(--gap); padding: var(--gap);
    background: var(--cinza-fundo);
}

.mensagem {
    background: var(--verde-claro);
    border: 1px solid var(--verde-menu);
    border-radius: var(--raio);
    padding: 10px;
    font-size: .78rem; color: var(--verde-escuro); line-height: 1.5;
}
.mensagem .titulo { font-weight: 700; font-size: .68rem; text-transform: uppercase; margin-bottom: 4px; }

/* Cada linha da mensagem da mesa leva um sinal quadrado da cor do mapa,
   para quem veio de la reconhecer o estado sem reler. A cor e reforco: a
   linha diz por escrito o que o sinal diz. */
.mensagem .sinal {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 3px;
}

.mensagem .sinal::before {
    content: "";
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-radius: 2px;
    background: currentColor;
}

.mensagem .sinal.verde::before { background: var(--sucesso); }
.mensagem .sinal.azul::before { background: var(--mesa-ocupada); }
.mensagem .sinal.vermelho::before { background: var(--erro); }
.mensagem .sinal.amarelo::before { background: #D9A400; }
.mensagem .sinal.sem-marca::before { background: transparent; }

.totais { display: flex; flex-direction: column; gap: 6px; }
/* Rótulo alinhado à direita, encostando no valor: a leitura fica direta */
.totais .linha { display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: 10px; }
.totais .rotulo {
    font-size: .74rem; font-weight: 700; color: var(--verde-escuro);
    text-transform: uppercase; text-align: right;
}
.totais .valor {
    background: var(--cinza-campo); border: 1px solid var(--cinza-linha); border-radius: 4px;
    padding: 6px 10px; text-align: right; font-weight: 700; font-size: .88rem;
}
.totais .total .valor { background: var(--verde-escuro); color: var(--branco); font-size: 1.1rem; }

.acoes-pedido {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap); padding: 0 var(--gap) var(--gap);
    background: var(--cinza-fundo);
}

/* Ícone em cima, texto embaixo — fica mais legível no toque */
.acoes-pedido .btn {
    flex-direction: column;
    gap: 5px;
    min-height: 68px;
    font-size: .74rem;
    line-height: 1.1;
}
/*
 * Altura fixa e largura livre: os ícones vêm de desenhos com proporções
 * diferentes (um quadrado, um alto, um largo). Fixar os dois lados deformava
 * uns e fazia outros parecerem menores.
 */
.acoes-pedido .btn img {
    height: 22px; width: auto; max-width: 30px;
    object-fit: contain;
}

.rotulo-secao {
    background: var(--verde-claro);
    color: var(--verde-escuro);
    font-size: .68rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    padding: 6px 12px;
    border-bottom: 1px solid var(--verde-menu);
}

.busca { display: flex; gap: var(--gap); padding: var(--gap); align-items: flex-end; }
.busca .campo { flex: 1; }

/* Botões da barra de busca: ícone em cima, texto embaixo */
.busca .btn {
    flex-direction: column;
    gap: 3px;
    font-size: .68rem;
    padding: 6px 8px;
    line-height: 1.1;
}
.busca .btn img { width: 18px; height: 18px; }
.busca label { font-size: .7rem; font-weight: 700; color: var(--verde-escuro); display: block; margin-bottom: 4px; }

input[type="text"], input[type="password"], input[type="number"], select {
    width: 100%;
    min-height: var(--toque);
    padding: 10px 14px;
    border: 2px solid var(--cinza-linha);
    border-radius: var(--raio);
    background: var(--branco);
    font-size: 1.02rem;
}
input:focus, select:focus { outline: none; border-color: var(--laranja); }

.grade {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
    align-content: start;
}
.grade.grupos { flex: 0 0 auto; max-height: 160px; }
.grade.produtos { flex: 1; }

.tecla {
    background: var(--verde-botao);
    border: 1px solid var(--verde-botao-borda);
    border-radius: var(--raio);
    color: var(--verde-escuro);
    min-height: 66px;
    padding: 6px 4px;
    font-size: .66rem; font-weight: 700; line-height: 1.2; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none;
    width: 100%;
}
.tecla:active { transform: scale(.97); }
.tecla.ativa { background: var(--verde-escuro); color: var(--branco); }
.tecla .preco { font-size: .6rem; font-weight: 600; opacity: .8; }

/* ============================= BOTÕES ============================== */

.btn {
    min-height: var(--toque);
    border-radius: var(--raio);
    font-weight: 800; font-size: .78rem; letter-spacing: .5px; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none; text-align: center;
    padding: 8px 12px;
    width: 100%;
    border: 2px solid transparent;
}
.btn img { width: 18px; height: 18px; }
.btn:active { transform: scale(.98); }

/* Texto preto sobre o laranja: o contraste passa de 2,9:1 para 7:1 */
.btn-primario { background: var(--laranja); color: #14110F; border-color: var(--laranja-escuro); }
.btn-perigo { background: #D93025; color: var(--branco); }
.btn-receber { background: var(--verde-receber); color: var(--branco); }

/* Ícones em branco nos botões de fundo escuro */
.btn-perigo img, .btn-receber img, .btn-escuro img, .btn-verde img {
    filter: brightness(0) invert(1);
}
.btn-escuro { background: var(--verde-escuro); color: var(--branco); }
.btn-verde { background: var(--verde-menu-ativo); color: var(--branco); }
.btn-claro { background: var(--verde-botao); color: var(--verde-escuro); border-color: var(--verde-botao-borda); }
.btn-neutro { background: var(--branco); color: var(--verde-escuro); border-color: var(--cinza-linha); }
.btn:disabled, .btn.desabilitado { opacity: .45; pointer-events: none; }

.btn-icone {
    min-width: 42px; min-height: 42px;
    border-radius: 6px; color: var(--erro); font-size: 1.05rem; font-weight: 700;
    background: #FBEAEA;
}

/* ========================= PÁGINA PRINCIPAL ========================
 * Mesma organização do PDV atual: caixa, vendas e fiscal em três blocos,
 * cada um com seções ":: Título" e indicadores lado a lado.
 */

/* Contêiner único, como no PDV atual: os três blocos dentro dele, com a
   mesma altura e a mesma largura. */
.painel-principal {
    background: var(--branco);
    border: 2px solid var(--verde-menu);
    border-radius: var(--raio);
    padding: var(--gap);
    display: flex; flex-direction: column; gap: var(--gap);
    flex: 1; min-height: 0;
    overflow-y: auto;
}

.saudacao {
    font-size: 1.05rem; font-weight: 700; color: var(--verde-escuro);
    padding: 2px 4px;
}

.blocos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    align-items: stretch;      /* todos com a altura do maior */
    flex: 1; min-height: 0;
}

.bloco {
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.bloco .bloco-corpo { flex: 1; overflow-y: auto; }

.bloco h2 {
    background: #DDE5E1;
    color: var(--verde-escuro);
    font-size: .78rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cinza-linha);
}

.bloco-corpo { padding: 10px 14px 14px; }

.secao {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .8rem; font-weight: 800; color: var(--verde-escuro);
    text-transform: uppercase; letter-spacing: .3px;
    padding: 12px 0 5px;
    border-bottom: 1px solid var(--cinza-linha);
    margin-bottom: 8px;
}
/* Respiro entre um módulo e o próximo, e não no primeiro deles: os 12px
   que separavam ":: Vendas Balcão" dos números de ":: Pedidos" eram os
   mesmos que separavam o primeiro título do topo do bloco, e o olho não
   via onde um assunto acabava e o outro começava. Só aqui, porque é
   onde há um assunto novo depois de um grupo de números. */
.indicadores + .secao { padding-top: 34px; }

.secao a {
    font-size: .65rem; font-weight: 700; color: var(--verde-menu-ativo);
    text-decoration: none; text-transform: lowercase;
}

/*
 * Dois blocos empilhados numa coluna da grade, com a mesma altura.
 *
 * Nasceu de "Movimentos Fiscais" e "Movimentos Financeiros", que eram um
 * bloco só: o financeiro entrava por uma faixa no meio do corpo fiscal,
 * dois assuntos sob um cabeçalho que falava de um deles. Como a coluna
 * ainda sobrava embaixo, dividi-la em duas não custou altura nenhuma.
 *
 * `minmax(0, 1fr)` nas duas linhas, e não `1fr`: com `1fr` puro a linha
 * não encolhe abaixo do conteúdo, e a que tivesse mais números roubaria
 * altura da outra — que é justamente o que esta regra existe para
 * evitar.
 */
.coluna-blocos {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0;
}
.coluna-blocos > .bloco { min-height: 0; }

/* Situação de período e caixa */
.situacao {
    display: grid; grid-template-columns: 74px 1fr auto;
    align-items: center; gap: 10px;
    padding-bottom: 6px;
}
/* Linha sem detalhes a mostrar: só o pino, o campo e o botão. Sem a
   coluna do meio as três peças andam juntas e ficam centradas, em vez
   de o 1fr vazio empurrar o formulário para a borda e deixar um buraco
   no meio da linha. */
/* Pela base, e não pelo centro: o rótulo em cima do campo faz o grupo
   do troco ser mais alto que o pino e que o botão, e centrar deixava os
   três em três alturas diferentes. Alinhados embaixo, pino, campo e
   botão formam uma linha só — nas mesmas três colunas da linha do
   período, com o botão na borda. */
.situacao.pela-base { align-items: end; }

.situacao .chave { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.situacao .pino {
    width: 42px; height: 22px; border-radius: 12px; position: relative;
    background: var(--erro);
}
.situacao .pino.ligado { background: var(--sucesso); }
.situacao .pino::after {
    content: ''; position: absolute; top: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--branco);
}
.situacao .pino.ligado::after { right: 3px; }
.situacao .pino.desligado::after { left: 3px; }
.situacao .estado { font-size: .72rem; font-weight: 800; }
.situacao .estado.aberto { color: var(--sucesso); }
.situacao .estado.fechado { color: var(--erro); }

.situacao .detalhes .titulo { font-size: 1.05rem; font-weight: 800; color: var(--verde-escuro); }
.situacao .detalhes .rotulo { font-size: .66rem; color: var(--cinza-texto); text-transform: uppercase; margin-top: 3px; }
.situacao .detalhes .valor { font-size: .78rem; font-weight: 700; color: #333; }

/* Serve a `<button>` e a `<a>`, e é por isso que centraliza à mão: o
   FECHAR do período e o do caixa são links — passam antes pela tela de
   conferência —, e link não é caixa centrada por padrão. O texto saía
   encostado à esquerda e sublinhado, parecendo outra coisa que o ABRIR
   ao lado, que é botão de verdade. */
.btn-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    min-height: 40px; min-width: 88px;
    border-radius: 6px; padding: 8px 14px;
    font-size: .75rem; font-weight: 800; letter-spacing: .5px; color: var(--branco);
}
.btn-acao.iniciar { background: var(--verde-menu-ativo); }
.btn-acao.encerrar { background: #C42B21; }
.btn-acao:active { transform: scale(.97); }

/* Rótulo em cima do campo, e não ao lado. Lado a lado o formulário
   media 275px e a linha passava da borda do bloco a partir de 1280px de
   tela — medido no Chrome, 18,5px de transbordo. Empilhado ele fica em
   188px fixos, que é a largura que tinha antes do rótulo existir. */
.abrir-caixa { display: flex; gap: 8px; align-items: flex-end; }
/* O rótulo é mais largo que o campo, então sem o `center` ele ficaria
   encostado à esquerda e o campo pareceria fora de prumo embaixo dele. */
.abrir-caixa .campo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.abrir-caixa label {
    font-size: .6rem; font-weight: 700; text-transform: uppercase;
    color: var(--cinza-texto); white-space: nowrap;
}
.abrir-caixa input { width: 92px; min-height: 40px; font-size: .9rem; padding: 6px 8px; }

.form-sangria { display: grid; grid-template-columns: 100px 1fr auto; gap: 6px; }
.form-sangria input { min-height: 40px; font-size: .85rem; padding: 6px 8px; }

/* Indicadores em linha, separados por divisória */
.indicadores { display: flex; gap: 0; }
.indicadores > div {
    flex: 1; padding: 4px 12px;
    border-left: 1px solid var(--cinza-linha);
}
.indicadores > div:first-child { border-left: none; padding-left: 0; }
/* O respiro é do número, e não do rótulo: encurtar a entrelinha para o
   rótulo de duas linhas não se abrir colou o número nele. 2px separa os
   dois sem reabrir o espaço entre "Produtos" e "Vendidos". */
.indicadores strong {
    display: block; font-size: 1.7rem; font-weight: 800; color: var(--verde-escuro);
    line-height: 1.1; margin-bottom: 2px;
}
/* Bloco e com entrelinha curta: "Produtos Vendidos" não cabe numa linha
   na coluna de um terço de bloco, e com a entrelinha do corpo as duas
   palavras ficavam longe uma da outra, parecendo dois rótulos. */
.indicadores span {
    display: block;
    font-size: .66rem; line-height: 1.15; color: var(--cinza-texto);
}
.indicadores .atencao strong, .indicadores .atencao span { color: var(--erro); }
.indicadores.valores strong { font-size: 1.15rem; }

/* Outros caixas abertos */
.lista-caixas {
    background: #E0E6E3; border-radius: 6px; padding: 8px; min-height: 60px;
    display: flex; flex-direction: column; gap: 4px;
}
.linha-caixa {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: .74rem; color: var(--verde-escuro);
    background: var(--branco); border-radius: 4px; padding: 6px 8px;
}
.linha-caixa .operador { color: var(--cinza-texto); }
.vazio-lista { font-size: .72rem; color: var(--cinza-texto); text-align: center; padding: 14px 0; }

/* ============================= TOASTS ============================== */

/* Alto à direita, sobre a faixa do cabeçalho.
   No pé da tela o aviso tapava os totais e o FINALIZAR. Já a área de
   trabalho é cheia de ponta a ponta: em qualquer altura dela o aviso
   cobriria um botão. O cabeçalho é a única faixa livre, e à direita dele
   só existe o SAIR — daí o recuo que deixa o botão à mostra. */
.toasts {
    position: fixed;
    /* Canto superior direito, alinhado pela direita com o SAIR — que ele
       cobre enquanto aparece. São quatro segundos, e o botão de sair não é
       o que o operador procura logo depois de registrar um recebimento. */
    right: 12px;
    top: 9px;
    z-index: 1000;
    display: flex; flex-direction: column; gap: 10px;
    max-width: min(440px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px;
    border-radius: var(--raio);
    background: var(--branco);
    color: #23302b;
    font-size: .9rem; font-weight: 600; line-height: 1.35;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    border-left: 6px solid var(--sucesso);
    animation: toast-entra .22s ease-out;
}
.toast .icone {
    flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .9rem; color: var(--branco);
    background: var(--sucesso);
}
.toast .texto { flex: 1; }
.toast .fechar {
    flex-shrink: 0; min-width: 40px; min-height: 40px;
    border-radius: 6px; color: var(--cinza-texto); font-size: 1rem; font-weight: 700;
}
.toast .fechar:active { background: var(--cinza-fundo); }
.toast-erro { border-left-color: var(--erro); }
.toast-erro .icone { background: var(--erro); }
.toast.saindo { animation: toast-sai .25s ease-in forwards; }

@keyframes toast-entra {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-sai {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(24px); }
}

/* ============================== MODAL ============================== */

.modal-fundo {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: center; justify-content: center;
    z-index: 900;
    padding: 20px;
}
.modal-fundo.aberto { display: flex; }

.modal {
    background: var(--branco);
    border-radius: 6px;
    width: min(410px, 100%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
    overflow: hidden;
    animation: modal-entra .18s ease-out;
}

.modal-cabecalho {
    background: var(--laranja);
    color: var(--branco);
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
}
.modal-cabecalho h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: .5px; }
.modal-cabecalho .fechar-modal {
    color: var(--branco); font-size: 1.25rem; font-weight: 700;
    min-width: 42px; min-height: 42px;
}

.modal-corpo { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.modal-corpo .instrucao { text-align: center; font-size: .95rem; font-weight: 700; color: var(--verde-escuro); }
.modal-corpo .campo-modal { text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; min-height: 58px; }

.teclado { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.tecla-num {
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-linha);
    border-radius: 6px;
    min-height: 60px;
    font-size: 1.35rem; font-weight: 700; color: #2b2b2b;
    display: flex; align-items: center; justify-content: center;
}
.tecla-num:active { background: var(--verde-botao); transform: scale(.97); }
.tecla-num.acao { font-size: 1rem; font-weight: 800; }
/* A ultima fila: primeira coluna vazia, o zero no tamanho das outras e a
   tecla de saida ocupando as duas ultimas. */
.tecla-num.na-coluna-2 { grid-column-start: 2; }
.tecla-num.dupla { grid-column: span 2; }

.tecla-num.confirmar {
    background: var(--verde-menu-ativo); color: var(--branco); border-color: var(--verde-menu-ativo);
    font-size: 1.2rem;
}

/* Tecla que é link. Um <a> não centra o conteúdo como um <button>, então
   o alinhamento vem daqui; o resto da aparência é das classes de tecla. */
.tecla-num.tecla-link {
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}

/* Mesma tecla, para quando o envio destrói alguma coisa. */
.tecla-num.perigo {
    background: #D93025; color: var(--branco); border-color: #D93025;
    font-size: 1.05rem;
}

/* Rodapé com um botão só: o envio foi para a tecla do teclado. */
.modal-confirmar .acoes-modal.unica { grid-template-columns: 1fr; }

/* Avancar nao e confirmar: fica no cinza-escuro da barra, nao no verde
   do ENTER, para o dedo nao enviar o formulario achando que so passa de
   campo. */
/* Linha inteira, para a saida ter o mesmo alvo das teclas. */
.tecla-num.larga { grid-column: 1 / -1; }

.tecla-num.voltar {
    background: var(--branco);
    border-color: var(--cinza-linha);
    color: var(--verde-escuro);
    font-size: 1rem; font-weight: 800;
}

.tecla-num.voltar:active { background: var(--cinza-fundo); }

.tecla-num.avancar {
    background: #24312C; color: var(--branco); border-color: #24312C;
}

.tecla-num.avancar .icone {
    width: 26px; height: 26px;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

@keyframes modal-entra {
    from { opacity: 0; transform: translateY(-12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Modal "Lançar Produto" ---------- */

.modal-produto { width: min(460px, 100%); }

.modal-produto .grupo-produto {
    font-size: .8rem; font-weight: 700; color: var(--cinza-texto); text-transform: uppercase;
}

.modal-produto .nome-produto {
    background: var(--verde-escuro);
    color: var(--branco);
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    font-size: 1.05rem; font-weight: 800; letter-spacing: .5px;
}

.modal-produto .preco-produto {
    display: flex; justify-content: flex-end; align-items: baseline; gap: 10px;
    font-size: .85rem; font-weight: 700; color: var(--verde-escuro); text-transform: uppercase;
}
.modal-produto .preco-produto strong { font-size: 1.3rem; }

.modal-produto label {
    font-size: .74rem; font-weight: 800; color: var(--verde-escuro);
    text-transform: uppercase; display: block; margin-bottom: 5px;
}

.modal-produto textarea {
    width: 100%;
    min-height: 84px;
    padding: 10px 12px;
    border: 2px solid var(--cinza-linha);
    border-radius: var(--raio);
    font-family: inherit; font-size: .95rem;
    resize: none;
}
.modal-produto textarea:focus { outline: none; border-color: var(--laranja); }

.modal-produto .quantidade { text-align: center; }
.modal-produto .titulo-qtde {
    display: block; font-size: .8rem; font-weight: 800; color: var(--verde-escuro);
    text-transform: uppercase; margin-bottom: 8px;
}
.modal-produto .controle-qtde {
    display: flex; justify-content: center; align-items: center; gap: 10px;
}
.modal-produto .passo {
    width: 58px; height: 58px;
    border-radius: 8px;
    background: var(--verde-menu-ativo); color: var(--branco);
    font-size: 1.7rem; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.modal-produto .passo.meia { font-size: 1.05rem; background: var(--verde-botao); color: var(--verde-escuro); }

/*
 * O 1/2 só aparece em produto marcado como combinado. O `display: flex` da
 * regra acima vence o atributo `hidden`, então é preciso escondê-lo aqui.
 */
.modal-produto .passo[hidden] { display: none; }
.modal-produto .passo:active { transform: scale(.95); }

.modal-produto .controle-qtde input {
    width: 86px; height: 58px;
    text-align: center; font-size: 1.45rem; font-weight: 800;
    background: var(--verde-claro); border: 2px solid var(--verde-botao-borda);
    border-radius: 8px; color: var(--verde-escuro);
}

.modal-produto .acoes-modal { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }

/* O botão em foco precisa ficar evidente: é o alvo do segundo Enter */
.modal-produto .acoes-modal .btn:focus-visible,
.modal-produto .acoes-modal .btn:focus {
    outline: 3px solid var(--laranja);
    outline-offset: 2px;
}
.btn-fechar { background: #D93025; color: var(--branco); }

/* ---------- Modal de confirmação ---------- */

.modal-confirmar { width: min(440px, 100%); }
.modal-confirmar .pergunta {
    font-size: 1.05rem; font-weight: 700; color: var(--verde-escuro);
    text-align: center; line-height: 1.4;
}
.modal-confirmar .detalhe-confirmacao {
    font-size: .85rem; color: var(--cinza-texto); text-align: center;
}

/* O que vai ser cancelado: é o que o operador tem de reconhecer antes de
   dizer sim, e em cinza se parecia com uma legenda. */
.modal-confirmar .detalhe-confirmacao.grave {
    color: var(--erro); font-weight: 800; font-size: .95rem;
}
.modal-confirmar .acoes-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.modal-confirmar .acoes-modal .btn { min-height: 58px; }

/* ---------- Modal "Pesquisa de Produtos" ---------- */

.modal-pesquisa { width: min(640px, 100%); }
.modal-pesquisa .modal-corpo { max-height: calc(100vh - 140px); overflow-y: auto; }
.modal-pesquisa label {
    font-size: .74rem; font-weight: 800; color: var(--verde-escuro);
    text-transform: uppercase; display: block; margin-bottom: 5px;
}

.modal-pesquisa .resultados {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
    min-height: 150px; max-height: 230px; overflow-y: auto;
    padding: 8px;
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    align-content: start;
}
.modal-pesquisa .resultados .dica {
    grid-column: 1 / -1; align-self: center; text-align: center;
    font-size: .82rem; color: var(--cinza-texto);
}

/* Teclado alfabético na tela */
.teclado-abc { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.tecla-abc {
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-linha);
    border-radius: 6px;
    min-height: 52px;
    font-size: 1.05rem; font-weight: 700; color: #2b2b2b;
    display: flex; align-items: center; justify-content: center;
}
.tecla-abc:active { background: var(--verde-botao); transform: scale(.96); }
.tecla-abc.acao { font-size: .8rem; font-weight: 800; }
.tecla-abc.espaco { grid-column: span 2; }

/* ============================== ACESSO ============================= */

.tela-acesso {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--verde-escuro); padding: 20px;
}

/* Tela baixa: a moldura verde em volta do cartão é enfeite, e enfeite é a
   primeira coisa a ceder quando o que está dentro não cabe. */
@media (max-height: 700px) {
    .tela-acesso { padding: 8px; }
}
/* O cartão é apertado de propósito: com a faixa de erro e o bloco de
   liberação abertos ele precisa caber inteiro numa tela de 720px MENOS a
   barra do navegador — na prática, pouco mais de 680px úteis. Cada folga
   aqui é multiplicada por dez elementos. */
.cartao-acesso {
    background: var(--cinza-fundo); padding: 18px 26px; border-radius: 18px;
    display: flex; flex-direction: column; gap: 10px; width: min(420px, 100%);
    /* `margin: auto` centraliza como o `align-items` do pai, mas sem cortar
       quando o cartão é mais alto que a tela: com o alinhamento central puro,
       o topo sai para fora e o navegador não deixa rolar até ele. */
    margin: auto;
}
.cartao-acesso h1 { font-size: 1.05rem; color: var(--verde-escuro); }
.cartao-acesso .logo { text-align: center; }
.cartao-acesso .logo img { height: 30px; }
.barra { background: var(--laranja); height: 4px; width: 100%; }
.cartao-acesso label { font-size: .74rem; font-weight: 700; color: var(--cinza-texto); display: block; margin-bottom: 3px; }
/* 44px continua alvo de toque confortável e devolve 8px por campo. */
.cartao-acesso input { min-height: 44px; }
.erro { color: var(--erro); font-size: .85rem; text-align: center; font-weight: 600; }
.info { font-size: .78rem; color: var(--cinza-texto); text-align: center; }

/* ---- Faixa de erro: uma linha, fundo cheio ----

   Texto vermelho sobre fundo claro se perde no meio de um formulário todo
   claro. A faixa cheia é vista antes de o operador começar a ler. */
.faixa-erro {
    margin: 0;
    /* Âncora do balão de ajuda: preso ao ícone, ele nasceria centrado num
       ponto perto da borda direita e escaparia do cartão. Preso à faixa,
       ocupa exatamente a largura dela. */
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--erro); color: var(--branco);
    padding: 8px 12px; border-radius: var(--raio);
    font-size: .8rem; font-weight: 700; line-height: 1.3; text-align: center;
}

/* O "?" ao lado da mensagem: o fato fica na faixa, o porquê fica aqui. */
.ajuda {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--branco); border-radius: 50%;
    font-size: .72rem; font-weight: 800; line-height: 1;
    cursor: pointer; user-select: none;
}

.ajuda .balao {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--verde-escuro); color: var(--branco);
    padding: 12px 14px; border-radius: var(--raio);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    font-size: .74rem; font-weight: 500; line-height: 1.5; text-align: left;
    /* Fora do fluxo e invisível, não `display: none`: assim a transição
       funciona e o leitor de tela continua achando o texto. */
    opacity: 0; visibility: hidden; transition: opacity .15s;
    z-index: 10;
}

.ajuda .balao strong { display: block; margin-bottom: 6px; color: var(--laranja); }

.ajuda:hover .balao,
.ajuda:focus .balao,
.ajuda.aberta .balao { opacity: 1; visibility: visible; }

/* Identificação do terminal, na tela de login: discreta, é só conferência.

   Cabe numa linha só — com a etiqueta de ambiente ela quebrava em duas, e
   duas linhas é altura que falta ao cartão quando o bloco de liberação
   aparece. */
.identificacao {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 5px;
    font-size: .66rem; color: var(--cinza-texto);
}
.identificacao .pdv { font-weight: 700; color: var(--verde-escuro); }
.identificacao .dispositivo::before { content: '· '; }
.identificacao .etiqueta-ambiente {
    background: var(--erro); color: var(--branco);
    font-size: .54rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    padding: 2px 7px; border-radius: 10px;
}

/* Na tela de acesso o botão principal leva texto branco */
.cartao-acesso .btn-primario { color: var(--branco); }
.rodape-acesso { font-size: .62rem; text-align: center; color: var(--cinza-texto); margin: 0; }

/* ======================== FAIXAS POR LARGURA ======================= */

@media (max-width: 1279px) {
    :root { --l-menu: 84px; }
    .grade { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1023px) {
    .venda { grid-template-columns: 1fr; }
    .corpo { flex-direction: column; }
    .menu { width: 100%; flex-direction: row; overflow-x: auto; }
    .menu a { min-width: 92px; }
    .grade { grid-template-columns: repeat(4, 1fr); }
    .cabecalho { grid-template-columns: 110px 1fr 72px; }
    .cabecalho .logo img { height: 30px; }
}

@media (max-width: 767px) {
    .grade { grid-template-columns: repeat(3, 1fr); }
    .rodape-pedido { grid-template-columns: 1fr; }
    .acoes-pedido { grid-template-columns: 1fr; }
    .cabecalho .selo { padding: 5px 16px; font-size: .75rem; }
    .rodape-status { font-size: .6rem; }
    .toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ======================== FAIXAS POR ALTURA ========================
 * Em 720px de altura sobram cerca de 620px úteis entre cabeçalho e
 * rodapé: tudo precisa caber sem rolagem de página.
 */

@media (max-height: 760px) {
    :root { --gap: 7px; --toque: 50px; }
    .menu a { min-height: 62px; font-size: .55rem; }
    .menu a .icone { width: 21px; height: 21px; }
    .tecla { min-height: 60px; }
    .grade.grupos { max-height: 140px; }
    .tecla-num { min-height: 54px; font-size: 1.25rem; }
    .itens td { padding: 7px 10px; }
}

@media (max-height: 680px) {
    :root { --h-cabecalho: 58px; --gap: 6px; --toque: 46px; }
    .cabecalho .logo img { height: 34px; }
    .cabecalho .selo { padding: 5px 24px; font-size: .78rem; }
    .menu a { min-height: 54px; }
    .tecla { min-height: 54px; font-size: .62rem; }
    .grade.grupos { max-height: 124px; }
    .mensagem { font-size: .72rem; }
}

@media (min-height: 900px) {
    :root { --toque: 56px; }
    .tecla { min-height: 78px; font-size: .7rem; }
    .grade.grupos { max-height: 230px; }
}

/* ===================== PREFERÊNCIA DE MOVIMENTO ==================== */

@media (prefers-reduced-motion: reduce) {
    .toast, .toast.saindo, .modal { animation: none; }
    .btn:active, .tecla:active, .tecla-num:active { transform: none; }
}

/* Página principal em telas menores */
@media (max-width: 1279px) {
    .blocos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .blocos { grid-template-columns: 1fr; }
    /* Em coluna única não há altura para repartir: cada bloco fica do
       tamanho do que tem, e a página rola. */
    .coluna-blocos { grid-template-rows: auto auto; }
    .situacao { grid-template-columns: 64px 1fr; }
    .situacao form { grid-column: 1 / -1; }
    .form-sangria { grid-template-columns: 1fr; }
}

/* ====================== RECEBIMENTO DO BALCÃO ====================== */

/* Painel da direita: o recebimento fica ao lado do pedido, não no lugar
   dele — o operador confere o que cobra enquanto lança o pagamento. */
.tela-receber {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
    gap: 8px;
}

/* Cartão superior: voltar, totais do pedido e desconto. */
.cartao-resumo {
    flex: 0 0 auto;
    display: grid;
    /* Meia tela: o desconto precisa de mais espaço que os demais, porque
       carrega percentual e valor na mesma linha. */
    grid-template-columns: 90px 1.2fr 1fr 92px;
    gap: 6px;
    align-items: stretch;
}

/* Conta de mesa: entram a taxa e o botao dela, seis colunas na mesma
   largura. Tudo encolhe junto — fonte, recuo e botoes —, e o `minmax(0,
   ...)` impede que uma coluna cresca alem da fatia e empurre a vizinha
   para fora, que foi o que cortou "VLR. PRODUTOS" na primeira tentativa. */
/* Seis colunas numa linha só, para o delivery: VOLTAR, os valores, o
   acréscimo, a entrega, o desconto e o botão. Sem isto os dois últimos
   blocos caem para uma segunda linha e comem a área dos itens.
 *
 * O desconto é o penúltimo e não cabe num tamanho de botão: ele carrega
 * percentual e valor na mesma linha. */
.cartao-resumo.compacto {
    /* Cada caixa tem como mínimo o que ela precisa escrever, e a folga se
       reparte entre todas.
     *
     * O desconto é o maior porque carrega duas informações — "50,00% –
     * R$ 10,50" —, e acréscimo e entrega são iguais entre si porque o
     * mínimo é o mesmo nas duas: medir pelo conteúdo as deixava desiguais,
     * já que "ACRÉSCIMO (+)" é mais longo que "ENTREGA (+)".
     *
     * Mínimo em `rem` e não em fração: fração sozinha cortava ora o "(+)" do
     * acréscimo, ora o "5" do desconto, dependendo do valor na tela. */
    grid-template-columns:
        76px
        minmax(max-content, 1.4fr)
        minmax(5.6rem, 1fr)
        minmax(5.6rem, 1fr)
        minmax(8.2rem, 1.2fr)
        74px;
    gap: 5px;
}

.cartao-resumo.com-taxa {
    grid-template-columns:
        76px minmax(0, 1.3fr) minmax(0, .95fr) minmax(0, 1.2fr) 74px 74px;
    gap: 5px;
}

.cartao-resumo.compacto .caixa-valores > div,
.cartao-resumo.compacto .caixa-desconto,
.cartao-resumo.com-taxa .caixa-valores > div,
.cartao-resumo.com-taxa .caixa-desconto { padding: 3px 6px 6px; gap: 3px; }

.cartao-resumo.compacto .caixa-valores > div:first-child:not(:last-child),
.cartao-resumo.com-taxa .caixa-valores > div:first-child:not(:last-child) { flex: 0 0 52px; }

.cartao-resumo.compacto .titulo,
.cartao-resumo.com-taxa .titulo { font-size: .54rem; letter-spacing: 0; }
.cartao-resumo.compacto .campo,
.cartao-resumo.compacto .caixa-desconto .perc,
.cartao-resumo.com-taxa .campo,
.cartao-resumo.com-taxa .caixa-desconto .perc { font-size: .92rem; }
.cartao-resumo.compacto .bloco-acao,
.cartao-resumo.com-taxa .bloco-acao { font-size: .52rem; }

/* Botão com ícone em cima e texto embaixo. */
.bloco-acao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 62px;
    text-align: center;
    line-height: 1.35;   /* "ADD DESCONTO" quebra em duas, como as formas */
    font-size: .58rem;
    padding: 4px;
    text-decoration: none;
}

.bloco-acao .icone {
    width: 18px; height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.caixa-valores, .caixa-desconto {
    display: flex;
    min-width: 0;
    background: var(--verde-caixa);
    border: 1px solid var(--verde-caixa-borda);
    border-radius: var(--raio);
    overflow: hidden;
}

/* O rótulo encostava no número. Um respiro entre os dois, e o padding
   menor em cima que embaixo, levantam o título sem soltá-lo do valor que
   ele nomeia. */
.caixa-valores > div, .caixa-desconto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 3px 8px 7px;
}

/* Divisória discreta: no PDV atual ela quase não se vê contra o fundo, e
   uma linha forte partiria a caixa em dois cartões. */
.caixa-valores > div + div { border-left: 1px solid rgba(5, 61, 56, .1); }
.caixa-desconto { flex-direction: column; }

/* Sem reticências: "VLR. PRODUT..." não diz nada ao operador. O título é
   pequeno o bastante para caber inteiro.
   Alinhado à direita, na mesma borda do valor que ele nomeia — o par fica
   lido como um bloco só. A quantidade é a exceção, logo abaixo. */
.caixa-valores .titulo, .caixa-desconto .titulo {
    font-size: .62rem;
    font-weight: 800;
    color: var(--verde-caixa-rotulo);
    letter-spacing: .2px;
    white-space: nowrap;
    text-align: right;
}

/* nowrap: sem isto o "R$" fica numa linha e o número na outra. */
.caixa-valores .campo, .caixa-desconto .campo {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--verde-escuro);
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

/* O percentual tem o mesmo peso do valor: os dois são a informação. */
.caixa-desconto .perc { font-size: 1.15rem; font-weight: 800; }

/* A quantidade é um número de dois ou três dígitos: o que ela precisa é
   caber o rótulo. O espaço que sobra vai para o valor dos produtos, que é
   o campo que cresce. Os dois alinhados à direita, para os números ficarem
   na mesma coluna de leitura. */
/* A quantidade é um número curto e sem unidade: encostada numa borda ela
   fica solta na célula estreita. Rótulo e número no centro. */
/* `:not(:last-child)`: a regra e da celula da quantidade, que divide a
   caixa com o valor. Numa caixa de uma celula so — a da taxa — ela
   prendia o conteudo em 84px centralizados, longe da borda direita onde
   estao todos os outros numeros. */
.caixa-valores > div:first-child:not(:last-child) { flex: 0 0 84px; }
.caixa-valores > div:first-child:not(:last-child) .titulo { text-align: center; }
.caixa-valores > div:first-child:not(:last-child) .campo { justify-content: center; }

/* Faixa que separa as seções, como as linhas do PDV atual. */
.faixa-secao {
    flex: 0 0 auto;
    padding: 4px 8px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--verde-escuro);
    border-bottom: 1px solid var(--cinza-linha);
}

.faixa-secao.clara { border-bottom: none; padding-bottom: 2px; }

/* Botões grandes por tipo de recebimento. */
.grupos-recebimento {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.grupos-recebimento form { display: contents; }

/* Quadrados, não faixas: esticar os seis para preencher a linha deixava o
   ícone perdido no meio de um botão largo. Largura fixa, como no PDV atual. */
.btn-grupo {
    flex: 0 0 86px;
    min-width: 0;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 2px;
    background: var(--ciano);
    color: var(--branco);
    border: none;
    border-radius: var(--raio);
    font-size: .62rem;
    font-weight: 700;
    /* "CARTÕES / TEF OFF" quebra em duas linhas: coladas, viram um borrão
       a um metro do monitor, que é a distância de quem está no caixa. */
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
}

.btn-grupo .icone {
    width: 26px; height: 26px;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.btn-grupo:active { transform: scale(.98); }
.btn-grupo:disabled { opacity: .45; pointer-events: none; }

/* Conta paga: os botões saem de cena para não lançar a mais por engano. */
.grupos-recebimento.desabilitado .btn-grupo { opacity: .45; pointer-events: none; }

/* Lançamentos à esquerda, mensagem e CPF à direita. A área toma o espaço
   que sobra para os totais ficarem colados no pé do painel, onde o
   operador os procura. */
.area-lancamentos {
    flex: 1 1 auto;
    min-height: 120px;
    display: grid;
    grid-template-columns: 1fr 252px;
    gap: 8px;
}

.lista-lancamentos {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    overflow: hidden;
}

.lista-lancamentos .lixeira { width: 40px; }

/* Só o desenho da lixeira, sem a moldura rosa do `.btn-icone`: na lista de
   lançamentos ela vira um carimbo colorido em cada linha. */
.lista-lancamentos .btn-icone {
    min-width: 0;
    min-height: 0;
    padding: 4px;
    background: none;
}

.lista-lancamentos .btn-icone:hover .icone { background-color: var(--erro); }

.lista-lancamentos .btn-icone .icone {
    width: 16px; height: 16px;
    display: block;
    background-color: var(--verde-escuro);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.area-mensagem {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.area-mensagem .titulo { font-size: .64rem; font-weight: 700; color: var(--verde-escuro); }

/* Altura fixa, como a caixa de recado do PDV atual: esticá-la até o pé do
   painel dava a impressão de campo para digitar um texto longo. */
.area-mensagem .mensagem {
    flex: 0 0 84px;
    background: var(--branco);
    border: 1px solid var(--azul-campo);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: .7rem;
    color: var(--verde-escuro);
    overflow-y: auto;
}

/* ADD DESCONTO, formas de pagamento e CPF/CNPJ são a mesma família de
   ação no recebimento, e no PDV atual têm a mesma cor. */
.btn-ciano {
    background: var(--ciano);
    color: var(--branco);
    border-color: var(--ciano-borda);
}

.btn-ciano:hover { background: var(--ciano-borda); }

.area-mensagem .btn {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 104px;
    min-height: 46px;
    line-height: 1.05;
    font-size: .68rem;
}

/* Totais e finalização. */
.faixa-totais {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 92px;
    gap: 6px;
}

/* O FINALIZAR do caixa sem emissão vai dentro de um formulário, porque
   envia direto em vez de abrir o modal. Sem isto o formulário seria a
   célula da grade e o botão não a preencheria. */
.faixa-totais form { display: contents; }

.caixa-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 64px;
    padding: 6px 12px;
    background: var(--verde-escuro);
    color: var(--branco);
    border-radius: var(--raio);
}

.caixa-total .titulo {
    font-size: .58rem; font-weight: 700; letter-spacing: .2px; opacity: .9;
    white-space: nowrap;
}

/* nowrap pelo mesmo motivo do cartão de resumo. À direita porque é
   dinheiro: as três caixas ficam lado a lado e o operador compara o que
   falta com o que entrou lendo uma coluna de unidades, não três
   começos de linha. O rótulo fica à esquerda, onde se lê primeiro. */
.caixa-total .campo {
    font-size: 1.45rem; font-weight: 800; white-space: nowrap;
    text-align: right; font-variant-numeric: tabular-nums;
}

/* As três caixas contam a mesma história em três cores, e cada cor diz
   uma coisa só: laranja é dinheiro que já entrou, amarelo é o que ainda
   falta, verde é conta paga. O verde é o mesmo do FINALIZAR, para o sinal
   ser um só nos dois lados da tela. */
.caixa-total.recebido { background: var(--laranja); }

.caixa-total.destaque { background: var(--amarelo-falta); color: #14110F; }
.caixa-total.destaque .titulo { opacity: 1; }

/* Quitada — inclusive com troco, que também é conta paga. */
.caixa-total.destaque.quitado { background: var(--verde-receber); color: var(--branco); }
.caixa-total.destaque.quitado .titulo { opacity: .9; }

/* Modal de recebimento: mais alto que o de teclado simples. */
.modal-receb .modal-corpo { gap: 6px; }
.modal-receb .tipo-escolhido {
    background: #17A2B8;
    color: var(--branco);
    text-align: center;
    font-size: .86rem;
    font-weight: 700;
    padding: 6px;
    border-radius: 6px;
}

.modal-receb .campo-modal.select { text-align: center; font-size: .95rem; }
.modal-receb .campo-modal.select.curto { width: 110px; margin: 0 auto; }
/* Recado de campo recusado: entre o campo e o teclado, onde o operador
   está olhando quando o envio não passa. */
.erro-campo {
    margin: 6px 0 0;
    color: var(--erro);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.campo-modal.invalido { border-color: var(--erro); }

.modal-receb .modal-rodape { padding: 0 16px 14px; }
.modal-receb .modal-rodape .btn { width: 100%; }

/* TEF Express: escolher a transação já capturada na maquininha. */
.modal-tef { width: min(520px, 94vw); }

.lista-tef {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--cinza-linha);
    border-radius: 6px;
    background: var(--branco);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.registro-tef {
    display: block;
    border: 1px solid var(--cinza-linha);
    border-radius: 4px;
    padding: 8px 10px;
    background: var(--cinza-fundo);
    cursor: pointer;
}

/* O rádio some: quem mostra a escolha é a linha inteira destacada. */
.registro-tef input { position: absolute; opacity: 0; pointer-events: none; }
.registro-tef:has(input:checked) { background: #D4D1D1; border-color: var(--verde-escuro); }

.registro-tef .linha {
    display: grid;
    grid-template-columns: 72px 1fr 72px 1fr;
    align-items: baseline;
    gap: 4px;
    font-size: .74rem;
}

.registro-tef .rot { color: var(--cinza-texto); }
.registro-tef strong { color: var(--verde-escuro); }

.botoes-tef { display: flex; gap: 8px; align-items: stretch; }
.botoes-tef .espaco { flex: 1; }
.botoes-tef .btn { min-width: 84px; font-size: .64rem; }

/* ---------------------------------------------------------------------
   TEF Mobile: a espera

   O operador fica parado olhando para isto enquanto o cliente passa o
   cartão, então o que importa é a frase grande e um só alvo para o dedo.
   A altura mínima segura o modal no mesmo tamanho dos dois estados — sem
   ela a caixa encolhe na troca e o CANCELAR pula para debaixo do dedo.
   --------------------------------------------------------------------- */
/* Os dois estados do modal são um filho só do corpo, e o `gap` dele não
   alcança o que está dentro: sem repetir a coluna aqui, o teclado cola
   no campo do valor. */
/* ---------------------------------------------------------------------
   Conferência de caixa e movimento do período

   Duas telas de leitura, não de digitação: o operador lê de cima para
   baixo e compara com o que tem na mão. Por isso números grandes,
   alinhados à direita, e uma linha só em destaque — a que ele confere
   contando.
   --------------------------------------------------------------------- */
/* A conferência é a moldura das listas com um corpo que rola, e não uma
   lista paginada: o conteúdo é uma tabela de somas, de altura variável.
   O `overflow` fica no corpo, para o título e o rodapé seguirem presos
   nas pontas como em toda lista. */
.corpo-conferencia {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--branco);
    border-left: 1px solid var(--cinza-linha);
    border-right: 1px solid var(--cinza-linha);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Impedimento explicado antes do botão. Vermelho porque não é dica: é a
   razão de o botão ao lado estar apagado. */
.aviso-da-lista.atencao {
    background: #FDECEA;
    border-color: #F3C8C3;
    color: #8A1C13;
}

.abertura-do-caixa {
    margin: 0;
    font-size: .78rem;
    color: var(--cinza-texto);
}

.tabela-resumo {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.tabela-resumo th {
    text-align: left;
    padding: 6px 8px;
    background: var(--verde-claro);
    color: var(--verde-escuro);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.tabela-resumo td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--cinza-linha);
}

.tabela-resumo td small {
    display: block;
    font-size: .62rem;
    color: var(--cinza-texto);
}

.tabela-resumo .cen { text-align: center; }
.tabela-resumo .dir { text-align: right; }
.tabela-resumo .valor { font-weight: 700; color: var(--verde-escuro); font-variant-numeric: tabular-nums; }
.tabela-resumo .vazio { text-align: center; color: var(--cinza-texto); padding: 18px; }

.tabela-resumo tfoot .total td {
    border-top: 2px solid var(--verde-escuro);
    border-bottom: none;
    font-weight: 800;
    text-transform: uppercase;
    font-size: .72rem;
}

.caixa-conferencia {
    background: var(--cinza-campo);
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    padding: 10px 12px;
}

.linha-conferencia {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: .82rem;
}

.linha-conferencia strong { font-variant-numeric: tabular-nums; color: var(--verde-escuro); }

/* O número que se confere contando. Os outros se conferem no extrato. */
.linha-conferencia.destaque { font-size: .92rem; font-weight: 800; }
.linha-conferencia.destaque strong { font-size: 1.5rem; }

.nota-conferencia {
    margin: 2px 0 10px;
    font-size: .68rem;
    line-height: 1.4;
    color: var(--cinza-texto);
}

.acoes-conferencia { display: flex; justify-content: flex-end; }
.acoes-conferencia .btn { min-width: 150px; }

/* Por que o botão de fechar está apagado, e o que fica aberto atrás de
   quem fecha. O primeiro é impedimento, o segundo é recado — e por isso
   um é vermelho e o outro não. */
.impedimento-fechamento,
.aviso-fechamento {
    margin: 0 0 10px; padding: 9px 12px; border-radius: 8px;
    font-size: .85rem; font-weight: 700; line-height: 1.35;
}
.impedimento-fechamento { background: #FBE9E9; color: var(--erro); border: 1px solid #F0C4C4; }
.aviso-fechamento { background: #FFF3E5; color: #8A4200; border: 1px solid #F5D3AC; }

/* ---------- Modal "Abrir período" ---------- */

.modal-abrir-periodo .escolha-periodo {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 2px;
}
.modal-abrir-periodo .opcao-periodo {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 86px; min-height: 86px; padding: 6px;
    border: 2px solid #D6D6D6; border-radius: 10px;
    background: var(--branco); cursor: pointer;
}
.modal-abrir-periodo .opcao-periodo input { position: absolute; opacity: 0; pointer-events: none; }
.modal-abrir-periodo .opcao-periodo .ordinal {
    font-size: 1.7rem; font-weight: 800; color: var(--verde-escuro); line-height: 1;
}
.modal-abrir-periodo .opcao-periodo .legenda {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--cinza-texto);
}

/* O escolhido tem de se ver de pé, a um metro do monitor: só a borda não
   resolve, então muda o fundo e o texto junto. */
.modal-abrir-periodo .opcao-periodo:has(input:checked) {
    border-color: var(--verde-escuro); background: var(--verde-escuro);
}
.modal-abrir-periodo .opcao-periodo:has(input:checked) .ordinal { color: var(--branco); }
.modal-abrir-periodo .opcao-periodo:has(input:checked) .legenda { color: #BFD8D5; }
.modal-abrir-periodo .opcao-periodo:focus-within { outline: 3px solid var(--laranja); outline-offset: 2px; }

/* O que já passou continua no quadro, apagado.
   Fundo chapado e borda tracejada: quem não enxerga a diferença de cor
   — monitor lavado de cozinha, olho cansado às três da tarde — ainda vê
   pela borda que aquele cartão não é da mesma natureza dos outros. */
.modal-abrir-periodo .opcao-periodo.indisponivel {
    border-style: dashed; border-color: #D6D6D6;
    background: #F0F0F0; cursor: default;
}
.modal-abrir-periodo .opcao-periodo.indisponivel .ordinal { color: #9A9A9A; }
.modal-abrir-periodo .opcao-periodo.indisponivel .legenda { color: #9A9A9A; }

/* Dados do cartão digitados à mão: obrigatórios e à vista.

   Eram um `<details>` fechado, para não pôr duas caixas vazias no
   caminho do dedo. Fechado deixou de servir quando os campos passaram a
   ser exigidos: campo obrigatório escondido não recebe foco, e o
   navegador recusa o envio sem conseguir mostrar onde. */
.dados-do-cartao {
    border-top: 1px solid #E2E2E2;
    margin-top: 6px;
    padding-top: 6px;
}

.dados-do-cartao .titulo-dados-cartao {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--verde-escuro);
    padding: 2px 0;
}

.dados-do-cartao .campo-modal {
    font-size: 1rem;
    letter-spacing: 0;
    min-height: 44px;
    text-align: left;
    padding: 0 10px;
}

.dados-do-cartao .instrucao { text-align: left; font-size: .72rem; }

/* Selos do card de delivery: o que muda o que o operador faz com o
   pedido. Pequenos e ao lado do nome, não faixas — eles acompanham a
   minoria dos cards e não podem roubar a leitura dos outros. */
.selo-teste, .selo-retirada {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .5px;
    vertical-align: middle;
}

.selo-teste { background: var(--amarelo-falta); color: #4A3800; }

/* Ambiente do PDV na lista: é o cadastro que decide se a nota daquele
   caixa vale, e o erro mais caro desta tela. Por isso ele grita. */
.selo-producao, .selo-homologacao, .selo-sem-emissao {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .5px;
}

.selo-producao { background: var(--verde-receber); color: var(--branco); }

/* O código de pareamento aparece uma vez só, na tela de quem pediu.
   Grande porque alguém vai digitá-lo noutro aparelho, lendo daqui. */
.faixa-codigo-pareamento {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 6px 0;
    padding: 10px 14px;
    background: var(--verde-claro);
    border: 1px solid var(--verde-botao-borda);
    border-radius: var(--raio);
    font-size: .78rem;
    color: var(--verde-escuro);
}

.faixa-codigo-pareamento strong {
    font-size: 1.8rem;
    letter-spacing: 6px;
    font-variant-numeric: tabular-nums;
}

.faixa-codigo-pareamento .validade { color: var(--cinza-texto); font-size: .7rem; }

.valor-somente-leitura {
    margin: 0;
    padding: 9px 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--verde-escuro);
}
.selo-homologacao { background: var(--amarelo-falta); color: #4A3800; }

/* Caixa sem solução fiscal: não é alerta nem conquista, é uma escolha de
   cadastro. Cinza, para não disputar atenção com os outros dois. */
.selo-sem-emissao { background: var(--cinza-linha); color: #38474C; }
.selo-retirada { background: var(--verde-claro); color: var(--verde-escuro); }

.mobile-escolha {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-espera {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 232px;
    justify-content: center;
}

/* A roda que gira enquanto a tela pergunta à maquininha. Feita em CSS
   para não depender de arquivo: ela aparece no meio de uma venda, e um
   ícone que não carregou deixaria a espera sem sinal nenhum. */
.girando {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border: 4px solid var(--cinza-linha);
    border-top-color: var(--verde-escuro);
    border-radius: 50%;
    animation: girar .9s linear infinite;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* Quem pediu menos movimento continua vendo que algo acontece, devagar. */
@media (prefers-reduced-motion: reduce) {
    .girando { animation-duration: 3s; }
}

.mobile-aviso {
    margin: 0;
    text-align: center;
    font-size: .92rem;
    font-weight: 700;
    color: var(--verde-escuro);
}

.mobile-detalhe {
    margin: 0;
    text-align: center;
    font-size: .74rem;
    color: var(--cinza-texto);
}

.mobile-recado {
    margin: 0;
    text-align: center;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--verde-escuro);
}

/* O que impediu a cobrança de subir fica em vermelho, acima do teclado. */
.mobile-recado.erro { color: var(--erro); font-weight: 700; }

/* Em telas mais largas sobra espaço: o texto volta a crescer. */
@media (min-width: 1500px) {
    .caixa-valores .campo, .caixa-desconto .campo,
    .caixa-desconto .perc { font-size: 1.32rem; }
    .caixa-total .campo { font-size: 1.65rem; }
    .btn-grupo { min-height: 72px; font-size: .62rem; }
    .btn-grupo .icone { width: 24px; height: 24px; }
}

/* Abaixo de 1280 o percentual do desconto encolhe antes do valor: é o que
   dá para sacrificar sem perder leitura. */
@media (max-width: 1280px) {
    .area-lancamentos { grid-template-columns: 1fr 150px; }
    .caixa-valores .campo, .caixa-desconto .campo { font-size: 1rem; }
    .caixa-desconto .perc { font-size: .88rem; }
    .caixa-total .campo { font-size: 1.22rem; }
}

/* ========================= FILA DE PENDENTES =======================
 *
 * A estrutura — faixa de título, cabeçalho fixo, corpo que rola e rodapé com
 * contadores e paginação — nasceu aqui e serve a qualquer lista longa. As
 * regras de estrutura valem também para `.tela-lista`, que é como os
 * cadastros a reaproveitam; só as larguras de coluna ficam por tela.
 */

.tela-fiscal,
.tela-lista {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 10px 12px 12px;
    gap: 0;
}

/* Faixa de título clara, com o botão de recarregar à direita. */
.titulo-lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #DDE5E1;
    color: var(--verde-escuro);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 6px 8px 6px 14px;
    border: 1px solid var(--cinza-linha);
    border-bottom: none;
    border-radius: var(--raio) var(--raio) 0 0;
}

.btn-atualizar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #24312C;
    color: var(--branco);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .4px;
    /* Mesma altura do `btn-barra-lista`, que agora fica ao lado dele na
       barra do fiscal: com 26 contra 30 os dois pareciam desencontrados.
       A altura passa a vir do `min-height`, como no outro. */
    min-height: 30px;
    padding: 0 14px;
    border-radius: 5px;
    text-decoration: none;
}

.btn-atualizar .icone {
    width: 14px; height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.btn-atualizar:active { transform: scale(.98); }

.tela-fiscal .itens-cabecalho th,
.tela-lista .itens-cabecalho th { color: #24312C; }

/* Larguras fixas, medidas e não estimadas.
 *
 * A tabela é `table-layout: fixed` com `width: 100%`: as larguras são
 * proporções, e o que não couber é cortado com reticências — ou quebra
 * em duas linhas, se for o cabeçalho.
 *
 * Medido no Chrome com a fonte da casa, **o cabeçalho e o conteúdo de
 * cada coluna**, e a largura é a maior das duas. Essa segunda parte
 * custou uma volta: encolhi `nr` para 64 olhando só os seis dígitos do
 * número, e "Nr. NFC-e" — que precisa de 74 — quebrou em duas linhas.
 *
 *   coluna     cabeçalho  conteúdo  aqui
 *   nr                74        58    76
 *   pedido            79        58    80
 *   modulo            62        32    64
 *   valor             49        84    86
 *   datahora          76       132   136
 *   chave             93       313   320
 *   estado            56        98   120   (o conteúdo tem o ícone junto)
 *   acoes             56        16    98   (dois botões, não texto)
 *
 * O total continua 980: mexer nele mudaria a proporção de todas as
 * outras colunas junto. */
.tela-fiscal .nr { width: 76px; }
.tela-fiscal .pedido { width: 80px; }
.tela-fiscal .modulo { width: 64px; }
.tela-fiscal .valor { width: 86px; text-align: center; }
.tela-fiscal .datahora { width: 136px; font-variant-numeric: tabular-nums; }
.tela-fiscal .chave { width: 320px; font-variant-numeric: tabular-nums; }
.tela-fiscal .estado { width: 120px; }
.tela-fiscal .acoes { width: 98px; }

/* ===================== PEDIDOS DO PERÍODO ===================== */

/* A lista do `+ detalhes` da tela principal. Herda da fiscal tudo o que
   é moldura — título, cabeçalho, rodapé, botões de ação — e fica só com
   as larguras, que são as suas.

   Medidas no Chrome com a fonte da casa, o cabeçalho E o conteúdo de
   cada coluna; a largura é a maior das duas. Duas delas eu tinha posto
   curtas no olho: `estado` precisa de 107 por causa de "TRANSFERIDO", e
   `acoes` de 80 — dois botões de 30 com 4 de respiro, mais o recuo da
   célula —, não dos 56 do cabeçalho "Ações".

     coluna      cabeçalho  conteúdo  aqui
     atend              76        40    76
     pedido             79        50    80
     modulo             62        48    64
     pessoas            68        30    68
     valor              49        91    92
     estado             56       107   108
     datahora           88       114   120   (duas colunas iguais)
     operador           74       222   168   (a única que corta)
     acoes              56        80    84   (dois botões, não texto)

   O total fecha em 980, a faixa útil da lista. `operador` é a coluna
   que absorve o resto e corta com reticências: nome comprido cabe
   menos, e é o único dado aqui que se reconhece pelo começo. */
.tela-pedidos .atend { width: 76px; }
.tela-pedidos .pedido { width: 80px; }
.tela-pedidos .modulo { width: 64px; }
.tela-pedidos .pessoas { width: 68px; }
.tela-pedidos .valor { width: 92px; font-variant-numeric: tabular-nums; }
.tela-pedidos .estado { width: 108px; }
.tela-pedidos .datahora { width: 120px; font-variant-numeric: tabular-nums; }
.tela-pedidos .operador { width: 168px; }
.tela-pedidos .acoes { width: 84px; }

.tela-pedidos .itens td { font-weight: 700; padding: 4px 8px; }
.tela-pedidos .itens .pedido,
.tela-pedidos .itens .atend { color: var(--azul-item); }
.tela-pedidos .itens .operador { font-weight: 600; color: var(--cinza-texto); }
.tela-pedidos .itens .estado { white-space: nowrap; }
/* Aberto é o que exige atenção: no fim do turno é ele que impede o caixa
   de fechar, e é o que o olho tem de achar varrendo a coluna. */
.tela-pedidos .itens .estado.problema { color: var(--erro); }

.tela-pedidos .itens .conteudo-celula {
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.tela-pedidos .acoes form { display: contents; }

/* Linhas finas, como na lista do PDV atual: cabe mais nota na tela. */
.tela-fiscal .itens td { font-weight: 700; padding: 4px 8px; }
.tela-fiscal .itens .nr,
.tela-fiscal .itens .pedido { color: var(--azul-item); }
.tela-fiscal .itens .chave { font-weight: 600; letter-spacing: -.2px; color: var(--azul-item); }
.tela-fiscal .sem-acao { color: var(--cinza-texto); font-weight: 400; }

/* Conteúdo lado a lado vai num `div`: `display: flex` no `td` tira a célula
   da tabela e o corpo deixa de acompanhar o cabeçalho. */
.tela-fiscal .itens .conteudo-celula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Situação: rótulo curto e, ao lado, o ícone que abre o texto inteiro. */
.tela-fiscal .itens .estado { white-space: nowrap; }

.tela-fiscal .itens .estado.problema .rotulo-estado { color: var(--erro); }

.btn-detalhe {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.btn-detalhe .icone {
    width: 14px; height: 14px;
    background-color: var(--cinza-texto);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.tela-fiscal .itens .estado.problema .btn-detalhe .icone { background-color: var(--erro); }
.btn-detalhe:hover .icone { background-color: var(--verde-escuro); }

/* Ações: só ícone, com a descrição no `title`. */
.tela-fiscal .itens .acoes .conteudo-celula { gap: 4px; }
.tela-fiscal .acoes form { display: contents; }

.btn-acao-fiscal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    background: var(--verde-botao);
    border: 1px solid var(--verde-botao-borda);
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.btn-acao-fiscal .icone {
    width: 15px; height: 15px;
    background-color: var(--verde-escuro);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

/* Botão já acionado: continua visível, mas não aceita um segundo toque. */
.ocupado,
.ocupado:hover { opacity: .45; cursor: progress; transform: none; pointer-events: none; }

.btn-acao-fiscal:hover { background: var(--verde-menu-ativo); }
.btn-acao-fiscal:hover .icone { background-color: var(--branco); }
.btn-acao-fiscal:active { transform: scale(.95); }

/* Reenviar é a ação que muda o mundo lá fora: destaque e cor de aviso. */
.btn-acao-fiscal.reenviar { background: var(--laranja); border-color: var(--laranja-escuro); }
.btn-acao-fiscal.reenviar .icone { background-color: var(--branco); }
.btn-acao-fiscal.reenviar:hover { background: var(--laranja-escuro); }

/* Texto que existe para o leitor de tela, mas não ocupa espaço. */
.oculto {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.modal-detalhe .texto-detalhe {
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-linha);
    border-radius: 6px;
    padding: 12px;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--verde-escuro);
}

/* Rodapé: contadores à esquerda, paginação à direita — como no PDV atual. */
.rodape-lista {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--branco);
    border: 1px solid var(--cinza-linha);
    border-top: none;
    border-radius: 0 0 var(--raio) var(--raio);
    /* Mais folga em cima: o número é grande e encostava na linha que separa
       o rodapé da lista, dando a impressão de que tinha sido cortado. */
    padding: 13px 14px 9px;
}

.rodape-lista .contadores { display: flex; }

.rodape-lista .contadores > div {
    padding: 0 18px;
    border-left: 1px solid var(--cinza-linha);
}

/* A primeira encosta na borda; a última fecha o bloco com uma linha, como
   no PDV atual — sem ela os números parecem escorrer para o vazio. */
.rodape-lista .contadores > div:first-child { border-left: none; padding-left: 0; }
.rodape-lista .contadores > div:last-child { border-right: 1px solid var(--cinza-linha); }

.rodape-lista .contadores strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--verde-escuro);
    line-height: 1.1;
}

.rodape-lista .contadores span { font-size: .64rem; color: var(--cinza-texto); }
.rodape-lista .contadores .atencao strong,
.rodape-lista .contadores .atencao span { color: var(--erro); }

.rodape-lista .paginacao { display: flex; align-items: center; gap: 8px; }
.rodape-lista .pagina { font-size: .7rem; color: var(--cinza-texto); margin-right: 4px; }
.rodape-lista .paginacao .btn { text-decoration: none; }

.btn.pequeno {
    min-height: 32px;
    padding: 0 12px;
    font-size: .7rem;
    gap: 4px;
}

/* A cor diz o estado de longe: verde resolvido, vermelho exige ação. */
.selo-dfe {
    display: inline-block;
    min-width: 92px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--branco);
    background: var(--cinza-texto);
}

.selo-dfe.autorizada { background: #1C7A34; }
.selo-dfe.pendente { background: #B26A00; }
.selo-dfe.rejeitada { background: #D93025; }
.selo-dfe.cancelada { background: #5A5A5A; }
/* ========================= MAPA DE MESAS =========================
 * As cores dizem o estado de longe, que é como o operador lê o salão da
 * frente do caixa:
 *
 *   verde       livre            azul claro  ocupada e sem consumir há 30min
 *   azul        ocupada          vermelho    fechada (pré-conta ou recebendo)
 *
 * O amarelo fica reservado para "reservada", que o PDV atual nunca chegou
 * a implementar. A cor não anda sozinha: cada cartão traz também o rótulo
 * escrito, porque daltonismo é comum e azul e verde são próximos demais
 * sob a luz de um salão.
 * ================================================================= */

.tela-mapa {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.titulo-mapa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #DDE5E1;
    color: var(--verde-escuro);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 6px 8px 6px 14px;
    border: 1px solid var(--cinza-linha);
    border-bottom: none;
    border-radius: var(--raio) var(--raio) 0 0;
}

/* Legenda do mapa: a cor, e então o que ela quer dizer.

   Minúscula no meio de um cabeçalho em caixa alta de propósito — ela é
   referência, não título, e quem já sabe o que o amarelo significa não
   precisa tropeçar nela toda vez que abre o salão. */
.legenda-mapa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--verde-escuro);
}

.legenda-mapa .amostra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
}

.legenda-mapa .amostra.outro { background: var(--mesa-outro); color: #1A1A1A; }

/* Duas linhas curtas em vez de uma longa: a legenda deixa de empurrar o
   cabeçalho e os contadores ficam onde o olho já os procura. */
.legenda-mapa .texto { line-height: 1.15; }

.resumo-mesas { display: flex; gap: 8px; margin-left: auto; margin-right: 4px; }

.resumo-mesas .chip {
    font-size: .62rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--branco);
    text-transform: none;
    letter-spacing: 0;
}

.resumo-mesas .livre { background: var(--sucesso); }
.resumo-mesas .ocupada { background: var(--mesa-ocupada); }
.resumo-mesas .fechada { background: var(--erro); }

/* O chip e um botao de filtro, nao so um numero: a mao precisa ver isso
   antes de tocar, e o filtro ligado precisa se anunciar — senao o
   operador olha um mapa com tres mesas e acha que o salao esvaziou. */
.resumo-mesas .chip { text-decoration: none; cursor: pointer; }
.resumo-mesas .chip:active { transform: scale(.96); }

.resumo-mesas .chip.ligado {
    box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px currentColor;
    outline: none;
}

.resumo-mesas .chip.ligado::after {
    content: " ✕";
    font-weight: 800;
    opacity: .85;
}

/* As ações numa coluna fixa: não disputam espaço com as mesas e ficam no
   mesmo lugar por mais que a grade cresça. */
.area-mapa {
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 0;
    background: var(--branco);
    border: 1px solid var(--cinza-linha);
    border-radius: 0 0 var(--raio) var(--raio);
    padding: 10px;
}

.acoes-mapa {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    width: 86px;
}

.acoes-mapa .bloco-acao { min-height: 68px; }

.grade-mesas {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 84px);
    gap: 8px;
    align-content: start;
}

/* Célula pequena: cabem mais mesas sem rolar, e o salão inteiro é lido de
   uma vez. O piso de 86x68 não é estético — abaixo disso o cartão deixa de
   ser um alvo de dedo confiável numa tela de toque. */
.cartao-mesa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 68px;
    border-radius: var(--raio);
    border: 2px solid transparent;
    color: var(--branco);
    text-decoration: none;
    cursor: pointer;
    padding: 6px 4px;
}

.cartao-mesa .numero { font-size: 1.5rem; font-weight: 800; line-height: 1.05; }

.cartao-mesa .estado {
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.cartao-mesa .detalhe {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    font-size: .56rem;
    font-weight: 700;
}

/* Ícone no lugar da abreviação: "4p · 10h" obriga a decifrar duas
   convenções; dois desenhos de 9px não obrigam a nenhuma. */
.cartao-mesa .ico-mini {
    width: 11px; height: 11px;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.cartao-mesa .ico-mini + .ico-mini,
.cartao-mesa .detalhe .ico-mini:not(:first-child) { margin-left: 4px; }

.cartao-mesa.livre { background: var(--sucesso); }
.cartao-mesa.ocupada { background: var(--mesa-ocupada); }
.cartao-mesa.parada { background: var(--mesa-parada); color: var(--verde-escuro); }
.cartao-mesa.fechada { background: var(--erro); }

/* Mesa na mão de outro aparelho: o mesmo amarelo do mapa do app do
   garçom, de propósito — é o mesmo fato, e quem trabalha no salão vê as
   duas telas. Texto escuro porque amarelo não sustenta texto branco. */
.cartao-mesa.outro { background: var(--mesa-outro); color: #1A1A1A; }

/* Na mesa presa o cadeado ocupa o lugar do rótulo. "EM OUTRO APARELHO"
   ocupava duas linhas num cartão de 84px e deixava este mais alto que os
   vizinhos, desalinhando a grade que faz o salão ser lido de uma vez.

   A altura é a mesma da linha de texto que ele substitui, senão o cartão
   amarelo continuaria fora de esquadro com os outros — só que por um
   pixel, que é pior do que por dez. */
.cartao-mesa .estado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 12px;
}

/* Sem prefixo de cartão: o mesmo cadeado aparece na legenda do topo, e
   dois desenhos diferentes para a mesma coisa seriam duas coisas. */
.ico-trava {
    width: 12px; height: 12px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.cartao-mesa:active { transform: scale(.98); }

.mapa-vazio {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: var(--cinza-texto);
    font-size: .9rem;
    line-height: 1.6;
}

/* ===================== TELA DA MESA ===================== */

/* A faixa laranja do painel da conta, na versao da mesa: mesma barra do
   balcao, outra identificacao.

   Quatro blocos numa coluna de 460px e apertado. Os tres que identificam
   a conta nao encolhem; quem cede e o estado, que e o unico cuja falta o
   operador supre olhando o mapa. */
.faixa-da-mesa { gap: 14px; align-items: center; padding: 5px 12px; }
.faixa-da-mesa .divisor { margin: 0; opacity: .5; font-weight: 400; }

/* `.par` e nao `.bloco`: esse nome ja e a caixa da pagina principal, e
   herdar fundo e borda dela quebrava a faixa. */
.faixa-da-mesa .par { display: flex; align-items: baseline; flex: 0 0 auto; white-space: nowrap; }
.faixa-da-mesa .rotulo { font-size: .66rem; }
.faixa-da-mesa .valor { font-size: 1.25rem; margin-left: 6px; }

/* Botao ou rotulo, a caixa e a mesma: a faixa nao muda de forma entre
   uma tela e outra so porque numa delas da para tocar. */
.faixa-da-mesa .selo-pessoas {
    margin-left: auto;
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 5px 14px;
    border-radius: var(--raio);
    background: var(--verde-caixa);
    border: 1px solid var(--verde-caixa-borda);
    color: var(--verde-escuro);
    font-size: .68rem; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase;
    white-space: nowrap;
}

/* Mesa em recebimento: o aviso ocupa o lugar do lançamento, porque não há
   o que lançar enquanto houver dinheiro na conta. */
.aviso-mesa {
    margin: 10px;
    padding: 14px;
    background: #FBEAEA;
    border: 1px solid var(--erro);
    border-radius: var(--raio);
    color: var(--erro);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Seis acoes numa fila so, no pe do painel da conta. O estilo claro do
   PDV atual: o alvo e grande e o rotulo se le, sem que seis blocos de cor
   forte disputem a atencao com os numeros logo acima. */
/* A barra da mesa nao reusa `.acoes-pedido`: aquela e a do balcao, com
   tres colunas e botoes grandes, e `.acoes-pedido .btn` tem dois niveis
   de especificidade — vencia tudo que esta regra tentava dizer sobre
   tamanho de fonte e altura.

   `minmax(0, 1fr)` e nao `1fr`: o `1fr` so vale como minimo, e a coluna
   de "PRE-CONTA" crescia alem da fatia para caber o texto, deixando as
   seis de larguras diferentes. */
.acoes-da-mesa {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    padding: var(--gap);
    background: var(--cinza-fundo);
}

.acoes-da-mesa form { display: contents; }

/* Fonte menor e sem quebra: com "PRE-CONTA" partindo em duas linhas um
   botao da fila ficava mais alto que os outros cinco. */
.btn-barra {
    flex-direction: column;
    gap: 4px;
    height: 58px;
    padding: 6px 2px;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-linha);
    color: var(--verde-escuro);
    text-decoration: none;
}

.btn-barra .icone {
    width: 20px; height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.btn-barra:active { background: var(--verde-caixa); }

/* Só as duas que mudam dinheiro ou apagam item saem do cinza. */
.btn-barra.perigo { background: var(--erro); border-color: var(--erro); color: var(--branco); }
.btn-barra.receber { background: var(--verde-menu-ativo); border-color: var(--verde-menu-ativo); color: var(--branco); }
.btn-barra:disabled, .btn-barra.desabilitado { opacity: .45; pointer-events: none; }

/* A taxa excluída aparece escrita, não como um zero que passa batido. */
.totais .valor.excluida { color: var(--erro); font-size: .78rem; font-weight: 800; }

/* ===================== MODAIS DA MESA ===================== */

.stepper { display: flex; align-items: center; gap: 10px; }
.stepper .btn { width: 62px; min-height: 58px; font-size: 1.6rem; font-weight: 800; }
.stepper .campo-modal { flex: 1; }

.bloco-autorizacao {
    margin-top: 14px;
    padding: 12px;
    background: #FBEAEA;
    border: 1px solid var(--erro);
    border-radius: var(--raio);
}

.aviso-autorizacao {
    margin: 0 0 10px;
    color: var(--erro);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.4;
}

/* O mesmo bloco serve à liberação de sessão na tela de login. Lá ele não
   explica nada — a explicação está no "?" da faixa de erro — e traz só o
   título e os dois campos. */
.cartao-acesso .bloco-autorizacao { margin-top: 0; padding: 10px 12px 12px; }
.cartao-acesso .bloco-autorizacao input { margin-bottom: 8px; }
.cartao-acesso .bloco-autorizacao input:last-of-type { margin-bottom: 0; }

.titulo-bloco {
    margin: 0 0 8px;
    font-size: .74rem; font-weight: 800; letter-spacing: .6px;
    color: var(--erro); text-align: center;
}

/* ==================== AVISO DE INATIVIDADE ====================

   Cobre a tela inteira de propósito: o operador precisa ver isto mesmo que
   esteja olhando para um modal aberto. Fica acima de tudo, inclusive dos
   modais, porque é o único aviso que tem prazo. */
.aviso-inatividade {
    /* Acima dos modais (900) e dos toasts (1000): é o único aviso com prazo,
       e tem de ser visto mesmo com um modal de cancelamento aberto na
       frente. */
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5, 61, 56, .72);
}

.caixa-inatividade {
    background: var(--branco);
    border-radius: 20px;
    border-top: 6px solid var(--erro);
    padding: 28px 32px;
    width: min(380px, 92vw);
    text-align: center;
    display: flex; flex-direction: column; gap: 14px;
}

.caixa-inatividade h2 { font-size: 1.05rem; color: var(--verde-escuro); }

/* O número grande é o que o operador lê de longe, atravessando o salão. */
.caixa-inatividade .contagem {
    margin: 0;
    font-size: 2.6rem; font-weight: 800; line-height: 1;
    color: var(--erro);
}

.caixa-inatividade .explicacao {
    margin: 0;
    font-size: .8rem; line-height: 1.45; color: var(--cinza-texto);
}

.caixa-inatividade .btn { color: var(--branco); }

.modal-transferir { width: min(560px, 94vw); }

.escolha-transferencia { display: flex; gap: 10px; margin: 14px 0 6px; }

.escolha-transferencia .opcao {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    font-size: .8rem; font-weight: 700;
    color: var(--verde-escuro);
    cursor: pointer;
}

.escolha-transferencia .opcao:has(input:checked) {
    background: var(--verde-caixa);
    border-color: var(--verde-caixa-borda);
}

.itens-transferencia {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    margin-top: 8px;
}

.item-transferivel {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--cinza-linha);
    font-size: .8rem;
    cursor: pointer;
}

.item-transferivel:last-child { border-bottom: none; }
.item-transferivel:has(input:checked) { background: var(--verde-caixa); }
.item-transferivel .numero { min-width: 26px; font-weight: 800; color: var(--azul-item); }
.item-transferivel .descricao { flex: 1; }
.item-transferivel .valor { font-weight: 800; color: var(--azul-item); }

/* Os dois teclados da transferência, lado a lado como no PDV atual.
   O `.lado` define o proprio ritmo: sem isso o rotulo, o visor e as
   teclas se encostam de um jeito em cada navegador. */
.par-teclados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.par-teclados .lado {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.par-teclados .lado .instrucao { text-align: left; font-size: .82rem; }
.par-teclados .lado .campo-modal { min-height: 52px; font-size: 1.4rem; }
.par-teclados .teclado { gap: 6px; }
.par-teclados .tecla-num { min-height: 52px; font-size: 1.2rem; }
.par-teclados .tecla-num.acao { font-size: .8rem; }

/* Detalhes dos lancamentos: a trilha da conta, cancelados inclusive.
   As quatro colunas repetem as da lista da esquerda, para o olho nao ter
   de reaprender onde esta o que. */
.modal-detalhes { width: min(600px, 95vw); }
.corpo-detalhes { gap: 8px; }

.abertura-conta { font-size: .76rem; color: var(--verde-escuro); }

.cabecalho-detalhes,
.detalhe-item .cabeca {
    display: grid;
    grid-template-columns: 38px 52px 1fr 86px;
    gap: 6px;
    align-items: baseline;
}

.cabecalho-detalhes {
    background: #93A39B;
    color: var(--branco);
    font-size: .72rem; font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--raio) var(--raio) 0 0;
}

.cabecalho-detalhes .valor,
.detalhe-item .cabeca .valor { text-align: right; }

/* Altura fixa, nao `max-height`: com tres itens ou com trinta o modal
   tem o mesmo tamanho, e o botao FECHAR fica sempre no mesmo lugar do
   dedo. `overscroll-behavior` impede que o fim da lista role a pagina
   atras do modal. */
.lista-detalhes {
    height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--cinza-linha);
    border-top: none;
}

.detalhe-item { padding: 7px 10px; border-bottom: 1px solid var(--cinza-linha); }
.detalhe-item:last-child { border-bottom: none; }
.detalhe-item:nth-child(even) { background: var(--cinza-fundo); }

.detalhe-item .cabeca { font-size: .8rem; font-weight: 800; color: var(--verde-escuro); }

/* O que saiu da conta — cancelado ou transferido — sai riscado, e so:
   apagar a linha esconderia justamente o que o cliente veio perguntar
   no caixa. */
.detalhe-item.saiu .cabeca { text-decoration: line-through; opacity: .7; }

/* Numa linha so: "CANCELADO por: Fulano as 11:45hs" quebrando ao meio
   fazia a linha de baixo comecar com um horario solto, que nao se liga
   a nada. Fonte menor e o preco de a trilha caber inteira.

   Medida: a mais longa — lancado + transferido + mesa de destino — dava
   506px numa faixa util de 506px. Em .54rem cai para 471px e o recuo
   menor abre a faixa para 516px, o que sobra para um nome de operador
   mais comprido. Alem disso ela corta com reticencias, que ao menos nao
   quebra a leitura em duas linhas. */
.detalhe-item .trilha {
    margin-top: 2px;
    padding-left: 34px;
    font-size: .54rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cinza-texto);
}

.detalhe-item .trilha strong { color: var(--verde-escuro); }

.detalhe-item .observacao {
    margin: 3px 0 0 44px;
    padding-left: 10px;
    border-left: 3px solid var(--verde-caixa-borda);
    font-size: .72rem; font-style: italic; color: var(--verde-escuro);
}

.vazio-detalhes { padding: 24px; text-align: center; color: var(--cinza-texto); font-size: .85rem; }

/* ---------- Detalhes do pedido, da lista do período ----------
   Duas colunas, como no PDV atual: à esquerda o que o cliente consumiu,
   à direita quem mexeu na conta. Quem pergunta "por que deu isso?" lê a
   esquerda; quem pergunta "quem fez isso?" lê a direita. */
.modal-pedido { width: min(880px, 96vw); }

.detalhes-pedido { display: grid; grid-template-columns: 55fr 45fr; gap: 12px; }
.detalhes-pedido > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* A faixa dentro do modal não estica até as bordas como a do bloco: aqui
   ela é o título de uma coluna, e não de uma seção da tela. */
.detalhes-pedido .faixa-secao { margin: 0; }

.detalhes-pedido .lista-detalhes { height: 260px; }

/* Rótulo à esquerda, valor à direita, como em todo lugar onde a casa
   mostra dinheiro. A tabular alinha as unidades entre as quatro linhas. */
.totais-detalhes { display: flex; flex-direction: column; gap: 2px; }
.totais-detalhes > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    background: var(--cinza-fundo);
    padding: 4px 10px; border-radius: 4px;
    font-size: .78rem; color: var(--verde-escuro);
}
.totais-detalhes strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.totais-detalhes .destaque { background: #DDE5E1; font-weight: 700; }
.totais-detalhes .destaque strong { font-size: .95rem; }

.quadro-detalhes {
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    padding: 8px 10px;
    font-size: .74rem; color: var(--verde-escuro);
    display: flex; flex-direction: column; gap: 3px;
}
.quadro-detalhes .em-aberto { color: var(--erro); }

/* Cada marco em três colunas — o quê, quando, quem — e não numa frase
   corrida. A frase "Recebimento: 20/10/2026 às 20:51hs por OPERADOR DE
   CAIXA" não cabe na largura desta coluna e quebrava no meio do nome do
   operador, que é justamente o que se vem ler. Em colunas, o nome é o
   único que pode encurtar, e encurta com reticências e `title`. */
.cabeca-movimentos { margin-bottom: 2px; }
.marco {
    display: grid;
    grid-template-columns: 84px 104px minmax(0, 1fr);
    gap: 6px;
    align-items: baseline;
    font-size: .7rem;
}
.marco .que { color: var(--cinza-texto); }
.marco .quando { font-variant-numeric: tabular-nums; white-space: nowrap; }
.marco .quem {
    font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* A lista rola e as somas não: uma conta rachada entre seis cartões
   empurraria o "Recebido (=)" para fora do quadro, e é ele que se vem
   conferir. Altura de quatro linhas, que é o que a conta normal tem. */
.lista-recebimentos {
    max-height: 104px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; gap: 2px;
}
.quadro-detalhes .chave-dfe {
    font-size: .62rem; letter-spacing: -.2px; color: var(--cinza-texto);
    word-break: break-all;
}

.linha-recebimento {
    display: flex; justify-content: space-between; gap: 10px;
    font-weight: 700;
}
.linha-recebimento .valor { font-variant-numeric: tabular-nums; }
.trilha-recebimento { font-size: .62rem; color: var(--cinza-texto); margin-top: -2px; }

/* Separado do que veio antes por uma linha: são somas, não mais um
   recebimento lançado. */
.somas-recebimento {
    margin-top: 4px; padding-top: 6px;
    border-top: 1px solid var(--cinza-linha);
    display: flex; flex-direction: column; gap: 2px;
}
.somas-recebimento > div { display: flex; justify-content: space-between; gap: 10px; }
.somas-recebimento strong { font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
    .detalhes-pedido { grid-template-columns: 1fr; }
    .detalhes-pedido .lista-detalhes { height: 200px; }
}

/* Nao ha `.acoes-modal` generico: cada modal define o seu. Este se
   basta, para nao depender de um que nao existe. */
.acoes-modal.centro { display: flex; justify-content: center; }
.acoes-modal.centro .btn { flex: 0 0 auto; width: 170px; }

/* ---------- Transferencia de produtos entre mesas ----------
   Dois paineis lado a lado: o operador ve a conta de origem encolher e a
   de destino crescer antes de confirmar. Nada se move no banco ate la. */
.modal-transferencia { width: min(900px, 96vw); }
.corpo-transferencia { gap: 10px; }

.faixas-transferencia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.faixa-lado {
    display: flex; align-items: baseline; gap: 8px;
    background: var(--laranja);
    color: var(--branco);
    padding: 5px 12px;
    border-radius: var(--raio);
    font-size: .68rem; font-weight: 600;
}

.faixa-lado strong { font-size: 1.05rem; font-weight: 800; margin-right: 10px; }

.painas-transferencia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.paina {
    list-style: none;
    height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    padding: 4px;
}

.linha-transf {
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: .78rem;
    color: var(--verde-escuro);
}

.linha-transf .topo { display: flex; gap: 7px; font-weight: 800; }
.linha-transf .numero { min-width: 20px; }
.linha-transf .descricao { flex: 1; }

.linha-transf .trilha {
    display: block;
    padding-left: 27px;
    font-size: .66rem; font-weight: 400;
    color: var(--cinza-texto);
}

/* A escolhida fica cinza como no PDV atual: o destaque forte e do botao
   que a move, nao da linha. */
.linha-transf.escolhida { background: #D7DDD9; }
.linha-transf:focus-visible { outline: 2px solid var(--laranja); }

.acoes-transferencia { display: flex; align-items: center; gap: 8px; }
.acoes-transferencia .espaco { flex: 1; }
.acoes-transferencia .btn-barra { width: 84px; height: 62px; }

.par-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Listas que rolam com o dedo arrastado em qualquer ponto, nao so pela
   barra. Em monitor de toque sem inercia nativa, e o unico gesto que o
   operador tenta. */
[data-rolagem-por-arrasto] { cursor: grab; touch-action: pan-y; }
[data-rolagem-por-arrasto].arrastando { cursor: grabbing; user-select: none; }

/* ================= FECHAR MESA (pré-conta) =================
 * A conferência antes de o papel sair: os ajustes que ainda mudam o valor
 * ficam em cima, os números embaixo, e as duas saídas no fim.
 * ============================================================ */

/* É um `.painel`, irmão do da esquerda: fundo, borda e raio vêm de lá. */
.tela-fechar-mesa {
    gap: 10px;
    padding: 10px 12px;
    overflow-y: auto;
}

.tela-fechar-mesa .faixa-secao {
    font-size: .95rem;
    font-weight: 800;
    padding: 4px 2px 7px;
    border-bottom: 1px solid var(--cinza-linha);
}

.faixa-secao.com-voltar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

/* Do tamanho do VOLTAR do recebimento — o resto vem do `.bloco-acao`,
   que é a classe que aquele botão usa. A largura é a da coluna dele na
   grade de lá, para os dois terminarem no mesmo lugar. */
.voltar-secao { flex: 0 0 90px; }

/* Proporcionais, não fixas: a coluna da direita é uma fração da tela e
   muda de largura com ela. Em pixel, as caixas ou estouravam o painel ou
   deixavam um número pequeno perdido num retângulo enorme. O minmax(0,…) é
   o que impede o conteúdo de empurrar a coluna além da fração. */
.ajustes-conta {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 92px 100px;
    gap: 8px;
    align-items: stretch;
}

.valores-conta {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 8px;
}

.tela-fechar-mesa .caixa-valores .campo.grande,
.tela-fechar-mesa .campo.grande {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--verde-escuro);
}

.destaque-mesa > div { align-items: center; }
.destaque-mesa .titulo { text-align: center; }
.destaque-mesa .campo.grande { text-align: center; }

.caixa-valores.pessoas > div { flex: 1; }
.caixa-valores.pessoas .titulo { text-align: center; }

/* O stepper é de submit: cada toque grava e recarrega com o valor novo,
   então não há estado só no navegador para se perder num F5. */
.stepper-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.stepper-inline .passo {
    width: 34px; height: 34px;
    border-radius: 6px;
    background: var(--branco);
    border: 1px solid var(--verde-caixa-borda);
    color: var(--verde-escuro);
    font-size: 1.3rem; font-weight: 800; line-height: 1;
}

.stepper-inline .passo:active { background: var(--verde-caixa); }

.tela-fechar-mesa .caixa-valores .campo .excluida {
    color: var(--erro);
    font-size: .95rem;
    font-weight: 800;
}

/* Os totais e as duas saidas descem para o pe do painel: e onde o
   polegar alcanca numa tela de toque, e o espaco vazio passa a ficar
   entre a conferencia e a decisao, em vez de pendurado embaixo dela. */
.tela-fechar-mesa .faixa-totais {
    margin-top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 88px 88px;
    gap: 8px;
}

/* ---------------------------------------------------------------------
   Entre uma mesa e outra: a tela que fica atrás do "Ir para a Mesa".
   Vazia de propósito — o painel guarda a geometria para a troca de mesa
   não sacudir a tela, mas não mostra conta nenhuma.
   --------------------------------------------------------------------- */
.faixa-pedido.sem-conta .valor { opacity: .55; }

.tela-espera {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.aviso-espera {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--verde-escuro);
}

.acoes-espera { display: flex; gap: 12px; }
.acoes-espera .btn { min-width: 190px; min-height: 62px; }

/* ---------------------------------------------------------------------
   Tipo da NFC-e, perguntado antes de fechar a venda.

   As duas saídas finalizam o pedido; a cor é o que as separa. Verde é a
   nota, que é o caminho normal. O ✕ da faixa fecha a venda SEM nota — age
   em vez de só fechar, como no PDV atual.
   --------------------------------------------------------------------- */
.modal-tipo-nfce { width: min(420px, 94vw); }

.modal-tipo-nfce .modal-corpo { gap: 10px; align-items: stretch; }

.modal-tipo-nfce .resumo-venda {
    margin: 0;
    text-align: center;
    font-size: .92rem;
    font-weight: 800;
    color: var(--verde-escuro);
}

.modal-tipo-nfce .instrucao { text-align: center; }

.opcao-nfce {
    border: 0;
    border-radius: var(--raio);
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* O caminho normal: alvo grande, porque é o que o dedo procura sempre. */
.opcao-nfce.completa {
    min-height: 92px;
    background: #32CD32;
    color: #14110F;
    font-size: 1.25rem;
}

.opcao-nfce.completa:hover { opacity: .8; }

.opcao-nfce.simplificada {
    min-height: 58px;
    background: #FFE94A;
    color: #14110F;
    font-size: .95rem;
}

.opcao-nfce.simplificada small { font-size: .62rem; font-weight: 700; }

/* Apagada enquanto não existe — à vista, mas sem convidar o toque. */
.opcao-nfce:disabled { opacity: .45; cursor: not-allowed; }

/* O ✕ da faixa: mesmo desenho do fechar comum, mas é um envio. */
.fechar-sem-nota {
    background: none;
    border: 0;
    color: var(--branco);
    font-size: 1.2rem;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}

/* ========================= CADASTROS =========================

   As telas de cadastro são as únicas do sistema feitas para teclado e
   mouse: quem cadastra produto está sentado, não de pé no caixa. Por isso
   aqui a densidade é maior e os alvos são menores que no resto do PDV —
   seria pior forçar botões de 58px numa tabela de duzentos produtos. */

/* Cadastro e lista usam a mesma moldura.
 *
 * Antes o formulário vinha num `.painel` de borda verde grossa com a faixa
 * laranja do pedido em cima, e a lista vinha na moldura clara da tela
 * fiscal — duas caras para o mesmo lugar do sistema. A faixa laranja é da
 * venda: lá ela existe para o operador ler o número do pedido de relance, à
 * distância. Cadastro é outra situação, com a pessoa sentada e perto.
 *
 * Sem `gap`: a faixa e o corpo são uma caixa só, e um vão entre eles
 * deixaria a borda aberta no meio. */
.painel-cadastros { gap: 0; }

.tela-lista > .formulario-cadastro,
.tela-lista > .grade-cadastros {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--branco);
    border: 1px solid var(--cinza-linha);
    border-top: none;
    border-radius: 0 0 var(--raio) var(--raio);
    /* Sem folga embaixo: quem fecha o contêiner é a barra de ações, que
       gruda ali e precisa encostar na borda — senão sobra uma fresta por
       onde o campo seguinte aparece passando por baixo dela. */
    padding: 14px 14px 0;
}

.grade-cadastros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 4px;
    /* Todos os cartões do mesmo tamanho, e todos encostados no topo.
     *
     * A largura já vinha igual, das colunas de `1fr`. A altura não: só os
     * cartões "em breve" têm a terceira linha, e a grade dimensiona cada
     * fileira pelo conteúdo dela — as duas primeiras ficavam mais baixas que
     * a terceira. A pista fixa iguala todas.
     *
     * `minmax(.., auto)` e não uma altura cravada: numa janela estreita
     * "Formas de recebimento" quebra em duas linhas, e cortar o nome de um
     * cadastro é pior do que uma fileira mais alta.
     *
     * `align-content: start` porque o painel ocupa a tela inteira desde a
     * fatia da administração: sem isso a grade reparte a sobra entre as
     * fileiras e cada cartão ganha um palmo de branco embaixo do texto. O
     * vazio é da tela, não de dentro dos cartões. */
    grid-auto-rows: minmax(104px, auto);
    align-content: start;
}

.cartao-cadastro {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--branco);
    border: 1px solid var(--cinza-linha);
    border-left: 5px solid var(--laranja);
    border-radius: var(--raio);
    padding: 14px 16px;
    text-decoration: none;
}

.cartao-cadastro strong { color: var(--verde-escuro); font-size: .95rem; }
.cartao-cadastro span { color: var(--cinza-texto); font-size: .76rem; line-height: 1.35; }

/* Apagado, não escondido: quem procura precisa saber que o lugar é este. */
.cartao-cadastro.indisponivel { border-left-color: var(--cinza-linha); opacity: .55; }
.cartao-cadastro.indisponivel em {
    font-style: normal; font-size: .64rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px; color: var(--cinza-texto);
}

/* ---- Lista longa, no molde da tela fiscal ----
 *
 * Cadastro de produto é lista de centenas de linhas: o cabeçalho tem de ficar
 * parado enquanto o corpo corre, senão a pessoa rola trinta linhas e não sabe
 * mais qual coluna é o preço do delivery. A estrutura vem de `.tela-fiscal`;
 * aqui ficam só os filtros, a ordenação e as larguras.
 */

/* Sem respiro externo: a faixa e o corpo encostam na borda da área de
   conteúdo, como o painel da página principal. Com os 12px que a tela
   fiscal usa, o cadastro ficava visivelmente mais estreito e mais curto que
   o resto do sistema — duas molduras diferentes para a mesma janela. */
.tela-lista { padding: 0; }

/* Faixa de título alta: ela não é só um rótulo — carrega a busca, os
   filtros e o botão de cadastrar, e campo de formulário pede respiro em
   volta. Os pixels saem da altura das linhas, logo abaixo, para não
   custar a décima terceira.

   A tela fiscal usava uma faixa própria, mais baixa, e desde 20/10/2026
   usa esta: ela também tem busca, e duas molduras quase iguais era o
   tipo de diferença que ninguém escolheu — veio de a tela ter nascido
   antes do padrão. */
.titulo-lista { padding-top: 10px; padding-bottom: 10px; }

/* Cabeçalho alto: nas listas ordenáveis ele é clicável — é por ele que
   se ordena —, e alvo de clique pede altura.
 *
 * Os 8px que ele ganhou saíram das linhas, 1px em cima e 1px embaixo de
 * cada: é o que faz caber a décima terceira na mesma janela. Sem isso o
 * cabeçalho maior custaria uma linha da lista, que é o contrário do pedido. */
.tela-lista .itens-cabecalho th { padding: 9px 10px; }

.titulo-lista { gap: 10px; }
.titulo-lista .nome-da-tela { white-space: nowrap; }

/* Busca, filtro de grupo e os botões, tudo na faixa do título: é uma linha a
   menos entre o que a pessoa procura e a lista onde ela procura. */
.filtros-lista { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
/* Campos estreitos: com três filtros na barra — busca, grupo e status — os
   larguinhos de antes empurravam o botão de cadastrar para fora da tela. O
   que o campo precisa mostrar é a opção escolhida, não a mais longa. */
.filtros-lista input[type="text"] { min-height: 30px; width: 170px; font-size: .74rem; padding: 0 10px; }
.filtros-lista select { min-height: 30px; width: 150px; font-size: .74rem; padding: 0 8px; }

/* O rótulo diz o que o campo filtra. Sem ele, dois campos lado a lado viram
   adivinhação — ainda mais depois que o botão de aplicar saiu. */
.rotulo-filtro {
    font-size: .68rem; font-weight: 800; letter-spacing: .3px;
    color: var(--verde-escuro); text-transform: none; white-space: nowrap;
}

.separador-filtro { color: var(--cinza-texto); font-weight: 400; padding: 0 2px; }

/* Escuro como o ATUALIZAR da tela fiscal: a faixa do título é clara, e um
   botão claro sobre ela some. O laranja fica para a ação que cria. */
.btn-barra-lista {
    display: inline-flex; align-items: center; gap: 6px;
    background: #24312C; color: var(--branco);
    border: 1px solid #24312C; border-radius: 5px;
    font-size: .66rem; font-weight: 800; letter-spacing: .4px;
    padding: 0 14px; min-height: 30px;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}

.btn-barra-lista:hover { background: var(--verde-menu-ativo); border-color: var(--verde-menu-ativo); }
.btn-barra-lista:active { transform: scale(.98); }
.btn-barra-lista.destaque { background: var(--laranja); border-color: var(--laranja-escuro); color: var(--branco); }
.btn-barra-lista.destaque:hover { background: var(--laranja-escuro); }

/* Cabeçalho clicável. A seta só aparece na coluna que está ordenando — três
   setas acesas ao mesmo tempo não diriam qual delas vale. */
.itens-cabecalho th a {
    display: flex; align-items: center; gap: 4px;
    color: inherit; text-decoration: none; cursor: pointer;
}

.itens-cabecalho th.dir a, .itens-cabecalho th.cen a { justify-content: flex-end; }
.itens-cabecalho th.cen a { justify-content: center; }
.itens-cabecalho th a:hover { text-decoration: underline; }
.itens-cabecalho th a .seta { font-size: .6rem; line-height: 1; }
.itens-cabecalho th.ordenando a { color: var(--laranja-escuro); }

/* Larguras das listas de cadastro: a descrição/nome leva sempre a sobra. */
.tela-lista .col-codigo { width: 92px; }
.tela-lista .col-grupo { width: 170px; }
.tela-lista .col-preco { width: 104px; }
.tela-lista .col-acoes { width: 92px; }
.tela-lista .col-acoes-larga { width: 160px; }
/* Três botões (impressoras: TESTAR, EDITAR, EXCLUIR). Medido no Chrome,
   Poppins 800: TESTAR 67,8 + EDITAR 65,9 + EXCLUIR 72,6 + dois vãos de 5
   + 16 de padding da célula = 232,3px. */
.tela-lista .col-acoes-tripla { width: 236px; }
.tela-lista .col-perfil { width: 168px; }
.tela-lista .col-permissoes { width: 318px; }
.tela-lista .col-sessao { width: 170px; }

/* Terminal tem tamanho de conteúdo: "PDV 1 (Navegador CAIXA1)" e nada maior.
   A sobra fica com a descrição da mesa, que é campo livre. */
.tela-lista .col-terminal { width: 200px; }
.tela-lista .itens .col-terminal { font-weight: 600; color: var(--cinza-texto); }

.tela-lista .col-area { width: 80px; }

/* "Substituição tributária" não cabe nos 80px da coluna estreita, e
   abreviada ela vira "Substitu..." — que não diz nem qual situação é. */
.tela-lista .col-situacao-fiscal { width: 150px; }
.tela-lista .col-area-salao { width: 170px; }
.tela-lista .itens .col-area-salao { font-weight: 600; color: var(--cinza-texto); }
.tela-lista .col-taxa { width: 100px; }
.tela-lista .col-situacao { width: 110px; }

.tela-lista .itens .col-perfil,
.tela-lista .itens .col-permissoes,
.tela-lista .itens .col-sessao,
.tela-lista .itens .col-area,
.tela-lista .itens .col-taxa,
.tela-lista .itens .col-situacao,
.tela-lista .itens .col-telas { font-weight: 600; color: var(--cinza-texto); }

.tela-lista .col-telas { width: 240px; }

/* Linha de cadastro desligado: continua legível, porque é por ela que a
   pessoa chega para religar. A etiqueta é que diz o estado — só a cor não
   diria nada a quem não distingue as duas. */
.tela-lista .itens tr.linha-inativa td { color: var(--cinza-texto); font-weight: 600; }

.tela-lista .etiqueta-inativo {
    margin-left: 8px; padding: 1px 7px; border-radius: 9px;
    background: var(--cinza-linha); color: var(--cinza-texto);
    font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}

/* Garçom ou gerente cuja senha não serve para o app do garçom. Amarelo:
   não é erro de cadastro, é pendência que o gerente resolve num toque. */
.tela-lista .etiqueta-senha {
    margin-left: 8px; padding: 1px 7px; border-radius: 9px;
    background: var(--amarelo-falta); color: #3A2A00;
    font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}

/* A senha sorteada, mostrada uma vez acima da lista. Grande e em fonte de
   largura fixa: o gerente lê em voz alta para o garçom, e 0 e 8 não podem
   se confundir. */
.aviso-senha-gerada {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
    margin-bottom: 10px; padding: 12px 16px;
    border-radius: var(--raio);
    background: var(--verde-claro); border: 2px solid var(--verde-receber);
    color: var(--verde-escuro); font-size: .9rem;
}
.aviso-senha-gerada .senha {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 1.6rem; font-weight: 800; letter-spacing: 6px;
}
.aviso-senha-gerada em { font-size: .78rem; color: var(--cinza-texto); }

/* Dois botões na mesma célula; o de liberar vem dentro de um form de POST. */
.tela-lista .itens .col-acoes-larga .conteudo-celula {
    display: flex; align-items: center; justify-content: center; gap: 5px;
}

.tela-lista .col-acoes-larga form { display: contents; }

.tela-lista .itens .col-codigo { color: var(--azul-item); font-weight: 800; }
.tela-lista .itens td { font-weight: 700; padding: 3px 8px; }
.tela-lista .itens .col-grupo { font-weight: 600; color: var(--cinza-texto); }

/* Preço cadastrado sem venda ativa: existe e não vale. O traço diz isso de
   longe; a cor sozinha não diria para quem não distingue as duas. */
.tela-lista .itens .col-preco.inativo { color: var(--cinza-texto); text-decoration: line-through; font-weight: 600; }
.tela-lista .itens .col-preco.sem-preco { color: var(--cinza-texto); font-weight: 400; }

.tela-lista .itens .col-acoes { text-align: center; }

.btn-linha {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 24px; padding: 0 12px;
    background: var(--verde-botao); border: 1px solid var(--verde-botao-borda);
    border-radius: 5px; color: var(--verde-escuro);
    font-size: .66rem; font-weight: 800; letter-spacing: .3px;
    text-decoration: none; cursor: pointer;
}

.btn-linha:hover { background: var(--verde-menu-ativo); color: var(--branco); }
.btn-linha:active { transform: scale(.96); }

/* O que apaga: vermelho, para não se confundir com o EDITAR ao lado. As
   rotas já marcavam o APAGAR com `perigo`, que não tinha estilo e saía
   verde como os outros. */
.btn-linha.perigo { background: #FCE8E6; border-color: #F4B4AE; color: var(--erro); }
.btn-linha.perigo:hover { background: var(--erro); border-color: var(--erro); color: var(--branco); }

/* ---- Barra de ações da lista ---- */

.barra-cadastro {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 0 4px;
}

.busca-cadastro { display: flex; gap: 8px; flex: 1 1 320px; max-width: 520px; }
.busca-cadastro input { flex: 1; min-height: 42px; }
.barra-cadastro .btn { min-height: 42px; padding: 0 18px; font-size: .8rem; }
.contagem-registros { font-size: .74rem; color: var(--cinza-texto); }

/* ---- Tabela ---- */

/* A rolagem é da tabela, não da página: o cabeçalho do PDV e a barra de
   ações ficam parados enquanto a lista corre. */
.rolagem-tabela { flex: 1; overflow: auto; border-radius: var(--raio); background: var(--branco); }

.tabela-cadastro { width: 100%; border-collapse: collapse; font-size: .82rem; }

.tabela-cadastro thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--verde-escuro); color: var(--branco);
    font-size: .68rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    text-align: left; padding: 10px 12px; white-space: nowrap;
}

.tabela-cadastro td { padding: 9px 12px; border-bottom: 1px solid var(--cinza-linha); }
.tabela-cadastro tbody tr:hover { background: var(--cinza-fundo); }
.tabela-cadastro .codigo { font-weight: 800; color: var(--verde-escuro); white-space: nowrap; }
.tabela-cadastro .discreto { color: var(--cinza-texto); }
.tabela-cadastro .numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-cadastro .acoes { text-align: right; white-space: nowrap; }
.tabela-cadastro .acoes .btn { min-height: 34px; padding: 0 14px; font-size: .74rem; }

/* Preço cadastrado mas sem venda ativa: o número existe e não vale. */
.tabela-cadastro .numero.inativo { color: var(--cinza-texto); text-decoration: line-through; }

/* Operador inativo: a linha apaga, mas o nome continua legível — ele precisa
   ser encontrado na busca para ser reativado. A etiqueta é que diz o estado;
   só a cor não diria nada a quem não enxerga a diferença. */
.tabela-cadastro tr.linha-inativa td { background: var(--cinza-fundo); color: var(--cinza-texto); }
.tabela-cadastro .etiqueta-inativo {
    margin-left: 8px; padding: 1px 7px; border-radius: 9px;
    background: var(--cinza-linha); color: var(--cinza-texto);
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

/* Dois botões na mesma célula, um deles dentro de um form de POST.
   `.btn` é flex por causa da tela de venda, e flex é nível de bloco: sem o
   `inline-flex` cada botão toma uma linha só para ele. */
.tabela-cadastro .acoes .acao-embutida { display: inline-block; }
.tabela-cadastro .acoes .btn { display: inline-flex; vertical-align: middle; }
.tabela-cadastro .acoes .acao-embutida + .btn { margin-left: 6px; }

.paginacao { display: flex; justify-content: center; font-size: .8rem; }

/* ---- Formulário ---- */

.formulario-cadastro {
    flex: 1; overflow: auto;
    display: flex; flex-direction: column; gap: 14px;
    padding: 4px;
}

.formulario-cadastro fieldset {
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    background: var(--branco);
    padding: 14px 16px 16px;
}

.formulario-cadastro legend {
    font-size: .7rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--laranja); padding: 0 6px;
}

.linha-campos { display: flex; flex-wrap: wrap; gap: 12px; }

/* Duas linhas no mesmo grupo — o endereço e a praça, por exemplo. O
   espaço entre elas é o mesmo que separa os campos dentro de uma. */
.linha-campos + .linha-campos { margin-top: 12px; }

/* Campo que o ambiente desligou — os da nota, num caixa sem emissão.
   Apagado e à vista: sumir com ele faria o cadastro parecer outro, e quem
   for ligar a emissão precisa ver o que vai ter de preencher. */
.linha-campos label.campo-desligado { opacity: .5; }
.linha-campos label.campo-desligado input,
.linha-campos label.campo-desligado select { cursor: not-allowed; }
.linha-campos > label, .linha-campos > .bloco-modulo { display: flex; flex-direction: column; gap: 4px; }
.campo-curto { flex: 0 1 150px; }

/* A linha de operação do cadastro do PDV: as duas filas e as quatro chaves
   (romaneio e comanda por módulo) numa linha só. Medido no Chrome, Poppins:
   caixas "Imprime" 106,5px, "Balcão" 109,0, "Mesa" 86,8 e "Delivery" 104,2
   — as quatro com 110, a maior, para ficarem do mesmo tamanho; o "Comanda
   remota" fica no título. O título "Impressora padrão (fila do Windows)"
   mede 224px, daí o mínimo de 230 nos campos de texto. Soma com os cinco
   vãos de 12: 1020px; ~1090 de conteúdo numa tela de 1366. Menor, quebra. */
.linha-operacao > .campo-texto { flex: 0 1 260px; min-width: 230px; }
.linha-operacao > .campo-curto { flex: 0 0 110px; }

/* A identificação do PDV numa linha só. Descrição e contribuinte dividem
   a sobra a partir de 220px: com as bases de 380 e 260 a linha quebrava
   numa tela mais estreita (o Status descia sozinho) em vez de encolher. */
.linha-identificacao > .campo-texto,
.linha-identificacao > .campo-largo { flex: 1 1 220px; min-width: 0; }

/* O cadastro do PDV inteiro sem rolagem até 1280x600 de área útil. Medido
   no Chrome com a página real: campos com 45-46px (10px de folga em cima e
   embaixo) e caixas de marcar com 42 passavam 17px; com 7px de folga e
   caixas de 40, as quatro linhas devolvem uns 23. */
.cadastro-pdv input[type="text"],
.cadastro-pdv input[type="password"],
.cadastro-pdv select { padding-top: 7px; padding-bottom: 7px; }
.cadastro-pdv .opcao.caixa-de-campo { min-height: 40px; }
.campo-largo { flex: 1 1 260px; }

/* A linha do cadastro de dispositivo. Medido no Chrome, Poppins 14,4px:
   "Gerenciador de processos" 191px e "Terminal — lançamento em mesa"
   245px; a caixa soma 28 de folga, 4 de borda e a seta. Com os 150 de
   `campo-curto` os dois saíam cortados. O PDV é que cede: o nome dele é
   curto ("PDV 2"). Nome e PDV dividem a sobra a partir de 220 e 140:
   com a base de 380 do nome, a linha quebrava em 1100px; assim ela cabe
   numa só a partir de ~1075px. */
.linha-dispositivo > .campo-tipo { flex: 0 0 250px; }
.linha-dispositivo > .campo-modo { flex: 0 0 305px; }
.linha-dispositivo > .campo-texto { flex: 2 1 220px; min-width: 0; }
.linha-dispositivo > .campo-largo { flex: 1 1 140px; min-width: 0; }

/* Leva uma fatia maior da sobra que os outros campos largos da mesma linha.
   É para o campo que o operador mais lê — a descrição do produto. */
.campo-amplo { flex: 2 1 320px; }

/* Campo de conteúdo curto e previsível: código, unidade, o check de status.
   Não cresce — a sobra da linha é das descrições. */
.campo-mini { flex: 0 0 110px; }

/* Menor ainda, para o que tem tamanho fixo e conhecido: um percentual de
   cinco caracteres, um fuso horário de seis. Caixa maior do que o
   conteúdo faz o olho procurar o que não está lá. */
.campo-micro { flex: 0 0 86px; }
.linha-campos > .campo-micro { display: flex; flex-direction: column; gap: 4px; }

/* Texto curto numa fileira de poucos campos: cresce até onde é útil e
   para. Sem isto a descrição de 40 caracteres leva toda a sobra da linha
   e vira uma caixa de meia tela para caber "DINHEIRO". */
.campo-texto { flex: 0 1 380px; }

/* Linha que não deixa sobra: os campos de texto dividem o que resta até
   encostar na borda. É para o endereço, onde cortar a palavra é perder
   informação — "VILA NOVA CONC" não é bairro nenhum, e quem confere a
   nota precisa ler o que está gravado.

   Os campos de tamanho fixo ficam fora: `campo-mini` e `campo-micro` são
   de conteúdo curto e previsível — o número da casa, a UF, um fuso
   horário —, e esticá-los só afastaria o rótulo do valor. Eles existem
   justamente para não crescer; incluí-los aqui desfaria o que a classe
   promete. */
.linha-campos.preenche > label:not(.campo-mini):not(.campo-micro) { flex-grow: 1; }

/* Alíquota em percentual: oito delas cabem numa linha só, que é como o
   grupo tributário precisa ser lido — de uma vez, sem rolagem. Dividem
   a sobra entre si e encolhem juntas na tela estreita. */
.campo-aliquota { flex: 1 1 96px; }
.linha-campos > .campo-aliquota { display: flex; flex-direction: column; gap: 4px; }

.formulario-cadastro .campo-aliquota > span {
    font-size: .74rem; font-weight: 700; color: var(--cinza-texto);
    white-space: nowrap;
}

/* Número se lê pela direita, e é por ela que ele entra. A tabular
   alinha as colunas de dígitos entre um campo e outro.

   Vale em qualquer lugar, e não só no formulário de cadastro: quem
   decide é o `data-decimal`, que é o mesmo marcador que liga o
   comportamento no `pdv.js`. Com a regra presa a um contêiner, o campo
   do troco de abertura ficava com a digitação da casa e o alinhamento
   de outra. */
input[data-decimal] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.linha-campos > .campo-mini { display: flex; flex-direction: column; gap: 4px; }

.formulario-cadastro label > span {
    font-size: .74rem; font-weight: 700; color: var(--cinza-texto);
}
.formulario-cadastro label > span em {
    font-style: normal; font-weight: 500; color: var(--cinza-texto); opacity: .8;
}
.formulario-cadastro input[type="text"], .formulario-cadastro select { min-height: 42px; font-size: .9rem; }

/* Caixa de marcar ocupando o lugar de um campo na linha.
 *
 * O rótulo pequeno vai por cima, como nos outros campos, e a caixa recebe a
 * moldura e a altura de um `input` — senão ela flutua no meio da linha, sem
 * nada que diga onde o campo começa e acaba. O contêiner é `div` porque dois
 * `label` aninhados não são HTML válido: o de fora nomeia o campo, o de
 * dentro é da caixa. */
.linha-campos > .campo-curto,
.linha-campos > .campo-texto { display: flex; flex-direction: column; gap: 4px; }

.formulario-cadastro .campo-curto > span,
.formulario-cadastro .campo-texto > span,
.formulario-cadastro .campo-micro > span,
.formulario-cadastro .campo-mini > span {
    font-size: .74rem; font-weight: 700; color: var(--cinza-texto);
}

.opcao.caixa-de-campo {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--cinza-linha);
    border-radius: var(--raio);
    background: var(--branco);
}

.nota-campo { margin: 0 0 10px; font-size: .74rem; color: var(--cinza-texto); line-height: 1.45; }

/* Quem liberou um ato, na trilha de autorizações. Vazio ali não é falta
   de registro — é "quem fez já podia" —, e os dois casos precisam ser
   distinguíveis de relance. */
.selo-supervisor {
    display: inline-block;
    background: var(--amarelo-falta); color: #4A3800;
    font-size: .68rem; font-weight: 700;
    padding: 2px 7px; border-radius: 10px;
}
.sem-supervisor { color: var(--cinza-texto); font-size: .72rem; font-style: italic; }

/* Tarefa que falhou ou expirou: o motivo de alguém abrir esta tela. */
.itens tr.linha-com-erro td { background: rgba(214, 69, 65, .07); }
.resposta-do-agente { font-size: .72rem; line-height: 1.4; }

/* Log de acessos: por que a sessão terminou, ou por que não começou.
   Em linha com o selo do supervisor, porque uma entrada liberada traz
   os dois — quem liberou, e o que tinha acontecido antes. */
.observacao-acesso { font-size: .78rem; line-height: 1.5; }
.motivo-acesso { display: inline-block; color: var(--cinza-texto); }
.observacao-acesso .selo-supervisor + .motivo-acesso { margin-left: 6px; }

/* Erros do servidor.

   A mensagem é texto de máquina: `monospace` e quebra por qualquer
   lugar, senão uma consulta SQL de duzentos caracteres estoura a
   largura da tabela e a tela inteira ganha barra horizontal. */
.erro-do-servidor { font-size: .78rem; line-height: 1.5; }
.mensagem-erro {
    display: block;
    font-family: Consolas, "Courier New", monospace;
    word-break: break-word;
}
.rastro-erro > summary {
    cursor: pointer;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--verde-escuro);
    padding: 3px 0;
}
.rastro-erro > pre {
    margin: 2px 0 4px;
    padding: 8px;
    max-height: 260px;
    overflow: auto;
    background: #F4F4F4;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: .7rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* O começo do arquivo ficou de fora: dizer isso é obrigação, senão
   "não achei o erro" vira "o erro não existe". */
.aviso-trecho {
    margin: 0;
    padding: 0 10px;
    font-size: .74rem;
    color: var(--cinza-texto);
}

/* A coluna do "o que mudou" na trilha: um campo por linha, cada um com
   o de/para. Em linha corrida, três campos alterados viravam um
   parágrafo que ninguém lê. */
.mudancas-auditoria { line-height: 1.5; }
.mudancas-auditoria .mudanca { display: block; font-size: .72rem; }
.mudancas-auditoria .mudanca strong {
    color: var(--cinza-texto); font-weight: 700; margin-right: 5px;
}
.mudancas-auditoria .sem-mudanca { color: var(--cinza-texto); }

/* Explicação de por que uma ação não está na lista. Entre o título e as
   linhas, onde o olho procura o botão que não existe. */
.aviso-da-lista {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: var(--raio);
    background: var(--cinza-campo);
    border: 1px solid var(--cinza-linha);
    font-size: .74rem;
    color: var(--cinza-texto);
    line-height: 1.45;
}

.linha-opcoes { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; }

.opcao { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.opcao input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--laranja); }
.opcao > span { font-size: .8rem; color: var(--verde-escuro); font-weight: 600; }
.opcao > span em { font-style: normal; font-weight: 400; color: var(--cinza-texto); }

/* O formulário de produto é o mais longo dos cadastros e precisa caber numa
   tela só: aperta os respiros em vez de empurrar os botões para baixo da
   dobra. O corte é por formulário, não global, porque nos outros a folga
   maior é melhor de ler. */
.formulario-cadastro.compacto { gap: 4px; }
.formulario-cadastro.compacto fieldset { padding: 5px 12px 6px; }
.formulario-cadastro.compacto .acoes-cadastro { margin-top: 2px; padding: 8px 14px; }
.formulario-cadastro.compacto .linha-campos + .linha-campos { margin-top: 8px; }
.formulario-cadastro.compacto .linha-opcoes { margin-top: 8px; }
.formulario-cadastro.compacto .nota-campo { margin-bottom: 5px; }

/* Campos um pouco mais baixos: 42px é alvo de dedo na tela de venda; aqui
   quem cadastra está sentado, com mouse, e 38px dá três linhas de folga no
   formulário mais longo. */
.formulario-cadastro.compacto input[type="text"],
.formulario-cadastro.compacto input[type="password"],
.formulario-cadastro.compacto select { min-height: 38px; }

/* Preço e taxa lado a lado dentro do bloco do módulo.
 *
 * O bloco da mesa carrega dois campos e os outros um só, então deixar os
 * três blocos crescerem igual faria o preço do balcão e o do delivery
 * ficarem maiores que o da mesa. A base fixa iguala os três: a mesa é a mais
 * cheia, e é ela que dita a largura. */
.bloco-modulo { flex: 1 1 320px; }
.campos-do-modulo { display: flex; gap: 8px; }
.campos-do-modulo > label { flex: 1; display: flex; flex-direction: column; gap: 4px; }
/* Estreita, mas com largura para o rótulo numa linha só: quebrado em
   duas, ele empurrava o campo para baixo e desalinhava do preço ao lado. */
.campos-do-modulo > .campo-taxa { flex: 0 0 132px; }

.bloco-modulo {
    flex: 1 1 200px;
    border: 1px solid var(--cinza-linha); border-radius: var(--raio);
    padding: 10px 12px; gap: 8px !important;
}
.titulo-modulo {
    font-size: .7rem; font-weight: 800; letter-spacing: .6px;
    color: var(--verde-escuro);
}

/* No formulário compacto o bloco respira menos: são três deles lado a lado,
   e cada pixel aqui vale por três. */
.formulario-cadastro.compacto .bloco-modulo { padding: 7px 10px; gap: 6px !important; }

/* Nome do módulo à esquerda, "vende aqui" à direita, na mesma linha. */
.cabeca-do-modulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cabeca-do-modulo .opcao > span { font-size: .72rem; }
.cabeca-do-modulo .opcao input[type="checkbox"] { width: 18px; height: 18px; }

/* A regra da seção vira parte do título, em peso menor para não competir
   com ele — é uma linha a menos no corpo do formulário. */
.formulario-cadastro legend em {
    font-style: normal; font-weight: 500; text-transform: none;
    letter-spacing: 0; color: var(--cinza-texto);
}

/* Gravar e Voltar ficam colados no fim do painel.
 *
 * Desde que o painel passou a ocupar a tela inteira, o formulário é que rola
 * — e com os botões no fim do que rola, salvar virava "desça até achar".
 * `sticky` dentro da área que rola resolve sem reorganizar o HTML dos
 * formulários; o fundo branco e a linha impedem que o campo de baixo
 * apareça por trás deles. */
.acoes-cadastro {
    display: flex; justify-content: flex-end; gap: 10px;
    position: sticky; bottom: 0;
    background: var(--branco);
    border-top: 1px solid var(--cinza-linha);
    /* Margem negativa nas laterais: a barra atravessa o respiro do
       contêiner e cobre a largura toda. */
    padding: 12px 14px;
    margin: 6px -14px 0;
}
.acoes-cadastro .btn { min-height: 46px; padding: 0 28px; }

/* O `.btn` do PDV nasce com `width: 100%` — faz sentido num teclado de
   toque, onde cada botão ocupa a sua célula. Numa barra de cadastro ele
   estica e empurra o resto para a linha de baixo. */
.barra-cadastro .btn,
.acoes-cadastro .btn,
.tabela-cadastro .acoes .btn { width: auto; }

.faixa-pedido .contagem-registros { color: var(--branco); opacity: .9; font-size: .78rem; }

/* ========================= VENDA DELIVERY =========================
 *
 * Cards de pedido vindo de plataforma. A tela é de leitura: o operador vê o
 * que chegou e escolhe qual fechar — quem traz o pedido é o agendamento.
 */

/* Cards pequenos de propósito: num horário de pico a loja tem dezenas de
   pedidos em aberto, e o que decide a utilidade da tela é quantos cabem sem
   rolagem. Cada card carrega o mínimo para o operador escolher qual fechar —
   número, de qual operação veio, cliente, hora e total. */
.corpo-cards {
    flex: 1; min-height: 0; overflow-y: auto;
    background: var(--branco);
    border: 1px solid var(--cinza-linha);
    border-top: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    /* `min-content` deixa a linha com a altura do seu conteúdo em vez de um
       mínimo fixo. Os cards da mesma linha continuam do mesmo tamanho — o
       `stretch` da grade cuida disso —, mas uma linha sem divergência não
       reserva mais o espaço da que tem. */
    grid-auto-rows: min-content;
    align-content: start;
    gap: 8px;
    padding: 8px;
}

.card-delivery {
    display: flex; flex-direction: column; gap: 3px;
    background: var(--branco);
    border: 1px solid var(--cinza-linha);
    border-left: 4px solid var(--verde-menu);
    border-radius: var(--raio);
    padding: 7px 9px;
}

.card-delivery header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.card-delivery .numero { flex: none; font-size: .95rem; font-weight: 800; color: var(--verde-escuro); }

/* Apelido comprido corta em vez de empurrar o número para a linha de baixo:
   num card de 158px, "PIZZARIA DO CENTRO" não cabe inteiro e o que importa
   ali é distinguir duas operações, não ler o nome completo. */
.card-delivery .plataforma {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .56rem; font-weight: 800; letter-spacing: .3px;
    text-transform: uppercase; color: var(--cinza-texto);
}

.card-delivery .cliente {
    margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .76rem; font-weight: 700; color: var(--verde-escuro);
}

.dados-do-card { display: flex; gap: 10px; margin: 0; }
.dados-do-card dt { font-size: .55rem; text-transform: uppercase; color: var(--cinza-texto); letter-spacing: .3px; }
.dados-do-card dd { margin: 0; font-size: .76rem; font-weight: 700; color: var(--verde-escuro); }

.situacao-do-card { margin: auto 0 0; font-size: .64rem; color: var(--cinza-texto); }

/* Pedido parado com cliente esperando: a cor é a mesma do erro porque é
   disso que se trata — alguém precisa agir agora, não quando puder. */
.card-delivery.com-divergencia { border-left-color: var(--erro); }

.aviso-divergencia {
    margin-top: 4px;
    background: #FDECEA; border: 1px solid #F5C6C2; border-radius: 5px;
    padding: 5px 7px;
    font-size: .64rem; line-height: 1.35; color: #8A1C13;
}
.aviso-divergencia strong { display: block; margin-bottom: 2px; }

/* Sem marcador e sem recuo: o código já abre cada linha em negrito, e os
   16px de recuo custavam caracteres da descrição num card estreito. */
.aviso-divergencia ul { margin: 0; padding-left: 0; list-style: none; }
.aviso-divergencia .codigo { font-weight: 800; }

.vazio-cards {
    grid-column: 1 / -1;
    margin: 0; padding: 28px 10px;
    text-align: center; font-size: .78rem; color: var(--cinza-texto);
}

/* A etapa na plataforma, ao lado de "Aguardando importação". Discreta de
   propósito: o que o operador precisa fazer é o mesmo nos dois casos —
   receber e emitir —, e isto só responde "este já saiu?". */
.situacao-do-card .etapa-plataforma {
    display: inline-block;
    margin-left: 4px; padding: 1px 5px;
    background: #EEF2F0; border-radius: 3px;
    font-size: .6rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .3px; color: var(--verde-escuro);
}

/* Pedido despachado: já é venda no sistema e está na rua, esperando o
   entregador voltar. A tarja laranja o separa de longe dos que ainda
   aguardam, que é o que o operador procura na tela cheia. */
.card-delivery.despachado { border-left-color: var(--laranja); }

.situacao-do-card .etapa-despachado {
    display: inline-block;
    margin-left: 4px; padding: 1px 5px;
    background: var(--laranja); border-radius: 3px;
    font-size: .6rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .3px; color: var(--branco);
}

/* O botão de despachar mora fora do card — o card inteiro já é um botão
   —, então ele se alinha à largura dele e encosta logo abaixo. */
.despachar-pedido {
    width: 100%;
    margin: -4px 0 6px;
    min-height: 40px;
    font-size: .64rem;
}

/* O card inteiro é o botão. O `form` assume o lugar do antigo `article` na
   grade, e o `button` ocupa o card todo: no movimento, mirar um botãozinho
   dentro do card é tempo que o operador não tem. */
.card-delivery .area-do-card {
    display: flex; flex-direction: column; gap: 3px;
    width: 100%; height: 100%; margin: 0; padding: 0;
    background: none; border: 0; text-align: left;
    font: inherit; color: inherit; cursor: pointer;
}
.card-delivery:hover { border-color: var(--verde-menu); box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.card-delivery:active { transform: scale(.99); }
.card-delivery.com-divergencia:hover { border-color: var(--erro); }

/* "Receber" é a ação, não um aviso: ganha o peso que o resto do card não
   tem, para o olho achar o que fazer antes de ler o que é. */
.situacao-do-card { font-weight: 800; color: var(--verde-menu); text-transform: uppercase; }

/* Selo da situação na lista do período. Cinza é o estado normal; o laranja
   é para o que ainda pede alguma coisa de alguém, e o verde para o que já
   está resolvido — a mesma linguagem dos contadores do rodapé. */
.selo-situacao {
    display: inline-block; padding: 2px 7px; border-radius: 3px;
    background: #EEF2F0; color: var(--verde-escuro);
    font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
}
.selo-situacao.ok { background: #E3F1E8; color: var(--verde-menu); }
.selo-situacao.atencao { background: #FDECEA; color: #8A1C13; }

/* As duas colunas de situação da lista do período: os 110px da coluna
   comum cortam "FALTA CADASTRO" e "EM RECEBIMENTO" pela metade. */
.tela-lista .col-estado { width: 150px; }

/* Os dados de quem vai receber, no lugar da mensagem do painel.
   Em linha corrida: a caixa é estreita, e rótulo ao lado do valor empurrava
   cada nome para três linhas. */
.dados-do-delivery { display: flex; flex-direction: column; gap: 2px; }
.linha-delivery { font-size: .72rem; line-height: 1.3; color: var(--cinza-texto); }
.linha-delivery.destaque { font-size: .78rem; font-weight: 700; color: var(--verde-escuro); }
.linha-delivery.endereco { margin-top: 3px; color: var(--verde-escuro); }

/* A loja na plataforma: o nome é o que o operador lê, e o identificador é
   um UUID que quebra onde couber e não empurra o resto do bloco. */
.linha-delivery.identificador {
    margin-top: 3px; font-size: .64rem; word-break: break-all;
}

.linha-delivery.identificador span {
    display: block; font-size: .6rem; opacity: .75;
}

.area-mensagem .cliente-do-delivery { margin-top: 4px; font-weight: 700; color: var(--verde-escuro); }

/* Sem CPF a nota não pode ser de entrega a domicílio: o aviso é discreto,
   mas precisa existir — quem resolve isso é o operador com o cliente no
   telefone, antes de fechar a venda. */
.area-mensagem .sem-documento { color: var(--cinza-texto); font-size: .74rem; }

/* Nenhum rótulo ou valor quebra linha dentro da caixa: é o que faz o
   `max-content` medir a largura certa em vez de uma linha dobrada. */
.cartao-resumo.compacto .titulo,
.cartao-resumo.compacto .campo,
.cartao-resumo.compacto .caixa-desconto .perc,
.cartao-resumo.compacto .caixa-desconto .vlr { white-space: nowrap; }

/* A contagem dentro do botão de atualizar: largura fixa para o número não
   empurrar o texto a cada segundo — de 30 para 9 o botão mudaria de
   tamanho, e um alvo de toque que se mexe é um alvo que se erra. */
.btn-barra-lista .relogio {
    display: inline-block; min-width: 1.9em; text-align: right; letter-spacing: 0;
}

/* O "s" vem do CSS para ficar colado no número: no texto do botão ele
   herdava o espaçamento entre letras e saía solto, "30 S". */
.btn-barra-lista .relogio::after { content: "s"; }

/* O percentual do desconto é informação secundária ao lado do valor: num
   corpo menor ele libera largura para o bloco de produtos sem que nada
   deixe de caber. */
.cartao-resumo.compacto .caixa-desconto .perc { font-size: .76rem; }

/* Forma de recebimento sem meio de pagamento definido sai na nota como 99,
   "outros". É cadastro pela metade, e na lista precisa saltar aos olhos de
   quem está conferindo — não é um traço a mais numa coluna. */
.tela-lista .itens .sem-meio-definido { color: var(--erro); font-weight: 700; }

/* Formas de recebimento: o tipo é frase inteira — "Cartão de crédito ou
   débito" —, e cortado em "Cartão de cr…" deixa de dizer o que é. A coluna
   tem a largura do texto mais longo, e a sobra fica com a descrição. A
   ordem é um número de dois dígitos e vem logo depois dela, porque é o par
   que a pessoa lê junto: o nome do botão e onde ele fica na fileira. */
.tela-lista .col-ordem-forma { width: 76px; }
.tela-lista .col-tipo-forma { width: 196px; }
.tela-lista .itens .col-tipo-forma { font-weight: 600; color: var(--cinza-texto); }