/* LANGRIS — Pauta automática (.rp-*): a lista de fontes e a pauta do dia.
 *
 * Herda cor e superfície do tema da operação (--exp-*), que já troca entre
 * claro e escuro em operacao-unificada.css. Aqui só mora a geometria — menos
 * o bloco "tema escuro", no fim, com as poucas cores que o escuro pede à parte.
 *
 * Nada de style="…" no HTML — a CSP da página bloqueia atributos de estilo —
 * então toda variação (interruptor ligado, contador estourado, recado de
 * recusa) é classe ou atributo ARIA.
 */

/* --------------------------------------------- a Agenda com a pauta ao lado */

/* QUANTO DO ALTO A BARRA COME.
 *
 * No casco COM tema a navegação é uma barra grudada no alto (position:sticky,
 * z-index 30) e o painel tem de começar ABAIXO dela — senão o cabeçalho dele,
 * com o botão de fechar, some por baixo assim que a pessoa rola. A barra tem
 * DUAS linhas (marca em cima, abas embaixo) até 1399px e UMA a partir de 1400
 * — o mesmo corte de operacao-unificada.css. Medido na bancada com o casco de
 * verdade: 140px em 981 e 1100, 138px em 1280 e 1366, 81px em 1400 e 1680.
 * O valor aqui é o MAIOR medido em cada faixa (mais três pixels na de cima):
 * a conta tem de sobrar, nunca faltar. Abaixo de 981px isto não é usado — lá
 * o painel aberto cobre a tela inteira. No casco sem tema não há barra no
 * alto: 0.
 */
:root { --rp-barra: 0px; }
body[data-op-tema] { --rp-barra: 140px; }
@media (min-width: 1400px) { body[data-op-tema] { --rp-barra: 84px; } }
/* O aviso de tradução beta (marca.css) entra no <body> antes de #app e empurra a barra
   --aviso-beta para baixo: a conta soma a altura dele (os mesmos 140/84 de cima). Depois de
   rolar, sobra essa folga entre a barra e a gaveta; é o lado seguro de errar. */
body[data-op-tema]:has(> .aviso-idioma-beta) { --rp-barra: calc(140px + var(--aviso-beta)); }
@media (min-width: 1400px) { body[data-op-tema]:has(> .aviso-idioma-beta) { --rp-barra: calc(84px + var(--aviso-beta)); } }

/* A moldura: calendário à esquerda, pauta à direita. Fechada, a coluna da
   pauta não existe e o calendário ocupa tudo; aberta, a pauta tem entre 320 e
   380px. Quem troca a classe é radar-pauta.js (a alça), e operacao.js a
   relê a cada render — o render refaz #app inteiro.

   As DUAS colunas pedem 1368px DE LAYOUT, e a conta é esta, medida na
   bancada: a grade do mês pede min-width 910px (langris.css) dentro de um
   painel com 1px de borda de cada lado, a goteira leva 20 e a coluna da pauta
   380; com o recheio de 28px de cada lado da .op-main, 912+20+380+56 = 1368.
   Abaixo disso o calendário ficava menor que o próprio mínimo e passava
   a rolar de lado — perdia o domingo em 1280, sábado e domingo em 1100. Como
   o pedido do dono é VER O CALENDÁRIO, abaixo disso o painel deixa de ser
   coluna e vira gaveta por cima (mais abaixo).

   MAS O CORTE AQUI É 1392, E NÃO 1368, POR CAUSA DA BARRA DE ROLAGEM. Uma
   media query mede a JANELA, com a barra clássica dentro; o layout recebe a
   janela MENOS a barra. Num navegador de barra clássica os dois números
   diferem, e o corte cravado em 1368 ligava as duas colunas com menos de 1368
   de layout. Medido na bancada, com barra de 15px forçada: janela 1368 →
   layout 1353 → calendário 897, a grade a mostrar 895 dos 910 que pede, o
   domingo cortado outra vez; e assim até a janela 1382. Daí a folga de 24px
   (1368+24): cobre a barra clássica mais larga que se vê — 15 no macOS com
   "mostrar sempre", 17 no Windows a 100% — e ainda sobra para arredondamento
   de zoom fracionário. O preço é que, entre 1368 e 1391 de layout, quem tem
   barra sobreposta recebe a gaveta em vez das duas colunas; o calendário
   aparece inteiro dos dois jeitos, e é esse o lado seguro de errar.
   O mesmo 1392 está em radar-pauta.js (LADO_A_LADO), e um teste cobra que os
   dois números sejam o mesmo. */
.op-agenda-com-pauta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; align-items: start; }
.op-agenda-com-pauta--aberta { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }

.rp-lateral {
  position: sticky; top: calc(var(--rp-barra) + 16px); max-height: calc(100dvh - var(--rp-barra) - 32px);
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--exp-line); border-radius: 12px; background: var(--exp-surface); color: var(--exp-ink);
}
.rp-lateral[hidden] { display: none; }
.rp-lateral:focus { outline: none; }
.rp-lateral:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 2px; }

/* Três filhos: o título, o × e — na segunda linha, a 100% — o interruptor da
   escrita automática (`flex-wrap`). A ordem do DOM é a ordem em que se vê. */
.rp-lateral__topo {
  position: sticky; top: 0; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px;
  padding: 14px 14px 10px; border-bottom: 1px solid var(--exp-line); background: var(--exp-surface);
}
.rp-lateral__topo h2 { margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--exp-ink); }
.rp-lateral__fechar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--exp-line); border-radius: 8px;
  background: transparent; color: var(--exp-muted); font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.rp-lateral__fechar:hover, .rp-lateral__fechar:focus-visible { color: var(--exp-ink); background: var(--exp-paper); }
.rp-lateral__corpo { padding: 12px 14px 16px; }

/* A pauta do Instagram abre a coluna com uma conta por vez. Ela usa os mesmos
   cartões da pauta; aqui moram apenas a navegação, a prévia e os controles que
   o Instagram precisa. */
