:root {
  --bg: #15181d;
  --painel: #1e2229;
  --painel-2: #262b34;
  --borda: #333a45;
  --texto: #eef1f5;
  --texto-suave: #9aa3b0;
  --acento: #f2c230; /* amarelo do logo Coletivo Saruê */
  --acento-escuro: #c79e1d;
  --verde: #34c77b;
  --amarelo: #f0c419;
  --vermelho: #ef5b5b;
  --azul-fin: #4da3ff; /* azul do módulo financeiro (diferencia do Caixa) */
  --laranja: #ff8c2e;
  --raio: 14px;
  --nav-w: 64px;   /* largura da barra lateral (alargada no desktop) */
  --topo-h: 54px;  /* altura do cabeçalho */
  --conteudo-max: 900px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--texto);
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

h1, h2, h3 { margin: 0 0 12px; }
h2 { font-size: 20px; }
h3 { font-size: 15px; color: var(--texto-suave); margin-top: 22px; text-transform: uppercase; letter-spacing: .04em; }

button { font-family: inherit; font-size: 15px; cursor: pointer; border: none; border-radius: 10px; }

/* ===== campos ===== */
.campo, input, select, textarea {
  font-family: inherit;
  font-size: 16px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: var(--painel-2);
  color: var(--texto);
  margin-bottom: 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); border-color: transparent; }
input::placeholder { color: var(--texto-suave); }

/* ===== botões ===== */
.btn-primario {
  background: var(--acento);
  color: #1a1408;
  font-weight: 700;
  padding: 12px 18px;
}
.btn-primario:active { background: var(--acento-escuro); }
.btn-secundario {
  background: var(--painel-2);
  color: var(--texto);
  border: 1px solid var(--borda);
  padding: 11px 16px;
}
.btn-link { background: none; color: var(--acento); padding: 8px; }
.btn-perigo { background: rgba(239, 91, 91, .15); color: var(--vermelho); padding: 11px 16px; }

/* ===== login ===== */
.tela-login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
}

.copyright {
  text-align: center;
  font-size: 11.5px;
  color: var(--texto-suave);
  margin: 28px 0 0;
}
.logo-jca-rodape {
  display: block;
  margin: 6px auto 18px;
  width: 96px;
  max-width: 40%;
  height: auto;
  opacity: 0.9;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 26px 24px 18px;
  text-align: center;
}
.login-logo img {
  width: 140px;
  height: 140px;
  border-radius: 24px;
  object-fit: cover;
  background: #fff;
}
.topo-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.login-card h1 { font-size: 26px; margin: 6px 0 2px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 22px; }
.aviso-demo { font-size: 13px; color: var(--texto-suave); margin-bottom: 14px; }
.btn-papel {
  display: block;
  width: 100%;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--painel-2);
  border: 1px solid var(--borda);
  color: var(--texto);
  font-size: 16px;
  text-align: left;
}
.btn-papel:active { border-color: var(--acento); }
#formLogin button { width: 100%; }
.msg { font-size: 13px; color: var(--texto-suave); min-height: 16px; }
/* quando não há mensagem de erro, o campo colapsa para o card não ficar com espaço vazio abaixo do botão */
#loginDemoMsg:empty { min-height: 0; margin: 0; }

/* campo de senha com olhinho */
.campo-senha { position: relative; margin-bottom: 10px; }
.campo-senha input { margin-bottom: 0; padding-right: 46px; width: 100%; }
.btn-olho {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 18px;
  cursor: pointer;
}

/* ===== shell ===== */
.topo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topo-h);
  padding: 0 16px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topo strong { flex: 1; font-size: 17px; }
#btnMensagens { position: relative; font-size: 18px; padding: 6px 8px; }
.msg-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--vermelho);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.item-linha.alerta-novo { border-color: var(--acento); background: rgba(245, 166, 35, .07); }
.badge {
  background: rgba(245, 166, 35, .15);
  color: var(--acento);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  text-transform: capitalize;
}

#conteudo {
  /* fica após a barra lateral e se centraliza quando há espaço sobrando (telas largas) */
  max-width: var(--conteudo-max);
  margin-left: max(var(--nav-w), calc((100vw - var(--conteudo-max)) / 2));
  margin-right: auto;
  padding: 18px 16px 28px;
}

.aba-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.aba-topo h2 { margin: 0; }

