/* =============================================================================
   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)}

/* ---------- Lista de pedidos ---------- */
.pedido-linha{
  display:flex;align-items:center;gap:var(--s-3);
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-card);
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-2);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}
.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}
.pedido-linha .quem{flex:1;min-width:0}
.pedido-linha .quem .nome{font-weight:500}
.pedido-linha .quem .det{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}
.pedido-linha .quando{font-size:var(--t-xs);color:var(--c-text-soft);white-space:nowrap;min-width:44px;text-align:right}

/* 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}
.selo.cancelado{background:#FEE2E2;color:#7F1D1D}
.selo.pendente{background:#FEF3C7;color:#92400E}
.selo.pago{background:#DCFCE7;color:#14532D}
/* 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}

/* 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)}
  .pedido-linha{flex-wrap:wrap}
  .pedido-linha .quem{flex-basis:100%;order:3}
  .faixa-aviso{flex-wrap:wrap}
  .faixa-aviso .acoes{margin-left:auto}
}