/*! AB Media Stream — ab-media-stream.css
 *  Amazonia Beats · gerado por scripts/build.mjs — não edite à mão.
 */
/*!
 * AB Media Stream — Amazonia Beats
 * Folha dos componentes. Escopada em .ab-* para poder ser usada fora do overlay
 * (site da IMPERIO, WordPress, landing) sem brigar com o CSS do tema.
 *
 * Tudo que é cor, espaço ou raio é token. Trocar o canal = trocar os tokens.
 */

.ab-scope,
:root {
  --ab-bg: #070b12;
  --ab-bg-2: #0c1320;
  --ab-surface: rgba(255, 255, 255, 0.045);
  --ab-surface-2: rgba(255, 255, 255, 0.08);
  --ab-line: rgba(255, 255, 255, 0.10);
  --ab-line-strong: rgba(255, 255, 255, 0.20);

  --ab-primary: #12d18e;
  --ab-secondary: #f0b429;
  --ab-alert: #ff5c5c;
  --ab-info: #4aa8ff;

  --ab-text: #eaf1ff;
  --ab-text-dim: #93a4bb;
  /* #64748b dava 3.84:1 sobre o cartão — abaixo do mínimo AA de 4.5 para texto
     pequeno, e é justamente nele que mora a citação de fonte. Medido por
     scripts/teste-contraste.mjs, contra o fundo COMPOSTO, não contra o
     background-color translúcido do elemento. */
  --ab-text-faint: #8d9db4;

  --ab-radius: 18px;
  --ab-radius-sm: 10px;
  --ab-gap: 18px;
  --ab-pad: 22px;

  --ab-font: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ab-font-num: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Relógio de render: a captura roda a 3 fps, então toda transição é
     quantizada em passos. Ver docs/RENDER-3FPS.md. */
  --ab-fps: 3;
  --ab-ease-step: steps(3, end);
}

/* ---------- casca comum de todo componente ---------- */

.ab-module {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--ab-pad);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  background: var(--ab-surface);
  color: var(--ab-text);
  font-family: var(--ab-font);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.ab-module[data-density="compact"] { --ab-pad: 14px; --ab-gap: 10px; }
.ab-module[data-density="loose"]   { --ab-pad: 30px; --ab-gap: 26px; }
.ab-module[data-frame="none"] { border-color: transparent; background: transparent; backdrop-filter: none; padding: 0; }
.ab-module[data-accent="secondary"] { --ab-primary: var(--ab-secondary); }
.ab-module[data-accent="alert"]     { --ab-primary: var(--ab-alert); }
.ab-module[data-accent="info"]      { --ab-primary: var(--ab-info); }

.ab-module::after { /* filete de acento no topo */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ab-primary), transparent 65%);
  opacity: .85;
}
.ab-module[data-frame="none"]::after { display: none; }

.ab-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--ab-gap); }
.ab-title { font-size: 1.02rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.ab-sub { font-size: .82rem; font-weight: 600; color: var(--ab-text-dim); margin-left: auto; text-align: right; }
/* `overflow: hidden` no corpo é o que impede o conteúdo de empurrar o rodapé
   de fonte para fora do cartão e renderizar por cima dele. Sem isto, num bloco
   baixo o "FONTE: ..." aparecia atravessado no meio do texto. */
.ab-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--ab-gap); }

.ab-cite {
  flex: none;
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--ab-line);
  font-size: .68rem; font-weight: 600; letter-spacing: .3px;
  color: var(--ab-text-faint); text-transform: uppercase;
}
.ab-cite b { color: var(--ab-text-dim); font-weight: 700; }
.ab-empty { color: var(--ab-text-faint); font-size: .85rem; padding: 18px 0; }