.rp-instagram { padding: 14px; border-bottom: 1px solid var(--exp-line); background: color-mix(in srgb, var(--exp-accent) 3%, transparent); }
.rp-ig-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rp-ig-topo h3 { margin: 2px 0 0; font-size: 16px; color: var(--exp-ink); }
.rp-ig-seguro { max-width: 112px; font-size: 10px; line-height: 1.35; text-align: right; color: var(--exp-muted); }
.rp-ig-contas { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.rp-ig-conta { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 34px; padding: 4px 10px 4px 5px; border: 1px solid var(--exp-line); border-radius: 999px; background: transparent; color: var(--exp-muted); font: inherit; font-size: 11px; cursor: pointer; }
.rp-ig-conta.ativo { border-color: var(--exp-accent); color: var(--exp-accent-text, var(--exp-accent)); }
.rp-ig-conta__avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--exp-paper); color: var(--exp-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.rp-ig-itens { display: grid; gap: 12px; margin-top: 12px; }
.rp-ig-item { background: var(--exp-surface); }
.rp-ig-formato { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid var(--exp-line); border-radius: 999px; color: var(--exp-accent-text, var(--exp-accent)); font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.rp-ig-porque { margin: 0; color: var(--exp-muted); font-size: 10px; }
.rp-ig-previa { margin: 2px 0; border: 1px solid var(--exp-line); border-radius: 10px; background: var(--exp-paper); overflow: hidden; }
.rp-ig-previa--imagens { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82%, 1fr); gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; }
.rp-ig-previa--imagens img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; }
.rp-ig-previa--rascunho { position: relative; }
.rp-ig-previa--rascunho small { display: block; padding: 7px 9px; color: var(--exp-muted); font-size: 10px; line-height: 1.35; }
.rp-ig-previa--cards { display: flex; gap: 6px; padding: 8px; margin-block: 2px; overflow-x: auto; list-style: none; counter-reset: card; }
.rp-ig-previa--cards li { flex: 0 0 78%; display: grid; align-content: end; min-height: 112px; padding: 10px; border-radius: 8px; background: var(--exp-surface); color: var(--exp-ink); }
.rp-ig-previa--cards b { font-size: 12px; }
.rp-ig-previa--cards span { margin-top: 4px; color: var(--exp-muted); font-size: 11px; line-height: 1.4; }
.rp-ig-previa--roteiro { padding: 12px; }
.rp-ig-previa--roteiro p { margin: 6px 0; color: var(--exp-ink); font-size: 12px; line-height: 1.45; }
.rp-ig-previa--roteiro small { color: var(--exp-muted); }
.rp-ig-legenda { position: relative; display: grid; gap: 5px; color: var(--exp-muted); font-size: 11px; }
.rp-ig-legenda textarea { width: 100%; min-height: 112px; resize: none; padding: 10px 11px 24px; border: 1px solid var(--exp-line); border-radius: 10px; background: var(--exp-paper); color: var(--exp-ink); font: inherit; font-size: 12px; line-height: 1.45; }
.rp-ig-legenda small { position: absolute; right: 8px; bottom: 6px; color: var(--exp-muted); }
.rp-ig-acoes { align-items: stretch; }
.rp-ig-acoes > button { flex: 1 1 140px; justify-content: center; }
.rp-ig-quando { flex: 1 1 100%; display: grid; gap: 4px; color: var(--exp-muted); font-size: 11px; }
.rp-ig-quando input { min-height: 38px; padding: 7px 9px; border: 1px solid var(--exp-line); border-radius: 8px; background: var(--exp-paper); color: var(--exp-ink); font: inherit; color-scheme: dark; }
.rp-ig-ajuste { margin-top: 10px; padding: 9px 10px; border: 1px solid var(--exp-line); border-radius: 10px; color: var(--exp-muted); font-size: 11px; }
.rp-ig-ajuste summary { cursor: pointer; color: var(--exp-ink); }
.rp-ig-ajuste__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.rp-ig-ajuste__grade label { display: grid; grid-template-columns: minmax(0, 1fr) 42px auto; align-items: center; gap: 4px; }
.rp-ig-ajuste__grade input { min-width: 0; width: 42px; min-height: 32px; padding: 4px; border: 1px solid var(--exp-line); border-radius: 7px; background: var(--exp-paper); color: var(--exp-ink); font: inherit; }
.rp-ig-finalizar { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0; line-height: 1.4; }
.rp-ig-finalizar input { margin-top: 2px; accent-color: var(--exp-accent); }

/* A alça: um botão fixo na borda direita, deitado, presente nos DOIS estados
   — é o mesmo botão que abre e que fecha; `aria-expanded` diz qual. */
.rp-alca {
  position: fixed; right: 0; top: 50%; z-index: 41; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px; writing-mode: vertical-rl;
  padding: 12px 8px; border: 1px solid var(--exp-line); border-right: 0; border-radius: 10px 0 0 10px;
  background: var(--exp-surface); color: var(--exp-ink); font: inherit; font-size: 13px; font-weight: 600;
  line-height: 1; letter-spacing: .01em; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: color .15s ease, border-color .15s ease;
}
.rp-alca svg { flex: 0 0 auto; color: var(--exp-accent); }
.rp-alca__conta { color: var(--exp-muted); font-weight: 500; }
.rp-alca__conta:empty { display: none; }
.rp-alca[aria-expanded="true"] { color: var(--exp-accent-text, var(--exp-accent)); border-color: var(--exp-accent); }
.rp-alca:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 2px; }

.rp-carregando { color: var(--exp-muted); font-size: 13px; margin: 0; }

.rp-aviso-maquina,
.rp-mudas,
.rp-conta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--exp-muted);
}
.rp-aviso-maquina svg { flex: 0 0 auto; color: var(--exp-accent); }
.rp-mudas svg, .rp-conta svg { flex: 0 0 auto; }
.rp-conta { color: var(--exp-ink); }
/* O texto do aviso encolhe e quebra AO LADO do ícone: com o flex-wrap acima, um
   texto longo ("@conta: Conectada, ainda não publica…", "A postagem no X está
   desligada…") pulava inteiro para a linha de baixo e deixava o ícone sozinho. */
.rp-conta > span { flex: 1 1 14em; min-width: 0; }
.rp-conta button { min-height: 32px; padding: 4px 12px; border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; }

/* --------------------------------------------------------------- cartões */

.rp-itens { display: grid; gap: 12px; margin-top: 14px; }

.rp-item {
  display: grid; gap: 8px;
  padding: 14px 16px; border: 1px solid var(--exp-line); border-radius: 12px;
  background: var(--exp-surface);
}
/* 26/09/2026 — o cartão que o "Produzir" do Início mandou (pedido do dono: "mandar
   pra produção deveria ser exatamente isso"): contorno de destaque e, fora das 8 de
   hoje, a linha que diz por que ele está aqui. */
.rp-item--destaque { border-color: var(--exp-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--exp-accent) 28%, transparent); }
.rp-item--destaque:focus { outline: 2px solid var(--exp-accent); outline-offset: 2px; }
.rp-item--destaque:focus:not(:focus-visible) { outline: none; }
.rp-avulsa { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--exp-muted); }
.rp-aviso-destaque { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--exp-muted); }
.rp-aviso-destaque svg { flex: 0 0 auto; color: var(--exp-accent); }
.rp-item__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rp-fonte { font-size: 12px; font-weight: 600; color: var(--exp-ink); min-width: 0; overflow-wrap: anywhere; }
.rp-quando-fato { flex: 0 0 auto; font-size: 12px; color: var(--exp-muted); }

.rp-manchete { margin: 0; font-size: 16px; line-height: 1.3; color: var(--exp-ink); overflow-wrap: anywhere; }

/* O cartão compacto do painel lateral: tudo o que o cartão largo tem, em
   menos altura — ícone da fonte na linha de cima, miniatura ao lado da
   manchete, texto, horário e os dois botões. */
.rp-item--compacto { gap: 6px; padding: 12px; }
.rp-item--compacto .rp-item__topo { align-items: center; gap: 8px; }
.rp-item--compacto .rp-fonte { flex: 1 1 auto; }
.rp-item--compacto .rp-manchete { font-size: 14px; }
.rp-item--compacto .rp-texto { min-height: 60px; font-size: 13px; }
.rp-item--compacto .rp-acoes button { min-height: 34px; padding: 6px 12px; font-size: 12px; }

.rp-item__miolo { display: flex; align-items: flex-start; gap: 10px; }
.rp-item__miolo .rp-manchete { flex: 1 1 auto; min-width: 0; }

/* A miniatura: só existe quando a fonte declarou uma imagem. Se a rota não
   entregar, o `error` em radar-pauta.js esconde a figura e o cartão fecha o
   espaço — sem ícone quebrado, sem "carregando". */
.rp-miniatura { flex: 0 0 88px; width: 88px; height: 64px; margin: 0; border-radius: 8px; overflow: hidden; background: var(--exp-paper); }
.rp-miniatura[hidden] { display: none; }
.rp-miniatura__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* O ícone da fonte: a inicial em baixo, a <img> por cima. Antes de carregar
   e quando falha (a <img> ganha `hidden`), quem aparece é a inicial — o molde
   do pv-avatar, com o tom estável por fonte. Sem rota, só a inicial. */
.rp-logo {
  --rp-tom: 210;
  position: relative; flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px; overflow: hidden;
  font-size: 11px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #fff;
  background: linear-gradient(145deg, hsl(var(--rp-tom), 55%, 55%), hsl(calc(var(--rp-tom) + 28), 50%, 40%));
}
.rp-logo__inicial { display: grid; place-items: center; width: 100%; height: 100%; }
.rp-logo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-logo__img[hidden] { display: none; }
/* O Chrome desenha ::after numa <img> quebrada antes de o `error` correr: a
   inicial cobre o ícone partido. Numa imagem carregada o pseudo não existe. */
