/*
 * Terminal de Lançamento — o que falta ao `pdv.css` para as telas do
 * garçom no monitor de toque de 15" (1024x768).
 *
 * A moldura, os painéis, o mapa, as teclas e os modais são os do PDV, e
 * vêm de lá sem cópia. Aqui só o que o PDV não tem: a lista pendente com a
 * lixeira, a faixa de mensagens do app do garçom, o teclado de 3 colunas e
 * o teclado de texto ancorado embaixo.
 *
 * Em 1024 de largura o `pdv.css` já está na faixa de 1024–1279: menu de
 * 84px e grade de 5 colunas. Sobram ~916px de conteúdo, 42/58 na venda:
 * ~380px para a lista e ~530px para os produtos.
 */

/* ------------------------------ teclados ------------------------------ */

/* Senha e número da mesa: 1–9, apagar, 0, ENTRAR — o teclado do telefone,
   que é o que a mão do garçom já conhece. O do PDV tem 4 colunas. */
.teclado.teclado-3 { grid-template-columns: repeat(3, 1fr); }
.teclado-3 .tecla-num { min-height: 62px; }
.teclado-3 .tecla-num.confirmar { font-size: 1rem; }
.teclado-3 .icone-apagar { width: 30px; height: 30px; }

.visor-senha {
    text-align: center; font-size: 1.6rem; letter-spacing: 8px; font-weight: 800;
}

/* O teclado da observação é o modal "Pesquisa de Produtos" do PDV, e o
   `pdv.css` já o desenha. Aqui só a tecla dupla do pareamento. */
.tecla-abc.dupla { grid-column: span 2; }

/* O ✕ do teclado é o dos modais, com outra classe: a `fechar-modal`
   fecharia também o modal do produto que está por baixo. */
.fechar-teclado {
    color: var(--branco); font-size: 1.25rem; font-weight: 700;
    min-width: 56px; min-height: 52px;
}

/* O pareamento pelo terminal: o cartão do login, largo o bastante para
   as dez colunas do teclado darem teclas do tamanho do dedo. */
.terminal-acesso .cartao-acesso { width: min(640px, 100%); }
.teclado-pareamento .tecla-abc { min-height: 54px; }
.terminal-acesso #codigo { font-size: 1.6rem; font-weight: 800; letter-spacing: 8px; }

/* ------------------------- alvos de toque -------------------------

   O terminal é um monitor de toque sem teclado nem mouse (dono do
   produto, 29/10/2026). Tudo o que se toca tem pelo menos 52px — o
   `--toque` do PDV —, inclusive o que no PDV ficou menor porque lá há
   mouse ao lado: o ✕ dos modais, o SAIR do cabeçalho, os botões da
   lista de alertas. */
.terminal .modal-cabecalho .fechar-modal { min-width: 56px; min-height: 52px; }
.terminal .cabecalho .sair button { min-width: 72px; height: 54px; }

/* O SAIR do terminal é vermelho, cheio (pedido do dono do produto,
   29/10/2026). No PDV ele é só contorno, porque lá o caixa é de uma pessoa
   só; aqui o monitor é de todos, e sair ao terminar é o que deixa o próximo
   garçom entrar com a senha dele. É o mesmo vermelho do SAIR DA MESA. */
