/* =====================================================================
   SCOUTER — PAINEL v4: A FUNDAÇÃO E AS TELAS               (14/09/2026)

   Duas folhas, cada componente em UM lugar só:

     app.css    (esta)  — tokens, fontes, reset e tipografia base; e, no
                          fim, o que cada TELA ainda usa enquanto não tem a
                          folha própria (saas/static/telas/<id>.css).
     painel.css         — a casca (trilho, barra de comando, conteúdo), os
                          componentes (cartão, número, botão, chip, pílula,
                          tabela, formulário, aviso, estado vazio), a paleta
                          Ctrl K, a barra de salvar, o movimento e as telas
                          de entrada (login, primeiro acesso, senha, conta).
     grafico.css        — os gráficos (área, barras, dica) e a entrada deles.

   Os tokens moram AQUI e não no painel.css porque o teste
   tests/test_contas_das_lojas_no_painel.py exige que toda var() usada neste
   arquivo esteja definida neste arquivo. A paleta é a do site
   (saas/scouter-novo.html): preto neutro, vermelho sangue, branco osso.
   ===================================================================== */

@font-face {
  font-family: "Chakra Petch";
  src: url("/static/ChakraPetch-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("/static/ChakraPetch-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* a paleta do site, copiada de scouter-novo.html */
  --fundo: #080808;
  --fundo-2: #0d0d0e;
  --painel: #121213;
  --painel-2: #191919;
  --painel-3: #201f20;
  --linha: #262627;
  --linha-viva: #3a3a3c;
  --texto: #eceae7;
  --fraco: #8d8a86;
  --fraco-2: #66625e;
  --vermelho: #e0203f;
  --vermelho-claro: #f2707f;
  --vermelho-escuro: #8c0f22;
  --coral: #ff6b7d;
  --osso: #ede3d6;
  --prata: #c9bcae;
  --ok: #3ddc97;
  /* semântica além do site: atenção é âmbar; erro é o vermelho da marca,
     sempre acompanhado de ícone ou texto (o vermelho sozinho é a marca) */
  --atencao: #f5b83d;

  /* as lojas: só em ponto ou pílula pequena, nunca em área */
  --amazon: #ff9900;
  --ml: #ffe600;
  --shopee: #ee4d2d;
  --ali: #e43226;
  --magalu: #0086ff;
  --kabum: #ff6500;
  --terabyte: #ff3b3b;

  /* nomes antigos que os templates e o app.py ainda escrevem em style=""
     (--cor: var(--menta), var(--azul)...). São apelidos, não cores novas:
     quando o app.py passar a usar os nomes de cima, estas linhas saem. */
  --menta: var(--ok);
  --ambar: var(--atencao);
  --laranja: var(--atencao);
  --apagado: var(--fraco);
  --azul: var(--vermelho);
  --roxo: var(--vermelho-claro);
  --rosa: var(--coral);

  --curva: cubic-bezier(.2, .9, .25, 1);
  --curva-2: cubic-bezier(.16, 1, .3, 1);
  --raio: 18px;
  --raio-cartao: 14px;
  --raio-botao: 10px;

  --fonte-titulo: "Chakra Petch", "Inter", system-ui, sans-serif;
  --fonte-texto: "Inter", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* medidas da casca */
  --trilho: 78px;
  --trilho-aberto: 244px;
  --comando: 92px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font: 400 14px/1.5 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--vermelho-claro); }