.rp-logo__img::after {
  content: attr(data-inicial); position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(145deg, hsl(var(--rp-tom), 55%, 55%), hsl(calc(var(--rp-tom) + 28), 50%, 40%)); color: #fff;
}
.rp-tom-0 { --rp-tom: 0; } .rp-tom-1 { --rp-tom: 30; } .rp-tom-2 { --rp-tom: 60; } .rp-tom-3 { --rp-tom: 90; }
.rp-tom-4 { --rp-tom: 120; } .rp-tom-5 { --rp-tom: 150; } .rp-tom-6 { --rp-tom: 180; } .rp-tom-7 { --rp-tom: 210; }
.rp-tom-8 { --rp-tom: 240; } .rp-tom-9 { --rp-tom: 270; } .rp-tom-10 { --rp-tom: 300; } .rp-tom-11 { --rp-tom: 330; }
.rp-manchete a { color: inherit; text-decoration: underline; text-decoration-color: var(--exp-line); text-underline-offset: 3px; }
.rp-manchete a:hover, .rp-manchete a:focus-visible { text-decoration-color: currentColor; }

/* ------------------------------------------------------------- o rascunho */

.rp-sem-rascunho { margin: 0; font-size: 12px; color: var(--exp-muted); }

/* O cartão cujo texto a máquina ainda escreve: uma linha, com um sinal que
   pulsa devagar — e parado para quem pediu menos movimento. Sem campo e sem
   botão de aprovar; o cartão é trocado sozinho quando o texto chega. */
.rp-escrevendo {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--exp-line);
  font-size: 13px; color: var(--exp-muted);
}
.rp-escrevendo__sinal {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--exp-accent); opacity: .35;
  animation: rp-escrevendo-pulso 1.6s ease-in-out infinite;
}
@keyframes rp-escrevendo-pulso { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rp-escrevendo__sinal { animation: none; opacity: .7; }
}

.rp-escrever summary { cursor: pointer; font-size: 13px; color: var(--exp-accent); }
.rp-escrever[open] summary { margin-bottom: 8px; }

.rp-texto {
  display: block; width: 100%; min-height: 72px; resize: vertical; box-sizing: border-box;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--exp-line); background: var(--exp-paper); color: var(--exp-ink);
  font: inherit; font-size: 14px; line-height: 1.45;
}
.rp-texto:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 1px; }

.rp-contador { display: block; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--exp-muted); }
.rp-contador:empty { display: none; }
.rp-contador--estourado { color: #c02626; font-weight: 600; }

/* ------------------------------------------------------------------ o fio */

/* As partes, uma embaixo da outra, dentro da coluna de 380px da pauta. Nada
   aqui tem largura fixa: `min-width: 0` na pilha e `box-sizing: border-box`
   no campo (acima) é o par que impede a parte mais longa de empurrar o cartão
   para fora e criar rolagem lateral na página inteira. */
.rp-partes { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rp-parte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* O rótulo da parte só existe no fio. No post não há rótulo: um post não tem
   parte 1, tem texto.

   O acoplamento que sobreviveu à troca de vocabulário, e que custou um
   defeito: "Post raiz" e "Resposta 2 de 3" são os MESMOS nomes que a recusa
   da tela usa quando diz qual campo estourou ("O post raiz passa de 280…",
   "A resposta 2 passa de 280…") e que as recusas do conjunto usam quando
   nomeiam o par que caiu. Enquanto o rótulo dizia "Parte 3 de 4" e o recado
   dizia "a parte 3", os dois andavam juntos por acaso; agora andam juntos por
   escrito. Quem renomear aqui renomeia em `js/radar-pauta.js` (o recado do
   teto de 280) e em `dominio/conjunto-do-fio.mjs` (as recusas do fio). */
.rp-parte__rotulo {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--exp-muted);
}

/* ---------------------------------------------- a raiz e as respostas dela

   No X um fio não é um texto em sete pedaços: é um POST e seis RESPOSTAS a
   ele. A pilha de campos iguais dizia a contagem certa e a forma errada, e
   escondia a assimetria que mais importa na hora de aprovar — só a raiz
   aparece sozinha na linha do tempo de quem não abre o fio.

   O desenho é o do próprio X, e de propósito: a raiz sem recuo, com o rótulo
   em peso maior; as respostas recuadas e penduradas num trilho vertical que
   as liga. A pessoa reconhece a forma antes de ler o texto.

   O recuo é `padding-left` no filho e não `margin`: o `min-width: 0` da pilha
   é o que impede a parte mais longa de empurrar o cartão para fora e criar
   rolagem lateral na página, e uma margem negativa ou um deslocamento
   fariam o trilho sair da coluna de 380px. */
.rp-parte--raiz .rp-parte__rotulo { font-weight: 700; color: var(--exp-ink); }

.rp-parte--resposta {
  padding-left: 12px;
  border-left: 2px solid var(--exp-line);
}

/* Por que a notícia virou fio (ou não). O servidor grava o motivo numa coluna
   para que ele sobreviva à releitura; aqui ele fica ACIMA das partes, antes
   do texto que explica — é a primeira coisa que a pessoa lê no rascunho. */
.rp-formato {
  display: flex; align-items: flex-start; gap: 6px; margin: 0;
  font-size: 12px; line-height: 1.4; color: var(--exp-muted); overflow-wrap: anywhere;
}
.rp-formato svg { flex: 0 0 auto; margin-top: 1px; color: var(--exp-accent); }
.rp-formato strong { color: var(--exp-ink); font-weight: 600; }

/* "Quero em fio" / "Quero em post único": sozinho na linha, e menos pesado
   que Aprovar — ele custa uma chamada ao modelo, mas não decide nada. */
.rp-outra-versao { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; }
.rp-item--compacto .rp-outra-versao { min-height: 30px; font-size: 11px; }

/* -------------------------------------------------------------- o horário */

.rp-horario { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--exp-ink); }
.rp-horario svg { flex: 0 0 auto; color: var(--exp-muted); }

/* --------------------------------------------------------------- as ações */

.rp-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-acoes button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 14px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; }
.rp-acoes button[disabled] { opacity: .55; cursor: progress; }

.rp-conectar { justify-self: start; min-height: 34px; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; }
.rp-conectar[hidden] { display: none; }

.rp-recado { display: block; margin: 0; font-size: 12px; color: var(--exp-muted); }
.rp-recado:empty { display: none; }
.rp-recado--andando { color: var(--exp-muted); }
.rp-recado--feito { color: #1a7f45; }
.rp-recado--recusa { color: #c02626; }

/* ------------------- a lista de fontes (Agenda, no fim do painel da pauta) */

.rp-fontes { padding: 12px 14px 16px; border-top: 1px solid var(--exp-line); scroll-margin-top: 72px; }
.rp-fontes:focus { outline: none; }
.rp-fontes:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: -2px; }
.rp-fontes__topo { display: grid; gap: 2px; }
.rp-fontes__topo h3 { margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--exp-ink); }
.rp-fontes__conta { font-size: 12px; color: var(--exp-muted); }
.rp-fontes__lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.rp-fonte-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 10px 0; border-top: 1px solid var(--exp-line);
}
.rp-fonte-linha:first-child { border-top: 0; }
.rp-fonte-linha__nome { display: grid; gap: 2px; min-width: 0; }
.rp-fonte-linha__nome b { font-size: 14px; font-weight: 600; color: var(--exp-ink); overflow-wrap: anywhere; }
.rp-fonte-linha__nome small { font-size: 12px; color: var(--exp-muted); }
.rp-fonte-linha .rp-recado { grid-column: 1 / -1; }

/* O interruptor: um botão com role="switch". O estado visível segue
   aria-checked, que é o mesmo estado que o leitor de tela anuncia. */
.rp-interruptor {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 4px 6px; border: 0; border-radius: 999px; background: none;
  color: var(--exp-muted); font: inherit; font-size: 12px; cursor: pointer;
}
.rp-interruptor__trilho {
  position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
  background: var(--exp-line); transition: background-color .15s ease;
}
.rp-interruptor__botao {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--exp-paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.rp-interruptor__rotulo { min-width: 64px; text-align: left; }
.rp-interruptor[aria-checked="true"] { color: var(--exp-ink); }
.rp-interruptor[aria-checked="true"] .rp-interruptor__trilho { background: var(--exp-accent); }
.rp-interruptor[aria-checked="true"] .rp-interruptor__botao { transform: translateX(16px); }
.rp-interruptor:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 2px; }
.rp-interruptor[disabled] { opacity: .55; cursor: progress; }

