/* ==========================================================
   Painel do Garçom — identidade visual
   Referência: painéis de chamada/senha de restaurante (placar
   digital de cozinha), não um dashboard genérico de SaaS.
   ========================================================== */

:root {
  --bg: #14110F;
  --bg-panel: #1E1915;
  --bg-panel-2: #24201B;
  --ember: #FF5A36;
  --amber: #FFB627;
  --sage: #5FAE82;
  --ash: #7A6F63;
  --paper: #F5EFE6;
  --paper-dim: #B8AC9C;
  --line: rgba(245, 239, 230, 0.09);

  --font-display: 'JetBrains Mono', ui-monospace, monospace;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-title: 'Space Grotesk', 'Manrope', system-ui, sans-serif;

  --radius: 18px;
}

* { box-sizing: border-box; }

/* Sem isso, uma classe com "display: flex/grid" (como .spotlight) vence a
   regra padrão do navegador pro atributo hidden, e o elemento continua
   visível mesmo "escondido" via JS — foi a causa do card ficar piscando
   depois de atendido. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--paper);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* leve profundidade no fundo — dois brilhos suaves (âmbar/verde) ancorados
   nos cantos, pra telas grandes (monitor/TV na parede) não ficarem com uma
   parede de preto liso e vazia atrás do palco. Sutil de propósito: não pode
   competir com o brilho do spotlight quando uma mesa está chamando. */
body {
  background:
    radial-gradient(60vw 60vh at 12% -10%, rgba(255, 182, 39, 0.05), transparent 60%),
    radial-gradient(50vw 50vh at 100% 10%, rgba(95, 174, 130, 0.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a { color: inherit; }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--amber);
  margin: 0 0 0.75rem;
}

/* ---------- topbar (comum às 3 páginas) ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  padding: 1rem clamp(1rem, 3.5vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  /* sólido (sem backdrop-filter): esse filtro faz o Chrome tratar a
     topbar como "containing block" pra tudo que é position:fixed lá
     dentro — inclusive o menu do filtro de local no celular, que
     centralizava em relação à faixa do cabeçalho em vez da tela
     inteira. Nada de blur aqui pra não reabrir esse problema. */
  background: rgba(20, 17, 15, 0.97);
}

.topbar .status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ash);
  flex-shrink: 0;
}
.dot.online  { background: var(--sage); box-shadow: 0 0 0 4px rgba(95,174,130,0.18); }
.dot.offline { background: var(--ember); box-shadow: 0 0 0 4px rgba(255,90,54,0.18); }

.topbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
}

.relogio {
  font-family: var(--font-display);
  color: var(--paper-dim);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.btn-som {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--paper-dim);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  flex-shrink: 0;
  min-height: 40px;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn-som:hover { border-color: var(--amber); color: var(--paper); }
.btn-som:active { transform: scale(0.96); }
.btn-som[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--amber);
}

.config-timeout {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-timeout {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  color: var(--paper-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.btn-timeout:hover { border-color: var(--amber); }
.btn-timeout:active { transform: scale(0.95); }

.icone-timer { font-size: 0.95rem; line-height: 1; }
.valor-timer {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--paper);
  font-size: 0.8rem;
}

.input-timeout {
  /* box-sizing: border-box (global) faz o width incluir o padding — sem
     separar os dois no calc(), o número ficava cortado, mal cabendo 1
     dígito visível */
  width: calc(4.5ch + 1.7rem);
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  border-radius: 999px;
  padding: 0.44rem 0.8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--paper);
  text-align: center;
}
.input-timeout:focus { outline: none; }
.input-timeout.erro {
  border-color: var(--ember);
  animation: tremor-input 0.3s ease;
}

@keyframes tremor-input {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ---------- palco (painel principal) ---------- */

.palco {
  min-height: clamp(420px, 58vh, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vh, 3rem) 1.5rem 2rem;
  text-align: center;
  position: relative;
}

.estado-vazio h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--paper-dim);
  margin: 0;
  animation: respirar 4s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.spotlight { display: flex; flex-direction: column; align-items: center; }

.anel-pulso {
  position: relative;
  border-radius: calc(var(--radius) + 14px);
  padding: 14px;
  animation: pulso-calmo 2.4s ease-in-out infinite;
}
.anel-pulso.sucesso {
  animation: pulso-sucesso 0.55s ease-out;
}
.anel-pulso.expirou {
  animation: pulso-expirou 0.55s ease-out;
}

/* ---------- escalada de urgência: calmo → alerta → crítico → explodiu ----------
   controlada por uma classe no #spotlight (ancestral comum do anel e do
   cartão), pra não precisar sincronizar duas classes soltas em elementos
   diferentes. Ver LIMITE_TIMEOUT_SEG / FASE_ALERTA_SEG / FASE_CRITICA_SEG
   no painel.js — os limites em JS precisam bater com essas frações. */

#spotlight.fase-alerta .anel-pulso {
  animation: pulso-alerta 1.3s ease-in-out infinite;
}
#spotlight.fase-critica .anel-pulso {
  animation: pulso-critica 0.5s ease-in-out infinite;
}
#spotlight.fase-explodiu .anel-pulso {
  animation: explosao 0.6s ease-out forwards;
}
#spotlight.fase-explodiu .mesa-flip {
  animation: tremor 0.4s ease-out;
}