/* ---------- kpi ---------- */
.ab-kpi { justify-content: center; gap: 6px; }
.ab-kpi-value { display: flex; align-items: baseline; flex-wrap: wrap; font-family: var(--ab-font-num); font-size: clamp(2rem, 4.2vw, 4.1rem); font-weight: 800; line-height: .95; color: var(--ab-primary); letter-spacing: -2px; }
.ab-kpi-unit { font-size: .38em; font-weight: 700; color: var(--ab-text-dim); letter-spacing: 0; margin-left: 6px; }
.ab-kpi-label { font-size: .95rem; font-weight: 700; color: var(--ab-text); }
.ab-kpi-note { font-size: .8rem; color: var(--ab-text-dim); line-height: 1.4; }
.ab-kpi-delta { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(18,209,142,.12); color: var(--ab-primary); width: fit-content; }
.ab-kpi-delta[data-dir="up"] { background: rgba(255,92,92,.12); color: var(--ab-alert); }

/* ---------- chart ---------- */
.ab-chart { width: 100%; }
.ab-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ab-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: .76rem; color: var(--ab-text-dim); font-weight: 600; }
.ab-chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.ab-bar-label { font-size: 12px; fill: var(--ab-text-dim); font-weight: 600; }
.ab-bar-value { font-size: 13px; fill: var(--ab-text); font-weight: 800; font-family: var(--ab-font-num); }
.ab-axis { stroke: var(--ab-line); stroke-width: 1; }
/* Rótulo curto dentro de SVG. NÃO define `fill`: em SVG a regra de classe
   vence o atributo fill= do elemento, e por isso o rótulo do teto ficava
   cinza mesmo pedindo vermelho. A cor vem de quem desenha. */
.ab-svg-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; }

/* ---------- timeline ---------- */
.ab-timeline { position: relative; display: flex; flex-direction: column; gap: 14px; flex: 1; }
/* A régua tem altura fixa; o cartão de detalhe fica com o resto e centra o
   próprio texto. Sem isto o cartão colava embaixo da régua e sobrava um terço
   do bloco vazio. */
.ab-timeline .ab-tl-card { flex: 1; align-content: center; }
/* Margem lateral generosa: o rótulo do primeiro e do último marco é centrado
   no nó, e com 10px eles saíam pela borda do cartão. */
.ab-tl-track { position: relative; height: 4px; background: var(--ab-line); border-radius: 999px; margin: 34px 34px 46px; }
.ab-tl-fill { position: absolute; inset: 0 auto 0 0; background: var(--ab-primary); border-radius: 999px; }
.ab-tl-node { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.ab-tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ab-bg-2); border: 3px solid var(--ab-line-strong); }
.ab-tl-node[data-estado="concluido"] .ab-tl-dot { background: var(--ab-primary); border-color: var(--ab-primary); }
.ab-tl-node[data-estado="atual"] .ab-tl-dot { background: var(--ab-secondary); border-color: var(--ab-secondary); width: 20px; height: 20px; box-shadow: 0 0 0 6px rgba(240,180,41,.18); }
.ab-tl-year { position: absolute; bottom: 24px; font-family: var(--ab-font-num); font-size: .9rem; font-weight: 800; color: var(--ab-text); }
.ab-tl-tag { position: absolute; top: 24px; font-size: .62rem; font-weight: 800; letter-spacing: .8px; color: var(--ab-text-faint); text-transform: uppercase; white-space: nowrap; }
.ab-tl-node[data-estado="atual"] .ab-tl-tag { color: var(--ab-secondary); }
.ab-tl-card { border-left: 3px solid var(--ab-primary); padding: 4px 0 4px 14px; }
.ab-tl-card h4 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; }
.ab-tl-card p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ab-text-dim); }

/* ---------- trilhas (gantt) ---------- */
.ab-tracks { display: flex; flex-direction: column; gap: 9px; }
.ab-track { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; }
.ab-track-name { font-size: .82rem; font-weight: 700; color: var(--ab-text-dim); text-align: right; }
.ab-track-lane { position: relative; height: 26px; background: rgba(255,255,255,.04); border-radius: 8px; }
.ab-track-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-size: .68rem; font-weight: 700; color: #04120c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Barra curta corta a nota no meio da palavra ("reduzido a zero en"). Com
   elipse o corte lê como decisão, não como defeito. */