/* "Publicar com a foto": o mesmo interruptor, no cartão que tem miniatura.
   `display` explícito derrotaria o `hidden` da miniatura que falhou — então o
   `[hidden]` é dito de novo aqui, como na figura. */
.rp-com-foto { justify-self: start; }
.rp-com-foto .rp-interruptor__rotulo { min-width: 0; }
.rp-com-foto[hidden] { display: none; }

.rp-nota { margin: 10px 0 0; font-size: 12px; color: var(--exp-muted); }

/* ------------------------- o interruptor da escrita automática (25/09/2026)

   Pedido do dono: "tá fazendo muita chamada na API lá no pautas; seria bom um
   botão para não ficar fazendo chamada e eu não usando; tá gastando tudo".
   O botão mora na segunda linha do cabeçalho do painel e é a cópia visual do
   interruptor das fontes, com o estado em `aria-pressed` (é um botão de
   alternância de uma preferência da empresa, não um switch de uma linha).
   `display: flex` na caixa derrotaria o `hidden` de quando a pauta não diz o
   estado — então o `[hidden]` é dito de novo, como na miniatura. */
.rp-automatica { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.rp-automatica[hidden] { display: none; }
.rp-automatica__botao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 4px 6px; border: 0; border-radius: 999px; background: none;
  color: var(--exp-muted); font: inherit; font-size: 12px; cursor: pointer;
}
.rp-automatica__trilho {
  position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
  background: var(--exp-line); transition: background-color .15s ease;
}
.rp-automatica__ponto {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--exp-paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.rp-automatica__rotulo { text-align: left; }
.rp-automatica__botao[aria-pressed="true"] { color: var(--exp-ink); }
.rp-automatica__botao[aria-pressed="true"] .rp-automatica__trilho { background: var(--exp-accent); }
.rp-automatica__botao[aria-pressed="true"] .rp-automatica__ponto { transform: translateX(16px); }
.rp-automatica__botao:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 2px; }
.rp-automatica__botao[disabled] { opacity: .55; cursor: progress; }
.rp-automatica .rp-recado { flex: 1 1 100%; }

/* "Escrita automática desligada. Nada é gasto até você pedir." — o molde do
   aviso da máquina, em tinta cheia: é o estado do painel, não uma nota. */
.rp-aviso-desligada {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--exp-ink);
}
.rp-aviso-desligada svg { flex: 0 0 auto; color: var(--exp-accent); }

/* "Escrever este": o molde de "quero a outra versão" — custa UMA chamada e
   não decide nada, por isso é menos pesado que Aprovar. */
.rp-escrever-este { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; }
.rp-escrever-este[disabled] { opacity: .55; cursor: progress; }
.rp-item--compacto .rp-escrever-este { min-height: 30px; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .rp-interruptor__trilho, .rp-interruptor__botao, .rp-automatica__trilho, .rp-automatica__ponto, .rp-alca { transition: none; }
}

/* ------------------------------------------------------------ tela estreita */

/* ENTRE 981 E 1391px: os dois não cabem lado a lado, e quem tem de aparecer
   inteiro é o CALENDÁRIO. O painel sai da grade e vira gaveta na borda
   direita, por cima — o calendário volta a ocupar toda a largura útil (941px
   em 981, 1224 em 1280: sempre acima dos 910 da grade) e a pauta continua a
   um clique da alça.

   Nesta faixa ela nasce ABERTA (radar-pauta.js). Já nasceu fechada, porque o
   padrão da primeira visita usava o corte das duas colunas (1392); mas quem
   sai da grade não encolhe o mês — medido em 1280, aberta e fechada dão o
   mesmo calendário de 1224px, sem rolagem de lado nas duas. Fechada, o dono
   abria a Agenda em 1280 e não via pauta nenhuma, só a alça deitada. A gaveta
   cobre os últimos 352px do mês e sai num clique no ×, que é sticky e está
   sempre na tela; o mês inteiro está embaixo, não cortado.

   A gaveta começa abaixo da barra do topo, não em cima dela.

   A largura mora numa variável para o número ser escrito uma vez só. Aqui ela
   é 380px cravados — o `min(…, 100vw-40px)` do modo tela-cheia não tem o que
   fazer numa faixa que começa em 981. */
@media (min-width: 981px) and (max-width: 1391.98px) {
  .op-agenda-com-pauta--aberta { --rp-gaveta: 380px; grid-template-columns: minmax(0, 1fr); }
  .op-agenda-com-pauta--aberta .rp-lateral {
    position: fixed; top: var(--rp-barra); right: 0; bottom: 0; left: auto;
    width: var(--rp-gaveta); max-height: none; z-index: 40;
    border-right: 0; border-radius: 12px 0 0 0;
  }
  /* COM A GAVETA ABERTA A ALÇA SOME. Quem fecha é o × do cabeçalho e o Esc.
     A tentativa anterior foi encostá-la na borda ESQUERDA da gaveta
     (`right: var(--rp-gaveta)`), para tirá-la de cima do painel — presa em
     `right: 0` ela ficava POR CIMA da gaveta (z-index 41 contra 40) e comia
     os últimos 12px de quem estava embaixo: clicar na beira do rascunho, do
     "Escrever o texto" ou do link da manchete FECHAVA a pauta. Só que isso
     consertou um lado e estragou o outro — deitada, fixa e no meio da altura,
     a alça passou a cair EM CIMA DO CALENDÁRIO. Medido em 1280 com a pauta
     aberta: alça em [861,397,39,106] e o botão `Agendar publicação em
     2026-09-04` em [873,418,20,40], inteiro dentro dela; `elementFromPoint`
     no centro do botão devolvia a alça, e o clique fechava a pauta em vez de
     abrir o agendamento. Pior: a alça é fixa e o calendário rola, então a
     zona morta ANDAVA — em scrollY 400 quem perdia o `+` era o dia 25.
     Não há terceiro lugar. A gaveta é fixa por cima do calendário, então
     qualquer coluna de 39px ou está sobre o painel ou está sobre o mês. É o
     mesmo beco sem saída de ≤980px, e a saída é a que já foi escolhida lá:
     enquanto a gaveta está aberta a alça não faz falta — o painel está à
     vista e o × dele é grudado no alto (`.rp-lateral__topo` é sticky dentro
     de um painel `fixed`), sempre na tela, por mais que o mês role.
     Some só enquanto ABERTA: `aplicar()` tira a classe da moldura ANTES de
     devolver o foco, então a alça já voltou quando o foco vai procurá-la. */
  .op-agenda-com-pauta--aberta .rp-alca { display: none; }
}

/* Sem largura para duas colunas, a pauta aberta cobre a tela inteira, com o
   botão de fechar no alto e a alça na borda. */
@media (max-width: 980px) {
  .op-agenda-com-pauta--aberta { grid-template-columns: minmax(0, 1fr); }
  .op-agenda-com-pauta--aberta .rp-lateral {
    position: fixed; inset: 0; z-index: 40; max-height: none; border: 0; border-radius: 0;
  }
  /* AQUI O PAINEL É A TELA INTEIRA, e não há borda de gaveta onde encostar a
     alça: qualquer lugar em que ela ficasse seria por cima do conteúdo — e
     era, comendo os mesmos 12px do rascunho e do "Escrever o texto" que a
     gaveta sofria (medido em 700 e em 900). Com o painel aberto ela sai da
     tela: quem fecha é o × do cabeçalho, que é grudado no alto do painel e
     está sempre à vista, e o Esc. Some só enquanto ABERTA — `aplicar()` tira
     a classe da moldura ANTES de devolver o foco, então a alça já está de
     volta quando o foco a procura. */
  .op-agenda-com-pauta--aberta .rp-alca { display: none; }
  /* No casco sem tema a navegação é um rodapé fixo de 70px: o painel para nele. */
  body:not([data-op-tema]) .op-agenda-com-pauta--aberta .rp-lateral { bottom: 70px; }
}

@media (max-width: 560px) {
  .rp-item { padding: 12px; }
  .rp-manchete { font-size: 15px; }
  .rp-acoes button { flex: 1 1 auto; justify-content: center; }
  .rp-interruptor__rotulo { min-width: 0; }
}