/* ===== navegação lateral ===== */
#navAbas {
  position: fixed;
  top: var(--topo-h); /* abaixo do cabeçalho */
  left: 0;
  bottom: 0;
  width: var(--nav-w);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--painel);
  border-right: 1px solid var(--borda);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  z-index: 5;
  overflow-y: auto;
}
#navAbas button {
  background: none;
  color: var(--texto-suave);
  font-size: 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 2px;
  border-radius: 0;
}
#navAbas button span { font-size: 10px; }
#navAbas button.ativa { color: var(--acento); background: rgba(245, 166, 35, .10); }

/* ===== Tablet: barra lateral um pouco maior e mais respiro ===== */
@media (min-width: 700px) {
  :root { --nav-w: 88px; }
  #navAbas button { font-size: 24px; padding: 13px 2px; }
  #navAbas button span { font-size: 11.5px; }
  #conteudo { padding: 22px 24px 32px; }
}

/* ===== Desktop: barra lateral larga com rótulo ao lado do ícone ===== */
@media (min-width: 1024px) {
  :root { --nav-w: 212px; }
  #navAbas { gap: 6px; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); }
  #navAbas button {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    font-size: 20px;
    padding: 13px 16px;
    border-radius: 10px;
  }
  #navAbas button span { font-size: 15px; }
  #navAbas button:hover { background: var(--painel-2); color: var(--texto); }
  #navAbas button.ativa:hover { color: var(--acento); }
}