/* O gradiente ia até 55% de alfa e o texto escuro dentro da barra chegava a
   1.15:1 na ponta clara. Agora ele desbota só até onde o texto ainda se lê. */
.ab-track-bar[data-cor="nascendo"] { background: linear-gradient(90deg, var(--ab-primary), rgba(18,209,142,.88)); }
.ab-track-bar[data-cor="morrendo"] { background: linear-gradient(90deg, rgba(255,92,92,.95), rgba(255,92,92,.86)); color: #2a0505; }
.ab-track-scale { display: grid; font-size: .68rem; color: var(--ab-text-faint); font-family: var(--ab-font-num); font-weight: 700; margin-left: 162px; }
.ab-track-scale span { text-align: left; }

/* ---------- lista / obrigações ---------- */
.ab-list { display: flex; flex-direction: column; gap: 12px; }
.ab-list-item { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.ab-list-mark { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(18,209,142,.14); color: var(--ab-primary); font-weight: 900; font-size: .8rem; }
.ab-list-item[data-alerta="1"] .ab-list-mark { background: rgba(255,92,92,.14); color: var(--ab-alert); }
.ab-list-title { font-size: .95rem; font-weight: 800; margin-bottom: 3px; }
.ab-list-detail { font-size: .82rem; line-height: 1.45; color: var(--ab-text-dim); }
.ab-list-when { font-size: .68rem; font-weight: 800; letter-spacing: .5px; color: var(--ab-text-faint); text-transform: uppercase; margin-top: 4px; }

/* ---------- notícias / rss ---------- */
.ab-news { display: flex; flex-direction: column; gap: 10px; }
.ab-news-item { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-radius: var(--ab-radius-sm); background: rgba(255,255,255,.035); border: 1px solid transparent; text-decoration: none; color: inherit; }
.ab-news-item[data-on="1"] { border-color: rgba(18,209,142,.45); background: rgba(18,209,142,.07); }
.ab-news-title { font-size: .9rem; font-weight: 700; line-height: 1.35; }
.ab-news-meta { display: flex; gap: 8px; font-size: .7rem; font-weight: 700; color: var(--ab-text-faint); text-transform: uppercase; letter-spacing: .4px; }
.ab-news-meta b { color: var(--ab-primary); font-weight: 800; }

.ab-ticker { display: flex; align-items: center; gap: 0; height: 100%; overflow: hidden; }
.ab-ticker-tag { flex: none; padding: 0 18px; height: 100%; display: grid; place-items: center; background: var(--ab-primary); color: #04120c; font-weight: 900; font-size: .82rem; letter-spacing: 1px; text-transform: uppercase; }
.ab-ticker-view { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; }
.ab-ticker-track { display: flex; gap: 46px; white-space: nowrap; will-change: transform; }
.ab-ticker-item { font-size: .92rem; font-weight: 600; color: var(--ab-text); }
.ab-ticker-item b { color: var(--ab-secondary); font-weight: 800; margin-right: 8px; }

/* ---------- foto ---------- */
.ab-photo { padding: 0; }
/* O palco ocupa a borda toda, mas o cabeçalho não pode: zerar o padding do
   cartão fazia o título sair pela esquerda. Só o banco de provas mostrou,
   porque nos canais foto e vídeo são usados sem moldura. */
.ab-photo > .ab-head, .ab-video > .ab-head { padding: 16px 18px 0; margin-bottom: 10px; }
.ab-photo > .ab-cite, .ab-video > .ab-cite { padding: 8px 18px 12px; margin-top: 0; }
.ab-photo-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: inherit; }
.ab-photo-frame { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; }
.ab-photo-frame[data-on="1"] { opacity: 1; }
.ab-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 20px 16px; background: linear-gradient(transparent, rgba(4,8,14,.92)); }
.ab-photo-cap h4 { margin: 0 0 3px; font-size: 1rem; font-weight: 800; }
.ab-photo-cap span { font-size: .72rem; font-weight: 700; color: var(--ab-text-dim); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- vídeo ---------- */
.ab-video { padding: 0; }
.ab-video-stage { position: relative; flex: 1; min-height: 0; border-radius: inherit; overflow: hidden; background: #000; }
.ab-video-stage video, .ab-video-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ab-video-poster { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.ab-video-badge { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(4,8,14,.72); font-size: .68rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.ab-video-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--ab-alert); }
.ab-video-cap { position: relative; z-index: 2; }
.ab-video-cap h4 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.ab-video-cap span { font-size: .72rem; font-weight: 700; color: var(--ab-text-dim); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- norma (citação) ---------- */
.ab-norma { gap: 10px; }
.ab-norma-badge { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: rgba(74,168,255,.14); color: var(--ab-info); font-size: .68rem; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.ab-norma-text { font-size: .96rem; line-height: 1.55; color: var(--ab-text); border-left: 3px solid var(--ab-info); padding-left: 14px; }
.ab-norma-read { font-size: .84rem; line-height: 1.5; color: var(--ab-text-dim); }

/* ---------- passos ---------- */
.ab-steps { display: flex; gap: 10px; align-items: stretch; }
.ab-step { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: var(--ab-radius-sm); background: rgba(255,255,255,.04); border: 1px solid var(--ab-line); }
.ab-step-n { font-family: var(--ab-font-num); font-size: 1.5rem; font-weight: 800; color: var(--ab-primary); line-height: 1; opacity: .85; }
.ab-step-org { font-size: .9rem; font-weight: 800; }
.ab-step-role { font-size: .76rem; line-height: 1.4; color: var(--ab-text-dim); }

/* ---------- relógio / contagem ---------- */
.ab-clock { align-items: flex-start; gap: 4px; }
.ab-clock-now { font-family: var(--ab-font-num); font-size: 2rem; font-weight: 800; letter-spacing: -1px; }
.ab-clock-date { font-size: .78rem; font-weight: 700; color: var(--ab-text-dim); text-transform: uppercase; letter-spacing: .6px; }
.ab-clock-count { margin-top: 8px; font-size: .82rem; color: var(--ab-text-dim); }
.ab-clock-count b { font-family: var(--ab-font-num); font-size: 1.5rem; color: var(--ab-secondary); display: block; font-weight: 800; }

/* Valor textual (data, faixa) não é número de destaque: cabe menor. */
.ab-module[data-density="compact"] .ab-kpi-value { font-size: clamp(1.5rem, 2.4vw, 2.3rem); letter-spacing: -1px; }

/* Cartão de vídeo em faixa baixa: o pôster cobre, a legenda fica por cima. */
.ab-video-stage { min-height: 90px; }
.ab-video[data-frame="none"] .ab-video-stage { border-radius: var(--ab-radius); }

/* ---------- isolamento tipográfico ----------
   O painel é embutido em páginas que já têm CSS próprio (o site da IMPERIO usa
   serifa nos títulos). Sem isto, um <h4> dentro de um componente herda a fonte
   do hospedeiro e o painel deixa de ser o mesmo painel. Herdar cor é desejável;
   herdar tipografia não é. */
.ab-module h1, .ab-module h2, .ab-module h3, .ab-module h4,
.ab-module h5, .ab-module h6, .ab-module p, .ab-module span,
.ab-module div, .ab-module li, .ab-module text {
  font-family: var(--ab-font);
}
.ab-module .ab-kpi-value, .ab-module .ab-clock-now, .ab-module .ab-clock-count b,
.ab-module .ab-tl-year, .ab-module .ab-step-n {
  font-family: var(--ab-font-num);
}
.ab-module h1, .ab-module h2, .ab-module h3, .ab-module h4 { margin: 0; }
.ab-module p { margin: 0; }
.ab-module a { color: inherit; }

/* Cartão baixo: o rodapé de fonte não pode subir por cima do conteúdo. Um
   bloco de uma linha do grid tem ~130px — valor, rótulo e fonte já ocupam
   tudo. */
.ab-module[data-density="compact"] .ab-kpi { gap: 2px; }
.ab-module[data-density="compact"] .ab-kpi-label { font-size: .82rem; }
.ab-module[data-density="compact"] .ab-cite { margin-top: 6px; padding-top: 5px; }

/* Selo de vigência. Aparece quando a norma que sustenta o número deixou de
   estar vigente, ou quando ninguém a reconfere há tempo demais. O número
   permanece: some-lo trocaria um erro visível por um buraco inexplicável. */
.ab-cite[data-revisao="1"] {
  border-top-color: var(--ab-secondary);
  color: var(--ab-secondary);
}
.ab-cite-selo {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(240, 180, 41, .16);
  color: var(--ab-secondary);
  font-weight: 800;
  letter-spacing: .4px;
}
.ab-cite-selo[data-estado="revogada"],
.ab-cite-selo[data-estado="substituida"],
.ab-cite-selo[data-estado="expirada"] {
  background: rgba(255, 92, 92, .16);
  color: var(--ab-alert);
}
.ab-cite[data-revisao="1"]:has(.ab-cite-selo[data-estado="revogada"]),
.ab-cite[data-revisao="1"]:has(.ab-cite-selo[data-estado="substituida"]),
.ab-cite[data-revisao="1"]:has(.ab-cite-selo[data-estado="expirada"]) {
  border-top-color: var(--ab-alert);
  color: var(--ab-alert);
}

/* ---------- ocupar o cartão ----------
   Lista e passos desenhavam o conteúdo colado no topo e deixavam o resto do
   cartão vazio. Não era erro — nada quebrava — e por isso ninguém via: o painel
   só parecia inacabado. Agora os itens dividem a altura disponível e centram o
   próprio conteúdo, então três itens num cartão alto lêem como espaçamento
   deliberado, e não como sobra.

   `flex: 1 1 auto` e não `1 1 0`: item com texto longo mantém o tamanho de que
   precisa, e só a folga é repartida. */
.ab-list  { flex: 1; }
.ab-list-item { flex: 1 1 auto; align-content: center; }
.ab-steps { flex: 1; }
.ab-step  { justify-content: center; }
.ab-news  { flex: 1; }
.ab-news-item { flex: 1 1 auto; justify-content: center; }

/* Passos em coluna: a numeração vira a espinha da leitura. */
.ab-steps[data-orientacao="column"] { flex-direction: column; }
.ab-steps[data-orientacao="column"] .ab-step {
  flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px;
}
.ab-steps[data-orientacao="column"] .ab-step-n { flex: none; min-width: 24px; }
.ab-steps[data-orientacao="column"] .ab-step-org { flex: none; }
.ab-steps[data-orientacao="column"] .ab-step-role { flex: 1; }

/* ---------- linha do tempo em tela estreita ----------
   Oito marcos em 330px dão 41px por rótulo. "2026" já é apertado; "AJUSTE" e
   "ÚLTIMO" não cabem de jeito nenhum, e o resultado era uma mancha ilegível de
   anos sobrepostos. Em vez de encolher a fonte até ninguém ler, mostramos só o
   que orienta: o começo, o fim e onde estamos. */
.ab-player[data-modo="empilhado"] .ab-tl-tag { display: none; }
.ab-player[data-modo="empilhado"] .ab-tl-year { font-size: .74rem; opacity: 0; }
/* `:first-child` NÃO serve aqui: o primeiro filho do trilho é o preenchimento
   da barra, não um marco. O primeiro marco é o irmão imediato dele. */
.ab-player[data-modo="empilhado"] .ab-tl-fill + .ab-tl-node .ab-tl-year,
.ab-player[data-modo="empilhado"] .ab-tl-node:last-child .ab-tl-year,
.ab-player[data-modo="empilhado"] .ab-tl-node[data-estado="atual"] .ab-tl-year { opacity: 1; }
.ab-player[data-modo="empilhado"] .ab-tl-node[data-estado="atual"] .ab-tl-year { color: var(--ab-secondary); }
/* topo generoso: o ano fica ACIMA do nó e era cortado pelo corpo do cartão */
.ab-player[data-modo="empilhado"] .ab-tl-track { margin: 34px 26px 24px; }

/*!
 * AB Media Stream — @ab/player
 * A moldura do canal. Tudo é escopado em .ab-player para o player poder morar
 * dentro de uma página que já tem CSS próprio sem contaminar nada.
 *
 * O palco tem tamanho fixo e é encaixado por escala (ver observarTamanho no
 * player). Movimento usa steps(): a captura de vídeo roda a poucos quadros por
 * segundo e um quadro pego no meio de uma transição contínua sai borrado.
 */

/* O player é escopado: ele não pode depender de um reset da página que o
   hospeda, nem impor um. Sem isto, o padding do palco somava à largura fixa e
   o enquadramento vazava 64px para fora da captura. */
.ab-player, .ab-player *, .ab-player *::before, .ab-player *::after { box-sizing: border-box; }

.ab-player h1, .ab-player h2, .ab-player h3, .ab-player h4,
.ab-player h5, .ab-player h6, .ab-player p, .ab-player span {
  font-family: var(--ab-font);
  margin: 0;
}

.ab-player {
  position: relative;
  overflow: hidden;
  background: var(--ab-bg);
  color: var(--ab-text);
  font-family: var(--ab-font);
  border-radius: var(--ab-radius-lg, 16px);
  isolation: isolate;
}

.ab-fundo { position: absolute; inset: 0; z-index: 0; }
.ab-fundo-grade {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
}
.ab-fundo-brilho {
  position: absolute; inset: -20%;
  background:
    radial-gradient(52% 46% at 14% 8%, rgba(18,209,142,.20), transparent 65%),
    radial-gradient(46% 44% at 92% 88%, rgba(240,180,41,.14), transparent 62%),
    radial-gradient(60% 60% at 60% 40%, rgba(6,14,24,.9), #05080e 78%);
}

/* ---------- palco em escala (modo padrão) ---------- */
.ab-player[data-modo="palco"] .ab-palco {
  position: relative; z-index: 1;
  transform-origin: top left;
  display: grid; grid-template-rows: 104px 1fr 26px 64px;
  padding: 22px 32px 18px;
}

/* ---------- topo ---------- */
.ab-topo { display: flex; align-items: center; gap: 34px; }
.ab-marca { display: flex; flex-direction: column; gap: 2px; padding-right: 30px; border-right: 1px solid var(--ab-line); }
.ab-marca-nome { font-size: 2.5rem; font-weight: 900; letter-spacing: -1.4px; line-height: 1; color: var(--ab-primary); }
.ab-marca-sub { font-size: .8rem; font-weight: 800; letter-spacing: 3.4px; text-transform: uppercase; color: var(--ab-text-dim); }
.ab-assunto { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.ab-assunto-tag { font-size: .74rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--ab-secondary); }
.ab-assunto-pergunta { font-size: 1.62rem; font-weight: 800; letter-spacing: -.4px; }
.ab-relogio { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ab-relogio-hora { font-family: var(--ab-font-num); font-size: 2.1rem; font-weight: 800; letter-spacing: -1px; }
.ab-relogio-rede { font-size: .66rem; font-weight: 800; letter-spacing: 2.2px; color: var(--ab-text-faint); }

/* ---------- trilho ---------- */
.ab-trilho-vista { position: relative; overflow: hidden; margin-top: 18px; }
.ab-trilho { display: flex; height: 100%; will-change: transform; }
.ab-tela { flex: 0 0 auto; height: 100%; display: grid; padding-right: 18px; }

/* Os pontos são botões de verdade: alvo clicável, foco visível, navegáveis
   por teclado. Um painel que só se navega esperando é um painel que exclui. */
.ab-pontos { display: flex; gap: 9px; justify-content: center; align-items: center; }
.ab-ponto {
  width: 34px; height: 14px; padding: 5px 0; border: 0; background: none;
  cursor: pointer; appearance: none; position: relative;
}
.ab-ponto::before {
  content: ""; display: block; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.ab-ponto[data-on="1"]::before { background: var(--ab-primary); }
.ab-ponto:hover::before { background: rgba(255,255,255,.34); }
.ab-ponto:focus-visible { outline: 2px solid var(--ab-secondary); outline-offset: 3px; border-radius: 4px; }

/* Anúncio para leitor de tela: presente para quem ouve, ausente para quem vê. */
.ab-anuncio {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ---------- rodapé ---------- */
.ab-rodape { height: 64px; border-radius: 14px; overflow: hidden; border: 1px solid var(--ab-line); background: rgba(6,11,18,.72); }
.ab-rodape .ab-module { height: 100%; padding: 0; border: 0; background: transparent; }
.ab-rodape .ab-module::after { display: none; }
.ab-rodape .ab-body { height: 100%; gap: 0; }

.ab-ressalva {
  position: absolute; right: 32px; bottom: 92px;
  font-size: .64rem; font-weight: 700; letter-spacing: .6px;
  color: rgba(148,163,184,.55); text-transform: uppercase;
}

/* ---------- modo empilhado (tela estreita) ----------
   Mesmos componentes, mesma ordem, uma coluna. O grid do dashboard é ignorado:
   numa tela de telefone a posição relativa perde o sentido, a ordem não. */
.ab-player[data-modo="empilhado"] { border-radius: var(--ab-radius); }
.ab-player[data-modo="empilhado"] .ab-palco { position: relative; z-index: 1; padding: 18px 16px 14px; display: block; }
.ab-player[data-modo="empilhado"] .ab-topo { display: block; }
.ab-player[data-modo="empilhado"] .ab-assunto { margin-top: 10px; }
.ab-player[data-modo="empilhado"] .ab-marca { border-right: 0; padding-right: 0; }
.ab-player[data-modo="empilhado"] .ab-marca-nome { font-size: 1.7rem; }
.ab-player[data-modo="empilhado"] .ab-assunto-pergunta { font-size: 1.12rem; }
.ab-player[data-modo="empilhado"] .ab-relogio { display: none; }
.ab-player[data-modo="empilhado"] .ab-trilho-vista { margin-top: 14px; }
/* Em coluna, as telas não deslizam: só a ativa existe. O trilho ficava com a
   altura da tela MAIS ALTA, e uma tela de três blocos sobrava meia página de
   vazio embaixo. E o telefone deixa de calcular o layout de seis telas para
   mostrar uma. */
.ab-player[data-modo="empilhado"] .ab-trilho { width: 100% !important; transform: none !important; }
.ab-player[data-modo="empilhado"] .ab-tela { display: none; width: 100% !important; }
.ab-player[data-modo="empilhado"] .ab-tela[data-ativa="1"] {
  display: flex; flex-direction: column; gap: 12px; padding-right: 0; height: auto;
}
.ab-player[data-modo="empilhado"] .ab-tela > .ab-module {
  grid-area: auto !important; grid-column: auto !important; min-height: 150px;
}
.ab-player[data-modo="empilhado"] .ab-rodape { height: 52px; margin-top: 12px; }
.ab-player[data-modo="empilhado"] .ab-ressalva { position: static; margin-top: 10px; text-align: left; }


/* Movimento reduzido: o painel para de girar e os pontos passam a ser o único
   modo de trocar de tela. Nada de conteúdo se perde. */
@media (prefers-reduced-motion: reduce) {
  .ab-trilho { transition: none !important; }
  .ab-ticker-track { transform: none !important; }
  .ab-player[data-movimento="reduzido"] .ab-ticker-view { overflow-x: auto; }
}