/* ================== CENTRAL DE AVISOS — estilos ======================
   A janela antiga crescia com o conteúdo e passava da altura da tela: o texto
   sumia embaixo e não havia como chegar aos botões. Aqui a janela tem teto
   (85vh), o miolo rola e o rodapé fica ancorado. Numa tela baixa o miolo
   aperta; a saída nunca some.
   ==================================================================== */
.av-overlay{
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(2,10,24,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.av-overlay.on{display:flex; animation:av-fade .18s ease}
@keyframes av-fade{from{opacity:0}to{opacity:1}}

.av-janela{
  width:100%; max-width:600px;
  max-height:85vh;                     /* o teto que faltava */
  display:flex; flex-direction:column; /* miolo rola, rodapé fica */
  background:var(--panel,#0e2848); border:1px solid var(--panel-line-strong,rgba(120,160,210,.26));
  border-radius:18px; box-shadow:0 40px 90px rgba(2,9,20,.6); overflow:hidden;
  animation:av-sobe .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes av-sobe{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}

.av-topo{display:flex; align-items:flex-start; gap:14px; padding:20px 22px 14px;
  border-bottom:1px solid var(--panel-line,rgba(120,160,210,.14)); flex:none}
.av-topo h2{margin:7px 0 0; font-size:19px; line-height:1.3; color:var(--text-strong,#fff);
  font-weight:600; letter-spacing:-.01em}
.av-tag{display:inline-block; font-family:var(--mono,monospace); font-size:9.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:20px;
  background:rgba(51,112,219,.18); color:var(--blue-light,#3EA5F0);
  border:1px solid rgba(51,112,219,.35)}
.av-fechar{flex:none; width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(120,160,210,.1); color:var(--ink-soft,#9fb5d5); font-size:14px}
.av-fechar:hover{background:rgba(120,160,210,.2); color:#fff}
/* O botão some enquanto houver aviso pela frente (ver avisos.js). Sem esta
   regra o atributo hidden não vence o display do próprio botão. */
.av-fechar[hidden]{display:none}

.av-scroll{flex:1 1 auto; overflow-y:auto; padding:18px 22px 4px; min-height:0}
.av-texto{margin:16px 0 18px; font-size:14.6px; line-height:1.65;
  color:var(--ink-soft,#9fb5d5); max-width:62ch}

.av-pe{flex:none; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 22px; border-top:1px solid var(--panel-line,rgba(120,160,210,.14));
  background:rgba(8,28,60,.4); flex-wrap:wrap}
.av-pontos{display:flex; align-items:center; gap:5px; font-family:var(--mono,monospace);
  font-size:11px; color:var(--muted,#6f87aa)}
.av-pontos i{width:7px; height:7px; border-radius:50%; background:rgba(120,160,210,.25); display:block}
.av-pontos i.on{background:var(--orange,#F27507); width:20px; border-radius:20px}
.av-pontos i.ja{background:rgba(120,160,210,.5)}
.av-pontos span{margin-left:7px}
.av-acoes{display:flex; gap:9px}
.av-b{padding:9px 18px; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid transparent; font-family:inherit; transition:.2s}
.av-forte{background:var(--blue,#3370DB); color:#fff}
.av-forte:hover{background:var(--blue-mid,#2A5EB9)}
.av-ghost{background:transparent; border-color:var(--panel-line-strong,rgba(120,160,210,.26));
  color:var(--ink-soft,#9fb5d5)}
.av-ghost:hover:not(:disabled){background:rgba(120,160,210,.1); color:var(--ink,#eaf1fb)}
.av-b:disabled{opacity:.35; cursor:default}

/* ==================== O PALCO DAS ANIMAÇÕES ======================== */
.av-palco{display:flex; justify-content:center}
.av-cena{width:100%; max-width:420px}
.av-mini{background:rgba(2,15,31,.55); border:1px solid var(--panel-line,rgba(120,160,210,.14));
  border-radius:12px; padding:14px; position:relative; overflow:hidden; min-height:0}

/* barra de abas / topo simulado */
.av-barra{display:flex; gap:7px; align-items:center; margin-bottom:12px; flex-wrap:wrap}
.av-barra.av-dir{justify-content:flex-end}
.av-t{font-size:10.5px; padding:4px 9px; border-radius:6px; color:var(--muted,#6f87aa);
  background:rgba(120,160,210,.08); white-space:nowrap}
.av-t.av-nova{background:rgba(242,117,7,.18); color:var(--orange,#F27507);
  border:1px solid rgba(242,117,7,.4); animation:av-surge 3.4s .3s infinite}
@keyframes av-surge{
  0%,10%{opacity:0; transform:translateY(-7px) scale(.88)}
  26%{opacity:1; transform:translateY(0) scale(1.06)}
  36%,100%{opacity:1; transform:none}
}
.av-btn{font-size:10.5px; padding:5px 11px; border-radius:7px; background:var(--blue,#3370DB);
  color:#fff; font-weight:600; white-space:nowrap}
.av-btn.av-alvo{animation:av-pulsa 3.4s infinite}
@keyframes av-pulsa{
  0%,40%{box-shadow:0 0 0 0 rgba(242,117,7,0)}
  55%{box-shadow:0 0 0 7px rgba(242,117,7,.28)}
  75%,100%{box-shadow:0 0 0 0 rgba(242,117,7,0)}
}

/* ---- identidade no cabeçalho: a foto tomando o lugar da inicial ----
   A cena reproduz o canto direito da barra de todos os módulos: nome e perfil
   à esquerda, avatar à direita. A letra some, o retrato aparece por cima dela
   e o círculo cresce um pouco — que é exatamente o que muda na tela real. */
.av-ident{display:flex; align-items:center; gap:9px}
.av-nome{display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1}
.av-nome b{font-size:11.5px; color:var(--text-strong,#eaf1fb); font-weight:600}
.av-nome i{font-family:var(--mono,monospace); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted,#6f87aa); font-style:normal}
.av-av{position:relative; width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--blue,#3370DB); overflow:hidden;
  animation:av-avcresce 3.4s infinite}
.av-av .av-inicial{color:#fff; font-size:13px; font-weight:700;
  animation:av-avsome 3.4s infinite}
/* Retrato desenhado em CSS: cabeça e ombros sobre um fundo quente. Nesse
   tamanho lê-se como foto, e evita embutir imagem num arquivo de estilo. */
.av-retrato{position:absolute; inset:0; border-radius:50%; opacity:0;
  background:linear-gradient(160deg,#F2A25A,#C9743A);
  animation:av-avsurge 3.4s infinite}
.av-retrato::before{content:""; position:absolute; left:50%; top:20%;
  width:38%; height:38%; border-radius:50%; background:rgba(255,255,255,.92);
  transform:translateX(-50%)}
.av-retrato::after{content:""; position:absolute; left:50%; bottom:-6%;
  width:74%; height:46%; border-radius:50% 50% 0 0; background:rgba(255,255,255,.92);
  transform:translateX(-50%)}
@keyframes av-avcresce{
  0%,26%{width:30px; height:30px}
  42%{width:38px; height:38px}
  52%,100%{width:36px; height:36px}
}
@keyframes av-avsome{0%,24%{opacity:1} 38%,100%{opacity:0}}
@keyframes av-avsurge{
  0%,24%{opacity:0; transform:scale(.72)}
  44%{opacity:1; transform:scale(1.04)}
  54%,100%{opacity:1; transform:scale(1)}
}

/* linhas que simulam conteúdo */
.av-corpo{display:flex; flex-direction:column; gap:7px}
.av-corpo i{height:9px; border-radius:5px; background:rgba(120,160,210,.13); display:block}
.av-corpo i.curto{width:58%}

/* cursor que caminha até o botão */
.av-cursor{position:absolute; width:15px; height:15px; border-radius:50%;
  border:2px solid #fff; background:rgba(255,255,255,.25); left:22%; top:62%;
  animation:av-anda 3.4s infinite}
@keyframes av-anda{
  0%{left:22%; top:62%; transform:scale(1); opacity:.8}
  45%{left:78%; top:15%; transform:scale(1); opacity:1}
  55%{left:78%; top:15%; transform:scale(.6); opacity:1}
  65%{left:78%; top:15%; transform:scale(1); opacity:1}
  100%{left:78%; top:15%; opacity:0}
}

/* formulário: campo digitado → chip que aparece por consequência */
.av-form{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.av-form label{font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted,#6f87aa); font-family:var(--mono,monospace)}
.av-input{width:100%; padding:8px 11px; border-radius:8px; background:rgba(2,15,31,.6);
  border:1px solid var(--panel-line-strong,rgba(120,160,210,.26)); font-size:12.5px;
  color:var(--ink,#eaf1fb); min-height:33px}
.av-input.av-digita{animation:av-foco 3.4s infinite}
.av-input.av-digita span{display:inline-block; animation:av-escreve 3.4s infinite}
@keyframes av-foco{
  0%,15%{border-color:var(--panel-line-strong,rgba(120,160,210,.26))}
  25%,70%{border-color:var(--blue,#3370DB)}
  85%,100%{border-color:var(--panel-line-strong,rgba(120,160,210,.26))}
}
@keyframes av-escreve{0%,14%{opacity:0} 26%,100%{opacity:1}}
.av-seta{color:var(--muted,#6f87aa); font-size:15px; align-self:center;
  animation:av-desce 3.4s infinite}
@keyframes av-desce{0%,30%{opacity:0} 42%,100%{opacity:.8}}
.av-chip{padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600;
  background:rgba(25,169,87,.16); color:var(--ok-text,#5fdc97);
  border:1px solid rgba(25,169,87,.4)}
.av-chip.av-surge{animation:av-chega 3.4s infinite}
@keyframes av-chega{
  0%,12%{opacity:0; transform:translateY(-6px) scale(.96)}
  30%,92%{opacity:1; transform:none}
  100%{opacity:1; transform:none}
}

/* três campos sendo preenchidos em sequência */
.av-linha{display:flex; justify-content:space-between; align-items:center; width:100%;
  padding:9px 12px; border-radius:8px; background:rgba(2,15,31,.55);
  border:1px solid var(--panel-line,rgba(120,160,210,.14)); font-size:12.5px;
  color:var(--ink-soft,#9fb5d5)}
.av-ok{color:var(--ok-text,#5fdc97); font-weight:700; opacity:0}
.av-p1 .av-ok{animation:av-marca 3s .2s infinite}
.av-p2 .av-ok{animation:av-marca 3s .7s infinite}
.av-p3 .av-ok{animation:av-marca 3s 1.2s infinite}
@keyframes av-marca{0%,8%{opacity:0; transform:scale(.4)} 20%{opacity:1; transform:scale(1.25)} 28%,100%{opacity:1; transform:none}}

/* fluxo: uma origem, duas saídas */
.av-fluxo{display:flex; flex-direction:column; align-items:center; gap:6px}
.av-no{padding:8px 14px; border-radius:9px; font-size:12px; font-weight:600; text-align:center;
  background:rgba(51,112,219,.16); color:var(--blue-light,#3EA5F0);
  border:1px solid rgba(51,112,219,.35)}
.av-ramos{height:26px; width:150px; position:relative}
.av-ramos i{position:absolute; top:0; width:1px; height:100%; background:rgba(120,160,210,.4)}
.av-ramos i:first-child{left:22%; transform:rotate(18deg)}
.av-ramos i:last-child{right:22%; transform:rotate(-18deg)}
.av-saidas{display:flex; gap:12px}
.av-no.av-a{background:rgba(25,169,87,.14); color:var(--ok-text,#5fdc97);
  border-color:rgba(25,169,87,.4); animation:av-chega 3.4s .1s infinite}
.av-no.av-b{background:rgba(217,56,56,.13); color:var(--danger-text,#ff9a9a);
  border-color:rgba(217,56,56,.4); animation:av-chega 3.4s .45s infinite}

/* algo mudando de lugar */
.av-mud{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap}
.av-no.av-de{opacity:.45; text-decoration:line-through}
.av-arrow{color:var(--orange,#F27507); font-size:19px; animation:av-empurra 3.4s infinite}
@keyframes av-empurra{0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)}}
.av-no.av-para{background:rgba(242,117,7,.16); color:var(--orange,#F27507);
  border-color:rgba(242,117,7,.4); animation:av-pulsa 3.4s infinite}

/* barras crescendo */
.av-graf{display:flex; align-items:flex-end; gap:9px; height:74px; padding-top:6px}
.av-graf i{flex:1; background:linear-gradient(180deg,var(--blue-light,#3EA5F0),var(--blue,#3370DB));
  border-radius:4px 4px 0 0; height:var(--h); transform-origin:bottom;
  animation:av-cresce 3.4s infinite}
.av-graf i:nth-child(2){animation-delay:.12s}
.av-graf i:nth-child(3){animation-delay:.24s}
.av-graf i:nth-child(4){animation-delay:.36s}
.av-graf i:nth-child(5){animation-delay:.48s}
@keyframes av-cresce{0%,5%{transform:scaleY(.05)} 30%,100%{transform:scaleY(1)}}

/* um cartão novo numa grade */
.av-grade{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.av-cardinho{height:44px; border-radius:9px; background:rgba(120,160,210,.09);
  border:1px solid var(--panel-line,rgba(120,160,210,.14))}
.av-cardinho.av-novo{background:rgba(242,117,7,.14); border-color:rgba(242,117,7,.42);
  display:grid; place-items:center; animation:av-chega 3.4s infinite}
.av-cardinho.av-novo span{font-size:11px; font-weight:600; color:var(--orange,#F27507)}

/* sino + janelinha de aviso */
.av-avisos .av-sino{position:relative; font-size:17px; margin-left:auto;
  animation:av-toca 3.4s infinite}
@keyframes av-toca{0%,60%,100%{transform:rotate(0)} 66%{transform:rotate(-14deg)}
  72%{transform:rotate(12deg)} 78%{transform:rotate(-8deg)} 84%{transform:rotate(0)}}
.av-badge{position:absolute; top:-4px; right:-7px; background:var(--red,#D93838); color:#fff;
  font-size:9px; min-width:15px; height:15px; border-radius:20px; display:grid; place-items:center;
  font-weight:700; font-style:normal}
.av-pop{margin-top:10px; padding:11px; border-radius:9px; background:rgba(51,112,219,.1);
  border:1px solid rgba(51,112,219,.3); display:flex; flex-direction:column; gap:7px;
  align-items:flex-start; animation:av-chega 3.4s infinite}
.av-pop i{height:8px; border-radius:5px; background:rgba(120,160,210,.18); width:100%; display:block}
.av-pop i.curto{width:55%}

/* ============ IDENTIDADE NO CABEÇALHO (todos os módulos) ============
   A inicial dá lugar à foto quando existe. Um pouco maior que antes: o
   avatar vai identificar a pessoa no comunicador, e 30 px não bastam.
   Fica aqui porque avisos.css já é carregado por todas as telas. */
.user-chip{text-decoration:none; color:inherit}
a.user-chip{transition:opacity .2s}
a.user-chip:hover{opacity:.82}
.user-chip .av{width:38px !important; height:38px !important; font-size:16px !important;
  overflow:hidden; display:grid !important; place-items:center; flex:none; border-radius:50%}
.user-chip .av.com-foto{background:transparent !important; padding:0}
.user-chip .av img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}

/* TMS pequeno no cabeçalho dos módulos, ao lado do wordmark da empresa. Fica
   em avisos.css porque este arquivo já é carregado por todas as telas — evita
   mexer no styles.css, que tem 168 KB e é comum a tudo. */
.bar-sep{width:1px; height:18px; background:var(--panel-line-strong,rgba(120,160,210,.26));
  margin:0 11px; display:block; flex:none}
/* ==================== PORTÃO DE LOCALIZAÇÃO ==========================
   Cobre a tela inteira porque é uma condição de entrada, não um aviso. Fica
   em avisos.css porque este arquivo já é carregado por todos os módulos. */
.geo-portao{position:fixed; inset:0; z-index:9500; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(3,12,26,.92); backdrop-filter:blur(4px)}
.geo-portao[hidden]{display:none}
.geo-card{width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:var(--panel,#0e1f36); border:1px solid var(--panel-line-strong,rgba(120,160,210,.26));
  border-radius:16px; padding:28px 26px; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.geo-card-bloq{border-top:4px solid var(--orange,#F27507)}
.geo-tms{height:20px; width:auto; display:block; margin:0 0 16px; opacity:.92}
.geo-card h2{margin:0 0 12px; font-size:21px; color:var(--text-strong,#fff); line-height:1.25}
.geo-p{margin:0 0 14px; font-size:14.6px; line-height:1.6; color:var(--ink-soft,#9fb5d5)}
.geo-p b, .geo-lista b{color:var(--ink,#eaf1fb)}
.geo-lista{margin:0 0 18px; padding-left:20px; display:flex; flex-direction:column; gap:9px;
  font-size:14px; line-height:1.55; color:var(--ink-soft,#9fb5d5)}
.geo-btn{width:100%; padding:14px 18px; border:0; border-radius:11px; cursor:pointer;
  background:var(--blue,#3370DB); color:#fff; font-size:15.5px; font-weight:600; font-family:inherit}
.geo-btn:hover{filter:brightness(1.08)}
.geo-btn-ghost{background:transparent; color:var(--ink-soft,#9fb5d5);
  border:1px solid var(--panel-line-strong,rgba(120,160,210,.26)); font-weight:500; font-size:14px}
.geo-acoes{display:flex; flex-direction:column; gap:9px}
.geo-nota{margin:14px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted,#6f87aa)}

.bar-tms{height:15px; width:auto; display:block; opacity:.9; flex:none}
.bar-left a{gap:0}
/* A Programação desenha o wordmark como SVG embutido a 30px; Comercial,
   Financeiro e Usuários usam a imagem a 22px. Era a diferença que fazia o
   cabeçalho da Programação parecer de outro sistema. Uma altura só. */
.bar-left .logo{height:22px}
.bar-left{gap:16px}

/* A marca do TMS na janela: identifica de onde vem o aviso sem ocupar espaço
   que faria falta ao texto. */
.av-tms{height:15px; width:auto; display:block; flex:none; opacity:.9}
.av-tms.mini{height:12px; opacity:.65}
.av-cab{flex:1; min-width:0}
.av-cab-linha{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.av-data{font-family:var(--mono,monospace); font-size:10.5px; color:var(--muted,#6f87aa);
  letter-spacing:.04em}

/* ============ CENTRAL DE ATUALIZAÇÕES — busca e filtros ============ */
.av-central-topo{display:flex; flex-direction:column; gap:11px; margin:0 0 20px}
#av-busca{width:100%; max-width:420px; background:var(--field-bg,rgba(2,15,31,.5));
  border:1px solid var(--panel-line-strong,rgba(120,160,210,.26)); border-radius:10px;
  padding:11px 14px; color:var(--ink,#eaf1fb); font-size:14.5px; font-family:inherit}
#av-busca:focus{outline:2px solid var(--blue,#3370DB); outline-offset:1px}
.av-chips{display:flex; gap:7px; flex-wrap:wrap}
/* "Ver tudo de novo ao entrar": ação discreta, alinhada à esquerda como o
   resto do topo. Não compete com a busca nem com os filtros de módulo. */
.av-rever{align-self:flex-start; font-size:12.8px; padding:8px 15px}
.av-rever:disabled{opacity:.6; cursor:default}
.av-rever-ok{font-size:12.8px; color:var(--green,#19A957); line-height:1.5}
.av-rever-ok[hidden]{display:none}
.av-chip-f{padding:6px 14px; border-radius:20px; font-size:12.8px; font-weight:500; cursor:pointer;
  background:transparent; color:var(--ink-soft,#9fb5d5); font-family:inherit;
  border:1px solid var(--panel-line-strong,rgba(120,160,210,.26)); transition:.2s}
.av-chip-f:hover{background:rgba(120,160,210,.1); color:var(--ink,#eaf1fb)}
.av-chip-f.on{background:var(--blue,#3370DB); border-color:var(--blue,#3370DB); color:#fff}

/* ==================== CARTÕES DA CENTRAL =========================== */
.av-rel{margin:0 0 26px}
.av-rel > header{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding-bottom:9px; margin-bottom:12px;
  border-bottom:1px solid var(--panel-line,rgba(120,160,210,.14))}
.av-rel > header b{font-size:16px; color:var(--text-strong,#fff)}
.av-rel > header span{font-family:var(--mono,monospace); font-size:11px; color:var(--muted,#6f87aa)}
.av-item{background:var(--panel,#0e2848); border:1px solid var(--panel-line,rgba(120,160,210,.14));
  border-left:3px solid var(--panel-line-strong,rgba(120,160,210,.26));
  border-radius:12px; padding:14px 16px; margin-bottom:10px}
.av-item.novo{border-left-color:var(--orange,#F27507); background:rgba(242,117,7,.05)}
.av-item-cab{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.av-novo-selo{font-family:var(--mono,monospace); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; color:var(--orange,#F27507)}
.av-item h4{margin:0 0 5px; font-size:15px; color:var(--text-strong,#fff); font-weight:600}
.av-item p{margin:0 0 10px; font-size:13.6px; line-height:1.6; color:var(--ink-soft,#9fb5d5);
  max-width:74ch}
.av-ver{padding:6px 13px; font-size:12.5px}
.av-vazio{color:var(--muted,#6f87aa); font-size:14px; text-align:center; padding:40px 0}

/* ========================== celular ================================ */
@media (max-width:560px){
  .av-overlay{padding:12px}
  .av-janela{max-height:90vh; border-radius:15px}
  .av-topo{padding:16px 16px 12px}
  .av-topo h2{font-size:17px}
  .av-scroll{padding:14px 16px 2px}
  .av-texto{font-size:14px}
  .av-pe{padding:12px 16px; gap:10px}
  .av-acoes{width:100%; }
  .av-acoes .av-b{flex:1}
  .av-pontos span{display:none}
}
/* Telas muito baixas (notebook com zoom, celular deitado): o miolo encolhe,
   o rodapé continua visível. É o cenário que quebrava a janela antiga. */
@media (max-height:560px){
  .av-janela{max-height:94vh}
  .av-mini{min-height:0}
  .av-texto{margin:12px 0 14px}
}
@media (prefers-reduced-motion:reduce){
  .av-cena *{animation:none !important}
}

/* ---- cena "tema": a tela inicial alternando entre escuro e claro ----
   Tudo é animado em um ciclo de 6 s: cursor chega ao botão (1,2 s), clique,
   a tela clareia (2 s), fica clara, cursor volta, clique, escurece. */
.av-tema{padding:0; border:0; background:transparent}
.av-tema-tela{border-radius:12px; padding:14px; border:1px solid rgba(120,160,210,.18);
  background:#0e2848; animation:av-tema-fundo 6s infinite}
@keyframes av-tema-fundo{
  0%,22%{background:#0e2848; border-color:rgba(120,160,210,.18)}
  34%,70%{background:#ffffff; border-color:rgba(14,35,56,.25)}
  82%,100%{background:#0e2848; border-color:rgba(120,160,210,.18)}
}
.av-tema .av-barra{justify-content:space-between; margin-bottom:10px}
.av-tema-logo{display:inline-flex; align-items:center; gap:2px}
.av-tema-logo i{width:14px; height:4px; border-radius:2px; background:#3370DB; display:block; transform:skewX(-20deg)}
.av-tema-logo i:nth-child(2){background:#3EA5F0} .av-tema-logo i:nth-child(3){background:#F27507}
.av-tema-logo b{margin-left:6px; font-size:11px; letter-spacing:.06em; color:#fff; animation:av-tema-tinta 6s infinite}
.av-tema-titulo{font-size:13px; font-weight:800; letter-spacing:-.01em; color:#fff; margin:2px 0 10px; animation:av-tema-tinta 6s infinite}
@keyframes av-tema-tinta{0%,22%{color:#fff} 34%,70%{color:#0e2338} 82%,100%{color:#fff}}
.av-tema-cards{display:grid; gap:6px}
.av-tema-cards i{display:block; height:18px; border-radius:6px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06); animation:av-tema-card 6s infinite}
@keyframes av-tema-card{
  0%,22%{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); box-shadow:none}
  34%,70%{background:#fff; border-color:rgba(14,35,56,.2); box-shadow:0 4px 12px rgba(8,39,68,.12)}
  82%,100%{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); box-shadow:none}
}
.av-tema-btn{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:7px;
  border:1px solid rgba(120,160,210,.35); font-size:11px; font-weight:600; color:#fff; position:relative;
  animation:av-tema-btn 6s infinite}
@keyframes av-tema-btn{
  0%,22%{color:#fff; border-color:rgba(120,160,210,.35); background:transparent}
  34%,70%{color:#0e2338; border-color:rgba(14,35,56,.35); background:#fff}
  82%,100%{color:#fff; border-color:rgba(120,160,210,.35); background:transparent}
}
.av-tema-btn.av-alvo{animation:av-tema-btn 6s infinite, av-tema-pulsa 6s infinite}
@keyframes av-tema-pulsa{
  0%,16%{box-shadow:0 0 0 0 rgba(242,117,7,0)} 22%{box-shadow:0 0 0 6px rgba(242,117,7,.32)} 30%{box-shadow:0 0 0 0 rgba(242,117,7,0)}
  70%{box-shadow:0 0 0 0 rgba(242,117,7,0)} 76%{box-shadow:0 0 0 6px rgba(242,117,7,.32)} 84%,100%{box-shadow:0 0 0 0 rgba(242,117,7,0)}
}
.av-tema-sol,.av-tema-lua{font-size:12px; line-height:1}
.av-tema-sol{display:none; animation:av-tema-mostra 6s infinite}
.av-tema-lua{animation:av-tema-esconde 6s infinite}
.av-tema-rot{font-style:normal; display:inline-grid}
.av-tema-rot u{text-decoration:none; grid-area:1/1}
.av-tema-rot u:first-child{animation:av-tema-esconde 6s infinite}
.av-tema-rot u:last-child{opacity:0; animation:av-tema-mostra 6s infinite}
@keyframes av-tema-mostra{0%,24%{display:none; opacity:0} 30%,72%{display:inline; opacity:1} 78%,100%{display:none; opacity:0}}
@keyframes av-tema-esconde{0%,24%{opacity:1} 30%,72%{opacity:0} 78%,100%{opacity:1}}
.av-cursor-tema{border-color:#F27507; background:rgba(242,117,7,.3); animation:av-tema-anda 6s infinite !important}
@keyframes av-tema-anda{
  0%{left:40%; top:78%; opacity:0} 6%{opacity:1}
  18%{left:calc(100% - 34px); top:22px; transform:scale(1)} 22%{transform:scale(.8)} 26%{transform:scale(1)}
  48%{left:48%; top:72%} 70%{left:calc(100% - 34px); top:22px; transform:scale(1)} 76%{transform:scale(.8)} 80%{transform:scale(1)}
  92%,100%{left:40%; top:78%; opacity:0}
}

/* ---- cena "venda": o negócio ganho vira carga na Programação ---- */
.av-vd-cols{display:grid;grid-template-columns:1fr 22px 1fr;gap:6px;align-items:start}
.av-vd-col{border:1px solid var(--panel-line,rgba(120,160,210,.14));border-radius:9px;padding:8px;min-height:96px;position:relative}
.av-vd-col b{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6f87aa);margin-bottom:7px}
.av-vd-col i{display:block;height:14px;border-radius:5px;background:rgba(120,160,210,.12);margin-bottom:6px}
.av-vd-col i.av-vd-card{height:auto;padding:4px 7px;background:rgba(51,112,219,.22);border:1px solid rgba(51,112,219,.5);font-style:normal;font-size:10.5px;color:#fff;font-weight:600;white-space:nowrap}
.av-vd-op{border-color:rgba(242,117,7,.35)}
.av-vd-op i.av-vd-card{background:rgba(242,117,7,.2);border-color:rgba(242,117,7,.6)}
.av-vd-seta{align-self:center;text-align:center;color:var(--orange,#F27507);font-weight:700;animation:av-empurra 1.2s infinite}
.av-vd-anda{animation:av-vd-sai 5s infinite}
@keyframes av-vd-sai{0%,20%{opacity:1;transform:none} 40%{opacity:0;transform:translateX(60px) scale(.9)} 85%{opacity:0;transform:translateX(60px) scale(.9)} 100%{opacity:1;transform:none}}
.av-vd-chega{opacity:0;animation:av-vd-entra 5s infinite}
@keyframes av-vd-entra{0%,32%{opacity:0;transform:translateX(-50px) scale(.9)} 48%{opacity:1;transform:none;box-shadow:0 0 0 6px rgba(242,117,7,.25)} 56%{box-shadow:0 0 0 0 rgba(242,117,7,0)} 85%{opacity:1;transform:none} 100%{opacity:0;transform:translateX(-50px) scale(.9)}}
.av-vd-pv{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap;font-size:10px}
.av-vd-pv span{letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6f87aa);margin-right:2px}
.av-vd-pv em{font-style:normal;padding:3px 8px;border-radius:20px;border:1px solid var(--panel-line-strong,rgba(120,160,210,.26));color:var(--muted,#6f87aa)}
.av-vd-f1{animation:av-vd-ac 5s infinite} .av-vd-f2{animation:av-vd-ac 5s 1s infinite} .av-vd-f3{animation:av-vd-ac 5s 2s infinite}
@keyframes av-vd-ac{0%,48%{background:transparent;color:var(--muted,#6f87aa)} 56%,84%{background:rgba(25,169,87,.2);border-color:rgba(25,169,87,.6);color:#5fdc97} 92%,100%{background:transparent;color:var(--muted,#6f87aa)}}