::selection { background: rgba(224, 32, 63, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; border-radius: 4px; }
code { font-family: var(--fonte-mono); font-size: .92em; }

/* barra de rolagem fina, na cor da linha: a padrão do Windows é a coisa
   mais clara de uma tela escura */
* { scrollbar-width: thin; scrollbar-color: var(--linha-viva) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--linha-viva); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* o título subiu para a barra de comando; o bloco antigo some sem quebrar
   template que ainda o inclua */
.cabeca-da-pagina { display: none; }

/* cores de texto que as telas usam em célula, nota e contagem */
.bom { color: var(--ok); }
.ruim { color: var(--vermelho); }
.apagado { color: var(--fraco); }

/* a cor da loja: quem tem data-loja ganha --loja; etiqueta, selo, ponto e
   fio da tabela leem daqui (o valor do atributo vem do filtro `loja`) */
[data-loja] { --loja: var(--prata); }
[data-loja="amazon"] { --loja: var(--amazon); }
[data-loja="mercado-livre"] { --loja: var(--ml); }
[data-loja="shopee"] { --loja: var(--shopee); }
[data-loja="aliexpress"] { --loja: var(--ali); }
[data-loja="magalu"] { --loja: var(--magalu); }
[data-loja="kabum"] { --loja: var(--kabum); }
[data-loja="terabyteshop"] { --loja: var(--terabyte); }


/* =====================================================================
   AS TELAS, ENQUANTO NÃO TÊM FOLHA PRÓPRIA

   Cada bloco abaixo pertence a UMA tela e sai daqui no dia em que a tela
   ganhar saas/static/telas/<id>.css. Só o que o template daquela tela
   usa hoje; nada de componente (esses moram no painel.css).
   ===================================================================== */

/* ---------- Visão geral (painel.html, app.js) ---------- */
.cockpit:not(:has(.servico)) { display: none; }            /* servidor sem serviços listados: nada de vão */
.servicos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.servico {
  display: grid; gap: 12px;
  padding: 16px 18px 14px;
  border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: var(--painel);
  transition: border-color .2s var(--curva);
}
.servico:hover { border-color: var(--linha-viva); }
.servico-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.servico .farol { width: 10px; height: 10px; border-radius: 50%; background: var(--fraco-2); }
.servico .farol.ligado { background: var(--ok); box-shadow: 0 0 10px rgba(61, 220, 151, .7); }
.servico .farol.desligado { background: var(--vermelho); }
.servico-nome { min-width: 0; }
.servico-nome strong { display: block; font: 600 15px/1.2 var(--fonte-titulo); }
.servico .estado {
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--linha-viva); color: var(--fraco);
  font: 600 11.5px/1.2 var(--fonte-texto);
}
.servico .estado.aceso { color: var(--ok); border-color: rgba(61, 220, 151, .4); background: rgba(61, 220, 151, .07); }
.servico-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--linha); }
.servico .miudos { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.servico .miudos span { font: 500 12px/1.4 var(--fonte-mono); color: var(--fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.servico .miudos .alvo { color: var(--texto); }
.servico .botoes { display: flex; gap: 8px; }
.servico .botoes .acao { height: 32px; padding: 0 12px; font-size: 12.5px; }
/* app.js desliga "Ligar" no ar e "Parar"/"Reiniciar" parado: o botão que
   não vale some, e sobra UMA ação principal por estado */
.servico .acao:disabled { display: none; }
.servico .motivo { font-size: 12.5px; color: var(--atencao); }
.servico .recado { font-size: 12.5px; color: var(--fraco); }
.servico .recado:empty { display: none; }
.servico .recado.bom { color: var(--ok); }
.servico .recado.ruim { color: var(--vermelho); }
/* serviço que ligou ou parou pulsa uma vez na cor nova */
.servico.servico-pulsou { animation: clarao-do-servico .5s var(--curva) both; }
.servico.servico-pulso-ok { --pulso: var(--ok); }
.servico.servico-pulso-parado { --pulso: var(--vermelho); }
@keyframes clarao-do-servico {
  from { border-color: var(--pulso, var(--vermelho)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pulso, var(--vermelho)) 18%, transparent); }
}

.funil-e-grafico { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.9fr); gap: 18px; align-items: stretch; }
.funil { display: flex; flex-direction: column; }
.passos-do-funil { flex: 1; display: grid; gap: 16px; align-content: space-evenly; }
.passo-do-funil { display: grid; gap: 7px; }
.passo-do-funil header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.passo-do-funil header span { font: 700 11px/1.2 var(--fonte-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--fraco); }
.passo-do-funil header b { font: 700 20px/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.passo-do-funil header b small { margin-left: 6px; font: 600 11px/1 var(--fonte-texto); color: var(--fraco); }
.barra-do-funil { position: relative; height: 8px; border-radius: 999px; background: var(--painel-3); overflow: hidden; }
.barra-do-funil i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 999px; background: var(--linha-viva); transform-origin: left center; }
.passo-do-funil.montadas .barra-do-funil i { background: var(--vermelho-claro); }
.passo-do-funil.publicadas .barra-do-funil i { background: var(--vermelho); }
.funil .sobras { display: flex; gap: 16px; margin-top: 14px; font-size: 12.5px; color: var(--fraco); }
.funil .sobras b { font-family: var(--fonte-mono); color: var(--texto); }
.funil .sobras .ruim b { color: var(--vermelho); }
.numeros-resumo[hidden], .explicacao-oculta[hidden] { display: none; }

.fontes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 460px; overflow-y: auto; }
.fonte { display: grid; grid-template-columns: 200px minmax(0, 1fr) 126px 60px; gap: 14px; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.fonte:hover { background: var(--painel-2); }
.fonte .canal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fonte .trilho { height: 8px; border-radius: 999px; background: var(--painel-3); overflow: hidden; }
.fonte .proporcao { display: flex; height: 100%; border-radius: 999px; overflow: hidden; transform-origin: left center; }
.fonte .parte { display: block; height: 100%; }
.fonte .parte.enviados { background: var(--ok); }
.fonte .parte.duplicados { background: var(--linha-viva); }
.fonte .parte.bloqueados { background: var(--vermelho); }
.numeros-da-fonte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-family: var(--fonte-mono); font-size: 12px; text-align: right; }
.numeros-da-fonte .bom { color: var(--ok); }
.numeros-da-fonte .ruim { color: var(--vermelho); }
.hora-da-fonte { font-family: var(--fonte-mono); font-size: 11.5px; color: var(--fraco); text-align: right; }
.fontes li.vazio { grid-column: 1 / -1; }
.legenda-das-fontes .ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.legenda-das-fontes .ponto.enviados { background: var(--ok); }
.legenda-das-fontes .ponto.duplicados { background: var(--linha-viva); }
.legenda-das-fontes .ponto.bloqueados { background: var(--vermelho); }

