/* Estilos das telas da Central: Minha rotina e as telas que sairam das
   abas dela (Catalogo, Atendimento, Documentos, Biblioteca de design).
   Ficavam num <style> dentro de central.html; viraram arquivo quando cada
   aba virou tela propria, no card 205. tv-design.css continua sendo a base. */
/* O shell e os componentes vivem em tv-styles.css, sob `body.tv-root`
       (card 091, D3.0). Esta tela não tem estilo próprio. */
    body { min-height: 100vh; }
    /* Cancelar dos modais de edição do Comercial vira vermelho, a pedido da
       Ester. Escopado em `.dlg-acoes` (e não em `button.secondary` do
       tv-styles.css) de propósito: essa classe é global, e recolorir ela
       pintaria também o "Fechar" de telas de leitura e outros secondary que
       não são cancelamento de edição. */
    body.tv-root .dlg-acoes button.secondary { border-color: var(--tv-red); color: var(--tv-red); }
    body.tv-root .dlg-acoes button.secondary:hover { background: var(--tv-tint-erro); }
    .ofertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
    /* A galeria de Documentos reusava `.ofertas` (pensada pro cartão de
       produto: preço, segmento, descrição, dois botões) e cabiam só 3 por
       fileira. O cartão de documento carrega menos coisa — cabe mais
       apertado, a pedido da Ester (5 por fileira). Classe própria pra não
       apertar o cartão de produto do Catálogo, que precisa do espaço. */
    #documentGaleria.ofertas { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 11px; }
    /* A pilha de prateleiras por segmento (card 256) SAIU no card 280: segmento
       virou filtro, e a grade é uma só. O motivo é aritmético — um produto
       atende até quatro segmentos, então uma prateleira por segmento desenhava
       o mesmo cartão quatro vezes. A grade é a `.tv-grade` de tv-styles.css. */
    /* O cartão é BRANCO, e isso é medição, não gosto (card 280): ele estava em
       `--tv-surface-sunken` (#efeaf5) sobre uma página em #f6f3f9, ou seja, mais
       ESCURO que o fundo — figura e fundo invertidos. No desenho ele é branco.
       Vinha do card 256 e nenhuma auditoria pegou, porque a diferença é de 3% de
       luminância e só aparece medindo. */
    .oferta { border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 16px 18px; background: var(--tv-c-surface); }
    /* Clicar no corpo do cartão abre a ficha, como no protótipo. É uma `div`, e
       não um botão: `<button>` só aceita conteúdo de frase, e aqui dentro tem
       título e parágrafo. Quem chega pelo teclado usa o botão "ficha" do rodapé,
       que o protótipo também desenha, e por isso os dois existem. */
    .oferta-abrir { cursor: pointer; }
    .oferta h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.02em; }
    .oferta .faixa { color: var(--tv-c-ink-3); font-size: 13px; }
    .oferta .preco { margin: 10px 0 0; font-size: 15px; font-weight: 500; }
    .oferta .link-venda { font-size: 13px; color: var(--tv-action); }
    .oferta footer { margin-top: 12px; display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; align-items: center; }
    /* Grade e campos do modal vivem em tv-styles.css (`body.tv-root dialog
       form`). Aqui fica só o que é desta tela: tamanho do modal e rolagem. */
    .campos { max-height: 76vh; overflow-y: auto; padding-right: 6px; }
    .dlg-oferta { background: var(--tv-c-surface); color: var(--tv-c-ink); border: 1px solid var(--tv-line-strong); border-radius: var(--tv-radius); padding: 26px 28px; width: min(760px, calc(100vw - 64px)); max-width: none; }
    .dlg-oferta::backdrop { background: rgba(36,26,43,.42); }
    .dlg-oferta h2 { margin: 0 0 4px; }
    .dlg-acoes { display: flex; gap: 8px; justify-content: flex-end; }
    .subgrupo h3 { margin: 22px 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .07em; color: var(--tv-c-ink-2); }
    .subgrupo:first-child h3 { margin-top: 4px; }
    .lista-simples { display: grid; gap: 10px; }
    /* Branco, não a calha — mesma correção medida do card 280 em `.oferta`:
       `--tv-surface-sunken` é mais escuro que a página (`--tv-c-base`), então
       o cartão saía com a figura mais escura que o fundo. */
    .item-simples { border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 12px 14px; background: var(--tv-c-surface); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .item-simples .corpo { display: grid; gap: 4px; }
    .item-simples .corpo strong { font-size: 14px; }
    .item-simples .corpo span { display: block; font-size: 14px; color: var(--tv-c-ink-3); }
    .item-simples footer { display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; column-gap: 8px; align-items: center; flex-shrink: 0; }
    /* Card 278: a etiqueta de momento no topo de cada "cliente diz" e o "em vez"
       das frases proibidas, os dois campos que o protótipo desenha e o banco
       passou a guardar. As cores saem dos tokens (o protótipo usava hex e o card
       249 os capturou iguais): Prevenção verde, Implantação azul, Encaminhamento
       âmbar. */
    .etiqueta-momento { display: inline-block; margin-left: 8px; border-radius: var(--tv-radius-pill); padding: 1px 8px; font-size: 12px; font-weight: 400; vertical-align: middle; }
    .etiqueta-momento.prevencao { color: var(--tv-green); background: var(--tv-tint-ok); }
    .etiqueta-momento.implantacao { color: var(--tv-blue-400); background: var(--tv-tint-info); }
    .etiqueta-momento.encaminhamento { color: var(--tv-amber); background: var(--tv-tint-atencao); }
    /* `.corpo .em-vez` para vencer `.item-simples .corpo span` (0,2,1), que sem
       isso pintaria a linha de ink-3 e comeria o override. */
    .item-simples .corpo .em-vez { color: var(--tv-c-ink-2); }

    /* Card 278, aba Quem atendemos: a triagem rápida (chips + caixa de veredito)
       e as três colunas com faixa de cor no topo. O tom (borda, texto, tint) vem
       das classes .tv-tom-ok/erro/atencao de tv-styles.css, aplicadas na coluna
       e no selo de cada item: Atende verde, Não atende vermelho, Encaminha âmbar. */
    /* Card 350: a orientação geral da triagem, acima da Triagem rápida. Mesmo
       tratamento de caixa que `.triagem` — é o mesmo nível de importância, a
       abertura da aba — mas sem chip nem veredito, só texto corrido. */
    .orientacao { border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 15px 17px 17px; margin-bottom: 20px; background: var(--tv-c-surface); }
    .orientacao h4 { margin: 14px 0 4px; font-family: var(--tv-font-display); font-weight: var(--tv-weight-medium); font-size: 14px; letter-spacing: -.01em; color: var(--tv-c-ink); }
    .orientacao h4:first-child { margin-top: 0; }
    .orientacao p { margin: 0; font-size: 14px; color: var(--tv-c-ink-2); text-wrap: pretty; white-space: pre-line; }
    .triagem { border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 15px 17px 17px; margin-bottom: 20px; background: var(--tv-c-surface); }
    .triagem > h3 { margin: 0 0 11px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tv-c-ink); }
    .triagem-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    /* Contorno no DEGRAU DO MEIO (`--tv-line-campo`, #978aab), não no forte: o
       card 243 mediu que o forte desenha borda pesada demais em caixa pequena, e
       o #e2dbea do desenho não passa em contraste. Chip é controle pequeno.
       O tamanho é o da régua nova do card 297, um degrau acima do que a folha
       desenha — a escala do ERP vale sobre a medida do protótipo. */
    .triagem-chip { border: 1px solid var(--tv-line-campo); border-radius: var(--tv-radius-pill); padding: 5px 12px; background: var(--tv-c-surface); color: var(--tv-c-ink-2); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
    .triagem-chip:hover { border-color: var(--tv-blue-400); }
    .triagem-chip[aria-pressed="true"] { border-color: var(--tv-blue-400); background: var(--tv-tint-info); color: var(--tv-blue-300); }
    .triagem-veredito { margin-top: 13px; padding: 13px 15px; border-radius: 10px; border: 1px solid var(--tv-tom); background: var(--tv-tom-tint); }
    .triagem-veredito .cabeca { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .triagem-veredito .rotulo { font-weight: 500; font-size: 15px; color: var(--tv-tom-texto); }
    .triagem-veredito .nome { font-size: 14px; color: var(--tv-c-ink); }
    .triagem-veredito p { margin: 8px 0 0; font-size: 14px; color: var(--tv-c-ink); }
    .triagem-veredito .passo { margin-top: 7px; font-size: 13px; color: var(--tv-c-ink-2); }
    /* Card 350: `auto-fit` quebrava para 2 colunas em telas mais estreitas, e
       "Atende" (5 itens) termina bem antes de "Não atende" (6 itens) — a
       terceira coluna (Encaminha) caía numa segunda linha, abrindo um vão
       enorme embaixo da coluna mais curta. Com a descrição curta de antes a
       diferença de altura era pequena e ninguém via; o texto completo tornou
       o buraco grande e visível. Três colunas FIXAS nunca quebram linha —
       ficam mais estreitas em tela menor, mas as três continuam lado a lado. */
    .colunas-escopo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; align-items: start; }
    .coluna-escopo { border: 1px solid var(--tv-line); border-top: 3px solid var(--tv-tom); border-radius: 11px; padding: 14px 15px 15px; background: var(--tv-c-surface); }
    .coluna-escopo > header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
    .coluna-escopo > header h3 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tv-tom-texto); }
    .coluna-escopo > header .n { font-size: 12px; color: var(--tv-c-ink-3); font-variant-numeric: tabular-nums; }
    /* Card 350: o `title` do `<h3>` (card 344) continua sendo o resumo do
       repouso do mouse; isto é o texto completo de "como interpretar o
       status", sempre visível — maior do que cabe num tooltip. */
    .coluna-legenda { margin: 0 0 10px; font-size: 13px; color: var(--tv-c-ink-2); text-wrap: pretty; white-space: pre-line; }
    .coluna-itens { display: flex; flex-direction: column; gap: 8px; }

    /* Card 344: o cartão de um segmento é PEÇA PRÓPRIA, e não mais o
       `article.oferta` do Catálogo. Aquele é cartão de produto — título de
       17px, `<dl>` com o rótulo "Descrição" antes do texto, rodapé de botões —
       e a folha desenha uma caixa compacta: nome e selo na mesma linha,
       descrição em parágrafo solto. `--tv-c-item` (#fdfbfe) e `--tv-line-soft`
       (#f0ebf5) são exatamente os dois valores do desenho.
       O nome cresce e empurra selo, rascunho e o menu para a direita. */
    .escopo-item { background: var(--tv-c-item); border: 1px solid var(--tv-line-soft); border-radius: 9px; padding: 10px 11px; }
    .escopo-cab { display: flex; align-items: center; gap: 8px; }
    .escopo-nome { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: var(--tv-weight-medium); color: var(--tv-c-ink); text-wrap: pretty; }
    .escopo-cab .tv-chip { flex: 0 0 auto; }
    /* Card 346: `pre-line` porque o dado SEMPRE teve as quebras — medido no
       cartão da ILPI em produção, o `innerHTML` trazia os parágrafos inteiros e
       o CSS os colapsava. E 14px, não 13px: é texto de leitura, e a régua do
       card 297 manda 14px. Com `pre-line`, `text-wrap: pretty` continua valendo
       dentro de cada linha. */
    .escopo-desc { margin: 5px 0 0; font-size: 14px; color: var(--tv-c-ink-2); text-wrap: pretty; white-space: pre-line; }
    /* Card 350: o texto novo trouxe sinais de atenção e a linha de "Ação do
       comercial" atrás do primeiro parágrafo. `.escopo-detalhe` some por
       CLASSE (nunca só `[hidden]` — perde para `body.tv-root`, já mordeu três
       vezes nesta casa) e só ganha `display: block` com `--aberto`. */
    .escopo-mais { margin: 6px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--tv-action); cursor: pointer; }
    .escopo-mais:hover { text-decoration: underline; }
    .escopo-detalhe { display: none; margin-top: 6px; }
    .escopo-detalhe.escopo-detalhe--aberto { display: block; }

    /* Card 344, aba Objeções: GRADE de cartões, não pilha de linhas. Era uma
       coluna de `.item-simples` de largura inteira; a folha desenha
       `repeat(auto-fill, minmax(360px,1fr))`, com a objeção em Sora na primeira
       linha e a conduta em parágrafo embaixo. O guard de frases nunca veria
       isso: ele compara texto e não olha se a lista virou grade. */
    .objecoes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 11px; align-items: start; }
    .objecao-card { background: var(--tv-c-surface); border: 1px solid var(--tv-line); border-radius: 11px; padding: 13px 15px 14px; }
    .objecao-cab { display: flex; align-items: center; gap: 9px; }
    /* `body.tv-root` no começo de todo seletor que termina em ELEMENTO, e isso
       é medida: `body.tv-root h2` pesa (0,1,2) e ganhava de `.proibidas-painel
       > h2`, que pesa (0,1,1). Os três `h2` novos saíam em 21px com 15px
       escrito na regra — válida, e sem pintar nada. É a armadilha dos cards
       230, 242 e 243. Os `h3` acertavam por sorte, porque hoje não existe
       `body.tv-root h3` com tamanho; vão junto para não dependerem disso. */
    body.tv-root .objecao-cab h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--tv-font-display); font-weight: var(--tv-weight-medium); font-size: 15px; letter-spacing: -.01em; color: var(--tv-c-ink); text-wrap: pretty; }
    .objecao-cab .tv-chip, .objecao-cab button { flex: 0 0 auto; }
    .objecao-conduta { margin: 8px 0 0; font-size: 14px; color: var(--tv-c-ink); text-wrap: pretty; white-space: pre-line; }

    /* Card 344, aba Nunca prometer: UM painel, e não uma frase por cartão. Era
       sete `.item-simples` soltos, cada um com traço vermelho próprio; a folha
       põe tudo dentro de uma seção de 820px com o traço na borda dela. O "em
       vez" volta para a mesma linha da frase, empurrado à direita, em vez de
       virar segunda linha com o prefixo "Em vez:". */
    .proibidas-painel { max-width: 820px; background: var(--tv-c-surface); border: 1px solid var(--tv-tint-erro); border-left: 3px solid var(--tv-red); border-radius: 11px; padding: 15px 17px 17px; }
    body.tv-root .proibidas-painel > h2 { margin: 0 0 12px; font-family: var(--tv-font-display); font-weight: var(--tv-weight-medium); font-size: 15px; letter-spacing: -.01em; color: var(--tv-red); }
    .proibidas-lista { display: flex; flex-direction: column; gap: 7px; }
    .proibida-linha { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--tv-tint-erro); border-radius: 9px; background: var(--tv-tint-erro); }
    .proibida-linha .frase-marca { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--tv-red-soft); color: var(--tv-c-on-dark); font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; }
    .proibida-frase { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--tv-red); text-wrap: pretty; }
    .proibida-lado { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
    .proibida-em-vez { font-size: 13px; color: var(--tv-c-ink-2); text-wrap: pretty; }

    /* Card 399: as perguntas de consulta rápida usam o MESMO layout de linha
       do painel "Nunca prometer" (um painel, marca redonda + texto + lado),
       mas sem o tom vermelho — não é alerta, é resposta pronta. */
    .faq-painel { max-width: 820px; background: var(--tv-c-surface); border: 1px solid var(--tv-line); border-left: 3px solid var(--tv-c-blue); border-radius: 11px; padding: 15px 17px 17px; margin-bottom: 16px; }
    body.tv-root .faq-painel > h2 { margin: 0 0 12px; font-family: var(--tv-font-display); font-weight: var(--tv-weight-medium); font-size: 15px; letter-spacing: -.01em; color: var(--tv-c-ink); }
    .faq-linha { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--tv-line); border-radius: 9px; background: var(--tv-c-item); }
    .faq-linha .faq-marca { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--tv-c-blue); color: var(--tv-c-on-dark); font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; }
    .faq-pergunta { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--tv-c-ink); text-wrap: pretty; }
    .faq-lado { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
    .faq-resposta { font-size: 13px; color: var(--tv-c-ink-2); text-wrap: pretty; }

    /* Card 344, aba Método. Os quatro blocos da folha
       (central-comercial.dc.html:573): os oito movimentos num trilho numerado,
       as três colunas de perguntas e linguagem, e o checklist escuro. O dado
       vem de `central_regra`, um bloco por lista. */
    .metodo-passos { display: block; background: var(--tv-c-surface); border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 18px 20px 6px; margin-bottom: 13px; }
    .metodo-passo { display: grid; grid-template-columns: 34px minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: start; padding-bottom: 14px; }
    .metodo-trilho { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
    .metodo-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--tv-radius-pill); background: var(--tv-c-surface); color: var(--tv-blue-300); border: 1px solid var(--tv-c-selected); font-family: var(--tv-font-display); font-size: 12px; display: flex; align-items: center; justify-content: center; }
    /* O primeiro passo é o cheio: é por onde a conversa começa. */
    .metodo-n--agora { background: var(--tv-primary); border-color: var(--tv-primary); color: var(--tv-c-on-dark); }
    .metodo-fio { flex: 1 1 auto; width: 1px; min-height: 26px; background: var(--tv-line); }
    body.tv-root .metodo-passo h3 { margin: 0; font-family: var(--tv-font-display); font-weight: var(--tv-weight-medium); font-size: 15px; letter-spacing: -.015em; }
    .metodo-oque { margin: 3px 0 0; font-size: 13px; color: var(--tv-c-ink-2); text-wrap: pretty; }
    .metodo-exemplo { margin: 0; padding: 9px 12px; background: var(--tv-c-item); border-radius: 9px; font-size: 14px; color: var(--tv-c-ink); text-wrap: pretty; }
    .metodo-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 13px; align-items: stretch; margin-bottom: 13px; }
    .metodo-bloco { background: var(--tv-c-surface); border: 1px solid var(--tv-line); border-top: 3px solid var(--tv-tom); border-radius: 11px; padding: 14px 15px 15px; }
    /* "Linguagem" não é veredito: não leva faixa de cor nem tom. */
    .metodo-bloco--sem-faixa { border-top: 1px solid var(--tv-line); }
    body.tv-root .metodo-bloco > h2 { margin: 0 0 11px; font-family: var(--tv-font-display); font-weight: var(--tv-weight-medium); font-size: 15px; letter-spacing: -.01em; color: var(--tv-tom-texto, var(--tv-c-ink)); }
    body.tv-root .metodo-bloco--sem-faixa > h2 { color: var(--tv-c-ink); }
    .metodo-lista { display: flex; flex-direction: column; gap: 7px; }
    .metodo-lista--nao { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--tv-line-soft); }
    .metodo-item { display: flex; gap: 8px; font-size: 14px; color: var(--tv-c-ink); text-wrap: pretty; }
    .metodo-item--nao { color: var(--tv-c-ink-2); }
    .metodo-sinal { flex: 0 0 auto; color: var(--tv-green); font-variant-numeric: tabular-nums; }
    .metodo-item--nao .metodo-sinal { color: var(--tv-red); }
    .metodo-checklist { background: var(--tv-c-ink); border-radius: var(--tv-radius); padding: 16px 18px 18px; }
    body.tv-root .metodo-checklist > h2 { margin: 0 0 12px; font-family: var(--tv-font-display); font-weight: var(--tv-weight-medium); font-size: 15px; letter-spacing: -.01em; color: var(--tv-c-on-dark); }
    .metodo-checklist-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 8px; }
    .metodo-check { display: flex; gap: 8px; align-items: baseline; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); border-radius: 9px; padding: 9px 11px; font-size: 13px; color: rgba(255,255,255,.94); text-wrap: pretty; }
    .metodo-check-n { flex: 0 0 auto; font-family: var(--tv-font-display); font-size: 12px; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
    /* Card 278, aba Consulta rápida: a busca do catálogo (decisão D da Ester). O
       resultado reusa o .item-simples e mostra faixa, preço e link, com o botão
       de copiar o que vai para a conversa. O link precisa da própria cor porque
       `.item-simples .corpo span` não pega o <a>. */
    .consulta-ajuda { margin: 0 0 12px; font-size: 13px; color: var(--tv-c-ink-2); }
    .consulta-busca { width: 100%; max-width: 420px; margin-bottom: 14px; }
    .item-simples .corpo .link-venda { display: block; font-size: 13px; color: var(--tv-action); overflow-wrap: anywhere; }

    /* Card 278, aba Cliente diz: cada indicação é a grade de três colunas do
       protótipo (cliente diz + momento / indicar + complemento / não começar por,
       com traço vermelho à esquerda), não mais o cartão de lista empilhada. O
       rodapé de gestão ocupa a largura toda embaixo. */
    .matriz { display: flex; flex-direction: column; gap: 9px; }
    .matriz-item { background: var(--tv-c-surface); border: 1px solid var(--tv-line); border-radius: 11px; padding: 13px 15px 14px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 14px; align-items: start; }
    .matriz-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
    .matriz-rotulo { margin: 0 0 4px; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--tv-c-ink-3); }
    .matriz-cab .matriz-rotulo { margin: 0; }
    .matriz-cab .etiqueta-momento { margin-left: 0; }
    .matriz-rotulo.alerta { color: var(--tv-red); }
    .matriz-diz { margin: 0; font-size: 15px; font-weight: 500; color: var(--tv-c-ink); }
    .matriz-principal { margin: 0; font-size: 14px; font-weight: 500; color: var(--tv-blue-300); }
    .matriz-complemento { margin: 6px 0 0; font-size: 13px; color: var(--tv-c-ink-2); }
    .matriz-nao { border-left: 2px solid var(--tv-tint-erro); padding-left: 12px; }
    .matriz-nao-texto { margin: 0; font-size: 14px; color: var(--tv-red); white-space: pre-line; }

    /* Minha rotina (cards 203 e 238). O painel, o item, o chip, a régua de
       pílulas e o vazio vêm todos de tv-styles.css, que os escreveu a partir
       deste mesmo protótipo. Aqui fica só o que é desta tela: a grade de três
       colunas, a coluna empilhada da direita e o cartão escuro dos avisos. */
    .rotina-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 13px; align-items: start; }
    /* A terceira coluna não é um painel: é uma pilha de painéis. */
    .rotina-coluna { display: flex; flex-direction: column; gap: 13px; }

    /* Card 239: a grade pula o estado de DUAS colunas, de propósito. Com duas,
       a coluna da direita cai para a linha de baixo, e uma linha de grade só
       começa depois do painel MAIS ALTO da linha anterior. Abaixo do painel
       mais curto sobra um buraco: medido no protótipo, 171px de nada.
       O protótipo tem o mesmo buraco. Ele não aparece na folha porque ela foi
       desenhada em tela larga, onde cabem as três colunas. Em 1280 a barra
       lateral aberta come o bastante para cair em duas, e aí ele aparece.
       A conta é de ESPAÇO DISPONÍVEL, não de tamanho de janela: a barra
       lateral recolhe para 38px e muda a largura útil sem a janela mudar de
       tamanho. Por isso `@container`, e não `@media`.
       Com duas colunas, a trava e a pilha da direita empilham na esquerda e o
       dia ocupa a direita inteira. Nada fica pendurado, e a leitura continua a
       mesma: o que trava primeiro, o dia ao lado. */
    .rotina-area { container-type: inline-size; }

    /* 1015px = 3x330 mais os dois vãos de 13, menos 1. */
    @container (max-width: 1015px) {
      .rotina-grade { grid-template-columns: 1fr 1fr; }
      .rotina-grade .tv-painel--trava { grid-column: 1; grid-row: 1; }
      .rotina-grade .rotina-dia { grid-column: 2; grid-row: 1 / span 2; }
      .rotina-grade .rotina-coluna { grid-column: 1; grid-row: 2; }
    }

    /* 672px = 2x330 mais um vão, menos 1. Abaixo disso a colocação explícita
       sai de cena, senão duas colunas de 190px sobrariam para fora da tela. */
    @container (max-width: 672px) {
      .rotina-grade { grid-template-columns: 1fr; }
      .rotina-grade .tv-painel--trava,
      .rotina-grade .rotina-dia,
      .rotina-grade .rotina-coluna { grid-column: auto; grid-row: auto; }
    }
    .rotina-mostrar { margin-bottom: 14px; }
    .rotina-resumo { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
    .rotina-resumo .tv-chip { font-size: 13px; padding: 4px 12px; }
    .rotina-lista { display: grid; gap: 8px; }
    /* Card 239: a superfície do item passou a ser a do protótipo. `--tv-item`
       e `--tv-line-soft` entraram no card 235 exatamente por isto: item de
       painel na calha (`--tv-surface-sunken`) desenha um degrau ABAIXO do
       painel, e o protótipo desenha um degrau acima do branco. */
    .rotina-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--tv-line-soft); border-radius: 10px; padding: 9px 11px; background: var(--tv-item); }
    .rotina-item .corpo { display: grid; gap: 3px; min-width: 0; flex: 1; }
    .rotina-item .corpo strong { font-size: 14px; font-weight: 500; color: var(--tv-text-titulo); }
    .rotina-item .corpo span { font-size: 13px; color: var(--tv-c-ink-3); }
    .rotina-item.feita .corpo strong { text-decoration: line-through; color: var(--tv-c-ink-3); }
    .rotina-area .tv-empty { border: 0; border-radius: 0; padding: 20px 0; font-size: 13px; }

    /* 17px é a medida do protótipo. Sem os `min-*` o botão herda a altura
       mínima que o shell dá a todo botão e a caixinha vira um quadrado grande
       ao lado de um título de 13,5px. */
    body.tv-root .rotina-item button.marcar { flex: 0 0 auto; width: 17px; height: 17px; min-width: 17px; min-height: 17px; margin-top: 2px; padding: 0; border-radius: 5px; font-size: 11px; line-height: 1; }
    .rotina-item .decisao { display: flex; gap: 8px; margin-top: 6px; }
    .rotina-item .rodape { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
    .rotina-item .quando { flex: 0 0 auto; margin-left: auto; font-size: 12px; color: var(--tv-c-ink-3); }
    .rotina-item .quando--vencida { color: var(--tv-red); }
    .rotina-item .quando--hoje { color: var(--tv-amber); }
    .rotina-item .quando--feita { color: var(--tv-green); }

    /* A fila de aprovação: a hora sozinha na primeira linha, encostada à
       direita, e o assunto embaixo. Aprovar é verde no protótipo, e não o azul
       de ação do sistema — é decisão de aceitar, não de navegar. */
    .fila-item .topo { display: flex; width: 100%; }
    .fila-item .decisao .primary { background: var(--tv-green); border-color: var(--tv-green); }
    .fila-item .decisao .secondary { color: var(--tv-red); border-color: var(--tv-tint-erro); }
    /* Card 204, redesenhado no 238: o mural de avisos. Ele é a única peça
       ESCURA da tela, e o contraste é o recado. Aviso não se dispensa por
       pessoa: some para todo mundo ao mesmo tempo, por arquivamento ou por
       vigência. Um bloco que se destaca assim cobra leitura de quem passa.

       As três cores são literais e não token: o fundo aqui é escuro por
       decisão de composição, não porque o app é escuro, e é o mesmo caso que
       `--tv-c-on-dark` documenta em tv-styles.css. Trocá-las por token de
       superfície inverteria o cartão junto com o tema e apagaria o recado. */
    .rotina-avisos { background: #2b1a33; border-radius: var(--tv-radius, 12px); padding: 14px 16px 15px; }
    .rotina-avisos-rotulo { margin: 0 0 7px; font-family: var(--tv-font-display); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #c9b6e4; }
    .rotina-avisos .avisos { margin-bottom: 0; }
    /* O aviso é um parágrafo, e nada mais. A caixa com borda, a assinatura e
       o botão de arquivar transformavam o cartão escuro numa terceira lista, e
       aí ele deixava de ler como recado. Quem escreveu, até quando vale e o
       arquivar estão no diálogo de publicar, junto da lista inteira. */
    .avisos { display: grid; gap: 9px; }
    .aviso-texto { margin: 0; font-size: 14px; color: #f3eef7; text-wrap: pretty; }
    .aviso-texto a { color: #ffffff; text-decoration: underline; }
    /* O chip de área troca de tinta porque `--tv-tom-texto` é feito para fundo
       claro e sobre #2b1a33 não separa nada. */
    .aviso-texto .tv-chip { background: rgba(255,255,255,.12); color: #f3eef7; }
    /* A RÉGUA DO PROTÓTIPO: pílulas de categoria à esquerda, par de vistas
       encostado na direita. Ela chegou a ser a `.cat-barra` do Catálogo, com as
       pílulas dentro do popover do funil — erro de leitura meu quando a Ester
       pediu um filtro só no ERP. O desenho desta tela não tem funil. */
    .doc-regua { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
    .doc-regua .tv-pilulas { flex: 1 1 auto; }
    .doc-regua .visualizacao { margin-left: auto; flex: 0 0 auto; }
    /* "N de M documentos", ao lado do título. `margin-left: auto` cola o resumo
       e o selo de nível na direita, que é onde o desenho põe o resumo. */
    .doc-resumo { margin-left: auto; font-size: 13px; color: var(--tv-c-ink-2); font-variant-numeric: tabular-nums; }
    .visualizacao { display: flex; gap: 8px; }
    /* O botão da vista escolhida NÃO PINTAVA. A regra era `.visualizacao
       button.active`, que vale 0-2-1, e quem ganhava dela era `body.tv-root
       button.secondary`, que vale 0-2-2 e declara `background: transparent`.
       Medido em produção: com a classe `active` no elemento, o fundo calculado
       era `rgba(0, 0, 0, 0)` — os dois botões saíam idênticos e o par não
       dizia em qual das duas vistas a tela estava.
       O tom é o do desenho, que pinta a vista escolhida com o mesmo chip das
       pílulas de filtro logo ao lado: tinta clara, letra e borda azuis, e não
       um bloco azul cheio com letra branca. */
    body.tv-root .visualizacao button.active { background: var(--tv-tint-info); color: var(--tv-blue-300); border-color: var(--tv-blue-300); }
    body.tv-root .visualizacao button.active:hover { background: var(--tv-tint-info); }
    .doc-card { display: flex; flex-direction: column; gap: 9px; }
    .doc-cabeca { display: flex; align-items: center; gap: 9px; }
    .doc-cabeca > :last-child { margin-left: auto; }
    /* O título é um link, e estava com a cor do NAVEGADOR: medido em produção,
       `rgb(0, 0, 238)`. A classe só mexia no tamanho e no peso, e nenhuma outra
       regra alcançava um `<a>` fora de tabela — o mesmo título, na vista de
       lista, saía no azul da casa. */
    .doc-titulo { display: block; font-size: 16px; font-weight: var(--tv-weight-medium); line-height: 1.3; color: var(--tv-action); text-wrap: pretty; }
    .doc-card p.descricao { color: var(--tv-c-ink-3); font-size: 14px; margin: 0; text-wrap: pretty; }
    /* O SELO DE SITUAÇÃO. Era um `<select>` nativo em cada cartão de quem tem
       nível 2: quinze campos de formulário numa tela de leitura, cada um do
       tamanho do título ao lado. O desenho põe um chip pequeno, e a troca de
       situação foi para o menu de três pontinhos (decisão da Ester, 10/09).

       O `.status` compartilhado pinta só a LETRA, sobre o mesmo fundo neutro
       para todas. Aqui cada situação tem o par fundo + letra do protótipo, e
       são pares que a casa já mediu. O prefixo `body.tv-root` não é enfeite:
       sem ele, `body.tv-root .status.rascunho` (0,3,1) ganha desta regra. */
    body.tv-root .doc-cabeca .status,
    body.tv-root .doc-linha-cabeca .status { flex: 0 0 auto; padding: 2px 8px; font-size: 12px; }
    body.tv-root .doc-cabeca .status.publicado,
    body.tv-root .doc-linha-cabeca .status.publicado { background: var(--tv-tint-ok); color: var(--tv-green); }
    /* Em revisão é o âmbar de "ainda falta". Rascunho é neutro: no protótipo é
       ele quem fica cinza, e o âmbar é de quem já está em movimento. */
    body.tv-root .doc-cabeca .status.em_revisao,
    body.tv-root .doc-linha-cabeca .status.em_revisao { background: var(--tv-tint-atencao); color: var(--tv-amber); }
    body.tv-root .doc-cabeca .status.rascunho,
    body.tv-root .doc-linha-cabeca .status.rascunho { background: var(--tv-tint-neutro); color: var(--tv-c-ink-2); }
    body.tv-root .doc-cabeca .status.arquivado,
    body.tv-root .doc-linha-cabeca .status.arquivado { background: var(--tv-tint-neutro); color: var(--tv-c-ink-3); }
    /* Card 408 — "consultar em {tela}". A pílula azul do protótipo, que liga o
       documento à tela do ERP que passou a guardar aquele conteúdo.

       É um `<a>`, e não o `<button>` do desenho: no protótipo o clique troca o
       estado da mesma página, e aqui ele vai para outra rota. Link ganha o
       clique do meio, o "abrir em nova aba" e o endereço na barra de situação
       do navegador — e o desenho continua o mesmo, porque a pílula é o
       `border-radius: 99px` com borda e letra em azul sobre o tinto de info.

       `align-self: flex-start` porque no cartão ela mora numa coluna flex: sem
       ele a pílula estica pela largura toda e deixa de ser pílula. */
    body.tv-root a.doc-tela { align-self: flex-start; display: inline-block; border: 1px solid var(--tv-c-blue); background: var(--tv-tint-info); color: var(--tv-c-blue); border-radius: 99px; padding: 2px 9px; font-size: 12px; line-height: 1.45; text-decoration: none; }
    body.tv-root a.doc-tela:hover { background: var(--tv-c-blue); color: var(--tv-surface); }

    /* O atalho do desenho: link, não botão. Ele não é a ação primária do
       cartão, é o caminho curto para a que mais se repete num índice de links.
       Estava só dentro do menu de três pontinhos, a dois cliques. */
    body.tv-root .doc-nova-versao { margin-left: auto; border: 0; background: transparent; padding: 0; min-height: 0; color: var(--tv-action); font: inherit; font-size: 12px; cursor: pointer; }
    body.tv-root .doc-nova-versao:hover { text-decoration: underline; }
    .doc-card footer { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--tv-line-soft); display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; column-gap: 8px; font-size: 12px; color: var(--tv-c-ink-2); }
    .doc-card footer .quem { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* A vista de LISTA. Era uma tabela de sete colunas; o desenho põe uma pilha
       de linhas largas, e cada linha carrega o mesmo que o cartão da galeria
       carrega, só que deitado. */
    .doc-lista { display: flex; flex-direction: column; gap: 8px; }
    .doc-linha { background: var(--tv-surface); border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 12px 15px 13px; display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
    .doc-linha:hover { border-color: var(--tv-line-campo); }
    .doc-linha > .tv-chip { flex: 0 0 auto; }
    .doc-linha-miolo { flex: 1 1 320px; min-width: 0; }
    .doc-linha-cabeca { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
    .doc-linha-miolo p.descricao { margin: 5px 0 0; font-size: 14px; color: var(--tv-c-ink-3); text-wrap: pretty; }
    .doc-linha-miolo p.doc-url { margin: 4px 0 0; font-size: 12px; color: var(--tv-c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .doc-linha-lado { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--tv-c-ink-2); }
    .doc-linha-lado .quem { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    button.perigo.compacto { border-color: var(--tv-red); color: var(--tv-red); }

    /* Card 242: o kanban de quatro colunas saiu da página. A tarefa agora é
       uma linha na lista do diálogo, e o seletor de status faz o que arrastar
       entre colunas fazia. O protótipo não tem kanban em tela nenhuma. */
    .tarefa-linha { border: 1px solid var(--tv-line-soft); border-radius: 10px; padding: 10px 12px; background: var(--tv-item); display: grid; gap: 6px; }
    .tarefa-linha strong { font-size: 14px; font-weight: 500; color: var(--tv-text-titulo); }
    .tarefa-linha p.desc { margin: 0; font-size: 13px; color: var(--tv-c-ink-3); }
    .tarefa-linha small { font-size: 12px; color: var(--tv-c-ink-3); }
    .tarefa-linha footer { display: flex; justify-content: flex-end; }

    /* Ação no pé do painel. É o padrão do próprio protótipo, que fecha "O que
       você pediu" com um link para a tela do tráfego: a ação mora ao lado do
       resultado dela, e não numa barra de botões no topo. */
    .rotina-acao { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 0; }
    .rotina-avisos .tv-empty { color: #c9b6e4; }
    .tv-acao-texto { border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 13px; color: var(--tv-primary); cursor: pointer; }
    .tv-acao-texto:hover { color: var(--tv-c-blue-hover); text-decoration: underline; }
    .rotina-avisos .tv-acao-texto { color: #ffffff; }

    /* Ação de cartão em caixa: a peça que o protótipo desenha no rodapé da
       oferta e na Consulta rápida. Peso normal é o que a separa de
       `button.secondary`, que tem peso 500 e é o botão de "Salvar" — o mesmo
       botão que estava nas ações de copiar do Comercial até 09/09/2026.

       A borda saiu de `--tv-line` para `--tv-line-strong`: isto é um controle,
       e a própria folha de tokens diz que contorno de CONTROLE precisa de 3:1
       (WCAG 1.4.11). `--tv-line` é divisória decorativa e não alcança. O
       protótipo usa um lilás mais claro; aqui vale a mesma exceção do tamanho
       da letra, que é deliberada. */
    /* A borda é `--tv-line-campo` (#978aab), e não `--tv-line-strong`
       (#7d6a95), por duas medições que dizem a mesma coisa.
       A régua da casa: `line-campo` é o degrau do controle DISCRETO que mora
       DENTRO de outra superfície, e mede 3,21:1 — passa no 1.4.11. É o caso
       exato de uma ação no rodapé de um cartão. `line-strong` é o contorno de
       controle sobre o fundo da página, e num cartão claro ele lê como uma
       segunda borda dentro da borda.
       O protótipo pinta esses botões em rgb(151,138,171), que é #978aab: a
       mesma escolha, chegando pelo desenho. Medido em 09/09 no cartão de
       produto do Catálogo. */
    .tv-acao-caixa { display: inline-block; background: var(--tv-surface); border: 1px solid var(--tv-line-campo); border-radius: 8px; padding: 6px 12px; font-family: inherit; font-size: 13px; color: var(--tv-text); text-decoration: none; cursor: pointer; }
    .tv-acao-caixa:hover { background: var(--tv-hover); color: var(--tv-text); text-decoration: none; }
    .rotina-avisos .tv-acao-caixa { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #ffffff; }
    .rotina-avisos .tv-acao-caixa:hover { border-color: rgba(255,255,255,.4); color: #ffffff; }

    .compromisso-item + .compromisso-item { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--tv-line-soft); }
    .compromisso-item .titulo { margin: 0; font-size: 14px; color: var(--tv-text-titulo); }
    .compromisso-item .contexto { margin: 4px 0 0; font-size: 13px; color: var(--tv-c-ink-3); }
    .compromisso-item .decisao { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
    .compromisso-item .quando { font-size: 12px; color: var(--tv-c-ink-3); font-variant-numeric: tabular-nums; }

    /* O topo do diálogo é um `form method="dialog"` só para o botão de fechar
       funcionar sem JavaScript. Ele precisa escapar da grade que o shell
       aplica a todo `form` dentro de `dialog`. */
    body.tv-root dialog form.dlg-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .dlg-lista { display: grid; gap: 10px; margin-top: 14px; max-height: 52vh; overflow-y: auto; }

    .bib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
    .bib-card { border: 1px solid var(--tv-line); border-radius: var(--tv-radius); background: var(--tv-surface-sunken); overflow: hidden; display: flex; flex-direction: column; }
    .bib-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: rgba(111,149,246,.14); }
    .bib-thumb-placeholder { width: 100%; aspect-ratio: 4 / 3; background: rgba(111,149,246,.14); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tv-c-ink-3); padding: 10px; text-align: center; }
    .bib-body { padding: 12px 14px; display: grid; gap: 6px; flex: 1; }
    .bib-body strong { font-size: 14px; }
    .bib-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .bib-tag { font-size: 12px; padding: 2px 8px; border-radius: var(--tv-radius-pill); background: var(--tv-tint-neutro); color: var(--tv-c-ink-3); }
    .bib-summary { font-size: 13px; color: var(--tv-c-ink-3); margin: 0; }
    .bib-path { font-size: 12px; color: var(--tv-c-ink-3); margin: 0; font-family: monospace; word-break: break-all; }

    /* Regras do comercial (card 210). Oito listas com formas diferentes; o que
       muda de bloco para bloco é o arranjo, não a cor. */
    .regras-par { display: grid; gap: 8px; }
    /* A linha é uma LINHA, e não uma caixa. Medido nos dois lados em
       30/08/2026: no protótipo ela tem 19px de altura, sem borda, sem fundo e
       sem padding; a caixa que o card 210 desenhou dava 41px, e três painéis
       assim eram metade dos 1181px de altura a mais que o card 259 mediu. É
       peça que sobrou de versão anterior, que é divergência do mesmo jeito que
       peça que falta. */
    .regras-linha { display: flex; gap: 8px 12px; align-items: baseline; }
    .regras-rotulo { flex: 0 0 132px; font-size: 13.5px; color: var(--tv-c-ink-3); }
    .regras-valor { flex: 1 1 auto; min-width: 0; font-size: 14px; text-wrap: pretty; }
    /* Na escalada os papéis se invertem: a situação é o texto largo e quem
       resolve é a pílula à direita. O protótipo desenha assim porque a lista se
       lê pelas situações, não pelos nomes. */
    .regras-par.escalar .regras-rotulo { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--tv-c-ink-2); text-wrap: pretty; }
    .regras-par.escalar .regras-valor { flex: 0 0 auto; margin-left: auto; font-size: 12.5px; color: var(--tv-c-violet); background: var(--tv-tint-neutro); border-radius: var(--tv-radius-pill); padding: 2px 9px; }
    .regras-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 11px; align-items: start; }
    /* Padding e tamanhos medidos no protótipo em 30/08/2026: 11px/12px de
       padding, título 14px, parágrafo 12,5px, e 4px entre eles. O 13px/15px que
       estava aqui somava 80px por cartão de ManyChat. */
    .regras-cartao { border: 1px solid var(--tv-line-soft); border-radius: 10px; padding: 11px 12px; background: var(--tv-item); }
    .regras-cartao h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
    .regras-cartao p { margin: 4px 0 0; font-size: 13.5px; color: var(--tv-c-ink-3); }
    .regras-cartao.alerta { border-color: var(--tv-red); }
    /* O estado no bot é TEXTO, não caixa: no protótipo é um span azul de 12px
       na mesma linha de base da situação. A caixa com borda, herdada do card
       210, empurrava a linha e fazia o parágrafo quebrar em duas. */
    .regras-estado { font-size: 13px; font-family: var(--tv-font-display); color: var(--tv-primary); }
    .regras-cartao.alerta .regras-estado { color: var(--tv-red); }
    .regras-quando { font-weight: 500; color: inherit !important; }
    .regras-produto { font-size: 13px !important; color: var(--tv-c-ink-2) !important; }
    .regras-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 13px; align-items: start; }
    /* Branco, não a calha — mesma correção medida do card 280 em `.oferta`. */
    .regras-bloco { border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 13px 15px 15px; background: var(--tv-c-surface); border-top: 3px solid var(--tv-line-strong); }
    .regras-bloco.ok { border-top-color: var(--tv-green); }
    .regras-bloco.alerta { border-top-color: var(--tv-red); }
    .regras-bloco h3 { margin: 0 0 10px; font-size: 15px; }
    .regras-bloco.ok h3 { color: var(--tv-green); }
    .regras-bloco.alerta h3 { color: var(--tv-red); }
    .regras-marcada { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
    .regras-marcada li { display: flex; gap: 9px; font-size: 14px; }
    .regras-marca { flex: 0 0 auto; }
    .regras-bloco.ok .regras-marca { color: var(--tv-green); }
    .regras-bloco.alerta .regras-marca { color: var(--tv-red); }
    .regras-numerada { margin: 0; padding-left: 22px; display: grid; gap: 7px; font-size: 13px; }

    /* ------------------------------------------------------------------
       Card 279: as três faixas.

       A tela empilhava os oito blocos em coluna única, e o card 259 mediu o
       estrago: 2934px de altura contra 1650 do protótipo, com painel de 1031px
       para frase de sete palavras. Dezessete princípios viravam dezessete
       linhas de mil pixels em vez de quatro colunas.

       `auto-fit` com mínimo, e não número fixo de colunas: é o que o protótipo
       faz (`repeat(auto-fit,minmax(300px,1fr))`) e é o que faz a faixa virar
       uma coluna sozinha em tela estreita sem media query nenhuma. Os mínimos
       são os do desenho: 300px para painel, 280 para cartão de momento, 268
       para passo do checklist e 258 para princípio. */
    .regras-faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 13px; margin-bottom: 13px; align-items: start; }
    .regras-faixa > .tv-painel { margin: 0; }
    .regras-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr)); gap: 8px; }
    .regras-checklist { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }
    .regras-cartoes { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

    /* O painel escuro dos princípios. Mesmo fundo do mural de avisos da Minha
       rotina, e pela mesma razão registrada lá: sobre #2b1a33 os tokens de
       texto, feitos para fundo claro, não separam nada. */
    .regras-escuro { background: #2b1a33; border-radius: var(--tv-radius, 12px); padding: 16px 18px 18px; margin-bottom: 13px; }
    body.tv-root .regras-escuro .tv-painel-head h2 { color: #ffffff; }
    .regras-principio { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.05); }
    .regras-principio .n { flex: 0 0 auto; font-size: 12px; color: #c9b6e4; font-variant-numeric: tabular-nums; }
    .regras-principio .txt { font-size: 13.5px; color: #f3eef7; text-wrap: pretty; }
    .regras-escuro .regras-editar { color: #c9b6e4; }

    /* O escopo da versão é aviso, e o protótipo o pinta de âmbar com tarja à
       esquerda. É o único painel da tela com cor de fundo própria. */
    .regras-escopo { background: var(--tv-tint-atencao); border: 1px solid var(--tv-line); border-left: 3px solid var(--tv-amber); border-radius: var(--tv-radius); padding: 14px 16px 15px; }
    body.tv-root .regras-escopo .tv-painel-head h2 { color: var(--tv-amber); }
    .regras-escopo-colunas { display: flex; flex-wrap: wrap; gap: 20px; }
    .regras-escopo-colunas > div { flex: 1 1 240px; min-width: 0; }
    .regras-escopo-colunas p { margin: 0 0 6px; font-size: 13px; color: var(--tv-c-ink-3); }
    .regras-chips { display: flex; flex-wrap: wrap; gap: 5px; }

    /* O item do checklist é um passo, e o passo feito RISCA e continua na lista:
       sumir esconderia o que ainda falta conferir na próxima venda. */
    .regras-passo.feito { background: var(--tv-tint-info); border-color: var(--tv-c-selected); }
    /* A frase que diz que a marcação é deste navegador saiu do subtítulo (card
       279 tirou os sete subtítulos) e desceu para o pé do painel. Ela não está
       no protótipo e é informação de verdade: muda de lugar, não some. */
    .regras-nota { margin: 11px 0 0; font-size: 12.5px; color: var(--tv-c-ink-3); text-wrap: pretty; }

    /* "editar" é ação secundária dentro de uma lista de leitura, e por isso é
       texto e não botão de caixa. Precisa começar por `body.tv-root` para
       vencer `body.tv-root button` (0,1,1 não ganha de 0,1,2) — a armadilha dos
       cards 230, 242 e 243, que já custou três telas com borda que ninguém
       pediu. */
    body.tv-root .regras-editar { border: 0; background: transparent; padding: 0; min-height: 0; font: inherit; font-size: 12.5px; color: var(--tv-c-ink-3); cursor: pointer; }
    body.tv-root .regras-editar:hover { color: var(--tv-primary); text-decoration: underline; }
    /* Linha com pedido de mudança em aberto. O selo evita a segunda pessoa
       propor a mesma coisa sem saber da primeira. */
    .regras-pendente { font-size: 11.5px; color: var(--tv-amber); background: var(--tv-tint-atencao); border-radius: var(--tv-radius-pill); padding: 1px 8px; white-space: nowrap; }
    /* Rodapé de ações do cartão do momento: alinhado à direita, porque a
       leitura do cartão é o conteúdo e não o "editar". */
    .regras-acoes { display: flex; justify-content: flex-end; align-items: baseline; gap: 9px; margin-top: 8px; }
    .regras-cartao-topo { display: flex; align-items: baseline; gap: 9px; }
    .regras-cartao-topo .fim { margin-left: auto; display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
    .regras-cartao > .regras-editar { display: block; margin: 8px 0 0 auto; }
    .regras-linha .regras-editar, .regras-marcada li .regras-editar { margin-left: auto; flex: 0 0 auto; }
    .regras-principio .regras-editar { margin-left: auto; flex: 0 0 auto; }

    /* ------------------------------------------------------------------
       Card 279: a aba Funil e passagem.

       Os doze estágios são uma TABELA de três colunas (nome, definição, ação),
       e é assim que o protótipo os desenha. `min-width` com rolagem própria
       porque abaixo de 560px as três colunas viram três palavras por linha —
       a mesma regra de contêiner rolante do resto do sistema. */
    .funil-estagios { border: 1px solid var(--tv-line); border-radius: var(--tv-radius); background: var(--tv-surface); padding: 6px 0; margin-bottom: 16px; overflow-x: auto; }
    .funil-estagio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr); gap: 14px; min-width: 560px; padding: 10px 16px; border-bottom: 1px solid var(--tv-line-soft); align-items: baseline; }
    .funil-estagio:last-child { border-bottom: 0; }
    .funil-estagio .nome { font-size: 14.5px; font-weight: 500; color: var(--tv-c-ink-0); }
    .funil-estagio .def { font-size: 14px; color: var(--tv-c-ink-3); text-wrap: pretty; }
    .funil-estagio .acao { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--tv-primary); text-wrap: pretty; }
    .funil-estagio .acao .regras-editar { margin-left: auto; flex: 0 0 auto; }

    .funil-contato { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
    .funil-contato .quem { flex: 0 0 auto; font-size: 13.5px; color: var(--tv-primary); }
    .funil-contato .quando { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--tv-c-ink-3); }
    .funil-contato .objetivo { flex: 1 1 100%; font-size: 14px; text-wrap: pretty; }

    .funil-mensagem { border: 1px solid var(--tv-line-soft); border-radius: 9px; padding: 10px 11px; background: var(--tv-item); }
    .funil-mensagem-topo { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
    .funil-mensagem-topo .quando { font-size: 13px; color: var(--tv-c-ink-3); }
    .funil-mensagem-topo .fim { margin-left: auto; display: flex; gap: 10px; align-items: baseline; }
    .funil-mensagem p { margin: 0; font-size: 14px; text-wrap: pretty; }
    /* O link da agenda é a única linha do bloco `reuniao` com `alvo`, e o
       protótipo o desenha como pílula azul com ícone de calendário no cabeçalho
       do painel, e não como mais uma mensagem. */
    body.tv-root .funil-agenda { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--tv-c-selected); background: var(--tv-tint-info); color: var(--tv-primary); border-radius: 8px; padding: 4px 11px; min-height: 0; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; }
    body.tv-root .funil-agenda:hover { border-color: var(--tv-primary); }
    .regras-contador { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--tv-c-ink-3); font-variant-numeric: tabular-nums; }
    .regras-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
    /* Branco, não a calha — mesma correção medida do card 280 em `.oferta`. */
    .regras-passo { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 9px 12px; background: var(--tv-c-surface); }
    .regras-passo label { font-size: 15px; cursor: pointer; }
    /* Riscado e não sumindo: quem confere precisa ver o que já fez sem perder o
       tamanho da lista. Mesma decisão do "marcar risca em vez de sumir" da
       Minha rotina, no card 203. */
    .regras-passo.feito label { text-decoration: line-through; color: var(--tv-c-ink-3); }
    /* Card 213: a faixa de números da direção. Cada cartão é um link para a
       tela onde o número se resolve — número sem destino é enfeite. Um cartão
       que a pessoa não alcança não é renderizado, e a faixa segue com os
       outros; quem some é o cartão, nunca a faixa.

       Card 235: o desenho do cartão saiu daqui. Era uma segunda versão do
       `.metric` do shell, com outro nome, outro fundo (calha em vez de branco)
       e outro tamanho de número (22px em vez de 21). A faixa agora é
       `.summary .metric` como em toda tela, e aqui ficam só as duas variantes
       de cor, que são desta faixa e de nenhuma outra.

       Card 360: daqui saiu também `.numeros-direcao { margin-bottom: 18px }`.
       A regra era válida e nunca pintou: `body.tv-root .summary` é (0,2,1),
       ganha desta classe (0,1,0) e o `margin` de atalho de lá zerava o lado de
       baixo. O respiro é do shell agora, e para todas as faixas. */
    .numero-direcao.alerta strong { color: var(--tv-amber); }
    /* O cartão que ainda não tem dado. Não é link, e diz o que falta em vez de
       sumir: sumir faria parecer que o número é zero. */
    .numero-direcao.pendente strong { color: var(--tv-text-muted); }

/* Card 276: a linha do Documentos passou a ter duas ações (Nova versão e
   Arquivar) no lugar do Excluir único, e elas precisam de respiro entre si.
   Vale na célula da tabela e no rodapé do cartão da galeria. */
body.tv-root .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* A coluna de ações da Lista de Documentos não tinha `width` nenhum, e o
   layout automático da tabela dava só 182px pra ela — não cabem "Nova
   versão" e "Arquivar" lado a lado, então empilhavam mesmo em janela
   normal (1366px, não é caso de tela estreita). */
body.tv-root #documentListaWrap th:last-child,
body.tv-root #documentListaWrap td:last-child { min-width: 220px; }

    /* Card 280 — o Catálogo passa a listar PRODUTO, com valor, dono e o que vem
       dentro. As regras abaixo são as peças que a prateleira e a ficha ganharam.
       Os tamanhos seguem a régua do card 297 (nada abaixo de 11px). */

    /* A frase que explica por que as contagens das prateleiras somam mais que o
       total de produtos. Sem ela a régua parece errada — e é justamente o que o
       desenho escreve, porque um produto atende vários segmentos. */
    /* `ch` a 12px dava só ~465px num painel de 1031px — mesmo defeito do
       `.subtitle` de tv-styles.css, corrigido lá pela mesma razão. */
    .nota-contagem { margin: 8px 2px 16px; font-size: 12px; color: var(--tv-c-ink-2); max-width: 640px; text-wrap: pretty; }

    /* O VALOR, que é o que este card veio trocar pela frase. O grande é a oferta
       mais barata; o riscado ao lado é o preço base, e só aparece quando há
       desconto de verdade. */
    .oferta .preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .oferta .preco strong { font-family: var(--tv-font-display); font-weight: var(--tv-weight-medium); font-size: 17px; font-variant-numeric: tabular-nums; }
    .oferta .preco.sem-valor { font-size: 13px; font-weight: 400; color: var(--tv-c-ink-3); }
    .oferta .conta-docs { margin: 4px 0 0; font-size: 12px; color: var(--tv-c-ink-3); }
    /* O alerta da conferência aparece DENTRO do cartão, onde a decisão é tomada,
       e não só na aba de pendências. Uma linha, cortada: o texto inteiro está no
       `title` e na aba. */
    .oferta .aviso-pendencia { margin: 8px 0 0; font-size: 12px; color: var(--tv-amber); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .oferta .aviso-pendencia strong { font-weight: var(--tv-weight-medium); }
    .oferta footer .copiado { color: var(--tv-green); }
    body.tv-root .status.alerta { color: var(--tv-amber); }

    /* A ficha do produto. O lado esquerdo é preço, links e cadastro; o painel
       tem as três abas do desenho. */
    .gv-selo { border-radius: var(--tv-radius-pill); padding: 3px 10px; font-size: 12px; background: var(--tv-tom-tint, var(--tv-tint-neutro)); color: var(--tv-tom-texto, var(--tv-c-ink-2)); }
    /* O lado esquerdo do desenho e uma pilha de CARTOES, nao de linhas soltas:
       preco, links e cadastro, cada um numa caixa branca com borda
       (`central-comercial.dc.html:1073`). E a linha do cadastro tem o rotulo
       numa coluna FIXA de 84px com o valor colado nela: o `space-between` que
       morava aqui jogava o valor no canto direito de uma coluna de 330px, com
       meio palmo de vazio no meio de cada frase -- era o desalinho que a Ester
       viu na ficha antes do card 393. */
    .gv-cartao { background: var(--tv-surface); border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 12px 14px; }
    .gv-cartao > .gv-rotulo { margin-bottom: 8px; }

    .gv-preco { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
    .gv-preco strong { font-family: var(--tv-font-display); font-weight: var(--tv-weight-medium); font-size: 25px; font-variant-numeric: tabular-nums; }
    .gv-nota { margin: 6px 0 0; font-size: 12px; color: var(--tv-c-ink-3); flex-basis: 100%; text-wrap: pretty; }
    .gv-texto.atencao { color: var(--tv-amber); }

    /* Cada link e um cartao proprio, com o endereco embaixo do nome: e por ele
       que se confere que o link copiado e o certo antes de mandar para a
       cliente. Sem o endereco, a lista sao tres linhas com o mesmo aspecto. */
    /* `min-width: 0` nos TRES niveis, e o botao com `flex: 0 0 auto`. O
       endereco tem `white-space: nowrap`, entao o minimo automatico da linha e
       o endereco INTEIRO: medido, a linha ficava com 368px numa coluna de
       320px e empurrava o botao "copiar" para fora, cortado no meio. Item de
       grade e de flex nao encolhe abaixo do proprio min-content sem isto, e o
       botao encolhia no lugar do texto porque `0 1 auto` deixa. */
    .gv-links { display: grid; gap: 6px; min-width: 0; }
    .gv-link { display: flex; align-items: center; gap: 9px; min-width: 0; background: var(--tv-surface); border: 1px solid var(--tv-line); border-radius: var(--tv-radius-sm); padding: 8px 11px; font-size: 13px; }
    .gv-link .texto { min-width: 0; flex: 1 1 auto; }
    .gv-link > button { flex: 0 0 auto; }
    .gv-link .nome { display: block; font-size: 12.5px; }
    .gv-link .url { display: block; font-size: 11px; color: var(--tv-c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .gv-dados { min-width: 0; background: var(--tv-surface); border: 1px solid var(--tv-line); border-radius: var(--tv-radius); overflow: hidden; }
    .gv-dado { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 12.5px; padding: 7px 12px; border-top: 1px solid var(--tv-line); }
    .gv-dado:first-child { border-top: 0; }
    .gv-dado span:first-child { flex: 0 0 84px; color: var(--tv-c-ink-3); }
    .gv-dado span:last-child { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }

    .gv-oferta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 9px 0; border-top: 1px solid var(--tv-line); }
    .gv-oferta:first-child { border-top: 0; }
    .gv-oferta .nome { flex: 1 1 180px; }
    .gv-oferta .codigo, .gv-docs .codigo { font-family: 'SFMono-Regular', Menlo, monospace; font-size: 12px; color: var(--tv-c-ink-3); }
    .gv-oferta .valor { font-variant-numeric: tabular-nums; font-weight: var(--tv-weight-medium); }

    /* A busca dentro da ficha é um `input`, e `body.tv-root input` é (0,1,2):
       classe simples perde e o campo herda 40px de altura e borda própria. É a
       armadilha dos cards 230, 242, 243 e 297 — daí o prefixo. */
    body.tv-root .gv-busca { min-height: 34px; font-size: 13px; margin-bottom: 8px; }
    .gv-docs h3 { margin: 14px 0 6px; font-size: 13px; font-weight: var(--tv-weight-medium); color: var(--tv-c-ink-2); }
    .gv-docs h3:first-child { margin-top: 0; }
    .gv-docs ul { margin: 0; padding: 0; list-style: none; }
    .gv-docs li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; border-top: 1px solid var(--tv-line); }

    /* A `.hot-barra` própria desta aba saiu em 10/09: as quatro abas do
     * Catálogo usam a mesma `.cat-barra`. O que sobrou é o que só existe aqui —
     * o "Atualizar da Hotmart", que fica com a letra azul e sem o fundo cheio,
     * e a data do último sync. */
    body.tv-root .cat-acoes .hot-atualizar { color: var(--tv-primary); }
    .hot-sync { font-size: 12px; color: var(--tv-c-ink-3); }
    /* O aviso de encaixe que falta. Era `.subtitle`, a classe do subtítulo da
     * TELA, e ficava acima da barra: lido assim ele parecia descrever a página
     * inteira. Aqui ele é o que é — uma pendência da tabela logo abaixo — e usa
     * o âmbar da casa, que é a cor de "isto ainda falta". */
    .hot-aviso { margin: 0 0 11px; font-size: 13px; color: var(--tv-amber); }
    .hot-aviso[hidden] { display: none; }

    /* A barra de seleção do protótipo: existe SÓ quando há seleção, e o que ela
     * diz é o que vai sair no arquivo. A tela tinha uma fileira permanente com
     * o botão desligado e uma frase explicando um botão que ninguém podia
     * apertar. */
    .prod-selecao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--tv-c-selected); border: 1px solid var(--tv-primary); border-radius: 9px; padding: 8px 12px; margin-bottom: 11px; }
    .prod-selecao[hidden] { display: none; }
    .prod-selecao .quanto { font-size: 12.5px; color: var(--tv-blue-300); }
    body.tv-root .prod-selecao .tv-btn--text { padding: 0; min-height: 0; font-size: 12.5px; text-decoration: underline; }
    /* Dentro da barra azul o `.secondary` da casa (borda cinza-roxa, fundo
     * transparente) fica com a cor do campo por baixo e some. O protótipo o
     * desenha branco, com a borda do azul de ação. */
    body.tv-root .prod-selecao button.secondary { background: var(--tv-surface); border-color: var(--tv-primary); }
    body.tv-root .prod-selecao button.secondary:hover { background: var(--tv-c-selected); }

    /* A régua da lista (`.cat-barra` e companhia) subiu para o `tv-styles.css`
       em 10/09: Vendas usa a mesma peça e não carrega esta folha. */
    /* `.oferta .segmentos` saiu em 09/09: virou `.classificacao`, uma linha só.
       `.oferta .faixa`, logo no começo do arquivo, FICA — a galeria de
       Documentos ainda a usa (`comercial_documentos.html:398`). */
    /* O selo de situação vai junto do título, como no desenho: no rodapé ele
       ficava longe do nome a que se refere. */
    .oferta .cabeca { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
    .oferta .cabeca h3 { margin: 0; flex: 1 1 auto; }
    .oferta .cabeca .status { flex: 0 0 auto; }

    /* ===== O cartão de produto contra o protótipo (auditoria de 09/09) =======
       Medido lado a lado no MESMO produto ("50 Placas Orientativas", da Ana,
       R$ 29,27, 54 documentos), protótipo em 8799 e produção. Nove achados.

       O modificador existe porque `.oferta` também veste a galeria de
       Documentos (`comercial_documentos.html`), que tem outro miolo: sem ele o
       `padding: 0` daqui abriria um buraco naquela tela. */
    .oferta--produto { padding: 0; overflow: hidden; display: flex; flex-direction: column;
                       box-shadow: 0 1px 2px rgba(36, 26, 43, .05);
                       transition: border-color .15s; }
    /* O corpo do cartão abre a ficha, e o cartão não dava sinal nenhum de que
       era clicável: só o cursor mudava, e cursor não se vê de longe. O
       protótipo escurece a borda para `--tv-line-hover`, que é o mesmo gesto
       do `.tv-cartao` do Board. Sem transição a borda pisca. */
    .oferta--produto:hover { border-color: var(--tv-line-hover); }

    /* 1. A tarja de cima diz de quem é o produto. Faltava inteira.
       A cor é a MESMA da bolinha ao lado do nome, por decisão da Ester de
       09/09: o protótipo pinta as duas com paletas diferentes — tarja em
       roxo-acinzentado e ocre, bolinha em azul e roxo —, e uma cor que
       significa "dono" não pode ter duas leituras na mesma tela. Vale a da
       bolinha: Ana verde, Ester azul, as duas roxo. */
    .oferta--produto .dono-tarja { display: block; height: 3px; background: var(--tv-line-strong); }
    .oferta--produto .dono-tarja.dono--ana { background: var(--tv-c-green); }
    .oferta--produto .dono-tarja.dono--ester { background: var(--tv-c-blue); }
    .oferta--produto .dono-tarja.dono--ambas { background: var(--tv-c-violet); }

    .oferta--produto .oferta-abrir { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px 16px 0; }
    /* 2. O título era 17px contra 14px do protótipo. */
    .oferta--produto h3 { margin: 0; font-size: 14px; letter-spacing: -.01em; text-wrap: pretty; }

    /* 3. Segmento, categoria e dono numa linha só. Eram dois parágrafos, em
       12px e 13px, e a mesma informação parecia ter dois níveis. */
    .oferta--produto .classificacao { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
                                      margin: 0; font-size: 12px; color: var(--tv-c-ink-3); }
    /* O ponto que separa segmento, categoria e dono é DECORATIVO: não é
       contorno de controle, e em `--tv-line-strong` (#7d6a95) ele saía mais
       escuro que as próprias palavras que separa, virando o ponto mais forte
       da linha. `--tv-line-hover` (#c9bdd6) é o que o `.tv-cartao-meta .sep`
       do Board já usa, e é o degrau decorativo mais próximo do protótipo
       (#d6cde0). Medido em 09/09. */
    .oferta--produto .classificacao .sep { color: var(--tv-line-hover); }
    .oferta--produto .classificacao .dono { display: inline-flex; align-items: center; gap: 5px; }
    /* 4. A bolinha do dono, que também faltava. */
    .oferta--produto .classificacao .marca { width: 5px; height: 5px; flex: 0 0 auto;
                                             border-radius: var(--tv-radius-pill); background: var(--tv-line-strong); }
    .oferta--produto .classificacao .marca.dono--ana { background: var(--tv-c-green); }
    .oferta--produto .classificacao .marca.dono--ester { background: var(--tv-c-blue); }
    .oferta--produto .classificacao .marca.dono--ambas { background: var(--tv-c-violet); }

    /* 5. Preço e contagem na MESMA linha, com a régua fina que separava esse
       bloco do resto. Empilhados, o cartão ia a 260px contra 199px. */
    .oferta--produto .valor { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
                              margin: 0; padding-top: 9px; border-top: 1px solid var(--tv-c-line-soft); }
    .oferta--produto .valor .preco { margin: 0; }
    .oferta--produto .valor .preco strong { font-size: 16px; font-weight: var(--tv-weight); letter-spacing: -.02em; }
    .oferta--produto .valor .conta-docs { margin: 0 0 0 auto; font-size: 11.5px; }

    /* 6. O selo "ativo" saía com fundo cinza: só a letra era verde. `.status` é
       compartilhada e pinta `--tv-tint-neutro` na casa inteira, então o que
       falta aqui é só o fundo do tom de OK, que já existe em `--tv-tint-ok`. */
    .oferta--produto .cabeca .status.aprovada { background: var(--tv-tint-ok); }

    /* 7. A pendência é TARJA, não texto solto: no meio de um cartão claro, doze
       pixels de âmbar sem fundo não se lêem como aviso. O texto inteiro cabe —
       era cortado com reticências e só o `title` dizia o resto. */
    .oferta--produto .aviso-pendencia { margin: 0; padding: 4px 8px; border-radius: 6px;
                                        background: var(--tv-tint-atencao); font-size: 11.5px;
                                        white-space: normal; overflow: visible; text-wrap: pretty; }

    .oferta--produto footer { margin-top: 0; padding: 11px 16px 12px; gap: 6px; }
    /* 8 e 9. Copiar o link ocupa a linha (media 157px de 335, do tamanho do
       "ficha" ao lado), e o "ficha" leva a outro lugar, o que a folha escreve
       na cor.

       Os dois seletores precisam de `body.tv-root … button` por causa da força.
       Quando a base era `button.secondary`, quem mandava na cor e no fundo era
       `body.tv-root button.secondary`, que é (0,2,2); escrito como
       `.oferta--produto footer .copiar-venda` a regra é (0,2,1) e PERDIA — o
       `flex` pegava, porque ninguém mais o declara, e o fundo e a cor ficavam
       os de antes sem erro nenhum. Achado medindo o computado em produção,
       depois do deploy — ler o arquivo dizia que estava certo.

       Em 09/09/2026 a base passou a ser `.tv-acao-caixa`, que é (0,1,0). A
       força daqui deixou de ser necessária e continua: baixá-la só criaria a
       chance de o próximo que mexer na base repetir o mesmo defeito. */
    body.tv-root .oferta--produto footer button.copiar-venda { flex: 1 1 auto; background: var(--tv-trilho); }
    body.tv-root .oferta--produto footer button.ver-ficha { color: var(--tv-c-blue); }