/* style.css - Controller */

:root {
    --brasa: #12665e;
    --brasa-escuro: #0c4c46;
    --brasa-claro: #e8f4f1;
    --chapa: #172d30;
    --tinta: #203335;
    --tinta-suave: #53676a;
    --linha: #d4e0de;
    --borda: var(--linha);
    --fundo: #f3f6f5;
    --superficie: #ffffff;
    --azul: #1d64c8;
    --azul-escuro: #174fa0;
    --verde: #2b7a30;
    --verde-claro: #e7f4e8;
    --vermelho: #c62828;
    --vermelho-escuro: #a11f1f;
    --vermelho-claro: #fdecec;
    --roxo: #7b3fa0;
    --roxo-escuro: #62317f;
    --raio: 12px;
    --sombra: 0 1px 3px rgba(20, 20, 20, 0.08), 0 1px 2px rgba(20, 20, 20, 0.05);
    --sombra-alta: 0 8px 24px rgba(20, 20, 20, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: var(--fundo);
    color: var(--tinta);
    min-height: 100vh;
    line-height: 1.4;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* O atributo `hidden` precisa ganhar de qualquer `display` do próprio estilo.
   Sem isto, `.btn-voltar { display: inline-flex }` mantém o botão Voltar do
   caixa à vista mesmo com `hidden = true` — e o botão Admin continuava
   aparecendo para o garçom, que era justamente o que ele não deveria ver.
   Regras de componente como display ganham do atributo do navegador; só o
   `!important` inverte essa ordem, de uma vez, para o sistema inteiro. */
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid rgba(29, 100, 200, 0.55);
    outline-offset: 2px;
}

.app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
}

/* Login ocupa a tela inteira */
.app:has(#telaLogin.ativa) { max-width: none; padding: 0; }

/* ---------- Telas ---------- */
.tela { display: none; }
.tela.ativa { display: block; animation: entrar 0.25s ease; }

@keyframes entrar {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.tela-header,
.tela-header-admin {
    display: flex;
    align-items: center;
    /* `flex-wrap` é o que impede a tela de estourar de lado. Sem ele, o título
       e o botão da direita disputam a mesma linha e o da direita é empurrado
       para fora da tela: em 320px o "➕ Nova Mesa" ficava cortado na borda,
       e a pessoa via um botão cortado em vez de um botão. */
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.tela-header h2,
.tela-header-admin h2 {
    flex: 1;
    /* `min-width: 0` é o par obrigatório do `flex: 1`. Sem ele, o título não
       encolhe abaixo do tamanho do texto: o navegador usa o `min-width: auto`
       padrão, que é a largura da palavra mais comprida. O resultado é o mesmo
       do `flex-wrap` — o título empurra o botão para fora. */
    min-width: 0;
    margin: 0;
    font-size: 1.4rem;
    color: var(--tinta);
}

/* Com o título encolhendo, ele ganha espaço para a quebra de linha. */
.tela-header h2 { overflow-wrap: break-word; }

/* ---------- Login ---------- */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--chapa);
}

.login-card {
    background: var(--superficie);
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--sombra-alta);
    border-top: 6px solid var(--brasa);
}

.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo h1 { font-size: 1.8rem; line-height: 1.2; margin-bottom: 6px; text-wrap: balance; }
.login-logo p { color: var(--tinta-suave); font-size: 1.05rem; }

.login-info {
    text-align: center;
    margin-top: 20px;
    color: var(--tinta-suave);
}
.login-info strong { color: var(--brasa); }

/* Aviso de "não consegui falar com o servidor". A sessão continua valendo, então
   o tom é de espera e não de erro: o caixa só precisa apertar o botão quando o
   servidor voltar, sem digitar a senha de novo. */
.login-forma {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--brasa);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
  }
  .login-aviso-texto {
    margin: 0 0 10px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--tinta-suave);
  }

/* ---------- Header do app ---------- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 20px;
    background: var(--chapa);
    color: #fff;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.header h1 { font-size: 1.4rem; color: #fff; }

.header-left,
.header-right { display: flex; align-items: center; gap: 12px; }
.header-right { flex-wrap: wrap; justify-content: flex-end; }

.usuario-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
}
.usuario-info::before { content: '👤'; }

.status-impressora {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    color: #ddd;
}
.status-impressora .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.status-impressora.conectada { background: var(--verde-claro); color: var(--verde); }
.status-impressora.desconectada { background: var(--vermelho-claro); color: var(--vermelho); }

/* ---------- Botões ---------- */
.btn {
    flex: 1;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primario { background: var(--brasa); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--brasa-escuro); }
.btn-secundario { background: var(--azul); color: #fff; }
.btn-secundario:hover:not(:disabled) { background: var(--azul-escuro); }
.btn-cozinha,
.btn-sucesso { background: var(--verde); color: #fff; }
.btn-cozinha:hover:not(:disabled),
.btn-sucesso:hover:not(:disabled) { background: #1f5f24; }
.btn-entrega { background: var(--roxo); color: #fff; }
.btn-entrega:hover:not(:disabled) { background: var(--roxo-escuro); }
.btn-perigo { background: var(--vermelho); color: #fff; }
.btn-perigo:hover:not(:disabled) { background: var(--vermelho-escuro); }
.btn-cancelar { background: #e3e5e9; color: #3d434c; }
.btn-cancelar:hover:not(:disabled) { background: #d3d6dc; }

/* Botão compacto (cabeçalhos) */
.btn-sm {
    flex: none;
    min-width: 0;
    width: auto;
    padding: 9px 16px;
    font-size: 0.9rem;
}

/* Botões de ícone dentro das tabelas */
.btn-tabela {
    flex: none;
    min-width: 0;
    width: auto;
    padding: 6px 10px;
    font-size: 0.85rem;
    margin-right: 4px;
}

.btn-block {
    width: 100%;
    margin-top: 8px;
    padding: 15px;
    font-size: 1.05rem;
}

.btn-voltar {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--superficie);
    border: 2px solid var(--linha);
    border-radius: 10px;
    font-weight: 600;
    color: var(--tinta-suave);
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.btn-voltar:hover { border-color: var(--brasa); color: var(--brasa); }

.btn-fechar {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--tinta-suave);
    /* 44px é a menor área de toque que o dedo acerta de primeira, e o guideline
       é claro nisso. Com o padding antigo (6px 10px) o botão media 38x34 —
       pequeno demais no celular, num botão que a pessoa usa para FECHAR a tela.
       A falha aqui é especialmente cara: bater fora não fecha nada, e a pessoa
       fica presa no modal sem entender por quê. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 8px;
    /* O cursor de mão é o padrão de botão; sem isto o cursor de texto (I-beam)
       aparece sobre o X, que sugere que ali se digita alguma coisa. */
    cursor: pointer;
    /* Sem isto, tocar o X no celular marca o texto ao redor da janela como se
       fosse uma seleção — e o dedo sai da tela deixando a seleção para trás. */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.btn-fechar:hover { background: var(--fundo); color: var(--tinta); }
/* Sem isto, tocar o X no celular marca o texto ao redor da janela como se fosse
   uma seleção — e o dedo sai da tela deixando a seleção para trás. */
@media (hover: hover) {
    .btn-fechar:hover { background: var(--fundo); color: var(--tinta); }
}
.btn-fechar:active { background: var(--fundo); color: var(--tinta); }

/* ---------- Formulários ---------- */
.form-container {
    background: var(--superficie);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--sombra);
    max-width: 520px;
}

.form-grupo { margin-bottom: 18px; }

.form-grupo label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--tinta);
}

.form-grupo input:not([type="checkbox"]),
.form-grupo textarea,
.form-grupo select,
.modal-conteudo textarea {
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid var(--linha);
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-grupo textarea,
.modal-conteudo textarea { resize: vertical; min-height: 80px; }
.modal-conteudo textarea { margin-bottom: 16px; }

.form-grupo input:focus,
.form-grupo textarea:focus,
.form-grupo select:focus,
.modal-conteudo textarea:focus {
    outline: none;
    border-color: var(--brasa);
    box-shadow: 0 0 0 3px rgba(194, 87, 10, 0.18);
}

::placeholder { color: #8b929c; }

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-check input { width: 20px; height: 20px; accent-color: var(--brasa); }
.form-check label { margin: 0; font-weight: 500; }

/* Campo "Mostrar senha": injetado em cada input[type="password"] por
   mostrar-senha.js. O seletor leva `.form-grupo` porque a regra geral
   `.form-grupo label` (bloco e negrito) venceria o nome da classe sozinho.
   As medidas acompanham o `.form-check` (mesmo tamanho de caixa e de texto) —
   os dois checkboxes precisam parecer o mesmo controle. */
.form-grupo .mostrar-senha {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--tinta);
    cursor: pointer;
    user-select: none;
}
.form-grupo .mostrar-senha input {
    width: 20px;
    height: 20px;
    accent-color: var(--brasa);
    cursor: pointer;
}

/* ---------- Tela inicial ---------- */
.tipos-atendimento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.tipo-card {
    background: var(--superficie);
    border: 2px solid var(--linha);
    border-radius: 16px;
    padding: 32px 16px;
    text-align: center;
    box-shadow: var(--sombra);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.tipo-card:hover { border-color: var(--brasa); transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tipo-icone { font-size: 3rem; margin-bottom: 10px; }
.tipo-nome { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.tipo-desc { font-size: 0.92rem; color: var(--tinta-suave); }

/* ---------- Mesas ---------- */
.mesas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

/* A ALTURA É FIXA, e é o que faz as fileiras terem a mesma altura.
 *
 * Medido com 14 mesas na tela:
 *
 *     fileira 1 (mesas 1 a 6)      149 px   <- uma delas com nome de cliente
 *     fileira 2 (mesas 7 a 11, 95) 120 px
 *     fileira 3 (mesas 96 e 97)    120 px
 *
 * A diferença de 29 px é a linha do nome. `pedidos.js` escreve o nome do
 * cliente SÓ quando a mesa está ocupada, e a grade estica todos os cartões
 * de uma fileira à altura do mais alto. Uma mesa ocupada, e a fileira inteira
 * cresce.
 *
 * Altura fixa resolve sem buraco: o cartão tem a mesma altura com ou sem nome,
 * e o conteúdo fica centralizado. A mesa livre não ganha um vão — ela tem o
 * número no meio do cartão.
 *
 * E centralizar tem uma vantagem a mais: o número, que é o que a pessoa
 * procura, fica sempre na mesma altura. Com cartões de alturas diferentes, os
 * números ficam em linhas diferentes e o olho não acha a mesa que procura.
 *
 * 149 px é a altura que a mesa COM nome já mede. Serve como referência para
 * não encolher a que hoje cabe. */
.mesa-card {
    background: var(--superficie);
    border-radius: 14px;
    /* O padding vertical fica menor porque a caixa tem altura fixa: o que
       antes era respiro do texto agora é respiro dentro da caixa. */
    padding: 16px 12px;
    text-align: center;
    box-shadow: var(--sombra);
    border: 2px solid var(--linha);
    border-top-width: 6px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;

    /* A altura fixa, e a coluna para o conteúdo ficar no meio. */
    height: 149px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Atalho de fechar a conta dentro do cartão da mesa ocupada. Fica no canto
 * para não mexer na altura fixa da grade. */
.mesa-fechar-conta {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 7px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--tinta-suave);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.mesa-fechar-conta:hover,
.mesa-fechar-conta:focus-visible {
    background: var(--brasa);
    border-color: var(--brasa);
    color: #fff;
}

/* O nome pode ocupar até DUAS linhas. Mais que isso é um nome que não cabe num
 * cartão de mesa, e ele é cortado em vez de estourar a caixa — quebrar a
 * fileira inteira por causa de um nome longo é pior do que cortar o nome, e
 * nome de cliente aqui é identificação, não dado que se leia em tela pequena. */
.mesa-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.mesa-numero { font-size: 2.4rem; font-weight: 700; line-height: 1.1; margin-bottom: 6px; }
.mesa-nome {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tinta-suave);
    margin: -2px 0 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mesa-status { font-size: 0.9rem; font-weight: 600; text-transform: capitalize; }

.mesa-card.livre { border-color: var(--verde); }
.mesa-card.livre .mesa-status { color: var(--verde); }
.mesa-card.livre:hover { background: var(--verde-claro); }
.mesa-card.ocupada { border-color: var(--brasa); }
.mesa-card.ocupada .mesa-status { color: var(--brasa); }
.mesa-card.ocupada:hover { background: var(--brasa-claro); }
.mesa-card.fechada { border-color: var(--vermelho); opacity: 0.55; cursor: not-allowed; }
.mesa-card.fechada .mesa-status { color: var(--vermelho); }
.mesa-card.fechada:hover { transform: none; box-shadow: var(--sombra); }

/* Modo remover ligado: os cartões ficam todos vermelhos para não abrir a
   mesa errada por engano — clicar agora pergunta se quer apagar. */
.mesas-grid.modo-remover .mesa-card { border-color: var(--vermelho); }
.mesas-grid.modo-remover .mesa-card:hover { background: #fdecea; }
.mesas-grid.modo-remover .mesa-status { color: var(--vermelho); }

/* Botão do modo remover, quando ligado. */
#btnModoRemover.ativo { background: var(--vermelho); color: #fff; }
#btnModoRemover.ativo:hover { background: var(--vermelho-escuro); }

/* ---------- Cardápio ---------- */
.cardapio-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.pedido-info { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.pedido-info h2 { margin: 0; font-size: 1.3rem; }
#mesaAtualNumero { color: var(--brasa); }
.cliente-info { font-size: 0.85rem; color: var(--tinta-suave); line-height: 1.5; }
.cliente-info strong { color: var(--tinta); }

/* É um <button>: clicar abre a conta. Precisa da aparência de painel que já
   tinha, então o estilo de botão do navegador é todo desligado. */
.pedido-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 22px;
    padding: 10px 16px;
    background: var(--fundo);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.pedido-resumo:hover { border-color: var(--brasa); }
.pedido-resumo strong { font-size: 1.1rem; }
.pedido-resumo-ver {
    color: var(--brasa);
    font-size: 0.88rem;
    font-weight: 600;
}
#taxaEntregaInfo { color: var(--brasa); }

/* Pesquisa */
.pesquisa-container { margin: 0 0 14px; }
.pesquisa-input-wrapper { position: relative; display: flex; align-items: center; }
.pesquisa-icone { position: absolute; left: 14px; pointer-events: none; z-index: 1; }

#inputPesquisa {
    width: 100%;
    padding: 12px 44px;
    background: #fff;
    border: 2px solid var(--linha);
    border-radius: 10px;
    font-size: 1rem;
}
#inputPesquisa:focus { outline: none; border-color: var(--brasa); box-shadow: 0 0 0 3px rgba(194, 87, 10, 0.18); }

.btn-limpar-pesquisa {
    position: absolute;
    right: 8px;
    z-index: 2;
    background: none;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--tinta-suave);
}
.btn-limpar-pesquisa:hover { color: var(--vermelho); background: var(--vermelho-claro); }

.pesquisa-resultado { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--tinta-suave); text-align: right; }
.pesquisa-resultado.ativos { color: var(--brasa); font-weight: 600; }
.pesquisa-resultado:empty { display: none; }

/* Categorias */
.categorias-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 6px;
    overflow-x: auto;
}

.categoria-tab,
.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--superficie);
    border: 2px solid var(--linha);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tinta);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.categoria-tab:hover,
.admin-tab:hover { border-color: var(--brasa); color: var(--brasa); }
.categoria-tab.ativa,
.admin-tab.ativa { background: var(--brasa); border-color: var(--brasa); color: #fff; }

.categoria-vazia-busca,
.produto-card.oculto-busca { display: none !important; }

/* Produtos */
.produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.produto-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    min-height: 96px;
    padding: 14px;
    background: var(--superficie);
    border: 2px solid transparent;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.produto-card:hover { border-color: var(--brasa); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.produto-nome { font-weight: 600; font-size: 0.97rem; }
.produto-preco { font-size: 1.2rem; font-weight: 700; color: var(--brasa); }

.produto-card.produto-adicionado {
    animation: adicionado 0.5s ease;
    border-color: var(--verde);
    background: var(--verde-claro);
}
@keyframes adicionado {
    50% { transform: scale(1.04); }
}

/* Ações do pedido */
.acoes-pedido {
    margin-top: 20px;
    padding: 16px;
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.acoes-pedido > div { flex: 1; flex-wrap: wrap; gap: 10px; }

/* ---------- Modais ---------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 20, 20, 0.55);
}
.modal.ativo { display: flex; }

.modal-conteudo {
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 24px;
    background: var(--superficie);
    border-radius: 16px;
    box-shadow: var(--sombra-alta);
    animation: entrar 0.2s ease;
}
.modal-conteudo h3 { margin-bottom: 14px; font-size: 1.2rem; }
.modal-texto { margin-bottom: 16px; color: var(--tinta-suave); font-size: 0.95rem; }
#modalNovaMesa .modal-conteudo { max-width: 360px; }
#modalUsuario .modal-conteudo { max-width: 460px; }

.modal-conteudo-lg {
    max-width: 640px;
    display: flex;
    flex-direction: column;
}
#modalPermissoes .modal-conteudo { max-width: 720px; }

.modal-botoes { display: flex; gap: 12px; margin-top: 4px; }
.modal-botoes .btn { flex: 1; }

.quantidade-controle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px 0;
}
.quantidade-controle button {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 12px;
    background: var(--brasa);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
}
.quantidade-controle button:hover { background: var(--brasa-escuro); }
.quantidade-controle input {
    width: 84px;
    height: 52px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    background: #fff;
    border: 2px solid var(--linha);
    border-radius: 12px;
}
.quantidade-controle input:focus { outline: none; border-color: var(--brasa); }

/* ---------- PAGAMENTO DIVIDIDO ---------- */
.modal-conteudo-pag { max-width: 520px; }

.pag-atalhos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.pag-atalhos-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.pag-atalhos-titulo,
.pag-atalhos-sep {
    font-size: 0.82rem;
    color: var(--tinta-suave);
    font-weight: 600;
}
.pag-atalhos-sep { margin-left: 4px; }
.pag-atalho {
    padding: 6px 11px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 999px;
    color: var(--tinta);
    transition: background 0.15s, border-color 0.15s;
}
.pag-atalho:hover { background: var(--brasa-claro); border-color: var(--brasa); }

.pag-lista {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}
.pag-vazio {
    padding: 16px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--tinta-suave);
}
.pag-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--linha);
}
.pag-item:last-child { border-bottom: none; }
.pag-item-forma,
.pag-item-valor {
    padding: 7px 9px;
    /* 16px é o piso do iOS: abaixo disso o Safari dá zoom no campo ao focar e
       a tela anda junto, o que faz o garçom perder a linha de pagamento. */
    font-size: 1rem;
    font-family: inherit;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 8px;
}
.pag-item-forma { flex: 1.2; min-width: 0; font-weight: 600; }
.pag-item-valor { flex: 0.85; min-width: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pag-item-forma:focus,
.pag-item-valor:focus { outline: none; border-color: var(--brasa); }
.pag-item-rm {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--linha);
    border-radius: 6px;
    color: var(--tinta-suave);
    font-size: 0.75rem;
}
.pag-aplicar-titulo {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tinta-suave);
    margin-left: 4px;
}
.pag-item-rm:hover { background: var(--vermelho-claro); border-color: var(--vermelho); color: var(--vermelho); }

.pag-add {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.pag-select,
.pag-valor {
    padding: 10px 11px;
    font-size: 1rem; /* mesmo motivo do .pag-item-valor: focar não pode dar zoom */
    font-family: inherit;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 9px;
}
.pag-select { flex: 1.1; min-width: 0; }
.pag-valor { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.pag-select:focus,
.pag-valor:focus { outline: none; border-color: var(--brasa); }
.pag-add-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 1.15rem; line-height: 1; }

.pag-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    margin-bottom: 14px;
    font-size: 0.92rem;
    background: var(--fundo);
    border-radius: 9px;
}
.pag-resumo strong { font-variant-numeric: tabular-nums; }

/* ---------- Conferência de dinheiro ----------
   O `.pag-resumo` é uma faixa horizontal: serve para o resumo do pagamento,
   que são poucas informações e cabem em uma linha. A conferência do caixa é
   outra coisa — é uma lista para bater o olho linha a linha e conferir
   dinheiro, e por isso cada item ocupa uma linha inteira: rótulo à esquerda,
   valor à direita, com folga entre os dois.

   Sem isso os dois textos ficavam colados ("VendasR$ 31,00"), que é o jeito
   mais fácil de errar uma conta e a pior hora para errar. */
.conferencia {
    padding: 4px 14px;
    margin-bottom: 14px;
    font-size: 0.92rem;
    background: var(--fundo);
    border-radius: 9px;
}
.conferencia-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.conferencia-linha:last-child { border-bottom: none; }
.conferencia-linha > span { color: var(--tinta-suave); }
.conferencia-linha > strong {
    flex: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.conferencia-linha.destaque {
    margin: 2px -14px 4px;
    padding: 10px 14px;
    background: var(--superficie);
    border-bottom: none;
    border-top: 1px solid var(--linha);
    font-weight: 700;
}
.conferencia-linha.destaque > strong { font-size: 1.15rem; color: var(--brasa); }

.pag-restante { color: var(--vermelho); font-weight: 600; }
.pag-troco { color: var(--azul); font-weight: 600; }
.pag-ok { color: var(--verde); font-weight: 700; }
.pag-limpar {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--tinta-suave);
    font-size: 0.82rem;
    text-decoration: underline;
}
.pag-limpar:hover { color: var(--vermelho); }
#btnConfirmarPagamento:disabled { opacity: 0.45; cursor: not-allowed; }

/* Pré-visualização */
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--linha);
}
.preview-header h3 { margin: 0; }

.preview-conteudo {
    flex: 1;
    max-height: 55vh;
    overflow-y: auto;
    margin-bottom: 16px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}
.preview-linha { border-top: 1px dashed #999; margin: 8px 0; }
.preview-centro { text-align: center; }
.preview-direita { text-align: right; }
.preview-titulo { font-size: 1.1rem; font-weight: 700; margin: 8px 0; }
.preview-item { display: flex; justify-content: space-between; margin: 4px 0; }
.preview-item-nome { flex: 1; }
.preview-item-qtd { margin: 0 8px; font-weight: 700; }
.preview-item-valor { font-weight: 700; white-space: nowrap; }
.preview-obs { margin-left: 16px; font-size: 0.8rem; color: var(--tinta-suave); }

/* ---------- Ver a conta ----------
   O que já foi consumido na mesa ou no pedido. A lista rola sozinha porque
   uma mesa cheia passa fácil de dez itens, e o rodapé com o total fica fora
   da área que rola: o número que interessa é o total, e ele não pode sumir
   junto com a rolagem. */
.conta-lista {
    max-height: 46vh;
    overflow-y: auto;
    margin-bottom: 14px;
}
  .conta-item {
    display: flex;
    /* `center`, e não `baseline`.
     *
     * Com `baseline`, os botões alinham pela LINHA DE BASE do texto, e um ✕ de 40px
     * fica mais alto que um − de 32px na mesma linha. `baseline` fazia sentido
     * quando aqui só havia texto — nome e total. Com botões, o que se quer é o
     * CENTRO batendo. */
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--linha);
  }
  .conta-item:last-child { border-bottom: none; }
  .conta-item-qtd {
    flex: none;
    min-width: 34px;
    font-weight: 700;
    color: var(--brasa);
  }
  .conta-item-nome {
    flex: 1;
    /* Par obrigatório do flex: 1. Sem isto, o min-width:auto padrão impede o
       nome de encolher abaixo da palavra mais comprida, e um produto chamado
       "X-Bacon com queijo e bacon extra" empurra o valor e o ✕ para fora da
       linha. */
    min-width: 0;
    /* E quebra a palavra em vez de alargar: nome de produto em português não
       tem espaço para quebrar ("PASTEL-DE-FRANGO-ESPECIAL") e passaria do
       limite mesmo com o min-width resolvido. */
    overflow-wrap: break-word;
  }
  .conta-item-unit {
    flex: none;
    font-size: 0.82rem;
    color: var(--tinta-suave);
  }
  .conta-item-valor {
    flex: none;
    min-width: 84px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  /* A observação é o pedido especial — "sem cebola", "bem passado". É o que
   * o balcão precisa ler, então nunca some. Mas fica numa LINHA só, com
   * reticências: uma observação de três linhas dobraria a altura da linha da
   * conta, e a lista de 15 itens passaria da tela.
   *
   * Cortar o fim da frase ainda diz o essencial — "sem cebola, com o…" — e a
   * pessoa sabe que o resto precisa ser perguntado. Uma etiqueta vazia não
   * diria nada. */
  .conta-item-obs {
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--tinta-suave);
    max-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .conta-vazia {
    padding: 26px 10px;
    text-align: center;
    color: var(--tinta-suave);
  }
  .conta-rodape {
    padding: 14px 2px 4px;
    border-top: 2px solid var(--linha);
  }
  .conta-total-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    color: var(--tinta-suave);
  }
  .conta-total-linha strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
  .conta-total-grande {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--linha);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tinta);
  }
  .conta-total-grande strong { font-size: 1.25rem; color: var(--brasa); }

  /* ---------- Tirar item da conta ----------
     O ✕ fica na própria linha e é alvo grande de propósito: no balcão o toque
     vem com o dedo, não com o cursor, e o item some de verdade. 40px é o
     mínimo confortável para acertar sem olhar. */