/* ------------------------------------------------------ o assunto da pauta */

/* "Pauta de Economia, deduzida de 100 posts…" e o "Ajustar" que abre os cinco
   assuntos. Tudo por classe: a página não aceita atributo de estilo. */
.rp-assunto {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--exp-ink);
}
.rp-assunto svg { flex: 0 0 auto; margin-top: 2px; color: var(--exp-accent); }
.rp-assunto__frase { flex: 1 1 200px; min-width: 0; }
.rp-assunto__ajustar { flex: 1 1 100%; min-width: 0; }
.rp-assunto__ajustar summary { cursor: pointer; color: var(--exp-muted); font-size: 12px; }
.rp-assunto__opcoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rp-assunto__opcao { min-height: 32px; padding: 4px 12px; border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; }
.rp-assunto__opcao--atual { border-color: var(--exp-accent); color: var(--exp-accent); font-weight: 600; }
.rp-sem-assunto .rp-assunto__opcoes { justify-content: center; }
.rp-sem-assunto__ou { margin: 12px 0 0; font-size: 12px; color: var(--exp-muted); }
/* O nome do nicho da conta no Ajustar (27/09/2026): uma linha, não a caixa do post. */
.rp-assunto__ajustar input.rp-texto { min-height: 0; margin-top: 6px; }

/* A LINHA DE ESTADO DENTRO DO PAINEL EMPILHA (27/09/2026). O `.op-radar-not-measured`
   vem do Radar antigo, que era uma tela larga: flex em LINHA (langris.css), com o
   título sem encolher e o botão sem quebrar — e só vira coluna abaixo de 650px de
   JANELA. Só que o painel da pauta tem 320–380px em qualquer janela. Medido na
   bancada, em 1280, 1440 e 1920 (painel de 380px): a frase do "ESPERANDO O ASSUNTO"
   ficava com 66px de largura, uma palavra por linha, 15 linhas; o "Reconectar o
   Instagram" saía cortado na borda; e o "Ou escolha o assunto:" com os cinco botões
   ficava inteiro FORA do painel — o dono não tinha onde clicar em "Tecnologia".
   Aqui ela empilha como já empilhava no celular: título, frase na largura toda,
   botão, "Ou escolha o assunto:" e as opções quebrando linha. Vale para toda linha
   de estado da pauta (o "COLETA AINDA NÃO COMEÇOU", o "NENHUMA FONTE LIGADA" com o
   "Ver as fontes" tinham o mesmo defeito) e para a escolha de assunto onde ela
   estiver. FICA AQUI, FORA DE QUALQUER @media, e um teste cobra isso: é o painel que
   é estreito, não a janela. */
.rp-lateral .op-radar-not-measured,
.op-radar-not-measured.rp-sem-assunto { flex-direction: column; align-items: flex-start; }
.rp-lateral .op-radar-not-measured > *,
.op-radar-not-measured.rp-sem-assunto > * { max-width: 100%; }
/* O título da linha de estado sai em maiúsculas por aqui (lote C3 de docs/arquitetura/idiomas.md):
   no JS ele é frase em caixa normal, que é o msgid. Só o PRIMEIRO span: na escolha de assunto,
   as opções e o recado (`.rp-recado`) também são spans filhos e seguem na caixa deles. Nenhum
   tema fala de text-transform neste span. */
.rp-nao-medido > span:first-child { text-transform: uppercase; }

/* O seletor de conta da pauta. Uma fileira de @, como o filtro da Agenda — mas
   com o nome escrito, porque aqui o servidor não manda avatar e inventar
   inicial faria @agro e @agrobr virarem a mesma letra. */
