/* LANGRIS — GRÁFICO DE LINHA (porta do Chart do spell-ui)
 * Escopo: .op-grafico e filhos. Funciona nos dois temas via variáveis --exp-*.
 * --opg-cor e --opg-halo são escritas pelo JS via CSSOM (hex validado), nunca
 * em style="…" no HTML — a CSP da página bloqueia atributos de estilo.
 */
/* Região aria-live do teclado: só para o leitor de tela. */
.op-grafico__voz { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.op-grafico {
  position: relative;
  width: 100%;
  font: inherit;
  color: var(--exp-ink);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: crosshair;
}
.op-grafico:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--exp-paper), 0 0 0 4px var(--opg-cor, var(--exp-accent));
}

/* área: uma faixa reservada em cima (o tooltip fica sempre ACIMA do ponto,
 * como no original, sem cobrir a curva nem invadir o título do painel) e,
 * abaixo dela, o traço: SVG esticado e sobreposições em % do próprio traço. */
.op-grafico .op-grafico__area {
  position: relative;
  height: auto;
  padding-top: 64px;
  overflow: visible;
}
/* Seletor composto de propósito: a altura do traço é do módulo e precisa
 * vencer regras genéricas de .op-grafico__traco em folhas carregadas depois
 * (height:100% aqui devolveria ao SVG a proporção quadrada do viewBox). */
.op-grafico .op-grafico__traco {
  position: relative;
  height: 140px;
}
.op-grafico .op-grafico__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.op-grafico__linha--base {
  color: var(--exp-muted);
  opacity: .35;
}

/* cursor tracejado */
.op-grafico__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--opg-cor);
  opacity: .55;
  pointer-events: none;
}

/* ponto com halo */
.op-grafico__ponto {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--opg-cor);
  border: 2px solid var(--exp-paper);
  box-sizing: content-box;
  box-shadow: 0 0 0 5px var(--opg-halo);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.op-grafico--sem-ponto .op-grafico__ponto { display: none; }

