/* ========================================================================
       PRECS (1.1.59) — ABA CONVERSAS DA SUPERVISÃO
       ------------------------------------------------------------------------
       O prefixo é `precs-supconv-`, e ele não colide com nenhum dos três vizinhos:
       `precs-wa-` é o modo WhatsApp do operador (30-whatsapp.css), `precs-supwa-` é a aba
       WhatsApp da supervisão (70-supwhatsapp.css) e `precs-sup-` é a supervisão em geral
       (10-supervisao.css). O quarto prefixo existe porque esta tela é a única que MISTURA os
       três: ela é supervisão por fora e WhatsApp por dentro.

       ESTE ARQUIVO ENTRA NO FIM DA LISTA, e isso é contrato. A precedência entre temas depende
       de ORDEM DE LINHA (`html[data-luz="claro"]` e `html[data-theme="bordo-claro"]` empatam
       em especificidade), então arquivo novo no meio de uma faixa muda tela que ninguém pediu
       para mudar. A lista canônica vive em `.github/scripts/lib-css.js`.

       O QUE ELE CONTÉM, em três partes:
         1. O TRILHO de operadores e o cabeçalho de identidade (a moldura nova).
         2. O ENQUADRAMENTO EMBUTIDO (`html[data-wa-emb]`), que é o terceiro enquadramento do
            mesmo `#whatsapp-section` — depois da tela cheia (`data-wa`) e do painel lateral
            (`data-wa-drawer`).
         3. O bloco de `prefers-reduced-motion`, no fim, cobrindo tudo o que se move aqui.
       ======================================================================== */

    /* ---- A GRADE: trilho à esquerda, caixa à direita ---------------------- */
    /* Trilho de 232px porque o chip carrega foto de 40px, nome e dois selos numa linha só, e
       abaixo disso o nome de "Gabrielle Monteiro" quebra em três linhas. `minmax(0, 1fr)` na
       segunda trilha e não `1fr`: sem o `minmax(0, …)` o inbox (que tem conteúdo de largura
       intrínseca grande, como bolha de mídia) empurraria a grade e estouraria o painel para
       fora — é a mesma correção que a grade do próprio inbox já carrega. */
    .precs-supconv-wrap{
      display: grid; grid-template-columns: 232px minmax(0, 1fr);
      gap: var(--space-4); align-items: start;
    }

    /* ---- O TRILHO -------------------------------------------------------- */
    .precs-supconv-trilho-wrap{
      background: var(--bg-secondary); border: 1px solid var(--border-color);
      border-radius: var(--radius-card); overflow: hidden;
      /* Ele acompanha a rolagem: numa lista de catorze e crescendo, sair da tela obrigaria a
         rolar de volta ao topo para trocar de operador.
         (1.1.60) E O `top` SAI DE `--sup-cards-h`, e não de um `--space-3` cravado. Aquele
         token existe porque a fileira de cards da supervisão QUEBRA em duas linhas em tela
         estreita, e quem o escreve é o pintor, medindo. Com o valor cravado, o trilho grudava
         no lugar errado exatamente quando a fileira crescia. O `--space-3` fica como folga
         somada, para o trilho não encostar no que está acima. */
      position: sticky; top: calc(var(--sup-cards-h, 0px) + var(--space-3));
    }
    .precs-supconv-trilho-topo{
      display: flex; flex-direction: column; gap: var(--space-0);
      padding: var(--space-3) var(--space-3) var(--space-2);
      border-bottom: 1px solid var(--border-color);
    }
    .precs-supconv-trilho-tit{
      font-family: var(--font-rotulo);
      font-size: var(--fs-2); font-weight: 700; color: var(--text-primary);
      letter-spacing: var(--ls-caps); text-transform: uppercase;
    }
    /* O RECORTE DE EQUIPE é declarado sempre (ver `precsSupConvPintarTrilho`): um gestor que vê
       6 de 14 sem saber disso conclui que a operação inteira são 6. */
    .precs-supconv-recorte{
      font-size: var(--fs-1); color: var(--text-muted);
      font-family: var(--font-num);
    }
    /* (21/09/2026) A BUSCA NO TRILHO: um campo discreto sob o título, no corpo do chip. Esconde
       por `hidden`, e a regra de display existe porque o chip declara `display:flex` (display
       de autor vence o atributo, e já mordeu quatro vezes neste projeto). */
    .precs-supconv-trilho-busca{
      width: 100%; margin-top: var(--space-2); padding: var(--space-1) var(--space-2);
      font-family: var(--font-corpo); font-size: var(--fs-2); color: var(--text-primary);
      background: var(--bg-primary); border: 1px solid var(--border-color);
      border-radius: var(--radius-inner);
      transition: border-color var(--dur-1) var(--ease-1);
    }
    .precs-supconv-trilho-busca::placeholder{ color: var(--text-muted); }
    .precs-supconv-trilho-busca:focus-visible{ outline: 2px solid var(--precs-gold); outline-offset: 1px; }
    .precs-supconv-op[hidden]{ display: none; }
    .precs-supconv-trilho-vazio{
      padding: var(--space-3); font-size: var(--fs-1); color: var(--text-muted); text-align: center;
    }
    .precs-supconv-trilho-vazio[hidden]{ display: none; }
    .precs-supconv-trilho{
      display: flex; flex-direction: column;
      max-height: calc(100vh - 300px); overflow-y: auto; overscroll-behavior: contain;
    }
    /* (1.1.60) A PISTA DE QUE A LISTA CONTINUA. Com treze operadores o trilho corta o último
       chip pela metade, e meio chip na borda lê como defeito de layout e não como "rola".
       O degradê fixo no rodapé da coluna é o sinal, e ele desliga sozinho quando a lista chega
       ao fim (`scroll-timeline` não é opção estável aqui, então o gradiente é permanente e
       discreto — ele só aparece sobre conteúdo, porque o fim da lista deixa fundo liso). */
    .precs-supconv-trilho-wrap{ position: sticky; }
    .precs-supconv-trilho-wrap::after{
      content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 28px;
      pointer-events: none; border-radius: 0 0 var(--radius-card) var(--radius-card);
      background: linear-gradient(180deg, transparent, var(--bg-secondary));
    }

    /* ---- O CHIP DE OPERADOR ---------------------------------------------- */
    .precs-supconv-op{
      display: flex; align-items: center; gap: var(--space-2);
      width: 100%; padding: var(--space-2) var(--space-3);
      background: transparent; border: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
      color: var(--text-primary); text-align: left; cursor: pointer;
      /* NUNCA `transition: all`. Além de animar propriedades que ninguém pediu, ele faz um
         teste que mede cor computada logo depois de um clique ler o valor DE PARTIDA e passar
         achando que mediu o de chegada — a armadilha já registrada em `medir cor em teste`. */
      transition: background-color var(--dur-1) var(--ease-1),
                  box-shadow var(--dur-1) var(--ease-1);
    }
    .precs-supconv-op:last-child{ border-bottom: 0; }
    .precs-supconv-op:hover:not(:disabled){
      background: color-mix(in srgb, var(--precs-gold) 8%, transparent);
    }
    /* O SELECIONADO tem BORDA e não só sombra, e isso é requisito de teste e de leitura: o
       `teste-temas-render.js` cobra 3:1 entre um controle e o fundo atrás dele nas dez paletas,
       e sombra colorida não sobrevive ao tema de alto contraste. A faixa dourada à esquerda é
       forma, então ela lê igual em qualquer paleta e para quem não distingue as cores. */
    .precs-supconv-op.sel{
      background: color-mix(in srgb, var(--precs-gold) 14%, var(--bg-primary));
      box-shadow: inset 3px 0 0 0 var(--precs-gold);
    }
    .precs-supconv-op:focus-visible{
      outline: 2px solid var(--precs-gold); outline-offset: -2px;
    }
    /* RAMAL SEM CAIXA NO SERVIDOR: o chip não promete o que não entrega. Cartão que erra
       sempre ensina o gestor a desconfiar da tela inteira, então ele fica desabilitado e o
       motivo vai no balão (e o conserto é o env da Lambda, não o operadores.json). */
    /* (1.1.60) SEM `opacity`, E ISSO E REGRESSAO CONSERTADA E NAO GOSTO.
       O arquivo vizinho registra, no chip `.zero`, que `opacity` SAIU dos chips por dar cerca
       de 1,9:1 de contraste no tema claro, e que o substituto e trocar a COR. Esta aba nasceu
       depois e reintroduziu o que a vizinha tinha removido — com o comentario da decisao a
       trezentas linhas de distancia.
       Agora o chip bloqueado se apaga por cor, que sobrevive ao tema claro e ao Contraste. */
    .precs-supconv-op.bloq{
      cursor: not-allowed;
    }
    .precs-supconv-op.bloq .precs-supconv-op-nome{ color: var(--text-muted); }
    .precs-supconv-op.bloq .precs-sup-av{ filter: grayscale(1); }
    .precs-supconv-op-foto{ flex: 0 0 auto; display: inline-flex; }
    /* O avatar cresce para 40px aqui: nesta coluna a foto é a forma que o gestor reconhece
       antes de ler o nome. O anel colorido do avatar é escopado a `.precs-sup-linha[data-ag]`
       no arquivo da supervisão, então aqui ele sai com o aro neutro — e é o certo, porque
       nesta tela a cor não codifica estado de operador. */
    .precs-supconv-op .precs-sup-av{ width: 40px; height: 40px; }
    .precs-supconv-op .precs-sup-av img{ width: 40px; height: 40px; }
    .precs-supconv-op-txt{
      flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px;
    }
    .precs-supconv-op-nome{
      font-family: var(--font-corpo);
      font-size: var(--fs-3); font-weight: 600; color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .precs-supconv-op-sub{
      display: flex; align-items: center; gap: 6px; min-height: 12px;
    }
    /* A FAIXINHA ENCOLHE AQUI, e ela precisa: o SVG nasce com 96x16 nos atributos (é o tamanho
       do resumo do operador, onde ela é o assunto), e num trilho de 232px isso deixa a faixa
       mais larga que o nome ao lado. Aqui ela é uma pista secundária — quem identifica é a
       foto e o nome —, então vai para 52px e continua legível: o desenho dela é banda mais
       ponteira mais graus, e nenhum dos três depende de tamanho para ser reconhecido. */
    /* (1.1.61) ESTE 52px E A UNICA EXCECAO ao tamanho padrao de faixa (66x11), e ele ficou por
       MEDICAO e nao por gosto. No pior caso do chip (faixa + pastilha de paleta de 30px + selo
       "sem caixa" de 52px), a sub-linha oferece 160px dentro do trilho de 232px; com a faixa em
       66px o conteudo precisa de exatamente 160px. Zero de folga nao e "cabe": um selo com uma
       palavra a mais, uma quinta cor na paleta ou uma fonte um fio mais larga quebram a linha.
       Com 52px sobram 13px. Se um dia o trilho alargar, este numero e o primeiro a rever. */
    .precs-supconv-op-sub .precs-faixinha svg{ width: 52px; height: 9px; }
    /* (1.1.61) 66x11, QUE E O UNICO TAMANHO DE FAIXA DO PAINEL DEPOIS DESTA LEVA. Eram 58x10
       aqui, 52x9 no chip ao lado, 40x6,7 na tabela de Operadores e 96x16 na ficha e na parede
       (esses dois por falta de regra, e nao por escolha): cinco tamanhos para o mesmo emblema.
       O numero vem do modo denso da tabela, que e o modo apertado do painel.
       ELE MORA AQUI E NAO NO COMPONENTE porque este cabecalho e desenhado com `semRaiz`: sem
       elemento de raiz nao ha a classe de degrau em que as medidas do componente se penduram,
       e a regra passa a ser do contexto. Ver `precsSupConvPintarCab`. */
    .precs-supconv-cab-sub .precs-faixinha svg{ width: 66px; height: 11px; }
    .precs-supconv-op-bloq{
      font-size: var(--fs-1); font-style: normal; color: var(--accent-orange-text);
      letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 700;
    }

    /* A PASTILHA DA PALETA: as quatro cores DECLARADAS do tema da operadora (`d1..d4` do
       catálogo em index.html), e não o tema aplicado. É o mesmo desenho que a galeria de temas
       usa nos cartões, e serve para o gestor reconhecer a caixa antes de abrir. */
    .precs-supconv-pal{
      display: inline-flex; flex: 0 0 auto; border-radius: var(--radius-pill);
      overflow: hidden; border: 1px solid color-mix(in srgb, var(--text-primary) 22%, transparent);
      cursor: help;
    }
    .precs-supconv-pal i{ display: block; width: 7px; height: 11px; }

    /* O SELO DO TRABALHO PARADO. "Aguardando" e não "não lidas": não lida é estado de quem
       OLHA (vive no localStorage de cada estação, e o servidor não tem como saber), e o que o
       servidor sabe é melhor para um supervisor — quantas conversas estão com a última palavra
       do credor. */
    .precs-supconv-selo{
      flex: 0 0 auto; min-width: 20px; padding: 1px 5px;
      border-radius: var(--radius-pill);
      background: var(--accent-orange); color: var(--on-accent-ink);
      font-family: var(--font-num);
      font-size: var(--fs-1); font-weight: 700; text-align: center;
    }
    /* A LEITURA QUE FALHOU não mostra zero: zero mentiria dizendo "nada esperando". */
    .precs-supconv-selo.err{
      background: transparent; color: var(--text-muted);
      border: 1px dashed var(--border-color);
    }

    /* ---- O CABEÇALHO DE IDENTIDADE --------------------------------------- */
    /* (1.1.60) O PADDING DO PAINEL, e nao o de um controle. Ele era `8px 12px` — metade do
       `16px 20px` que `.panel-header` usa nas outras tres sub-abas —, e lado a lado na mesma
       aba isso fazia a caixa de Conversas ler como uma barra de ferramentas em vez de como o
       cabecalho de um painel. Mesma tela, mesma hierarquia, mesmo respiro. */
    .precs-supconv-cab{
      display: flex; align-items: center; gap: var(--space-3);
      padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
      background: var(--bg-secondary); border: 1px solid var(--border-color);
      border-radius: var(--radius-card);
    }
    .precs-supconv-cab[hidden]{ display: none; }
    /* (1.1.61) `.precs-supconv-cab-foto` SAIU: o componente de identidade emite o avatar direto,
       e `.precs-sup-av` ja declara `flex:0 0 auto` e `display:inline-flex`, que era tudo o que
       este embrulho fazia. O chip do trilho conserva o dele (`precs-supconv-op-foto`), porque
       aquele markup nao foi migrado nesta leva. */
    /* (1.1.60) 40px, IGUAL AO DO TRILHO AO LADO. Eram tres tamanhos de avatar vivos na mesma
       aba (30px nas tabelas, 34px aqui, 40px no trilho), e o 34px era o unico dos tres sem
       motivo escrito. O do trilho tem (a foto e a forma que o gestor reconhece antes de ler o
       nome) e vale igual aqui, que e a mesma pessoa a 200px de distancia. */
    .precs-supconv-cab .precs-sup-av{ width: 40px; height: 40px; }
    .precs-supconv-cab .precs-sup-av img{ width: 40px; height: 40px; }
    .precs-supconv-cab-txt{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .precs-supconv-cab-nome{
      font-family: var(--font-titulo);
      font-size: var(--fs-4); font-weight: 600; color: var(--text-primary);
    }
    .precs-supconv-cab-sub{
      display: flex; align-items: center; gap: 6px;
      font-size: var(--fs-1); color: var(--text-muted);
      font-family: var(--font-num);
    }
    .precs-supconv-cab-selos{
      margin-left: auto; display: flex; align-items: center; gap: var(--space-2);
      flex-wrap: wrap; justify-content: flex-end;
    }

    /* O SELO DE RESPONSABILIDADE, e ele fica na tela o tempo todo.
       LARANJA E NÃO VERMELHO, pelo motivo já cravado no selo do espelho: não é erro, é
       responsabilidade. O risco aqui não é técnico — é o credor receber, assinada pela
       operadora, uma resposta que ela não escreveu. */
    .precs-supconv-selo-resp{
      flex: 0 0 auto; padding: 3px 9px; border-radius: var(--radius-pill);
      font-family: var(--font-rotulo);
      font-size: var(--fs-1); font-weight: 700;
      letter-spacing: var(--ls-caps); text-transform: uppercase;
      color: var(--accent-orange-text); cursor: help;
      border: 1px solid color-mix(in srgb, var(--accent-orange) 55%, transparent);
      background: color-mix(in srgb, var(--accent-orange) 12%, transparent);
    }

    /* O SELO DA PALETA, em três estados, e cada um diz uma verdade diferente:
         `.on`  — a tela inteira está na paleta dela (o tema foi aplicado na raiz);
         `.off` — sabemos qual é, mas a tela está na paleta do gestor;
         `.pad` — ela nunca trocou de tema, então não há paleta dela para trazer.
       O terceiro existe para a tela NÃO deixar o gestor concluir que o padrão é a escolha
       dela: é a mesma disciplina do `nomeDaAgenda` no servidor. */
    .precs-supconv-tema{
      flex: 0 0 auto; padding: 3px 9px; border-radius: var(--radius-pill);
      font-size: var(--fs-1); font-weight: 600; cursor: help;
      border: 1px solid var(--border-color); color: var(--text-secondary);
    }
    .precs-supconv-tema.on{
      color: var(--precs-gold-title);
      border-color: color-mix(in srgb, var(--precs-gold) 55%, transparent);
      background: color-mix(in srgb, var(--precs-gold) 12%, transparent);
    }
    .precs-supconv-tema.pad{ color: var(--text-muted); border-style: dashed; }

    /* (1.1.60) O MESMO CORPO E O MESMO PADDING DO `.precs-supwa-btn`, que e o botao de
       comando das outras tres sub-abas. Medido antes: 20px de altura contra 33px do vizinho,
       com 9px de corpo de letra. Nove pixels e legenda, nao alvo de clique de trabalho — e
       dois botoes de comando com quase o dobro de altura um do outro na mesma tela nao tem
       explicacao possivel. */
    .precs-supconv-sw{
      flex: 0 0 auto; padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-inner);
      background: var(--bg-primary); color: var(--text-secondary);
      border: 1px solid var(--border-color); cursor: pointer;
      font-family: var(--font-acao);
      font-size: var(--fs-4); font-weight: 600;
      transition: color var(--dur-1) var(--ease-1), border-color var(--dur-1) var(--ease-1);
    }
    .precs-supconv-sw:hover{ color: var(--text-primary); border-color: var(--precs-gold); }
    .precs-supconv-sw:focus-visible{ outline: 2px solid var(--precs-gold); outline-offset: 2px; }

    /* (21/09/2026) O MENU DA PALETA. O selo da paleta virou o botão de um `<details>`: a amostra e
       o selo ficam à vista, as três posições abrem embaixo, ancoradas à direita. Entra com a mesma
       curva de entrada dos blocos desta aba. Seis controles em linha viraram três. */
    .precs-supconv-paleta{ position: relative; flex: 0 0 auto; display: inline-flex; }
    .precs-supconv-paleta-sum{
      display: inline-flex; align-items: center; gap: var(--space-2);
      background: transparent; border: 0; padding: 0; font: inherit; color: inherit;
      cursor: pointer; border-radius: var(--radius-pill);
    }
    .precs-supconv-paleta-sum .precs-supconv-tema{ cursor: pointer; }
    .precs-supconv-paleta-sum:hover .precs-supconv-tema{ border-color: var(--precs-gold); color: var(--text-primary); }
    .precs-supconv-paleta-sum:focus-visible{ outline: 2px solid var(--precs-gold); outline-offset: 2px; }
    /* A seta é forma (borda girada), então segue a cor do texto em qualquer paleta. */
    .precs-supconv-paleta-seta{
      width: 6px; height: 6px; flex: 0 0 auto;
      border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
      transform: translateY(-2px) rotate(45deg);
      transition: transform var(--dur-1) var(--ease-1);
    }
    .precs-supconv-paleta-sum.aberto .precs-supconv-paleta-seta{ transform: translateY(2px) rotate(225deg); }
    /* `popover`: o navegador o põe na CAMADA SUPERIOR, acima de tudo e sem z-index, e fecha no
       clique fora. `inset:auto; margin:0` desfazem a centralização padrão do agente, e o JS
       escreve `top/left` medidos do botão. Sem `display` declarado de propósito: é o agente
       quem o mostra e esconde, e display de autor venceria a regra dele. */
    .precs-supconv-paleta-menu{
      position: fixed; inset: auto; margin: 0;
      min-width: 280px; padding: var(--space-3);
      color: var(--text-primary);
      background: var(--bg-secondary); border: 1px solid var(--border-color);
      border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
      animation: precsSupConvEntra var(--dur-2) var(--ease-2) both;
    }
    .precs-supconv-paleta-menu.sem-popover[hidden]{ display: none; }
    .precs-supconv-paleta-tit{
      font-family: var(--font-rotulo); font-size: var(--fs-1); font-weight: 700;
      letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
      margin-bottom: var(--space-2);
    }
    .precs-supconv-paleta-menu .precs-seg{ flex-direction: column; align-items: stretch; }
    .precs-supconv-paleta-menu .precs-seg button{ text-align: left; justify-content: flex-start; }

    /* (1.1.60) `.precs-supconv-corpo` ERA UMA CLASSE MORTA: ela existia no markup e nao tinha
       uma unica regra em nenhum dos nove arquivos. Em vez de apagar o nome (ele e estrutural,
       e a segunda coluna da grade), ela ganhou a regra que sempre devia ter tido.

       `min-width: 0` NAO e decoracao. O `minmax(0, 1fr)` da trilha resolve o MINIMO da trilha,
       mas o item de grade continua com `min-width: auto`, e item com conteudo de largura
       intrinseca grande (uma bolha de midia, um nome de modelo sem espaco) estoura a trilha
       por cima desse auto. E a mesma correcao que a grade do inbox e a do `-wrap` carregam,
       aplicada no degrau que faltava entre as duas. */
    .precs-supconv-corpo{ min-width: 0; }

    /* ---- O PALCO e o estado vazio ---------------------------------------- */
    /* O palco NASCE VAZIO no HTML e recebe o `#whatsapp-section` reparentado por
       `precsWaAncorar`. A altura mora AQUI e não no `.precs-wa-wrap` de dentro, porque é ela
       que define o quanto da janela sobra depois do cromo da supervisão (header, faixa de
       abas, cabeçalho de identidade). A divisão pela escala é a mesma conta do modo cheio: o
       `<main>` carrega o zoom da densidade, e altura em `vh` dentro dele precisa ser
       compensada, senão quem está no confortável perde o rodapé da conversa. */
    .precs-supconv-palco{
      position: relative;
      /* (1.1.60) 268px VIROU 296px, e o motivo e o cabecalho de identidade: ele ganhou o
         padding de painel (16px em cima e embaixo, no lugar de 8px) e cresceu 28px, entao o
         palco passou a terminar 20px ABAIXO da borda da janela e o compositor encostava.
         Medido em 1600x1000: o topo do palco fica em 288px de tela, e os 8px que sobram sao a
         folga para o rodape nao colar na borda. A constante e afinada para UMA densidade, como
         a `130px` da regra base do inbox — mudar o cromo de cima obriga a remedir. */
      height: calc((100vh - 296px) / var(--precs-escala, 1));
      min-height: 440px;
    }
    .precs-supconv-palco[hidden]{ display: none; }

    .precs-supconv-vazio{
      display: flex; align-items: center; justify-content: center;
      min-height: 440px; padding: var(--space-6);
      background: var(--bg-secondary); border: 1px dashed var(--border-color);
      border-radius: var(--radius-card);
      animation: precsSupConvEntra var(--dur-3) var(--ease-2);
    }
    .precs-supconv-vazio[hidden]{ display: none; }
    .precs-supconv-vazio-miolo{
      display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
      max-width: 40ch; text-align: center; color: var(--text-muted);
    }
    .precs-supconv-vazio-miolo b{
      font-family: var(--font-titulo);
      font-size: var(--fs-4); color: var(--text-primary); font-weight: 600;
    }
    .precs-supconv-vazio-miolo span{ font-size: var(--fs-2); }
    .precs-supconv-vazio-miolo svg{ color: var(--precs-gold); }

    .precs-supconv-erro{
      display: flex; flex-direction: column; gap: var(--space-2);
      max-width: 60ch; color: var(--text-secondary);
    }
    .precs-supconv-erro b{
      font-family: var(--font-titulo);
      font-size: var(--fs-4); color: var(--accent-red-text);
    }
    .precs-supconv-erro span{ font-size: var(--fs-2); }

    /* ---- O RETRATO DA CAIXA (o painel vazio, com operador escolhido) ------ */
    /* Ele vive DENTRO do `#precs-wa-thread`, no lugar do "Selecione uma conversa" do operador
       (ver o gancho em `precsWaPintarThread`). Por isso o padding generoso: aquele espaço são
       cerca de 1250x700px, e um bloco pequeno centrado ali pareceria um erro de carregamento. */
    .precs-supconv-res{
      display: flex; flex-direction: column; gap: var(--space-5);
      max-width: 62ch; margin: 0 auto; padding: var(--space-8) var(--space-6);
      animation: precsSupConvEntra var(--dur-3) var(--ease-2);
    }
    .precs-supconv-res-tit{
      display: flex; flex-direction: column; gap: var(--space-0);
      font-family: var(--font-titulo); font-size: var(--fs-9);
      font-weight: 600; color: var(--text-primary);
    }
    .precs-supconv-res-tit span{
      font-family: var(--font-num); font-size: var(--fs-1);
      font-weight: 400; color: var(--text-muted);
    }
    .precs-supconv-res-nums{
      display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: var(--space-3);
    }
    /* O mesmo desenho do `.precs-sup-card` das outras três sub-abas: filete à esquerda, raio de
       card, fundo de superfície. O gestor não precisa aprender um segundo objeto de número. */
    .precs-supconv-res-n{
      display: flex; flex-direction: column; gap: var(--space-0);
      padding: var(--space-3) var(--space-4);
      background: var(--bg-secondary); border: 1px solid var(--border-color);
      border-left: 3px solid var(--precs-gold); border-radius: var(--radius-card);
    }
    /* Cor de estado SÓ quando há trabalho parado, que é a mesma regra dos KPIs das outras
       abas: ouro é contexto, laranja é "isto pede atenção". Zero aguardando fica dourado. */
    .precs-supconv-res-n.atencao{ border-left-color: var(--accent-orange); }
    .precs-supconv-res-v{
      font-family: var(--font-num); font-size: var(--fs-11);
      font-weight: 700; line-height: 1; color: var(--text-primary);
    }
    .precs-supconv-res-n span{
      font-family: var(--font-rotulo); font-size: var(--fs-2);
      letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
    }
    .precs-supconv-res-n em{
      font-style: normal; font-size: var(--fs-1); color: var(--text-secondary);
    }
    .precs-supconv-res-n.atencao em{ color: var(--accent-orange-text); }
    .precs-supconv-res-sub{
      font-family: var(--font-rotulo); font-size: var(--fs-2); font-weight: 700;
      letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
      margin-bottom: var(--space-2);
    }
    .precs-supconv-res-chips{ display: flex; flex-wrap: wrap; gap: var(--space-2); }
    /* O invólucro do chip com o contador. O chip em si é o `.precs-wa-etiq` do operador, sem
       uma linha de CSS nova: etiqueta é vocabulário do time, e desenhá-la de dois jeitos
       obrigaria a reaprendê-la ao trocar de tela. */
    .precs-supconv-res-chip{ display: inline-flex; align-items: center; gap: var(--space-1); }
    .precs-supconv-res-chip i{
      font-style: normal; font-family: var(--font-num); font-size: var(--fs-1);
      color: var(--text-muted);
    }
    .precs-supconv-res-pe{
      font-size: var(--fs-2); color: var(--text-muted); max-width: 52ch;
    }
    @media (prefers-reduced-motion: reduce){
      .precs-supconv-res{ animation: none; }
    }

    /* ========================================================================
       O TERCEIRO ENQUADRAMENTO: `html[data-wa-emb]`
       ------------------------------------------------------------------------
       Três perguntas, três atributos, uma resposta cada — é o contrato escrito no comentário
       de `precsWaVistaSincronizar` (app.js):
         `data-wa`        — isto é tela cheia colada no header?
         `data-wa-drawer` — isto é um painel flutuante?
         `data-wa-emb`    — isto está embutido em outra tela?     (este)
       `data-wa-vista` (lista | thread) continua respondendo o que está na tela, nos três.

       `data-wa` e `data-wa-emb` NUNCA coexistem, e é bom que não: trazer o
       `html[data-wa] body{ overflow: hidden }` para a supervisão travaria a rolagem da tela
       inteira do gestor.

       E ESTE BLOCO RESSUSCITA CÓDIGO MORTO. A regra BASE de `.precs-wa-wrap`
       (30-whatsapp.css, no topo) declara moldura, raio, `max-width: 1600px` e altura por
       `calc`, e o comentário de lá registra que aquele teto era caminho morto: `data-wa` é o
       único estado em que a section fica ativa, e ele sobrescreve tudo. Aqui a regra base
       volta a valer, com três ajustes — sem teto de largura (a supervisão dá o quanto tem),
       sem moldura própria (a moldura é o palco) e altura de 100% (quem manda é o palco).
       ======================================================================== */
    html[data-wa-emb] #whatsapp-section.section{
      /* O nó não tem `.active` aqui: quem está ativa é a `#admin-section`. É a mesma técnica
         que `html[data-wa-drawer] #whatsapp-section.section` já usa para o painel lateral. */
      display: block; height: 100%;
    }
    html[data-wa-emb] .precs-wa-wrap{
      max-width: none; margin: 0; height: 100%;
      border-radius: var(--radius-card);
    }
    /* O ✕ DO PAINEL SAI: a moldura é a aba, e não há o que fechar. A guarda de verdade está no
       `precsWaAlternar` (que sai cedo sob `emb`), porque guarda que depende de o CSS estar
       certo não é guarda — esta regra só evita oferecer o gesto. */
    html[data-wa-emb] .precs-wa-drawer-x{ display: none; }
    /* A BARRA DO ESPELHO TAMBÉM SAI. O trilho é o seletor desta tela, e dois seletores da
       mesma coisa na mesma tela é o defeito que a 1.1.40 consertou no `data-wa-vista`. Ela só
       apareceria para um gestor que tivesse `whatsappEspelho` no cadastro, e é justamente esse
       caso que precisa da regra. */
    html[data-wa-emb] #precs-wa-espelho{ display: none; }

    /* ---- O que se MOVE aqui ---------------------------------------------- */
    /* Entrada deliberada de bloco: `--dur-3` com `--ease-2`, que é a curva de ENTRADA (freia
       longo). Os mesmos papéis dos tokens de 00-base.css, sem inventar curva nova. */
    @keyframes precsSupConvEntra{
      from{ opacity: 0; transform: translateY(6px); }
      to{ opacity: 1; transform: translateY(0); }
    }
    /* O CHIP NOVO ENTRA DESLIZANDO DA ESQUERDA, e a classe é aplicada por assinatura (só quando
       o trilho REPINTA de verdade): sem isso a animação se reencenaria a cada tique, que é a
       armadilha já documentada em `etiquetasPintadas`. */
    @keyframes precsSupConvChip{
      from{ opacity: 0; transform: translateX(-10px); }
      to{ opacity: 1; transform: translateX(0); }
    }
    .precs-supconv-trilho .precs-supconv-op{
      animation: precsSupConvChip var(--dur-2) var(--ease-2) both;
    }
    /* A ENTRADA EM CASCATA, e o teto de seis é deliberado: a partir daí o atraso somado passa
       a ser espera, e catorze chips com 40ms cada dariam meio segundo até o último aparecer.
       Do sétimo em diante todos entram juntos, no atraso do sexto. */
    .precs-supconv-trilho .precs-supconv-op:nth-child(1){ animation-delay: 0ms; }
    .precs-supconv-trilho .precs-supconv-op:nth-child(2){ animation-delay: 30ms; }
    .precs-supconv-trilho .precs-supconv-op:nth-child(3){ animation-delay: 60ms; }
    .precs-supconv-trilho .precs-supconv-op:nth-child(4){ animation-delay: 90ms; }
    .precs-supconv-trilho .precs-supconv-op:nth-child(5){ animation-delay: 120ms; }
    .precs-supconv-trilho .precs-supconv-op:nth-child(n+6){ animation-delay: 160ms; }
    /* O PALCO CRUZA na troca de operador. `.pm-fade` (60-campanhas-e-tv.css) é a classe
       utilitária que a faixa de abas e as sub-abas já usam, com o truque de reflow em JS. */
    .precs-supconv-palco{ animation: precsSupConvEntra var(--dur-3) var(--ease-2); }

    /* ---- Telas estreitas ------------------------------------------------- */
    /* Abaixo de 1100px o trilho vira uma FILEIRA horizontal em cima, e não uma coluna
       espremida: 232px de trilho mais o inbox de duas colunas não cabem, e o que se perde
       primeiro é justamente a conversa. Em aparelho (`data-aparelho`, o atributo único de
       "isto é um celular?") a mesma regra vale por outro caminho. */
    @media (max-width: 1100px){
      .precs-supconv-wrap{ grid-template-columns: minmax(0, 1fr); }
      .precs-supconv-trilho-wrap{ position: static; }
      .precs-supconv-trilho{
        flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden;
      }
      .precs-supconv-op{
        width: auto; flex: 0 0 auto; border-bottom: 0;
        border-right: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
      }
      .precs-supconv-op.sel{ box-shadow: inset 0 -3px 0 0 var(--precs-gold); }
      .precs-supconv-op-nome{ max-width: 14ch; }
      .precs-supconv-palco{ height: calc((100vh - 368px) / var(--precs-escala, 1)); }
    }

    /* ---- Movimento reduzido ---------------------------------------------- */
    /* Todo bloco de animação deste projeto tem o par, e este cobre as três coisas que se movem
       aqui: a entrada do palco, a entrada do vazio e a cascata dos chips. A transição de cor do
       hover FICA: ela é feedback de ponteiro na duração mais curta da escala, e não movimento. */
    @media (prefers-reduced-motion: reduce){
      .precs-supconv-palco,
      .precs-supconv-vazio,
      .precs-supconv-trilho .precs-supconv-op{ animation: none; }
    }

    /* ========================================================================
       (19/09/2026) PERÍODO, TEMA NO CARD, INDICADOR DO TRILHO E O QUE SE MOVE
       ------------------------------------------------------------------------
       Tudo por token, e no FIM da folha: o gate de publicação exige 20 KB por arquivo de CSS,
       então regra nova entra numa folha que já existe. `[hidden]` sempre com o par
       `display:none`, porque display de autor vence a regra de UA (a armadilha que já mordeu
       quatro vezes neste projeto). Sem `@media (max-width)`: aparelho é `html[data-aparelho]`.
       ======================================================================== */

    /* ---- O filtro de período -------------------------------------------- */
    /* Recentes é o de sempre (as 30 com movimento mais recente, de QUALQUER dia); os outros
       cinco recortam. O par de datas é markup estático (ver index.html) e só alterna `hidden`. */
    .precs-supconv-filtro{
      display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
      padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
      background: var(--bg-secondary); border: 1px solid var(--border-color);
      border-radius: var(--radius-card);
    }
    .precs-supconv-filtro[hidden]{ display: none; }
    .precs-supconv-filtro-seg{ flex: 0 0 auto; }
    .precs-supconv-filtro-seg button{ flex: 0 0 auto; font-size: var(--fs-2); }
    .precs-supconv-filtro-datas{ display: flex; align-items: center; gap: var(--space-2); }
    .precs-supconv-filtro-datas[hidden]{ display: none; }
    .precs-supconv-filtro-datas span{ font-size: var(--fs-2); color: var(--text-muted); }
    .precs-supconv-filtro-datas input{
      font-family: var(--font-num); font-size: var(--fs-2); color: var(--text-primary);
      background: var(--bg-primary); border: 1px solid var(--border-color);
      border-radius: var(--radius-inner); padding: var(--space-1) var(--space-2);
    }
    .precs-supconv-filtro-datas input:focus-visible{
      outline: 2px solid var(--precs-gold); outline-offset: 1px;
    }
    .precs-supconv-filtro-datas input[hidden]{ display: none; }

    /* ---- O CALENDÁRIO PRECS (21/09/2026) --------------------------------- */
    /* O botão que abre: ícone, o intervalo em numerais e uma seta. Mesmo corpo do `.precs-seg`. */
    .precs-cal-btn{
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: var(--space-1) var(--space-3); border-radius: var(--radius-inner);
      background: var(--bg-primary); border: 1px solid var(--border-color);
      color: var(--text-primary); font-family: var(--font-num); font-size: var(--fs-4);
      cursor: pointer; transition: border-color var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1);
    }
    .precs-cal-btn svg{ flex: 0 0 auto; color: var(--precs-gold-title); }
    .precs-cal-btn:hover, .precs-cal-btn.aberto{ border-color: var(--precs-gold); }
    .precs-cal-btn:focus-visible{ outline: 2px solid var(--precs-gold); outline-offset: 2px; }
    /* A seta é forma (borda girada) e serve ao botão e à navegação de mês. */
    .precs-cal-seta{
      width: 6px; height: 6px; flex: 0 0 auto; display: inline-block;
      border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
      transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-1) var(--ease-1);
    }
    .precs-cal-btn.aberto .precs-cal-seta{ transform: translateY(2px) rotate(225deg); }
    .precs-cal-nav .precs-cal-seta{ transform: rotate(-45deg); }
    .precs-cal-nav .precs-cal-seta.esq{ transform: rotate(135deg); }
    /* O popover: camada superior, sem z-index; `inset:auto; margin:0` desfazem a centralização
       do agente e o JS escreve top/left sob o botão. Sem `display` declarado (o agente mostra e
       esconde, e display de autor venceria a regra dele). */
    .precs-cal-pop{
      position: fixed; inset: auto; margin: 0; width: 304px; padding: var(--space-3);
      color: var(--text-primary); background: var(--bg-secondary);
      border: 1px solid var(--border-color); border-radius: var(--radius-card);
      box-shadow: var(--shadow-lg);
      animation: precsSupConvEntra var(--dur-2) var(--ease-2) both;
    }
    .precs-cal-cab{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
    .precs-cal-mes{
      font-family: var(--font-titulo); font-size: var(--fs-6); font-weight: 600;
      text-transform: capitalize; color: var(--text-primary);
    }
    .precs-cal-mes span{ color: var(--text-muted); font-weight: 500; }
    .precs-cal-nav{ display: inline-flex; gap: var(--space-1); }
    .precs-cal-nav button{
      width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-pill); border: 1px solid var(--border-color);
      background: transparent; cursor: pointer;
      transition: border-color var(--dur-1) var(--ease-1), background-color var(--dur-1) var(--ease-1);
    }
    .precs-cal-nav button:hover:not(:disabled){ border-color: var(--precs-gold); background: color-mix(in srgb, var(--precs-gold) 10%, transparent); }
    .precs-cal-nav button:disabled{ cursor: not-allowed; border-color: color-mix(in srgb, var(--border-color) 50%, transparent); }
    .precs-cal-nav button:disabled .precs-cal-seta{ border-color: color-mix(in srgb, var(--text-muted) 45%, transparent); }
    .precs-cal-sem{ display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--space-1); }
    .precs-cal-sem span{
      text-align: center; font-family: var(--font-rotulo); font-size: var(--fs-1); font-weight: 700;
      letter-spacing: var(--ls-caps); color: var(--text-muted);
    }
    /* O MÊS DESLIZA: a grade nasce com a classe da direção e a animação roda uma vez. */
    @keyframes precsCalEsq{ from{ opacity: 0; transform: translateX(14px); } to{ opacity: 1; transform: none; } }
    @keyframes precsCalDir{ from{ opacity: 0; transform: translateX(-14px); } to{ opacity: 1; transform: none; } }
    .precs-cal-grade{ display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--space-0); }
    .precs-cal-grade.esq{ animation: precsCalEsq var(--dur-2) var(--ease-2) both; }
    .precs-cal-grade.dir{ animation: precsCalDir var(--dur-2) var(--ease-2) both; }
    .precs-cal-dia{
      height: 34px; border: 0; background: transparent; color: var(--text-primary);
      font-family: var(--font-num); font-size: var(--fs-4); cursor: pointer;
      border-radius: var(--radius-pill);
      transition: background-color var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1);
    }
    .precs-cal-dia.fora{ color: var(--text-muted); }
    .precs-cal-dia:disabled{ color: color-mix(in srgb, var(--text-muted) 40%, transparent); cursor: not-allowed; }
    .precs-cal-dia:hover:not(:disabled){ background: color-mix(in srgb, var(--precs-gold) 16%, transparent); }
    .precs-cal-dia.hoje{ outline: 1px solid var(--precs-gold); outline-offset: -1px; }
    /* A FAIXA: início e fim com aro e tinta forte, o miolo em ouro diluído, e a prévia (enquanto
       só o início está marcado) mais leve, para o gestor ver o intervalo antes de fechá-lo. */
    .precs-cal-dia.entre{ background: color-mix(in srgb, var(--precs-gold) 18%, transparent); border-radius: 0; }
    .precs-cal-dia.entre.previa{ background: color-mix(in srgb, var(--precs-gold) 9%, transparent); }
    .precs-cal-dia.ini, .precs-cal-dia.fim{
      background: color-mix(in srgb, var(--precs-gold) 28%, var(--bg-primary));
      color: var(--text-primary); font-weight: 700;
      outline: 2px solid var(--precs-gold); outline-offset: -2px;
    }
    .precs-cal-dia.ini:not(.fim){ border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
    .precs-cal-dia.fim:not(.ini){ border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
    .precs-cal-pe{
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
      margin-top: var(--space-2); font-size: var(--fs-3); color: var(--text-muted);
    }
    .precs-cal-pe button{
      border: 0; background: transparent; cursor: pointer; padding: 0;
      font-family: var(--font-acao); font-size: var(--fs-4); font-weight: 600; color: var(--precs-gold-title);
    }
    .precs-cal-pe button:hover{ color: var(--text-primary); }
    html[data-luz="claro"] .precs-cal-pe button{ color: var(--text-secondary); }
    /* (21/09/2026) Status e Atualizar num bloco só, à direita, que ENCOLHE antes de quebrar: o
       texto do período pode ocupar duas linhas, e o botão fica colado nele em qualquer largura.
       Antes o status tinha `margin-left:auto` solto e o botão era o item seguinte da barra: em
       1920px com o recorte ligado ele caía sozinho na linha de baixo. */
    .precs-supconv-filtro-dir{
      display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
      margin-left: auto; flex: 1 1 240px; min-width: 0;
    }
    .precs-supconv-filtro-status{
      flex: 0 1 auto; min-width: 0; font-size: var(--fs-1); color: var(--text-muted);
      font-family: var(--font-num); text-align: right;
    }
    .precs-supconv-filtro .precs-supwa-btn[hidden]{ display: none; }
    html[data-aparelho] .precs-supconv-filtro{ flex-direction: column; align-items: stretch; }
    html[data-aparelho] .precs-supconv-filtro-dir{ margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
    html[data-aparelho] .precs-supconv-filtro-status{ text-align: left; }

    /* ---- O recorte DENTRO do inbox (só embutido na supervisão) ---------- */
    /* A contagem de mensagens no período, na linha da conversa. */
    html[data-wa-emb] .precs-wa-conv-qtd{
      flex: 0 0 auto; font-style: normal; font-family: var(--font-num);
      font-size: var(--fs-1); font-weight: 700;
      padding: 0 var(--space-1); border-radius: var(--radius-pill);
      color: var(--precs-gold-title);
      border: 1px solid color-mix(in srgb, var(--precs-gold) 45%, transparent);
    }
    /* As bordas do recorte na thread: "só o que aconteceu entre X e Y", com o passo para o
       período vizinho. */
    html[data-wa-emb] .precs-wa-periodo-borda{
      display: flex; align-items: center; justify-content: center; gap: var(--space-2);
      flex-wrap: wrap; padding: var(--space-3) var(--space-2);
      font-size: var(--fs-1); color: var(--text-muted);
    }
    /* (21/09/2026) A borda é uma PÍLULA, no molde da régua de dia da thread (`.precs-wa-dia`):
       mesma família, mesmas caixas altas, aro dourado discreto. Antes era uma linha de texto
       mono miúda, que lia como log e não como marco do recorte. */
    html[data-wa-emb] .precs-wa-periodo-borda > span{
      display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-pill); background: var(--bg-secondary);
      border: 1px solid color-mix(in srgb, var(--precs-gold) 45%, transparent);
      color: var(--text-secondary); font-family: var(--font-rotulo);
      font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps);
    }
    html[data-wa-emb] .precs-wa-periodo-borda .precs-supconv-sw{
      font-size: var(--fs-2); padding: var(--space-1) var(--space-2);
    }
    html[data-wa-emb] .precs-wa-lista-teto{
      border-top: 1px solid var(--border-color); padding-top: var(--space-2);
    }

    /* ---- O cabeçalho: interruptor de três posições e a amostra ---------- */
    .precs-supconv-temaseg{ flex: 0 0 auto; padding: var(--space-0); }
    .precs-supconv-temaseg button{
      flex: 0 0 auto; font-size: var(--fs-1); padding: var(--space-1) var(--space-2);
    }
    .precs-supconv-cab-pal i{ width: 10px; height: 14px; }

    /* ---- O tema no card ------------------------------------------------- */
    /* Os tokens chegam INLINE no palco (ver `precsSupConvTemaEscopar`); esta regra só faz o
       próprio palco pintar fundo e tinta a partir deles, para não sobrar em volta do inbox uma
       moldura com a cor da página do gestor. */
    .precs-supconv-palco[data-tema-card]{
      background: var(--bg-primary); color: var(--text-primary);
      border-radius: var(--radius-card);
    }

    /* ---- O que se move: o cruzamento do palco e o indicador do trilho --- */
    .precs-supconv-palco{
      transition: opacity var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-1);
    }
    .precs-supconv-palco.trocando{ opacity: 0; transform: translateY(4px); }
    .precs-supconv-trilho{ position: relative; }
    /* Um `<span>` absoluto, último filho do trilho, posicionado por JS (`precsSupConvTrilhoIndicador`).
       Na coluna é a barra à esquerda do chip; na fileira (tela estreita) vira a barra de baixo.
       A transição em top/height (ou left/width) é o que faz ele DESLIZAR entre chips. */
    .precs-supconv-trilho-ind{
      position: absolute; left: 0; width: 3px; pointer-events: none;
      background: var(--precs-gold-forma, var(--precs-gold)); border-radius: var(--radius-pill);
      transition: top var(--dur-2) var(--ease-1), height var(--dur-2) var(--ease-1),
                  left var(--dur-2) var(--ease-1), width var(--dur-2) var(--ease-1);
    }
    .precs-supconv-trilho-ind[hidden]{ display: none; }
    .precs-supconv-trilho[data-eixo="x"] .precs-supconv-trilho-ind{
      top: auto; bottom: 0; height: 3px;
    }
    /* O indicador VIROU a barra do selecionado: a sombra interna do `.sel` sai, senão são duas
       barras (uma parada, uma deslizando). O fundo do `.sel` fica, que é o que o teste de
       contraste mede. E `:last-of-type` no lugar de `:last-child`, porque o último filho agora é
       o indicador e o último CHIP ficaria com a borda de baixo. */
    .precs-supconv-trilho .precs-supconv-op.sel{ box-shadow: none; }
    .precs-supconv-trilho .precs-supconv-op:last-of-type{ border-bottom: 0; }

    @media (prefers-reduced-motion: reduce){
      .precs-supconv-palco, .precs-supconv-trilho-ind{ transition: none; }
      .precs-supconv-palco.trocando{ opacity: 1; transform: none; }
    }

    /* ---- O modal do EXTRATO ---------------------------------------------- */
    /* A casca é a do modal de Listas (`precs-listas-*`, em 30-whatsapp.css): mesmo overlay,
       mesma cabeça, mesmo z-index. O que muda é a largura e o corpo. */
    .precs-supconv-extrato-modal{ width: min(560px, 94vw); }
    .precs-supconv-extrato-body{
      padding: var(--space-4) var(--space-5) var(--space-5);
      overflow-y: auto; min-height: 0;
      display: flex; flex-direction: column; gap: var(--space-4);
    }
    .precs-supconv-extrato-bloco{ display: flex; flex-direction: column; gap: var(--space-2); }
    .precs-supconv-extrato-rotulo{
      font-family: var(--font-rotulo); font-size: var(--fs-2); font-weight: 700;
      letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
    }
    .precs-supconv-extrato-dica{ font-size: var(--fs-1); color: var(--text-muted); }
    /* A dica em alerta é a que avisa o que o arquivo carrega (dado completo de credor) e a que
       diz que a geração passou do teto de espera. */
    .precs-supconv-extrato-dica.alerta{ color: var(--accent-orange-text); }
    .precs-supconv-extrato-acao{
      display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    }
    .precs-supconv-extrato-gerar{ font-family: var(--font-acao); }
    .precs-supconv-extrato-erro{ font-size: var(--fs-1); color: var(--accent-red-text); }
    .precs-supconv-extrato-lista{ display: flex; flex-direction: column; }
    .precs-supconv-extrato-item{
      display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
      padding: var(--space-2) 0; font-size: var(--fs-2); color: var(--text-secondary);
      border-bottom: 1px solid var(--border-color);
    }
    .precs-supconv-extrato-item:last-child{ border-bottom: 0; }
    .precs-supconv-extrato-item .quando{ font-family: var(--font-num); color: var(--text-primary); }
    .precs-supconv-extrato-item .fmt,
    .precs-supconv-extrato-item .tam,
    .precs-supconv-extrato-item .hora{ font-size: var(--fs-1); color: var(--text-muted); }
    .precs-supconv-extrato-item .hora{ margin-left: auto; font-family: var(--font-num); }
    .precs-supconv-extrato-item .estado{
      display: inline-flex; align-items: center; gap: var(--space-1);
      font-family: var(--font-rotulo); font-size: var(--fs-1); font-weight: 700;
      letter-spacing: var(--ls-caps); text-transform: uppercase;
    }
    .precs-supconv-extrato-item .estado.pronto{ color: var(--accent-green-text); }
    .precs-supconv-extrato-item .estado.erro{ color: var(--accent-red-text); }
    .precs-supconv-extrato-item .estado.gerando{ color: var(--precs-gold-title); }
    .precs-supconv-extrato-pe{ font-size: var(--fs-1); color: var(--text-muted); }
    /* ==================================================================== */
    /* (19/09/2026) A ORDEM DA LISTA, O FILTRO DE REVISAO E O SELO          */
    /* ==================================================================== */
    /* Os dois primeiros sao ferramenta de quem REVISA, e por isso moram na barra da supervisao
       e nao dentro do card: o operador dono da caixa nunca os ve. O selo, esse sim, e desenhado
       dentro do card, mas so no modo embutido (`html[data-wa-emb]`) — na tela do operador a
       marca existe no dado e nao aparece. */
    .precs-supconv-filtro-ordem{ flex: 0 0 auto; }
    .precs-supconv-filtro-ordem button:disabled{ opacity: .45; cursor: not-allowed; }
    .precs-supconv-filtro-ordem button:disabled:hover{ color: var(--text-secondary); }

    /* O interruptor de "so as nao revisadas". Aceso ele usa o mesmo vocabulario do segmentado
       aceso — letra em ouro e fundo lavado —, porque e o mesmo gesto: um recorte da lista. */
    .precs-supconv-filtro-rev{ flex: 0 0 auto; }
    .precs-supconv-filtro-rev.active{
      color: var(--precs-gold-title);
      border-color: var(--precs-gold);
      background: color-mix(in srgb, var(--precs-gold) 12%, transparent);
    }

    /* O SELO NA LINHA DA LISTA. Ele e discreto de proposito: a lista ja carrega o ponto de nao
       lida, o chip do lembrete e as etiquetas, e um quarto sinal em destaque tornaria a coluna
       ilegivel. O verde e o mesmo dos estados concluidos do painel. */
    html[data-wa-emb] .precs-wa-conv-rev{
      flex: 0 0 auto; display: inline-flex; align-items: center;
      color: var(--accent-green-text);
    }
    html[data-wa-emb] .precs-wa-conv-rev svg{ width: 12px; height: 12px; }

    /* O BOTAO NO TOPO DA THREAD. Ele reusa `.precs-wa-etiq-btn` inteiro (altura, raio, fonte) e
       so acrescenta o estado marcado, em verde: o ouro ja e a cor de "etiquetar" e de "lembrar",
       e um terceiro botao dourado aceso ao lado dos outros dois nao se distinguiria deles. */
    html[data-wa-emb] .precs-wa-rev-btn.tem{
      color: var(--accent-green-text);
      border-color: color-mix(in srgb, var(--accent-green-text) 55%, transparent);
      background: color-mix(in srgb, var(--accent-green-text) 10%, transparent);
    }
    html[data-wa-emb] .precs-wa-rev-btn.tem:hover{
      color: var(--accent-green-text);
      border-color: var(--accent-green-text);
    }
    html[data-wa-emb] .precs-wa-rev-btn.ocupado{ opacity: .6; cursor: progress; }