#spotlight.fase-alerta .tempo-espera span   { color: #FF8C28; }
#spotlight.fase-critica .tempo-espera span  { color: var(--ember); }
#spotlight.fase-explodiu .tempo-espera span { color: var(--ash); }

@keyframes pulso-calmo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,54,0.0), 0 0 30px 0 rgba(255,90,54,0.12); }
  50%      { box-shadow: 0 0 0 10px rgba(255,90,54,0.06), 0 0 46px 6px rgba(255,90,54,0.22); }
}
@keyframes pulso-alerta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,140,40,0.15), 0 0 34px 2px rgba(255,140,40,0.25); }
  50%      { box-shadow: 0 0 0 12px rgba(255,140,40,0.10), 0 0 50px 8px rgba(255,140,40,0.4); }
}
@keyframes pulso-critica {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,45,45,0.2), 0 0 46px 8px rgba(255,45,45,0.42); }
  50%      { box-shadow: 0 0 0 20px rgba(255,45,45,0.16), 0 0 72px 16px rgba(255,45,45,0.6); }
}
@keyframes explosao {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.9), 0 0 0 0 rgba(255,45,45,0.9); }
  20%  { box-shadow: 0 0 0 14px rgba(255,255,255,0.55), 0 0 70px 24px rgba(255,45,45,0.75); }
  55%  { box-shadow: 0 0 0 50px rgba(255,140,40,0.12), 0 0 90px 30px rgba(255,45,45,0.35); }
  100% { box-shadow: 0 0 0 60px rgba(255,140,40,0), 0 0 0 0 rgba(255,45,45,0); }
}
@keyframes tremor {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%  { transform: translateX(-6px) rotate(-0.6deg); }
  40%  { transform: translateX(5px) rotate(0.6deg); }
  60%  { transform: translateX(-4px) rotate(-0.3deg); }
  80%  { transform: translateX(3px) rotate(0.3deg); }
}
@keyframes pulso-sucesso {
  0%   { box-shadow: 0 0 0 0 rgba(95,174,130,0.55); }
  100% { box-shadow: 0 0 0 44px rgba(95,174,130,0); }
}
@keyframes pulso-expirou {
  0%   { box-shadow: 0 0 0 0 rgba(122,111,99,0.55); }
  100% { box-shadow: 0 0 0 44px rgba(122,111,99,0); }
}

.icone-resultado {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  animation: icone-fade 0.55s ease-out;
}
.icone-resultado.sucesso { color: var(--sage); }
.icone-resultado.expirou { color: var(--ash); }

@keyframes icone-fade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.mesa-flip {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 4vh, 2.2rem) clamp(1.6rem, 8vw, 4.4rem);
  perspective: 700px;
}

