/* ============================================================================
   iBooster CRM - kit de componentes compartilhado (so tokens, claro e escuro)

   As pecas que as telas novas do Bolt (chat, espaco de trabalho, agentes, ao
   vivo, pedidos) e o CRM usam em comum. Nenhuma sabe o tema: cor so por token.
   Variaveis de ajuste por elemento, todas com valor padrao:
     --pct        0..100% no .medidor (largura) e 0..100 no .anel (numero puro)
     --c          cor de destaque da .pill / .status-pill (o ponto e o texto)
     --anel-cor, --anel-tam, --anel-esp   cor, tamanho e espessura do .anel
   ========================================================================== */

/* ---------------- marca do Bolt ----------------
   Quadrado em degrade com o raio branco. E a UNICA forma de o vermelho do Bolt
   aparecer em area grande. .sm 16 / padrao 20 / .md 28 / .lg 40. */
.bolt-marca{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:6px;
  background:var(--bolt-tile);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.16)}
.bolt-marca svg,.bolt-marca .ic{width:62%;height:62%;fill:currentColor;stroke:none}
.bolt-marca img.ic{object-fit:contain}
.bolt-marca.sm{width:16px;height:16px;border-radius:5px}
.bolt-marca.md{width:28px;height:28px;border-radius:8px}
.bolt-marca.lg{width:40px;height:40px;border-radius:11px}

/* ---------------- chave (switch) ----------------
   <button class="chave" role="switch" aria-checked="false"><span class="chave-trilho"></span><span>Texto</span></button>
   ou <label class="chave"><input type="checkbox"><span class="chave-trilho"></span>Texto</label>.
   Ligada: verde da casa; .perigo liga em --danger (freio geral); .bolt em --bolt. */
.chave{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--ink-2);border-radius:var(--r-full);user-select:none;--chave-on:var(--brand-fill)}
.chave input{position:absolute;opacity:0;width:1px;height:1px;min-width:0;min-height:0;pointer-events:none}
.chave-trilho{position:relative;flex:none;width:28px;height:16px;border-radius:var(--r-full);background:var(--track);
  transition:background var(--dur-2) var(--ease)}
.chave-trilho::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--dur-2) var(--ease)}
.chave[aria-checked="true"] .chave-trilho,.chave input:checked + .chave-trilho{background:var(--chave-on)}
.chave[aria-checked="true"] .chave-trilho::after,.chave input:checked + .chave-trilho::after{transform:translateX(12px)}
.chave[aria-checked="true"],.chave:has(input:checked){color:var(--ink)}
.chave:focus-visible,.chave:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:3px}
.chave[aria-disabled="true"],.chave:has(input:disabled){opacity:.5;cursor:not-allowed}
.chave.grande .chave-trilho{width:36px;height:20px}
.chave.grande .chave-trilho::after{width:16px;height:16px}
.chave.grande[aria-checked="true"] .chave-trilho::after,.chave.grande input:checked + .chave-trilho::after{transform:translateX(16px)}
.chave.perigo{--chave-on:var(--danger)}
.chave.bolt{--chave-on:var(--bolt)}

/* ---------------- pilula e pilula de status ----------------
   .pill e a etiqueta de 22px (12px/500). Cor por classe: .ok .aviso .info
   .perigo .bolt .roxo .marca; sem classe e neutra.
   .status-pill[data-st] tem o ponto de 6px. So o que esta VIVO pulsa: ponha
   .vivo (ou data-st="ao-vivo") apenas quando o sinal e de agora. */
.pill,.status-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:1;white-space:nowrap;
  --c:var(--ink-3);background:var(--surface-3);color:var(--ink-2)}
