/* Tokens do painel — fonte unica de cor e forma.
   Paleta e regras vindas de docs/PROJETO_PAINEL.md. Nao repetir hex solto
   no codigo: tudo passa por variavel. */
:root{
  --bg:#0a0f10;
  --container:#0d1214;
  --surface:#131c1f;
  --surface-2:#101618;
  --border:#1f2a2d;
  --border-accent:#1f3a2c;
  --border-warn:#302b1c;
  --border-crit:#33262a;

  --text:#f4f7f7;
  --text-2:#c2cbcd;
  /* CONTRASTE MEDIDO, nao escolhido no olho. O texto que explica o
     numero grande estava em 3,30:1 sobre o cartao - abaixo do minimo
     legivel (4,5:1) - e o metadado em 1,94:1, que e' quase nada. Era a
     reclamacao do Daniel: "informacoes importantes quase invisiveis".
     Agora: apoio 5,20:1 e metadado 3,92:1, mantendo os tres niveis
     distintos (--text-2 10,5 > --muted 5,2 > --faint 3,9). */
  --muted:#7f9093;
  --faint:#6b7b7e;

  /* verde-bolsa: bom/positivo/no-alvo. #22c55e (verde puro classico) foi
     testado e REPROVADO no validador de acessibilidade — verde puro ao
     lado de vermelho puro e o par classico que se confunde pra quem tem
     daltonismo vermelho-verde (o tipo mais comum). #34d399 mantem a leitura
     de "verde de bolsa" pro olho normal e passa CVD ΔE 9,8 contra o
     vermelho (alvo >=8). */
  --accent:#34d399;
  --warn:#e0b341;     /* amarelo — atencao */
  --crit:#e06c6c;     /* vermelho — critico */
  --neutral:#7c8b8e;

  --link:#38bdf8;

  /* SELECIONADO — "espelho fosco". O estado ligado era
     background:#131c1f sobre um fundo #0d1214: dois tons de diferença,
     invisível em tela clara e a três metros do monitor. Agora o
     selecionado inverte pra claro, que é o único contraste que sobrevive
     a qualquer condição. Não é cor de estado (verde/amarelo/vermelho
     continuam sendo sinal) - é estrutura, que nesta paleta é branco. */
  --sel-fundo:rgba(244,247,247,.94);
  --sel-texto:#0a0f10;
  --sel-borda:rgba(244,247,247,.94);
  --sel-brilho:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 12px -6px rgba(0,0,0,.85);
  /* Repouso com mais presença: o botão não selecionado também sumia. */
  --borda-forte:#33454a;

  --radius-lg:18px;
  --radius:15px;
  --radius-sm:11px;

  /* Menu enxuto: o Daniel reclamou que estava "roubando muito espaço" —
     cada pixel aqui é um anúncio a menos lado a lado na tela da loja.
     182px é o mínimo em que "Lojas em queda" ainda cabe com o contador
     ao lado (a 172px o número ficava cortado). Continua garantindo 3
     anúncios lado a lado até num monitor de 1366. */
  --sidebar:182px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------- estrutura */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh;}