.rp-contas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.rp-contas__item {
  padding: 4px 10px; border: 1px solid var(--exp-line); border-radius: 999px;
  background: transparent; color: var(--exp-muted); font: inherit; font-size: 12px;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.rp-contas__item:hover { background: var(--surface-soft); }
.rp-contas__item.ativo { background: var(--exp-accent-soft); border-color: var(--exp-accent); color: var(--exp-accent-text); }

/* ── Agenda: conclusão (26/09/2026) ───────────────────────────────────────
 *
 * A pauta no celular (estática, embaixo da lista, sem alça e sem ×), o anel
 * do cartão em destaque que vence o cobalto, o bloco da arte e da
 * biblioteca, a confirmação de ligar a escrita automática e o aviso do que
 * gasta. A media query do celular é LETRA POR LETRA a de `CELULAR` em
 * radar-pauta.js (e a de operacao-redesenho.css): um teste cobra as três.
 * Nada de style= no HTML: tudo por classe e pelo atributo `hidden`. */

/* O que só existe com texto (o "Aprovar", a foto e a arte do cartão escrito à
   mão) nasce `hidden`, e o `hidden` vence o display dos botões do tema. */
.rp-item [hidden] { display: none !important; }

/* O cartão em destaque: o anel fica até a pessoa aprovar ou descartar, e vence
   a borda que operacao-cobalto.css (que carrega depois) põe em todo .rp-item. */
.rp-item.rp-item--destaque,
body.produto-operacional[data-op-tema] .rp-item.rp-item--destaque {
  border-color: var(--exp-accent);
  box-shadow: 0 0 0 2px var(--exp-accent);
}
body.produto-operacional[data-op-tema] .rp-item.rp-item--destaque .rp-avulsa { color: var(--exp-accent-text, var(--exp-accent)); }

/* O aviso do que gasta, logo abaixo do botão que pede texto à máquina. */
.rp-pedido { display: grid; gap: 4px; justify-items: start; }
.rp-gasto { color: var(--exp-muted); font-size: 11px; line-height: 1.35; }

/* Ligar afeta a empresa inteira e passa a consumir o limite diário. A decisão
   sai da gaveta estreita e usa o modal acessível compartilhado; assim a Pauta
   não salta de tamanho e a consequência recebe foco sem virar uma tela pesada. */
body.produto-operacional[data-op-tema] .modal__caixa--automatica {
  width: min(456px, calc(100vw - 32px)); max-width: 456px; max-height: min(620px, calc(100dvh - 32px));
  padding: 24px; overflow-y: auto; border-radius: 20px;
  animation: rp-automatica-modal-entrar .22s cubic-bezier(.2,.8,.2,1) both;
}
.rp-automatica-dialogo { display: grid; gap: 0; }
body.produto-operacional[data-op-tema] .rp-automatica-dialogo > h2 {
  margin: 7px 0 10px; color: var(--exp-ink); font-family: inherit;
  font-size: clamp(22px, 3vw, 24px); font-weight: 650; line-height: 1.14; letter-spacing: -.035em;
}
body.produto-operacional[data-op-tema] .rp-automatica-dialogo > p:not(.rp-automatica-dialogo__erro) {
  max-width: none; margin: 0; color: var(--exp-muted); font-size: 14px; line-height: 1.55;
}
.rp-automatica-dialogo__limite {
  display: grid; gap: 3px; margin-top: 18px; padding: 13px 14px;
  border: 1px solid var(--exp-line); border-radius: 12px; background: var(--exp-surface);
}
.rp-automatica-dialogo__limite strong { color: var(--exp-ink); font-size: 13px; font-weight: 650; }
.rp-automatica-dialogo__limite span { color: var(--exp-muted); font-size: 12px; line-height: 1.4; }
.rp-automatica-dialogo__erro {
  margin: 12px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--erro, #d65368) 35%, transparent);
  border-radius: 10px; background: color-mix(in srgb, var(--erro, #d65368) 8%, transparent);
  color: var(--erro, #b4233b); font-size: 12px; line-height: 1.45;
}
.rp-automatica-dialogo__erro[hidden] { display: none; }
.rp-automatica-dialogo__acoes { margin-top: 22px; }
body.produto-operacional[data-op-tema] .rp-automatica-dialogo__acoes button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--rp-automatica-botao-altura, 44px);
  padding: 9px 16px; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 620; cursor: pointer;
}
.rp-automatica-dialogo[aria-busy="true"] [data-pauta-automatica-confirmar]::before {
  content: ''; width: 13px; height: 13px; margin-right: 8px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: rp-automatica-girar .7s linear infinite;
}
body.produto-operacional > .modal:has(> .modal__caixa--automatica) {
  animation: rp-automatica-veu-entrar .18s ease-out both;
}
body.produto-operacional:has(> .modal > .modal__caixa--automatica) { overflow: hidden; }
@keyframes rp-automatica-modal-entrar { from { opacity: 0; transform: translateY(8px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes rp-automatica-veu-entrar { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-automatica-girar { to { transform: rotate(1turn); } }

@keyframes rp-automatica-folha-entrar { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.produto-operacional > .modal:has(> .modal__caixa--automatica),
  body.produto-operacional[data-op-tema] .modal__caixa--automatica,
  .rp-automatica-dialogo[aria-busy="true"] [data-pauta-automatica-confirmar]::before { animation: none !important; }
}
body.sem-movimento > .modal:has(> .modal__caixa--automatica),
body.sem-movimento .modal__caixa--automatica,
body.sem-movimento .rp-automatica-dialogo[aria-busy="true"] [data-pauta-automatica-confirmar]::before { animation: none !important; }

body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-automatica-dialogo__erro {
  border-color: color-mix(in srgb, var(--lg-erro) 33%, transparent);
  background: color-mix(in srgb, var(--lg-erro) 7%, transparent);
  color: var(--lg-erro-texto);
}

/* "A pauta não respondeu" com "Tentar de novo". */
.rp-erro button { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 34px; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; }

/* A arte no post: a arte pronta, a escolhida no lugar da foto, e a biblioteca. */
.rp-arte { display: grid; gap: 8px; }
.rp-arte__pronta {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "mini rotulo" "mini botao";
  align-items: center; gap: 4px 10px; padding: 8px; border: 1px solid var(--exp-line); border-radius: 10px;
}
.rp-arte__pronta[hidden] { display: none; }
.rp-arte__mini { grid-area: mini; display: block; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--exp-paper); }
.rp-arte__rotulo { grid-area: rotulo; color: var(--exp-ink); font-size: 12px; font-weight: 600; }
.rp-arte__usar, .rp-arte__tirar {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 32px; padding: 6px 12px;
  border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer;
}
.rp-arte__usar { grid-area: botao; }
.rp-miniatura.rp-miniatura--arte { position: relative; height: auto; min-height: 64px; box-shadow: 0 0 0 2px var(--exp-accent); }
.rp-miniatura--arte .rp-miniatura__img { height: 64px; }
.rp-miniatura__rotulo {
  display: block; padding: 3px 6px; background: var(--exp-accent); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; text-align: center;
}
.rp-biblioteca summary { cursor: pointer; color: var(--exp-muted); font-size: 12px; }
.rp-biblioteca__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; margin-top: 8px; }
.rp-biblioteca__item {
  aspect-ratio: 1; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--exp-line); border-radius: 8px;
  background: var(--exp-paper); cursor: pointer;
}
.rp-biblioteca__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rp-biblioteca__item--atual { border-color: var(--exp-accent); box-shadow: 0 0 0 2px var(--exp-accent); }
.rp-biblioteca__item:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 2px; }

/* NO CELULAR a pauta é parte da página: aberta, estática, embaixo da lista do
   dia. Sem gaveta, sem tela cheia, sem alça (que cobria o botão do mês) e sem ×. */
@media (max-width: 640px) {
  body.produto-operacional > .modal:has(> .modal__caixa--automatica) { align-items: flex-end; padding: 8px 8px 0; }
  body.produto-operacional[data-op-tema] > .modal > .modal__caixa.modal__caixa--automatica {
    width: 100%; max-width: none; max-height: calc(100dvh - 12px);
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; animation-name: rp-automatica-folha-entrar;
    --rp-automatica-botao-altura: 48px;
  }
  body .rp-alca, body .rp-lateral__fechar { display: none; }
  body .op-agenda-com-pauta, body .op-agenda-com-pauta--aberta { grid-template-columns: minmax(0, 1fr); }
  body .op-agenda-com-pauta .rp-lateral,
  body .op-agenda-com-pauta--aberta .rp-lateral,
  body:not([data-op-tema]) .op-agenda-com-pauta--aberta .rp-lateral {
    position: static; inset: auto; width: auto; max-height: none; overflow: visible; z-index: auto;
    margin-top: 16px; border: 1px solid var(--exp-line); border-radius: 12px;
  }
  /* Aberta sempre, mesmo se a página foi desenhada numa largura em que estava fechada. */
  body .op-agenda-com-pauta .rp-lateral[hidden] { display: block; }
  body .op-agenda-com-pauta .rp-lateral__topo { position: static; }
  body .rp-item.rp-item--destaque { box-shadow: 0 0 0 2px var(--exp-accent); }
}
/* A chave acima fecha o celular. A fusão 7c7fe80 (26/09) a perdeu, e tudo daqui até
   o fim do arquivo passou a valer só até 640px: o escuro da pauta e a Pele Pulso da
   Agenda inteira sumiam no computador. Um teste conta as chaves desta folha. */

/* ------------------------------------------------ tema escuro (26/09/2026)

   Pedido do dono: "deixa tudo escuro como padrão". As cores acima vêm de
   --exp-*, que o tema troca sozinho — menos estas, que foram escritas pensando
   no claro e, no escuro, somem ou ficam abaixo do mínimo de leitura (medido na
   bancada, painel #0d0d0d e cartão #151515). Tudo aqui vale SÓ no escuro: o
   claro fica exatamente como estava. Os tokens são os da identidade
   (identidade-cobalto.css); o valor depois da vírgula é o mesmo do escuro de
   lá, para o caso de a folha da identidade não estar na página.

   OS INTERRUPTORES DESLIGADOS. A bolinha era var(--exp-paper), que no escuro
   é quase preta (#050505), sobre um trilho #333: 1,61 entre os dois, e o
   trilho a 1,54 do painel — o "Escrita automática · desligada", o controle de
   não gastar, praticamente não aparecia. Agora o trilho desligado é a
   superfície suave com um fio de contorno (--line-strong, 4,3 contra o painel)
   e a bolinha é cinza-clara (8,2 contra o trilho); ligado, o trilho continua
   cobalto — a regra de aria-checked/aria-pressed acima vence esta pela
   especificidade — sem o contorno cinza, e a bolinha fica branca (4,9). */
body[data-op-tema="escuro"] .rp-interruptor__trilho,
body[data-op-tema="escuro"] .rp-automatica__trilho {
  background: var(--exp-soft, var(--surface-soft, #202020));
  box-shadow: inset 0 0 0 1px var(--line-strong, #777777);
}
body[data-op-tema="escuro"] .rp-interruptor__botao,
body[data-op-tema="escuro"] .rp-automatica__ponto { background: var(--exp-muted, #b8b8b8); }
body[data-op-tema="escuro"] .rp-interruptor[aria-checked="true"] .rp-interruptor__trilho,
body[data-op-tema="escuro"] .rp-automatica__botao[aria-pressed="true"] .rp-automatica__trilho { box-shadow: none; }
body[data-op-tema="escuro"] .rp-interruptor[aria-checked="true"] .rp-interruptor__botao,
body[data-op-tema="escuro"] .rp-automatica__botao[aria-pressed="true"] .rp-automatica__ponto { background: var(--exp-ink, #f4f4f4); }

/* Texto em cobalto puro (#2357ff) fica a 3,37 do cartão escuro: o "Escrever
   o texto" passa ao cobalto de texto, o mesmo da alça aberta e da conta
   ativa. */
body[data-op-tema="escuro"] .rp-escrever summary { color: var(--exp-accent-text, #9eb8ff); }

/* Vermelho e verde fixos do claro: 3,08 e 3,62 no cartão escuro. */
body[data-op-tema="escuro"] .rp-recado--recusa,
body[data-op-tema="escuro"] .rp-contador--estourado { color: var(--danger, #ffa6aa); }
body[data-op-tema="escuro"] .rp-recado--feito { color: var(--ok, #88d6ac); }

/* A inicial branca da fonte sem logo ficava a 1,7–2,5 do degradê claro nos
   tons amarelos e verdes. O mesmo degradê, mais escuro: no pior tom (60, o
   amarelo) o branco fica a 4,75 do começo e a 6,3 do meio. A <img> do logo,
   quando carrega, continua por cima. */
body[data-op-tema="escuro"] .rp-logo,
body[data-op-tema="escuro"] .rp-logo__img::after {
  background: linear-gradient(145deg, hsl(var(--rp-tom), 55%, 30%), hsl(calc(var(--rp-tom) + 28), 50%, 22%));
}

/* Pele Pulso — Agenda (rebranding de 26/09/2026)

   Pedido do dono: "fazer o rebranding em todas as abas, pra se adaptar às novas
   fontes e cores". A Agenda veste a identidade do Início com os tokens --lg-* da
   casca (operacao-unificada.css). SÓ NO ESCURO: toda regra começa pelo prefixo
   só-escuro e o claro fica exatamente como estava. Só pele — cor, contorno, raio,
   tipografia; a geometria da pauta (.rp-*, os cortes 980/1392 e --rp-barra) não
   muda. Sempre qualificada pelo contêiner (.op-month-panel, .op-agenda-com-pauta,
   .rp-lateral, .op-agenda-contas, .op-schedule-dialog, .op-day-dialog): a lista
   :is() de operacao-unificada.css pesa (0,4,2) até para .op-month-event, e o
   acabamento de operacao-cobalto.css carrega DEPOIS desta folha.
   A casca (painel, botão principal, rótulo, caixa do diálogo) é do G0. */

/* Os neutros do tema (--exp-ink/--exp-muted) passam à tinta e ao apoio do Início
   dentro da Agenda: é assim que horário, cabeçalho do dia e metadados da pauta
   mudam de tom sem uma regra por seletor. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-com-pauta {--exp-ink:var(--lg-tinta);--exp-muted:var(--lg-apoio)}

/* O mês: título com o peso do Início; divisórias suaves dentro da coluna. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-toolbar h2 {font-family:var(--lg-fonte);font-weight:var(--lg-titulo-peso);letter-spacing:-.02em;color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel :is(.op-month-toolbar,.op-month-summary,.op-month-weekdays) {border-bottom-color:var(--lg-linha-suave)}

/* Resumo do mês: número grande em tinta, ícone num selo tingido de 36px (limão, como
   os números do Início); o alerta no par de erro; zero alerta fica neutro. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-summary > span {gap:10px;color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-summary > span b {color:var(--lg-tinta);font-size:21px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-summary > span > svg {box-sizing:border-box;width:36px;height:36px;padding:9px;border:1px solid color-mix(in srgb,var(--lg-limao) 33%,transparent);border-radius:11px;background:color-mix(in srgb,var(--lg-limao) 7%,transparent);color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-summary > span:last-child:not(.alerta) > svg {border-color:var(--lg-linha);background:var(--lg-realce);color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-summary > span.alerta,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-summary > span.alerta b {color:var(--lg-erro)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-summary > span.alerta > svg {border-color:color-mix(in srgb,var(--lg-erro) 33%,transparent);background:color-mix(in srgb,var(--lg-erro) 7%,transparent);color:var(--lg-erro)}

/* Setas do mês em ícone redondo de 40px; "Hoje" no secundário de raio 12, na mesma altura. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-nav > .op-outline {height:40px;padding:0 16px;border-color:var(--lg-linha-forte);border-radius:var(--lg-raio-botao);background:transparent;color:var(--lg-tinta-2)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-nav > .op-outline:hover:not(:disabled) {border-color:var(--lg-linha-forte);background:var(--lg-realce);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-nav > .op-outline:is(:first-child,:last-child) {width:40px;padding:0;border-color:var(--lg-linha);border-radius:50%;background:var(--lg-realce);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-nav > .op-outline:is(:first-child,:last-child):hover:not(:disabled) {border-color:var(--lg-linha-forte);background:var(--lg-realce-2)}

/* A grade: dias sem caixa própria (a coluna aparece por trás), divisórias suaves,
   dias fora do mês um tom abaixo. O .vazio genérico de langris.css vazava para as
   células vazias (tracejado e canto de 12px): no escuro ele sai. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-weekdays {background:transparent}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-weekdays span {border-left-color:var(--lg-linha-suave);color:var(--lg-apoio);font-size:var(--lg-kicker);font-weight:var(--lg-kicker-peso);letter-spacing:.1em}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-day {border-color:var(--lg-linha-suave);background:transparent;color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-day.vazio {border-top-color:transparent;border-right-color:transparent;border-radius:0;background:color-mix(in srgb,var(--lg-fundo) 55%,transparent)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-day > header {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-day > header > span {color:var(--lg-tinta-2);font-weight:600;font-variant-numeric:tabular-nums}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-day > header b {background:var(--lg-realce-2);color:var(--lg-tinta-2);font-weight:650}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-add {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-add:is(:hover,:focus-visible) {border-color:var(--lg-linha-forte);background:var(--lg-realce);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-more {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-more:is(:hover,:focus-visible) {color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-more:hover:not(:focus-visible) {outline-color:transparent}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-empty {color:var(--lg-apoio)}

/* Hoje: bolinha limão com o número na tinta do limão, moldura interna limão. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-day.hoje {background:color-mix(in srgb,var(--lg-limao) 4%,transparent);box-shadow:inset 0 0 0 1px var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-day.hoje > header > span {background:var(--lg-limao);color:var(--lg-sobre-limao);font-weight:700}

/* Os conteúdos do dia (no mês e no diálogo "Agenda do dia"): cartão do Início, um
   contorno só; o estado fica no ícone — publicado limão, publicando violeta, falha
   no par de erro, à espera neutro. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) .op-month-event {border-color:var(--lg-linha-suave);border-left-width:1px;border-radius:var(--lg-raio-campo);background:var(--lg-cartao);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) button.op-month-event:is(:hover,:focus-visible) {border-color:var(--lg-linha-forte);background:var(--lg-cartao-hover);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) button.op-month-event:hover:not(:focus-visible) {outline-color:transparent}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) .op-month-event strong {color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) .op-evento__topo time {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) :is(.op-evento__midia,.op-evento__editavel,.op-evento__estado) {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) .op-evento__estado--ok {color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) .op-evento__estado--ativo {color:var(--lg-violeta-texto)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) .op-evento__estado--erro {color:var(--lg-erro)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-month-panel,.op-day-dialog) button.op-month-event:is(:hover,:focus-visible) .op-evento__editavel {color:var(--lg-limao)}

/* Filtro de contas: o seletor segmentado do Início (trilho em pílula, ativo na
   pílula clara); o avatar escolhido ganha o anel limão no lugar do cobalto. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-contas {border-color: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-agenda-contas .op-agenda-conta {border-radius:var(--lg-raio-pilula);background:transparent;color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-contas .op-agenda-conta:hover {background:var(--lg-realce);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-contas .op-agenda-conta.ativo {background:var(--lg-pilula-ativa);color:var(--lg-sobre-pilula)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-contas .op-agenda-conta.ativo .pv-avatar {box-shadow:0 0 0 2px var(--lg-limao)}

/* A pauta do dia: coluna do Início (degradê, raio 20), cabeçalho em vidro sobre a
   rolagem, cartões #121216 de raio 14 e um contorno só. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral {border-color:var(--lg-linha);border-radius:var(--lg-raio-secao);background:var(--lg-coluna);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-lateral__topo {border-bottom-color:var(--lg-linha);background:var(--lg-vidro);backdrop-filter:blur(12px)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-lateral__topo h2 {font-size:var(--lg-titulo-secao);font-weight:640;letter-spacing:-.01em;color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-lateral__fechar {border-color:var(--lg-linha);border-radius:var(--lg-raio-botao);background:var(--lg-realce);color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-lateral__fechar:is(:hover,:focus-visible) {border-color:var(--lg-linha-forte);background:var(--lg-realce-2);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-item {border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-item);background:var(--lg-cartao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-item--destaque {border-color:var(--lg-limao);box-shadow:0 0 0 2px color-mix(in srgb,var(--lg-limao) 22%,transparent)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-instagram {border-bottom-color:var(--lg-linha);background:color-mix(in srgb,var(--lg-limao) 2%,var(--lg-coluna))}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-ig-conta {border-color:var(--lg-linha);color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-ig-conta.ativo {border-color:color-mix(in srgb,var(--lg-limao) 43%,transparent);background:color-mix(in srgb,var(--lg-limao) 7%,transparent);color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-ig-conta__avatar {background:var(--lg-campo);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-ig-formato {border-color:var(--lg-linha-forte);color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.rp-ig-previa,.rp-ig-legenda textarea,.rp-ig-quando input,.rp-ig-ajuste,.rp-ig-ajuste__grade input) {border-color:var(--lg-linha);background:var(--lg-campo);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-ig-previa--cards li {background:var(--lg-cartao);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-miniatura {background:var(--lg-campo)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-manchete a {text-decoration-color:var(--lg-linha-forte)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-manchete a:is(:hover,:focus-visible) {text-decoration-color:currentColor}

/* A alça: cartão escuro com o ícone limão; aberta, texto e contorno limão. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-com-pauta .rp-alca {border-color:var(--lg-linha);background:var(--lg-cartao);color:var(--lg-tinta);box-shadow:0 6px 20px var(--lg-veu)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-com-pauta .rp-alca svg {color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-com-pauta .rp-alca[aria-expanded="true"] {border-color:color-mix(in srgb,var(--lg-limao) 43%,transparent);color:var(--lg-limao)}

/* Cada azul da pauta vira limão (ação, "ao vivo", escolhido) ou apoio (nota). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral :is(.rp-aviso-maquina,.rp-formato,.rp-aviso-desligada,.rp-assunto) svg {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-aviso-destaque svg {color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-escrevendo {border-color:var(--lg-linha-vazia)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-escrevendo__sinal {background:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-escrever summary {color:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-parte--resposta {border-left-color:var(--lg-linha-forte)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-fontes {border-top-color:var(--lg-linha)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-fonte-linha {border-top-color:var(--lg-linha-suave)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral :is(.rp-contador--estourado,.rp-recado--recusa) {color:var(--lg-erro)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-recado--feito {color:var(--lg-limao)}

/* Interruptores: desligado no poço do campo (o fio #777 do escuro fica), ligado
   com trilho limão e bolinha na tinta do limão. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral :is(.rp-interruptor__trilho,.rp-automatica__trilho) {background:var(--lg-campo)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral :is(.rp-interruptor__botao,.rp-automatica__ponto) {background:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-interruptor[aria-checked="true"] .rp-interruptor__trilho,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-automatica__botao[aria-pressed="true"] .rp-automatica__trilho {background:var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-interruptor[aria-checked="true"] .rp-interruptor__botao,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-automatica__botao[aria-pressed="true"] .rp-automatica__ponto {background:var(--lg-sobre-limao)}

/* "Escrever este", "Quero em fio", "Descartar", "Criar arte", "Conectar": o
   secundário do Início, raio 12 (o principal "Aprovar e agendar" vem do G0). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .op-outline {border-color:var(--lg-linha-forte);border-radius:var(--lg-raio-botao);background:transparent;color:var(--lg-tinta-2)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .op-outline:hover:not(:disabled) {border-color:var(--lg-linha-forte);background:var(--lg-realce);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-assunto__opcao--atual,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-assunto__opcao--atual:hover:not(:disabled) {border-color:color-mix(in srgb,var(--lg-limao) 43%,transparent);background:color-mix(in srgb,var(--lg-limao) 6%,transparent);color:var(--lg-limao)}
/* Os botões da linha de estado ("Reconectar o Instagram", "Conectar", "Ler a conta" e os
   cinco assuntos) herdam o link sublinhado e sem recheio do Radar antigo
   (operacao-unificada.css); dentro da pauta são o secundário, com o texto longe da borda. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .op-radar-not-measured .op-outline {padding-inline:12px;text-decoration:none}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-contas__item {border-color:var(--lg-linha);color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-contas__item:hover {background:var(--lg-realce);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-contas__item.ativo {border-color:color-mix(in srgb,var(--lg-limao) 33%,transparent);background:color-mix(in srgb,var(--lg-limao) 7%,transparent);color:var(--lg-limao)}

/* O campo do rascunho: poço do Início, raio 10, contorno de campo do escuro (#777). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .rp-lateral .rp-texto {border-color:var(--line-strong);border-radius:var(--lg-raio-campo);background:var(--lg-campo);color:var(--lg-tinta)}

/* Celular (até 720px, o corte do resumo em linha em operacao-redesenho.css): selos de 32px e
   sem o recuo à direita de cada número, para os quatro caberem numa linha só em 390px. E o
   "→" do mês ganha margem à direita: a alça, fixa na borda, encostava nele (a alça não muda
   de lugar; é o botão que se afasta dela). */
@media (max-width:720px) {
  body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-summary > span {gap:8px;padding-right:0}
  body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-summary > span > svg {width:32px;height:32px;padding:7px}
  body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-month-panel .op-month-nav > .op-outline:last-child {margin-right:12px}
}

/* O canto da pauta segue a moldura de cada faixa: gaveta com um canto só, tela cheia sem canto. */
@media (min-width:981px) and (max-width:1391.98px) {
  body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-com-pauta--aberta .rp-lateral {border-radius:var(--lg-raio-secao) 0 0 0}
}
@media (max-width:980px) {
  body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-agenda-com-pauta--aberta .rp-lateral {border-radius:0}
}

/* O miolo dos diálogos "Agendar publicação", "Publicação no X" (editar) e "Agenda do
   dia" (a caixa, o título e os campos vêm do G0; as prévias pv-* ficam como estão). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-media-origins {border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-item);background:var(--lg-cartao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-media-origins > small {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-media-origins > span,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-destinos legend,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog :is(.op-dialog__grid > label,.op-caption-editor) > span {color:var(--lg-apoio);font-size:var(--lg-kicker);font-weight:var(--lg-kicker-peso);letter-spacing:.1em;text-transform:uppercase}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-caption-editor > span > b {color:var(--lg-apoio);font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-destinos {border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-item)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-destinos small {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-destino {border-color:var(--lg-linha);border-radius:var(--lg-raio-item);background:var(--lg-cartao);color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-destino:hover {border-color:var(--lg-linha-forte);color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-destino:has(input:checked) {border-color:color-mix(in srgb,var(--lg-limao) 43%,transparent);background:color-mix(in srgb,var(--lg-limao) 6%,var(--lg-cartao));color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-destino:has(input:checked) .pv-avatar {box-shadow:0 0 0 2px var(--lg-limao)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-agendar__previa {border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-item);background:var(--lg-trilho)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-agendar__vazio {color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-dialog__nota {border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-item);color:var(--lg-apoio)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-schedule-dialog .op-dialog__nota strong {color:var(--lg-tinta)}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-editar-x .op-x-editor {border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-item)}
/* Fim Pele Pulso */
.rp-semana{margin:12px 0;padding:14px;border:1px solid var(--border,#ffffff18);border-radius:12px;background:var(--surface,#ffffff04)}
.rp-semana header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rp-semana h3{margin:0;font-size:14px}
.rp-semana p,.rp-semana small{font-size:12px;line-height:1.5;opacity:.8}
.rp-semana__ideia{border-top:1px solid var(--border,#ffffff18);padding:10px 0}
.rp-semana__ideia summary{cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:13px}
.rp-semana__ideia summary small{flex:none;font-size:10px}
.rp-semana__ideia label{display:grid;gap:6px;margin:12px 0;font-size:12px}
.rp-semana__ideia textarea{box-sizing:border-box;width:100%;min-height:120px;resize:vertical;padding:10px;border:1px solid var(--border,#ffffff25);border-radius:8px;background:transparent;color:inherit;font:inherit;line-height:1.55}
.rp-semana__ideia>small{display:block}
.rp-semana__ideia>.op-outline{display:block;margin-top:10px}
.rp-semana__conferir{font-size:12px;line-height:1.5;margin:10px 0}
.rp-semana__conferir ul{margin:6px 0;padding-left:18px}