.pill .ic{width:12px;height:12px}
.pill.ok,.status-pill[data-st="ok"],.status-pill[data-st="agindo"],.status-pill[data-st="ativo"]{--c:var(--ok);background:var(--ok-soft)}
.pill.aviso,.status-pill[data-st="aviso"],.status-pill[data-st="simulando"]{--c:var(--warn);background:var(--warn-soft)}
.pill.info,.status-pill[data-st="info"],.status-pill[data-st="agendado"]{--c:var(--info);background:var(--info-soft)}
.pill.perigo,.status-pill[data-st="erro"],.status-pill[data-st="alerta"],.status-pill[data-st="sem-sinal"]{--c:var(--danger);background:var(--danger-soft)}
.pill.bolt,.status-pill[data-st="ao-vivo"]{--c:var(--bolt);background:var(--bolt-soft)}
.pill.roxo{--c:var(--roxo);background:var(--roxo-soft)}
.pill.marca{--c:var(--brand);background:var(--brand-soft)}
.status-pill[data-st="pausado"],.status-pill[data-st="parado"]{--c:var(--ink-4);background:var(--surface-3);color:var(--ink-3)}
.pill:is(.ok,.aviso,.info,.perigo,.bolt,.roxo,.marca){color:color-mix(in srgb,var(--c) 80%,var(--ink))}
.status-pill[data-st]:not([data-st="pausado"],[data-st="parado"]){color:color-mix(in srgb,var(--c) 80%,var(--ink))}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
/* simulando: tracejado, porque ensaio nao e acao de verdade */
.status-pill[data-st="simulando"]{padding:0 7px;border:1px dashed color-mix(in srgb,var(--warn) 60%,transparent)}
.status-pill.vivo::before,.status-pill[data-st="ao-vivo"]::before,.ponto-vivo{animation:pulso-vivo 2s var(--ease-out) infinite}
.ponto-vivo{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--bolt));flex:none}

/* ---------------- codigo (card de aprovacao, atalho) ----------------
   O texto e o proprio codigo (K7, V6): tests/bolt-central-interface.mjs le ">K7<". */
.codigo{display:inline-flex;align-items:center;flex:none;font:var(--fw-medium) 11px/1.4 var(--font-mono);letter-spacing:0;
  padding:2px 6px;border-radius:var(--r-xs);background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
kbd,.tecla{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;font:var(--fw-medium) 11px/1 var(--font-sans);
  color:var(--ink-3);background:var(--surface-2);border-radius:var(--r-xs);box-shadow:var(--e1)}

/* ---------------- medidor (4px) ----------------
   <div class="medidor" style="--pct:42%"></div>. .alto vira aviso (80% do teto),
   .estourou vira perigo. Rotulo ao lado fica por conta de quem usa. */
.medidor{position:relative;height:4px;border-radius:var(--r-full);background:var(--track);overflow:hidden;min-width:40px}
.medidor::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--pct,0%);max-width:100%;border-radius:inherit;
  background:var(--ok);transition:width var(--dur-4) var(--ease-out)}
.medidor.alto::before{background:var(--warn)}
.medidor.estourou::before{background:var(--danger);width:100%}
.medidor.marca::before{background:var(--brand)}
.medidor.grosso{height:6px}

/* ---------------- anel de progresso (conic-gradient) ----------------
   <span class="anel" style="--pct:62"></span>; conteudo opcional no meio
   (numero, icone). .alto aviso, .estourou perigo, .bolt no vermelho do Bolt. */
.anel{position:relative;display:inline-grid;place-items:center;flex:none;
  width:var(--anel-tam,20px);height:var(--anel-tam,20px);font-size:var(--fs-2xs);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.anel::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--anel-cor,var(--brand)) calc(var(--pct,0) * 1%),var(--track) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--anel-esp,3px)),#000 calc(100% - var(--anel-esp,3px) + .5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - var(--anel-esp,3px)),#000 calc(100% - var(--anel-esp,3px) + .5px))}
.anel.sm{--anel-tam:16px;--anel-esp:2.5px}
.anel.lg{--anel-tam:40px;--anel-esp:4px;font-size:var(--fs-xs)}
.anel.alto{--anel-cor:var(--warn)}
.anel.estourou{--anel-cor:var(--danger)}
.anel.bolt{--anel-cor:var(--bolt)}

/* ---------------- tile de icone ----------------
   Quadrado de 32px com o icone de 16px. Tom por classe: .bolt .marca .ok .info
   .aviso .perigo .roxo; .sm 24px, .lg 40px. */
.tile-icone{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--ink-2)}
.tile-icone svg,.tile-icone .ic{width:16px;height:16px}
.tile-icone.sm{width:24px;height:24px;border-radius:var(--r-xs)}
.tile-icone.sm svg{width:14px;height:14px}
.tile-icone.lg{width:40px;height:40px;border-radius:10px}
.tile-icone.lg svg{width:20px;height:20px}
.tile-icone.bolt{background:var(--bolt-soft);color:var(--bolt)}
.tile-icone.marca{background:var(--brand-soft);color:var(--brand)}
.tile-icone.ok{background:var(--ok-soft);color:var(--ok)}
.tile-icone.info{background:var(--info-soft);color:var(--info)}
.tile-icone.aviso{background:var(--warn-soft);color:var(--warn)}
.tile-icone.perigo{background:var(--danger-soft);color:var(--danger)}
.tile-icone.roxo{background:var(--roxo-soft);color:var(--roxo)}