.side{
  background:var(--container);border-right:1px solid #1a2225;
  padding:16px 9px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.side h1{font-size:11.5px;color:var(--muted);font-weight:500;letter-spacing:.5px;
  margin:0 0 11px;padding:0 8px;}
.navi{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;
  color:var(--text-2);font-size:12.5px;cursor:pointer;border:1px solid transparent;
  background:transparent;width:100%;text-align:left;font-family:inherit;
  white-space:nowrap;overflow:hidden;
}
.navi:hover{background:var(--surface-2);}
.navi.on{background:var(--sel-fundo);border-color:var(--sel-borda);color:var(--sel-texto);
  font-weight:500;box-shadow:var(--sel-brilho);backdrop-filter:blur(6px);}
.navi.on svg{color:var(--sel-texto);}
.navi .badge{margin-left:auto;font-size:11px;background:#33262a;color:var(--crit);
  padding:2px 7px;border-radius:7px;}

.main{padding:18px 20px;min-width:0;}
.container{background:var(--container);border:1px solid #1a2225;
  border-radius:var(--radius-lg);padding:18px 20px;max-width:1560px;margin:0 auto;}

/* ------------------------------------------------------------- pecas */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.chip{font-size:12px;color:var(--text-2);background:var(--surface);
  border:1px solid var(--border);padding:6px 12px;border-radius:9px;
  display:inline-flex;align-items:center;gap:6px;}
.kpi-label{font-size:12px;color:var(--muted);}
.kpi-num{font-size:23px;font-weight:500;color:var(--text);}
.bar-track{height:5px;background:var(--bg);border-radius:99px;overflow:hidden;}
.bar-fill{height:100%;border-radius:99px;transition:width .4s ease;}
.muted{color:var(--muted);} .accent{color:var(--accent);}
.warn{color:var(--warn);} .crit{color:var(--crit);}

.head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.head .ic{width:40px;height:40px;border-radius:11px;background:#122a30;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.back{background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:8px 11px;cursor:pointer;color:var(--text-2);}

.grid-kpi{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;margin-bottom:12px;}
.grid-kpi-4{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:10px;margin-bottom:12px;}
/* Item 8: "meta do mes" deixou de ser card gigante separado e virou a 5a
   coluna desta linha, ao lado de Ontem/Hoje/Mes/Acao necessaria. */
.grid-kpi-5{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1.15fr;gap:12px;margin-bottom:16px;}
.grid-lojas{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px;}

/* ------------------------------------------------------- tela Admin
   Pedido do Daniel: "denso com destaque visual" - cabe mais na tela de
   uma vez, mas os numeros/cores que precisam de acao saltam aos olhos.
   Reaproveita .mini-kpi/.kpi-num/.bar-track/.grid-lojas/.loja que ja
   existiam - so' adiciona o minimo pra virar botao clicavel e pra' uma
   grade mais compacta que a de colaborador (que tem mais texto). */
.mini-kpi-clic{background:var(--surface);border:1px solid var(--border);border-radius:13px;
  padding:12px 14px;cursor:pointer;font-family:inherit;text-align:left;color:inherit;
  display:block;width:100%;}
.mini-kpi-clic:hover{border-color:var(--border-accent);}
.grid-colab{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;}
/* Card de loja unificado (fatura+meta+promocao+gestao num so' lugar, em
   vez de repetir a mesma loja em 3 grades separadas) precisa de um pouco
   mais de largura que .grid-lojas (235px) pra nao quebrar valor em R$. */
.grid-lojas-adm{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;}

/* Altura minima igual: no painel inicial os cards ficam lado a lado e
   qualquer diferenca de altura entre eles salta aos olhos. */
.loja{padding:16px 17px;cursor:pointer;min-height:165px;}
.loja:hover{border-color:var(--border-accent);}
.row-line{display:flex;align-items:center;gap:12px;border-left:3px solid var(--crit);
  border-radius:0 10px 10px 0;padding:11px 14px;cursor:pointer;background:var(--surface-2);
  border-top:1px solid var(--border);border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);}

.secao{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.4px;}

/* ---------------------------------------------- cartoes de produto
   Redesenho pedido: legivel, hierarquico, foto maior, espaco pra crescer.
   Grid em vez de lista densa - cada produto e um cartao auto-contido.
   Mantem a regra da casa (borda-esquerda = estado, radius:0 desse lado),
   so que agora com respiro de verdade em vez de tudo espremido numa linha. */
.grid-produtos{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:16px;}

.produto-card{display:flex;flex-direction:column;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 17px;}

/* Item 3: familia clicavel expande pra lista de variantes SEM virar 1
   celula estreita no grid. Fechado, o wrapper e transparente (display:
   contents) e o proprio .produto-card e a celula do grid, igual antes.
   Aberto, o wrapper vira a celula e ocupa a largura toda (grid-column:
   1/-1), evitando que .grid-produtos estique as outras celulas da mesma
   linha pra acompanhar a altura da lista. */
.produto-wrap{display:contents;}
/* Pedido novo (2026-08-17): variações ficam AO LADO do card da família,
   não empilhadas embaixo - com 16-21 variações isso deixava a tela
   gigante pra informação pequena. Card fica numa coluna com largura
   confortável, a lista de variações ocupa o resto e rola sozinha (tem
   seu próprio scroll) em vez de esticar a página inteira. */
.produto-wrap-aberto{display:grid;grid-column:1 / -1;
  grid-template-columns:minmax(300px,400px) 1fr;gap:14px;align-items:start;}
.produto-col-principal{display:flex;flex-direction:column;min-width:0;}
.variantes-lista{display:flex;flex-direction:column;gap:8px;
  max-height:600px;overflow-y:auto;padding-right:4px;min-width:0;}

@media(max-width:760px){
  /* Sem espaço pra 2 colunas no celular - volta a empilhar, mas mantém o
     scroll próprio da lista pra não virar uma tela infinita. */
  .produto-wrap-aberto{grid-template-columns:1fr;}
  .variantes-lista{max-height:70vh;}
}

.produto-topo{display:flex;gap:13px;align-items:flex-start;}
.thumb{width:42px;height:42px;border-radius:9px;background:var(--bg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.thumb-lg{width:64px;height:64px;border-radius:12px;}
.thumb img{width:100%;height:100%;object-fit:cover;}

/* Item 1: letras pequenas de mais pra leitura/acao rapida - subiu um
   degrau geral (titulo, numeros dos mini-cards e a caixa de recomendacao,
   que e a informacao de "execucao" que o Daniel mais precisa bater o olho
   e agir). */
.produto-titulo{font-size:15.5px;font-weight:500;line-height:1.4;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.stat-mini{background:var(--surface-2);border-radius:9px;padding:9px 11px;}
.stat-mini .rotulo{font-size:11.5px;color:var(--muted);margin-bottom:3px;font-weight:500;}
.stat-mini .valor{font-size:18px;font-weight:600;}

.reco-box{border-radius:10px;padding:12px 14px;}
.reco-box .titulo{font-size:14.5px;font-weight:600;margin:0 0 4px;
  display:flex;align-items:center;gap:6px;}
.reco-box .detalhe{font-size:13px;color:var(--text-2);line-height:1.5;margin:0;}

.produto-rodape{display:flex;justify-content:space-between;align-items:center;
  gap:8px;margin-top:2px;}

.id-link{font-size:12.5px;color:var(--link);margin:3px 0 0;text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;}
.id-link:hover{text-decoration:underline;}

.filtros{display:flex;gap:9px;margin-bottom:16px;align-items:center;flex-wrap:wrap;}
.filtros input{flex:1;min-width:180px;padding:9px 12px 9px 34px;background:var(--surface);
  border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13px;
  font-family:inherit;}
.fbtn{padding:8px 14px;border-radius:9px;font-size:13px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);
  font-family:inherit;transition:background .1s ease,color .1s ease;}
/* Pedido do Daniel: "quando o filtro estiver clicado ou meu mouse passar
   por cima ele fica na cor branca com letras escuras realçando" - antes
   era so' uma borda sutil, praticamente invisivel. Selecionado e hover
   usam o mesmo contraste forte (fundo claro/texto escuro), pra nunca
   restar duvida se a tela reagiu ao clique. */
.fbtn:hover{border-color:var(--borda-forte);color:var(--text);}
.fbtn.on{background:var(--sel-fundo);border-color:var(--sel-borda);
  color:var(--sel-texto);font-weight:600;box-shadow:var(--sel-brilho);}
/* Item 6: em vez de banner separado repetindo a contagem de "sem
   promocao", o proprio filtro fica vermelho quando ha confirmados > 0 -
   1 sinal so, no lugar onde a acao (clicar pra ver) realmente acontece. */
.fbtn-crit{border-color:#4a2a2a;background:#1c1112;color:var(--crit);}
.fbtn-crit:hover{border-color:var(--crit);}
.fbtn-crit.on{background:var(--sel-fundo);border-color:var(--crit);
  color:#8c2f2d;font-weight:600;box-shadow:var(--sel-brilho);}

/* Campo de formulario padrao (input/select). Existia so' como estilo
   inline repetido em cada tela - virou classe quando a tela de Ordens
   precisou de 7 campos de uma vez. */
.campo{width:100%;min-width:0;padding:8px 10px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-size:12.5px;font-family:inherit;box-sizing:border-box;}
.campo:focus{outline:none;border-color:var(--border-accent);}
/* Quem navega por teclado precisa ver onde está. */
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--text);outline-offset:2px;}

.btn{background:transparent;border:1px solid var(--borda-forte);color:var(--text-2);
  padding:6px 15px;border-radius:9px;font-size:13px;cursor:pointer;font-family:inherit;}
.btn-primario{background:var(--accent);border:none;color:#04211d;padding:11px;
  border-radius:10px;font-weight:500;font-size:14px;cursor:pointer;width:100%;
  font-family:inherit;}
.btn-primario:disabled{background:var(--surface);color:var(--muted);cursor:not-allowed;
  border:1px solid var(--border);}

.layout-ads{display:grid;grid-template-columns:1fr 1.35fr;gap:14px;align-items:start;}
.mini-kpi{background:var(--surface);border:1px solid var(--border);border-radius:13px;
  padding:13px 15px;}
.camp{border:1px solid var(--border);border-radius:0 11px 11px 0;padding:11px 13px;
  cursor:pointer;background:var(--surface);}
.camp.on{background:#101a1c;border-color:#34d39955;}
.drawer{background:#101a1c;border:1px solid #34d39940;border-radius:14px;padding:17px 18px;}
.drow{display:flex;justify-content:space-between;font-size:13px;}

/* -------------------------------------------------------- estados */
.skel{background:linear-gradient(90deg,var(--surface) 25%,#182225 50%,var(--surface) 75%);
  background-size:200% 100%;animation:sk 1.3s infinite;border-radius:var(--radius);}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes girar{to{transform:rotate(360deg)}}
.vazio,.erro{padding:34px 20px;text-align:center;font-size:13px;}
.vazio{color:var(--muted);}
.erro{color:var(--crit);}

.aviso{border-left:3px solid var(--warn);border-radius:0 13px 13px 0;padding:13px 16px;
  display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text-2);}

/* ------------------------------------------ tela de loja com abas
   Pedido do Daniel: tela nova baseada em imagem de referencia (estilo
   "Apexify") - cabecalho de loja, abas horizontais, automacao de
   campanha (regras + efeito) e publicidade (kpis + graficos). So' o
   visual por enquanto, dado fixo, sem chamar api() - conecta depois. */
.cabecalho-loja{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.avatar-loja{width:52px;height:52px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;color:var(--text-2);flex-shrink:0;}
.chip-estado{font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;
  text-transform:lowercase;}

.tabs-loja{display:flex;gap:24px;border-bottom:1px solid var(--border);margin-bottom:20px;
  flex-wrap:wrap;}
.tab-loja{display:flex;align-items:center;gap:7px;padding:11px 1px;font-size:13.5px;
  color:var(--muted);cursor:pointer;border:none;background:none;font-family:inherit;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.tab-loja:hover{color:var(--text-2);}
.tab-loja.on{color:var(--text);border-bottom-color:var(--text);border-bottom-width:3px;
  font-weight:600;}
.tab-loja .cnt{background:var(--surface-2);color:var(--muted);font-size:10.5px;
  padding:1px 7px;border-radius:99px;}
.tab-loja.on .cnt{background:var(--sel-fundo);color:var(--sel-texto);font-weight:600;}

/* Interruptor liga/desliga - vocabulario novo (o app so tinha checkbox
   ate agora), pedido explicito pelas 3 chaves da imagem de referencia. */
.interruptor{position:relative;width:38px;height:22px;flex-shrink:0;display:inline-block;
  cursor:pointer;}
.interruptor input{opacity:0;width:0;height:0;position:absolute;}
.interruptor .trilho{position:absolute;inset:0;background:var(--surface-2);
  border:1px solid var(--border);border-radius:99px;transition:background .15s ease,border-color .15s ease;}
.interruptor .bola{position:absolute;top:2px;left:2px;width:16px;height:16px;
  background:var(--muted);border-radius:50%;transition:transform .15s ease,background .15s ease;}
.interruptor input:checked + .trilho{background:#0e3830;border-color:var(--accent);}
.interruptor input:checked + .trilho .bola{transform:translateX(16px);background:var(--accent);}

/* Linha de regra de automacao: rotulo+ajuda a esquerda, caixa de valor
   com unidade a direita - repete varias vezes na mesma "receita". */
.campo-config{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--border);}
.campo-config:last-of-type{border-bottom:none;}
.campo-config .rotulo{font-size:13.5px;color:var(--text);}
.campo-config .ajuda{font-size:11.5px;color:var(--muted);margin-top:2px;}
.campo-config-valor{display:flex;align-items:center;gap:7px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:9px;padding:8px 12px;flex-shrink:0;min-width:104px;}
.campo-config-valor input{background:none;border:none;color:var(--text);font-size:14px;
  font-family:inherit;width:100%;text-align:right;}
.campo-config-valor input::-webkit-outer-spin-button,
.campo-config-valor input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.campo-config-valor .unidade{font-size:12px;color:var(--muted);flex-shrink:0;}
.campo-config-valor button{background:none;border:none;color:var(--faint);cursor:pointer;
  padding:0;display:flex;flex-shrink:0;}

/* Escolha em pilula unica (assunto rapido do modal de mensagem) -
   contraste sutil (borda/texto verde), diferente do .fbtn (que inverte
   pra fundo claro) porque aqui a intencao visual e outra: sugestao
   rapida de preenchimento, nao filtro de dado. */
.pilula-escolha{padding:7px 14px;border-radius:99px;font-size:12.5px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
  font-family:inherit;}
.pilula-escolha.on{background:#0e3830;border-color:var(--accent);color:var(--accent);}

/* Painel lateral fixo (mensagem ao colaborador) - diferente do overlay
   central (#promo-itens-overlay): entra pela direita, altura cheia. */
.painel-lateral-fundo{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;}
.painel-lateral{position:fixed;top:0;right:0;bottom:0;width:min(430px,92vw);
  background:var(--container);border-left:1px solid #1a2225;z-index:71;padding:26px;
  overflow-y:auto;display:flex;flex-direction:column;gap:18px;}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

/* Grafico de linha simples (ACOS diario) - SVG cru, sem lib. Linha fina
   arredondada + area translucida + linha-alvo tracejada, igual ao resto
   do app (cor so' onde e sinal). */
.grafico-linha{width:100%;height:180px;}
.barra-motivo{display:flex;flex-direction:column;gap:14px;}
.barra-motivo-item .topo{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:6px;font-size:12.5px;}
.barra-motivo-item .trilho{height:8px;background:var(--surface-2);border-radius:99px;
  overflow:hidden;}
.barra-motivo-item .fill{height:100%;border-radius:99px;}

.tabela-camp{width:100%;border-collapse:collapse;font-size:13px;}
.tabela-camp th{text-align:left;font-size:10.5px;color:var(--faint);font-weight:600;
  letter-spacing:.3px;padding:0 10px 10px;text-transform:uppercase;}
.tabela-camp th:not(:first-child),.tabela-camp td:not(:first-child){text-align:right;}
.tabela-camp td{padding:12px 10px;border-top:1px solid var(--border);}
.tabela-camp tr:first-child td{border-top:none;}

@media(max-width:760px){
  .grid-4{grid-template-columns:1fr 1fr;}
  .layout-ads-loja{grid-template-columns:1fr;}
}

/* -------------------------------------------------------- responsivo */
@media(max-width:900px){
  .app{grid-template-columns:1fr;}
  .side{position:static;height:auto;flex-direction:row;overflow-x:auto;
    border-right:none;border-bottom:1px solid #1a2225;}
  .side h1{display:none;}
  .navi{white-space:nowrap;width:auto;}
  .main{padding:14px;}
  .container{padding:16px;}
  .grid-kpi,.grid-kpi-4,.grid-kpi-5{grid-template-columns:1fr 1fr;}
  /* O drawer do Acelerador vira folha inferior, conforme o spec. */
  .layout-ads{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .grid-kpi,.grid-kpi-4,.grid-kpi-5{grid-template-columns:1fr;}
}

/* ------------------------------------------------ sino do recado do Head
   O recado do Head ficava dentro da loja: so' via quem ja' tinha entrado,
   e e' justamente pra quem NAO entrou que ele serve. Agora o sino fica no
   cartao, do lado de fora.

   Balanca por 4 segundos e para. Sino que balanca pra sempre vira papel
   de parede - em duas horas ninguem enxerga mais, que e' o oposto de
   chamar atencao. */
.sino-recado{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(226,113,75,.16);color:var(--crit);
  position:relative;padding:0;
  transform-origin:50% 15%;
  animation:sino-toca 1.1s ease-in-out 0s 4;
}
.sino-recado:hover{background:rgba(226,113,75,.28)}
.sino-recado .qtd{
  position:absolute;top:-3px;right:-3px;min-width:14px;height:14px;
  border-radius:99px;background:var(--crit);color:#0b1012;
  font-size:9px;font-weight:700;line-height:14px;text-align:center;
  padding:0 3px;font-family:inherit;
}
@keyframes sino-toca{
   0%,60%,100%{transform:rotate(0)}
   5%{transform:rotate(14deg)}  15%{transform:rotate(-12deg)}
  25%{transform:rotate(9deg)}   35%{transform:rotate(-7deg)}
  45%{transform:rotate(4deg)}   52%{transform:rotate(-2deg)}
}
/* Quem pediu menos movimento no sistema nao leva sino balancando na cara.
   O aviso continua: fica o circulo vermelho e o numero. */
@media (prefers-reduced-motion:reduce){
  .sino-recado{animation:none}
}

/* ---------------------------------------- card de loja (desenho de 31/08)
   Porta o layout que o Daniel mandou para a paleta escura.
   Grade de 2 colunas: números à esquerda, gráfico à direita com divisória.
   Topo, rodapé e botões atravessam as duas. */
.grid-lojas{grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:12px;}

.fx-card-loja{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 15px;
  padding:14px 16px;
}
.fx-cl-topo{
  grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;
  padding-bottom:12px;margin-bottom:13px;border-bottom:1px solid var(--border);
}
.fx-cl-nome{
  font-size:15px;font-weight:600;letter-spacing:.01em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fx-cl-chip{
  flex-shrink:0;font-size:9.5px;font-weight:500;letter-spacing:.04em;
  padding:2px 8px;border-radius:99px;border:1px solid;background:transparent;
}
.fx-cl-resp{text-align:right;flex-shrink:0}
.fx-cl-resp .rot{font-size:9px;color:var(--faint);letter-spacing:.05em}
.fx-cl-resp .nome{font-size:11.5px;color:var(--text-2)}

.fx-cl-meio{grid-column:1;min-width:0}
.fx-cl-numeros{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fx-cl-grande{font-size:22px;font-weight:500;letter-spacing:-.4px;line-height:1.15}
.fx-cl-sob-barra{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-top:5px;font-size:10.5px;color:var(--muted);
}

/* Gráfico à direita, com a divisória vertical do desenho. */
.fx-cl-graf{
  grid-column:2;position:relative;flex-shrink:0;
  border-left:1px solid var(--border);padding-left:14px;
}
.fx-cl-graf .rot{font-size:10.5px;color:var(--muted);margin-bottom:4px}
.fx-cl-var{
  position:absolute;top:0;right:0;font-size:11px;font-weight:500;
  padding:1px 7px;border-radius:99px;background:var(--surface-2);
}
/* O <title> de cada faixa do SVG vira tooltip nativo com o dia. */
.fx-cl-graf svg rect{cursor:crosshair}

.fx-cl-rodape{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  font-size:11px;color:var(--muted);
}
.fx-cl-rodape span{display:inline-flex;align-items:center;gap:6px}
.fx-cl-rodape b{font-weight:500;color:var(--text)}
.fx-cl-mini-bar{
  height:3px;background:var(--surface-2);border-radius:99px;
  margin-top:6px;overflow:hidden;
}
.fx-cl-mini-bar>div{height:100%;border-radius:99px}

.fx-cl-botoes{
  grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;
  margin-top:14px;
}
.fx-cl-botoes .btn,.fx-cl-botoes .btn-primario{padding:8px 15px;font-size:12.5px}

@media(max-width:520px){
  /* O gráfico desce para baixo dos números em vez de espremer os dois.
     minmax(0,1fr) e não 1fr: `1fr` sozinho é minmax(AUTO,1fr), e o auto
     usa a largura mínima do conteúdo. Com o cabeçalho cheio de
     flex-shrink:0 isso dava uma coluna de 360px dentro de um container de
     314px — a página inteira rolava de lado. */
  .grid-lojas{grid-template-columns:minmax(0,1fr)}
  .fx-card-loja{grid-template-columns:minmax(0,1fr)}
  /* Nome, chip, responsável e sino passam a quebrar linha em vez de
     empurrar a largura do card. */
  .fx-cl-topo{flex-wrap:wrap;row-gap:6px}
  .fx-cl-resp{text-align:left}
  .fx-cl-meio,.fx-cl-graf{grid-column:1}
  .fx-cl-graf{border-left:none;padding-left:0;margin-top:14px}
  .fx-cl-rodape{grid-template-columns:1fr;gap:9px}
  .fx-cl-botoes{flex-direction:column-reverse}
  .fx-cl-botoes .btn,.fx-cl-botoes .btn-primario{width:100%}
}

/* Faixa de 3 KPIs do topo de Lojas. Era style inline com repeat(3,1fr),
   e estilo inline vence media query — a 375px os três estouravam a página
   em 2px e ela rolava de lado. Virou classe pra poder empilhar. */
.grid-kpi-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:520px){
  .grid-kpi-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){
  .grid-kpi-3{grid-template-columns:minmax(0,1fr)}
}

/* KPIs do topo de Lojas, mais baixos (pedido do Daniel, 01/09).
   O padding estava no atributo style de cada card, o que impedia
   qualquer ajuste por CSS — virou classe. */
.kpi-compacto{padding:10px 13px}
.kpi-compacto .kpi-num{font-size:18px;line-height:1.15}
.kpi-compacto .kpi-label{font-size:10.5px}
/* O espaçamento interno vinha em style inline (margin-bottom:11px), que
   vence CSS. Como a linha é só rótulo + ícone, o negativo aqui devolve
   parte da altura sem mexer no JS de novo. */
.kpi-compacto>div:first-child{margin-bottom:2px !important}

/* "Ver loja" estava com corpo de botão principal de formulário.
   Aqui ele é ação de card: mesmo peso visual do "Abrir detalhes". */
.fx-cl-botoes .btn,
.fx-cl-botoes .btn-primario{
  /* width:auto anula o width:100% do estilo base do .btn-primario, que e
     pensado pra botao de formulario. Sem isso o "Ver loja" esticava pra
     354px contra 95px do "Abrir detalhes". */
  width:auto;padding:7px 14px;font-size:12px;line-height:1.2;
  display:inline-flex;align-items:center;gap:6px;
}
.fx-cl-botoes .btn-primario svg{width:12px;height:12px}