/* ---------- Mais e menos na linha da conta ----------
 *
 * O `−` e o `+` usam o mesmo desenho do modal de quantidade, que é o mesmo
 * gesto: mudar a quantidade de um item. Quem aprendeu no modal usa aqui sem
 * olhar.
 *
 * São 32px, e não os 52px do modal: a linha da conta tem nome, preço e total,
 * e um botão de 52px deixa a linha alta demais — com 8 itens a conta passa da
 * tela. 32px ainda é alvo de toque confortável acima do mínimo de 24px.
 *
 * E o `−` é MAIOR que o `+`, de propósito: ninguém erra querendo mais, e o
 * `−` é o botão que alguém aperta sem pensar. Dois pesos para duas
 * consequências. */
.conta-item-qtd-controle {
    flex: none;
    display: flex;
    align-items: center;
    gap: 3px;
}

.conta-item-menos,
.conta-item-mais {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 9px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    color: var(--tinta);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.conta-item-menos {
    width: 32px;
    font-size: 1.25rem;
    font-weight: 700;
}
.conta-item-mais {
    width: 26px;
    color: var(--tinta-suave);
}
.conta-item-menos:hover,
.conta-item-mais:hover {
    background: var(--brasa-claro);
    border-color: var(--brasa);
    color: var(--brasa-escuro);
}
.conta-item-mais:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.conta-item-mais:disabled:hover {
    background: var(--fundo);
    border-color: var(--linha);
    color: var(--tinta);
}

/* O numero da quantidade fica entre o `−` e o `+`, e menor que antes: agora ele
 * é um rótulo do controle, e não o número principal da linha. O que a pessoa
 * procura é o nome e o total. */
.conta-item-qtd-controle .conta-item-qtd {
    min-width: 30px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tinta-suave);
    margin: 0 1px;
}
  .conta-dica {
    margin: -6px 0 10px;
    font-size: 0.82rem;
    color: var(--tinta-suave);
    text-align: center;
  }
  .conta-aviso {
    margin: 10px 0 0;
    padding: 8px 11px;
    font-size: 0.82rem;
    color: var(--tinta-suave);
    background: var(--fundo);
    border-radius: 8px;
  }
  /* Desconto é dinheiro que SAI da conta: verde lê melhor que a cor do total,
     que significaria o contrário. */
  .conta-total-desconto { color: var(--verde); }
  .conta-total-desconto strong { color: var(--verde); }

/* ---------- Desconto na hora de pagar ----------
   A senha é pedida no formulário e conferida no servidor: esconder o botão
   não esconderia o desconto, e o garçom precisa poder chamar o dono ali. */
#modalDesconto { z-index: 1100; }  /* na frente do modal de pagamento */
#modalDesconto .modal-conteudo { max-width: 400px; }

.desconto-tipos { display: flex; gap: 8px; }
.desconto-tipo {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 9px;
    cursor: pointer;
}
.desconto-tipo input { accent-color: var(--brasa); }
.desconto-tipo input:checked + span { color: var(--brasa); }
.desconto-dica {
    display: block;
    margin-top: 6px;
    min-height: 1.1em;
    font-size: 0.82rem;
    color: var(--tinta-suave);
}

.pag-desconto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--fundo);
    border-radius: 10px;
}
.btn-desconto {
    flex: none;
    padding: 9px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--superficie);
    border: 1px solid var(--brasa);
    color: var(--brasa);
}
.btn-desconto:hover { background: var(--brasa-claro); }
.pag-desconto-info {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--verde);
}

/* ---------- Medidor de senha ----------
   Quatro segmentos, e não uma barra contínua: o que o usuário precisa entender
   é o NÍVEL da senha, e o nível é uma de quatro coisas. Uma barra cheia
   sugeriria uma medição fina que não existe. */
.forca-senha { margin-top: 8px; }

.forca-barra {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 5px;
}

/* Cada segmento é desenhado em todos os níveis e apagado conforme a cor — assim
   a barra não "pula" de tamanho quando muda o nível. */
.forca-nivel {
    height: 6px;
    border-radius: 3px;
    background: var(--linha);
    transition: background 0.2s;
}