/* ---------- Primeiros passos (checklist.html) ---------- */
.medidor-de-passos { display: flex; align-items: center; gap: 22px; }
.medidor-de-passos.completo { border-color: rgba(61, 220, 151, .35); }
.anel-de-progresso { position: relative; width: 92px; height: 92px; flex: none; }
.anel-de-progresso svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-de-progresso circle { fill: none; stroke-width: 7; }
.trilho-do-anel { stroke: var(--painel-3); }
.volta-do-anel { stroke: var(--vermelho); stroke-linecap: round; }
.completo .volta-do-anel { stroke: var(--ok); }
.anel-de-progresso b { position: absolute; inset: 0; display: grid; place-content: center; font: 700 24px/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.anel-de-progresso b span { font-size: 13px; color: var(--fraco); }
.recado-dos-passos strong { display: block; font: 600 15px/1.3 var(--fonte-titulo); }
.recado-dos-passos p { margin-top: 6px; color: var(--fraco); font-size: 13.5px; max-width: 76ch; }
.passos { list-style: none; margin: 0; padding: 0; }
.passos li { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--linha); }
.passos li:first-child { border-top: 0; padding-top: 0; }
.passos li:last-child { padding-bottom: 0; }
.selo-do-passo { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-content: center; font: 700 12px/1 var(--fonte-titulo); border: 1px solid var(--linha-viva); }
.pronto .selo-do-passo { color: var(--ok); border-color: rgba(61, 220, 151, .45); background: rgba(61, 220, 151, .08); }
/* pendente é âmbar, não vermelho: é o que falta fazer, não uma falha */
.pendente .selo-do-passo { color: var(--atencao); border-color: rgba(245, 184, 61, .5); background: rgba(245, 184, 61, .08); }
.texto-do-passo { flex: 1; min-width: 0; display: grid; gap: 3px; }
.texto-do-passo strong { font-size: 14px; font-weight: 600; }
.pronto .texto-do-passo strong { color: var(--fraco); font-weight: 500; }
.texto-do-passo .custo { color: var(--texto); font-size: 12.5px; max-width: 84ch; }
.texto-do-passo .detalhe { color: var(--fraco); font-size: 12px; }
.passos .acao, .passos .etiqueta { flex: none; }