/* ---------------- aviso em linha ----------------
   Frase curta com icone de 14px, fundo suave. Padrao e aviso; .info .perigo .ok. */
.aviso-linha{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:var(--lh-ui);color:var(--ink-2);background:var(--warn-soft);--c:var(--warn)}
.aviso-linha > svg,.aviso-linha > .ic{width:14px;height:14px;flex:none;margin-top:2px;color:var(--c)}
.aviso-linha b{color:var(--ink);font-weight:var(--fw-semibold)}
.aviso-linha.info{background:var(--info-soft);--c:var(--info)}
.aviso-linha.perigo{background:var(--danger-soft);--c:var(--danger)}
.aviso-linha.ok{background:var(--ok-soft);--c:var(--ok)}

/* ---------------- chip de fonte ----------------
   "preenchido pelo Bolt" ao lado do valor que o Bolt achou sozinho. .neutro para
   outras fontes (Apollo, CRM, planilha). Icone de 11px opcional na frente. */
.fonte-chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px 0 6px;border-radius:var(--r-full);
  font-size:var(--fs-2xs);font-weight:var(--fw-medium);white-space:nowrap;
  background:var(--bolt-soft);color:color-mix(in srgb,var(--bolt) 85%,var(--ink))}
.fonte-chip svg,.fonte-chip .ic{width:11px;height:11px;fill:currentColor;stroke:none}
.fonte-chip.neutro{background:var(--surface-3);color:var(--ink-3)}
.fonte-chip.neutro svg{fill:none;stroke:currentColor}

/* ---------------- vazio do Bolt ----------------
   Tom "o Bolt esta de olho": marca suave, titulo, uma linha e no maximo UMA acao.
   <div class="vazio-bolt"><span class="bolt-marca lg">svg</span><b>Titulo</b><p>Linha</p></div> */
.vazio-bolt{display:grid;justify-items:center;gap:6px;padding:28px 20px;text-align:center}
.vazio-bolt .bolt-marca{background:var(--bolt-tile);color:var(--bolt);margin-bottom:6px}
.vazio-bolt b,.vazio-bolt .t{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ink)}
.vazio-bolt p{font-size:var(--fs-sm);color:var(--ink-3);max-width:40ch;line-height:var(--lh-ui)}
.vazio-bolt .btn{margin-top:8px}

/* ---------------- menu suspenso ----------------
   Popover de acoes (o "+" da caixa de escrita, o menu "Mais", o kebab da lista). */
.menu-pop{min-width:200px;padding:4px;border-radius:var(--r);background:var(--surface-raised);box-shadow:var(--e2);
  display:grid;gap:1px;align-content:start;align-self:start;z-index:var(--z-drawer);animation:entra var(--dur-2) var(--ease-out)}
.menu-pop button,.menu-pop a{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border-radius:var(--r-xs);
  font-size:var(--fs-sm);color:var(--ink);text-align:left;width:100%}
.menu-pop button svg,.menu-pop a svg{width:16px;height:16px;color:var(--ink-3)}
.menu-pop button:hover,.menu-pop a:hover{background:var(--hover)}
.menu-pop .perigo{color:var(--danger)}
.menu-pop .perigo svg{color:var(--danger)}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:4px 2px}

/* ---------------- movimento ----------------
   Uma definicao por nome (shell e componentes usam estas). So transform e
   opacity; o global de prefers-reduced-motion em tokens.css corta o movimento
   e deixa a troca de cor, que ja comunica o estado. */
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes desliza{from{opacity:.4;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes pulso-vivo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,var(--bolt)) 50%,transparent)}70%,100%{box-shadow:0 0 0 6px transparent}}
@keyframes check-desenha{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes brilho-novo{from{background-color:var(--bolt-soft)}to{background-color:transparent}}
.m-entra{animation:entra var(--dur-3) var(--ease-out) both}
.m-desliza{animation:desliza var(--dur-4) var(--ease-out) both}
.m-brilho-novo{animation:brilho-novo 2s var(--ease) both}
.check-desenha path,.check-desenha polyline{stroke-dasharray:24;animation:check-desenha var(--dur-3) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  .status-pill.vivo::before,.status-pill[data-st="ao-vivo"]::before,.ponto-vivo,.m-entra,.m-desliza,.m-brilho-novo{animation:none}
  .check-desenha path,.check-desenha polyline{animation:none;stroke-dasharray:none}
}