.forca-texto {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

.forca-senha[data-nivel="1"] .forca-1 { background: var(--vermelho); }
.forca-senha[data-nivel="1"] .forca-texto { color: var(--vermelho); }

.forca-senha[data-nivel="2"] .forca-1,
.forca-senha[data-nivel="2"] .forca-2 { background: #e0a800; }
.forca-senha[data-nivel="2"] .forca-texto { color: #a67c00; }

.forca-senha[data-nivel="3"] .forca-1,
.forca-senha[data-nivel="3"] .forca-2,
.forca-senha[data-nivel="3"] .forca-3 { background: #4a90d9; }
.forca-senha[data-nivel="3"] .forca-texto { color: #1d64c8; }

.forca-senha[data-nivel="4"] .forca-nivel { background: var(--verde); }
.forca-senha[data-nivel="4"] .forca-texto { color: var(--verde); }

/* ---------- Aviso de senha de fábrica no cabeçalho ----------
   Um lembrete, não um modal. O dono pode adiar a troca, e insistir com algo que
   prende a tela faz ele começar a clicar em "fechar" sem ler — aí o aviso deixa
   de avisar. Aqui ele fica quieto no canto, some sozinho quando a senha muda, e
   aparece de novo se alguém voltar a usar a de fábrica. */
.aviso-senha {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #8a5a00;
    background: #fff3d6;
    border: 1px solid #e0a800;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.aviso-senha:hover { background: #ffe9b8; }
.aviso-senha[hidden] { display: none !important; }

/* ---------- Toasts ---------- */
.toast-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    position: relative;
    min-width: 280px;
    max-width: 360px;
    padding: 14px 22px;
    border-radius: 10px;
    color: #fff;
    font-weight: 500;
    box-shadow: var(--sombra-alta);
    animation: toastEntra 0.25s ease;
}
.toast::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    animation: toastBarra 3s linear forwards;
}
.toast.sucesso { background: var(--verde); }
.toast.erro { background: var(--vermelho); }
.toast.info { background: var(--azul); }
.toast.aviso { background: var(--brasa); }
.toast.saindo { animation: toastSai 0.25s ease forwards; }

@keyframes toastEntra { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes toastSai { to { opacity: 0; transform: translateX(60px); } }
@keyframes toastBarra { from { width: 100%; } to { width: 0; } }

/* ---------- Admin ---------- */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.admin-conteudo { display: none; }
.admin-conteudo.ativa { display: block; animation: entrar 0.25s ease; }

.admin-header-acao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.admin-header-acao h3 { margin: 0; }
.admin-header-acao .btn { flex: none; }

    /* ---------- CABECALHO DA ABA PRODUTOS ----------
       Três linhas: cadastro, utilitários e exportar.

       Cada div é uma linha inteira com `display: flex`, em vez de `order` no
       flexbox do pai. Assim cada grupo tem a própria regra — no celular os
       botões de cadastro viram 100% de largura, e os utilitários não. */
    .admin-header-produtos {
        row-gap: 10px;
    }

    .admin-acao-linha {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 0 100%;
        width: 100%;
    }

    /* O título ocupa a linha inteira, e a primeira linha de botões fica
       embaixo dele. Sem `flex-basis: 100%`, o flexbox colocaria o primeiro
       botão ao lado do título e as linhas seguintes não se alinhariam. */
    .admin-header-produtos h3 {
        flex: 1 0 100%;
    }

    .admin-acao-cadastro .btn {
        /* Os três de cadastro são o trabalho principal. Entram em ordem de
           "do mais simples para o mais completo": quem só quer cadastrar um
           lanche clica no primeiro, e quem emite nota desce até o terceiro. */
        flex: 1 1 auto;
    }

    /* No celular, três botões de 190px não cabem em 320px nem em duas linhas
       sem ficar uma tira de texto. Cada um ocupa a largura toda, empilhado —
       e o `gap` de 10px evita que pareçam colados. */
    @media (max-width: 720px) {
        .admin-acao-linha {
            flex-wrap: wrap;
        }




        .admin-acao-cadastro .btn {
            flex: 1 0 100%;
            min-height: 44px;
        }

        .admin-acao-util .btn,
        .admin-acao-export .btn {
            flex: 1 1 auto;
            min-height: 44px;
        }
    }


.filtros-relatorio {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 22px;
    padding: 18px 20px;
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.filtros-relatorio .form-grupo { flex: 1; min-width: 160px; margin: 0; }
.filtros-relatorio input { padding: 10px 12px; font-size: 0.95rem; }
.filtros-relatorio .btn-filtrar { flex: none; padding: 11px 22px; }

.resumo-cards {
    display: grid;
    /* 235px, e a conta é esta:
    
       O texto de dinheiro mais largo que este sistema mostra na prática é
       "R$ 1.093.550,50" — 14 caracteres a 24px negrito, medidos em 198px. Com
       os 2 × 18px de padding do cartão, o cartão precisa de 234px, mais a
       borda de 5px à esquerda: 239px. Arredondado para cima, 240px.
    
       Com `minmax(150px, 1fr)`, o `auto-fit` fazia SEIS colunas de 165px
       dentro dos 1060px úteis (o `.app` é limitado a 1100px) — e o texto,
       transbordando, era cortado para 160px. O sintoma só aparece no
       computador: no celular o `@media` de 400px põe uma coluna, e um cartão
       largo demais cabe sempre.
    
       `min(100%, 240px)` é o que segura as telas estreitas sem precisar de
       outro `@media`: abaixo de 240px de largura disponível, a coluna vira
       "a largura inteira" em vez de estourar. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.resumo-card {
    padding: 18px;
    background: var(--superficie);
    border-radius: var(--raio);
    border-left: 5px solid var(--brasa);
    box-shadow: var(--sombra);
}
.resumo-card.ticket { border-left-color: var(--azul); }
.resumo-card.dinheiro { border-left-color: var(--verde); }
.resumo-card.cartao { border-left-color: var(--roxo); }
.resumo-card.pix { border-left-color: #4b6472; }
.resumo-card.lucro { border-left-color: var(--verde); }
.resumo-card.prejuizo { border-left-color: var(--vermelho); }
.resumo-card-label { margin-bottom: 6px; font-size: 0.85rem; color: var(--tinta-suave); }
/* A fonte do dinheiro encolhe um pouco quando a janela é menor.
   `clamp()` com `vw` é o jeito de a fonte do VALOR acompanhar o espaço real
   que ele tem, porque o cartão cresce com a grade e não com a fonte fixa.

   O piso de 1.15rem (18,4px) é o limite de leitura: abaixo disso, um valor
   em dinheiro deixa de se distinguir de relance, e quem olha o caixa para
   saber se o dia está bom precisa ler em um olhar. */
.resumo-card-valor {
    font-size: clamp(1.15rem, 0.85rem + 0.75vw, 1.5rem);
    font-weight: 700;
    /* A quebra é proibida de propósito: "R$ 2.035." numa linha e "315,00" na
       seguinte parece que são dois números, e o dono lê o primeiro. */
    white-space: nowrap;
}
.resumo-card-extra { margin-top: 4px; font-size: 0.78rem; color: var(--tinta-suave); }

.relatorio-secao {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.relatorio-secao h3 { margin: 0 0 14px; font-size: 1.1rem; }

.tabela-container { overflow-x: auto; }
.tabela-relatorio { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabela-relatorio th,
.tabela-relatorio td { padding: 11px 14px; text-align: left; border-bottom: 1px solid #ebedf0; }
.tabela-relatorio th { background: #f7f8f9; font-weight: 600; color: #3d434c; white-space: nowrap; }
.tabela-relatorio tbody tr:hover td { background: #fafbfc; }
.tabela-relatorio td.valor { text-align: right; font-weight: 600; white-space: nowrap; }
.tabela-relatorio td.center { text-align: center; }
.tabela-relatorio td:last-child .btn-tabela:last-child { margin-right: 0; }

/* Cozinha no relatório: hora de pico destacada e subtítulo das saídas */
.tabela-relatorio tr.linha-pico td {
    background: #fff6e0;
    font-weight: 700;
    color: #8a5a00;
}
.relatorio-subtitulo { margin: 18px 0 8px; font-size: 1rem; color: #3d434c; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge-entregue { background: var(--verde-claro); color: #1f6024; }
.badge-pago { background: #e4eefb; color: #1450a3; }
.badge-gerente { background: #fdf3d7; color: #7a5b00; }
.badge-aberto { background: var(--brasa-claro); color: #8a3d05; }
.badge-cancelado { background: var(--vermelho-claro); color: #a11f1f; }

/* Backup */
.backup-card {
    max-width: 680px;
    padding: 28px;
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.backup-card h3 { margin: 0 0 20px; }
.backup-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.info-item { padding: 14px; background: var(--fundo); border-radius: 8px; }
.info-label { display: block; margin-bottom: 4px; font-size: 0.85rem; color: var(--tinta-suave); }
.info-valor { font-size: 1.1rem; font-weight: 600; }
.backup-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* Modo de operação: mesa, comanda ou os dois */
.modo-opcoes { display: grid; gap: 12px; }
.modo-opcao {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 16px;
    background: var(--fundo);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}
.modo-opcao:has(input:checked) {
    border-color: var(--primario);
    background: var(--superficie);
}
.modo-opcao input { grid-row: 1 / span 2; width: 20px; height: 20px; }
.modo-titulo { font-weight: 600; }
.modo-desc { font-size: 0.88rem; color: var(--tinta-suave); }

/* As duas linhas de botões são irmãs dentro do cartão, e sem margem
   nenhuma delas o topo da de baixo encosta na borda da de cima. */
.backup-acoes + .backup-acoes { margin-top: 16px; }

/* Botão com `white-space: nowrap` não pode encolher. `flex: 1` é
   `flex: 1 1 0%` — base ZERO, e ele encolhe. O botão fica menor que o
   próprio texto e o texto é cortado: "Gravar nesta past".

   `min-width: max-content` é a parte que resolve — o botão para de ser
   esmagado — e o `flex-grow` continua fazendo os três preenchendo a
   linha quando há espaço. Medido: com 464px de conteúdo e três botões de
    /* Sem `min-width: max-content` aqui. Ele protege o texto e, ao mesmo
       tempo, estoura a coluna: o botão de 200px dentro de uma coluna de
       173px come o vão de 12px e fica por cima do vizinho. Medido: vãos de
       -15px e -7px.

       O texto está protegido pelo LADO da coluna agora — `minmax(200px, 1fr)`,
       que é a largura que o maior rótulo realmente precisa. Uma proteção só. */
    /* `width: 100%` só na GRADE. Na linha da impressora, que é flex, o
       mesmo valor vira "100% do contêiner" — 624px — e o botão quebra para
       baixo em vez de ficar do tamanho dele. Medido: alturas 22/22/48 numa
       linha que deveria ser 48/48/48. */
    .backup-acoes:not(.backup-acoes-impressora) .btn { width: 100%; }
   `display: block` porque, no cartão de informação, o rótulo fica em
   cima do valor. Numa linha de botões, um bloco ocupa a linha inteira e
   empurra o botão para baixo, flutuando por cima do texto. */
.backup-rotulo {
    flex: none;
    color: var(--tinta-suave);
    font-size: 0.9rem;
    margin-right: 2px;
}
.backup-valor-impressora {
    flex: 1 1 auto;
    font-weight: 600;
}

/* A linha da impressora NÃO é uma grade de botões: "Impressora:" e o valor
   são um par de texto, e o botão é uma ação. Três colunas de largura igual
   tratariam as três coisas como botões. Aqui são duas colunas — o texto
   ocupa a primeira e cresce, o botão fica do tamanho dele. */
.backup-acoes-impressora {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
/* ---------- Lista de backups guardados ----------
   A lista existe para uma coisa: deixar visível, na tela que o dono já abre,
   que o backup diário parou de rodar. Sem ela, a pasta continuaria vazia em
   silêncio e o problema só apareceria no dia em que o negócio precisasse do
   arquivo. */
.backup-arquivos { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--borda); }
.backup-arquivos h4 { margin: 0 0 12px; font-size: 0.95rem; color: var(--tinta-suave); font-weight: 600; }
.backup-lista { display: flex; flex-direction: column; gap: 6px; }

.backup-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 12px;
    background: var(--fundo);
    border-radius: 6px;
    font-size: 0.9rem;
}
.backup-item-nome {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.82rem;
    word-break: break-all;
}
.backup-item-meta { color: var(--tinta-suave); font-size: 0.8rem; white-space: nowrap; }
.backup-item-mais { justify-content: center; color: var(--tinta-suave); font-style: italic; }

.backup-vazio {
    padding: 14px 16px;
    background: #fff8e1;
    border: 1px solid #e0a800;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6b4a00;
}
.backup-vazio code { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 3px; }
.backup-pasta-info {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--tinta-suave);
    word-break: break-all;
}
.backup-pasta-info code { background: var(--fundo); padding: 2px 6px; border-radius: 3px; }

/* ---------- Permissões ---------- */
.permissoes-container { max-height: 60vh; overflow-y: auto; margin: 0 0 16px; }
.permissao-categoria { margin-bottom: 22px; }
.permissao-categoria-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--fundo);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}
.permissao-categoria-titulo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brasa); }
.permissao-categoria-titulo.admin::before { background: var(--vermelho); }
.permissao-categoria-titulo.config::before { background: var(--azul); }
.permissao-categoria-titulo.backup::before { background: var(--roxo); }
.permissao-categoria-titulo.relatorios::before { background: var(--verde); }

.permissoes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.permissao-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fafbfc;
    border: 1px solid var(--linha);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.permissao-item:hover,
.permissao-item.selecionada { background: var(--brasa-claro); border-color: var(--brasa); }
.permissao-checkbox { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--brasa); }
.permissao-info { flex: 1; min-width: 0; }
.permissao-codigo { margin-bottom: 2px; font-family: monospace; font-size: 0.75rem; color: var(--tinta-suave); }
.permissao-descricao { font-size: 0.87rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- MODAL DE MÓDULOS (por usuário) ----------
   Reaproveita as classes antigas acima (`.permissao-item`, `.permissao-categoria`)
   e acrescenta o agrupamento, que é o que torna 28 módulos utilizáveis: sem o
   grupo, viria uma lista corrida de nomes técnicos e o dono não saberia o que
   estava marcando. */
.modal-conteudo-larga { max-width: 720px; width: 100%; }

.permissoes-aviso {
    padding: 11px 14px;
    margin-bottom: 14px;
    background: #f3e8ff;
    border: 1px solid var(--roxo);
    border-radius: 8px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #4a2d6b;
}
.permissoes-aviso[hidden] { display: none; }

.permissoes-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.permissoes-contagem { font-size: 0.84rem; color: var(--tinta-suave); margin-left: auto; }
/* Contagem zerada fica vermelha: um admin sem nenhum módulo entra e não faz
   nada, e o erro mais provável é exatamente esquecer de marcar. */
.permissoes-contagem.vazia { color: var(--vermelho); font-weight: 600; }

.permissoes-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 4px;
}
.permissoes-grupo {
    border: 1px solid var(--linha);
    border-radius: 10px;
    overflow: hidden;

    /* `flex: none` é obrigatório aqui, e não um detalhe.
     *
     * A lista é uma coluna flex com `max-height`. Sem isto, quando o conteúdo
     * passa da altura máxima — o que acontece já em tela de celular, com 28
     * módulos — o navegador COMPRIME os grupos para caber. Cada grupo tem
     * `overflow: hidden` para arredondar os cantos, então os módulos de baixo
     * são recortados e somem.
     *
     * O dono via um contador dizendo "28 de 28 marcados", seis cabeçalhos de
     * grupo, e talvez dois módulos. Sem lista rolável, o resto não existe.
     * Nada denuncia: nenhum erro, nenhum aviso, e a contagem bate com o que
     * o estado interno guarda.
     */
    flex: none;
}
.permissoes-grupo-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: var(--fundo);
    border-bottom: 1px solid var(--linha);
    font-weight: 600;
    font-size: 0.9rem;
}
.btn-perm-grupo {
    background: none;
    border: none;
    color: var(--brasa);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    min-height: 40px;
}
.btn-perm-grupo:hover { background: var(--brasa-claro); }

.permissoes-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--linha);
    cursor: pointer;
}
.permissoes-item:first-of-type { border-top: none; }
.permissoes-item:hover { background: #fafbfc; }
.permissoes-item input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--brasa);
}
.permissoes-item-nome { flex: 1; min-width: 0; font-size: 0.88rem; }
.permissoes-item-codigo {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.72rem;
    color: var(--tinta-suave);
    white-space: nowrap;
}

/* Módulo que existe, mas que só o dono usa.
   Não some da lista: sumindo, o dono concluiria que o programa não tem a
   função. Fica visível, apagado, e com o motivo escrito — a caixa desligada
   sozinha parece defeito, e a caixa desligada com texto parece decisão. */
.permissoes-item.travada { opacity: 0.55; cursor: not-allowed; }
.permissoes-item.travada:hover { background: none; }
.permissoes-item.travada .permissoes-item-nome { color: var(--tinta-suave); }
.permissoes-so-dono {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f0f0f2;
    color: var(--tinta-suave);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- TETO DE SANGRIA E DE DESCONTO ---------- */
/* O aviso que explica por que existe um limite. Uma regra sem justificativa
   na tela é uma regra que a pessoa contorna — e a justificativa é a informação
   que faz ela obedecer. */
.teto-aviso {
    padding: 12px 14px;
    margin: 0 0 16px;
    border: 1px solid #d9a441;
    border-left-width: 4px;
    border-radius: 8px;
    background: #fffaf0;
    font-size: 0.86rem;
    line-height: 1.55;
}
.teto-aviso[hidden] { display: none; }
/* A razão fica menor e mais suave: é o argumento, não a regra. A regra é a
   linha de cima, e precisa bater mais forte que o argumento. */
.teto-aviso-porque {
    margin: 8px 0 0;
    color: var(--tinta-suave);
    font-size: 0.82rem;
}

/* ---------- ALVO DE TOQUE NO CELULAR ----------
   A medição em 320px (public/_medidor.js) achou botões de 38px de altura no
   cabeçalho e 24-31px nas tabelas.

   44px é o alvo mínimo que o polegar alcança com segurança. Abaixo disso o
   dedo erra — e aqui errar tem preço: o botão de "🗑️" apaga um produto, o
   "✏️" abre um cadastro, o "Salvar" grava a venda.

   A regra é `min-height`, e não `height`: o conteúdo continua crescendo, e um
   botão de duas linhas não fica com o texto cortado. */
@media (max-width: 720px) {
    .btn { min-height: 44px; }
    .btn-tabela { min-height: 44px; min-width: 44px; padding: 8px 10px; }
    .btn-icone { min-height: 44px; min-width: 44px; padding: 6px 10px; }
    .btn-mini { min-height: 44px; padding: 8px 12px; }
    .menu-item { min-height: 44px; }
    .btn-fechar { min-height: 44px; min-width: 44px; }
}

/* ---------- MENU DE EXPORTAÇÃO ----------
   Estourava 73px em 320px: o menu tem `min-width` de conteúdo e nenhuma
   travava de largura. O menu é posicionado em relação ao botão, e numa tela
   estreita ele precisa caber na tela, não empurrar a página. */
/* ---------- ABAS DO CADASTRO DE PRODUTO ----------
   A barra JÁ rola (`.prod-abas` tem `overflow-x: auto`, lá mais abaixo). O que
   faltava era o TAMANHO: `.prod-aba` media 37px de altura, abaixo do alvo de
   toque.

   A medição chegou a accusingar 236px de estouro aqui, e era falso positivo do
   próprio medidor: a versão que roda dentro do modal não pula elemento que
   está dentro de um ancestral com rolagem, que é justamente o caso. Corrigir o
   medidor vale mais que a regra: um medidor que acusa onde não há problema faz
   a pessoa ignorar tudo que ele apontar depois. */
.prod-aba {
    flex: none;
    min-height: 44px;
}

/* ---------- TABELA DENTRO DE MODAL ----------
   O histórico de estoque estourava 62px. Tabela é o único lugar onde rolagem
   horizontal é a resposta certa: a coluna é a informação, e espremer a coluna
   deixa de ler. O que faltava era o CONTAINER rolando — a tabela transbordava
   para fora do modal. */
.modal-conteudo .tabela-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.modal-conteudo table { min-width: 100%; }

/* ---------- RESTAURAR BACKUP ---------- */
/* Fica numa seção separada, com borda própria, e não junto do "Baixar cópia".
   As duas ações são opostas — uma tira o banco da máquina, a outra põe um
   banco antigo por cima — e na mesma linha o dedo erra um dia. */
.restaurar-area {
    margin-top: 22px;
    padding: 16px;
    border: 2px dashed var(--vermelho);
    border-radius: 10px;
    background: #fff8f6;
}
.restaurar-area[hidden] { display: none; }
.restaurar-area h4 { margin: 0 0 8px; color: var(--vermelho); }
.restaurar-explicacao,
.restaurar-so-superadmin {
    margin: 0 0 10px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--tinta);
}
.restaurar-so-superadmin { color: var(--tinta-suave); }
.restaurar-explicacao code,
.restaurar-aviso code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85em;
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 4px;
}

.restaurar-aviso {
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid var(--vermelho);
    border-left-width: 4px;
    border-radius: 8px;
    background: #fff5f2;
    font-size: 0.88rem;
    line-height: 1.55;
}
.restaurar-aviso p { margin: 8px 0 0; }
/* A parte que tranquiliza precisa se ler como promessa, não como letra miúda.
   "Não tem volta" sem "mas dá para voltar" deixa a pessoa com medo de uma
   operação que é reversível — e o medo evita o botão que existia para isso. */
.restaurar-promessa {
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.restaurar-lista { width: 100%; min-height: 130px; }
.restaurar-lista option { padding: 7px 9px; font-size: 0.85rem; }

/* ---------- Botão que não faz nada ainda ---------- */
/* Um botão desabilitado que não diz por quê parece defeito. Todo botão que
   espera uma condição usa esta classe, e o motivo vai no title. */
.btn-aguardando {
    opacity: 0.55;
    cursor: not-allowed;
}

/* No lugar dos botões, para quem não pode mexer em contas. Um travão sem
   explicação faz a pessoa achar que a tela quebrou; o "—" com aviso no hover
   diz que a ação existe e quem pode fazer. */
.acoes-bloqueadas {
    display: inline-block;
    padding: 4px 10px;
    color: var(--tinta-suave);
    font-size: 0.9rem;
    cursor: help;
}

/* ---------- Selo do super admin ----------
   Cor própria, e não o badge de "pago": o selo do dono precisa ser reconhecível
   de relance numa lista, e o verde de "pago" passava por confirmação de venda. */
.badge-superadmin {
    background: #f3e8ff;
    color: #4a2d6b;
    border-color: var(--roxo);
    font-weight: 600;
}

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
    .tipos-atendimento { grid-template-columns: 1fr; gap: 12px; }
    .tipo-card { display: flex; align-items: center; gap: 16px; padding: 18px; text-align: left; }
    .tipo-icone { margin: 0; font-size: 2.4rem; }
}

@media (max-width: 600px) {
    .app { padding: 10px; }
    .header { flex-direction: column; align-items: stretch; text-align: center; padding: 14px; }
    .header-left,
    .header-right { justify-content: center; }
    .header h1 { font-size: 1.3rem; }

    .tela-header,
    .tela-header-admin { gap: 8px; }
    .tela-header h2,
    .tela-header-admin h2 { font-size: 1.15rem; }

    .mesas-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .mesa-card { padding: 14px 6px; }
    .mesa-numero { font-size: 1.8rem; }
    .mesa-status { font-size: 0.78rem; }

    .cardapio-header { padding: 12px; gap: 10px; }
    .pedido-info { order: 1; flex-basis: 60%; }
    .pedido-resumo { order: 2; width: 100%; justify-content: space-between; }

    .produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .produto-card { padding: 12px; }
    .produto-nome { font-size: 0.88rem; }

    .acoes-pedido > div { flex-direction: column; }
    .acoes-pedido .btn,
    .form-container .btn,
    .filtros-relatorio .btn { width: 100%; }

    .form-container { padding: 16px; }
    .form-grupo input:not([type="checkbox"]),
    .form-grupo textarea,
    .form-grupo select { font-size: 16px; } /* evita zoom no iOS */

    .modal { padding: 10px; align-items: flex-end; }
    .modal-conteudo { padding: 20px 16px; border-radius: 16px 16px 0 0; }
    .modal-botoes { flex-direction: column-reverse; }
    .preview-conteudo { padding: 14px; font-size: 0.8rem; max-height: 50vh; }

    /* A conta tem três botões empilhados agora (remover item, desconto,
       imprimir): a área que rola encurta para o rodapé com o total continuar
       visível sem precisar rolar até ele. */
    .conta-lista { max-height: 38vh; }
    /* O preço unitário some: com a quantidade e o valor da linha na tela, ele
       é derivável, e a linha precisa caber com o ✕ de 40px ao lado. */
    .conta-item-unit { display: none; }
    .conta-item-valor { min-width: 72px; }
    .desconto-tipos { flex-direction: column; }
    .pag-desconto { padding: 9px 10px; }
    .btn-desconto { width: 100%; }

    .filtros-relatorio { flex-direction: column; align-items: stretch; }
    .admin-tab { flex: 1; justify-content: center; padding: 10px 12px; }
    /* No celular, os módulos em colunas de 260px não cabem, e a caixa de
       seleção fica pequena demais para o dedo. Uma coluna, e a caixa sobe. */
    .permissoes-lista { max-height: 46vh; }
    .permissoes-item { min-height: 48px; }
    .permissoes-item input { width: 24px; height: 24px; }
    .permissoes-item-codigo { display: none; }
    .permissoes-contagem { margin-left: 0; width: 100%; }
    .tabela-relatorio th,
    .tabela-relatorio td { padding: 9px 10px; font-size: 0.82rem; }

    .login-card { padding: 30px 22px; }
    .toast-container { left: 10px; right: 10px; bottom: 10px; }
    .toast { min-width: 0; max-width: none; }
}

/* Telas muito estreitas (iPhone SE com 320px, split screen em tablet).
   Aqui a regra das 600px acima ainda manda 2 colunas, e o cartão do caixa
   estoura: 2 × (170px de conteúdo + 36px dos dois paddings de 18px) = 412px
   numa tela que tem 305px úteis. O `padding` é o vilão — ele é SOMADO ao
   `minmax`, não incluído nele.

   Uma coluna resolve, e nesta largura é o certo: o cartão continua legível e
   o número do total, que é o que o dono olha, ganha largura em vez de perdê-la
   espremido em duas colunas. */
@media (max-width: 400px) {
    .resumo-cards { grid-template-columns: 1fr; }
    .resumo-card { padding: 14px; }
}

@media (max-width: 380px) {
    .mesas-grid { grid-template-columns: repeat(2, 1fr); }
    .produtos-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================
   PRODUTOS - CADASTRO FISCAL (painel admin)
   ============================================ */

.mono { font-family: Consolas, "Courier New", monospace; }

#modalProduto .modal-conteudo { max-width: 860px; }
#modalHistorico .modal-conteudo { max-width: 760px; }

.filtros-produtos {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filtros-produtos .form-grupo { margin: 0; flex: 1; min-width: 200px; }

.badge-info { background: #e4eefb; color: var(--azul-escuro); }

/* Abas do formulario de produto */
.prod-abas {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--linha);
    overflow-x: auto;
}

.prod-aba {
    padding: 9px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--tinta-suave);
    font-weight: 600;
    white-space: nowrap;
}

.prod-aba:hover { color: var(--brasa); }
.prod-aba.ativa { color: var(--brasa); border-bottom-color: var(--brasa); }

.prod-conteudo-aba { display: none; }
.prod-conteudo-aba.ativa { display: block; animation: entrar 0.2s ease; }

.form-produto-linha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 12px;
}

/* Mensagens de validacao dos campos */
.campo-msg {
    display: block;
    min-height: 1.1em;
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--tinta-suave);
}

/* ---------- RESERVA DE IMPOSTO ----------
   O cartão fica com a borda azul, a mesma do suprimento visto pelo outro lado:
   dinheiro que mudou de lugar, não dinheiro que foi gasto. A cor vermelha da
   sangria faria o dono ler a reserva como prejuízo. */
.resumo-card.imposto {
    border-left-color: var(--azul);
    background: rgba(41, 98, 148, 0.05);
}

.resumo-card.imposto.feito {
    border-left-color: var(--verde);
    background: rgba(22, 160, 133, 0.07);
}

.resumo-card-nota {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--tinta-suave);
}

/* O botão fica com 44px de altura como o resto: a reserva é acionada uma vez
   por dia, mas é justamente uma ação que ninguém quer errar, e erro aqui sai
   dinheiro da gaveta. */
.btn-caixa-reservar {
    margin-top: 10px;
    width: 100%;
}

.num.negativo-reserva { color: var(--azul); }

/* A contagem de lançamentos é um NÚMERO, não um valor.
   O `.resumo-card-valor` tem a fonte do dinheiro — `clamp()` com
   `white-space: nowrap` para o "R$ 1.093.550,50" não vazar do cartão. Aplicar
   essa fonte a "6" produz "R$ 6,00" com a mesma composição e a mesma
   importance: é o tipo de detalhe que ninguém comenta e todo mundo vê. */
.resumo-card-valor.contagem {
    font-family: inherit;
    font-size: 1.35rem;
}

.resumo-card-valor.contagem::after {
    content: none;
}

/* ---------- CADASTRO RÁPIDO ---------- */

/* O botão é verde, e os outros dois são azuis.
   O verde é o que diz "este é o caminho curto", sem precisar escrever. Três
   botões iguais numa linha fazem a pessoa ler os três rótulos para decidir —
   e quem tem fila de gente não lê nada. */
.btn-cadastro-rapido {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
    font-weight: 600;
}

.btn-cadastro-rapido:hover:not(:disabled) {
    filter: brightness(1.08);
}

.btn-cadastro-rapido:active:not(:disabled) {
    filter: brightness(0.94);
}

.btn-cadastro-rapido:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Operação > Cadastros: esconde o tipo que a loja não usa. */
body[data-tipo-cadastro="rapido"] .so-cadastro-fiscal,
body[data-tipo-cadastro="fiscal"] .so-cadastro-rapido {
    display: none !important;
}

/* Dois campos em um modal estreito: 420px contra os 520 do cadastro simples e
   os ~900 do fiscal. A largura acompanha a quantidade de coisa que a pessoa
   precisa preencher. */
.modal-conteudo-rapido {
    max-width: 420px;
}

/* O aviso do que NÃO vai ser perguntado.
   Sem ele, a pessoa preenche nome e preço, olha o modal vazio embaixo e pensa
   que o cadastro deu errado. Dizer o que falta e onde completar é a diferença
   entre "cadastro rápido é incompleto" e "esse sistema está quebrado". */

    /* ---------- O BLOCO DE ESTOQUE ----------
       A borda e a linha superior dizem "isto e um bloco que liga e desliga".
       Sem elas, o checkbox parece um campo solto e a pessoa nao sabe que os
       dois campos de baixo dependem dele. */
    .rapido-estoque {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--linha);
    }

    .rapido-estoque-linha {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .rapido-estoque-linha label {
        font-weight: 600;
        font-size: 0.92rem;
        cursor: pointer;
    }

    .rapido-estoque-linha input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex: none;
        cursor: pointer;
    }

    #rapidoCamposEstoque {
        margin-top: 14px;
        padding-left: 30px;
        border-left: 3px solid var(--linha);
    }

    /* O aviso do saldo zero e em vermelho, e nao em amarelo: ele e a unica
       mensagem do modal que IMPEDE o cadastro. Amarelo seria "prestacao", e
       a prestacao aqui e o produto sumir da venda. */
    .rapido-aviso-erro {
        border-left-color: var(--vermelho);
        background: rgba(198, 40, 40, 0.07);
        color: var(--tinta);
    }

.rapido-aviso {
    padding: 10px 12px;
    margin-bottom: 16px;
    border-radius: var(--raio);
    border-left: 3px solid var(--brasa);
    background: rgba(201, 106, 32, 0.08);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--tinta-suave);
}

/* No celular, o botão de cadastro rápido empilha acima do simples — os dois
   com a altura de toque de 44px, porque são os dois que se usa com o dedo. */
@media (max-width: 720px) {
    .admin-header-acao .btn-cadastro-rapido,
    .admin-header-acao .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ---------- ABA DE DESPESAS ----------
/* ---------- ABA DE DESPESAS ----------
/* ---------- ABA DE DESPESAS ---------- */

/* Competência e o botão de lançar na mesma linha.
   O filtro vem primeiro porque é ele que decide de que mês a tela está
   falando — e o lançamento herda esse mês, em vez de sugerir o mês corrente e
   jogar a despesa no relatório errado. */
.despesas-topo {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* ---------- AVISO DE VENCIMENTO DA DESPESA ----------
   Três tons, e não um por dia. A parede de cores obriga a pessoa a decifrar
   a urgência em vez de lê-la: vermelho forte e laranja chegam com o mesmo
   peso. Três tons dizem a mesma coisa em três palavras — agora, hoje, depois.

   O tom fica na BORDA ESQUERDA da linha, e não no fundo inteiro: um bloco
   vermelho grita em cada linha e o olho para de escutar. A borda carrega o
   peso, o texto fica legível, e o vermelho ainda significa alguma coisa. */
.despesas-alertas {
    margin-bottom: 18px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    overflow: hidden;
}

.despesas-alertas-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linha);
    background: #f6f7f8;
}
.despesas-alertas-titulo {
    font-weight: 600;
    color: var(--tinta);
}
.despesas-alertas-valor {
    font-weight: 700;
    color: var(--tinta);
}

/* Vencida: o prazo passou. É o único tom que muda a ação do dia. */
.despesas-alertas-topo.tem-vencida {
    background: var(--vermelho-claro);
}
.despesas-alertas-topo.tem-vencida .despesas-alertas-titulo,
.despesas-alertas-topo.tem-vencida .despesas-alertas-valor {
    color: #a11f1f;
}

/* Vence hoje: ainda dá para pagar. */
.despesas-alertas-topo.tem-hoje {
    background: var(--brasa-claro);
}
.despesas-alertas-topo.tem-hoje .despesas-alertas-titulo,
.despesas-alertas-topo.tem-hoje .despesas-alertas-valor {
    color: #8a3d05;
}

.despesas-alertas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.despesas-alerta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-left: 4px solid transparent;
}
.despesas-alerta + .despesas-alerta {
    border-top: 1px solid var(--linha);
}
.despesas-alerta .prazo {
    flex: none;
    min-width: 118px;
    font-weight: 700;
    font-size: 0.82rem;
}
.despesas-alerta .nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.despesas-alerta .detalhe {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--tinta-suave);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}
.despesas-alerta .data {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--tinta-suave);
}
.despesas-alerta .valor {
    flex: none;
    min-width: 96px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.despesas-alerta.vencida {
    border-left-color: var(--vermelho);
}
.despesas-alerta.vencida .prazo,
.despesas-alerta.vencida .valor {
    color: #a11f1f;
}
.despesas-alerta.hoje {
    border-left-color: var(--brasa);
}
.despesas-alerta.hoje .prazo,
.despesas-alerta.hoje .valor {
    color: #8a3d05;
}
.despesas-alerta.prazo {
    border-left-color: var(--linha);
}
.despesas-alerta.prazo .prazo {
    color: var(--tinta);
}

.despesas-alerta-erro {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid var(--vermelho);
    border-radius: var(--raio);
    background: var(--vermelho-claro);
    color: #a11f1f;
}

/* ---------- DICA DO "ALTERAR CADASTRO" ----------
   Uma linha, e não um modal. A resposta da pergunta que a dica faz — "qual
   produto?" — está na lista que já está na tela. Um modal com a lista dentro
   seria a terceira lista de produtos do sistema.

   O tom é azul-claro e neutro de propósito: a dica é uma INSTRUÇÃO, não um
   aviso nem um erro. Na cor do aviso de vencimento, a pessoa acharia que há
   conta vencendo pendente — que é um problema de verdade, e não é o caso. */
.alterar-cadastro-dica {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid #bcd6f0;
    border-radius: var(--raio);
    background: #eaf2fb;
    color: #1450a3;
    font-size: 0.9rem;
}
.alterar-cadastro-dica .btn-mini {
    flex: none;
}

/* No celular a dica quebra em duas linhas: o texto ocupa a largura toda e o
   "entendi" desce para baixo, com 44px de altura para o dedo acertar. */
@media (max-width: 720px) {
    .alterar-cadastro-dica {
        padding: 12px 14px;
    }
    .alterar-cadastro-dica .btn-mini {
        min-height: 44px;
    }
}

/* A MESMA palavra e a MESMA cor na coluna da tabela de lançamentos. A pessoa
   que leu "vence em 3 dias" no aviso não precisa aprender nada de novo para
   ler a data na linha. */
.prazo {
    font-weight: 600;
    white-space: nowrap;
}
.prazo.vencida {
    color: #a11f1f;
}
.prazo.hoje {
    color: #8a3d05;
}
.prazo-pago {
    color: var(--tinta-suave);
}
.prazo-vazio {
    color: var(--tinta-suave);
}

/* ---------- O AVISO, NO CELULAR ----------
   Em 320px as cinco colunas da linha do aviso não cabem: o nome espremido
   um caracter e o valor empurrado para fora. A linha vira DUAS — a primeira
   com o prazo e a data, a segunda com o nome, o detalhe e o valor. É a mesma
   informação, empilhada na ordem em que se lê: quando, o quê, quanto. */
@media (max-width: 720px) {
    .despesas-alerta {
        flex-wrap: wrap;
    }
    .despesas-alerta .prazo {
        min-width: 0;
    }
    .despesas-alerta .nome {
        flex: 1 1 100%;
        order: 3;
    }
    .despesas-alerta .detalhe {
        order: 4;
        flex: 1 1 auto;
    }
    .despesas-alerta .valor {
        order: 5;
    }
}

.despesas-topo .form-grupo {
    margin-bottom: 0;
    min-width: 180px;
}

/* A barra da categoria responde "onde está o dinheiro" sem a pessoa ler cinco
   números e comparar de cabeça — que é o que ela faz hoje, e errado. */
.barra-categoria {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 140px;
}

.barra-categoria-trilho {
    height: 6px;
    border-radius: 3px;
    background: var(--linha);
    overflow: hidden;
}

/* Vermelho, e não a cor da categoria: a barra mostra o tamanho do gasto, e o
   tamanho do gasto é o problema. */
.barra-categoria-cheio {
    height: 100%;
    border-radius: 3px;
    background: var(--vermelho);
    opacity: 0.75;
}

.selo-pago,
.selo-pendente {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.selo-pago {
    background: rgba(22, 160, 133, 0.14);
    color: var(--verde);
}

.selo-pendente {
    background: rgba(201, 106, 32, 0.14);
    color: var(--brasa);
}

/* No celular, os dois botões do topo empilham e ficam com a altura de toque. */
@media (max-width: 720px) {
    .despesas-topo {
        flex-direction: column;
        align-items: stretch;
    }

    .despesas-topo .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ---------- LEITURA DA DIVERGÊNCIA ----------
/* ---------- LEITURA DA DIVERGÊNCIA ----------
   A frase que diz o que a diferença SIGNIFICA.

   "R$ -40,00" na tela deixa a decisão com a pessoa — e essa decisão é o
   fechamento inteiro. Escrever "FALTOU R$ 40,00" tira o trabalho de quem fecha,
   que é o único momento em que o dono olha o dinheiro de verdade. */
.divergencia-leitura {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: var(--raio);
    border-left: 4px solid var(--linha);
    background: var(--superficie);
}

.divergencia-leitura strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.divergencia-leitura span {
    font-size: 0.88rem;
    color: var(--tinta-suave);
}

/* Verde é "bateu": a única cor positiva aqui é o alívio de ter conferido. */
.divergencia-leitura.zero {
    border-left-color: var(--verde);
    background: rgba(22, 160, 133, 0.07);
}
.divergencia-leitura.zero strong { color: var(--verde); }

/* Sobra é amarela, não vermelha: dinheiro a mais costuma ser troco mal contado,
   e pintar de vermelho faz a pessoa se sentir culpada por um erro de dedo. */
.divergencia-leitura.positivo {
    border-left-color: var(--brasa);
    background: rgba(201, 106, 32, 0.07);
}
.divergencia-leitura.positivo strong { color: var(--brasa); }

/* Falta é vermelha: é o caso em que alguém precisa investigar. */
.divergencia-leitura.negativo {
    border-left-color: var(--vermelho);
    background: rgba(198, 40, 40, 0.07);
}
.divergencia-leitura.negativo strong { color: var(--vermelho); }

/* ---------- MODAL DE ESTORNO ----------
   O resumo antes da pergunta.

   Estorno é a operação em que a pessoa mais precisa ler e menos tem vontade de
   ler: está no balcão, com o cliente esperando, e um toque errado tira dinheiro
   da gaveta. Por isso os três números (pedido, valor, quanto sai da gaveta)
   ficam num bloco só, e não espalhados no texto do aviso. */
.estorno-resumo {
    background: var(--fundo-claro, #f6f6f7);
    border-radius: var(--raio);
    padding: 12px 14px;
    margin-bottom: 18px;
}

.estorno-linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 0.92rem;
}

.estorno-linha + .estorno-linha {
    border-top: 1px solid var(--linha);
}

.estorno-linha span { color: var(--tinta-suave); }

/* O valor da venda e o que sai da gaveta não são o mesmo número, e a
   diferença é o que está no cartão. Deixar os dois na mesma linha, com o
   dinheiro da gaveta em negrito, evita que a pessoa ache que a maquininha vai
   devolver sozinha. */
.estorno-linha strong { font-weight: 700; }

.estorno-linha:last-child strong { color: var(--brasa); }

.aviso-info {
    margin: 14px 0;
}

/* ---------- ATALHOS DE CATEGORIA ----------
   A faixa de botões logo abaixo do campo de categoria.

   A ideia é tirar a categoria do teclado: quem cadastra produto tem a mão
   ocupada e digitar "refrigerantes" com acento, com o teclado do celular, a
   cada dez produtos, é o tipo de atrito que faz a pessoa digitar "refri" e
   criar uma categoria nova por engano. Um toque resolve.

   ROLAGEM HORIZONTAL, e não quebra em duas linhas. As dez padrão ocupam ~700px:
   em 320px isso são três linhas de botão empurrando o resto do formulário para
   baixo, e o campo de preço — que é o que se quer ver depois de escolher a
   categoria — fica abaixo da dobra. Com rolagem, a faixa ocupa uma linha e o
   preço continua à vista. É a mesma razão que faz a barra de abas do cadastro
   de produto rolar. */
.categoria-atalhos {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.categoria-atalho {
    flex: none;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--tinta);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.categoria-atalho:hover { border-color: var(--brasa); background: #fff6f0; }

/* O atalho escolhido fica aceso. Sem isto o campo preenche e a faixa não muda
   — e a pessoa não tem como confirmar de relance se a categoria pegou. */
.categoria-atalho.ativo {
    background: var(--brasa);
    border-color: var(--brasa);
    color: #fff;
}

/* O "+ Nova" é ação, não categoria: tracejado, e fora da ordem do catálogo. */
.categoria-nova {
    border-style: dashed;
    color: var(--brasa);
    font-weight: 700;
}
.categoria-nova:hover { background: var(--brasa); color: #fff; }

.campo-msg.erro { color: var(--vermelho); }
.campo-msg.ok { color: var(--verde); }
.campo-msg.aviso { color: var(--brasa); }
.campo-msg.info { color: var(--azul); }

.invalido {
    border-color: var(--vermelho) !important;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15) !important;
}

/* Busca de NCM por descricao */
.ncm-busca { display: flex; gap: 8px; }
.ncm-busca input { flex: 1; }

.ncm-sugestoes {
    position: absolute;
    z-index: 60;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    margin-top: 4px;
}

.ncm-item {
    display: flex;
    gap: 8px;
    align-items: baseline;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--linha);
    text-align: left;
    font-size: 0.85rem;
}

.ncm-item:last-child { border-bottom: none; }
.ncm-item:hover { background: var(--fundo); }
.ncm-item .mono { font-weight: 700; color: var(--brasa); }
.ncm-vazio { padding: 12px; font-size: 0.85rem; color: var(--tinta-suave); text-align: center; }

/* Resultado do calculo da MVA ajustada */
.mva-resultado {
    background: var(--brasa-claro);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 14px;
    margin-bottom: 12px;
}

.mva-resultado > label { font-weight: 700; font-size: 0.85rem; }

.mva-valor { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
.mva-valor output { font-size: 1.9rem; font-weight: 800; color: var(--brasa); }

.mva-inter {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tinta-suave);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 999px;
    padding: 2px 10px;
}

.mva-explica { font-size: 0.82rem; color: var(--tinta-suave); margin: 0; }

/* Menu de exportacao */
.menu-exportar { position: relative; display: inline-block; }
.menu-exportar > summary { list-style: none; cursor: pointer; }
.menu-exportar > summary::-webkit-details-marker { display: none; }

.menu-exportar-conteudo {
    position: absolute;
    /* `left: 0` e nao `right: 0`: o botao e o primeiro item de uma linha
       que comeca no zero, entao ancorar pela esquerda joga o menu 63px
       para fora da tela. Pela direita ele abre encostado no botao. */
    left: 0;
    right: auto;
    /* Rede de seguranca: nem o `min-width` de 230px pode deixar o menu
       mais largo que a janela. */
    max-width: calc(100vw - 32px);
    top: calc(100% + 6px);
    z-index: 70;
    min-width: 230px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    padding: 6px 0;
}

/* O selo "🔒 Senha de fábrica" aparecia em TODAS as telas com 30px de altura —
   é o alvo pequeno que sobrou depois das 8 telas passarem limpas. Ele é um
   link para trocar a senha, e mexer na senha é justamente o que a pessoa
   precisa acertar no primeiro dia. */
@media (max-width: 720px) {
    .aviso-senha { min-height: 44px; padding: 8px 12px; }
}

/* No celular, o menu ocupa a largura da tela em vez de se ancorar ao botão.
   Estouro de 73px para a ESQUERDA, medido em 320px.

   A causa é o `right: 0`: o menu se alinha à borda direita do botão, e com
   230px de largura num botão que fica no meio da tela, ele sai pelo lado
   oposto. A virada automática de lado que se faria no desktop não existe em
   CSS — não há como o navegador "saber" que faltou espaço à esquerda.

   Largura de tela resolve sem adivinhar: cabe em qualquer posição do botão, e
   com três itens o alvo de toque fica maior, não menor. */
@media (max-width: 720px) {
    .menu-exportar-conteudo {
        position: fixed;
        left: 12px;
        right: 12px;
        width: auto;
        min-width: 0;
        max-width: none;
        top: 50%;
        transform: translateY(-50%);
    }
    .menu-item { white-space: normal; text-align: left; min-height: 44px; }
}

.menu-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.9rem;
}

.menu-item:hover { background: var(--fundo); }
.menu-separador { height: 1px; margin: 6px 0; background: var(--linha); }

/* Historico fiscal */
.historico-lista { max-height: 55vh; overflow-y: auto; }

.hist-grupo { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.hist-grupo:last-child { border-bottom: none; }
.hist-quando { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }

.hist-mudanca {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: var(--fundo);
    border-radius: 8px;
    font-size: 0.82rem;
}

.hist-campo { font-weight: 700; min-width: 150px; }
.hist-de { color: var(--vermelho); text-decoration: line-through; }
.hist-seta { color: var(--tinta-suave); }
.hist-para { color: var(--verde); font-weight: 700; }

/* Tabela de produtos do admin */
.prod-cat { font-size: 0.75rem; color: var(--tinta-suave); }
.col-acoes { display: flex; gap: 6px; }
.tabela-vazia { text-align: center; color: var(--tinta-suave); padding: 24px !important; }

/* ===== CADASTRO DE PREÇOS (custo + venda) ===== */
.aviso-info {
    padding: 12px 16px;
    margin-bottom: 18px;
    background: #eef4fd;
    border-left: 4px solid var(--azul);
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #2c3e50;
}
.aviso-info strong { color: var(--azul-escuro); }

.tabela-relatorio th.num { text-align: right; }
.tabela-relatorio td.num { text-align: right; }

/* Custo editável direto na tabela (cálculo rápido de margem) */
.custo-rapido {
    width: 100px;
    padding: 6px 8px;
    text-align: right;
    font: inherit;
    font-weight: 600;
    color: inherit;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 6px;
}
.custo-rapido:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.custo-rapido::placeholder { color: #a8adb4; font-weight: 400; font-style: italic; }
.custo-rapido:disabled { background: #f2f4f6; }
.tabela-relatorio td.vazio,
.tabela-relatorio .vazio { text-align: center; color: var(--tinta-suave); padding: 24px; }

.tabela-relatorio td.valor.positivo { color: #1f7a2e; }
.tabela-relatorio td.valor.negativo { color: var(--vermelho); }
.tabela-relatorio td.valor.zero { color: var(--tinta-suave); }
.tabela-relatorio .sem-dado { color: var(--tinta-suave); font-weight: 400; font-style: italic; }

.tabela-relatorio tr.linha-inativa td { opacity: 0.5; }
.badge-ativo { background: var(--verde-claro); color: #1f6024; }
.badge-inativo { background: #eceef0; color: #6b7280; }
.tabela-relatorio td.acoes { white-space: nowrap; }
.btn-icone {
    padding: 4px 8px;
    margin-right: 4px;
    background: none;
    border: 1px solid #d8dbdf;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.2;
}

/* ---------- ALVO DE TOQUE DOS BOTOES DE ICONE DAS TABELAS, ATE O TABLET ----------
   A media query de 720px cobre o celular. O painel tambem roda no tablet do
   balcao, de 768 a 1024px, e ali os botoes de icone das tabelas mediam
   39x31px — o "lixeira" apaga um produto, e o alvo era a unica pista do que
   aquele botao faz.

   Aqui so entram os botoes de ICONE. Os botoes com texto ficam no tamanho
   compacto: com mouse 38px e bom, e inflar o painel no desktop nao compra nada.

   Fica no topo de proposito. Inserir regra no meio de um arquivo que tem
   media query aninhada coloca a regra dentro do bloco errado sem erro nenhum:
   o total de chaves continua batendo e nada denuncia. */
@media (max-width: 1024px) {
    .btn-tabela { min-height: 44px; min-width: 44px; padding: 8px 10px; }
    .btn-icone { min-height: 44px; min-width: 44px; padding: 6px 10px; }
    /* "Sair" e "Administrador": sao do cabecalho, que tem largura de sobra em
       tablet. Sobe 6px e nao infla nada. */
    .header .btn-sm { min-height: 44px; }

    /* O selo "🔒 Senha de fábrica" aparecia em TODAS as telas com 30px de
       altura — o alvo pequeno que sobrou. E um link para trocar a senha, e
       mexer na senha e justamente o que a pessoa precisa acertar no
       primeiro dia. */
    .aviso-senha { min-height: 44px; }

    /* Itens do menu de exportar: baixar os produtos e o que o dono faz todo
       dia no fim do turno. 38px e um alvo que o dedo erra. */
    .menu-item { min-height: 44px; }
}
.btn-icone:hover { background: #f2f4f6; }

.relatorio-dica { margin: -6px 0 12px; font-size: 0.85rem; color: var(--tinta-suave); }

/* Modal de cadastro de preço */
.form-linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* O aviso de "a lista está cortada". */
/*
 * Não é `.relatorio-dica`: aquela é uma nota de rodapé sobre o prejuízo, e o
 * dono lê se quiser. Este aqui impede a pessoa de ACREDITAR num número errado —
 * "setembro teve 4.200 vendas" com uma tabela de 500 — e precisa ser visto
 * antes da tabela, não depois dela.
 *
 * A cor é a mesma do aviso de venda vencendo: não é um erro, é uma informação
 * que muda o que a pessoa está vendo. E o botão de fechar não existe de
 * propósito — quem fecha o aviso para de saber que a lista não é a lista toda.
 */
.relatorio-aviso {
    background: #fff8e6;
    border: 1px solid #f0c36d;
    border-left: 4px solid #e8a317;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6b4e00;
}
.relatorio-aviso strong {
    color: #4a3600;
}

/* `min-width: 0` nos FILHOS, e não na grade.
   No grid, `1fr` tem um PISO: o item não fica menor que o seu `min-content`.
   A coluna da Categoria tem como conteúdo a faixa de atalhos, que é mais
   larga que o modal — então ela foi para 919px dentro de um formulário de
   672px, e a coluna vizinha ficou com os 48px que sobraram.

   O campo vizinho sumiu sem erro e sem mensagem: existia, tinha valor
   preenchido, e simplesmente não cabia. No Cadastro Rápido era o "Código",
   que recebia o valor preenchido e ninguém via.

   `overflow-x: auto` na faixa de atalhos resolve o ESTOURO, mas não o
   `min-content`: o piso é do item do grid, não do scroller dentro dele. */
.form-linha > * { min-width: 0; }
.form-dica { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--tinta-suave); }

.margem-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0 8px;
    padding: 14px;
    background: var(--fundo);
    border-radius: 10px;
}
.margem-item { text-align: center; }
.margem-item span {
    display: block;
    font-size: 0.75rem;
    color: var(--tinta-suave);
    margin-bottom: 4px;
}
.margem-item strong { font-size: 1.15rem; }
.margem-item strong.positivo { color: #1f7a2e; }
.margem-item strong.negativo { color: var(--vermelho); }
.margem-item strong.zero { color: var(--tinta-suave); }

.margem-alerta {
    padding: 10px 14px;
    background: #fff8e6;
    border-left: 4px solid #e0a800;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.margem-alerta.erro { background: var(--vermelho-claro); border-left-color: var(--vermelho); }

/* Contagem por cédulas: cada nota na sua linha, total somado a cada tecla. */
.contagem-cedulas {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--fundo);
    border-radius: 10px;
}
.contagem-cedulas summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}
.contagem-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px 14px;
    margin-top: 12px;
}
.contagem-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
}
.contagem-linha input { width: 72px; text-align: right; }
.contagem-total { margin: 12px 0 0; font-size: 0.85rem; }
.contagem-total strong { font-size: 1rem; }

@media (max-width: 600px) {
    .form-linha,
    .margem-box { grid-template-columns: 1fr; }
}

/* ===== CAIXA (turnos) ===== */
.tela-header-botoes { display: flex; gap: 8px; flex-wrap: wrap; }

.caixa-card {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--sombra);
}
.caixa-card h3 { margin-bottom: 10px; }
.caixa-card .relatorio-dica { margin: 0 0 16px; }
.caixa-card .btn-primario { margin-top: 18px; }

/* Faixa que trava a tela do caixa enquanto o turno não começou. A cor é de
   espera, não de erro: nada quebrou, o turno é que ainda não começou. */
.caixa-bloqueio {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--brasa);
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--superficie);
  }
  .caixa-bloqueio-icone { font-size: 1.5rem; line-height: 1.2; }
  .caixa-bloqueio-texto {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--tinta);
  }
  .caixa-bloqueio-dica {
    margin: 0;
    font-size: 0.85rem;
    color: var(--tinta-suave);
  }

.caixa-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* Diferença de caixa na tabela: sobra em verde, falta em vermelho. */
.tabela-relatorio td.positivo { color: var(--verde); font-weight: 600; }
.tabela-relatorio td.negativo { color: var(--vermelho); font-weight: 600; }
.tabela-relatorio td.zero { color: var(--tinta-suave); font-weight: 600; }

/* Ação da auditoria em destaque discreto */
.aud-acao {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fundo);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

/* No fechamento há só dois números (esperado e diferença). */
#modalFecharCaixa .margem-box { grid-template-columns: 1fr 1fr; }

/* ============================================================
   ESTOQUE
   ============================================================ */

/* Botão de ação dentro da tabela de estoque. Pequeno de propósito: a linha já
   tem nome, unidades e saldo; um botão grande roubaria a coluna inteira. */
.btn-mini {
    padding: 3px 9px;
    font-size: 0.82rem;
    line-height: 1.2;
    border-radius: 7px;
    border: 1px solid var(--linha);
    background: var(--superficie);
    color: var(--tinta);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.btn-mini:hover { background: var(--fundo); border-color: var(--tinta-suave); }
.btn-mini:active { transform: translateY(1px); }

/* Cartões de resumo coloridos por urgência. Só a faixa esquerda e o número
   mudam — rótulo e formato ficam iguais, para a comparação ser direta. */
.resumo-card-perigo { border-left-color: var(--vermelho); }
.resumo-card-perigo .resumo-card-valor { color: var(--vermelho); }
.resumo-card-alerta { border-left-color: #d98311; }
.resumo-card-alerta .resumo-card-valor { color: #b3650a; }
.resumo-card-ok { border-left-color: var(--verde); }
.resumo-card-ok .resumo-card-valor { color: var(--verde); }

/* Selo na aba "Estoque" do painel: quantos produtos precisam de reposição.
   Some sozinho quando não há nada a fazer. Aviso sempre visível vira ruído, e
   o dono passa a não enxergá-lo. */
.tab-selo {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--vermelho);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

/* Aviso de estoque baixo: a pergunta que o dono abre a tela para fazer. */
.estoque-aviso {
    margin-bottom: 18px;
    padding: 14px 18px;
    background: #fff8ec;
    border: 1px solid #f0d5a8;
    border-left: 5px solid #d98311;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.estoque-aviso-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    color: #8a4d05;
}
.estoque-aviso-lista {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0d5a8;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.estoque-aviso-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.estoque-aviso-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estoque-aviso-saldo { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Selo de situação do item. As cores são as mesmas do resto do sistema
   (vermelho = acabou, ambar = pouco, verde = ok, cinza = sem controle) para
   que o mesmo estoque nao pareca uma coisa na tabela e outra no cardapio. */
.estoque-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.estoque-status.negativo { background: var(--vermelho-claro); color: #a11f1f; }
.estoque-status.zerado   { background: var(--vermelho-claro); color: #a11f1f; }
.estoque-status.baixo    { background: #fdf1e0; color: #8a4d05; }
.estoque-status.ok       { background: var(--verde-claro); color: #1e5c23; }
.estoque-status.sem_controle { background: var(--fundo); color: var(--tinta-suave); font-weight: 500; }

.estoque-categoria {
    display: block;
    font-size: 0.75rem;
    color: var(--tinta-suave);
}
.estoque-acoes { white-space: nowrap; }
.estoque-acoes .btn-mini + .btn-mini { margin-left: 4px; }

/* Saldo atual no cadastro do produto: texto, e nao campo, porque quem muda
   saldo e a aba Estoque (e sempre com registro de movimento). */
.estoque-saldo-atual {
    padding: 9px 12px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Conferencia antes de confirmar o movimento. Existe para evitar o erro
   classico do estoque: digitar 12 achando que sao 12 e o sistema somar 144. */
.estoque-conferencia {
    margin: 4px 0 14px;
    padding: 10px 13px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--tinta-suave);
    font-variant-numeric: tabular-nums;
}
.estoque-conferencia strong { color: var(--tinta); }
.estoque-conferencia .positivo { color: var(--verde); }
.estoque-conferencia .negativo { color: var(--vermelho); }
.estoque-conferencia .zero { color: var(--tinta-suave); }

/* Quatro tipos de movimento lado a lado. Entrada e perda vem primeiro porque
   sao as duas que se usam todo dia; contagem fecha a lista por ser a excecao. */
.est-mov-opcoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.est-mov-opcao {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.86rem;
    transition: background 0.12s, border-color 0.12s;
}
.est-mov-opcao:hover { background: var(--fundo); }
.est-mov-opcao input { margin: 0; }
.est-mov-opcao span { display: flex; flex-direction: column; font-weight: 600; line-height: 1.25; }
.est-mov-opcao small { font-weight: 400; font-size: 0.76rem; color: var(--tinta-suave); }
.est-mov-opcao.entrada:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.est-mov-opcao.saida:has(input:checked)   { border-color: #4b6472; background: #eef2f5; }
.est-mov-opcao.perda:has(input:checked)   { border-color: var(--vermelho); background: var(--vermelho-claro); }
.est-mov-opcao.ajuste:has(input:checked)  { border-color: var(--azul); background: #e9f1fc; }

/* Aviso de estoque no modal de quantidade. Nunca impede a venda: no maximo
   avisa que o saldo vai ficar negativo, e quem decide e o caixa. */
.modal-estoque-aviso {
    margin-bottom: 14px;
    padding: 10px 13px;
    border-radius: 8px;
    font-size: 0.86rem;
    line-height: 1.4;
    border-left: 4px solid var(--linha);
    background: var(--fundo);
    color: var(--tinta-suave);
}
.modal-estoque-aviso.negativo { background: var(--vermelho-claro); border-left-color: var(--vermelho); color: #7d1a1a; }
.modal-estoque-aviso.zerado   { background: var(--vermelho-claro); border-left-color: var(--vermelho); color: #7d1a1a; }
.modal-estoque-aviso.baixo    { background: #fdf1e0; border-left-color: #d98311; color: #8a4d05; }
.modal-estoque-aviso.ok       { background: var(--verde-claro); border-left-color: var(--verde); color: #1e5c23; }

/* Saldo no cardapio. So aparece quando precisa de atencao (ver estoque.js). */
.produto-estoque {
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    align-self: flex-start;
}
.produto-estoque.negativo { background: var(--vermelho-claro); color: #a11f1f; }
.produto-estoque.zerado   { background: var(--vermelho-claro); color: #a11f1f; }
.produto-estoque.baixo    { background: #fdf1e0; color: #8a4d05; }

@media (max-width: 600px) {
    .estoque-aviso-item { flex-wrap: wrap; }
    .tab-selo { margin-left: 4px; }
}

/* ---------- Comandas (cartões fixos com código de barras) ---------- */
.comanda-leitor {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: var(--sombra);
}

.comanda-leitor label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
}

.comanda-leitor input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    border: 2px solid var(--linha);
    border-radius: 10px;
    background: var(--superficie);
}

.comanda-leitor input:focus {
    outline: none;
    border-color: var(--brasa);
    box-shadow: 0 0 0 3px var(--brasa-claro);
}

.comanda-dica {
    margin-top: 8px;
    font-size: 0.86rem;
    color: var(--tinta-suave);
}

.comanda-leitor-linha {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.comanda-leitor-linha input { flex: 1; min-width: 0; }
.comanda-leitor-linha .btn { white-space: nowrap; }

.comanda-resultado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--brasa-claro);
}
.comanda-resultado-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.comanda-resultado-info span {
    color: var(--tinta-suave);
    font-size: 0.9rem;
}

.comandas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.comandas-resumo {
    margin-bottom: 12px;
    font-size: 0.88rem;
    color: var(--tinta-suave);
}

.comanda-card {
    background: var(--superficie);
    border: 2px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 150px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.comanda-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
}

.comanda-card.livre { border-color: var(--verde); }
.comanda-card.livre:hover { background: var(--verde-claro); }
.comanda-card.ocupada { border-color: var(--brasa); }
.comanda-card.ocupada:hover { background: var(--brasa-claro); }

.comanda-codigo {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    word-break: break-all;
}

.comanda-status {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-suave);
}

.comanda-card.livre .comanda-status { color: var(--verde); }
.comanda-card.ocupada .comanda-status { color: var(--brasa); }

.comanda-mesa { font-weight: 700; margin-top: 6px; }
.comanda-nome { color: var(--tinta-suave); font-size: 0.92rem; }
.comanda-total { font-weight: 700; margin-top: 2px; }

.comanda-dica-card {
    margin-top: auto;
    font-size: 0.86rem;
    color: var(--tinta-suave);
}

.comanda-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

.comanda-acoes .btn { flex: 1; min-width: 110px; }

.comandas-vazio {
    grid-column: 1 / -1;
    padding: 24px;
    background: var(--superficie);
    border: 1px dashed var(--linha);
    border-radius: var(--raio);
    color: var(--tinta-suave);
    text-align: center;
}

/* ===== Fila de pedidos em andamento (delivery e retirada) ===== */

.pedidos-resumo {
    margin-bottom: 12px;
    font-size: 0.88rem;
    color: var(--tinta-suave);
}

.pedidos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.pedido-card {
    background: var(--superficie);
    border: 2px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 170px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pedido-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
    border-color: var(--brasa);
}

.pedido-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pedido-tipo {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.pedido-tipo.delivery { background: var(--brasa-claro); color: #8a3d05; }
.pedido-tipo.retirada { background: #e4eefb; color: var(--azul-escuro); }

.pedido-tempo {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.pedido-cliente {
    margin-top: 5px;
    font-size: 1.15rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pedido-detalhe {
    font-size: 0.88rem;
    color: var(--tinta-suave);
    overflow-wrap: anywhere;
}

.pedido-rodape {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--linha);
}

.pedido-itens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    font-size: 0.86rem;
    color: var(--tinta-suave);
}

.pedido-id { font-weight: 700; color: var(--tinta); }
.pedido-total { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }

.pedido-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
}

.pedido-acoes .btn { flex: 1; min-width: 90px; }

/* Um botão por fase do pedido; o texto quebra em vez de ser cortado */
.pedido-acoes .btn-fase {
    flex: 1 1 100%;
    white-space: normal;
}

.calendario-finalizados {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.cal-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    text-transform: capitalize;
}

.cal-resumo { font-size: 0.9rem; color: #555; margin: 0 0 8px; }

.cal-grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-semana {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #777;
    padding: 4px 0;
}

.cal-dia {
    min-height: 52px;
    border-radius: 8px;
    background: #f7f7f7;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cal-dia.vazio { background: transparent; }
.cal-numero { font-size: 0.8rem; opacity: 0.75; }
.cal-total { font-weight: 800; font-size: 1.05rem; }
.cal-dia.nivel-1 { background: #e4eefb; }
.cal-dia.nivel-2 { background: #b9d3f3; }
.cal-dia.nivel-3 { background: #7fa9e0; color: #fff; }
.cal-dia.nivel-4 { background: var(--azul-escuro); color: #fff; }

.pedidos-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.pedidos-filtro {
    padding: 8px 14px;
    border: 2px solid var(--linha);
    border-radius: 999px;
    background: var(--superficie);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
}

.pedidos-filtro.ativo {
    border-color: var(--brasa);
    background: var(--brasa-claro);
    color: #8a3d05;
}

.pedidos-filtro-n { opacity: 0.7; margin-left: 2px; }

.pedido-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: #eee;
    color: var(--tinta);
}

.pedido-status.montando   { background: #f0f0f0; color: #555; }
.pedido-status.producao   { background: #fff1c9; color: #8a5a00; }
.pedido-status.saiu       { background: #e4eefb; color: var(--azul-escuro); }
.pedido-status.pronto     { background: #dff3e3; color: #1d6b32; }
.pedido-status.finalizado { background: #e6e6e6; color: #444; }

.pedido-card.finalizado { cursor: default; opacity: 0.85; }
.pedido-card.finalizado:hover { transform: none; box-shadow: var(--sombra); border-color: var(--linha); }

.pedidos-vazio {
    grid-column: 1 / -1;
    padding: 24px;
    background: var(--superficie);
    border: 1px dashed var(--linha);
    border-radius: var(--raio);
    color: var(--tinta-suave);
    text-align: center;
}

@media (max-width: 600px) {
    .comandas-grid { grid-template-columns: 1fr 1fr; }
    .comanda-codigo { font-size: 1.5rem; }
    .pedidos-grid { grid-template-columns: 1fr; }
}

/* ===== Transferir / juntar contas ===== */

.modal-conteudo-transferir {
    max-width: 640px;
    width: 100%;
}

.transferir-lista {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    margin-bottom: 12px;
    background: var(--superficie);
}

.transferir-item {
    display: grid;
    grid-template-columns: auto 1fr 64px 86px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--linha);
    cursor: pointer;
}

.transferir-item:last-child { border-bottom: none; }

.transferir-item-check {
    width: 18px;
    height: 18px;
    accent-color: var(--brasa);
}

.transferir-item-nome {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.transferir-item-qtd {
    width: 64px;
    padding: 6px;
    border: 1px solid var(--linha);
    border-radius: 8px;
    text-align: center;
    font: inherit;
}

.transferir-item-qtd:disabled { opacity: 0.45; }

.transferir-item-valor {
    text-align: right;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.transferir-aviso {
    margin: 0 0 14px;
    font-size: 0.86rem;
    color: var(--tinta-suave);
}

.transferir-aviso.transferir-vai-liberar {
    color: #8a3d05;
    font-weight: 600;
}

@media (max-width: 520px) {
    .transferir-item {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "check nome valor"
            "check qtd valor";
    }
    .transferir-item-check { grid-area: check; align-self: start; margin-top: 2px; }
    .transferir-item-nome { grid-area: nome; }
    .transferir-item-qtd { grid-area: qtd; }
    .transferir-item-valor { grid-area: valor; align-self: center; }
}

/* ===== Dividir a conta por item ===== */

.pag-dividir {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 10px;
}

.modal-conteudo-dividir { max-width: 680px; width: 100%; }

.dividir-titulo {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--tinta);
}

.dividir-itens {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    margin-bottom: 12px;
}

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

.dividir-item:last-child { border-bottom: none; }

.dividir-item-check {
    width: 18px;
    height: 18px;
    accent-color: var(--brasa);
    flex: none;
}

.dividir-item-nome {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dividir-item-valor {
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.dividir-item-qtd {
    width: 62px;
    flex: none;
    padding: 4px 6px;
    border: 1px solid var(--linha);
    border-radius: 8px;
    font: inherit;
    text-align: center;
}

.dividir-item-qtd:disabled {
    opacity: 0.45;
}

.dividir-vazio {
    margin: 0;
    padding: 16px;
    text-align: center;
    color: var(--tinta-suave);
}

.dividir-partes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.dividir-parte {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    padding: 10px 12px;
}

.dividir-parte-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.dividir-parte-nome { font-weight: 700; }
.dividir-parte-total { font-weight: 800; }

.dividir-parte-itens {
    margin-top: 4px;
    font-size: 0.86rem;
    color: var(--tinta-suave);
    overflow-wrap: anywhere;
}

.dividir-parte-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.dividir-parte-forma { flex: none; width: auto; }

.dividir-resumo {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: var(--raio);
    background: var(--fundo);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--tinta-suave);
}

.dividir-resumo strong { color: var(--tinta); }

/* ============================================================
   CELULAR E TABLET - ajustes de toque e de espaço
   ------------------------------------------------------------
   As regras abaixo ficam no fim de propósito: elas corrigem
   componentes definidos espalhados pelo arquivo inteiro e precisam
   ganhar da versão de computador. Nada aqui muda a tela larga.
   ============================================================ */
@media (max-width: 720px) {
    .app { padding: 12px; }

    /* O cabeçalho de celular estava empilhando nome, usuário, impressora
       e Sair em quatro linhas. Em cima de cada tela isso custava quase 150px
       de altura útil. Agora são duas: marca/usuário/Sair e o aviso da
       impressora. O `display: contents` deixa os itens do lado direito
       entrarem na grade sem mudar o HTML. */
    .header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "marca usuario sair"
            "impressora impressora impressora"
            "aviso aviso aviso";
        align-items: center;
        gap: 8px 10px;
        padding: 10px 12px;
        text-align: left;
    }
    .header-left { grid-area: marca; }
    .header-left h1 { font-size: 1.18rem; }
    .header-right { display: contents; }
    .usuario-info {
        grid-area: usuario;
        justify-self: center;
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    .status-impressora {
        grid-area: impressora;
        justify-content: center;
        padding: 5px 8px;
        font-size: 0.78rem;
    }
    .header-right > .btn {
        grid-area: sair;
        flex: none;
        width: auto;
        min-width: 0;
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    .header .aviso-senha {
        grid-area: aviso;
        justify-self: start;
        font-size: 0.8rem;
    }

    /* Cabeçalho de tela: voltar e título na primeira linha, ações na
       segunda. Antes o título era `flex: 1` com `min-width: 0`, então ele
       encolhia até uma letra por linha enquanto os botões ficavam ao lado
       ("S/e/l/e/c/i/o/n/e..." na tela de mesas). */
    .tela-header,
    .tela-header-admin {
        display: grid;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
    }
    .tela-header { grid-template-columns: auto minmax(0, 1fr); }
    .tela-header-admin { grid-template-columns: minmax(0, 1fr); }
    .tela-header h2,
    .tela-header-admin h2 {
        font-size: 1.22rem;
        line-height: 1.2;
    }
    .tela-header .btn-voltar { grid-column: 1; grid-row: 1; }
    .tela-header h2 { grid-column: 2; grid-row: 1; }
    .tela-header-admin h2 { grid-column: 1; grid-row: 1; }

    .tela-header-botoes {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tela-header-botoes .btn {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    .tela-header-botoes .btn:only-child { flex: 0 1 auto; margin-left: auto; }

    /* Na tela inicial os três atalhos são a navegação principal: cada um
       ocupa um terço da linha, com o título acima respirando inteiro. */
    #telaInicial .tela-header-admin h2 { font-size: 1.45rem; }
    #telaInicial .tela-header-botoes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #telaInicial .tela-header-botoes .btn {
        width: 100%;
        padding: 10px 6px;
        font-size: 0.86rem;
    }

    /* Quatro mesas por linha em vez de três: o cartão continua com alvo de
       toque confortável, mas 21 mesas deixam de virar uma rolagem sem fim. */
    .mesas-grid {
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
        gap: 8px;
    }
    .mesa-card {
        height: 108px;
        padding: 10px 4px;
        border-top-width: 4px;
    }
    .mesa-numero { font-size: 1.7rem; margin-bottom: 3px; }
    .mesa-nome { font-size: 0.74rem; margin: 0 0 3px; padding: 1px 4px; }
    .mesa-status { font-size: 0.72rem; }
    .mesa-fechar-conta {
        top: 4px;
        right: 4px;
        padding: 1px 5px;
        font-size: 0.6rem;
    }

    .tipo-card { padding: 16px 14px; gap: 14px; }
    .tipo-icone { font-size: 2.2rem; }
    .tipo-nome { font-size: 1.18rem; }

    .comandas-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .comanda-card { min-height: 0; padding: 12px; }
    .comanda-codigo { font-size: 1.35rem; }
    .comandas-resumo,
    .pedidos-resumo { margin-bottom: 10px; }

    /* O campo do leitor dividia a linha com um botão de 120px e sobrava
       pouco mais de 130px para o código. O botão só precisa do texto "Ler";
       o resto da largura é do campo, que é onde o leitor escreve. */
    .comanda-leitor-linha .btn {
        flex: 0 0 auto;
        width: auto;
        min-width: 78px;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* No cardápio, o total vira uma barra fixa no rodapé. Antes, depois de
       rolar a lista de produtos, o resumo e o "Ver itens" ficavam lá em cima
       e o atendente precisava voltar tudo para conferir ou fechar a conta.
       A barra é o mesmo botão de antes, só que sempre ao alcance do dedo. */
    #telaCardapio { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    #telaCardapio .pedido-resumo {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 90;
        gap: 4px 14px;
        padding: 12px 15px;
        background: var(--chapa);
        border-color: transparent;
        border-radius: 14px;
        color: #fff;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    }
    #telaCardapio .pedido-resumo strong,
    #telaCardapio .pedido-resumo #taxaEntregaInfo { color: #fff; }
    #telaCardapio .pedido-resumo-ver { color: #ffc999; }
    #telaCardapio .pedido-resumo:active { transform: scale(0.99); }

    /* Abas de categoria: o corte na borda era a única pista de que a lista
       rolava. Um respiro no fim deixa a próxima aba aparecer inteira. */
    .categorias-tabs {
        scroll-snap-type: x proximity;
        scroll-padding-inline: 4px;
        padding-right: 24px;
    }
    .categoria-tab { scroll-snap-align: start; }

    /* Pagamento: o seletor de forma ficava com 97px e cortava "Dinheiro".
       O botão + não precisa de 120px; os campos precisam. */
    .pag-add { gap: 6px; }
    .pag-add-btn {
        flex: 0 0 54px;
        width: 54px;
        min-width: 54px;
        padding: 10px 0;
    }
    .pag-select { min-width: 104px; }
    .pag-valor { min-width: 82px; }

    /* Duas decisões, duas linhas: as formas de pagamento ocupam um terço
       cada, e os divisores ocupam um quinto cada. Assim nenhum chip fica
       órfão no fim da linha. */
    .pag-atalhos { display: block; }
    .pag-atalhos-linha {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .pag-atalhos-linha + .pag-atalhos-linha { margin-top: 8px; }
    .pag-atalhos-linha:last-child { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pag-atalhos-linha .pag-atalhos-titulo,
    .pag-atalhos-linha .pag-atalhos-sep {
        grid-column: 1 / -1;
        margin: 0;
    }
    .pag-atalho {
        min-height: 44px;
        padding: 8px 6px;
        font-size: 0.82rem;
    }
    .pag-item-rm {
        width: 40px;
        height: 40px;
    }
    .pag-limpar { min-height: 40px; }

    /* No toque, o :hover pode ficar grudado depois do clique. O :active
       devolve a resposta na hora e some quando o dedo sai. */
    .tipo-card:active,
    .mesa-card:active,
    .produto-card:active,
    .comanda-card:active,
    .pedido-card:active { transform: scale(0.98); }
}

@media (max-width: 380px) {
    .mesas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comandas-grid { grid-template-columns: 1fr; }
    #telaInicial .tela-header-botoes .btn { font-size: 0.8rem; }
}

/* ===== SELO DA COZINHA NO CARD DA MESA ===== */
.mesa-cozinha {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff4d6;
    color: #7a5200;
    border: 1px solid #f0d49a;
    margin-bottom: 4px;
}
.mesa-cozinha.etapa-pronto { background: #e3f7e6; color: #1c6b2b; border-color: #a9dcb4; }
.mesa-cozinha.etapa-saiu { background: #e4eefb; color: #1c4a7a; border-color: #a8c5e8; }

/* ===== TELA DA COZINHA (cozinha.html) ===== */
.pagina-cozinha { background: #12161c; color: #f2f4f7; margin: 0; padding: 0; min-height: 100vh; }
.cozinha-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 24px; background: #1b2230; border-bottom: 1px solid #2b3547;
    position: sticky; top: 0; z-index: 5;
}
.cozinha-topo h1 { margin: 0; font-size: 1.4rem; }
.cozinha-topo p { margin: 2px 0 0; color: #9fb0c7; font-size: 0.9rem; }
.cozinha-acoes { display: flex; align-items: center; gap: 12px; }
.cozinha-contagem {
    font-variant-numeric: tabular-nums; color: #9fb0c7; font-size: 0.9rem;
}
.cozinha-grid {
    display: grid; gap: 16px; padding: 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.cozinha-vazio { color: #9fb0c7; text-align: center; padding: 40px; grid-column: 1 / -1; }
.cozinha-card {
    background: #1b2230; border: 1px solid #2b3547; border-radius: 12px;
    padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.cozinha-card-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cozinha-mesa { font-size: 1.15rem; font-weight: 800; color: #ffd166; }
.cozinha-tempo { font-size: 0.78rem; color: #9fb0c7; white-space: nowrap; }
.cozinha-cliente { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; color: #d8e0ea; }
.cozinha-garcom { font-size: 0.8rem; color: #9fb0c7; }
.cozinha-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cozinha-itens li { background: #232c3c; border-radius: 8px; padding: 6px 10px; font-size: 0.95rem; }
.cozinha-obs { display: block; font-size: 0.8rem; color: #ffb4a2; }

/* Separação entre o que já saiu da cozinha e o que voltou como pedido novo */
.cozinha-grupo { display: flex; flex-direction: column; gap: 6px; }
.cozinha-grupo-titulo {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: #9fb0c7; font-weight: 700;
}
.cozinha-grupo-feitos .cozinha-itens li {
    background: transparent; border: 1px dashed #3a465c; color: #8b9bb0;
    text-decoration: line-through; text-decoration-color: #56657c;
}
.cozinha-grupo-feitos .cozinha-obs { color: #7d8ea4; }
.cozinha-obs-geral { margin: 0; font-size: 0.85rem; color: #ffd166; }
.cozinha-card-acoes { display: flex; gap: 8px; margin-top: auto; }
.cozinha-card-acoes .btn { flex: 1; }
.cozinha-card.cozinha-card-alerta { border-color: #ffd166; background: #2b2a1c; box-shadow: 0 0 0 1px #ffd166 inset; }
.cozinha-card.cozinha-card-alerta .cozinha-tempo { color: #ffd166; font-weight: 700; }
.cozinha-card.cozinha-card-urgente { border-color: #ff9f43; background: #33241a; box-shadow: 0 0 0 1px #ff9f43 inset; }
.cozinha-card.cozinha-card-urgente .cozinha-tempo { color: #ff9f43; font-weight: 700; }
.cozinha-card.cozinha-card-atrasado { border-color: #ff5d5d; background: #3a1f24; box-shadow: 0 0 0 2px #ff5d5d inset; animation: cozinha-pulso 1.6s ease-in-out infinite; }
.cozinha-card.cozinha-card-atrasado .cozinha-tempo { color: #ff8a8a; font-weight: 800; }
.cozinha-card.cozinha-card-critico { border-color: #ff2e63; background: #4a0f1c; box-shadow: 0 0 0 3px #ff2e63 inset; animation: cozinha-pulso-rapido 0.8s ease-in-out infinite; }
.cozinha-card.cozinha-card-critico .cozinha-tempo { color: #ff2e63; font-weight: 800; text-transform: uppercase; }
@keyframes cozinha-pulso { 50% { border-color: #ffb3b3; } }
@keyframes cozinha-pulso-rapido { 50% { border-color: #ffd6df; box-shadow: 0 0 0 3px #ffd6df inset; } }

/* ===== Comandas na abertura da mesa ===== */
.comanda-add-linha {
    display: flex;
    gap: 8px;
    align-items: center;
}

.comanda-add-linha input {
    flex: 1;
}

.comandas-escolhidas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.comanda-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e8eef7;
    color: #1c3a63;
    font-size: 0.85rem;
    font-weight: 600;
}

.comanda-etiqueta-x {
    border: 0;
    background: transparent;
    color: #1c3a63;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 2px;
}

.comanda-etiqueta-x:hover {
    color: #b3261e;
}

/* ===== Contas da mesa (uma por comanda) ===== */

/* Selo no card da mesa quando há mais de uma conta */
.mesa-contas {
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1c3a63;
    background: #e8eef7;
    border-radius: 999px;
    padding: 2px 8px;
    display: inline-block;
}

/* Fechamento: identificação, recebimento e confirmação em uma única sequência. */
#modalPagamento .modal-conteudo-pag {
    max-width: 640px;
}

#modalPagamento .preview-header {
    gap: 12px;
    margin-bottom: 4px;
}

#modalPagamento .preview-header h3 { margin: 0; }
#modalPagamento .btn-fechar { min-width: 44px; min-height: 44px; flex-shrink: 0; }
#pagamentoMensagem { overflow-wrap: anywhere; margin-bottom: 16px; }

#modalPagamento .pag-total-conta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--fundo);
    color: var(--tinta);
}

#pagamentoTotal {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

#modalPagamento .pag-total-ajuda,
#modalPagamento .pag-ajuda {
    color: var(--tinta-suave);
    font-size: 0.85rem;
    line-height: 1.5;
}

#modalPagamento .pag-ferramentas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 12px 0 20px;
}

#modalPagamento .pag-desconto,
#modalPagamento .pag-dividir {
    padding: 0;
    margin: 0;
    background: none;
}

#modalPagamento .pag-desconto { flex: 1 1 220px; }
#modalPagamento .pag-desconto-info { overflow-wrap: anywhere; }
#modalPagamento .pag-atalhos { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
#modalPagamento .pag-atalhos-linha { display: flex; flex-wrap: wrap; gap: 8px; }
#modalPagamento .pag-atalhos-total[hidden] { display: none; }
#modalPagamento [hidden] { display: none !important; }
#modalPagamento .pag-modos { display: flex; gap: 8px; margin-top: 16px; }
#modalPagamento .pag-modos .btn { flex: 1; min-height: 44px; white-space: normal; }
#modalPagamento .pag-modos [aria-pressed="true"] { background: var(--tinta); color: var(--superficie); }
#modalPagamento .pag-parte-numero { color: var(--tinta-suave); font-weight: 700; }
#modalPagamento .pag-atalhos-titulo,
#modalPagamento .pag-atalhos-sep { flex: 0 0 100%; margin-left: 0; color: var(--tinta); font-weight: 600; }
#modalPagamento .pag-atalho { flex: 1 1 0; min-width: 0; min-height: 44px; border-radius: 8px; }
#modalPagamento .pag-atalho[aria-pressed="true"] { background: var(--brasa); border-color: var(--brasa); color: #fff; }
#modalPagamento .pag-secao-titulo { margin: 20px 0 8px; font-size: 0.95rem; }
#modalPagamento .pag-lista { margin: 0; }
#modalPagamento .pag-vazio { padding: 14px; color: var(--tinta-suave); line-height: 1.5; }
#modalPagamento .pag-item select,
#modalPagamento .pag-item input { min-height: 44px; }
#modalPagamento .pag-item-rm { width: 44px; height: 44px; flex-shrink: 0; }

#modalPagamento .pag-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin: 16px 0 6px;
}

#modalPagamento .pag-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#modalPagamento .pag-campo label { font-size: 0.85rem; font-weight: 600; color: var(--tinta); }
#modalPagamento .pag-campo select,
#modalPagamento .pag-campo input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; }
#modalPagamento .pag-add-btn { width: auto; min-width: 0; min-height: 44px; padding: 10px 14px; font-size: 0.95rem; }
#modalPagamento .pag-ajuda { margin: 6px 0 14px; }
#modalPagamento .pag-resumo { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; margin-top: 16px; }
#modalPagamento .pag-resumo-linha { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
#modalPagamento .pag-resumo-linha strong { font-variant-numeric: tabular-nums; }
#modalPagamento .pag-resumo-acoes { display: flex; flex-wrap: wrap; gap: 8px 16px; }
#modalPagamento .pag-limpar { margin: 0; min-height: 44px; }
#modalPagamento .pag-rodape { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 20px; }
#modalPagamento .pag-rodape .btn { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
#modalPagamento #btnConfirmarPagamento { grid-column: 1 / -1; }
#modalPagamento .pag-seguranca { text-align: center; margin-bottom: 0; }
#modalPagamento :is(button, input, select):focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    #modalPagamento .pag-atalho { transition: none; }
}

@media (max-width: 480px) {
    #modalPagamento .pag-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #modalPagamento .pag-add-btn { grid-column: 1 / -1; width: 100%; }
    #modalPagamento .pag-total-conta { padding: 14px; }
    #modalPagamento .pag-atalho { padding: 8px 4px; font-size: 0.85rem; }
}

/* Lista de contas dentro do modal da mesa */
#modalContasMesa .modal-conteudo {
    max-width: 760px;
}

#modalContasMesa .preview-header {
    margin-bottom: 8px;
    gap: 12px;
}

#modalContasMesa .preview-header h3 {
    margin: 0;
    font-size: 1.4rem;
}

#modalContasMesa .btn-fechar {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

#contasMesaTexto {
    margin-bottom: 4px;
}

.contas-mesa-orientacao {
    color: var(--tinta-suave);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.contas-mesa-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    align-items: stretch;
    gap: 12px;
    margin: 0 0 24px;
}

.conta-mesa {
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 16px;
    background: var(--superficie);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.conta-mesa-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

.conta-mesa-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tinta);
    overflow-wrap: anywhere;
    min-width: 0;
}

.conta-mesa-total small {
    color: var(--tinta-suave);
    font-size: 0.8rem;
    font-weight: 400;
}

.conta-mesa-consumo {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--linha);
}

.conta-mesa-situacao {
    color: var(--azul-escuro);
    background: #eef4fd;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.conta-mesa-situacao-vazia {
    color: var(--tinta-suave);
    background: var(--fundo);
}

.conta-mesa-info {
    font-size: 0.82rem;
    color: var(--tinta-suave);
    overflow-wrap: anywhere;
}

.conta-mesa-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

.conta-mesa-acoes .btn {
    flex: 1 1 140px;
    min-width: 0;
    white-space: normal;
    min-height: 44px;
    overflow-wrap: anywhere;
}

.conta-mesa-acoes .conta-mesa-remover {
    flex-basis: 100%;
    color: var(--vermelho-escuro);
    background: var(--superficie);
    border: 1px solid var(--linha);
}

.conta-mesa-acoes .conta-mesa-remover:hover:not(:disabled) {
    background: var(--vermelho-claro);
    border-color: var(--vermelho);
}

.conta-mesa-ajuda {
    color: var(--tinta-suave);
    font-size: 0.82rem;
}

.contas-mesa-adicionar {
    border-top: 1px solid var(--linha);
    padding-top: 20px;
    margin-bottom: 0;
}

.contas-mesa-adicionar .comanda-add-linha {
    flex-wrap: wrap;
}

.contas-mesa-adicionar input {
    flex: 1 1 200px;
    min-width: 0;
    min-height: 44px;
}

.contas-mesa-adicionar small {
    display: block;
    margin-top: 8px;
    color: var(--tinta-suave);
}

#modalContasMesa :is(button, input):focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    #modalContasMesa { padding: 12px; }
    #modalContasMesa .modal-conteudo { padding: 16px; }
    .contas-mesa-adicionar .btn { width: 100%; min-height: 44px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    #modalContasMesa .modal-conteudo { animation: none; }
}

.conta-mesa-vazia {
    grid-column: 1 / -1;
    text-align: center;
    color: #5b6472;
    font-size: 0.9rem;
    padding: 18px 8px;
    border: 1px dashed #d9dee6;
    border-radius: 12px;
}

/* ===== TEMPO DE MESA ===== */
.mesa-tempo {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4a5563;
    background: rgba(74, 85, 99, 0.1);
    border-radius: 999px;
    padding: 2px 8px;
}

.conta-mesa-tempo {
    font-size: 0.78rem;
    color: #5b6472;
    background: rgba(91, 100, 114, 0.1);
    border-radius: 999px;
    padding: 2px 8px;
}

.mesa-tempo.tempo-alerta,
.conta-mesa-tempo.tempo-alerta {
    color: #8a3b00;
    background: #ffe6cc;
    border: 1px solid #f0b27a;
}

/* ===== PAGAMENTO PARCIAL ===== */
.conta-mesa-parcial {
    font-size: 0.82rem;
    color: #14532d;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 6px 10px;
}

.contas-mesa-juntar {
    display: flex;
    justify-content: flex-start;
    margin: 12px 0 4px;
}

.parciais-lista {
    margin-top: 14px;
    border-top: 1px solid #e3e7ee;
    padding-top: 10px;
}

.parciais-lista h4 {
    font-size: 0.85rem;
    margin: 0 0 8px;
    color: #3c4652;
}

.parcial-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    padding: 6px 0;
    border-bottom: 1px dashed #e3e7ee;
}

.parcial-linha:last-child { border-bottom: none; }

.parciais-vazio {
    margin: 0;
    font-size: 0.82rem;
    color: #5b6472;
}


/* XML fiscal no cadastro de produto */
.xml-fiscal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px dashed #c9d4d2;
    border-radius: 12px;
    background: #f6faf9;
}
.xml-fiscal-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.xml-fiscal .campo-msg { color: #41595b; }

/* ===== CADASTRO DE PRODUTOS: tabela e prévia ===== */
.produtos-contagem {
    flex: 1 1 100%;
    margin: 0;
    color: #41595b;
    font-size: .85rem;
}
.produtos-contagem:empty { display: none; }
.tabela-relatorio tbody tr[data-produto-id] { cursor: pointer; }
.tabela-relatorio tbody tr[data-produto-id]:hover { background: #f2f7f6; }
.prod-preco { white-space: nowrap; font-weight: 600; }
.produto-modulo {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
    border: 1px solid transparent;
}
.produto-modulo.salao { background: #eef3f2; color: #274d4a; border-color: #d6e2df; }
.produto-modulo.delivery { background: #fdf1e3; color: #8a4b12; border-color: #f0d9bd; }

.produto-previa {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px dashed #c9d4d2;
    border-radius: 12px;
    background: #f6faf9;
}
.produto-previa-rotulo {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7f80;
}
.produto-previa-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.produto-previa-linha strong { font-size: 1.02rem; }
.produto-previa-linha span { font-weight: 600; white-space: nowrap; }
.produto-previa-modulo { font-size: .8rem; color: #41595b; }
.produto-previa-modulo.delivery { color: #8a4b12; }

/* Separação do cadastro: produtos do salão x produtos do delivery */
.produtos-separacao { flex: 1 1 100%; }
.produtos-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: #eef3f2;
    border-radius: 12px;
}
.produtos-aba {
    border: 0;
    background: transparent;
    color: #274d4a;
    font: inherit;
    font-size: .92rem;
    padding: 8px 14px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
}
.produtos-aba:hover { background: #e2ece9; }
.produtos-aba:focus-visible { outline: 2px solid #12665e; outline-offset: 2px; }
.produtos-aba.ativa {
    background: #fff;
    color: #123c37;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(18, 60, 55, .18);
}
.prod-imagem-previa {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.prod-imagem-previa[hidden] { display: none; }
.prod-imagem-previa img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--linha, #dcd6c8);
}
/* Foto do item do delivery (painel) */
#itemDeliveryImagemPrevia { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#itemDeliveryImagemPrevia[hidden] { display: none; }
#itemDeliveryImagemPreview { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); }
.fiscal-ajuda {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px dashed #c9d4d2;
    border-radius: 12px;
    background: #f6faf9;
}
.fiscal-ajuda strong { display: block; margin-bottom: 6px; color: #123c37; }
.fiscal-ajuda p { margin: 0 0 10px; }
.fiscal-ajuda .btn { white-space: nowrap; }

/* Painel da nota fiscal da conta */
.nota-conteudo {
    max-width: 760px;
    max-height: 88vh;
    overflow-y: auto;
}

.nota-explicacao {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef6f4;
    border-left: 4px solid #12665e;
    color: #274d4a;
    font-size: .9rem;
    line-height: 1.5;
}

.nota-resumo {
    background: #f6faf9;
    border: 1px dashed #c9d4d2;
    border-radius: 12px;
    padding: 12px 14px;
    color: #274d4a;
    font-size: .9rem;
    line-height: 1.45;
    margin: 0 0 14px;
    overflow-wrap: anywhere;
}

.nota-acoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.nota-acao {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nota-acao small {
    color: #4b6062;
    font-size: .78rem;
    line-height: 1.35;
}

.nota-acao .btn {
    width: 100%;
    min-height: 42px;
}

.nota-acao .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Passo a passo e detalhes da aba Nota fiscal */
.fiscal-passos {
    margin: 0 0 12px;
    padding-left: 22px;
    color: #274d4a;
    font-size: .9rem;
    line-height: 1.55;
}

.fiscal-passos li { margin-bottom: 8px; }

.fiscal-passos li:last-child { margin-bottom: 0; }

.fiscal-detalhe {
    margin: 0 0 14px;
    border: 1px solid #dce5e3;
    border-radius: 10px;
    background: #fbfdfc;
}

.fiscal-detalhe summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: .88rem;
    font-weight: 600;
    color: #12665e;
}

.fiscal-detalhe .campo-msg {
    margin: 0;
    padding: 0 14px 12px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .nota-acoes {
        grid-template-columns: 1fr;
    }

    .nota-conteudo {
        max-height: 92vh;
    }
}