/* ---------- Atividade (atividade.html, atividade.js) ---------- */
.ritmo-horas { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 120px; padding: 6px 2px 18px; position: relative; }
.ritmo-horas .hora { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.ritmo-horas .hora i { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; }
.ritmo-horas .hora i.pub { background: var(--vermelho); }
.ritmo-horas .hora i.out { background: var(--painel-3); }
.ritmo-horas .hora span { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font: 600 9px/1 var(--fonte-mono); color: var(--fraco); }
/* metade dos rótulos SAI do fluxo (display), não fica invisível: elemento
   com texto em visibility:hidden reprova a sonda e não serve a ninguém */
.ritmo-horas .hora:nth-child(odd) span { display: none; }
.ritmo-horas .hora.agora span { display: block; color: var(--texto); }
.legenda-do-ritmo { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fraco); }
.legenda-do-ritmo i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legenda-do-ritmo i.pub { background: var(--vermelho); }
.legenda-do-ritmo i.out { background: var(--painel-3); margin-left: 10px; }
.filtros-da-atividade { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.busca-da-atividade { margin-left: auto; min-width: 220px; }
.eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.eventos .evento { position: relative; display: grid; grid-template-columns: 92px 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px 9px 16px; border: 1px solid var(--linha); border-radius: 10px; background: var(--painel-2); }
.eventos .evento::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--linha-viva); }
.eventos .evento.bom::before { background: var(--ok); }
.eventos .evento.ruim::before { background: var(--vermelho); }
.eventos .evento.aviso::before { background: var(--atencao); }
.eventos .evento:hover { border-color: var(--linha-viva); }
.eventos .evento time { font: 500 11px/1.3 var(--fonte-mono); color: var(--fraco); white-space: nowrap; }
.eventos .evento time b { display: block; color: var(--texto); font-weight: 600; font-size: 12.5px; }
.eventos .evento .corpo { min-width: 0; display: grid; gap: 2px; }
.eventos .evento .corpo b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eventos .evento.apagado .corpo b { color: var(--fraco); font-weight: 500; }
.eventos .evento .corpo small { display: flex; gap: 8px; font-size: 12px; color: var(--fraco); min-width: 0; }
.eventos .evento .corpo .origem { color: var(--vermelho-claro); flex: none; }
.eventos .evento .corpo .motivo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eventos .evento[hidden] { display: none; }

