/* =============================================================================
   Painel do lojista.

   Prioridade diferente do app do cliente: aqui é ferramenta de trabalho que
   fica aberta o dia inteiro, muitas vezes num tablet engordurado no balcão.
   Densidade alta, alvo de toque grande, e o estado do pedido legível de
   longe. Nada de respiro contemplativo.
   ============================================================================= */
:root{
  --r-card:10px; --r-input:8px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:28px;

  --c-text:#111827; --c-text-soft:#6B7280; --c-border:#E5E7EB;
  --c-surface:#F4F5F7; --c-bg:#FFFFFF;
  --c-ok:#059669; --c-alerta:#D97706; --c-erro:#DC2626; --c-info:#2563EB;
  --c-brand:#111827;

  /*
   * Elevação em vez de só borda.
   *
   * Tudo era caixa branca com traço cinza de 1px: sem hierarquia, o olho não
   * sabe onde pousar e a tela inteira tem o mesmo peso. Sombra sutil resolve
   * sem enfeitar — o painel continua ferramenta de trabalho, não vitrine.
   */
  --sombra-1:0 1px 2px rgba(16,24,40,.05);
  --sombra-2:0 1px 3px rgba(16,24,40,.08), 0 4px 12px rgba(16,24,40,.05);
  --sombra-3:0 4px 12px rgba(16,24,40,.10), 0 12px 28px rgba(16,24,40,.07);

  /* Cor de acento da plataforma. Usada com parcimônia: em ferramenta que fica
     aberta o dia inteiro, cor demais vira ruído em duas horas. */
  --c-acento:#4F46E5;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-md);color:var(--c-text);background:var(--c-surface);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--c-info);text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.01em}

/* ---------- Estrutura ---------- */
.topo{
  background:var(--c-brand);color:#fff;padding:var(--s-3) var(--s-5);
  display:flex;align-items:center;gap:var(--s-4);position:sticky;top:0;z-index:20;
  box-shadow:var(--sombra-1);
}
.topo .marca{font-weight:600;font-size:var(--t-md);letter-spacing:-.01em}
.topo .loja{font-size:var(--t-sm);opacity:.75}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-sm)}
.topo select{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:var(--r-input);padding:6px var(--s-2)}
.topo select option{color:#1A1A1A}
.topo a{color:#fff;opacity:.8;transition:opacity .12s}
.topo a:hover{opacity:1}

/* Sair de dentro da loja de um cliente tem o mesmo peso de entrar nela: é
   troca de contexto inteiro, não navegação. Por isso parece botão, e usa o
   índigo da plataforma — a cor diz para onde leva antes de a palavra dizer. */
.topo .voltar-plataforma{
  opacity:1;background:var(--c-acento);color:#fff;
  padding:5px var(--s-3);border-radius:var(--r-pill);
  font-weight:600;font-size:var(--t-xs);white-space:nowrap;
}
.topo .voltar-plataforma:hover{background:#4338CA}

.abas{
  background:var(--c-bg);border-bottom:1px solid var(--c-border);
  display:flex;gap:var(--s-1);padding:0 var(--s-5);overflow-x:auto;
  position:sticky;top:49px;z-index:19;scrollbar-width:none;
}
.abas::-webkit-scrollbar{display:none}
.abas a{
  padding:var(--s-3) var(--s-3);color:var(--c-text-soft);font-size:var(--t-sm);
  font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;
  transition:color .12s, border-color .12s;
}
.abas a:hover{color:var(--c-text)}
.abas a.on{color:var(--c-acento);border-bottom-color:var(--c-acento)}

/* ---------- Segunda fileira: as telas da seção atual ----------

   As duas fileiras grudam JUNTAS, como um bloco. Fazer a de baixo sticky com
   `top` próprio exigiria saber a altura da de cima — número mágico que quebra
   quando alguém mexe no padding. O contêiner resolve sem adivinhação.

   `.abas` sozinha continua sticky para o painel da PLATAFORMA, que não tem
   segunda fileira e portanto não tem contêiner. */
.nav-painel{position:sticky;top:49px;z-index:19}
.nav-painel .abas{position:static}

/* Visual DELIBERADAMENTE diferente da fileira de cima — pílula sobre fundo
   cinza, não sublinhado sobre branco. Se as duas fossem iguais, o resultado
   leria como uma barra de doze itens com uma quebra de linha no meio, e não
   como dois níveis. */
.abas-secao{
  background:var(--c-surface);border-bottom:1px solid var(--c-border);
  display:flex;gap:var(--s-2);padding:var(--s-2) var(--s-5);
  overflow-x:auto;scrollbar-width:none;
}
.abas-secao::-webkit-scrollbar{display:none}
.abas-secao a{
  padding:5px var(--s-3);border-radius:var(--r-pill);
  font-size:var(--t-sm);color:var(--c-text-soft);white-space:nowrap;
  transition:background .12s, color .12s;
}
.abas-secao a:hover{color:var(--c-text)}
.abas-secao a.on{background:var(--c-bg);color:var(--c-text);font-weight:600;
  box-shadow:var(--sombra-1)}

.conteudo{max-width:1180px;margin:0 auto;padding:var(--s-5) var(--s-5) var(--s-6)}
.cabecalho{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5);flex-wrap:wrap}
.cabecalho h1{font-size:var(--t-2xl);font-weight:650;letter-spacing:-.022em}
.cabecalho .acoes{margin-left:auto;display:flex;gap:var(--s-2);flex-wrap:wrap}

/* ---------- Cartões e grades ---------- */
.cartao{
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-card);
  padding:var(--s-5);margin-bottom:var(--s-4);box-shadow:var(--sombra-1);
}
/* O título da seção ganha uma régua: sem ela, cartões empilhados viram uma
   massa só e nada indica onde um assunto termina e outro começa. */
.cartao h2{
  font-size:var(--t-md);font-weight:650;margin:0 0 var(--s-4);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--c-border);
  letter-spacing:-.01em;
}
.cartao h3{font-size:var(--t-sm);font-weight:650;color:var(--c-text-soft);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--s-3)}

/* ---------- Cartão que abre e fecha ----------

   `<details>` NATIVO, sem biblioteca: funciona com o JavaScript desligado, o
   teclado já anda nele e o leitor de tela anuncia o estado. O script só grava
   a preferência; nada depende dele para a tela ser usável.

   O RESUMO NO CABEÇALHO é o que faz o fechado valer a pena. Bloco que só
   mostra o título obriga a abrir para conferir qualquer coisa — troca "rolar"
   por "abrir, olhar, fechar", que é pior. Com "Tamanho · P, M, G" na barra, a
   pergunta é respondida sem abrir. */
details.cartao{padding:0}
details.cartao > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-4) var(--s-5);
  font-size:var(--t-md);font-weight:650;letter-spacing:-.01em;
  border-radius:var(--r-card);
}
details.cartao > summary::-webkit-details-marker{display:none}
details.cartao > summary::before{
  content:"▸";color:var(--c-text-soft);font-weight:400;font-size:var(--t-sm);
}
details.cartao[open] > summary::before{content:"▾"}
details.cartao > summary:hover{background:var(--c-surface)}
details.cartao[open] > summary{
  border-bottom:1px solid var(--c-border);border-radius:var(--r-card) var(--r-card) 0 0;
}
details.cartao > .corpo{padding:var(--s-5)}

/* O resumo encosta à direita e é texto de apoio — não pode competir com o
   título nem virar mais uma linha para ler. */
details.cartao > summary .resumo{
  margin-left:auto;font-weight:400;font-size:var(--t-sm);
  color:var(--c-text-soft);text-align:right;
}
/* Menos o resumo que é AVISO. "nenhum tamanho cadastrado" não é apoio: é a
   razão de o item não poder ser pedido, e o único lugar onde isso aparece sem
   abrir o bloco. */
details.cartao > summary .resumo.falta{color:var(--c-alerta);font-weight:600}

.grade{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.metrica{
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5);box-shadow:var(--sombra-1);
  transition:box-shadow .15s, transform .15s;
}
.metrica:hover{box-shadow:var(--sombra-2)}
.metrica .rot{font-size:11px;color:var(--c-text-soft);text-transform:uppercase;letter-spacing:.06em;font-weight:650}
/* Números tabulares: em coluna de métrica, dígito de largura variável faz a
   linha dançar a cada atualização. */