.terminal .cabecalho .sair button {
    background: #D93025; border-color: #D93025;
}
.terminal .cabecalho .sair button:active { background: #B3261E; }
.terminal .lista-ocorrencias .btn,
.terminal .lista-ocorrencias button { min-height: 52px; }
.terminal .modal-produto textarea { cursor: pointer; }

/* -------------------------- mensagens (faixa) -------------------------- */

/* A faixa do `garcom.js`: some sozinha, toque fecha. Por cima do cabeçalho,
   centrada, para não empurrar nada da tela. */
/* No mesmo lugar dos avisos do PDV (`.toasts`), pedido do dono do produto
   (29/10/2026): canto superior direito, por cima do SAIR enquanto aparece
   — são dois segundos e meio, e sair não é o que o garçom procura logo
   depois de lançar. */
.faixa-terminal {
    position: fixed; top: 9px; right: 12px;
    z-index: 1000;
    max-width: min(440px, calc(100% - 32px));
    padding: 12px 22px; border-radius: var(--raio);
    font-size: .9rem; font-weight: 700; text-align: left; color: var(--branco);
    background: var(--erro);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.faixa-terminal[data-tipo="sucesso"] { background: var(--sucesso); }

/* ------------------------------- o mapa ------------------------------- */

/* Todo cartão é botão aqui (no PDV os ocupados são links). */
button.cartao-mesa { font: inherit; width: 100%; }

.acoes-mapa form { display: contents; }
.acoes-mapa .bloco-acao { width: 100%; }

.aviso-periodo {
    flex: 1; align-items: center; justify-content: center; gap: 10px;
    text-align: center; color: var(--verde-escuro);
}
.aviso-periodo strong { font-size: 1.4rem; color: var(--erro); }
.aviso-periodo p { font-size: .95rem; }

/* --------------------------- o lançamento --------------------------- */

.painel-pendentes .faixa-pedido .valor { font-size: 1.3rem; }

/* A coluna é estreita: a lixeira toma o lugar que a conta do PDV deixa
   para o valor, e a descrição quebra em vez de cortar — o garçom confere
   o nome inteiro antes de mandar. */
.painel-pendentes .itens .item, .painel-pendentes .itens-cabecalho .item { width: 36px; }
.painel-pendentes .itens .qtde, .painel-pendentes .itens-cabecalho .qtde { width: 52px; }
.painel-pendentes .itens .valor, .painel-pendentes .itens-cabecalho .valor { width: 82px; }
.painel-pendentes .itens .apagar, .painel-pendentes .itens-cabecalho .apagar { width: 64px; }

.painel-pendentes .itens td,
.painel-consumo .itens td { white-space: normal; vertical-align: middle; }
.painel-pendentes .itens .valor,
.painel-consumo .itens .valor { white-space: nowrap; }

.itens .obs {
    display: flex; align-items: center; gap: 4px;
    font-size: .7rem; color: var(--cinza-texto); line-height: 1.3;
}
.itens .obs img { width: 12px; height: 12px; opacity: .6; }

.itens td.apagar { padding: 2px 6px; text-align: center; }
.lixeira {
    width: 52px; height: 52px; border-radius: var(--raio);
    background: #FBEAEA; border: 1px solid #E8B4B4;
    display: inline-flex; align-items: center; justify-content: center;
}
.lixeira img { width: 20px; height: 20px; }
.lixeira:active { transform: scale(.95); }

.mensagem-pendentes { margin: var(--gap); flex: 0 0 auto; }

.acoes-terminal { grid-template-columns: 1fr 1fr; padding-top: var(--gap); flex: 0 0 auto; }
.acoes-terminal .form-enviar { display: flex; }
.acoes-terminal .form-enviar .btn { flex: 1; }

/* O painel do lançamento empilha busca, grupos e produtos, e só os
   produtos rolam. */
.tela-mesa .lancamento-terminal { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* A barra da venda em mesa do PDV: as larguras de lá (`mesa/venda`). */
.busca .btn-teclado { width: 104px; }
.busca .btn-pesquisar { width: 150px; }
.busca #codigo { cursor: pointer; }

/* Os resultados do modal "Pesquisa de Produtos" são as teclas da grade. */
.modal-pesquisa .resultados .tecla { min-height: 60px; }

/* O grupo selecionado, com a classe que o `garcom.js` troca. */
.tecla.grupo.ativo { background: var(--verde-escuro); color: var(--branco); }

/* O botão de produto é desenhado pelo `garcom.js` com a classe do celular;
   aqui ele vira a tecla do PDV. */
.grade.produtos .produto {
    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; align-items: center; justify-content: center;
    width: 100%;
}
.grade.produtos .produto:active { transform: scale(.97); }

.grade .vazio,
.grade .titulo-resultado {
    grid-column: 1 / -1;
    padding: 10px; font-size: .82rem; color: var(--cinza-texto); text-align: center;
}
.grade .titulo-resultado { padding: 2px 4px; text-align: left; font-weight: 700; color: var(--verde-escuro); }

/* ------------------------------ o consumo ------------------------------ */

.painel-consumo { flex: 1; }
.painel-consumo .itens .lancador, .painel-consumo .itens-cabecalho .lancador { width: 190px; }
.painel-consumo .itens .lancador small { display: block; color: var(--cinza-texto); }
.painel-consumo .acoes-terminal { grid-template-columns: 1fr; }

/* ------------------------------ inatividade ------------------------------ */

.contagem-inatividade { text-align: center; font-size: 2.6rem; font-weight: 800; color: var(--erro); }