/* ---------- listas com barra: Garimpo (.motivos) e Radar/Atividade (.procurados) ---------- */
.motivos, .procurados { list-style: none; margin: 0; padding: 0; }
.motivos li { display: grid; grid-template-columns: minmax(160px, 300px) minmax(0, 1fr) 58px 44px; align-items: center; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.procurados li { display: grid; grid-template-columns: minmax(110px, 1fr) 90px 30px; align-items: center; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.motivos li.vazio, .procurados li.vazio { grid-template-columns: 1fr; }
.nome-do-motivo, .procurados .termo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilho-do-motivo { display: block; height: 8px; border-radius: 999px; background: var(--painel-3); overflow: hidden; }
.trilho-do-motivo i { display: block; height: 100%; border-radius: 999px; background: var(--vermelho); transform-origin: left center; }
.motivos .quantas, .procurados b { text-align: right; font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.motivos .fatia { text-align: right; color: var(--fraco); font-family: var(--fonte-mono); font-size: 12px; }

/* ---------- Garimpo e Radar: a lista de posts com mais colunas ---------- */
.lista-de-posts li:has(.preco-do-achado) { grid-template-columns: 48px minmax(0, 1fr) auto auto auto auto; }
.lista-de-posts li:has(.cliques) { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
.lista-de-posts li:has(.quem) { grid-template-columns: 48px auto minmax(0, 1fr); }
.lista-de-posts .quem { color: var(--fraco); white-space: nowrap; font-size: 12.5px; }
.lista-de-posts .preco-do-achado { font-family: var(--fonte-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-de-posts .comissao { font-family: var(--fonte-mono); font-size: 12px; color: var(--ok); white-space: nowrap; min-width: 42px; text-align: right; }
.lista-de-posts .cliques { text-align: right; font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--vermelho-claro); }
.lista-de-posts .ver-post { font-size: 12px; color: var(--fraco); padding: 3px 9px; border-radius: 7px; border: 1px solid var(--linha-viva); text-decoration: none; white-space: nowrap; }
.lista-de-posts .ver-post:hover { color: var(--texto); border-color: var(--prata); }
.lista-de-posts:has(.preco-do-achado) { max-height: 280px; overflow-y: auto; }

/* ---------- Canais e rotas (canais.html, canais.js) ---------- */
.rotas { display: grid; gap: 18px; }
.rotas > .vazio { padding: 30px; }
.rota { border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: var(--painel); overflow: hidden; transition: border-color .2s var(--curva); }
.rota:hover, .rota:focus-within { border-color: var(--linha-viva); }
.rota-cabeca { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--painel-2); border-bottom: 1px solid var(--linha); }
.nome-da-rota { flex: 1; min-width: 0; }
.rota-cabeca .contagem { color: var(--fraco); font-size: 12.5px; white-space: nowrap; }
.rota-cabeca .contagem b { color: var(--texto); }
.rota-corpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 16px; }
.rota-corpo .campo.largo, .rota-corpo .campo.alinhado { grid-column: 1 / -1; }

/* ---------- Ajustes (ajustes.html, ajustes.js): o ritmo do bot ---------- */
.lista-de-modos { display: flex; flex-wrap: wrap; gap: 8px; }
.modo { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--raio-botao); border: 1px solid var(--linha-viva); background: var(--painel-2); color: var(--fraco); font: 600 13px/1 var(--fonte-texto); transition: border-color .2s var(--curva), color .2s var(--curva); }
.modo:hover { color: var(--texto); border-color: var(--prata); }
.modo.atual { color: var(--texto); border-color: var(--vermelho); background: rgba(224, 32, 63, .08); cursor: default; }
.marca-do-modo { font: 700 9.5px/1 var(--fonte-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--vermelho-claro); }
.nota-do-modo { margin-top: 12px; font-size: 12.5px; color: var(--fraco); max-width: 70ch; }

/* ---------- Modelo do post (modelo_do_post.html/.js) ---------- */
.editor-do-post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 18px; align-items: start; }
.variaveis { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.variavel { font: 600 12px/1 var(--fonte-mono); padding: 7px 10px; border-radius: 7px; border: 1px solid var(--linha-viva); background: var(--painel-2); color: var(--vermelho-claro); transition: border-color .16s var(--curva), color .16s var(--curva); }
.variavel:hover { border-color: var(--prata); color: var(--texto); }
.area-do-modelo { width: 100%; min-height: 300px; font: 13px/1.7 var(--fonte-mono); }
.prontos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.prontos .legenda { color: var(--fraco); font-size: 12.5px; }
.previa-do-post { position: sticky; top: calc(var(--comando) + 18px); }
/* a prévia imita o balão do Telegram de propósito: é como o post sai no canal */
.tela-do-telegram { padding: 16px; border-radius: 12px; background: #17212b; }
.balao { background: #202b36; border-radius: 12px 12px 12px 4px; padding: 11px 13px; color: #f1f1f1; font: 14px/1.45 var(--fonte-texto); word-break: break-word; }
.balao blockquote { margin: 6px 0; padding: 2px 0 2px 10px; border-left: 3px solid #6ab3f3; color: #d8e4ee; }
.balao a { color: #6ab3f3; }
.balao code, .balao pre { font-family: var(--fonte-mono); }

/* ---------- Contas das lojas (credenciais.html/.js) ---------- */
.lampadas { display: flex; gap: 6px; flex-wrap: wrap; }
.lampada { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid var(--linha-viva); font-size: 11.5px; color: var(--fraco); white-space: nowrap; }
.lampada::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fraco-2); }
.lampada.acesa { color: var(--ok); border-color: rgba(61, 220, 151, .35); }
.lampada.acesa::before { background: var(--ok); }
.lampada.apagada { color: var(--atencao); border-color: rgba(245, 184, 61, .35); }
.lampada.apagada::before { background: var(--atencao); }
.onde-conseguir { padding: 4px 0 12px; color: var(--fraco); font-size: 13px; max-width: 78ch; }
.linha-de-credencial { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--linha); }
.linha-de-credencial:first-of-type { border-top: 0; }
.linha-de-credencial .texto-do-ajuste { min-width: 0; }
.linha-de-credencial.vai-apagar .texto-do-ajuste strong { color: var(--vermelho); }
.entrada-de-credencial { display: flex; align-items: center; gap: 10px; flex: none; }
/* chave e código em monoespaçada: l e 1, O e 0 se distinguem na conferência */
.entrada-de-credencial input { width: 290px; font-family: var(--fonte-mono); font-size: 13px; }
.entrada-de-credencial .limpar { display: flex; align-items: center; gap: 5px; color: var(--fraco); font-size: 12px; cursor: pointer; white-space: nowrap; }

/* ---------- Resultados (relatorios.html, metas.js; o mês está em metas.css) ---------- */
.abertura { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; align-items: stretch; }
.abertura .resumo { display: flex; flex-direction: column; gap: 16px; }
.rotulo-fino { display: block; margin-bottom: 7px; font: 700 11px/1.3 var(--fonte-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--fraco); }
.numero-grande { display: flex; align-items: baseline; gap: 2px; font: 700 44px/1 var(--fonte-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero-grande .moeda { font-size: 22px; color: var(--fraco); margin-right: 4px; }
.numero-grande .centavos { font-size: 22px; color: var(--fraco); }
.numero-grande.verde { color: var(--ok); }
.segunda-moeda { font-family: var(--fonte-mono); font-size: 15px; color: var(--fraco); font-variant-numeric: tabular-nums; }
.nota-de-moeda { color: var(--fraco); font-size: 12px; }
.pilula-pendente { align-self: flex-start; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(245, 184, 61, .4); color: var(--atencao); font-family: var(--fonte-mono); font-size: 12px; }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; border-top: 1px solid var(--linha); padding-top: 15px; margin-top: auto; }
.trio strong { display: block; font: 700 20px/1.2 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.linhas-de-venda { list-style: none; margin: 0; padding: 0; }
.linhas-de-venda li { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-top: 1px solid var(--linha); }
.linhas-de-venda li:first-child { border-top: 0; }
.linhas-de-venda li.vazio { justify-content: center; }
.venda-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.venda-texto .produto { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venda-meta { display: flex; align-items: center; gap: 7px; font-family: var(--fonte-mono); font-size: 11px; color: var(--fraco); }
.venda-meta i { font-style: normal; opacity: .45; }
.venda-valor { flex: none; text-align: right; font-family: var(--fonte-mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.venda-valor.pago { color: var(--ok); }
.venda-valor.esperando { color: var(--atencao); }
.venda-valor.perdido { color: var(--fraco); text-decoration: line-through; }
.nome-da-loja { color: var(--loja); font-family: var(--fonte-mono); font-size: 11.5px; white-space: nowrap; }
.selo-da-loja { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-content: center; font: 700 15px/1 var(--fonte-titulo); color: var(--loja); background: color-mix(in srgb, var(--loja) 12%, var(--painel-2)); border: 1px solid color-mix(in srgb, var(--loja) 26%, transparent); }
.rosca-e-legenda { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.rosca { position: relative; width: 168px; height: 168px; flex: none; }
.rosca svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rosca circle { fill: none; stroke-width: 12; }
.rosca .fatia { stroke: var(--loja); transition: opacity .18s var(--curva); }
.rosca:hover .fatia { opacity: .35; }
.rosca .fatia:hover { opacity: 1; }
.miolo-da-rosca { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.25; }
.miolo-da-rosca b { font: 700 22px/1 var(--fonte-titulo); }
.miolo-da-rosca small { color: var(--fraco); font-size: 11px; }
.legenda-de-lojas { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 230px; }
.legenda-de-lojas li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 6px 0; font-size: 13px; }
.legenda-de-lojas .valor { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; text-align: right; }
.legenda-de-lojas .fatia { font-family: var(--fonte-mono); color: var(--fraco); font-size: 12px; min-width: 44px; text-align: right; }
.legenda-de-lojas li.sem-venda { opacity: .42; }
.ponto-da-loja { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--loja); }
.dinheiro-celula { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dinheiro-celula span { display: block; }
.tabela tr[data-loja] .loja-na-tabela { position: relative; padding-left: 14px; }
.tabela tr[data-loja] .loja-na-tabela::before { content: ""; position: absolute; left: 2px; top: 50%; width: 3px; height: 13px; margin-top: -6.5px; border-radius: 2px; background: var(--loja); }

/* ---------- WhatsApp (whatsapp.html/.js) ---------- */
.qr-do-whatsapp { display: grid; place-items: center; min-height: 170px; margin-bottom: 12px; padding: 12px; border: 1px dashed var(--linha-viva); border-radius: 12px; background: var(--fundo-2); }
.qr-do-whatsapp img { width: min(260px, 100%); border-radius: 10px; background: #fff; padding: 8px; }
.qr-do-whatsapp pre { margin: 0; font: 11px/1.4 var(--fonte-mono); color: var(--fraco); white-space: pre-wrap; word-break: break-all; }
.qr-do-whatsapp .nota-vazia { padding: 0; text-align: center; }
.lista-simples { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lista-simples code { display: inline-block; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--linha); background: var(--painel-2); font-size: 12px; }

/* ---------- Preferências (preferencias.html/.js) ---------- */
.campo-numero { width: 92px; text-align: right; font-variant-numeric: tabular-nums; justify-self: end; }

/* ---------- o painel do dono (dono_*.html, fora do menu) ---------- */
.pagina-do-dono { padding: 0; }
.area-do-dono { max-width: 1100px; margin: 0 auto; padding: 28px 22px 60px; }
.topo-dono { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.topo-dono .sub-dono { margin-left: 10px; font-size: 13px; color: var(--fraco); }
.tabela-clientes { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-clientes th { text-align: left; font: 700 11px/1.4 var(--fonte-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--fraco); padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.tabela-clientes td { padding: 11px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela-clientes tr.inativo { opacity: .55; }
.nota-cliente { display: block; font-size: 12px; color: var(--fraco); }
.marca { display: inline-block; font: 600 11px/1.4 var(--fonte-texto); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.marca.ativa { background: rgba(61, 220, 151, .14); color: var(--ok); }
.marca.parada { background: rgba(224, 32, 63, .14); color: var(--vermelho-claro); }
.marca.atencao { background: rgba(245, 184, 61, .14); color: var(--atencao); }
.perto { color: var(--vermelho-claro); font-weight: 600; }
.sem-prazo { color: var(--fraco); }
.celula-bot { min-width: 210px; }
.celula-bot .sub-dono { display: block; font-size: 11px; color: var(--fraco); margin-top: 3px; font-variant-numeric: tabular-nums; }
.botoes-bot { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.botoes-bot form { margin: 0; }
.log-do-bot { background: var(--fundo-2); border: 1px solid var(--linha); border-radius: 10px; padding: 16px; font: 12px/1.55 var(--fonte-mono); white-space: pre-wrap; word-break: break-word; overflow: auto; max-height: 70vh; color: var(--fraco); }
.segredo-totp { font: 700 18px/1.5 var(--fonte-mono); letter-spacing: .14em; text-align: center; word-break: break-all; padding: 14px; border-radius: 10px; background: var(--painel-2); border: 1px dashed var(--linha-viva); }
.passos-2fa { margin: 4px 0 18px; padding-left: 22px; color: var(--fraco); font-size: 14px; line-height: 1.7; text-align: left; }
.qr-caixa { display: flex; justify-content: center; padding: 16px; border-radius: 14px; background: #fff; margin: 0 auto 16px; width: fit-content; }
.qr-caixa svg { width: 196px; height: 196px; display: block; }
.sem-camera { margin-bottom: 16px; font-size: 13px; color: var(--fraco); }
.sem-camera summary { cursor: pointer; padding: 6px 0; }
.form-confirma { margin-top: 4px; }
.grade-codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
.grade-codigos code { padding: 11px 8px; text-align: center; border-radius: 8px; background: var(--painel-2); border: 1px solid var(--linha); font: 600 15px/1 var(--fonte-mono); letter-spacing: .06em; }

/* ---------- as telas no celular e em janela média ---------- */
@media (max-width: 1100px) {
  .servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funil-e-grafico, .abertura, .editor-do-post { grid-template-columns: 1fr; }
  .previa-do-post { position: static; }
}
@media (max-width: 900px) {
  .servicos { grid-template-columns: 1fr; }
  .fonte { grid-template-columns: 1fr; gap: 6px; }
  .numeros-da-fonte, .hora-da-fonte { text-align: left; }
  .motivos li { grid-template-columns: minmax(0, 1fr) 50px 44px; }
  .motivos li .trilho-do-motivo { grid-column: 1 / -1; }
  .lista-de-posts li:has(.preco-do-achado) { grid-template-columns: 48px minmax(0, 1fr) auto; row-gap: 6px; }
  .lista-de-posts li:has(.preco-do-achado) .etiqueta { grid-column: 2; justify-self: start; }
  .lista-de-posts li:has(.preco-do-achado) .comissao { grid-column: 3; }
  .rota-corpo { grid-template-columns: 1fr; }
  .rota-cabeca { flex-wrap: wrap; }
  .nome-da-rota { flex-basis: 100%; order: 3; }
  .linha-de-credencial { flex-direction: column; align-items: stretch; }
  .entrada-de-credencial input { width: 100%; }
  .entrada-de-credencial { flex-wrap: wrap; }
  .eventos .evento { grid-template-columns: 74px minmax(0, 1fr); }
  .eventos .evento .selo { grid-column: 2; justify-self: start; }
  .eventos .evento .corpo { grid-column: 1 / -1; }
  .busca-da-atividade { margin-left: 0; width: 100%; }
  .medidor-de-passos { flex-direction: column; align-items: flex-start; }
  .passos li { flex-wrap: wrap; }
  .rosca-e-legenda { justify-content: center; }
}