/* ============================================================
   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; }
.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;
}
.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; }
.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 */
.menu{ display:flex; flex-direction:column; gap:3px; }
.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; }

.rodape-lateral{ margin-top: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{
    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;
  }
  .barra-celular a.ativo{ 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%; }
.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; }