/* ===== cards de comanda ===== */
.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card-comanda {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-comanda:active { border-color: var(--acento); }
.card-comanda .nome { font-weight: 700; font-size: 17px; }
.card-comanda .meta { color: var(--texto-suave); font-size: 13px; }
.card-comanda .total { color: var(--acento); font-weight: 700; font-size: 18px; margin-top: 4px; }
.vazio { color: var(--texto-suave); text-align: center; padding: 30px 10px; }

/* ===== mesas ===== */
.legenda { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 4px 12px; border-radius: 99px; font-weight: 600; }
.chip-livre { background: rgba(52, 199, 123, .15); color: var(--verde); }
.chip-reservada { background: rgba(240, 196, 25, .15); color: var(--amarelo); }
.chip-ocupada { background: rgba(239, 91, 91, .15); color: var(--vermelho); }

.grade-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.mesa {
  border-radius: var(--raio);
  padding: 14px 6px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--borda);
  background: var(--painel);
}
.mesa .numero { font-size: 24px; font-weight: 800; display: block; }
.mesa .estado { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mesa.livre .estado { color: var(--verde); }
.mesa.reservada { border-color: var(--amarelo); }
.mesa.reservada .estado { color: var(--amarelo); }
.mesa.ocupada { border-color: var(--vermelho); }
.mesa.ocupada .estado { color: var(--vermelho); }
.mesa-pessoas { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 2px; }

/* ===== cozinha (painel de pedidos) ===== */
.cozinha-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cozinha-card {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--verde);
  border-radius: var(--raio);
  padding: 12px 14px;
}
.cozinha-card.tem-pendente { border-left-color: var(--vermelho); }
.cozinha-card-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cozinha-card-topo strong { font-size: 17px; }
.cozinha-mesa { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.cozinha-tempo { margin-left: auto; color: var(--texto-suave); font-size: 12px; }
.cozinha-cliente { color: var(--texto-suave); font-size: 13px; margin-bottom: 10px; }
.cozinha-card .btn-imprimir { width: 100%; margin-top: 10px; }
.cozinha-itens { display: flex; flex-direction: column; gap: 6px; }
.cozinha-item { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-top: 1px solid var(--borda); }
.cozinha-item .ci-qtd { font-weight: 800; color: var(--acento); min-width: 26px; }
.cozinha-item .ci-nome { flex: 1; min-width: 0; }
.cozinha-item .ci-acao { display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex-shrink: 0; }
.cozinha-item .ci-acao .btn-mini { width: 100%; }
.cozinha-item .ci-status { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.cozinha-item.st-pendente .ci-status { color: var(--vermelho); }
.cozinha-item.st-preparando .ci-status { color: var(--amarelo); }
.cozinha-item.st-pronto { opacity: .65; }
.cozinha-item.st-pronto .ci-status { color: var(--verde); }

/* busca de comanda no pedido do bar */
.lista-rolavel { max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
.comanda-sel {
  background: var(--painel-2);
  border: 1px solid var(--acento);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.comanda-sel .cs-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.comanda-sel .cs-topo strong { font-size: 17px; color: var(--acento); }
.comanda-sel .cs-linha { font-size: 14px; padding: 2px 0; }

/* ===== listas ===== */
.lista-simples { display: flex; flex-direction: column; gap: 8px; }
.item-linha {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.item-linha .cresce { flex: 1; min-width: 0; }
.item-linha .titulo { font-weight: 600; }
.item-linha .sub { color: var(--texto-suave); font-size: 12.5px; }
.item-linha .valor { font-weight: 700; white-space: nowrap; }

.btn-mini {
  background: var(--painel-2);
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 7px 12px;
  font-size: 14px;
  border-radius: 8px;
  white-space: nowrap;
}
.btn-mini.destaque { background: var(--acento); color: #1a1408; font-weight: 700; border: none; }
.btn-mini.perigo { color: var(--vermelho); }

.qtd-controles { display: flex; align-items: center; gap: 8px; }
.qtd-controles .qtd { min-width: 22px; text-align: center; font-weight: 700; }

/* ===== portaria ===== */
.contador {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 15px;
}
.contador strong { color: var(--acento); font-size: 20px; }
.linha-busca { display: flex; gap: 8px; }
.linha-busca input { flex: 1; margin-bottom: 12px; }
.linha-busca button { margin-bottom: 12px; white-space: nowrap; }
.checkin-ok { color: var(--verde); font-weight: 600; font-size: 13px; white-space: nowrap; }

/* linhas nome + telefone ao adicionar convidados */
.linha-convidado { display: grid; grid-template-columns: 1fr 140px; gap: 8px; }
.linha-convidado input { margin-bottom: 8px; }

/* gráfico de sexo da portaria */
#graficoSexo:empty { display: none; }
#graficoSexo { margin-bottom: 12px; }
.sexo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.sexo-card {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}
.sexo-card small { display: block; color: var(--texto-suave); margin-bottom: 2px; font-size: 12px; }
.sexo-card strong { font-size: 22px; }
.sexo-card.s-h { border-color: #5b8def; }
.sexo-card.s-h strong { color: #6c9bff; }
.sexo-card.s-m { border-color: #e06aa8; }
.sexo-card.s-m strong { color: #f08cc4; }
.sexo-card.s-t strong { color: var(--acento); }
.sexo-barra {
  display: flex;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--painel-2);
  border: 1px solid var(--borda);
}
.sexo-barra .seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  min-width: 18px;
}
.sexo-barra .seg-h { background: #5b8def; }
.sexo-barra .seg-m { background: #e06aa8; }
.sexo-barra .seg-n { background: #56606e; }
.sexo-legenda { font-size: 12px; color: var(--texto-suave); margin: 6px 0 0; }

/* campo de isentos por sexo */
.isentos-resumo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
}
.isentos-resumo .iso-tit { color: var(--texto-suave); font-size: 13px; flex: 1; min-width: 110px; }
.isentos-resumo .iso-val { font-weight: 700; font-size: 14px; }
.isentos-resumo .iso-h { color: #6c9bff; }
.isentos-resumo .iso-m { color: #f08cc4; }
.isentos-resumo .iso-t { color: var(--acento); }

/* marca de sexo (♂/♀) antes do nome na listagem */
.sexo-marca { font-weight: 700; }
.sexo-marca.s-h { color: #6c9bff; }
.sexo-marca.s-m { color: #f08cc4; }
.bloco-colar { margin: 4px 0 12px; }
.bloco-colar summary { cursor: pointer; color: var(--acento); font-size: 14px; padding: 6px 0; }
.bloco-colar textarea { margin-top: 8px; }

/* caixa "puxar da portaria" na reserva */
.box-portaria {
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 12px;
  margin: 4px 0 12px;
  background: var(--painel-2);
}
.lista-portaria { max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
.check-portaria {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--borda);
  font-size: 15px;
}
.check-portaria:last-child { border-bottom: none; }
.check-portaria input { width: auto; margin: 0; }

/* ===== produtos ===== */
.form-produto {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
  margin-bottom: 18px;
}
.linha-2 { display: grid; grid-template-columns: 1fr 130px; gap: 10px; }
.bloco-novo { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px 14px; margin: 4px 0 6px; }
.bloco-novo legend { padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--acento); }
.ou-existente { display: block; text-align: center; color: var(--texto-suave); font-size: 12px; margin: 12px 0 4px; }
.form-produto button { width: 100%; }
.grupo-categoria { margin: 18px 0 8px; color: var(--acento); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.produto-inativo { opacity: .45; }

/* ===== relatórios ===== */
.cards-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.card-resumo {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
}
.card-resumo small { color: var(--texto-suave); display: block; margin-bottom: 4px; }
.card-resumo strong { font-size: 20px; }
.card-resumo.destaque-mes {
  background: rgba(245, 166, 35, .12);
  border-color: var(--acento);
}
.card-resumo.destaque-mes strong { color: var(--acento); }
.card-resumo.alerta { border-color: var(--vermelho); background: rgba(239, 91, 91, .10); }
.card-resumo.alerta strong { color: var(--vermelho); }
.card-resumo.aviso { border-color: var(--amarelo); background: rgba(240, 196, 25, .10); }
.card-resumo.aviso strong { color: var(--amarelo); }

/* item de estoque abaixo do mínimo */
.item-linha.estoque-baixo { border-color: var(--vermelho); }

/* ===== tema azul do módulo financeiro (visual distinto do Caixa) ===== */
@keyframes cintilaAzul {
  0%, 100% { text-shadow: 0 0 5px rgba(77, 163, 255, .35); }
  50% { text-shadow: 0 0 13px rgba(77, 163, 255, .9), 0 0 4px rgba(77, 163, 255, .6); }
}
#abaFinanceiro h2,
#abaFinanceiro h3 {
  color: var(--azul-fin);
  animation: cintilaAzul 2.4s ease-in-out infinite;
}
/* quadros (cards) com borda azul; alertas (vermelho/amarelo) continuam sobrepondo */
#abaFinanceiro .card-resumo:not(.alerta):not(.aviso) {
  border-color: var(--azul-fin);
  background: rgba(77, 163, 255, .07);
  box-shadow: 0 0 12px rgba(77, 163, 255, .12);
}
#abaFinanceiro .card-resumo:not(.alerta):not(.aviso) small {
  color: var(--azul-fin);
  animation: cintilaAzul 2.4s ease-in-out infinite;
}
/* cores condicionais do valor (mantêm a borda/nome azuis) */
#abaFinanceiro .card-resumo.val-vermelho strong { color: var(--vermelho); }
#abaFinanceiro .card-resumo.val-laranja strong { color: var(--laranja); }
/* bordas azuis também no gráfico e nas listas de contas */
#abaFinanceiro .grafico-barras,
#finListaPagar .item-linha,
#finListaReceber .item-linha {
  border-color: var(--azul-fin);
}
#abaFinanceiro .fin-mes input { border-color: var(--azul-fin); }

/* financeiro */
.fin-mes { font-size: 12px; color: var(--texto-suave); display: flex; flex-direction: column; gap: 4px; }
.fin-mes input { margin: 0; }
.fin-secao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }
.fin-secao-topo h3 { margin: 0; }
.fin-mes-grupo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fin-mes-rotulo { width: 52px; flex-shrink: 0; font-size: 12.5px; color: var(--texto-suave); }
.fin-barras { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.barra-preenchida.verde { background: linear-gradient(90deg, #2a9d63, var(--verde)); }
.barra-preenchida.vermelho { background: linear-gradient(90deg, #c44, var(--vermelho)); }
.fin-mes-grupo .barra-trilho { height: 16px; }
.fin-mes-grupo .barra-valor { width: 78px; font-size: 12px; }

/* em telas estreitas, os botões de ação do produto vão para uma 2ª linha
   (mantém o nome do produto inteiro em uma linha só) */
@media (max-width: 560px) {
  #listaProdutos .item-linha { flex-wrap: wrap; }
  #listaProdutos .item-linha .cresce { flex-basis: 100%; margin-bottom: 8px; }
  #listaProdutos .item-linha .btn-mini { flex: 1; }
  /* portaria: nome em uma linha, botões (check-in/isento/remover) na linha de baixo */
  #listaConvidados .item-linha { flex-wrap: wrap; }
  #listaConvidados .item-linha .cresce { flex-basis: 100%; margin-bottom: 8px; }
  #listaConvidados .item-linha .checkin-ok { flex: 1; }
  /* estoque: nome em cima, botões de ação distribuídos abaixo */
  #listaEstoque .item-linha { flex-wrap: wrap; }
  #listaEstoque .item-linha .cresce { flex-basis: 100%; margin-bottom: 8px; }
  #listaEstoque .item-linha .btn-mini { flex: 1; }
  /* financeiro: descrição em cima, valor/status/ações abaixo */
  #finListaPagar .item-linha, #finListaReceber .item-linha { flex-wrap: wrap; }
  #finListaPagar .item-linha .cresce, #finListaReceber .item-linha .cresce { flex-basis: 100%; margin-bottom: 8px; }
}

/* controles do gráfico */
.grafico-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.toggle-periodo { display: flex; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.toggle-periodo button {
  background: var(--painel-2);
  color: var(--texto-suave);
  padding: 10px 16px;
  border-radius: 0;
  font-size: 14px;
}
.toggle-periodo button.ativa { background: var(--acento); color: #1a1408; font-weight: 700; }
.grafico-datas { display: flex; gap: 10px; flex: 1; }
.grafico-datas label { font-size: 12px; color: var(--texto-suave); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.grafico-datas input { margin: 0; }

/* gráfico de barras de faturamento */
.grafico-barras {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.barra-linha { display: flex; align-items: center; gap: 10px; }
.barra-rotulo { font-size: 12.5px; color: var(--texto-suave); width: 64px; flex-shrink: 0; }
.barra-trilho { flex: 1; background: var(--painel-2); border-radius: 6px; height: 22px; overflow: hidden; }
.barra-preenchida {
  height: 100%;
  background: linear-gradient(90deg, var(--acento-escuro), var(--acento));
  border-radius: 6px;
  transition: width .3s ease;
}
.barra-valor { font-size: 13px; font-weight: 700; width: 84px; text-align: right; flex-shrink: 0; }

/* ===== detalhe da comanda ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.overlay-corpo { flex: 1; overflow-y: auto; padding: 16px; max-width: 860px; margin: 0 auto; width: 100%; }
.rodape-comanda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--painel);
  border-top: 1px solid var(--borda);
}
.rodape-comanda small { color: var(--texto-suave); display: block; }
.rodape-comanda strong { font-size: 22px; color: var(--acento); }

.produto-botao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--painel);
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 12px;
  font-size: 15px;
  text-align: left;
}
.produto-botao:active { border-color: var(--acento); }
.produto-botao .preco { color: var(--acento); font-weight: 700; }

/* ===== modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio) var(--raio) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 20px;
}
.modal h3 { margin-top: 0; color: var(--texto); text-transform: none; font-size: 18px; letter-spacing: 0; }
.modal .acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.modal .acoes button { width: 100%; padding: 13px; }
.modal label { font-size: 13px; color: var(--texto-suave); display: block; margin-bottom: 4px; }
.modal .linha-total { display: flex; justify-content: space-between; padding: 6px 0; }
.modal .linha-total.grande { font-size: 19px; font-weight: 800; color: var(--acento); border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 12px; }
.check-linha { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.check-linha input { width: auto; margin: 0; }
.check-linha span { font-size: 15px; }

@media (min-width: 640px) {
  .modal-overlay { align-items: center; padding: 20px; }
  .modal { border-radius: var(--raio); }
}

/* ===== toast ===== */
.toast {
  position: fixed;
  bottom: 24px;
  left: calc(50% + 36px);
  transform: translateX(-50%);
  background: var(--painel-2);
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 10px 18px;
  border-radius: 99px;
  font-size: 14px;
  z-index: 40;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}

/* ações do caixa (fechar comanda/mesa) e divisória de modal */
.caixa-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.caixa-acoes .btn-primario, .caixa-acoes .btn-secundario { padding: 9px 14px; }
.linha-divisoria { border-top: 1px dashed var(--borda); margin: 10px 0; }

/* ===== impressão de cupom (80mm) ===== */
#areaImpressao { display: none; }
.btn-imprimir { white-space: nowrap; }
@media print {
  @page { size: 80mm auto; margin: 0; }
  html, body { background: #fff !important; margin: 0; padding: 0; }
  body > * { display: none !important; }
  #areaImpressao {
    display: block !important;
    width: 80mm;
    color: #000;
    background: #fff;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 12px;
    line-height: 1.35;
    padding: 3mm 3mm 6mm;
  }
  #areaImpressao * { color: #000; }
}
.cupom { width: 100%; }
.cupom-tit { text-align: center; font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.cupom-sub { text-align: center; font-weight: 700; }
.cupom-hr { border-top: 1px dashed #000; margin: 4px 0; }
.cupom-row { display: flex; justify-content: space-between; gap: 8px; }
.cupom-row span:last-child { text-align: right; white-space: nowrap; }
.cupom-item { font-size: 13px; }
.cupom-total { font-weight: 700; font-size: 15px; }