/* ============================================================
   Meu Custo — sistema de custo e caixa
   Pensado para uso no CELULAR, em pé, no balcão: letra grande,
   área de toque grande, fundo claro para enxergar com luz do dia.
   No computador vira um painel com menu lateral.
   ============================================================ */

:root{
  --bg:         #f5f6f8;
  --papel:      #ffffff;
  --tinta:      #12151a;
  --tinta-2:    #3d444d;
  --apagado:    #6b7480;
  --linha:      #e4e7eb;
  --linha-2:    #cfd4da;

  --marca:      #e8590c;
  --marca-esc:  #c9490a;
  --marca-fraca:#fdf0e7;

  --escuro:     #12151a;
  --escuro-2:   #1c2027;

  --verde:      #12813f;
  --verde-bg:   #e7f6ec;
  --amarelo:    #a86a00;
  --amarelo-bg: #fdf3e0;
  --vermelho:   #c0271c;
  --vermelho-bg:#fdeceb;

  --raio:       14px;
  --raio-g:     18px;
  --sombra:     0 1px 2px rgba(16,20,26,.05), 0 4px 14px rgba(16,20,26,.05);
  --lateral:    248px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

/* Qualquer regra de display (flex, grid, table-row) vence o atributo hidden,
   que vem só do navegador. Sem esta linha, um painel com display:flex fica
   visível mesmo marcado como hidden. */
[hidden]{ display:none !important; }
body{
  margin:0; background:var(--bg); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
/* no iOS o texto de <button> sai azul-sistema sem uma cor explícita; herdar
   evita isso. As classes .botao com cor própria continuam vencendo. */
button{ color:inherit; }
.icone{ flex:none; }

/* ============================ estrutura ============================ */
.estrutura{ display:flex; min-height:100vh; }

.lateral{
  width:var(--lateral); flex:none; background:var(--escuro); color:#e7e9ec;
  display:flex; flex-direction:column; padding:20px 14px;
  position:sticky; top:0; height:100vh;
  /* o menu cresceu (Estoque, Compras, Salão, Fidelidade…); numa tela baixa ele
     passa de 100vh. Sem isto, os itens de baixo vazavam para fora da barra
     escura, sobre o fundo claro da página. Agora a barra rola por dentro. */
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
}
.lateral::-webkit-scrollbar{ width:8px; }
.lateral::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }
.lateral::-webkit-scrollbar-track{ background:transparent; }
.conteudo{ flex:1; min-width:0; }
main{ padding:30px 26px 80px; max-width:1080px; }

/* marca no topo do menu */
.marca{ display:flex; align-items:center; gap:11px; padding:6px 8px 20px; flex:none; }
.marca-icone{ font-size:26px; line-height:1; }
.marca-icone.grande{ font-size:42px; }
.marca b{ display:block; font-size:16px; letter-spacing:-.01em; line-height:1.25;
          overflow-wrap:anywhere; }
.marca small{ display:block; font-size:12.5px; color:#8b939e; }

/* itens do menu — agrupados em seções, estilo painel de gestão */
.menu{ display:flex; flex-direction:column; gap:3px; flex:1 0 auto; }
.menu a{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:11px;
  color:#c2c8d0; font-size:15.5px; font-weight:500;
  transition:background .15s, color .15s;
}
.menu a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.menu a.ativo{ background:var(--marca); color:#fff; font-weight:650; }
.menu a.ativo .icone{ color:#fff; }
.menu a .icone{ color:#8b939e; transition:color .15s; }
.menu a:hover .icone{ color:#c2c8d0; }

/* seções do menu, com rótulo pequeno */
.grupo-menu{ display:flex; flex-direction:column; gap:3px; margin-top:14px; }
.grupo-menu-titulo{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#6b7480; padding:0 12px 3px;
}

/* Não usa margin-top:auto: num container que rola (overflow-y:auto), a margem
   automática corta o fim da área rolável e os botões "Trocar senha"/"Sair"
   ficam inacessíveis. Em vez disso o .menu cresce e empurra o rodapé para baixo. */
.rodape-lateral{ flex:0 0 auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }
.link-admin{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:12px;
  border-radius:11px; background:rgba(255,255,255,.07); color:#e7e9ec;
  font-size:14.5px; font-weight:600;
}
.link-admin:hover{ background:rgba(255,255,255,.13); }
.usuario{ padding:4px 12px 12px; }
.usuario b{ display:block; font-size:14.5px; }
.usuario small{ display:block; font-size:12.5px; color:#8b939e; overflow-wrap:anywhere; }
.rodape-lateral .acoes{ padding:0 8px; }
.rodape-lateral .botao.claro{
  background:rgba(255,255,255,.09); color:#e7e9ec; border-color:transparent;
}
.rodape-lateral .botao.claro:hover{ background:rgba(255,255,255,.16); }

/* topo e barra do celular ficam escondidos no computador */
.topo-celular, .barra-celular{ display:none; }

@media(max-width:860px){
  .lateral{ display:none; }
  main{ padding:18px 16px 96px; }

  .topo-celular{
    display:flex; align-items:center; gap:10px;
    background:var(--escuro); color:#fff; padding:13px 16px;
    position:sticky; top:0; z-index:30;
  }
  .topo-celular b{ font-size:16px; flex:1; overflow-wrap:anywhere; }
  .sair-celular{ font-size:14px; color:#aab2bd; font-weight:600; }

  .barra-celular{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:40;
    background:var(--papel); border-top:1px solid var(--linha);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .barra-celular a,
  .barra-celular button{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:9px 2px 8px; color:var(--apagado); font-size:11px; font-weight:600;
    background:none; border:0; font-family:inherit; cursor:pointer;
  }
  .barra-celular a.ativo, .barra-celular button.ativo{ color:var(--marca); }
}

/* folha de menu completa no celular (o "Mais") */
.folha-menu{
  position:fixed; left:0; right:0; bottom:0; background:var(--papel);
  border-radius:20px 20px 0 0; padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  max-height:82vh; overflow:auto; box-shadow:0 -8px 30px rgba(0,0,0,.18);
  animation:sobe .2s ease;
}
@keyframes sobe{ from{ transform:translateY(100%); } to{ transform:none; } }
.folha-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.folha-topo b{ font-size:18px; }
.grupo-folha{ display:flex; flex-direction:column; gap:2px; margin-top:14px; }
.grupo-folha .grupo-menu-titulo{ color:var(--apagado); padding:0 4px 4px; }
.grupo-folha a{
  display:flex; align-items:center; gap:13px; padding:13px 10px; border-radius:12px;
  color:var(--tinta); font-size:16px; font-weight:600;
}
.grupo-folha a:active{ background:#f1f3f5; }
.grupo-folha a.ativo{ background:var(--marca-fraca); color:var(--marca-esc); }
.grupo-folha a .icone{ color:var(--apagado); }
.grupo-folha a.ativo .icone{ color:var(--marca); }

/* faixa que avisa o admin que ele está dentro da conta de um cliente */
.faixa-visita{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; background:#4c3a12; color:#ffe9c2;
  padding:10px 18px; font-size:14.5px;
}
.faixa-visita b{ color:#fff; }
.faixa-visita .botao{ background:rgba(255,255,255,.14); color:#fff; border-color:transparent; }

/* ============================ textos ============================ */
h1{ font-size:27px; margin:0 0 5px; letter-spacing:-.022em; line-height:1.2; }
h2{ font-size:19.5px; margin:34px 0 13px; letter-spacing:-.015em; }
h3{ font-size:16px; margin:0 0 14px; letter-spacing:-.01em; }
.sub{ color:var(--apagado); margin:0 0 24px; max-width:70ch; }
.apagado{ color:var(--apagado); font-size:13.5px; }
.dica{ color:var(--apagado); font-size:14.5px; line-height:1.55; margin:12px 0 0; max-width:74ch; }
.dica b{ color:var(--tinta-2); }

/* ============================ mensagens ============================ */
.mensagens{ margin-bottom:20px; display:flex; flex-direction:column; gap:9px; }
.mensagem{
  padding:13px 16px; border-radius:var(--raio); font-size:15px;
  border:1px solid; line-height:1.5;
}
.mensagem.sucesso{ background:var(--verde-bg);    border-color:#bfe3cb; color:#0d5f30; }
.mensagem.erro{    background:var(--vermelho-bg); border-color:#f3c9c5; color:#9b1f16; }
.mensagem.aviso{   background:var(--amarelo-bg);  border-color:#f0dcb8; color:#7a4d00; }

/* ============================ cartões ============================ */
.cartao{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:20px; margin-bottom:16px; box-shadow:var(--sombra);
}
.cartao.destaque{ border:2px dashed #e0cdb2; background:#fffdf8; box-shadow:none; }

/* ============================ números ============================ */
.numeros{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:10px; }

/* No celular, três cartões empilhados comiam meia tela e empurravam o
   formulário para baixo. Viram linhas: rótulo à esquerda, valor à direita. */
@media(max-width:660px){
  .numeros{ grid-template-columns:1fr; gap:8px; }
  .numero{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:13px 16px;
  }
  .numero span{ font-size:11.5px; letter-spacing:.05em; }
  .numero b{ margin-top:0; font-size:22px; text-align:right; }
}
.numero{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:17px 18px; box-shadow:var(--sombra);
}
.numero span{ display:block; font-size:12px; color:var(--apagado);
              text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.numero b{ display:block; font-size:28px; letter-spacing:-.028em; margin-top:5px;
           font-variant-numeric:tabular-nums; }
.numero.entrada b{ color:var(--verde); }
.numero.saida b{ color:var(--vermelho); }
.numero.saldo{ background:var(--escuro); border-color:var(--escuro); }
.numero.saldo span{ color:#8b939e; }
.numero.saldo b{ color:#fff; }
.numero.saldo b.negativo{ color:#ff9086; }

/* ============================ formulários ============================ */
form.linha{ display:flex; flex-wrap:wrap; gap:11px; align-items:flex-end; }
.linha{ display:flex; flex-wrap:wrap; gap:11px; align-items:flex-end; }
.campo{ display:flex; flex-direction:column; gap:6px; flex:1 1 160px; }
.campo.pequeno{ flex:0 1 130px; }
label{ font-size:13px; font-weight:700; color:var(--tinta-2); }
input, select, textarea{
  font:inherit; padding:12px 13px; border:1px solid var(--linha-2);
  border-radius:11px; background:#fff; color:var(--tinta); width:100%;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-fraca);
}
select{ appearance:none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7480' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px; }

.marcador{
  display:flex; align-items:flex-start; gap:11px; margin-top:15px;
  font-size:15px; color:var(--tinta); cursor:pointer;
}
.marcador input{ width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--marca); }

/* ---- identidade visual da loja ---- */
.previa-marca{
  display:flex; align-items:center; gap:12px; margin-bottom:4px;
  padding:10px; border:1px solid var(--linha); border-radius:12px; background:#fff;
}
.previa-marca img{
  width:56px; height:56px; object-fit:cover; border-radius:10px; flex:none;
  border:1px solid var(--linha);
}
.previa-marca img.larga{ width:120px; height:48px; }
/* "Escolher arquivo" é um botão do próprio sistema operacional e não encolhe:
   no celular ele precisa da linha inteira, senão sai cortado. */
.campo-arquivo{ flex:1 1 100%; }
.previa-marca .marcador{ margin-top:0; font-size:14px; }
.previa-marca .marcador input{ width:18px; height:18px; }
/* o seletor de cor do navegador ignora padding e fica torto sem altura fixa */
.campo-cor{ height:46px; padding:5px; cursor:pointer; }

/* ---- horário por dia da semana ---- */
.grade-horario{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  gap:10px; margin-top:14px;
}
.dia-horario{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border:1px solid var(--linha); border-radius:12px; background:#fff;
}
.dia-horario b{ flex:0 0 74px; font-size:14px; }
.dia-horario span{ color:var(--apagado); font-size:14px; }
.dia-horario input{ flex:1 1 auto; min-width:0; padding:8px 10px; text-align:center; }
/* No celular o campo de hora vem com o relógio do sistema junto e não cabe na
   mesma linha do nome do dia — o horário aparecia cortado ("19:("). */
@media(max-width:520px){
  .dia-horario{ flex-wrap:wrap; }
  .dia-horario b{ flex:1 1 100%; }
  .dia-horario input{ flex:1 1 40%; padding:8px 4px; }
}

/* ============================ botões ============================ */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:650; font-size:15.5px; cursor:pointer;
  border:1px solid transparent; padding:12px 20px; border-radius:11px;
  background:var(--marca); color:#fff; white-space:nowrap;
  transition:background .15s, border-color .15s, transform .1s;
}
.botao:active{ transform:translateY(1px); }
.botao:hover{ background:var(--marca-esc); }
.botao.grande{ width:100%; padding:14px 20px; font-size:16.5px; }
.botao.escuro{ background:var(--escuro); }
.botao.escuro:hover{ background:var(--escuro-2); }
.botao.claro{ background:#fff; color:var(--tinta); border-color:var(--linha-2); }
.botao.claro:hover{ background:#f2f4f6; }
.botao.pequeno{ padding:8px 13px; font-size:14px; border-radius:9px; }
.botao.perigo{ background:#fff; color:var(--vermelho); border-color:#f0c4c0; }
.botao.perigo:hover{ background:var(--vermelho-bg); }
.acoes{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.direita{ margin-left:auto; }

/* ============================ tabelas ============================ */
.rolagem{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--raio-g); }
table{ width:100%; border-collapse:collapse; background:var(--papel); }
th, td{ padding:14px 14px; text-align:left; border-bottom:1px solid var(--linha); white-space:nowrap; }
th{ font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--apagado); font-weight:700; background:#fbfcfd; }
td.n, th.n{ text-align:right; font-variant-numeric:tabular-nums; }
tr:last-child td{ border-bottom:0; }
table.cartao-tabela{ border:1px solid var(--linha); border-radius:var(--raio-g);
                     overflow:hidden; box-shadow:var(--sombra); }
tr.total td{ background:#fbfcfd; border-top:2px solid var(--linha); font-size:16.5px; }
tr.sem-borda td{ border-bottom:1px solid var(--linha); }
table input, table select{ padding:9px 11px; font-size:14.5px; }

/* No iPhone, tocar num campo com fonte menor que 16px faz o Safari dar zoom
   na página — e ela precisa fechar o zoom a cada campo. Por isso, no celular
   todo campo tem no mínimo 16px. */
@media(max-width:860px){
  input, select, textarea, table input, table select{ font-size:16px; }
}
tbody tr:hover td{ background:#fcfdfe; }

/* ============================ busca ============================ */
.busca{
  display:flex; align-items:center; gap:10px;
  background:var(--papel); border:1px solid var(--linha-2);
  border-radius:12px; padding:0 14px; box-shadow:var(--sombra);
  transition:border-color .15s, box-shadow .15s;
}
.busca:focus-within{ border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-fraca); }
.busca .icone{ color:var(--apagado); }
.busca input{
  border:0; padding:13px 0; box-shadow:none; background:transparent;
  flex:1; min-width:0;
}
.busca input:focus{ outline:none; box-shadow:none; }
.busca input::-webkit-search-cancel-button{ display:none; }
.busca .limpar{
  border:0; background:transparent; color:var(--apagado);
  font-size:17px; cursor:pointer; padding:6px 2px; line-height:1;
}
.busca .limpar:hover{ color:var(--tinta); }

/* ======================= painel de edição (sobreposto) =======================
   A edição não pode viver dentro da tabela: lá ela herda a largura das colunas
   e some para fora da tela no celular. Aqui ela é medida pela TELA. */
.fundo-painel{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,14,20,.55);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.painel{
  background:var(--papel); border-radius:20px; padding:22px;
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.painel-topo{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:18px;
}
.painel-topo h3{ margin:0; font-size:18px; overflow-wrap:anywhere; }
.fechar{
  border:0; background:transparent; color:var(--apagado);
  font-size:19px; line-height:1; cursor:pointer; padding:4px 6px; border-radius:8px;
}
.fechar:hover{ background:#f0f2f4; color:var(--tinta); }

@media(max-width:560px){
  /* no celular o painel sobe de baixo e ocupa a largura toda */
  .fundo-painel{ align-items:flex-end; padding:0; }
  .painel{
    max-width:none; max-height:92vh;
    border-radius:20px 20px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  }
}

/* trava geral: nada dentro de uma célula pode passar da largura dela */
td > form, td > div{ max-width:100%; }
td input, td select{ max-width:100%; }

/* ============================ etiquetas ============================ */
.tag{ display:inline-block; padding:4px 11px; border-radius:999px;
      font-size:12.5px; font-weight:750; letter-spacing:.01em; }
.tag.boa{    background:var(--verde-bg);    color:var(--verde); }
.tag.media{  background:var(--amarelo-bg);  color:var(--amarelo); }
.tag.ruim{   background:var(--vermelho-bg); color:var(--vermelho); }
.tag.neutra{ background:#eef0f3;            color:var(--apagado); }
.subiu{ color:var(--vermelho); font-weight:700; }
.desceu{ color:var(--verde); font-weight:700; }

/* ============================ avisos ============================ */
.vazio{ color:var(--apagado); text-align:center; padding:34px 16px; line-height:1.6; }
.aviso{
  background:var(--amarelo-bg); border:1px solid #f0dcb8; color:#7a4d00;
  border-radius:var(--raio); padding:14px 17px; margin-bottom:16px; font-size:15.5px;
}
.aviso b{ color:#5c3a00; }
.aviso.bom{ background:var(--verde-bg); border-color:#bfe3cb; color:#0d5f30; }
.aviso.bom b{ color:#0a4a25; }
.resultado{
  margin-top:14px; padding:14px 16px; border-radius:11px;
  background:var(--verde-bg); border:1px solid #bfe3cb; color:#0d5f30;
  font-size:15.5px; line-height:1.55;
}
.resultado b{ color:#0a4a25; }

/* ============================ gráfico ============================ */
.legenda{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.item-legenda{
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-size:14px; cursor:pointer;
  padding:8px 13px; border-radius:999px;
  background:#fff; border:1px solid var(--linha-2); color:var(--tinta);
  transition:opacity .2s, border-color .2s;
}
.item-legenda:hover{ border-color:var(--apagado); }
.item-legenda.apagada{ opacity:.35; }
.item-legenda .ponto{ width:11px; height:11px; border-radius:50%; flex:none; }
#grafico .linha, #grafico circle{ transition:opacity .2s; }

/* ============================ detalhes ============================ */
details summary{ list-style:none; display:inline-block; }
details summary::-webkit-details-marker{ display:none; }
details[open] summary{ margin-bottom:6px; }

/* ============================ login ============================ */
.tela-login{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:linear-gradient(160deg,#1a1f27 0%,#12151a 60%,#0d1014 100%);
}
.cartao-login{
  width:100%; max-width:400px; background:var(--papel);
  border-radius:22px; padding:34px 30px 28px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.marca-login{ text-align:center; margin-bottom:26px; }
.marca-login h1{ font-size:25px; margin:10px 0 5px; }
.marca-login p{ margin:0; color:var(--apagado); font-size:14.5px; }
.cartao-login .campo{ margin-bottom:16px; }
.ajuda-login{ margin:20px 0 0; text-align:center; font-size:13.5px; color:var(--apagado); }

/* ============================ admin ============================ */
.cabecalho-pagina{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.cabecalho-pagina h1{ margin-bottom:4px; }
.voltar{
  display:inline-flex; align-items:center; gap:5px; color:var(--apagado);
  font-size:14.5px; font-weight:600; margin-bottom:12px;
}
.voltar:hover{ color:var(--tinta); }

.cartoes-clientes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:15px; }
.cartao-cliente{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:19px; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:12px;
  transition:border-color .15s, transform .15s;
}
.cartao-cliente:hover{ border-color:var(--linha-2); transform:translateY(-2px); }
.cartao-cliente.inativa{ opacity:.62; }
.cartao-cliente h3{ margin:0; font-size:17px; }
.linha-numeros{ display:flex; gap:18px; flex-wrap:wrap; }
.linha-numeros div{ font-size:13px; color:var(--apagado); }
.linha-numeros b{ display:block; font-size:19px; color:var(--tinta);
                  font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

.credenciais{
  background:var(--escuro); color:#e7e9ec; border-radius:var(--raio);
  padding:15px 17px; font-size:15px; margin:14px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow-wrap:anywhere;
}
.credenciais b{ color:#ffd9a8; }

/* ============================ foto do produto ============================ */
.linha-foto{ display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.area-foto{
  flex:none; width:150px; height:150px; border-radius:14px; overflow:hidden;
  background:#f0f2f4; border:1px solid var(--linha);
}
.area-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.sem-foto-produto{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; color:var(--apagado);
}
.sem-foto-produto span{ font-size:38px; opacity:.4; }
.sem-foto-produto small{ font-size:12.5px; }
.acoes-foto{ flex:1 1 260px; min-width:0; }
.acoes-foto input[type=file]{ padding:9px; font-size:14.5px; }

/* ============================ medidor de qualidade ============================ */
.medidor{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.medidor-numero b{ font-size:34px; letter-spacing:-.03em; display:block; line-height:1.1; }
.medidor-numero span{ font-size:13.5px; color:var(--apagado); }
.medidor-barra{
  flex:1 1 220px; height:10px; border-radius:99px; background:#eef0f3; overflow:hidden;
}
.medidor-barra div{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--marca), #f59f00);
  transition:width .5s ease;
}
.pendencias{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:11px; }
.pendencia{
  border:1px solid var(--linha); border-radius:13px; padding:14px;
  background:#fbfcfd; transition:border-color .15s, transform .15s;
}
a.pendencia:hover{ border-color:var(--marca); transform:translateY(-2px); }
.pendencia b{ display:block; font-size:24px; letter-spacing:-.03em; color:var(--marca); }
.pendencia span{ display:block; font-size:14.5px; font-weight:650; }
.pendencia small{ display:block; font-size:12.5px; color:var(--apagado); margin-top:3px; }
.pendencia.pronto b{ color:var(--verde); }

/* ============================ quadro de pedidos ============================ */
.auto-atualiza{
  display:inline-flex; align-items:center; gap:8px; font-size:14px;
  color:var(--apagado); cursor:pointer; padding:6px 4px;
}
.auto-atualiza input{ width:18px; height:18px; accent-color:var(--marca); }

/* abas — só aparecem no celular, onde 3 colunas não cabem */
.abas-quadro{ display:none; gap:7px; margin-bottom:14px; }
.aba{
  flex:1; font:inherit; font-size:13.5px; font-weight:650; cursor:pointer;
  padding:11px 6px; border-radius:11px; border:1px solid var(--linha);
  background:var(--papel); color:var(--apagado);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.aba b{ font-size:17px; color:var(--tinta); }
.aba.ativa{ border-color:var(--marca); background:#fff8f3; color:var(--marca); }
.aba.ativa b{ color:var(--marca); }

.quadro{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start; }
.coluna{
  background:#eef0f3; border-radius:var(--raio-g); overflow:hidden;
  display:flex; flex-direction:column; min-height:180px;
}
.coluna-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 15px; color:#fff;
}
.coluna-topo h2{ margin:0; font-size:15px; letter-spacing:0; }
.contador-coluna{
  background:rgba(255,255,255,.25); border-radius:99px;
  min-width:26px; text-align:center; padding:1px 8px; font-weight:700; font-size:14px;
}
.coluna.novo     .coluna-topo{ background:#6b7480; }
.coluna.producao .coluna-topo{ background:#d98404; }
.coluna.pronto   .coluna-topo{ background:#16803f; }
.coluna-corpo{ padding:12px; display:flex; flex-direction:column; gap:12px; }
.coluna-vazia{
  color:var(--apagado); font-size:14px; text-align:center;
  padding:22px 10px; margin:0;
}

/* cartão do pedido */
.pedido{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:14px; padding:14px; box-shadow:var(--sombra);
}
.pedido-topo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:11px;
}
.numero-pedido{ font-size:18px; letter-spacing:-.02em; }
.hora{ font-size:13px; color:var(--apagado); margin-left:7px; }
.valor-pedido{ font-size:17px; font-variant-numeric:tabular-nums; }

.pedido-itens{
  background:#fbfcfd; border-radius:10px; padding:10px 12px; margin-bottom:11px;
}
.item-pedido{ display:flex; gap:9px; padding:3px 0; font-size:15px; line-height:1.4; }
.item-pedido .qtd{ font-weight:700; color:var(--marca); flex:none; }
.item-pedido small{ display:block; font-size:12.5px; color:var(--apagado); }
.item-pedido small.obs{ color:var(--amarelo); }

.pedido-cliente{ font-size:14px; line-height:1.5; margin-bottom:11px; }
.pedido-cliente b{ font-size:14.5px; }
.pedido-cliente .fone{ color:var(--verde); font-weight:600; margin-left:6px; }
.pedido-cliente .modo{ color:var(--tinta-2); margin-top:3px; }
.pedido-cliente .modo small{ display:block; color:var(--apagado); font-size:12.5px; }
.pedido-cliente .modo.obs{ color:var(--amarelo); }

.pedido-lucro{
  background:var(--verde-bg); color:var(--verde); border-radius:9px;
  padding:7px 11px; font-size:13.5px; margin-bottom:12px; font-weight:600;
}
.pedido-lucro b{ font-size:15px; }
.pedido-lucro.incompleto{ background:var(--amarelo-bg); color:var(--amarelo); }

/* ações: um botão principal por linha — nunca lado a lado, que era o que
   embolava quando o nome do botão era comprido */
.pedido-acoes{ display:flex; flex-direction:column; gap:9px;
               padding-top:12px; border-top:1px solid var(--linha); }
.pedido-acoes form{ display:block; }
.botao.largo{ width:100%; }
.form-receber{ display:flex; flex-direction:column; gap:8px; }
.form-receber select{ width:100%; }
/* comanda e cancelar dividem a última linha, discretos lado a lado */
.acoes-secundarias{ display:flex; align-items:center; gap:8px; }
.acoes-secundarias form{ flex:1; }
.link-comanda{
  flex:none; font-size:13.5px; font-weight:600; color:var(--tinta-2);
  padding:5px 10px; border:1px solid var(--linha-2); border-radius:9px; white-space:nowrap;
}
.link-comanda:hover{ border-color:var(--marca); color:var(--marca); }
.link-cancelar{
  width:100%; border:0; background:transparent; font:inherit; font-size:13.5px;
  color:var(--apagado); cursor:pointer; padding:5px; text-decoration:underline;
}
.link-cancelar:hover{ color:var(--vermelho); }

@media(max-width:900px){
  /* no celular vira uma coluna por vez, escolhida nas abas */
  .abas-quadro{ display:flex; }
  .quadro{ grid-template-columns:1fr; }
  .coluna{ display:none; }
  .coluna.visivel{ display:flex; }
}

.link-cardapio{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14.5px; overflow-wrap:anywhere; margin-top:3px;
}

/* ---------------- aceite automático e tempo de preparo ---------------- */
.painel-preparo{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:12px; padding:13px 14px;
}
.chave{ display:flex; align-items:center; gap:11px; cursor:pointer; }
.chave input{ position:absolute; opacity:0; width:0; height:0; }
.trilho{
  flex:none; width:44px; height:25px; border-radius:99px; background:#cfd4da;
  position:relative; transition:background .2s;
}
.bolinha{
  position:absolute; top:3px; left:3px; width:19px; height:19px;
  border-radius:50%; background:#fff; transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.chave input:checked + .trilho{ background:var(--verde); }
.chave input:checked + .trilho .bolinha{ transform:translateX(19px); }
.chave input:focus-visible + .trilho{ box-shadow:0 0 0 3px var(--marca-fraca); }
.texto-chave{ font-size:14.5px; font-weight:600; line-height:1.35; }

.resumo-preparo{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
  margin-top:11px; padding-top:11px; border-top:1px solid var(--linha);
  font-size:13px; color:var(--apagado);
}
.resumo-preparo b{ color:var(--tinta); }
.link-editar{
  border:0; background:transparent; font:inherit; font-size:13px;
  color:var(--marca); font-weight:650; cursor:pointer; padding:2px 4px;
  text-decoration:underline; margin-left:auto;
}
.tempos{ margin-top:12px; padding-top:12px; border-top:1px solid var(--linha); }
.tempo{ display:flex; align-items:center; gap:7px; margin-bottom:9px; font-size:13.5px; }
.tempo span{ flex:0 0 58px; font-weight:650; }
.tempo em{ font-style:normal; color:var(--apagado); font-size:12.5px; }
.tempo input{ width:56px; padding:7px 8px; text-align:center; font-size:15px; }

/* ============================================================
   PDV — pedido no balcão
   Duas colunas: cardápio à esquerda, pedido à direita.
   No celular vira uma coluna e o pedido desce para o fim.
   ============================================================ */
.balcao{ display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }

.busca-balcao{ position:sticky; top:0; z-index:5; background:var(--bg); padding-bottom:10px; }
.busca-balcao input{ font-size:16px; }

.grupo-balcao{ margin-bottom:18px; }
.grupo-balcao h2{ font-size:16px; margin:6px 0 10px; }
.grade-produtos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }

.cartao-item{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  padding:13px 14px; border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--papel); cursor:pointer; font:inherit; color:var(--tinta);
  transition:border-color .12s, transform .06s, box-shadow .12s;
}
.cartao-item:hover{ border-color:var(--marca); box-shadow:var(--sombra); }
.cartao-item:active{ transform:translateY(1px); }
.cartao-item b{ font-size:15px; line-height:1.25; }
.cartao-item span{ color:var(--verde); font-weight:700; font-size:14.5px; }
.cartao-item .tem-add{ color:var(--apagado); font-size:12px; font-style:normal; }

/* ---- coluna do pedido ---- */
.balcao-pedido{
  position:sticky; top:16px; align-self:start;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:18px; box-shadow:var(--sombra);
}
.balcao-pedido h2{ font-size:17px; margin:0 0 12px; }
.carrinho-balcao{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.carrinho-vazio{ color:var(--apagado); font-size:14.5px; text-align:center; padding:22px 8px; }

.linha-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--linha);
}
.linha-nome{ flex:1; min-width:0; font-size:14.5px; line-height:1.3; }
.linha-nome b{ display:block; }
.linha-nome small{ display:block; color:var(--apagado); font-size:12.5px; }
.linha-nome small.obs{ font-style:italic; }
.linha-preco{ font-size:14.5px; white-space:nowrap; }

.totais-balcao{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 0; margin-bottom:6px; border-top:2px solid var(--linha);
}
.totais-balcao b{ font-size:22px; }

.acoes-balcao{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }

/* ---- contador (+ / −) ---- */
.contador{ display:inline-flex; align-items:center; border:1px solid var(--linha-2); border-radius:10px; overflow:hidden; }
.contador button{
  width:38px; height:38px; border:0; background:var(--papel); font-size:20px;
  cursor:pointer; color:var(--tinta); line-height:1;
}
.contador button:active{ background:#f2f3f5; }
.contador span{ min-width:30px; text-align:center; font-weight:700; }
.contador.pequeno button{ width:30px; height:30px; font-size:17px; }
.contador.pequeno span{ min-width:24px; font-size:14px; }

/* ---- painel de adicionais (dentro do overlay .fundo-painel) ---- */
.modal-add{
  background:var(--papel); border-radius:var(--raio-g); padding:20px 18px;
  width:100%; max-width:440px; max-height:88vh; overflow:auto;
}
.modal-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-topo h3{ margin:0; font-size:19px; }
.fechar{ border:0; background:none; font-size:20px; color:var(--apagado); cursor:pointer; padding:4px 8px; }

.grupo-add{ border:1px solid var(--linha); border-radius:var(--raio); padding:12px; margin-bottom:12px; transition:border-color .12s; }
.grupo-add.piscar{ border-color:var(--vermelho); animation:tremer .4s; }
.grupo-add-topo{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.grupo-add-topo b{ font-size:15px; }
.grupo-add-topo span{ font-size:12.5px; color:var(--apagado); }
.opcao-add{ display:flex; align-items:center; gap:10px; padding:8px 4px; cursor:pointer; font-size:15px; border-top:1px solid var(--linha); }
.opcao-add:first-of-type{ border-top:0; }
.opcao-add input{ width:20px; height:20px; accent-color:var(--marca); flex:none; }
.opcao-add span{ flex:1; }
.opcao-add .gratis{ color:var(--apagado); font-weight:600; }

.rodape-add{ display:flex; gap:12px; align-items:center; margin-top:6px; }
.rodape-add .botao{ flex:1; }

@keyframes tremer{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

@media(max-width:760px){
  .balcao{ grid-template-columns:1fr; }
  .balcao-pedido{ position:static; }
  .grade-produtos{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ---- pareamento do agente de impressão (Ajustes) ---- */
.passos-agente{ margin:0 0 16px; padding-left:22px; color:var(--tinta-2); line-height:1.7; }
.passos-agente li{ margin-bottom:4px; }
.link-baixar{
  display:inline-block; margin-left:6px; font-weight:700; color:var(--marca);
  text-decoration:underline;
}
.linha-agente{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
.estado-agente{ font-size:14px; color:var(--apagado); }
.estado-agente.boa{ color:var(--verde); font-weight:600; }
.estado-agente.ruim{ color:var(--vermelho); font-weight:600; }
.estado-agente.aviso{ color:var(--amarelo); font-weight:600; }

/* aviso curto que sobe do rodapé (impressão pelo agente) */
.aviso-flutuante{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 20px);
  background:var(--escuro); color:#fff; padding:12px 20px; border-radius:12px;
  font-size:14.5px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:80;
  max-width:calc(100vw - 32px);
}
.aviso-flutuante.aparece{ opacity:1; transform:translate(-50%, 0); }
.aviso-flutuante.boa{ background:var(--verde); }
.aviso-flutuante.ruim{ background:var(--vermelho); }
@media(max-width:860px){ .aviso-flutuante{ bottom:78px; } }

/* ============================================================
   Ajustes em abas — cada categoria com sua cor, para o olho
   achar rápido onde mexer. Só a aba ativa aparece.
   ============================================================ */
.abas-ajustes{
  display:flex; gap:8px; overflow-x:auto; margin:4px 0 22px; padding-bottom:4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.abas-ajustes::-webkit-scrollbar{ display:none; }
.aba-ajuste{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font:inherit; font-size:14.5px; font-weight:650; cursor:pointer;
  padding:10px 16px; border-radius:12px; border:1px solid var(--linha-2);
  background:var(--papel); color:var(--tinta-2);
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.aba-ajuste .emoji-aba{ font-size:16px; line-height:1; }
.aba-ajuste:hover{ border-color:var(--cor-aba); color:var(--tinta); }
/* aba ativa: preenche com a cor da categoria */
.aba-ajuste.ativa{
  background:var(--cor-aba); border-color:var(--cor-aba); color:#fff;
  box-shadow:0 4px 14px var(--cor-aba-sombra);
}

/* cores por categoria */
.cor-loja      { --cor-aba:#e8590c; --cor-aba-sombra:rgba(232,89,12,.30); }
.cor-cardapio  { --cor-aba:#2563eb; --cor-aba-sombra:rgba(37,99,235,.28); }
.cor-pagamento { --cor-aba:#12813f; --cor-aba-sombra:rgba(18,129,63,.28); }
.cor-entrega   { --cor-aba:#7c3aed; --cor-aba-sombra:rgba(124,58,237,.28); }
.cor-impressao { --cor-aba:#0d9488; --cor-aba-sombra:rgba(13,148,136,.28); }

/* só a aba escolhida aparece */
.grupo-ajuste{ display:none; }
.grupo-ajuste.visivel{ display:block; animation:surge .18s ease; }
@keyframes surge{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* o primeiro título de cada aba não precisa do respiro grande de cima */
.grupo-ajuste > h2:first-of-type,
.grupo-ajuste > .cartao:first-child{ margin-top:0; }
/* barra colorida à esquerda do título, na cor da categoria */
.grupo-ajuste[data-aba="loja"]      h2{ --acc:#e8590c; }
.grupo-ajuste[data-aba="cardapio"]  h2{ --acc:#2563eb; }
.grupo-ajuste[data-aba="pagamento"] h2{ --acc:#12813f; }
.grupo-ajuste[data-aba="entrega"]   h2{ --acc:#7c3aed; }
.grupo-ajuste[data-aba="impressao"] h2{ --acc:#0d9488; }
.grupo-ajuste h2{
  padding-left:13px; border-left:4px solid var(--acc, var(--marca)); border-radius:2px;
}

/* ============================================================
   Painel — cartões de destaque coloridos e títulos com accent.
   Cor por indicador para o olho separar entrada, saída e sobra.
   ============================================================ */
.destaques{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:14px;
}
.stat{
  display:flex; align-items:center; gap:13px;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:16px 17px; box-shadow:var(--sombra);
  border-left:4px solid var(--cor-stat, var(--marca));
}
.stat-icone{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border-radius:12px; background:var(--cor-stat-bg, var(--marca-fraca));
}
/* ícone de linha na cor do próprio cartão — coerente com o menu, sem emoji */
.stat-icone .icone{ width:24px; height:24px; color:var(--cor-stat-tinta, var(--marca)); }
.stat-corpo{ min-width:0; }
.stat-corpo span{
  display:block; font-size:12px; color:var(--apagado); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
}
.stat-corpo b{
  display:block; font-size:23px; letter-spacing:-.028em; margin-top:3px;
  font-variant-numeric:tabular-nums; color:var(--cor-stat-tinta, var(--tinta));
}
.stat-corpo b.negativo{ color:var(--vermelho); }

.cor-pedidos{ --cor-stat:#2563eb; --cor-stat-bg:#e7edfd; --cor-stat-tinta:#1d4ed8; }
.cor-entrou { --cor-stat:#12813f; --cor-stat-bg:#e7f6ec; --cor-stat-tinta:#0d5f30; }
.cor-saiu   { --cor-stat:#a86a00; --cor-stat-bg:#fdf3e0; --cor-stat-tinta:#8a5600; }
.cor-sobrou { --cor-stat:#12151a; --cor-stat-bg:#e9ebee; --cor-stat-tinta:#12151a; }
.cor-lucro  { --cor-stat:#e8590c; --cor-stat-bg:#fdf0e7; --cor-stat-tinta:#c9490a; }
.cor-alta   { --cor-stat:#c0271c; --cor-stat-bg:#fdeceb; --cor-stat-tinta:#a01d14; }
.cor-neutra { --cor-stat:#6b7480; --cor-stat-bg:#eef0f2; --cor-stat-tinta:#4b535d; }

.destaques.tres{ grid-template-columns:repeat(3, 1fr); }

.numeros.compactos .numero{ padding:13px 16px; }
.numeros.compactos .numero b{ font-size:21px; }

/* títulos de seção com barra colorida — mesma linguagem das abas de Ajustes */
h2.secao{
  padding-left:12px; border-left:4px solid var(--acc, var(--marca)); border-radius:2px;
}
h2.cor-mes      { --acc:#6b7480; }
h2.cor-cardapio { --acc:#2563eb; }
h2.cor-atencao  { --acc:#c0271c; }
h2.cor-pagamento{ --acc:#12813f; }
h2.cor-baixa    { --acc:#12813f; }

@media(max-width:660px){
  .destaques{ grid-template-columns:repeat(2, 1fr); gap:9px; }
  .stat{ padding:13px 13px; gap:10px; }
  .stat-icone{ width:38px; height:38px; font-size:19px; }
  .stat-corpo b{ font-size:20px; }
  /* três cartões numa tela estreita ficam apertados com ícone — vira
     texto compacto, só rótulo e valor; a cor fica na barra lateral */
  .destaques.tres .stat{ flex-direction:column; align-items:flex-start; gap:3px; padding:11px 11px; }
  .destaques.tres .stat-icone{ display:none; }
  .destaques.tres .stat-corpo{ width:100%; }
  .destaques.tres .stat-corpo b{ font-size:16px; white-space:nowrap; }
  .destaques.tres .stat-corpo span{ font-size:10.5px; letter-spacing:.03em; }
}

/* ============================================================
   Primeiros passos — guia de onboarding no painel.
   Some sozinho quando tudo está montado.
   ============================================================ */
.cartao.guia{ border:1px solid var(--linha); }
.guia-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.guia-progresso{ font-size:14px; color:var(--apagado); font-weight:700; }
.guia-progresso b{ font-size:20px; color:var(--marca); }
.guia-barra{ height:7px; background:var(--linha); border-radius:99px; margin:12px 0 6px; overflow:hidden; }
.guia-barra div{ height:100%; background:var(--marca); border-radius:99px; transition:width .3s; }

.lista-passos{ list-style:none; margin:10px 0 0; padding:0; }
.passo{
  display:flex; align-items:center; gap:13px;
  padding:12px 0; border-top:1px solid var(--linha);
}
.passo-marca{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--linha); color:var(--apagado);
  font-weight:800; font-size:14px;
}
.passo.feito .passo-marca{ background:var(--verde); color:#fff; }
.passo-texto{ flex:1; min-width:0; }
.passo-texto b{ display:block; font-size:15.5px; }
.passo.feito .passo-texto b{ color:var(--apagado); text-decoration:line-through; }
.passo-texto span{ display:block; font-size:13.5px; color:var(--apagado); }
.passo .botao{ flex:none; }

/* ícones de linha inline (no lugar dos emoji) — abas de Ajustes,
   linhas de modo do pedido e botões */
.emoji-aba{ display:inline-flex; align-items:center; }
.emoji-aba .icone{ width:16px; height:16px; }
.ico-modo{ display:inline-flex; vertical-align:-3px; color:var(--apagado); }
.ico-modo .icone{ width:15px; height:15px; }
.pedido-cliente .modo.obs .ico-modo{ color:var(--amarelo); }
.link-comanda .icone{ vertical-align:-3px; width:15px; height:15px; }

/* ============================================================
   Relatórios — gráfico de barras por dia, quebras por canal/forma
   ============================================================ */
.duas-colunas{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media(max-width:760px){ .duas-colunas{ grid-template-columns:1fr; gap:0; } }

.grafico-barras{ display:flex; align-items:flex-end; gap:6px; height:180px; overflow-x:auto; padding-top:8px; }
.barra-dia{ flex:1 0 26px; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.barra-col{
  width:70%; min-height:3px; background:var(--marca); border-radius:5px 5px 0 0;
  transition:height .3s;
}
.barra-rot{ font-size:10.5px; color:var(--apagado); margin-top:6px; white-space:nowrap; }

.linha-relatorio{ display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; font-size:15px; }
.linha-relatorio:first-child{ margin-top:0; }
.linha-relatorio b{ font-variant-numeric:tabular-nums; }
.mini-barra{ height:7px; background:var(--linha); border-radius:99px; margin-top:5px; overflow:hidden; }
.mini-barra div{ height:100%; border-radius:99px; }

/* ---------------- salão / mesas ---------------- */
.grade-mesas{
  display:grid; gap:14px; margin:6px 0 8px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.mesa-cartao{
  position:relative; border-radius:16px; border:1px solid var(--linha);
  background:var(--papel); overflow:hidden; transition:transform .12s, box-shadow .12s;
}
.mesa-cartao:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.10); }
.mesa-cartao.ocupada{
  border-color:transparent;
  background:linear-gradient(150deg, #f97316, #ea580c); color:#fff;
}
.mesa-link{ display:block; padding:16px 16px 14px; text-decoration:none; color:inherit; }
.mesa-topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mesa-nome{ font-weight:700; font-size:16px; }
.mesa-selo{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; background:rgba(0,0,0,.06); color:var(--apagado);
}
.mesa-cartao.ocupada .mesa-selo{ background:rgba(255,255,255,.22); color:#fff; }
.mesa-valor{ font-size:24px; font-weight:800; margin-top:12px; letter-spacing:-.01em; }
.mesa-valor.vazio{ color:var(--linha); font-weight:600; }
.mesa-info{ font-size:12.5px; opacity:.85; margin-top:2px; }
.mesa-cartao.ocupada .mesa-info{ opacity:.92; }
.mesa-excluir{ position:absolute; top:10px; right:10px; }
.mesa-excluir button{
  border:none; background:transparent; color:var(--linha); cursor:pointer;
  padding:4px; border-radius:8px; display:grid; place-items:center; opacity:0; transition:opacity .12s;
}
.mesa-cartao:hover .mesa-excluir button{ opacity:1; }
.mesa-excluir button:hover{ color:#dc2626; background:rgba(220,38,38,.10); }

/* comanda aberta na página da mesa */
.comanda-atual{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:16px; padding:18px; margin-bottom:16px;
}
.comanda-atual h2{ margin:0 0 12px; font-size:16px; }
.comanda-itens{ display:flex; flex-direction:column; }
.comanda-linha{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--linha-fraca, #eee);
}
.comanda-linha .linha-nome{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.comanda-linha .linha-nome small{ color:var(--apagado); font-size:12px; }
.comanda-linha .linha-preco{ white-space:nowrap; }
.tirar-item{
  border:none; background:transparent; color:var(--linha); cursor:pointer;
  padding:5px; border-radius:8px; display:grid; place-items:center;
}
.tirar-item:hover{ color:#dc2626; background:rgba(220,38,38,.10); }
.comanda-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:14px 0 4px; font-size:15px;
}
.comanda-total b{ font-size:22px; font-weight:800; }
.fechar-mesa{ margin-top:12px; }
.lancar-mais h2{ font-size:16px; margin:0 0 10px; }

/* ---------------- estoque e compras ---------------- */
.aviso-estoque{
  background:#fff7ed; border:1px solid #fed7aa; border-radius:14px;
  padding:12px 14px; margin:4px 0 16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.aviso-estoque > b{ display:inline-flex; align-items:center; gap:6px; color:#c2410c; }
.aviso-estoque .icone{ color:#ea580c; }
.chip-alerta{
  font-size:13px; font-weight:600; padding:4px 11px; border-radius:999px;
  background:#ffedd5; color:#9a3412;
}
.chip-alerta.zerado{ background:#fee2e2; color:#b91c1c; }
.tabela-estoque td{ vertical-align:middle; }
.tabela-estoque .linha-alerta{ background:#fff7f4; }
.entrada-unidade{ display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
.entrada-unidade span{ color:var(--apagado); font-size:12.5px; min-width:20px; text-align:left; }
.entrada-unidade.grande span{ font-size:14px; }
.mini-input{
  width:88px; text-align:right; padding:7px 9px; border:1px solid var(--linha);
  border-radius:9px; font:inherit; background:var(--papel); color:inherit;
}
.mini-input:focus{ outline:none; border-color:var(--marca); box-shadow:0 0 0 3px rgba(230,88,12,.12); }
.selo-estoque{
  font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.selo-estoque.ok{ background:#dcfce7; color:#15803d; }
.selo-estoque.baixo{ background:#ffedd5; color:#c2410c; }
.selo-estoque.zerado{ background:#fee2e2; color:#b91c1c; }
.selo-estoque.neutro{ background:var(--fundo-fraco, #f1f5f9); color:var(--apagado); }
.dica-inline{ color:var(--apagado); font-weight:400; }

/* ---------------- edição em massa ---------------- */
.barra-massa{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:4px 0 14px;
  padding:12px 14px; background:var(--papel); border:1px solid var(--linha); border-radius:14px;
}
.barra-massa #busca-massa{
  flex:1 1 220px; padding:9px 12px; border:1px solid var(--linha); border-radius:10px;
  font:inherit; background:var(--papel); color:inherit;
}
.massa-conta{ font-size:13.5px; color:var(--apagado); white-space:nowrap; }
.massa-conta b{ color:var(--tinta); }
.massa-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.massa-preco-acao{ display:inline-flex; align-items:center; gap:5px; }
.massa-preco-acao .mini-input{ width:80px; }
.chip-acao{
  border:1px solid var(--linha); background:var(--papel); color:var(--tinta);
  padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
}
.chip-acao:hover{ background:var(--marca-fraca); border-color:var(--marca); color:var(--marca-esc); }
.tabela-massa td, .tabela-massa th{ vertical-align:middle; }
.tabela-massa th.c, .tabela-massa td.c{ text-align:center; }
.cat-massa{ display:block; color:var(--apagado); font-size:12px; }
.dias-massa{ display:inline-flex; gap:3px; }
.dia-massa{ cursor:pointer; }
.dia-massa input{ position:absolute; opacity:0; width:0; height:0; }
.dia-massa span{
  display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--linha); font-size:11.5px; font-weight:700; color:var(--apagado);
  user-select:none; transition:background .1s;
}
.dia-massa input:checked + span{ background:var(--marca); border-color:var(--marca); color:#fff; }
.chave-massa{ display:inline-block; cursor:pointer; }
.chave-massa input{ position:absolute; opacity:0; }
.chave-massa span{
  display:block; width:42px; height:24px; border-radius:999px; background:var(--linha);
  position:relative; transition:background .12s;
}
.chave-massa span::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .12s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.chave-massa input:checked + span{ background:#22c55e; }
.chave-massa input:checked + span::after{ transform:translateX(18px); }
.rodape-massa{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:16px; }

/* seletor de entregador no card de pedido */
.form-entregador{ display:inline-block; }
.form-entregador select{
  font:inherit; font-size:13.5px; padding:4px 8px; border-radius:8px;
  border:1px solid var(--linha); background:var(--papel); color:inherit; max-width:170px;
}

/* ---------------- recuperador de vendas ---------------- */
.filtro-dias{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 16px; }
.filtro-dias > span{ font-size:14px; color:var(--apagado); }
.chip-dias{
  padding:6px 13px; border-radius:999px; border:1px solid var(--linha);
  font-size:13.5px; font-weight:600; color:var(--tinta); background:var(--papel);
}
.chip-dias:hover{ border-color:var(--marca); color:var(--marca-esc); }
.chip-dias.ativo{ background:var(--marca); border-color:var(--marca); color:#fff; }
.botao.verde{ background:#16a34a; color:#fff; border-color:transparent; }
.botao.verde:hover{ background:#15803d; }

/* ---------------- satisfação (painel) ---------------- */
.linha-nota{ display:flex; align-items:center; gap:12px; padding:7px 0; }
.nota-estrelas{ color:#f5b301; font-size:16px; letter-spacing:1px; white-space:nowrap; min-width:88px; }
.nota-estrelas.pequena{ font-size:13px; min-width:auto; }
.nota-estrelas .apagado{ color:var(--linha); }
.barra-nota{ flex:1; height:12px; background:var(--linha); border-radius:999px; overflow:hidden; }
.barra-nota-fill{ height:100%; background:linear-gradient(90deg,#fbbf24,#f59e0b); border-radius:999px; }
.nota-qtd{ min-width:28px; text-align:right; }
.lista-comentarios{ display:flex; flex-direction:column; gap:10px; }
.comentario{ background:var(--papel); border:1px solid var(--linha); border-radius:14px; padding:14px 16px; }
.comentario-topo{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:6px; }
.comentario-quem{ font-weight:600; font-size:13.5px; }
.comentario-data{ color:var(--apagado); font-size:12.5px; margin-left:auto; }
.comentario-texto{ margin:0; font-size:15px; color:var(--tinta-2); }

/* ---------------- combos ---------------- */
.grade-combos{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); margin:6px 0 8px; }
.combo-cartao{ background:var(--papel); border:1px solid var(--linha); border-radius:16px; padding:16px; }
.combo-topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.combo-topo b{ font-size:16px; }
.combo-lista{ list-style:none; padding:0; margin:10px 0; display:flex; flex-direction:column; gap:3px; }
.combo-lista li{ font-size:14px; color:var(--tinta-2); }
.combo-precos{ display:flex; align-items:baseline; gap:8px; }
.combo-precos s{ color:var(--apagado); font-size:14px; }
.combo-precos b{ font-size:22px; font-weight:800; color:var(--marca-esc); }
.combo-margem{ font-size:13px; color:var(--apagado); margin-top:4px; }
.combo-margem.ok{ color:var(--verde); font-weight:600; }
.linha-componente{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.linha-componente select{ flex:1; padding:9px 10px; border:1px solid var(--linha); border-radius:10px; font:inherit; background:var(--papel); color:inherit; min-width:0; }
.linha-componente .mini-input{ width:64px; }
.marcador-titulo{ display:block; font-weight:700; margin:16px 0 10px; }
.combo-resumo{ display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:14.5px; }
.combo-resumo #economia{ color:var(--verde); font-weight:600; }

/* ---------------- KDS / tela de cozinha ---------------- */
body.kds{ background:#0f1216; color:#e8eaed; margin:0; min-height:100vh; }
.kds-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; background:#171b21; border-bottom:1px solid #262c34; position:sticky; top:0; z-index:5;
}
.kds-topo > b{ font-size:18px; }
.kds-topo-dir{ display:flex; align-items:center; gap:14px; }
.kds-relogio{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }
.kds-colunas{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding:14px; align-items:start; }
.kds-coluna{ min-width:0; }
.kds-titulo{
  display:flex; align-items:center; justify-content:space-between; margin:0 0 12px;
  font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:#aab2bd;
  padding-bottom:8px; border-bottom:2px solid #262c34;
}
.kds-titulo span{ background:#262c34; color:#fff; border-radius:999px; padding:1px 10px; font-size:14px; }
.kds-titulo.novo{ border-color:#3b82f6; } .kds-titulo.novo span{ background:#3b82f6; }
.kds-titulo.producao{ border-color:#f59e0b; } .kds-titulo.producao span{ background:#f59e0b; }
.kds-titulo.pronto{ border-color:#22c55e; } .kds-titulo.pronto span{ background:#22c55e; }
.kds-cards{ display:flex; flex-direction:column; gap:12px; }
.kds-card{ background:#1a1f26; border:1px solid #2a313a; border-radius:14px; padding:14px; border-left:5px solid #3b82f6; }
.kds-card-topo{ display:flex; align-items:center; justify-content:space-between; }
.kds-card-topo b{ font-size:22px; }
.kds-cronometro{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; color:#aab2bd; }
.kds-card.atrasado{ border-color:#ef4444; border-left-color:#ef4444; background:#241a1c; animation:pulsa 1.4s infinite; }
.kds-card.atrasado .kds-cronometro{ color:#ff6b6b; }
@keyframes pulsa{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.0); } 50%{ box-shadow:0 0 0 3px rgba(239,68,68,.35); } }
.kds-canal{ font-size:13.5px; color:#8b939e; margin:4px 0 10px; }
.kds-itens{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.kds-itens li{ font-size:16.5px; line-height:1.35; }
.kds-itens small{ display:block; font-size:13px; color:#8b939e; margin-left:22px; }
.kds-itens .kds-obs{ color:#fbbf24; }
.kds-card .botao.largo{ width:100%; border:0; font-size:15.5px; }
.kds-card .botao.novo{ background:#3b82f6; color:#fff; }
.kds-card .botao.producao{ background:#f59e0b; color:#fff; }
.kds-pronto{ text-align:center; color:#22c55e; font-weight:700; padding:6px; }
.kds-vazio{ color:#5b636e; text-align:center; padding:24px 0; }
@media(max-width:820px){ .kds-colunas{ grid-template-columns:1fr; } }

/* ---------------- desempenho: ao vivo + variação ---------------- */
.ao-vivo{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:4px 0 16px;
  padding:12px 16px; background:var(--papel); border:1px solid var(--linha); border-radius:14px;
}
.ao-vivo-titulo{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--apagado); text-transform:uppercase; letter-spacing:.05em; }
.ponto-vivo{ width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:vivo 1.6s infinite; }
@keyframes vivo{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5);} 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }
.ao-vivo-cels{ display:flex; flex-wrap:wrap; gap:10px; }
.ao-vivo-cel{ display:flex; align-items:baseline; gap:7px; padding:5px 13px; border-radius:10px; background:var(--bg); }
.ao-vivo-cel b{ font-size:20px; font-weight:800; }
.ao-vivo-cel span{ font-size:13px; color:var(--apagado); }
.ao-vivo-cel.novo b{ color:#3b82f6; }
.ao-vivo-cel.producao b{ color:#f59e0b; }
.ao-vivo-cel.pronto b{ color:#22c55e; }
.var{ font-size:12px; font-weight:700; padding:1px 7px; border-radius:999px; margin-left:4px; white-space:nowrap; }
.var.sobe{ background:#dcfce7; color:#15803d; }
.var.desce{ background:#fee2e2; color:#b91c1c; }

/* pedido agendado */
.selo-agendado{
  display:inline-block; margin:6px 0 0; padding:4px 10px; border-radius:8px;
  background:#eef2ff; color:#4338ca; font-size:13px; font-weight:700;
}
.kds-agendado{ margin:2px 0 8px; padding:3px 9px; border-radius:7px; background:#312e81; color:#c7d2fe; font-size:13px; font-weight:700; display:inline-block; }

/* ---------------- galeria de imagens ---------------- */
.grade-galeria{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); margin:6px 0; }
.foto-galeria{ display:block; border-radius:14px; overflow:hidden; border:1px solid var(--linha); background:var(--papel); position:relative; }
.foto-galeria img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.foto-galeria span{ display:block; padding:8px 10px; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.foto-galeria:hover{ box-shadow:0 6px 18px rgba(0,0,0,.10); }
.grade-sem-foto{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); margin:6px 0; }
.cartao-sem-foto{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:16px 12px; border:1.5px dashed var(--linha-2); border-radius:14px; text-align:center;
  color:var(--tinta); background:var(--papel); transition:border-color .12s, background .12s;
}
.cartao-sem-foto:hover{ border-color:var(--marca); background:var(--marca-fraca); }
.cartao-sem-foto .mais-foto{ font-size:26px; color:var(--marca); line-height:1; }
.cartao-sem-foto b{ font-size:14px; }
.cartao-sem-foto small{ color:var(--apagado); font-size:12px; }

/* ---------------- QR code do cardápio ---------------- */
.qr-area{ display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.qr-quadro{
  background:#fff; border:1px solid var(--linha); border-radius:18px; padding:22px;
  display:flex; flex-direction:column; align-items:center; gap:12px; box-shadow:var(--sombra);
}
.qr-quadro svg{ width:260px; height:260px; }
.qr-legenda{ text-align:center; }
.qr-legenda b{ display:block; font-size:18px; }
.qr-legenda span{ font-size:13px; color:var(--apagado); }
.qr-lado{ flex:1 1 260px; min-width:0; }
.qr-link{ word-break:break-all; background:var(--bg); border:1px solid var(--linha); border-radius:10px; padding:10px 12px; font-size:14px; color:var(--tinta-2); }
.qr-botoes{ display:flex; flex-direction:column; gap:9px; margin:14px 0; }
.qr-botoes .botao{ justify-content:center; }
@media print{
  .lateral, .topo-celular, .barra-celular, .cabecalho-pagina, .qr-lado, .faixa-visita{ display:none !important; }
  body, .estrutura, .conteudo, main{ background:#fff !important; margin:0; padding:0; }
  .qr-quadro{ border:none; box-shadow:none; margin:0 auto; }
  .qr-quadro svg{ width:340px; height:340px; }
}

/* subtotais da comanda (taxa de serviço) */
.comanda-sub{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--apagado); padding:2px 0; }
.comanda-sub b{ font-weight:600; color:var(--tinta-2); }

/* ---------------- potencializador de cardápio ---------------- */
.pot-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pot-topo > b{ font-size:15px; }
.pot-score{ font-size:26px; font-weight:800; }
.pot-score.alto{ color:#16a34a; } .pot-score.medio{ color:#d97706; } .pot-score.baixo{ color:#dc2626; }
.pot-barra{ height:12px; background:var(--linha); border-radius:999px; overflow:hidden; }
.pot-barra-fill{ height:100%; background:linear-gradient(90deg,#f59e0b,#16a34a); border-radius:999px; transition:width .3s; }
.tabela-pot td, .tabela-pot th{ vertical-align:middle; }
.tabela-pot th.c, .tabela-pot td.c{ text-align:center; }
.pot-ok{ color:#16a34a; font-weight:800; font-size:17px; }
.pot-falta{ color:#dc2626; font-weight:800; font-size:17px; opacity:.6; }

/* ---------------- financeiro (DRE) ---------------- */
.dre{ display:flex; flex-direction:column; }
.dre-linha{ display:flex; align-items:baseline; justify-content:space-between; padding:9px 2px; border-bottom:1px solid var(--linha); font-size:15px; }
.dre-linha:last-child{ border-bottom:0; }
.dre-linha.menos span{ color:var(--apagado); }
.dre-linha.soma{ font-weight:700; }
.dre-linha.total{ margin-top:4px; border-top:2px solid var(--linha); border-bottom:0; font-size:17px; font-weight:800; padding-top:12px; }
.dre-linha.total.positivo b{ color:var(--verde); }
.dre-linha.total.negativo b{ color:#dc2626; }