.mesa-flip span {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  /* o termo em vh garante que, num monitor/TV grande e baixo (o uso real
     desse painel), o nome cresça com a altura da tela e não só a largura —
     sem isso ele saturava no teto de 5.5rem bem antes de aproveitar o
     espaço disponível numa tela 1920×1080 de verdade. */
  font-size: clamp(2.6rem, 7vw + 3vh, 7.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  transform-origin: center;
}

.mesa-flip.flip-in span {
  animation: flip 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes flip {
  0%   { transform: rotateX(90deg); opacity: 0; }
  55%  { transform: rotateX(0deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

.tempo-espera {
  font-family: var(--font-display);
  color: var(--paper-dim);
  margin-top: 1.1rem;
  font-size: 1rem;
}
.tempo-espera span { color: var(--amber); font-weight: 700; }

.fila {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  min-height: 2.2rem;
}

.chip {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-family: var(--font-display);
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  animation: entra-chip 0.35s ease-out;
}

@keyframes entra-chip {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- histórico ---------- */

.historico {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 3rem;
}

.historico-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem;
  margin-bottom: 0.4rem;
}
.historico-cabecalho h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--paper-dim);
  margin: 0;
  font-weight: 700;
}
.contador {
  font-family: var(--font-display);
  color: var(--amber);
  font-size: 0.85rem;
}

#listaHistorico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: item-rank;
}

.historico-item {
  counter-increment: item-rank;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 0.65rem 0.95rem;
  font-size: 0.95rem;
  font-weight: 600;
  animation: entra-ticket 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.historico-rank {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel-2);
  color: var(--paper-dim);
}
.historico-rank::before { content: counter(item-rank); }

.historico-nome { flex: 1; }

.historico-expirou {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--ash);
  opacity: 0.85;
}

/* a mais recente se destaca; as outras 3 vão desbotando pra trás */
.historico-item:nth-child(1) {
  border-left-color: var(--amber);
}
.historico-item:nth-child(1) .historico-rank {
  background: var(--amber);
  color: #1a1410;
}
.historico-item:nth-child(2) { opacity: 0.88; border-left-color: var(--paper-dim); }
.historico-item:nth-child(3) { opacity: 0.72; border-left-color: var(--line); }
.historico-item:nth-child(n+4) { opacity: 0.58; border-left-color: var(--line); }

@keyframes entra-ticket {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- páginas do garçom: comandas / comanda_mesa ---------- */

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.75rem;
}

.lista-mesas {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.cartao-mesa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--paper);
  transition: border-color 0.15s ease;
}
.cartao-mesa:hover { border-color: var(--amber); }
.cartao-mesa.chamando { border-color: var(--ember); }

/* a mesa que está em destaque no painel principal (a mais antiga da
   fila) ganha borda mais grossa piscando, além do border-color fixo
   que toda mesa "chamando" já tem */
.cartao-mesa.destaque-atual {
  border-width: 3px;
  animation: piscar-destaque 1.1s ease-in-out infinite;
}
@keyframes piscar-destaque {
  0%, 100% { border-color: var(--ember); box-shadow: 0 0 0 0 rgba(255,90,54,0); }
  50%      { border-color: var(--amber); box-shadow: 0 0 20px 3px rgba(255,90,54,0.4); }
}

.cartao-mesa .nome-mesa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 700;
  font-family: var(--font-display);
}

/* o nome normalmente cabe inteiro numa linha — o que quebra pra linha de
   baixo primeiro são os badges (são os últimos no flex-wrap). Mas um
   apelido de mesa bem comprido (o garçom digita livremente em
   /comandas/<id>) não pode ficar preso a uma única linha, senão o card
   inteiro vaza pra fora da tela; então o nome pode quebrar como último
   recurso, nunca cortando uma palavra ao meio sem necessidade. */
.texto-nome {
  min-width: 0;
  overflow-wrap: break-word;
}

.selo-chamando {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ember);
  background: rgba(255,90,54,0.14);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.selo-chamando:hover { transform: scale(1.08); }
.selo-chamando:active { transform: scale(0.94); }

