/* botpedrin · animações v2 — fundo vivo (fundo.js), vidro e micro-animações. Usa as cores do tema atual. */
:root{--bp-ac:#1d4ed8;--bp-bg:#f3f5f8;--bp-tx:#1e293b}

/* ---------- fundo vivo (criado pelo fundo.js, fica atrás de tudo) ---------- */
.bp-fundo{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bp-bg);pointer-events:none;contain:strict}
.bp-fundo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bp-fundo .bp-seda{opacity:0;transition:opacity .8s}
.bp-fundo[data-estilo="seda"] .bp-seda{opacity:1}
.bp-fundo.sem-webgl .bp-aurora{display:none}
.bp-fundo.sem-webgl{background:
  radial-gradient(900px 600px at 8% 0%,#d7e6ff 0%,rgba(215,230,255,0) 62%),
  radial-gradient(800px 520px at 96% 8%,#dff4fb 0%,rgba(223,244,251,0) 60%),
  radial-gradient(760px 520px at 50% 112%,#ebe7fb 0%,rgba(235,231,251,0) 60%),var(--bp-bg)}
.bp-grao{position:absolute;inset:0;opacity:.035;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- vidro: cabeçalho e cartões translúcidos por cima do fundo (classe bp-vidro no body) ---------- */
.bp-vidro header,.bp-vidro .topo{background:rgba(255,255,255,.7)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.85);box-shadow:0 1px 0 rgba(15,23,42,.06)}
.bp-vidro .card,.bp-vidro .c{background:rgba(255,255,255,.8);
  /* sem backdrop-filter nos cartões: o fundo já é desfocado, e desfoque em cima de fundo animado é o que pesava */
  border-color:rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 20px 44px -28px rgba(29,78,216,.28)}

/* ---------- logo robô: pisca e antena acende ---------- */
.logo-robo{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.logo-robo .olho{transform-box:fill-box;transform-origin:center;animation:bp-pisca 5.5s infinite}
.logo-robo .antena{transform-box:fill-box;transform-origin:center;animation:bp-antena 2.6s ease-in-out infinite}
@keyframes bp-pisca{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes bp-antena{50%{opacity:.45;transform:scale(.8)}}
a.marca:hover .logo-robo{transform:rotate(-6deg) scale(1.06)}

/* ---------- abas: risco azul que desliza ---------- */
.bp-abas{position:relative}
.bp-abas .bp-risco{position:absolute;bottom:-1px;height:2px;border-radius:2px;background:var(--bp-ac);
  transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}
.bp-abas a{transition:color .2s}

/* ---------- entrada da página e dos cartões ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:bp-sai .18s ease-in both}
::view-transition-new(root){animation:bp-entra .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes bp-sai{to{opacity:0;transform:translateY(-6px)}}
@keyframes bp-entra{from{opacity:0;transform:translateY(10px)}}
/* painel 08/11: "backwards" (era "both"). Mesmo efeito (só tem o "from"), mas o cartão não fica preso com transform
   depois da entrada: com "both" cada filho virava uma camada própria pra sempre e o quadrinho de período ia pra baixo
   do cartão seguinte */
.bp-entra>*{animation:bp-sobe .55s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes bp-sobe{from{opacity:.001;transform:translateY(14px)}}
/* 08/11 (parecer): container dentro de container (a grade de quadros da Visão geral, as seções da Operação) não sobe
   inteiro: só os cartões de dentro, cada um com o seu --i */
.bp-entra>.bp-entra{animation:none}
.card,.c{transition:transform .22s ease,box-shadow .22s ease,border-color .25s}
.card:hover,.c:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -24px rgba(29,78,216,.38)}
.bp-ao-vivo{position:relative}
.bp-ao-vivo::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;animation:bp-pulso 1.8s ease-out infinite}
@keyframes bp-pulso{from{opacity:.6;transform:scale(.6)}to{opacity:0;transform:scale(1.8)}}

@media (prefers-reduced-motion:reduce){
  .logo-robo *,.bp-entra>*,.bp-ao-vivo::after{animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- encaixe no painel botpedrin (08/11): o que é só deste site ---------- */
/* logo: o robô (svg inline no cabecalho.html) no lugar do quadrado "P" */
.marca .logo-robo{flex:none;display:block}
/* guias: passam a ocupar a altura do header, pro risco encostar na borda de baixo (como na prévia; antes as guias
   tinham 36 px e o overflow delas cortava o traço). O traço antigo da guia acesa sai e o nome de transição dele
   (guia-ativa) passa pro risco, que desliza também de uma página pra outra. */
.guias.bp-abas{align-self:stretch;height:auto;align-items:center}
.guias.bp-abas a{height:36px}
.guias.bp-abas a.on::after{content:none}
.guias.bp-abas .bp-risco{bottom:0;pointer-events:none;view-transition-name:guia-ativa}
@media (max-width:820px){
  .guias.bp-abas{align-items:stretch}
  .guias.bp-abas a{height:auto}
}
/* ponto do "atualizado": o anel do bp-ao-vivo no lugar do pulso antigo; vermelho e parado quando o site não responde.
   O .vivo corta o que passa dele (overflow do tema): folga de 10 px em volta do ponto, sem mudar o lugar de nada */
.dot.bp-ao-vivo{animation:none;color:var(--ok)}
.dot.off.bp-ao-vivo{color:var(--bad)}
.dot.off.bp-ao-vivo::after{content:none}
.vivo:has(.bp-ao-vivo){padding:6px 0 6px 10px;margin:-6px 0 -6px -10px}
/* o cartão com o mouse (sobe com transform e vira camada própria: dica dos gráficos) ou com o quadrinho de período
   aberto fica por cima do vizinho, senão a dica some embaixo do cartão seguinte */
.bp-vidro .card:hover,.bp-vidro .card:has(.pop.aberto){z-index:2}
/* painel 08/11 (leve): o pulso das bolinhas "ok" do tema (.st.ok e .chip.st-ok) era box-shadow animado, que obriga o
   Chrome a redesenhar a página a cada quadro. Com uma pílula "no ar" em cada cartão da Bots, era o que mais pesava
   (no Chrome de teste: 10 quadros/s com, 35 sem). Mesmo desenho, mesma cor e tempo, com transform/opacity num ::after,
   que o Chrome anima sem redesenhar. O tema.css fica como está. */
.st.ok::before,.chip.st-ok .pt{animation:none}
.st.ok,.chip.st-ok .pt{position:relative}
.st.ok::after,.chip.st-ok .pt::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--ok);
  opacity:0;pointer-events:none;animation:bp-pulso-pt 2.2s infinite}
.st.ok::after{left:8px;top:50%;margin-top:-3.5px}
.chip.st-ok .pt::after{left:0;top:0}
@keyframes bp-pulso-pt{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(3)}100%{opacity:0;transform:scale(3)}}