/* ==========================================================================
   SALÃO — estilos próprios da página (Salão 2.0)

   Carregado SOMENTE por `salao.html`, DEPOIS de `css/style.css` e
   `css/kds.css`. `kds.css` é COMPARTILHADO com a cozinha: nada dele é alterado
   por causa do salão — o que precisa de ajuste aqui é feito por classes
   `.salao-*` (ou por um seletor mais específico, como `.grid-mesas.salao-grade`)
   e por isso não vaza para as outras telas.

   Organização:
     1. base da página          (grade, largura, alinhamento)
     2. topo e barra de avisos  (contagens por fila)
     3. cards das mesas         (3 faixas: topo / corpo / ações)
     4. as três filas + avisos  (linhas, selos, ações)
     5. botões, campos e modal
     6. responsividade          (desktop / tablet / smartphone)
   ========================================================================== */

/* ==========================================================================
   1. BASE DA PÁGINA
   O conteúdo do salão é full-bleed (o topo e a grade já têm o próprio
   padding). A navegação reusa o layout padrão dos outros módulos.
   ========================================================================== */
.app-container .conteudo { padding: 0; }

/* Grade das mesas: derivada de `.grid-mesas` (kds.css). A especificidade
   (0,2,0) é DE PROPÓSITO: sobrepõe o KDS sem tocar no arquivo compartilhado.
   As colunas são `minmax(0, 1fr)` para o card poder ENCOLHER — é isso que
   impede a rolagem horizontal da página em telas estreitas. */
.grid-mesas.salao-grade {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    align-items: stretch;
    gap: 16px;
    padding: 16px 20px 4px;
}

/* Estado da grade: carregando / falha / vazio (nunca um salão "sem mesas"
   quando o que houve foi falha de consulta). */
.salao-aviso-grade { padding: 0 20px; }
.salao-aviso-grade:empty { display: none; }

/* ==========================================================================
   2. TOPO E BARRA DE AVISOS
   ========================================================================== */
.topo-kds { gap: 10px; }
.topo-acoes { align-items: center; }

/* Barra de contagens: um chip por fila, com rótulo explícito. */
.salao-barra {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; padding: 12px 20px 0;
}