.selo-chamando.confirmando {
  animation: confirmar-selo 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes confirmar-selo {
  0%   { background: rgba(255,90,54,0.14); color: var(--ember); transform: scale(1); }
  40%  { background: rgba(95,174,130,0.28); color: var(--sage); transform: scale(1.3); }
  100% { background: rgba(95,174,130,0.16); color: var(--sage); transform: scale(1); }
}

.cartao-mesa.confirmando {
  animation: flash-confirmar 0.6s ease-out;
}
@keyframes flash-confirmar {
  0%   { box-shadow: 0 0 0 0 rgba(95,174,130,0.5); border-color: var(--sage); }
  100% { box-shadow: 0 0 0 34px rgba(95,174,130,0); border-color: var(--line); }
}

/* margin-left:auto (em vez de depender do justify-content do pai) —
   assim a seta sempre vai pro canto direito, tanto quando cabe tudo numa
   linha quanto quando o nome+badges quebram e ela sobra sozinha numa
   linha nova */
.seta { color: var(--paper-dim); margin-left: auto; flex-shrink: 0; }

.voltar {
  display: inline-block;
  color: var(--paper-dim);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.voltar:hover { color: var(--paper); }

/* dentro da topbar ("ver painel →" em /comandas) esse link é só mais um
   item da linha — a margem de baixo (pensada pra separar o "← todas as
   comandas" do cartão, na comanda_mesa) só empurrava o texto pra cima,
   descentralizando ele dos outros controles ao lado. */
.topbar-right .voltar {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.cartao-comanda {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.cartao-comanda h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin: 0 0 0.25rem;
}
.mac {
  font-family: var(--font-display);
  color: var(--paper-dim);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.form-renomear {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}
.form-renomear input {
  flex: 1;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  color: var(--paper);
  font-family: var(--font-body);
}
.form-renomear button,
.btn-primario {
  background: var(--amber);
  color: #1a1410;
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.1rem;
  font-weight: 800;
}

.painel-pendente {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.painel-pendente p { color: var(--paper-dim); }
.painel-pendente .tempo-espera { margin: 0 0 1rem; font-size: 1.1rem; }

.btn-atender {
  width: 100%;
  background: var(--sage);
  color: #10261a;
  border: none;
  border-radius: 12px;
  padding: 1rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.sem-pendente { color: var(--paper-dim); border-top: 1px solid var(--line); padding-top: 1.5rem; }

/* ---------- multi-local: selo de Gateway + seletor de filtro ---------- */

/* Selo que identifica de qual Gateway/estabelecimento veio o chamado.
   Usa --sage (verde) de propósito, pra não competir visualmente com o
   --ember dos alertas "chamando" — é informação de contexto, não urgência. */
.badge-gateway {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sage);
  background: rgba(95, 174, 130, 0.14);
  border: 1px solid rgba(95, 174, 130, 0.3);
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* dentro do cartão de mesa nas Comandas, ao lado do nome */
.cartao-mesa .badge-gateway { margin-left: 0.1rem; }

/* dentro do histórico, entre o nome e o marcador de expirado */
.historico-item .badge-gateway { flex-shrink: 0; }

/* no spotlight do painel principal, abaixo do nome grande da mesa.
   ".mesa-flip span" (genérica, pro nome gigante) tem a mesma "força" de
   seletor em alguns navegadores — repetimos aqui as propriedades que
   precisam vencer (cor, peso, espaçamento), não só tamanho. */
.mesa-flip .badge-gateway {
  display: inline-flex;
  margin-top: 0.6rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sage);
  text-transform: uppercase;
}
.mesa-flip .badge-gateway:empty { display: none; }

/* na comanda individual, logo abaixo do título */
.cartao-comanda .badge-gateway { margin-bottom: 1rem; }

/* ---------- filtro de local: ícone + menu flutuante ----------
   Era um <select> nativo — feio e desproporcional (esticava ou
   encolhia sem controle, principalmente no celular). Agora é só um
   botão circular com um pino; passar o mouse (desktop) ou tocar
   (celular) abre um cartão com as opções, bem centralizado e
   destacado — sem depender da caixa de seleção do sistema. */

.filtro-gateway {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.filtro-botao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  overflow: hidden; /* emoji de local (📍) via fonte de emoji do sistema
    às vezes desenha bem maior que o tamanho de fonte pedido — sem isso
    ele estourava pra fora do círculo do botão, ficando distorcido */
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.filtro-botao:hover,
.filtro-botao[aria-expanded="true"] {
  border-color: var(--amber);
  color: var(--paper);
  background: var(--bg-panel-2);
}
.filtro-botao:active { transform: scale(0.94); }

/* pontinho âmbar no canto do ícone quando um local específico está
   selecionado — o único jeito de saber isso agora que não tem mais
   texto visível no botão */
.filtro-marca {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--bg);
}

.filtro-backdrop { display: none; }

.filtro-menu {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  min-width: 230px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.9rem;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 40;
  animation: filtro-menu-in 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.filtro-menu[hidden] { display: none; }

@keyframes filtro-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.filtro-titulo {
  margin: 0 0 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  color: var(--paper-dim);
  text-align: center;
}

.filtro-opcao {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.filtro-opcao:first-child { margin-top: 0; }
.filtro-opcao:hover { background: rgba(255, 182, 39, 0.12); color: var(--paper); }
.filtro-opcao.ativa {
  background: var(--amber);
  color: #1a1410;
  font-weight: 800;
}

/* linha de um local de verdade: nome (à esquerda, pode truncar) + lápis
   de editar. "Todos os locais" fica de fora disso — não é local nenhum,
   não tem o que renomear. */
.filtro-linha {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.filtro-linha .filtro-opcao {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtro-editar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--paper-dim);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.filtro-editar:hover,
.filtro-editar:focus-visible {
  background: rgba(255, 182, 39, 0.14);
  color: var(--amber);
  border-color: rgba(255, 182, 39, 0.32);
}

/* substitui o botão do nome enquanto edita — mesmo espaço, mesma linha */
.filtro-editar-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
}
.filtro-editar-input:focus { outline: none; }

/* no celular o menu vira um cartão centralizado na tela, com um véu
   escuro atrás — mais fácil de mirar com o dedo do que um dropdown
   grudado no cantinho do ícone */
@media (max-width: 640px) {
  .filtro-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 6, 0.62);
    backdrop-filter: blur(2px);
    z-index: 39;
  }
  .filtro-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    width: min(84vw, 340px);
    transform: translate(-50%, -50%);
    animation-name: filtro-menu-in-central;
    z-index: 41;
  }
  @keyframes filtro-menu-in-central {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
}

/* ---------- responsivo ---------- */

/* telas médias (tablet retrato): ainda cabe tudo numa linha, só aperta
   um pouco os espaçamentos */
@media (max-width: 820px) {
  .mesa-flip { padding: 1.4rem clamp(1.4rem, 6vw, 3.2rem); }
  .historico { padding: 1.25rem 1.25rem 2.5rem; }
}

/* celular: se não couber tudo numa linha, a topbar quebra em duas —
   marca em cima, controles (ícone de local + relógio + som) embaixo —
   como blocos inteiros, nunca palavra por palavra dentro da marca. */
@media (max-width: 640px) {
  .topbar { padding: 0.85rem 1rem; gap: 0.6rem 0.75rem; }
  .topbar .status { font-size: 0.98rem; }
  /* quando os controles quebram pra linha de baixo, ficam alinhados à
     esquerda — embaixo do título — em vez de espremidos lá na ponta
     direita, que lia como duas coisas soltas sem relação entre si */
  .topbar-right { width: 100%; justify-content: flex-start; }
  .relogio { margin-right: auto; }

  /* bolinha de status + título: em vez de ficar espremido e alinhado à
     esquerda junto com o resto, vira o "cabeçalho" da tela — sozinho na
     própria linha, ocupando toda a largura e centralizado, com uma fonte
     de exibição mais moderna (Space Grotesk) e um degradê âmbar→ember pra
     dar mais personalidade num espaço que agora sobra livre. */
  .topbar .status {
    width: 100%;
    justify-content: center;
    gap: 0.7rem;
    padding-bottom: 0.15rem;
  }
  .topbar .status .dot {
    width: 13px;
    height: 13px;
  }
  .topbar .status span:last-child {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--amber), var(--ember));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--paper);
  }

  .palco { padding: clamp(1.5rem, 6vw, 2.5rem) 1rem 1.5rem; }
  .mesa-flip { padding: 1.2rem 1.6rem; }
  .historico { padding: 1rem 1rem 2.25rem; }

  /* card de mesa em /comandas: nome + badge de local + selo "chamando"
     brigando por espaço numa linha só é o que fazia o card quebrar/
     esticar em altura no celular. Quando a mesa tem um badge de local,
     esse badge assume o papel do selo — muda pra cor de alerta e vira
     o botão de "dar baixa" — e o selo original só fica invisível (ele
     continua no DOM guardando os dados do chamado; comandas.js redireciona
     o clique do badge pra ele). */
  .nome-mesa:has(.badge-gateway) .selo-chamando {
    display: none;
  }
  .cartao-mesa.chamando .badge-gateway {
    color: var(--ember);
    background: rgba(255, 90, 54, 0.16);
    border-color: rgba(255, 90, 54, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .cartao-mesa.chamando .badge-gateway:active { transform: scale(0.94); }
  .cartao-mesa.chamando .badge-gateway.confirmando-badge {
    animation: confirmar-selo 0.5s ease-out forwards;
    pointer-events: none;
  }
}

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

/* ==========================================================
   /estatisticas — uso das mesas (gestão)
   ========================================================== */

.container-estatisticas {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.75rem clamp(1rem, 3.5vw, 1.75rem) 3rem;
}

.atualizado-em {
  font-family: var(--font-display);
  color: var(--paper-dim);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.aviso-mesa-nova {
  background: rgba(255, 182, 39, 0.1);
  border: 1px solid rgba(255, 182, 39, 0.3);
  border-radius: 12px;
  color: var(--paper);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin: 0 0 1.25rem;
}

.estado-vazio-lista {
  color: var(--paper-dim);
  text-align: center;
  padding: 3.5rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  max-width: 520px;
  margin: 1.5rem auto 0;
  line-height: 1.6;
}

/* ---------- resumo geral (KPIs) ---------- */

.resumo-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.kpi-tile {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.kpi-valor {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1vw + 1.3rem, 2rem);
  color: var(--paper);
  line-height: 1.1;
}

.kpi-label {
  font-family: var(--font-body);
  color: var(--paper-dim);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- tira de insights (ranking rápido) ---------- */

.insights-tira {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0 0 0.35rem;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
}

.insight-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 14px;
  padding: 0.7rem 1.05rem;
  min-width: 230px;
}

.insight-icone { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }

.insight-corpo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.insight-titulo {
  font-family: var(--font-display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--paper-dim);
}

.insight-mesa {
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insight-valor { color: var(--paper-dim); font-weight: 600; }

/* ---------- cabeçalho da grade + ordenação ---------- */

.grade-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.eyebrow-inline { margin: 0; }

.ordenar-controles { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.botao-ordenar {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--paper-dim);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  font-size: 0.78rem;
  font-family: var(--font-body);
  font-weight: 700;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.botao-ordenar:hover { border-color: var(--amber); color: var(--paper); }
.botao-ordenar.ativo { background: var(--amber); color: #1a1410; border-color: var(--amber); }

/* ---------- grade de cards por mesa ---------- */

.grade-mesas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.card-mesa-stats {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color 0.15s ease;
}
.card-mesa-stats:hover { border-color: rgba(255, 182, 39, 0.4); }

.card-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.titulo-mesa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 700;
  font-family: var(--font-display);
}

.card-acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.status-atividade {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ↺ zerar estatísticas — de propósito bem discreto (não é um botão de
   destaque) e nunca vermelho/"perigo": não apaga nada do banco, só marca
   a partir de onde recomeçar a contar */
.botao-resetar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.botao-resetar:hover { border-color: var(--amber); color: var(--amber); background: rgba(255, 182, 39, 0.08); }
.botao-resetar:active { transform: scale(0.92) rotate(-45deg); }
.botao-resetar.resetando { animation: girar-resetar 0.5s linear; pointer-events: none; }
@keyframes girar-resetar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.nota-reset { color: var(--paper-dim); }

.dot-status { width: 8px; height: 8px; border-radius: 50%; background: var(--ash); flex-shrink: 0; }
.status-ativa .dot-status     { background: var(--sage);  box-shadow: 0 0 0 3px rgba(95,174,130,0.18); }
.status-atencao .dot-status   { background: var(--amber); box-shadow: 0 0 0 3px rgba(255,182,39,0.18); }
.status-inativa .dot-status   { background: var(--ember); box-shadow: 0 0 0 3px rgba(255,90,54,0.18); }
.status-sem-dados .dot-status { background: var(--ash); }

.card-mac {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--paper-dim);
}

/* os 3 números pedidos — cliques totais / tempo em operação / média por hora */
.stat-principal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat-grande {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: center;
  min-width: 0;
}
.stat-grande + .stat-grande { border-left: 1px solid var(--line); }

.stat-valor {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.4rem);
  color: var(--paper);
  line-height: 1.15;
}
.stat-unidade { font-size: 0.7em; color: var(--paper-dim); font-weight: 600; }

.stat-rotulo {
  font-size: 0.66rem;
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: 0 0.2rem;
}

.stat-secundaria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}

.taxa-pill {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}
.taxa-boa       { color: var(--sage);      background: rgba(95,174,130,0.14); border: 1px solid rgba(95,174,130,0.3); }
.taxa-atencao   { color: var(--amber);     background: rgba(255,182,39,0.14); border: 1px solid rgba(255,182,39,0.32); }
.taxa-critica   { color: var(--ember);     background: rgba(255,90,54,0.14); border: 1px solid rgba(255,90,54,0.32); }
.taxa-sem-dados { color: var(--paper-dim); background: rgba(245,239,230,0.06); border: 1px solid var(--line); }

.stat-mini { font-size: 0.78rem; color: var(--paper-dim); }
.stat-mini strong { color: var(--paper); font-family: var(--font-display); font-weight: 700; }

/* ---------- heatmap de horário de pico (24 células, 1 por hora) ---------- */

.heatmap-bloco { display: flex; flex-direction: column; gap: 0.4rem; }

.mini-titulo {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.64rem;
  color: var(--paper-dim);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.mini-titulo-destaque { color: var(--amber); font-weight: 700; text-transform: none; letter-spacing: 0; white-space: nowrap; }

.heatmap-horas {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  height: 32px;
  align-items: stretch;
  background: var(--bg-panel-2);
  border-radius: 8px;
  padding: 4px;
}

/* sequencial (magnitude): 1 hue só (âmbar), mais chamados = mais opaco/vivo —
   no fundo escuro, "mais claro/vivo" é que lê como "mais", não "mais escuro" */
.celula-hora {
  display: block;
  border-radius: 3px;
  background: rgba(255, 182, 39, calc(0.08 + var(--intensidade, 0) * 0.84));
  transition: transform 0.1s ease;
}
.celula-hora:hover,
.celula-hora:focus-visible { transform: scaleY(1.1); outline: none; box-shadow: 0 0 0 1px var(--amber); }

.heatmap-eixo {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--paper-dim);
  opacity: 0.65;
  padding: 0 2px;
}

/* ---------- tendência diária (sparkline, últimos N dias) ---------- */

.sparkline-bloco { display: flex; flex-direction: column; gap: 0.4rem; }

.sparkline { display: flex; align-items: flex-end; gap: 3px; height: 40px; }

/* passado em --ash (de-ênfase), hoje em --amber (destaque) — mesma lógica
   do restante do app: a cor "quente" é reservada pro que importa agora */
.barra-dia {
  flex: 1 1 0;
  min-width: 4px;
  max-width: 16px;
  height: calc(8% + var(--altura, 0) * 92%);
  background: var(--ash);
  border-radius: 3px 3px 1px 1px;
  transition: transform 0.1s ease, background 0.15s ease;
}
.barra-dia:hover,
.barra-dia:focus-visible { transform: scaleY(1.06); outline: none; }
.barra-dia.hoje { background: var(--amber); }

/* ---------- tooltip flutuante (heatmap + sparkline) ---------- */

.tooltip-flutuante {
  position: fixed;
  z-index: 60;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.76rem;
  color: var(--paper);
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  transform: translate(-50%, -120%);
}
.tooltip-flutuante[hidden] { display: none; }
.tooltip-flutuante .tooltip-valor { color: var(--amber); font-weight: 700; }

/* ---------- responsivo ---------- */

@media (max-width: 820px) {
  .grade-mesas { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
}

@media (max-width: 640px) {
  .container-estatisticas { padding: 1.25rem 1rem 2.5rem; }
  .grade-mesas { grid-template-columns: 1fr; }
  .resumo-kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-valor { font-size: 1.4rem; }
  .stat-valor { font-size: 1.15rem; }
  .heatmap-horas { height: 28px; }

  /* a borda de 9% de opacidade (--line) some contra o fundo quase-preto em
     telas pequenas — reforça o contorno do card com uma auréola desfocada
     em vez de simplesmente engrossar a linha, que ficaria dura demais */
  .card-mesa-stats {
    border-color: rgba(245, 239, 230, 0.22);
    box-shadow: 0 0 0 1px rgba(245, 239, 230, 0.06), 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}