.metrica .val{
  font-size:30px;font-weight:650;margin-top:6px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.metrica .sub{font-size:var(--t-xs);color:var(--c-text-soft);margin-top:var(--s-2)}

/* O cliente que não está recebendo mensagem. Ver `Notificacao::mudos`. */
.nao-recebeu{
  margin-top:var(--s-2);padding:var(--s-2) var(--s-3);
  border-radius:var(--r-btn);
  background:var(--c-aviso-bg,#fff8e1);border:1px solid var(--c-aviso-borda,#f0d48a);
  color:var(--c-text);font-size:var(--t-sm);line-height:1.5;
}

/* Quando entrou e quando terminou, no topo do resumo do pedido.

   Logo abaixo do título e antes de qualquer faixa: é contexto para tudo que
   vem depois, e quem abriu a tela por um link de dias atrás precisa disto
   antes de decidir qualquer coisa. */
.momentos{
  margin:calc(var(--s-4) * -1) 0 var(--s-4);
  font-size:var(--t-sm);color:var(--c-text-soft);
}
.momentos strong{color:var(--c-text);font-weight:600}
/* A duração é conclusão, não dado bruto — vem depois e mais apagada. */
.momentos .levou{margin-left:var(--s-2);opacity:.8}

/* ---------- Lista de pedidos ---------- */
/* 🔴 O CARTÃO RESPIRA, E O NOME NÃO DISPUTA LINHA COM O RESTO.
   
   Estava tudo numa faixa só: número, estado, nome, telefone, bairro, forma de
   pagamento, valor e horário — e o nome do cliente encostando no telefone sem
   pausa nenhuma. Numa lista que se lê de relance, no balcão, isso obriga a
   pessoa a procurar dentro da linha em vez de bater o olho.
   
   Mais respiro vertical e o detalhe descendo para a própria linha resolvem os
   dois: o nome fica sozinho onde o olho cai, e o resto vira apoio embaixo. */
.pedido-linha{
  display:flex;align-items:center;gap:var(--s-4);
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-card);
  padding:var(--s-4);margin-bottom:var(--s-3);color:var(--c-text);
}
.pedido-linha{position:relative;box-shadow:var(--sombra-1);transition:box-shadow .15s, border-color .15s}
/* Camada de clique cobrindo a linha inteira. Substitui o <a> que envolvia
   tudo — e que não podia conter o <a> do botão de imprimir. */
.pedido-linha .alvo{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pedido-linha .imprimir{position:relative;z-index:2}
/* Baixa do Pix pela lista.

   🔴 O `z-index:2` NÃO é enfeite: a `.alvo` acima é uma camada invisível que
      cobre a linha inteira para torná-la clicável. Sem subir o botão acima
      dela, o clique em "Recebi R$ X" abriria a ficha do pedido — o oposto do
      que a pessoa pediu, e do jeito mais confuso possível, porque a tela
      responde a um clique que ela não deu. */
.pedido-linha .baixa{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px}
.pedido-linha .baixa small{font-size:10px;letter-spacing:.04em}
.pedido-linha:hover{border-color:#D1D5DB;box-shadow:var(--sombra-2)}
.pedido-linha .num{font-weight:600;font-size:var(--t-lg);min-width:56px}
/* 🔴 O SELO DE ESTADO TEM LARGURA FIXA, para o nome começar sempre no mesmo
   lugar.
   
   "Em preparo" e "Saiu para entrega" têm larguras bem diferentes, e como o
   selo vem antes do nome, cada linha começava o nome num ponto — borda
   esquerda serrilhada numa lista que se lê descendo o olho. Só apareceu depois
   que o cartão ganhou respiro; antes o aperto escondia.
   
   🔴 A LARGURA É DO MAIOR RÓTULO, medida e não chutada: "Aguardando pagamento"
   e "Pronto para retirada" são os mais longos de `Pedido::ROTULOS`. A primeira
   tentativa usou `min-width` de 132px e "Saiu para entrega" passou por cima com
   156 — min-width só alinha quem cabe nele, que é o mesmo que não alinhar. */
.pedido-linha > .selo{flex:0 0 176px;text-align:center}

/* O selo de encomenda é o único que pode ficar do tamanho do conteúdo: ele
   aparece raramente e carrega uma data, que varia. */
/* 🔴 `flex:0 0 auto`, E NÃO `min-width:0`.
   A regra acima dá `flex:0 0 176px` a TODO selo filho da linha, para alinhar o
   nome. A tarja de encomenda não quer os 176px — mas `min-width:0` resolvia
   isso deixando ela ENCOLHER abaixo do conteúdo, e como `.selo` é `nowrap` o
   texto vazava por cima do nome do cliente em vez de caber. Ficou invisível
   enquanto a tarja dizia só "HOJE, 08/09"; ao ganhar a palavra "Encomenda"
   apareceu na hora, atropelando o nome. Largura natural, sem encolher. */
.pedido-linha > .selo.encomenda{flex:0 0 auto}

.pedido-linha .quem{flex:1;min-width:0}
/* `block` é o que tira o detalhe de cima do nome. */
.pedido-linha .quem .nome{display:block;font-weight:500;line-height:1.4}
.pedido-linha .quem .det{
  display:block;margin-top:3px;
  font-size:var(--t-xs);color:var(--c-text-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pedido-linha .val{font-weight:600;white-space:nowrap;font-size:var(--t-md)}
/* Quando entrou e quando terminou, uma sobre a outra.

   `min-width` maior que antes porque agora cabe "28/08 14:32": sem folga, a
   data quebraria a linha do pedido inteira no celular. */
.pedido-linha .quando{
  font-size:var(--t-xs);color:var(--c-text-soft);white-space:nowrap;
  min-width:76px;text-align:right;line-height:1.5;
}
/* A conclusão em tom ainda mais fraco: ela é referência, não a informação que
   a pessoa está caçando na lista. */
.pedido-linha .quando .fim{display:block;opacity:.75;font-variant-numeric:tabular-nums}

/* Bolinha antes do texto: o estado do pedido precisa ser legível de longe,
   num tablet no balcão, e a cor sozinha não serve para quem não distingue
   verde de vermelho. Forma + cor + palavra, sempre os três. */
.selo{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px var(--s-3) 4px var(--s-2);border-radius:var(--r-pill);
  font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.selo::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:currentColor;flex:none;opacity:.75}
.selo.aguardando_pagamento{background:#FEF3C7;color:#92400E}
.selo.confirmado{background:#DBEAFE;color:#1E40AF}
.selo.em_preparo{background:#EDE9FE;color:#5B21B6}
/* 🔴 `PRONTO` NÃO TINHA COR, e não é status qualquer: numa loja só-retirada
   ele é o estado FINAL útil — o pedido fica ali até o cliente buscar. A lista
   monta a classe com `strtolower($status)`, então `.selo.pronto` simplesmente
   não casava com nada e o selo caía no cinza do estilo base, no meio de seis
   status coloridos.

   Âmbar forte porque a leitura é "está esperando alguém" — mesma família de
   "aguardando pagamento", que também é espera, mas mais claro. */
.selo.pronto{background:#FDE68A;color:#78350F}
.selo.saiu_entrega{background:#CCFBF1;color:#115E59}
.selo.concluido{background:#DCFCE7;color:#14532D}
/* ESTORNADO precisa gritar mais que cancelado.

   Cancelado é uma decisão da loja; estornado é dinheiro que sumiu sem ninguém
   no painel ter feito nada, e num pedido que continua CONCLUÍDO no histórico.
   Vermelho cheio, e não o cinza dos status neutros, porque quem passa o olho
   pela lista precisa parar nesta linha. */
.selo.estornado{background:#DC2626;color:#fff}

/* ---------------------------------------------------------------------------
   NOME EM MAIÚSCULA NAS LISTAS — E SÓ NA TELA.

   Numa lista, nome em caixa alta é melhor: os cadastros chegam com grafias
   diferentes ("chrys", "Chrystian", "CHRYS DUARTE") e a coluna vira um
   serrilhado que atrapalha a varredura. Em caixa alta ela fica regular e o olho
   corre.

   🔴 E NÃO PODE ESCAPAR PARA O WHATSAPP. "Olá CHRYSTIAN" é gritar com o
      cliente. A garantia de que isso não acontece é ser CSS: a maiúscula não
      existe no dado, existe no desenho da célula. Não há função para alguém
      chamar por engano numa mensagem, não há coluna a normalizar no banco, e o
      texto copiado da tela sai na grafia original.

      Fosse `mb_strtoupper()` na view, seria uma linha a um copiar-e-colar de
      distância de virar saudação em maiúscula — e a lista de lugares onde NÃO
      usar é o tipo de regra que este projeto já viu apodrecer várias vezes.

   🔴 A REGRA É DA CLASSE, NÃO DE UMA TELA. Ela nasceu presa à lista de
      clientes (`.lista-clientes .nome-cliente`) e no dia seguinte a lista de
      PEDIDOS precisou do mesmo — duas telas lado a lado com grafias diferentes
      é pior que qualquer uma das duas sozinha. Solta, a próxima tela que
      mostrar nome só precisa da classe.

   ONDE ELA VALE: painel e admin, em tudo que EXIBE nome de pessoa. Onde NÃO
   vale, e é a fronteira inteira:

     · o que fala COM a pessoa — WhatsApp, e-mail, o site do cliente. "Olá
       CHRYSTIAN" é gritar com quem está do outro lado;
     · CAMPO DE EDIÇÃO. Num `<input>`, `text-transform` muda o que a pessoa vê
       enquanto digita mas não o que é gravado: ela conclui que o cadastro está
       em caixa alta, e da próxima vez digita assim de verdade — aí a maiúscula
       sai do desenho e entra no dado, que é justamente o que isto evita.
--------------------------------------------------------------------------- */
.nome-cliente{text-transform:uppercase;letter-spacing:.02em}
.selo.cancelado{background:#FEE2E2;color:#7F1D1D}
.selo.pendente{background:#FEF3C7;color:#92400E}
.selo.pago{background:#DCFCE7;color:#14532D}

/* Encomenda: roxo, fora da paleta dos status de propósito.

   Os outros selos respondem "em que pé está?". Este responde "para quando?" —
   outra pergunta, e ela precisa saltar mesmo ao lado de um status colorido,
   porque é ela que impede a cozinha de assar hoje o bolo de sábado. Borda
   sólida pela mesma razão: sobrevive à impressão em preto e branco. */
.selo.encomenda{background:#EDE9FE;color:#4C1D95;border:1px solid #C4B5FD;font-weight:600}
/* Carrinho e envio: cinza de propósito. São estados de passagem que o lojista
   quase nunca vê, e dar cor a eles gastaria atenção com o que não é dele. */
.selo.aberto, .selo.fechando{background:var(--c-surface);color:var(--c-text-soft)}

/* ---------- O botão diz PARA ONDE leva ----------

   A cor não é enfeite nem "uma por botão": é a cor do status de DESTINO. Selo
   e botão passam a falar a mesma língua — o lojista aprende a cor uma vez e
   ela vale nos dois lugares.

   Um botão colorido por linha, não três: se todos tivessem cor, nenhum se
   destacaria, e quem está na pressa das 20h precisa achar UM.

   🔴 COR É REFORÇO, NUNCA O ÚNICO SINAL. O rótulo continua escrito por extenso
   em todo lugar — daltonismo existe, e este painel roda em tablet engordurado
   com o brilho baixo. */
.btn-status{color:#fff;box-shadow:var(--sombra-1);border-color:transparent}
.btn-status:hover:not(:disabled){filter:brightness(.92);box-shadow:var(--sombra-2)}
.btn-status.para-em_preparo{background:#5B21B6}
.btn-status.para-pronto{background:#B45309}
.btn-status.para-saiu_entrega{background:#115E59}
.btn-status.para-concluido{background:var(--c-ok)}
.btn-status.para-confirmado{background:#1E40AF}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:0 var(--s-4);border-radius:var(--r-input);
  font-size:var(--t-sm);font-weight:600;border:1px solid transparent;
}
.btn{transition:background .12s, border-color .12s, box-shadow .12s, transform .06s}
.btn:active:not(:disabled){transform:translateY(1px)}

.btn-principal{background:var(--c-brand);color:#fff;box-shadow:var(--sombra-1)}
.btn-principal:hover:not(:disabled){background:#1F2937;box-shadow:var(--sombra-2)}

.btn-ok{background:var(--c-ok);color:#fff;box-shadow:var(--sombra-1)}
.btn-ok:hover:not(:disabled){background:#047857}

.btn-neutro{background:var(--c-bg);border-color:var(--c-border);color:var(--c-text);box-shadow:var(--sombra-1)}
.btn-neutro:hover:not(:disabled){border-color:#9CA3AF;background:#FCFCFD}

.btn-perigo{background:var(--c-bg);border-color:#FCA5A5;color:var(--c-erro)}
.btn-perigo:hover:not(:disabled){background:#FEF2F2;border-color:var(--c-erro)}

.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--c-acento);outline-offset:2px}
.btn-pequeno{min-height:32px;padding:0 var(--s-3);font-size:var(--t-xs);font-weight:600}

/* ---------- Select ----------

   🔴 A CORREÇÃO ANTERIOR ERA ESTREITA E A FALHA VOLTOU POR OUTRA PORTA.

   `appearance:none` com seta desenhada existia só para `table select` — foi
   feito para o dropdown de plano do admin, que vive numa tabela. Todo select
   FORA de tabela continuava com a aparência nativa: no macOS isso é um botão
   arredondado com seta dupla, ao lado de um `<input>` com a nossa borda. Não é
   "quase igual", é visivelmente outro widget — e foi assim que a tela de
   usuários apareceu "sem css" mesmo com os campos dentro de `.campo`.

   Consertar onde reclamaram, e não a classe do problema, é o que faz a mesma
   queixa voltar com outro endereço. Agora a regra é de TODO select do painel;
   a variante de tabela só ajusta tamanho e peso.

   `:not([multiple])` porque a lista de múltipla escolha do combo é uma caixa
   de três linhas — seta desenhada em cima dela fica sem sentido. */
.conteudo select:not([multiple]), .tela-limpa select:not([multiple]){
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
  padding-right:26px;
  /* Seta em SVG inline: a nativa muda de tamanho e de cor a cada navegador, e
     ao lado de um campo de altura fixa isso aparece. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s-3) center;
}

/* ---------- Escala compacta ----------

   O PROBLEMA VISTO NA TELA DE USUÁRIOS: o select "Nível" saía com 16px — a
   fonte do corpo — ao lado de um botão de 12px e sob um rótulo de 12px. Era o
   maior texto do cartão depois do nome da pessoa, para mostrar uma palavra.

   A REGRA É O CONTEXTO, NÃO A TELA: campo que divide a linha com um botão
   pequeno adota a escala do botão. `:has()` faz isso sozinho — sem classe para
   alguém lembrar de pôr, e valendo para as oito linhas assim que existem hoje
   e para a próxima que aparecer. O projeto já depende de `:has()` na lista de
   permissões e nos cartões de tipo de item.

   🔴 E POR QUE SÓ AQUI, e não em todo campo do painel: input de digitar fica
   em 16px de propósito. Abaixo disso o Safari do iPhone dá zoom na página ao
   focar o campo, e o painel é usado no celular. `<select>` não tem esse
   problema — abre o seletor nativo, não recebe texto —, então encolher é
   seguro. Baixar tudo para 14px trocaria um desalinho por um zoom involuntário
   a cada toque.

   Dentro de tabela vale a mesma escala, mesmo sem botão irmão direto: ali a
   linha inteira já é densa. */
.conteudo table select:not([multiple]){
  min-height:32px;padding-left:var(--s-3);
  font-size:var(--t-xs);font-weight:600;
  box-shadow:var(--sombra-1);
}
.conteudo table select:not([multiple]):hover{border-color:#9CA3AF;background-color:#FCFCFD}
.conteudo table select:not([multiple]):focus{outline:2px solid var(--c-acento);outline-offset:1px}

/* ---------- Linha de formulário que termina em botão pequeno ----------

   🔴 A PRIMEIRA VERSÃO DESTA REGRA PEGAVA SÓ `select`, E ISSO QUEBROU UMA
   LINHA INTEIRA.

   Na grade de horários o select do dia encolheu para 32px/12px e os dois
   campos de hora ao lado dele continuaram em 44px/16px — dois tamanhos na
   MESMA linha, o que lê como defeito, não como escala. Foi assim que a tela de
   Ajustes passou a parecer que tinha campo sem CSS.

   A escala é do CONTEXTO, então vale para tudo que está na linha.

   E é 36px com texto de 14px, não os 12px da tabela: aqui se digita hora, taxa
   e nome de bairro, e 12px é pequeno demais para preencher. A tabela pode ser
   menor porque lá quase tudo é leitura. 14px também está acima do limite em
   que o Safari do iPhone dá zoom ao focar — o motivo de o formulário calmo
   ficar em 16px continua valendo, só que aqui a linha inteira desce junto. */
.conteudo :has(> .btn-pequeno) .campo input,
.conteudo :has(> .btn-pequeno) .campo select,
.conteudo :has(> .btn-pequeno) .campo textarea,
.conteudo :has(> .btn-pequeno) > input,
.conteudo :has(> .btn-pequeno) > select{
  min-height:36px;font-size:var(--t-sm);
}
.conteudo :has(> .btn-pequeno) .campo label{font-size:var(--t-xs)}

/* ---------- Formulários ----------

   🔴 O VISUAL É DO ELEMENTO, NÃO DO INVÓLUCRO.

   Todo o estilo de campo estava preso a `.campo input`. Quem não estivesse
   dentro do invólucro saía com o visual cru do navegador — e não era exceção:
   a matriz de preço da pizza, a tabela de opções, os filtros de data, o
   formulário INTEIRO de avisos do admin (14 campos, zero invólucros) e a
   identidade da marca (8 campos, zero). Contando as telas do painel, mais de
   um em cada três campos ficava sem estilo.

   Pior: são justamente os campos que o lojista mais digita. `.campo` é o
   formulário calmo, de uma coluna; o campo solto está em tabela, e tabela é
   onde se preenche trinta preços seguidos.

   A base vem ANTES de `.campo` de propósito. As duas regras empatam em
   especificidade (uma classe + um elemento), e no empate vale a última — então
   `.campo` continua mandando em tudo que já estilizava, e nada regride. A base
   só alcança quem não tinha estilo nenhum. */
.conteudo input, .conteudo select, .conteudo textarea,
.tela-limpa input, .tela-limpa select, .tela-limpa textarea{
  padding:6px var(--s-2);
  border:1px solid var(--c-border);border-radius:var(--r-input);
  background:var(--c-bg);outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.conteudo input:hover, .conteudo select:hover, .conteudo textarea:hover,
.tela-limpa input:hover, .tela-limpa select:hover, .tela-limpa textarea:hover{
  border-color:#D1D5DB;
}
.conteudo input:focus, .conteudo select:focus, .conteudo textarea:focus,
.tela-limpa input:focus, .tela-limpa select:focus, .tela-limpa textarea:focus{
  border-color:var(--c-acento);box-shadow:0 0 0 3px rgba(79,70,229,.14);
}
.conteudo input::placeholder, .conteudo textarea::placeholder,
.tela-limpa input::placeholder, .tela-limpa textarea::placeholder{color:#9CA3AF}

/* Caixa de marcar não é caixa de texto.

   Isto corrige um exagero que já existia: `.campo input` dava `width:100%` e
   `min-height:44px` a TODO input do invólucro, inclusive checkbox e radio — e
   navegador moderno obedece, então "À venda" e "Mostrar na vitrine" vinham
   como retângulos gigantes. A especificidade aqui é maior que a de `.campo
   input`, então vale nos dois casos. */
.conteudo input[type=checkbox], .conteudo input[type=radio],
.tela-limpa input[type=checkbox], .tela-limpa input[type=radio]{
  width:auto;min-height:0;padding:0;margin-right:6px;
  accent-color:var(--c-acento);vertical-align:middle;
  box-shadow:none;
}

.campo{margin-bottom:var(--s-4)}
.campo label{display:block;font-size:var(--t-sm);font-weight:500;margin-bottom:var(--s-2)}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:44px;padding:var(--s-2) var(--s-3);
  border:1px solid var(--c-border);border-radius:var(--r-input);background:var(--c-bg);outline:none;
}
.campo input,.campo select,.campo textarea{transition:border-color .12s, box-shadow .12s}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#D1D5DB}
/* O anel de foco usa o acento: em formulário longo, saber onde o cursor está
   sem procurar é a diferença entre preencher e desistir. */
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--c-acento);box-shadow:0 0 0 3px rgba(79,70,229,.14);
}
.campo input::placeholder,.campo textarea::placeholder{color:#9CA3AF}
.campo .dica{font-size:var(--t-xs);color:var(--c-text-soft);margin-top:var(--s-1)}
.linha-campos{display:flex;gap:var(--s-3);flex-wrap:wrap}
.linha-campos > *{flex:1;min-width:140px}

/* ---------- Tabelas ---------- */
.tabela-envolve{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Célula que empilha em vez de esticar.
   Foi assim que a lista de lojas saiu de oito colunas para cinco e parou de
   rolar de lado: dado que responde a mesma pergunta ocupa uma coluna só, em
   linhas. Esticar horizontalmente é o que produz a barra; empilhar usa a
   altura, que sobra. */
td.pilha{display:table-cell}
td.pilha > *{display:block}
td.pilha > * + *{margin-top:3px}
td.pilha small{font-size:var(--t-xs);line-height:1.35}
/* Selo empilhado volta a ser inline-flex: `display:block` mataria a bolinha
   e o alinhamento do texto dentro dele. */
td.pilha .selo{display:inline-flex;width:fit-content}
td.pilha.num{text-align:right}
td.pilha.num > *{text-align:right}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-text-soft);font-weight:650;padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--c-border);white-space:nowrap;
}
td{padding:var(--s-3);border-bottom:1px solid #F3F4F6;vertical-align:middle}
tr:last-child td{border-bottom:0}
/* Linha inteira reage ao mouse: em tabela larga, o olho perde a linha entre a
   primeira e a última coluna — e clicar na ação errada é o resultado. */
tbody tr{transition:background .1s}
tbody tr:hover{background:#FAFAFB}
/* Coluna de número alinhada à direita e tabular: valor que não alinha não
   dá para comparar de relance, que é a única razão de existir a coluna. */
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Mensagens ---------- */
/* Barra lateral em vez de bloco chapado.
   Uma pilha de retângulos coloridos com o mesmo peso lê como parede; a barra
   dá início de leitura e deixa o fundo mais claro, então o texto continua
   sendo o que salta. */
.aviso{
  padding:var(--s-3) var(--s-4);border-radius:var(--r-input);
  font-size:var(--t-sm);margin-bottom:var(--s-3);line-height:1.5;
  border-left:3px solid currentColor;
}
.aviso.erro{background:#FEF2F2;color:#B91C1C}
.aviso.ok{background:#F0FDF4;color:#15803D}
.aviso.info{background:#EFF6FF;color:#1D4ED8}
.aviso.alerta{background:#FFFBEB;color:#B45309}
.aviso strong{color:inherit}
/* O texto corrido dentro do aviso volta ao cinza escuro: a cor é do sinal,
   não da frase inteira — parágrafo colorido cansa em duas linhas. */
.aviso{color:var(--c-text)}
.aviso.erro{border-color:#DC2626} .aviso.ok{border-color:#16A34A}
.aviso.info{border-color:#2563EB} .aviso.alerta{border-color:#D97706}
.aviso.erro strong{color:#B91C1C} .aviso.ok strong{color:#15803D}
.aviso.info strong{color:#1D4ED8} .aviso.alerta strong{color:#B45309}

.vazio{text-align:center;padding:var(--s-6) var(--s-4);color:var(--c-text-soft)}
.vazio .emoji{font-size:36px;margin-bottom:var(--s-3);opacity:.6}

/* Bloco de código/segredo — usado em convite, Pix e códigos de recuperação. */
.codigo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-sm);
  background:#F9FAFB;border:1px solid var(--c-border);border-radius:var(--r-input);
  padding:var(--s-3) var(--s-4);word-break:break-all;line-height:1.6;
}

/* Dica solta fora de `.campo` (usada em vários cartões). */
.dica{font-size:var(--t-xs);color:var(--c-text-soft);line-height:1.5}

/* `.ajuda` estava em 27 lugares de 11 telas e NÃO EXISTIA na folha: todo
   parágrafo de explicação saía em 16px de corpo, do mesmo peso do conteúdo que
   ele explicava.

   Não é sinônimo de `.dica`, e por isso ganha regra própria em vez de virar
   alias: `.dica` é a micro-legenda colada embaixo de um campo; `.ajuda` é o
   parágrafo que explica uma decisão dentro do cartão — "mediana, não média",
   "célula vazia não é zero". Um é rodapé de campo, o outro é texto que se lê. */
.ajuda{
  font-size:var(--t-sm);color:var(--c-text-soft);line-height:1.6;
  margin-top:var(--s-3);
}
.ajuda strong{color:var(--c-text)}

/* A hierarquia do cardápio, desenhada. Recuo crescente porque é isso que a
   frase não consegue dizer: sabor mora DENTRO do item, não ao lado dele — e
   era exatamente aí que o lojista se perdia. */
.arvore-cardapio{font-size:var(--t-sm);line-height:1.5}
.arvore-cardapio > div{
  padding:var(--s-2) 0 var(--s-2) var(--s-4);
  border-left:2px solid var(--c-border);
}
.arvore-cardapio > div:nth-child(2){margin-left:var(--s-4)}
.arvore-cardapio > div:nth-child(3){margin-left:calc(var(--s-4) * 2)}
.arvore-cardapio > div:nth-child(4){margin-left:calc(var(--s-4) * 3)}
.arvore-cardapio strong{display:inline-block;min-width:76px}
.arvore-cardapio span{color:var(--c-text-soft)}

/* ---------- Cabeçalho de categoria, com as ações no título ----------

   Renomear e remover categoria saíram do rodapé de cada cartão. Numa loja com
   cinco categorias eram cinco formulários de manutenção intercalados na tela
   que o lojista abre TODO DIA para marcar item em falta — e renomear categoria
   acontece talvez uma vez na vida da loja. */
.cab-categoria{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.cab-categoria .conta{font-weight:400;color:var(--c-text-soft);font-size:var(--t-sm)}

/* O ícone é revelado por CLIQUE, nunca por hover: metade do acesso ao painel
   é celular, e no toque hover não existe. `<details>` dá isso de graça. */
.acao-categoria{position:relative;margin-left:auto}
.acao-categoria + .acao-categoria{margin-left:0}
.acao-categoria > summary{
  list-style:none;cursor:pointer;
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--c-border);border-radius:var(--r-input);
  background:var(--c-bg);color:var(--c-text-soft);
}
.acao-categoria > summary::-webkit-details-marker{display:none}
.acao-categoria > summary:hover{border-color:#9CA3AF;color:var(--c-text)}
.acao-categoria[open] > summary{border-color:var(--c-acento);color:var(--c-acento)}
.acao-categoria.perigo > summary:hover{border-color:#FCA5A5;color:var(--c-erro)}
.acao-categoria.perigo[open] > summary{border-color:var(--c-erro);color:var(--c-erro)}
.acao-categoria svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* O formulário flutua sobre o cartão em vez de empurrar a tabela para baixo:
   abrir "renomear" não pode reposicionar a lista que a pessoa está lendo. */
.pop-categoria{
  position:absolute;right:0;top:36px;z-index:5;width:min(320px,80vw);
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-card);
  box-shadow:var(--sombra-3);padding:var(--s-4);
  font-size:var(--t-sm);font-weight:400;text-align:left;
}
.opcional{font-weight:400;color:var(--c-text-soft);font-size:var(--t-xs)}
.link-texto{
  font-size:var(--t-xs);color:var(--c-text-soft);text-decoration:underline;
  background:none;border:0;padding:var(--s-1) 0;
}
.link-texto:hover{color:var(--c-text)}

/* ---------- Item do pedido ---------- */
.item-pedido{display:flex;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--c-surface)}
.item-pedido:last-child{border-bottom:0}
.item-pedido .qtd{font-weight:600;min-width:32px}
.item-pedido .txt{flex:1;min-width:0}
.item-pedido .det{font-size:var(--t-sm);color:var(--c-text-soft);line-height:1.4}
.item-pedido .obs{font-size:var(--t-sm);color:var(--c-alerta);font-weight:500;margin-top:2px}
.item-pedido .val{font-weight:500;white-space:nowrap}

/* Faixa de suporte: a agência dentro da loja de outra pessoa.
   Cor deliberadamente diferente de tudo — é para incomodar um pouco. */
.faixa-suporte{
  background:#7C2D12;color:#fff;padding:var(--s-2) var(--s-4);
  font-size:var(--t-sm);display:flex;gap:var(--s-3);
  align-items:center;justify-content:center;flex-wrap:wrap;
}
.faixa-suporte a{color:#fff;text-decoration:underline}
/* O prazo restante: legível, mas sem gritar. Ele informa, não alarma — quem
   precisa saber já está lendo a faixa inteira. */
.faixa-suporte .prazo{
  background:rgba(255,255,255,.16);border-radius:var(--r-pill);
  padding:1px var(--s-2);font-size:var(--t-xs);font-variant-numeric:tabular-nums;
}

/* ---------- Resumo executivo ----------
   Frases, não cartões de número: a barra colorida à esquerda diz o tom sem
   pintar o texto, que precisa continuar legível. Verde/vermelho no texto
   inteiro cansa em três linhas e some para quem não distingue as duas cores —
   por isso a barra E a palavra ("a mais", "a menos") dizem a mesma coisa. */
.resumo-executivo .achado{
  display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) 0 var(--s-3) var(--s-4);
  border-left:3px solid var(--c-border);
}
.resumo-executivo .achado + .achado{border-top:1px solid var(--c-border)}
.resumo-executivo .achado .txt{flex:1;min-width:240px;font-size:var(--t-md);line-height:1.5}
.resumo-executivo .achado a{font-size:var(--t-sm);color:var(--c-acento);white-space:nowrap}
.resumo-executivo .achado.bom{border-left-color:#16A34A}
.resumo-executivo .achado.ruim{border-left-color:#DC2626}
.resumo-executivo .achado.neutro{border-left-color:var(--c-text-soft)}

/* Abas de segmento: navegação DENTRO de um cartão, não do painel. Por isso
   pílula e não sublinhado — sublinhado repetido leria como um segundo menu
   principal, e a pessoa perde de vista em que tela está. */
.abas-seg{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-3) 0}
.abas-seg a{
  padding:6px var(--s-3);border-radius:var(--r-pill);
  border:1px solid var(--c-border);font-size:var(--t-sm);color:var(--c-text-soft);
}
.abas-seg a:hover{border-color:var(--c-text-soft);color:var(--c-text)}
.abas-seg a.on{background:var(--c-acento);border-color:var(--c-acento);color:#fff;font-weight:600}

/* ---------- Clientes ---------- */
.bloco-endereco{
  border:1px solid var(--c-border);border-radius:var(--r-card);
  padding:var(--s-4);margin-bottom:var(--s-3);
}
.acoes-endereco{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2)}

/* O único cartão com borda vermelha do painel: se parecesse com os outros, o
   clique errado seria questão de tempo. */
.cartao.perigo{border-color:#FCA5A5;background:#FEF2F2}

/* Mesma faixa, outra cor: âmbar é "a loja está operando errado", vinho é
   "você não é o dono desta loja". As duas podem aparecer juntas. */
.faixa-alerta{
  background:#B45309;color:#fff;padding:var(--s-2) var(--s-4);
  font-size:var(--t-sm);display:flex;gap:var(--s-3);
  align-items:center;justify-content:center;flex-wrap:wrap;
}
.faixa-alerta a{color:#fff;text-decoration:underline;font-weight:600}

/* O canal CAIU — outro peso, e de propósito.

   A faixa âmbar fina serve para "esta loja ainda não conectou": é uma etapa
   pendente do cadastro, e quem está montando a loja vai chegar lá. Já a loja
   que estava operando e ficou muda está PERDENDO VENDA AGORA, e não pode ser
   a mesma tarja discreta que a pessoa aprende a ignorar em três dias.

   Vermelho cheio, texto grande, botão sólido e uma pulsação lenta na borda.
   Lenta de propósito: pisca-pisca vira ruído e a pessoa fecha a aba. */
/* A taxa padrão fica acima da tabela e visivelmente separada dela: uma decide
   a regra, a outra lista as exceções. Coladas, lêem-se como o mesmo campo. */
/* Pausar a loja: um clique resolve, e as opções ficam atrás do resumo.

   O balcão pausa com a mão ocupada — trocar o botão por um formulário faria a
   pausa custar mais que o problema que ela resolve. */
/* O funil de visitas. A barra é proporção; o número embaixo é a QUEDA —
   a pergunta do lojista não é "quantos chegaram", é "quantos eu perdi ali". */
/* Os atalhos de período quebram em duas linhas no celular sem empurrar o
   título. */
/* O período à mão: os dois campos e o botão numa linha só, e a linha inteira
   desce quando não couber ao lado dos atalhos. */
/* A explicação da flag de impressão: fechada por padrão, porque só interessa
   a quem está com o problema na frente. */
/* A versão no rodapé: presente para quem procura, invisível para quem não.
   Cor secundária e tamanho mínimo — é carimbo, não informação. */
/* O rodapé da tela de login: assinatura da marca e o rastro do acesso.
   Centralizado e discreto — a tela é o formulário, isto é a moldura. */
.rodape-login{
  margin:var(--s-5) auto 0;max-width:360px;text-align:center;
  color:var(--c-text-soft);font-size:var(--t-xs);line-height:1.6;
}
.rodape-login .marca img{max-height:24px;width:auto;opacity:.85}
.rodape-login .marca .nome{font-weight:600}
.rodape-login .acesso{margin:var(--s-3) 0 0}
.rodape-login .acesso strong{color:var(--c-text)}
.rodape-login .versao{margin:var(--s-2) 0 0;font-variant-numeric:tabular-nums}

.rodape-painel .versao{
  font-size:var(--t-xs);color:var(--c-text-soft);
  margin-left:auto;cursor:default;font-variant-numeric:tabular-nums;
}

.dica-impressao{margin-left:var(--s-3)}
.dica-impressao summary{
  font-size:var(--t-sm);color:var(--c-text-soft);cursor:pointer;
  text-decoration:underline;list-style:none;
}
.dica-impressao summary::-webkit-details-marker{display:none}
.dica-impressao .corpo{
  margin-top:var(--s-2);padding:var(--s-3);max-width:640px;
  background:var(--c-surface);border-radius:var(--r-card);
  font-size:var(--t-sm);line-height:1.5;
}
.dica-impressao .corpo p{margin:0 0 var(--s-2)}
.dica-impressao .corpo p:last-child{margin-bottom:0}
.dica-impressao code{word-break:break-all}

.periodo-livre{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.periodo-livre .rot{font-size:var(--t-sm);color:var(--c-text-soft)}
.periodo-livre input[type=date]{
  min-height:36px;padding:0 var(--s-2);
  border:1px solid var(--c-border);border-radius:var(--r-input);
}

.periodos{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}

/* A variação ao lado do número. Verde subiu, vermelho caiu — e nada quando
   não houve base para comparar. */
.metrica .var{font-weight:650}
.metrica .var.bom{color:var(--c-ok)}
.metrica .var.ruim{color:var(--c-perigo)}

.funil .etapa{margin-bottom:var(--s-4)}
.funil .rot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.funil .rot strong{font-size:var(--t-lg)}
.funil .barra{height:10px;border-radius:var(--r-pill);background:var(--c-surface);margin-top:6px;overflow:hidden}
.funil .barra span{display:block;height:100%;background:var(--c-marca);border-radius:var(--r-pill)}
.funil .perda{margin-top:4px;font-size:var(--t-xs);color:var(--c-text-soft)}

.pausa{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;position:relative}
.pausa .ate{font-size:var(--t-sm);color:var(--c-text-soft)}
.pausa-mais summary{
  font-size:var(--t-sm);color:var(--c-text-soft);cursor:pointer;
  text-decoration:underline;list-style:none;padding:var(--s-2);
}
.pausa-mais summary::-webkit-details-marker{display:none}
.pausa-mais .corpo{
  position:absolute;right:0;top:calc(100% + var(--s-2));z-index:20;width:min(320px,90vw);
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-card);
  box-shadow:0 8px 24px rgba(0,0,0,.12);padding:var(--s-4);
}
.pausa-mais .corpo label{display:block;font-size:var(--t-sm);margin-bottom:4px}
.pausa-mais .corpo input{width:100%}
.pausa-mais .tempos{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-3)}
.pausa-mais .ajuda{margin-top:var(--s-3);font-size:var(--t-xs)}

/* No celular a caixa ocupa a largura toda: o menu flutuante estreito à direita
   deixa os botões de tempo em duas linhas tortas. */
@media (max-width:640px){
  .pausa-mais .corpo{position:fixed;left:var(--s-3);right:var(--s-3);width:auto}
}

.taxa-modelo{
  margin:0 0 var(--s-4);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--c-border);
}

.faixa-alerta.grave{
  background:#B91C1C;padding:var(--s-4);gap:var(--s-3);
  font-size:var(--t-md);line-height:1.5;justify-content:flex-start;
  border-bottom:3px solid #7F1D1D;text-align:left;
}
.faixa-alerta.grave .sinal{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:rgba(255,255,255,.18);
  font-weight:800;font-size:20px;line-height:1;
  animation:pulso-alerta 2.4s ease-in-out infinite;
}
.faixa-alerta.grave .texto{flex:1;min-width:0}
.faixa-alerta.grave .texto strong{font-weight:700}
.faixa-alerta.grave .desde{
  display:block;margin-top:4px;font-size:var(--t-sm);color:rgba(255,255,255,.82);
}
.faixa-alerta.grave .nota{
  flex:none;font-size:var(--t-sm);color:rgba(255,255,255,.85);font-weight:600;
}
.faixa-alerta.grave .acao{
  flex:none;background:#fff;color:#B91C1C;font-weight:700;
  padding:12px 20px;border-radius:var(--r-input);text-decoration:none;
  font-size:var(--t-sm);
}

@keyframes pulso-alerta{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  50%    {box-shadow:0 0 0 8px rgba(255,255,255,0)}
}

/* Quem pediu menos movimento não recebe movimento nenhum. A cor e o tamanho
   já carregam a urgência sozinhos. */
@media (prefers-reduced-motion: reduce){
  .faixa-alerta.grave .sinal{animation:none}
}

/* No celular a faixa empilha: botão de 44px de largura total, que é onde o
   dedo acerta. O balcão abre o painel no telefone. */
@media (max-width:640px){
  /* 🔴 O `flex-wrap` sozinho NÃO empilha. O irmão da direita é `flex:none`, e
     o `.texto` com `flex:1` continua espremido ao lado dele — a faixa saía com
     uma palavra por linha e três telas de altura no celular. Quem manda é o
     `flex-basis:100%` do texto: aí sim ele ocupa a linha e o resto desce. */
  .faixa-alerta.grave{flex-wrap:wrap;padding:var(--s-3)}
  .faixa-alerta.grave .texto{flex:1 1 100%}
  .faixa-alerta.grave .acao{width:100%;text-align:center;padding:14px}
  .faixa-alerta.grave .nota{width:100%}
}

/* Botão de impressão na lista — alvo grande, o balcão usa com pressa */
.pedido-linha .imprimir{flex:none;margin-left:var(--s-2)}
.pedido-linha .imprimir a{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--c-border);border-radius:var(--r-input);
  font-size:18px;text-decoration:none;line-height:1;
}
.pedido-linha .imprimir a:hover{background:var(--c-surface)}

.auto-imprimir{
  margin-top:var(--s-4);padding:var(--s-3) var(--s-4);
  background:var(--c-surface);border-radius:var(--r-card);
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
}
.auto-imprimir label{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);cursor:pointer}
.auto-imprimir .dica{margin:0}

/* Combo na comanda: uma linha por item, porque quem lê é a cozinha */
.combo-linhas{margin-top:var(--s-2);border-left:3px solid var(--c-border);padding-left:var(--s-3)}
.combo-linha{padding:var(--s-2) 0}
.combo-linha + .combo-linha{border-top:1px dashed var(--c-border)}
.combo-linha .slot{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--c-text-soft);font-weight:600;
}

/* ---------- Login ---------- */
.tela-limpa{min-height:100vh;display:grid;place-items:center;padding:var(--s-4);background:var(--c-surface)}
.caixa-login{width:100%;max-width:400px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-card);padding:var(--s-5)}
.caixa-login h1{font-size:var(--t-xl);font-weight:600;margin-bottom:var(--s-2)}
.caixa-login .sub{color:var(--c-text-soft);font-size:var(--t-sm);margin-bottom:var(--s-5)}

/* Saída discreta embaixo do formulário — "esqueci minha senha", "voltar".
   Estava em três telas de acesso e não existia na folha: saía como link azul
   do mesmo peso do botão de entrar, competindo com a ação principal. */
.link-secundario{
  display:block;margin-top:var(--s-4);text-align:center;
  font-size:var(--t-sm);color:var(--c-text-soft);
}
.link-secundario:hover{color:var(--c-text);text-decoration:underline}

/* Duas colunas de verdade, para blocos que se comparam lado a lado. `.grade`
   não serve: com `minmax(180px,1fr)` ela quebra em três ou quatro colunas, e
   dois cartões de upload viram fatias estreitas. */
.grade-2{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- Barra de progresso simples ---------- */
.barrinha{height:6px;background:var(--c-surface);border-radius:var(--r-pill);overflow:hidden}
.barrinha span{display:block;height:100%;background:var(--c-brand)}

/* A medida do banner: para ser copiada, não lida.
   Mono e destacada porque o gesto aqui é selecionar e colar num WhatsApp. */
.medida-banner{
  display:inline-block;margin:var(--s-2) 0 var(--s-1);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-md);font-weight:650;letter-spacing:.02em;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-input);padding:var(--s-2) var(--s-3);
  user-select:all;
}

/* ---------- Operação ---------- */

/* O aviso de cauda longa fica DENTRO do cartão da métrica, não numa faixa
   separada: ele qualifica aquele número, e longe dele viraria um alerta
   genérico que ninguém sabe a que se refere. */
.alerta-cauda{color:var(--c-alerta);font-weight:600}

/* Linha do tempo do pedido mais demorado. Três colunas fixas — hora, o que
   aconteceu, quanto durou — para o olho descer pela coluna de duração e achar
   o buraco sem ler o resto. */
.trilha{margin-top:var(--s-3)}
.passo-op{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  gap:var(--s-3);align-items:baseline;
  padding:var(--s-3) 0;border-top:1px solid var(--c-border);
}
.passo-op:first-child{border-top:0}
.passo-op .quando{font-size:var(--t-xs);color:var(--c-text-soft);font-variant-numeric:tabular-nums}
.passo-op .rot{font-size:var(--t-sm)}
.passo-op .dur{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Barras por hora. `align-items:flex-end` para as hastes crescerem do chão —
   barra pendurada no teto não lê como volume. */
.barras{
  display:flex;align-items:flex-end;gap:3px;height:140px;
  margin-top:var(--s-3);
}
.barra-col{flex:1;min-width:14px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.barra-col .haste{
  background:var(--c-acento);border-radius:3px 3px 0 0;opacity:.85;
  transition:opacity .12s;
}
.barra-col:hover .haste{opacity:1}
.barra-col .rot{
  font-size:10px;color:var(--c-text-soft);text-align:center;margin-top:4px;
  font-variant-numeric:tabular-nums;
}

/* ---------- Marca da plataforma ---------- */
.previa-marca{
  display:inline-flex;padding:var(--s-4);margin-bottom:var(--s-3);
  background:var(--c-surface);border-radius:var(--r-input);
}
/* A mesma regra do rodapé real: altura fixa, largura automática. Se aqui
   fosse `width:100%`, a prévia esticaria o logo e a decisão do upload seria
   tomada olhando uma imagem que não existe em lugar nenhum. */
.previa-marca img{height:32px;width:auto;max-width:240px;display:block}

/* Alta o bastante para as DUAS faixas — a da loja e a da plataforma. Cortar a
   segunda faria a prévia esconder justamente o que esta tela configura. */
.previa-rodape{
  width:100%;height:200px;border:1px solid var(--c-border);
  border-radius:var(--r-input);background:#fff;display:block;
}

/* O logo da ferramenta no topo, no lugar do texto. */
.topo .marca img{height:22px;width:auto;max-width:150px;display:block}

/* ---------- Avisos da plataforma ----------
   Duas intensidades, e a diferença é deliberada: a faixa convive com o
   trabalho, o modal interrompe. Se as duas parecessem iguais, a escolha do
   formato no admin deixaria de significar alguma coisa. */

/* Contador no menu. Número pequeno, sem cor de alarme: recado da agência não
   é pedido atrasado, e vermelho no menu treina urgência que não existe. */
.abas .contador{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-left:6px;
  border-radius:var(--r-pill);background:var(--c-acento);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
}

.faixa-aviso{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);
  background:var(--c-bg);border:1px solid var(--c-border);
  border-left:3px solid var(--c-acento);
  border-radius:var(--r-card);box-shadow:var(--sombra-1);
  background-size:cover;background-position:right center;
}
.faixa-aviso .texto{flex:1;min-width:0;font-size:var(--t-sm);line-height:1.45}
.faixa-aviso .texto strong{display:block;font-weight:650;margin-bottom:2px}
.faixa-aviso .texto span{color:var(--c-text-soft)}
.faixa-aviso .acoes{display:flex;align-items:center;gap:var(--s-2);flex:none}
.faixa-aviso .fechar{
  width:32px;height:32px;border-radius:var(--r-input);
  color:var(--c-text-soft);font-size:20px;line-height:1;
}
.faixa-aviso .fechar:hover{background:var(--c-surface);color:var(--c-text)}

/* O modal escurece o fundo porque interromper e não parecer interrupção é o
   pior dos dois mundos: rouba a atenção sem avisar que roubou. */
.modal-aviso{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;padding:var(--s-4);
  background:rgba(16,24,40,.45);
}
.modal-aviso .caixa{
  width:100%;max-width:520px;background:var(--c-bg);
  border-radius:var(--r-card);padding:var(--s-5);box-shadow:var(--sombra-3);
}
.modal-aviso h2{font-size:var(--t-lg);font-weight:650;margin-bottom:var(--s-3)}
.modal-aviso .corpo{font-size:var(--t-sm);line-height:1.55;color:var(--c-text)}
.modal-aviso .acoes{
  display:flex;gap:var(--s-2);justify-content:flex-end;
  margin-top:var(--s-5);flex-wrap:wrap;
}

/* Página Novidades: o que ainda não foi visto ganha a barra do acento. */
.aviso-item .corpo{font-size:var(--t-sm);line-height:1.55;margin:var(--s-2) 0 var(--s-4)}
.aviso-item .rodape{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  border-top:1px solid var(--c-border);padding-top:var(--s-3);
}
.aviso-item .rodape .quando{font-size:var(--t-xs);color:var(--c-text-soft)}
.aviso-item .rodape .acoes{margin-left:auto;display:flex;gap:var(--s-2)}
.aviso-item.novo{border-left:3px solid var(--c-acento)}

.selo.neutro{background:var(--c-surface);color:var(--c-text-soft)}
/* Selo clicável (o "sem foto" leva para o upload): sem sublinhado, mas com
   cursor e realce, senão parece etiqueta morta e ninguém tenta clicar. */
a.selo{text-decoration:none;cursor:pointer}
a.selo:hover{filter:brightness(.94)}
.selo.aviso{background:#FEF3C7;color:#92400E}
.selo.ok{background:#DCFCE7;color:#14532D}

/* Escolha explicada: o rótulo carrega o custo da opção, não só o nome dela. */
.escolha{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) 0;cursor:pointer}
.escolha input{margin-top:3px;flex:none}
.escolha strong{display:block;font-weight:600;font-size:var(--t-sm)}
.escolha small{display:block;color:var(--c-text-soft);font-size:var(--t-xs);line-height:1.5;margin-top:2px}

.lojas-alvo{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--s-2);margin:var(--s-3) 0 var(--s-4);
  max-height:260px;overflow-y:auto;
  border:1px solid var(--c-border);border-radius:var(--r-input);padding:var(--s-3);
}
.linha-loja{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm)}

@media (max-width:640px){
  .conteudo{padding:var(--s-3)}

  /* 🔴 UM BLOCO SÓ PARA `.pedido-linha` NO CELULAR.
     
     Ao dar respiro ao cartão eu abri um SEGUNDO `@media` para ele lá em cima,
     sem ver este. As duas regras conviveram e a de baixo — esta — ganhou: o
     `order` que eu tinha escrito perdia em silêncio, e o layout que aparecia no
     celular era o antigo. Media query duplicada para o mesmo elemento é
     exatamente como CSS vira adivinhação. */
  .pedido-linha{flex-wrap:wrap;row-gap:var(--s-2)}

  /* Sem largura reservada aqui: no celular o selo divide a fileira com o
     número e sobra pouco — os 176px do desktop tirariam espaço de quem precisa,
     e o alinhamento do nome que eles garantem não existe numa fileira própria. */
  .pedido-linha > .selo{flex:0 1 auto}

  /* A tarja de encomenda ganhou o rótulo "Encomenda ·" e ficou longa. No
     celular ela toma a fileira inteira em vez de disputar espaço com o selo de
     status — e `white-space:normal` porque `.selo` é nowrap, e nowrap num item
     que não cabe é rolagem horizontal, que esta lista não pode ter. */
  .pedido-linha > .selo.encomenda{flex-basis:100%;white-space:normal}

  /* `order` acima do padrão (0) empurra estes três para depois do número, do
     selo e do botão de imprimir. O `flex-basis:100%` do nome é o que força a
     quebra: a partir dele, cada um cai na sua fileira. */
  .pedido-linha .quem{flex-basis:100%;order:3}
  .pedido-linha .val{order:4;margin-left:auto}
  .pedido-linha .quando{order:5;min-width:0;flex:0 0 auto}

  .faixa-aviso{flex-wrap:wrap}
  .faixa-aviso .acoes{margin-left:auto}
}

/* ---------------------------------------------------------------------------
   A conversa que cria o produto (/painel/comecar/produto)

   Balão, e não lista de perguntas, porque o efeito que se quer é psicológico:
   campo vazio intimida quem tem medo do painel; caixa de conversa não. O
   custo disso é que a tela precisa PARECER conversa de verdade — meia
   imitação passa a impressão de formulário disfarçado, que é pior que os dois.
   --------------------------------------------------------------------------- */
.conversa{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-4) 0;max-width:760px;
}
.balao{
  max-width:min(78%, 560px);padding:var(--s-3) var(--s-4);
  border-radius:18px;line-height:1.5;font-size:var(--t-sm);
  box-shadow:var(--sombra-1);word-break:break-word;
}
.balao.bot{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-bottom-left-radius:6px;align-self:flex-start;
}
.balao.eu{
  background:var(--c-brand);color:#fff;
  border-bottom-right-radius:6px;align-self:flex-end;
}
/* O texto de apoio dentro do balão do bot herda a cor certa nos dois temas. */
.balao .dica{margin:var(--s-2) 0 0;font-size:var(--t-xs)}
.balao em{opacity:.85}

/* Três pontos enquanto a IA pensa. Sem isto a tela fica parada por dois
   segundos e a pessoa clica de novo — e paga duas chamadas. */
.balao.pensando{
  color:var(--c-text-soft);letter-spacing:.15em;
  animation:pulsa 1.1s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.balao.pensando{animation:none;opacity:.6}}

.balao .tabela-resumo{width:100%;margin:var(--s-2) 0 0;font-size:var(--t-sm)}
.balao .tabela-resumo td{padding:3px 0;border:0}
.balao .tabela-resumo td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.balao .tabela-resumo td.soft{color:var(--c-text-soft);text-align:right;padding-left:var(--s-3)}

/* A entrada gruda embaixo: numa conversa longa, ter que rolar até o fim para
   responder é o tipo de atrito que faz a pessoa desistir no meio. */
.conversa-entrada{
  position:sticky;bottom:0;background:var(--c-bg);
  border-top:1px solid var(--c-border);
  padding:var(--s-3) 0;max-width:760px;
}
.respostas-rapidas{display:flex;gap:var(--s-2);flex-wrap:wrap}
.respostas-rapidas:not(:empty){margin-bottom:var(--s-3)}
.linha-entrada{display:flex;gap:var(--s-2);align-items:flex-end}
.linha-entrada textarea{
  flex:1;resize:none;min-height:44px;max-height:140px;
  border-radius:22px;padding:11px var(--s-4);line-height:1.4;
}
.linha-entrada .btn{flex:none;border-radius:22px;min-height:44px}

@media (max-width:600px){
  .balao{max-width:88%}
}

/* Matriz sabor × tamanho dentro do balão: com 30 sabores ela é alta, e com 5
   tamanhos é larga. Rola dentro do próprio balão — a página nunca rola de lado. */
.balao .rolagem-resumo{max-height:40vh;overflow:auto;margin:var(--s-2) 0}
.balao .rolagem-resumo table{margin:0}
.balao .tabela-resumo td:first-child{padding-right:var(--s-3);white-space:nowrap}

/* A dica dentro do balão é linha própria. Como <span>, ela grudava no fim da
   pergunta — "O que você quer cadastrar agora?Pode clicar num botão…" — e o
   texto de apoio virava continuação da frase. */
.balao .dica{display:block;margin-top:var(--s-2)}

/* "obrigatório" ao lado do rótulo.

   Asterisco vermelho é convenção de quem já usou muito formulário; para o dono
   de pizzaria é um símbolo sem legenda. A palavra escrita não precisa de
   legenda nenhuma — e o custo é uma linha a mais, não uma tela a mais. */
.exigido{
  font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.04em;
  color:var(--c-alerta);background:#FFFBEB;border-radius:var(--r-pill);
  padding:1px 7px;margin-left:6px;vertical-align:middle;
}
@media (prefers-color-scheme:dark){
  .exigido{background:transparent;border:1px solid currentColor}
}

/* ---------- Rodapé do painel: quem está por trás da ferramenta ----------

   DUAS MARCAS, DOIS LUGARES, na divisão de Facebook e Meta: o topo mostra o
   PRODUTO que o lojista abre todo dia; aqui embaixo fica a EMPRESA, que é quem
   responde quando algo dá errado.

   É por isso que o botão de suporte mora junto do nome de quem atende, e não
   solto num menu: "falar com o suporte" sem dizer com quem é um botão que a
   pessoa só clica depois de já ter desistido de achar o telefone. */
.rodape-painel{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;
  /* Espaço generoso acima: o rodapé não pode parecer parte do último cartão de
     trabalho, senão o olho o lê como conteúdo e ele rouba atenção da tarefa. */
  margin:var(--s-6) auto 0;padding:var(--s-5);max-width:1100px;
  border-top:1px solid var(--c-border);
}
.rodape-painel .quem{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
/* Discreto de propósito: assinatura, não anúncio. Quem está no painel veio
   trabalhar, não conhecer a agência. */
.rodape-painel img{height:20px;width:auto;max-width:150px;display:block;opacity:.75}
.rodape-painel a:hover img{opacity:1}
.rodape-painel .nome,
.rodape-painel .cnpj{font-size:var(--t-xs);color:var(--c-text-soft)}

/* O suporte é o único elemento clicável de peso aqui — e precisa ser achável
   sem procurar, porque quem o procura já está com problema. */
.rodape-painel .suporte{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:8px var(--s-4);border-radius:var(--r-pill);
  border:1px solid var(--c-border);background:var(--c-surface);
  font-size:var(--t-sm);font-weight:500;color:var(--c-text);white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.rodape-painel .suporte:hover{background:var(--c-bg);border-color:var(--c-text-soft)}

@media (max-width: 640px){
  /* No celular a assinatura empilha e o botão ocupa a linha: alvo de toque
     grande vale mais que simetria. */
  .rodape-painel{flex-direction:column;align-items:stretch;text-align:center}
  .rodape-painel .quem{justify-content:center}
  .rodape-painel .suporte{justify-content:center}
}

/* ---------- Faixa do painel de demonstração ----------

   Verde e não vermelho de propósito: não é alerta de falha, é contexto. A
   pessoa está EXPERIMENTANDO — assustá-la com cor de erro seria a primeira
   impressão errada de uma ferramenta que se quer amigável.

   Acima de tudo, inclusive da faixa de suporte: enquanto a demonstração está
   ligada, é o fato mais importante da tela. */
.faixa-demonstracao{
  background:#065F46;color:#fff;
  padding:var(--s-3) var(--s-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;font-size:var(--t-sm);line-height:1.45;
}
.faixa-demonstracao strong{color:#fff}
.faixa-demonstracao a{
  color:#065F46;background:#fff;white-space:nowrap;
  padding:6px var(--s-4);border-radius:var(--r-pill);font-weight:600;
}
.faixa-demonstracao a:hover{background:#ECFDF5}

/* O controle desabilitado precisa PARECER desabilitado, senão a pessoa clica,
   nada acontece, e ela conclui que travou. Cursor de "não pode" junto: é o
   único aviso que aparece antes do clique. */
body.demonstracao button[disabled],
body.demonstracao input[disabled],
body.demonstracao select[disabled]{
  opacity:.45;cursor:not-allowed;
}

/* ---------------------------------------------------------------------------
   `hidden` PRECISA VENCER.

   🔴 O botão "Silenciar" da tela de pedidos nasceu com `hidden`, e ficava
      visível o tempo todo: `[hidden]{display:none}` vem da folha do NAVEGADOR,
      e qualquer `display` nosso — o `.btn{display:inline-flex}`, no caso —
      ganha dela por especificidade. Conferido no ar: `hidden=true` e
      `display:flex` no mesmo elemento.

      O estrago é a tela oferecendo o que não existe: um botão para silenciar
      um alerta que não está tocando. É o mesmo defeito de sempre, só que em
      CSS.

   Uma regra global e não um `.silenciar[hidden]{}` por elemento: a lista de
   elementos com `hidden` cresce toda semana, e o próximo nasce quebrado.
--------------------------------------------------------------------------- */
[hidden]{display:none !important}