/* tooltip em HTML: acima do ponto, grudado nas bordas sem sair da área */
.op-grafico__dica {
  --opg-x: 100%;
  --opg-dica-l: 108px;
  position: absolute;
  left: clamp(0px, calc(var(--opg-x) - var(--opg-dica-l) / 2), calc(100% - var(--opg-dica-l)));
  transform: translateY(calc(-100% - 12px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--exp-surface);
  border: 1px solid var(--exp-line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  color: var(--exp-ink);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.op-grafico__dica-nome {
  font-size: 11px;
  color: var(--exp-muted);
  letter-spacing: .01em;
}
.op-grafico__dica-valor {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--exp-ink);
}
.op-grafico__dica-rotulo {
  font-size: 11px;
  color: var(--exp-muted);
}

/* eixo X: texto de tamanho fixo, um tick por rótulo escolhido */
.op-grafico__eixo {
  position: relative;
  height: 24px;
  margin-top: 8px;
  border-top: 1px solid var(--exp-line);
}
.op-grafico__tick {
  position: absolute;
  top: 7px;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  color: var(--exp-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.op-grafico__tick--ini { transform: none; }
.op-grafico__tick--fim { transform: translateX(-100%); }

/* estado vazio */
.op-grafico--vazio { cursor: default; }
.op-grafico--vazio .op-grafico__area {
  height: 204px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--exp-line);
  border-radius: 14px;
}
.op-grafico__vazio {
  margin: 0;
  font-size: 12px;
  color: var(--exp-muted);
}

/* movimento: só com --animado, e nunca quando a pessoa pediu menos movimento */
.op-grafico--animado .op-grafico__cursor,
.op-grafico--animado .op-grafico__ponto,
.op-grafico--animado .op-grafico__dica {
  transition: left .18s cubic-bezier(.2, .7, .2, 1), top .18s cubic-bezier(.2, .7, .2, 1);
}
.op-grafico--animado .op-grafico__revelado { transition: width .18s cubic-bezier(.2, .7, .2, 1); }
body.sem-movimento .op-grafico--animado .op-grafico__cursor,
body.sem-movimento .op-grafico--animado .op-grafico__ponto,
body.sem-movimento .op-grafico--animado .op-grafico__dica,
body.sem-movimento .op-grafico--animado .op-grafico__revelado { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .op-grafico--animado .op-grafico__cursor,
  .op-grafico--animado .op-grafico__ponto,
  .op-grafico--animado .op-grafico__dica,
  .op-grafico--animado .op-grafico__revelado { transition: none; }
}

/* ═══ Resultados (Publicações e Demografia) — rebranding de 26/09/2026 ═══
 * Esta é a única folha própria de Resultados que o piloto carrega depois da base (langris.css, experiencia.css e
 * operacao-unificada.css); por isso a pele da aba mora aqui, e não só a do gráfico.
 * Geometria, nos DOIS temas (é largura, não pele): a casca agora vai a 2560px e as grades crescem com ela.
 * Até 800px vale a faixa de langris.css (KPIs em 2 colunas, faixas em 1); até 720px o herói empilha.
 * min(…,100%) segura a coluna mínima numa tela estreita. */
@media (min-width: 801px) {
  body.produto-operacional[data-op-tema] .op-instagram-observed .op-kpis {grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
  /* Até 4 números: com 180px cabem os quatro numa linha desde 801px (com 200px, de 801 a ~890px, o iPad em pé, sobrava 3+1). */
  body.produto-operacional[data-op-tema] .op-demography-kpis {grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
}
/* As faixas são sempre quatro (idade, gênero, cidades, países): 2×2 e, a partir de 1400px, as quatro numa linha.
   Uma grade auto-fit de 420px dava 3+1 em 1440 e 1512 e deixava dois terços de uma linha vazios. */
@media (min-width: 1400px) {
  body.produto-operacional[data-op-tema] .op-demography-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* O link "Demografia" do herói da conta ficava sozinho no meio da 2ª linha: passa a dividir a linha das abas. */
@media (min-width: 721px) {
  body.produto-operacional[data-op-tema] .op-pub-account-hero {grid-template-columns:minmax(240px,1fr) auto auto}
}
/* No celular, dois posts por linha (uma coluna dava cartões de ~400px de altura). */
@media (max-width: 520px) {
  body.produto-operacional[data-op-tema] .op-pub-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Pele Pulso — Resultados (só escuro; o claro fica como estava).
   Sempre com o prefixo só-escuro mais o contêiner da tela (.op-main, .op-pub-*, .op-demography-*,
   .op-instagram-observed, .op-grafico-bloco, .op-publication-detail), porque as listas :is() da base pesam até
   (0,4,3) e a casca do G0 (operacao-redesenho.css) carrega depois desta folha. Classes compartilhadas (.op-panel,
   .op-kicker, .op-section-title, .op-status, .op-guard, .op-empty, .op-link, botões, diálogo) são da casca.
   Seções e colunas: degradê de coluna, linha, raio 20 (casca). Cartões internos: --lg-cartao, linha suave, raio 14. */

/* Segmentado: filtros, abas da conta e contas da Demografia (trilho em pílula, ativo na pílula clara).
   A altura mínima de 40px do botão (alvo de toque, langris.css) fica: o trilho sai com 50px, como no Início. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-pub-filterbar {background:transparent}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-filterbar > div,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-account-hero .op-pub-tabs,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-demography-accounts {
  gap:4px;padding:4px;border:1px solid var(--lg-linha);border-radius:var(--lg-raio-pilula);background:var(--lg-trilho);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-demography-accounts {width:fit-content;max-width:100%}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-filterbar > div, .op-pub-account-hero .op-pub-tabs, .op-main .op-demography-accounts) > button {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border:0;border-radius:var(--lg-raio-pilula);
  background:transparent;box-shadow:none;color:var(--lg-apoio);font-family:var(--lg-fonte);font-size:13px;font-weight:650;letter-spacing:normal;line-height:1;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-filterbar > div, .op-pub-account-hero .op-pub-tabs, .op-main .op-demography-accounts) > button:not(.ativo):hover {background:transparent;color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-filterbar > div, .op-pub-account-hero .op-pub-tabs, .op-main .op-demography-accounts) > button.ativo {
  background:var(--lg-pilula-ativa);color:var(--lg-sobre-pilula);box-shadow:none;
}
/* Contador ("Todas 7"): pílula de 24px, concêntrica com a borda do botão. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-filterbar > div, .op-pub-account-hero .op-pub-tabs) > button:has(> span) {padding-right:8px}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-filterbar > div, .op-pub-account-hero .op-pub-tabs) > button > span {
  display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:var(--lg-raio-pilula);
  background:var(--lg-realce-2);color:var(--lg-tinta-2);font-family:var(--lg-fonte);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-filterbar > div, .op-pub-account-hero .op-pub-tabs) > button.ativo > span {
  background:color-mix(in srgb,var(--lg-sobre-pilula) 10%,transparent);color:var(--lg-sobre-pilula);
}
/* Busca de conta: campo em pílula da altura do trilho; o contorno segue o de campo (--line-strong). O foco continua
   no próprio campo (anel limão da fundação), sem um segundo indicador na pílula. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-filterbar > label {
  padding:4px 16px;border-color:var(--line-strong);background:var(--lg-campo);color:var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-filterbar > label input {color:var(--lg-tinta);font-family:var(--lg-fonte);font-size:13px}

/* Contas do Instagram: item de lista selecionável; a ativa leva a borda limão com fundo de limão a 4%. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-accounts .op-pub-account {
  border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-botao);background:var(--lg-cartao);color:var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-accounts .op-pub-account:not(.ativo):hover {border-color:var(--lg-linha-forte);background:var(--lg-cartao-hover)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-accounts .op-pub-account.ativo {
  border-color:var(--lg-limao);background:color-mix(in srgb,var(--lg-limao) 4%,var(--lg-cartao));color:var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-accounts .op-pub-account strong {color:var(--lg-tinta);font-size:13px;font-weight:620}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-accounts .op-pub-account small {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-accounts .op-pub-account > i {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-accounts .op-pub-account.ativo > i {color:var(--lg-limao)}
/* Avatar "AM": selo tingido violeta em Instrument (era monoespaçada sobre cobalto). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-account .op-pub-account__avatar, .op-pub-account-hero .op-pub-account-hero__identity > span) {
  border-color:color-mix(in srgb,var(--lg-violeta) 33%,transparent);background:color-mix(in srgb,var(--lg-violeta) 7%,transparent);
  color:var(--lg-violeta-texto);font-family:var(--lg-fonte);font-weight:650;letter-spacing:normal;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-account .op-pub-account__avatar {border-radius:var(--lg-raio-botao);font-size:13px}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-account-hero .op-pub-account-hero__identity > span {border-radius:var(--lg-raio-cartao);font-size:20px}

/* Herói da conta: rótulo pequeno em Instrument (era monoespaçada azul) e título no peso do Início. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-account-hero .op-pub-account-hero__identity small {
  color:var(--lg-apoio);font-family:var(--lg-fonte);font-size:var(--lg-kicker);font-weight:var(--lg-kicker-peso);letter-spacing:var(--lg-kicker-tracking);line-height:1.2;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-account-hero .op-pub-account-hero__identity h2 {color:var(--lg-tinta);font-weight:var(--lg-titulo-peso);letter-spacing:-.04em}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-account-hero .op-pub-account-hero__identity p {color:var(--lg-apoio)}

/* Cartões internos (dentro de seção): posts, leituras da Meta, números e gráficos. Um contorno por nível. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-grid .op-pub-tile, .op-pub-observed-grid .op-pub-observed, .op-pub-content .op-pub-kpis, .op-graficos .op-grafico-bloco, .op-instagram-observed .op-kpis article, .op-main .op-demography-kpis article) {
  border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-item);background:var(--lg-cartao);box-shadow:none;color:var(--lg-tinta);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-grid .op-pub-tile, .op-instagram-observed .op-kpis article, .op-main .op-demography-kpis article) {transition:border-color .2s,background-color .2s,transform .15s}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-grid .op-pub-tile, .op-instagram-observed .op-kpis article, .op-main .op-demography-kpis article):hover {border-color:var(--lg-linha-forte)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-grid .op-pub-tile:hover {background:var(--lg-cartao-hover)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-grid .op-pub-tile strong {color:var(--lg-tinta);font-size:14px;font-weight:620;line-height:1.3}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-pub-grid .op-pub-tile, .op-pub-observed-grid .op-pub-observed) small {color:var(--lg-apoio);font-variant-numeric:tabular-nums}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-observed-grid .op-pub-observed strong {color:var(--lg-tinta);font-size:13px;font-weight:620;line-height:1.3}
/* Números de cada leitura: legenda passiva em pílula. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-observed-grid .op-pub-observed p span {
  padding:4px 9px;border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-pilula);background:var(--lg-realce);color:var(--lg-apoio);font-size:11px;line-height:1.3;
}
/* "Meta · leitura" sobre a miniatura: vidro e Instrument (era monoespaçada verde). A miniatura em si não muda. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-observed .op-pub-observed__media b {
  border-radius:var(--lg-raio-campo);background:var(--lg-vidro);color:var(--lg-apoio);
  font-family:var(--lg-fonte);font-size:var(--lg-kicker);font-weight:var(--lg-kicker-peso);letter-spacing:var(--lg-kicker-tracking);line-height:1.25;
}

/* Números: 22px/640/-.02em em tinta e algarismos tabulares; rótulo 12px de apoio, sem caixa alta; divisórias suaves. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-content .op-pub-kpis article {border-color:var(--lg-linha-suave)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-instagram-observed .op-kpis, .op-pub-content .op-pub-kpis, .op-main .op-demography-kpis) strong {
  color:var(--lg-tinta);font-family:var(--lg-fonte);font-size:22px;font-weight:640;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-instagram-observed .op-kpis, .op-pub-content .op-pub-kpis, .op-main .op-demography-kpis) span {
  color:var(--lg-apoio);font-family:var(--lg-fonte);font-size:12px;letter-spacing:normal;text-transform:none;
}

/* Gráfico de linha: traço, preenchimento, ponto, cursor e halo em limão. O traço e o degradê são atributos do SVG
   (operacao-grafico.js) e o CSS vence atributo de apresentação; --opg-cor (escrita por CSSOM) não é sobreposta. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-grafico-bloco .op-grafico__linha:not(.op-grafico__linha--base) {stroke:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-grafico-bloco .op-grafico__svg stop {stop-color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-grafico-bloco .op-grafico__ponto {background:var(--lg-limao);box-shadow:0 0 0 5px color-mix(in srgb,var(--lg-limao) 25%,transparent)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-grafico-bloco .op-grafico__cursor {border-left-color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-grafico-bloco .op-grafico:focus-visible {box-shadow:0 0 0 2px var(--exp-paper),0 0 0 4px var(--lg-limao)}

/* "Ver →" do histórico: link limão (era monoespaçada azul em caixa alta). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publications > button > i {
  color:var(--lg-limao);font-family:var(--lg-fonte);font-size:13px;font-weight:650;font-style:normal;letter-spacing:normal;text-transform:none;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}

/* Avisos da própria aba: nota com ponto (âmbar em "Agenda ≠ publicação", limão na fonte oficial), raio 14, sem filete. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-pub-law {
  grid-template-columns:1fr;padding:12px 14px;border:1px solid var(--lg-linha);border-radius:var(--lg-raio-item);background:var(--lg-realce);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-pub-law strong {
  display:flex;align-items:center;gap:8px;color:var(--lg-tinta-2);font-family:var(--lg-fonte);font-size:13px;font-weight:650;line-height:1.4;text-transform:none;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-pub-law strong::before {
  content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--lg-ambar);box-shadow:0 0 10px var(--lg-ambar);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-demography-hero .op-demography-source {
  padding:12px 14px;border:1px solid var(--lg-linha);border-radius:var(--lg-raio-item);background:var(--lg-realce);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-demography-hero .op-demography-source > b, .op-main .op-demography-radar-link > div > span) {
  display:flex;align-items:center;gap:8px;color:var(--lg-limao);font-family:var(--lg-fonte);
  font-size:var(--lg-kicker);font-weight:var(--lg-kicker-peso);letter-spacing:var(--lg-kicker-tracking);text-transform:uppercase;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-demography-hero .op-demography-source > b, .op-main .op-demography-radar-link > div > span)::before {
  content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--lg-limao);box-shadow:0 0 10px var(--lg-limao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-demography-hero .op-demography-source > span {color:var(--lg-tinta-2)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-demography-hero .op-demography-source > small {color:var(--lg-apoio)}

/* Demografia: título do herói no peso do Início, títulos das faixas como título de seção, barras no degradê de progresso. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-demography-hero h2 {color:var(--lg-tinta);font-weight:640;letter-spacing:-.04em}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-demography-card > div:first-child > span {color:var(--lg-tinta);font-size:var(--lg-titulo-secao);font-weight:640;letter-spacing:-.01em}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-demography-bars strong {color:var(--lg-subtitulo)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-demography-bars b {color:var(--lg-apoio);font-variant-numeric:tabular-nums}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-demography-bars article > div {border-radius:var(--lg-raio-pilula);background:var(--lg-linha-suave)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-demography-bars article > div > i {border-radius:inherit;background:var(--lg-progresso);box-shadow:none}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-demography-empty {border-color:var(--lg-linha-vazia);border-radius:var(--lg-raio-item);color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-demography-pending > h2 {color:var(--lg-tinta);font-weight:640;letter-spacing:-.02em}
/* Rodapé "Atualizar": seção (degradê de coluna, linha, raio 20) com rótulo limão; o botão é da casca. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main .op-demography-radar-link {
  border-color:var(--lg-linha);border-radius:var(--lg-raio-secao);background:var(--lg-coluna);box-shadow:none;
}

/* Diálogo da publicação (miolo; a caixa, o título, os selos, os avisos e os botões são da casca; a prévia pv-* fica). */
/* A borda direita e a de baixo das linhas da prova caíam em cima da borda da caixa (linha dupla, canto quadrado no raio):
   a grade passa 1px por baixo da borda e a caixa recorta no raio. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-prova {border-color:var(--lg-linha);border-radius:var(--lg-raio-item);overflow:hidden}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-prova .op-proof-grid {margin:0 -1px -1px 0}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-prova > summary {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-prova[open] > summary {border-bottom-color:var(--lg-linha);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-proof-row {border-color:var(--lg-linha-suave)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-proof-row > span {
  color:var(--lg-apoio);font-family:var(--lg-fonte);font-size:var(--lg-kicker);font-weight:var(--lg-kicker-peso);letter-spacing:var(--lg-kicker-tracking);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-proof-row > strong {color:var(--lg-tinta-2)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-publication-state > span {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-publication-error {
  border-color:color-mix(in srgb,var(--lg-erro) 33%,transparent);border-radius:var(--lg-raio-item);background:color-mix(in srgb,var(--lg-erro) 7%,transparent);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-publication-detail .op-publication-error :is(strong, p) {color:var(--lg-erro-texto)}
/* Fim Pele Pulso */