.salao-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; font-size: .9rem; font-weight: bold;
    border: 1px solid var(--borda); background: var(--bg-secundario);
    color: var(--texto-principal); white-space: nowrap;
}
.salao-chip-agora    { background: #e3f2fd; border-color: #90caf9; color: #0d47a1; }
.salao-chip-pronto   { background: #fff8e1; border-color: #ffe082; color: #8d6e00; }
.salao-chip-pgto     { background: #f3e5f5; border-color: #ce93d8; color: #6a1b9a; }
.salao-chip-chamando { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.salao-chip-acesso   { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.salao-chip-travado  { background: #fff3e0; border-color: #ffb74d; color: #b25000; }

/* Crachá de acessos no botão do topo. */
.salao-badge {
    background: var(--alerta-erro); color: #fff; border-radius: 999px;
    padding: 2px 9px; font-size: .85rem; font-weight: bold; margin-left: 6px;
}

/* Faixa de mensagem momentânea (ok / erro) — nunca silenciosa. */
.salao-faixa-aviso {
    margin: 10px 20px 0; padding: 10px 14px; border-radius: 10px;
    font-size: .95rem; font-weight: bold;
    border: 1px solid var(--borda); background: var(--bg-secundario);
    color: var(--texto-principal); overflow-wrap: anywhere;
}
.salao-faixa-ok   { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.salao-faixa-erro { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }

/* Faixa de dados desatualizados: avisa E oferece a atualização. */
.salao-faixa-desatualizado {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin: 10px 20px 0; padding: 10px 14px; border-radius: 10px;
    background: #fff3e0; border: 1px solid #ffb74d; color: #b25000;
    font-size: .95rem; font-weight: bold; overflow-wrap: anywhere;
}


/* ==========================================================================
   3. CARDS DAS MESAS
   Estrutura fixa em três faixas. O card é uma coluna flex com `height: 100%`
   e o rodapé tem `margin-top: auto`: os botões ficam sempre na MESMA linha
   entre cards vizinhos, qualquer que seja o tamanho dos textos.
   ========================================================================== */
.salao-card {
    height: 100%;
    overflow-wrap: anywhere;   /* textos longos quebram em vez de vazar */
}

/* --- faixa 1: topo (nome + status) — alturas iguais em todos os cards --- */
.salao-card .salao-card-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borda);
    background: var(--bg-principal);
}
.salao-card .salao-card-titulo {
    margin: 0; font-size: 1.15rem; line-height: 1.2;
    color: var(--texto-principal); min-width: 0;
}

/* --- faixa 2: corpo (informações + indicadores + bloqueio) --- */
.salao-card .salao-card-corpo {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 14px; flex: 1 1 auto; min-width: 0;
}

.salao-info { display: flex; flex-direction: column; gap: 4px; }
.salao-info-linha {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; font-size: .88rem; min-width: 0;
}
.salao-info-rotulo { color: var(--texto-secundario); flex: 0 0 auto; }
.salao-info-valor {
    color: var(--texto-principal); font-weight: bold; text-align: right;
    min-width: 0; overflow-wrap: anywhere;
}

/* Indicadores compactos: uma linha que quebra, nunca sobrepõe. */
.salao-selos { display: flex; flex-wrap: wrap; gap: 6px; }

.salao-selo {
    display: inline-flex; align-items: center; max-width: 100%;
    padding: 3px 9px; border-radius: 999px;
    font-size: .8rem; font-weight: bold; line-height: 1.4;
    border: 1px solid var(--borda); background: var(--bg-principal);
    color: var(--texto-secundario); overflow-wrap: anywhere;
}
.salao-selo-agora    { background: #e3f2fd; border-color: #90caf9; color: #0d47a1; }
.salao-selo-pronto   { background: #fff8e1; border-color: #ffe082; color: #8d6e00; }
.salao-selo-pgto     { background: #f3e5f5; border-color: #ce93d8; color: #6a1b9a; }
.salao-selo-acesso   { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.salao-selo-chamando { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.salao-selo-neutro   { background: var(--bg-principal); color: var(--texto-secundario); }
.salao-selo-destaque { border-width: 2px; }

/* Rótulos de status da MESA vêm de `js/mesas-status.js` (fonte única). */
.salao-selo-status.status-livre { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
.salao-selo-status.status-ocupada { background: #fdecea; border-color: #f5b5b0; color: #b3261e; }
.salao-selo-status.status-aguardando-pagamento { background: #fff3e0; border-color: #ffb74d; color: #b25000; }

/* Mensagem de bloqueio: compacta, em bloco próprio (não deforma o card). */
.salao-card-bloqueio {
    margin: 0; padding: 8px 10px; border-radius: 8px;
    background: #ffebee; border: 1px solid #ef9a9a; color: #b71c1c;
    font-size: .85rem; font-weight: bold; overflow-wrap: anywhere;
}

/* --- faixa 3: ações (sempre no rodapé do card) --- */
.salao-card .salao-card-acoes {
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: center; justify-content: flex-end;
    margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--borda);
    background: var(--bg-principal);
}
.salao-card .salao-card-acoes .salao-btn { flex: 1 1 auto; }

/* ==========================================================================
   4. AS TRÊS FILAS + AVISOS
   Colunas independentes no desktop, empilhadas no smartphone. As seções
   ficam SEMPRE visíveis: cada uma mostra a própria contagem e o próprio
   vazio — é assim que "fila vazia" deixa de se confundir com "falhou".
   ========================================================================== */
.salao-filas {
    display: grid; gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 16px 20px 0;
}

#secao-avisos { margin: 16px 20px 24px; }

.salao-fila {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--bg-secundario); border: 1px solid var(--borda);
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.salao-fila-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 14px;
    border-bottom: 4px solid var(--borda); background: var(--bg-principal);
}
.salao-fila-topo h3 {
    margin: 0; font-size: 1rem; line-height: 1.3;
    color: var(--texto-principal); min-width: 0; overflow-wrap: anywhere;
}
.salao-fila-agora   .salao-fila-topo { border-bottom-color: #90caf9; }
.salao-fila-pronto  .salao-fila-topo { border-bottom-color: #ffe082; }
.salao-fila-pgto    .salao-fila-topo { border-bottom-color: #ce93d8; }
.salao-fila-avisos  .salao-fila-topo { border-bottom-color: #ef9a9a; }

/* Fila com dados não confirmados: o visual avisa antes do clique. */
.salao-fila-travada { border-color: #ffb74d; }

.salao-conta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; padding: 2px 10px; border-radius: 999px;
    font-size: .9rem; font-weight: bold;
    background: var(--bg-secundario); border: 1px solid var(--borda);
    color: var(--texto-principal);
}

.salao-lista { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }

/* Linha operacional: texto à esquerda, ação à direita; quebra se faltar
   espaço (nunca sobrepõe, nunca força rolagem horizontal). */
.salao-linha {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
    background: var(--bg-principal); min-width: 0;
}
.salao-linha-texto { min-width: 0; flex: 1 1 180px; }
.salao-linha-texto strong {
    display: block; color: var(--texto-principal);
    font-size: .95rem; overflow-wrap: anywhere;
}
.salao-linha-texto small {
    display: block; color: var(--texto-secundario);
    font-size: .82rem; overflow-wrap: anywhere;
}
.salao-linha-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Avisos (chamar garçom / acesso para responder). */
.salao-aviso {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px; font-size: .9rem; font-weight: bold;
    border: 1px solid var(--borda); background: var(--bg-principal);
    color: var(--texto-principal); overflow-wrap: anywhere;
}
.salao-aviso-chamando { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.salao-aviso-acesso   { background: #e3f2fd; border-color: #90caf9; color: #0d47a1; }

.salao-subtitulo {
    margin: 14px 0 8px 0; font-size: 1rem; color: var(--texto-principal);
}
.salao-vazio-texto { margin: 0; color: var(--texto-secundario); font-size: .92rem; }

/* Estado de lista/grade: título, explicação e (quando faz sentido) a ação
   de tentar de novo. */
.salao-vazio {
    display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
    padding: 12px; border: 1px dashed var(--borda); border-radius: 8px;
    background: var(--bg-principal); min-width: 0;
}
.salao-vazio strong { color: var(--texto-principal); overflow-wrap: anywhere; }
.salao-vazio span { color: var(--texto-secundario); font-size: .9rem; overflow-wrap: anywhere; }