/* PRECS (1.1.31) — ABA WHATSAPP DA SUPERVISÃO                            */
    /* ---------------------------------------------------------------------- */
    /*  Migração das quatro telas do `painel.html` do projeto app-whatsapp, que
        rodava só na máquina do Pedro porque o token da Meta ia colado no
        navegador. O CSS de lá vinha com nomes genéricos demais para conviver
        aqui (`.card`, `.chip`, `.btn`, `.tbl`, `.kpi`, `.nav`, `.top`), então
        tudo ganhou o prefixo `precs-supwa-`, que não colide nem com
        `precs-wa-` (o painel do operador, 231 ocorrências neste arquivo) nem
        com `precs-sup-`.

        E as CORES vêm dos tokens que os três temas já declaram. O painel de
        origem trazia quatro temas próprios; aqui quem manda é o tema do
        discador, e reusar `--accent-green*`, `--precs-gold*` e `--bg-*` é o que
        faz a aba nova acompanhar a troca de tema sem uma linha a mais.       */
    /* ====================================================================== */

    /* AS SEIS CORES DE SÉRIE dos gráficos. Elas existem porque o ouro da marca
       REPROVA como cor de dado: fica abaixo do piso de croma e "lê" como cinza
       ao lado das outras linhas (medido no painel de origem). O ouro segue no
       cromo da interface — as barras das quebras são douradas — e os dados usam
       esta paleta, escolhida para se separar entre si e do fundo.
       Declaradas em `:root` e não por tema: são cores de dado, e mudar o
       vocabulário de cor a cada tema faria a mesma operadora trocar de cor
       quando alguém troca o tema. A exceção é o tema de contraste, logo
       abaixo, cujo fundo é preto puro. */
    :root{
      --supwa-s1:#3987E5; --supwa-s2:#D95926; --supwa-s3:#199E70;
      --supwa-s4:#C98500; --supwa-s5:#D55181; --supwa-s6:#8B5CF6;
    }
    /* No contraste o fundo é #000 puro, e as cores de meio-tom acima ficam
       apagadas contra ele. Aqui elas sobem para os mesmos valores claros que o
       resto daquele tema já usa, para o vocabulário continuar coerente. */
    html[data-theme="contraste"]{
      --supwa-s1:#7C9CFF; --supwa-s2:#FF9E6B; --supwa-s3:#3DF5B8;
      --supwa-s4:#FFD97A; --supwa-s5:#FF9EC4; --supwa-s6:#C4A9FF;
    }

    /* A FAIXA DE ABAS COM TRÊS BOTÕES. O 420px foi calculado para dois; com o
       terceiro, "Campanhas" e "WhatsApp" quebravam linha dentro do botão. */
    .precs-sup-head > .precs-sup-abas{ max-width:none; }

    /* A ABA WHATSAPP, e o verde é a única cor de aba do painel. As outras duas
       são recortes do mesmo assunto (a operação de voz); esta é outro canal, e
       o verde diz isso de longe. O anel fica SEMPRE, ativa ou não: é ele que
       dá o destaque pedido, e o `.active` do `.precs-seg` continua marcando
       qual está aberta. */
    .precs-seg button.precs-sup-aba-wa{
      color:var(--accent-green-text);
      box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-green) 55%, transparent);
      display:inline-flex; align-items:center; gap:6px; justify-content:center;
    }
    /* (1.1.98) O `[hidden]` PRECISA VIR REDECLARADO AQUI, e esta e a QUARTA vez que este projeto
       paga por isso. A regra acima da `display:inline-flex` ao botao com especificidade (0,2,1);
       a que esconde, `.precs-seg button[hidden]` em 50-modais.css, tem a MESMA (0,2,1) — e este
       arquivo carrega depois, entao o inline-flex vence e o botao aparece com `hidden` setado:
       visivel, mas morto ao clique. Foi exatamente o que o Pedro viu na conta do Carlos em
       18/09/2026, quando a aba passou a ser liberada por ramal. O teste nao pegou porque media
       `btn.hidden` (verdadeiro) e nao o display computado; agora mede os dois. */
    .precs-seg button.precs-sup-aba-wa[hidden]{ display:none; }
    .precs-seg button.precs-sup-aba-wa:hover{
      background:color-mix(in srgb, var(--accent-green) 12%, transparent);
      color:var(--accent-green-text);
    }
    .precs-seg button.precs-sup-aba-wa.active{
      background:color-mix(in srgb, var(--accent-green) 18%, var(--bg-secondary));
      color:var(--accent-green-text);
      box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-green) 75%, transparent), var(--shadow);
    }
    .precs-sup-aba-wa-ico{ display:inline-flex; flex:0 0 auto; }

    /* ---------------------------------------------------------------------- */
    /* Topo da aba: sub-abas à esquerda, "lido às" e atualizar à direita       */
    /* ---------------------------------------------------------------------- */
    .precs-supwa-topo{
      display:flex; align-items:center; justify-content:space-between;
      gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-4);
    }
    /* (1.1.59) 380px ERA A CONTA DE TRES BOTOES, e com o quarto (Conversas) o rotulo
       quebrava linha dentro do botao. O historico ao lado conta que 420px ja tinha quebrado ao
       ir de dois para tres, entao a largura sobe junto com a contagem em vez de ser afinada de
       novo daqui a duas sub-abas: `max-content` deixa a faixa pedir o que os rotulos pedem, e
       o `max-width` continua existindo para ela nao esticar ate a borda numa tela larga. */
    .precs-supwa-abas{ max-width:max-content; }
    /* (1.1.159) O `[hidden]` das sub-abas e declarado aqui porque o botao do segmento tem `display` de autor, e o
       atributo sozinho nao esconde. (1.1.166) E foi exatamente isso que aconteceu, pela QUINTA vez: a regra de
       `.precs-supwa-aba-restrita` (mesma especificidade, mais abaixo) dava `inline-flex` ao botao escondido, e
       Conversas e Ligacoes apareciam para TODO gestor, com ou sem direito. Essa regra saiu junto com o cadeado, o
       divisor e o fio de ouro; e a guarda ganha o peso da classe, para nenhuma regra futura de mesmo peso vencer. */
    .precs-supwa-abas.precs-seg > [hidden], .precs-supwa-abas.precs-seg > .precs-supwa-aba-restrita[hidden]{ display:none; }
    .precs-supwa-acoes{ display:flex; align-items:center; gap:var(--space-3); }
    .precs-supwa-lido{
      font-size:var(--fs-4); color:var(--text-muted); white-space:nowrap;
      font-family:var(--font-num);
    }
    .precs-supwa-btn{
      display:inline-flex; align-items:center; gap:6px;
      padding:var(--space-2) var(--space-3);
      background:var(--bg-secondary); color:var(--text-secondary);
      border:1px solid var(--border-color); border-radius:var(--radius-inner);
      font-family:var(--font-acao); font-size:var(--fs-4); font-weight:600;
      cursor:pointer; transition:color var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1);
    }
    .precs-supwa-btn:hover:not(:disabled){
      color:var(--precs-gold); border-color:var(--precs-gold);
    }
    .precs-supwa-btn:disabled{ opacity:.5; cursor:progress; }

    /* ---------------------------------------------------------------------- */
    /* KPIs                                                                   */
    /* ---------------------------------------------------------------------- */
    /* (1.1.32) `auto-fill` e nao `auto-fit`, e a diferenca aparecia com SEIS KPIs.
       O `auto-fit` colapsa as trilhas vazias e distribui a sobra entre as ocupadas: numa
       largura em que cabem cinco, o sexto caia sozinho na segunda fileira e era ESTICADO
       para a largura inteira, virando um card de mil pixels com um numero dentro. O
       `auto-fill` mantem as trilhas vazias, entao o orfao fica do tamanho dos irmaos. */
    .precs-supwa-kpis{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
      gap:var(--space-3); margin-bottom:var(--space-4);
    }
    /* (1.1.32) O KPI passou a ser `.precs-sup-card` + `.precs-supwa-kpi`, entao TUDO que e
       aparencia de card (fundo, borda, filete de 3px na cor `--c`, raio, sombra, hover de
       -2px, foco, `.ativo` com anel) vem de la e NAO se repete aqui. O que sobra e o que e
       proprio do KPI: altura minima para os seis ficarem na mesma linha de base, e o
       valor podendo quebrar quando sao duas moedas. */
    .precs-supwa-kpi{ min-height:78px; }
    /* O inerte (o KPI que nao filtra) sai como <div>, mas herda o :hover do card. Sem isto
       ele levanta ao passar o mouse e promete um clique que nao existe. */
    .precs-supwa-kpi-inerte{ cursor:default; }
    .precs-supwa-kpi-inerte:hover{ transform:none; border-color:var(--border-color); }
    /* `.precs-supwa-kpi-v` anda junto de `.precs-sup-num` (JetBrains Mono 1.6rem, que e o
       numero grande da aba Operadores). Aqui so entra o layout: duas moedas viram duas
       caixas que quebram, em vez de estourar a largura do card. */
    .precs-supwa-kpi-v{
      margin-top:0; display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline;
    }
    .precs-supwa-kpi-n{ font-size:var(--fs-4); color:var(--text-muted); margin-top:var(--space-1); }
    .precs-supwa-kpi.ativo .precs-supwa-kpi-n{ color:var(--text-secondary); }
    .precs-supwa-moeda{ font-size:var(--fs-8); white-space:nowrap; }

    /* ---------------------------------------------------------------------- */
    /* Chips de filtro                                                        */
    /* ---------------------------------------------------------------------- */
    /* (1.1.61) D4: A DECLARACAO DO RECORTE DE EQUIPE nas abas de WhatsApp.
       Ela existe pelo motivo escrito no recorte da tabela de Operadores: gestor que enxerga 6
       de 14 sem saber disso conclui que a operacao inteira sao 14 menos gente do que e, e toma
       decisao de gente com meio quadro na cabeca. Some sozinha quando nao ha recorte, porque
       `precsSupWaRecorteHTML` devolve string vazia. */
    /* (1.1.61) D5: A MARCA DE QUE O VINCULO E PALPITE, nas superficies onde a frase nao cabe.
       Ela usa a MESMA cor de aviso das frases de `precsSupWaOperadorSub`, para as duas leituras
       do mesmo fato terem a mesma cor na mesma tela. `cursor:help` porque a explicacao inteira
       esta no balao, e sem ele o `?` parece decoracao. */
    .precs-supwa-incerto{
      display:inline-block; margin-left:var(--space-1); cursor:help;
      font-family:var(--font-rotulo); font-size:var(--fs-2); font-weight:700;
      color:var(--accent-orange);
    }
    .precs-supwa-recorte{
      font-family:var(--font-rotulo); font-size:var(--fs-3); color:var(--text-muted);
      padding:var(--space-1) 0 var(--space-2);
    }
    .precs-supwa-chips{
      display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3);
    }
    /* (1.1.160) A LINHA DE FILTROS: o seletor de operador à esquerda, os chips à direita. */
    .precs-supwa-filtros{ display:flex; align-items:flex-start; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
    .precs-supwa-filtros > .precs-supwa-chips{ margin-bottom:0; align-self:center; }

    /* ---------------------------------------------------------------------- */
    /* (1.1.160) O seletor de operador com foto e busca (`precs-opcombo`)     */
    /* ---------------------------------------------------------------------- */
    .precs-opcombo{ position:relative; display:inline-flex; align-items:center; gap:var(--space-1); flex:0 0 auto; }
    .precs-opcombo-btn{
      display:inline-flex; align-items:center; gap:var(--space-2); min-width:220px; max-width:320px;
      padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);
      background:var(--bg-secondary); color:var(--text-primary);
      border:1px solid var(--border-color); border-radius:var(--radius-pill);
      font-family:var(--font-corpo); cursor:pointer; text-align:left;
      transition:border-color var(--dur-2) var(--ease-1), background var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2);
    }
    .precs-opcombo-btn:hover{ border-color:var(--precs-gold); }
    .precs-opcombo-btn[aria-expanded="true"]{ border-color:var(--precs-gold); background:var(--precs-gold-light); }
    .precs-opcombo.com-escolha .precs-opcombo-btn{ border-color:var(--precs-gold); }
    .precs-opcombo-btn .precs-sup-av{ width:30px; height:30px; flex:0 0 auto; }
    .precs-opcombo-todos{
      display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
      background:var(--precs-gold-light); color:var(--precs-gold-title);
    }
    .precs-opcombo-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
    .precs-opcombo-txt b{ font-weight:600; font-size:var(--fs-5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-opcombo-txt small{ font-family:var(--font-rotulo); font-size:var(--fs-3); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-opcombo-seta{ display:inline-flex; color:var(--text-muted); flex:0 0 auto; transition:transform var(--dur-2) var(--ease-2); }
    .precs-opcombo-btn[aria-expanded="true"] .precs-opcombo-seta{ transform:rotate(180deg); color:var(--precs-gold-title); }
    .precs-opcombo-limpar{
      display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
      border-radius:var(--radius-pill); border:1px dashed var(--border-color); background:transparent;
      color:var(--accent-red-text); cursor:pointer; font-size:var(--fs-4);
    }
    .precs-opcombo-limpar:hover{ border-color:var(--accent-red-text); }
    /* O popover: camada nativa, posicionado por medida (ver precsOpComboAbrir). `inset:auto` tira o centro
       padrao do popover; sem `display` de autor, para o `hidden` continuar escondendo. */
    .precs-opcombo-pop{
      inset:auto; margin:0; padding:var(--space-2); width:max-content; max-width:min(420px, 92vw);
      border:1px solid var(--border-color); border-radius:var(--radius-inner);
      background:var(--bg-secondary); color:var(--text-primary); box-shadow:var(--shadow-lg);
    }
    .precs-opcombo-pop:popover-open{ animation:precsOpComboEntra var(--dur-2) var(--ease-2) both; }
    .precs-opcombo-pop.saindo{ animation:precsOpComboSai var(--dur-2) var(--ease-1) both; }
    @keyframes precsOpComboEntra{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
    @keyframes precsOpComboSai{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-6px); } }
    .precs-opcombo-busca{
      display:flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3);
      border:1px solid var(--border-color); border-radius:var(--radius-pill); background:var(--bg-primary);
      color:var(--text-muted); margin-bottom:var(--space-2);
    }
    .precs-opcombo-busca input{
      flex:1 1 auto; min-width:0; border:none; background:transparent; color:var(--text-primary);
      font-family:var(--font-corpo); font-size:var(--fs-5); outline:none; padding:var(--space-1) 0;
    }
    .precs-opcombo-busca:focus-within{ border-color:var(--precs-gold); }
    .precs-opcombo-lista{ display:flex; flex-direction:column; gap:1px; max-height:min(52vh, 420px); overflow:auto; }
    .precs-opcombo-item{
      display:flex; align-items:center; gap:var(--space-2); width:100%; text-align:left;
      padding:var(--space-1) var(--space-2); border:none; border-radius:var(--radius-sm);
      background:transparent; color:var(--text-primary); cursor:pointer; font-family:var(--font-corpo);
      transition:background var(--dur-1) var(--ease-1);
    }
    .precs-opcombo-item .precs-sup-av{ width:34px; height:34px; flex:0 0 auto; }
    .precs-opcombo-item:hover, .precs-opcombo-item.ativo{ background:var(--bg-tertiary); }
    .precs-opcombo-item[aria-selected="true"]{ background:var(--precs-gold-light); }
    .precs-opcombo-item[aria-selected="true"] b{ color:var(--precs-gold-title); }
    .precs-opcombo-item em{
      font-style:normal; font-family:var(--font-num); font-size:var(--fs-3); color:var(--text-muted);
      white-space:nowrap; margin-left:auto; padding-left:var(--space-3);
    }
    .precs-opcombo-vazio{ padding:var(--space-3); font-size:var(--fs-4); color:var(--text-muted); text-align:center; }
    @media (prefers-reduced-motion: reduce){
      .precs-opcombo-pop:popover-open, .precs-opcombo-pop.saindo{ animation:none; }
      .precs-opcombo-btn, .precs-opcombo-seta, .precs-opcombo-item{ transition:none; }
    }

    /* ---------------------------------------------------------------------- */
    /* (1.1.163) O gráfico e o ranking na mesma linha                          */
    /* ---------------------------------------------------------------------- */
    /* Nada de media query: `flex-wrap` com base em pixels responde "cabem os dois?" sozinho, e numa tela
       estreita eles empilham com o GRÁFICO primeiro, que é a ordem do DOM. */
    .precs-supwa-dupla{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:flex-start;
      margin-bottom:var(--space-4); }
    .precs-supwa-dupla > .precs-supwa-panel{ margin-bottom:0; }
    .precs-supwa-dupla > .precs-supwa-panel-graf{ flex:1 1 640px; min-width:0; }
    .precs-supwa-dupla > .precs-supwa-panel-envio{ flex:1 1 420px; min-width:0; }

    /* ---------------------------------------------------------------------- */
    /* (1.1.163) A leitura do modelo: como ele fica em mensagem                */
    /* ---------------------------------------------------------------------- */
    /* Camada nativa (`popover`), sem z-index: a catraca conta z-index literal e só desce.
       (1.1.167, conserto de 30/09/2026) CENTRALIZADO. Era `inset:auto`, e com os quatro lados em `auto` o
       `margin:auto` não tem contra o que centrar: o popover caía na posição estática, colado no canto superior
       esquerdo (print do Pedro na aba Modelos). `inset:0` dá as quatro bordas, `height:fit-content` impede o
       modal de esticar até elas, e o `margin:auto` volta a dividir a sobra igual nos quatro lados. */
    .precs-supwa-tplver{
      inset:0; margin:auto; width:min(860px, 94vw); height:fit-content; max-height:88vh; overflow:auto; padding:0;
      border:1px solid var(--border-color); border-radius:var(--radius-card);
      background:var(--bg-secondary); color:var(--text-primary); box-shadow:var(--shadow-lg);
    }
    .precs-supwa-tplver:popover-open{ animation:precsOpComboEntra var(--dur-2) var(--ease-2) both; }
    .precs-supwa-tplver::backdrop{ background:color-mix(in srgb, var(--bg-primary) 72%, transparent); }
    @media (prefers-reduced-motion: reduce){ .precs-supwa-tplver:popover-open{ animation:none; } }
    .precs-supwa-tplver-topo{
      display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
      padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-color);
    }
    .precs-supwa-tplver-tit{ display:flex; flex-direction:column; gap:1px; min-width:0; }
    .precs-supwa-tplver-tit b{ font-size:var(--fs-7); color:var(--precs-gold-title); overflow-wrap:anywhere; }
    .precs-supwa-tplver-tit span{ font-family:var(--font-rotulo); font-size:var(--fs-3);
      text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted); }
    .precs-supwa-tplver-corpo{ display:flex; flex-wrap:wrap; gap:var(--space-4); padding:var(--space-4); align-items:flex-start; }
    /* A "tela do celular": fundo do papel de parede do WhatsApp em tom da casa, com o balão de saída. */
    .precs-supwa-tplver-tela{
      flex:1 1 360px; min-width:0; padding:var(--space-4); border-radius:var(--radius-card);
      background:var(--bg-primary); border:1px solid var(--border-color);
      display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2);
    }
    .precs-supwa-tplver-lado{ flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:var(--space-3); }
    .precs-supwa-bolha{
      position:relative; max-width:100%; padding:var(--space-3) var(--space-4) var(--space-4);
      border-radius:var(--radius-card); background:color-mix(in srgb, var(--accent-green) 16%, var(--bg-secondary));
      border:1px solid color-mix(in srgb, var(--accent-green) 30%, var(--border-color));
      font-family:var(--font-corpo); font-size:var(--fs-6); color:var(--text-primary);
      overflow-wrap:anywhere;
    }
    .precs-supwa-bolha-cab{ font-weight:700; margin-bottom:var(--space-2); }
    .precs-supwa-bolha-midia{ font-family:var(--font-rotulo); font-size:var(--fs-3); color:var(--text-muted);
      text-transform:uppercase; letter-spacing:var(--ls-caps); margin-bottom:var(--space-2); }
    .precs-supwa-bolha-rod{ margin-top:var(--space-2); font-size:var(--fs-4); color:var(--text-muted); }
    .precs-supwa-bolha-hora{ display:block; margin-top:var(--space-1); text-align:right;
      font-family:var(--font-num); font-size:var(--fs-3); color:var(--text-muted); }
    .precs-supwa-bolha-btns{ display:flex; flex-direction:column; gap:var(--space-1); width:100%; }
    .precs-supwa-bolha-bt{
      text-align:center; padding:var(--space-2); border-radius:var(--radius-inner);
      background:var(--bg-secondary); border:1px solid var(--border-color);
      color:var(--precs-gold-title); font-family:var(--font-acao); font-size:var(--fs-5); font-weight:600;
    }
    /* A variável ainda não preenchida aparece como marca, e não como `{{nome}}` cru. */
    .precs-supwa-vaga{
      display:inline-block; padding:0 var(--space-1); border-radius:var(--radius-sm);
      background:var(--precs-gold-light); color:var(--precs-gold-title);
      font-family:var(--font-rotulo); font-size:var(--fs-4); font-weight:700;
    }
    .precs-supwa-tplver-ficha{ display:flex; flex-direction:column; gap:var(--space-1); }
    .precs-supwa-tplver-campos{ display:flex; flex-direction:column; gap:var(--space-2); }
    .precs-supwa-tplver-campo{ display:flex; flex-direction:column; gap:var(--space-1); }
    .precs-supwa-tplver-campo span{ font-family:var(--font-rotulo); font-size:var(--fs-3);
      text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted); }
    .precs-supwa-tplver-campo input{
      padding:var(--space-2) var(--space-3); border:1px solid var(--border-color);
      border-radius:var(--radius-inner); background:var(--bg-primary); color:var(--text-primary);
      font-family:var(--font-corpo); font-size:var(--fs-5);
    }
    .precs-supwa-tplver-campo input:focus{ outline:none; border-color:var(--precs-gold); }
    .precs-supwa-tplver-semvar{ font-size:var(--fs-4); color:var(--text-muted); }
    .precs-supwa-tplver-acoes{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
    /* A linha da tabela virou botão (ela abre a leitura), e o `button` do segmento não pode herdar centralização. */
    button.precs-supwa-tr{ text-align:left; }
    /* E a célula da matriz também virou botão: sem estes zeros ela vem com a caixa cinza do navegador, e a
       matriz deixa de ser uma grade de sinais para virar uma grade de botões. */
    button.precs-supwa-mz-cel{ background:transparent; border:none; padding:0; margin:0; font:inherit;
      color:inherit; cursor:pointer; width:100%; }
    /* O chip de "usar os exemplos" não estica na coluna: ele é um chip, e chip tem o tamanho do rótulo. */
    .precs-supwa-tplver-campos > .precs-supwa-chip{ align-self:flex-start; }

    /* ---------------------------------------------------------------------- */
    /* (1.1.161) O painel "quem está enviando" de Mensagens                    */
    /* ---------------------------------------------------------------------- */
    .precs-supwa-envio{ display:flex; flex-direction:column; gap:var(--space-1); }
    .precs-supwa-envio-l{
      display:grid; grid-template-columns:28px minmax(200px, 1.3fr) minmax(120px, 2.4fr) auto minmax(150px, auto);
      gap:var(--space-3); align-items:center; padding:var(--space-1) var(--space-2); border-radius:var(--radius-inner);
      animation:precsConsumoEntra .45s var(--ease-2) both; animation-delay:calc(40ms + var(--i, 0) * 28ms);
      transition:background var(--dur-2) var(--ease-1);
    }
    .precs-supwa-envio-l:hover{ background:color-mix(in srgb, var(--text-primary) 3%, transparent); }
    .precs-supwa-envio-l.selecionada{ background:var(--precs-gold-light); }
    .precs-supwa-envio-pos{ font-family:var(--font-num); font-size:var(--fs-4); color:var(--text-muted); text-align:right; }
    .precs-supwa-envio-op{
      display:flex; align-items:center; gap:var(--space-2); min-width:0; padding:var(--space-0); border:none;
      background:transparent; color:var(--text-primary); cursor:pointer; text-align:left; font-family:var(--font-corpo);
      border-radius:var(--radius-inner);
    }
    .precs-supwa-envio-op .precs-sup-av{ width:34px; height:34px; flex:0 0 auto; }
    .precs-supwa-envio-nome{ display:flex; flex-direction:column; gap:1px; min-width:0; }
    .precs-supwa-envio-nome b{ font-weight:600; font-size:var(--fs-5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-supwa-envio-nome small{ font-family:var(--font-rotulo); font-size:var(--fs-3); color:var(--text-muted); }
    .precs-supwa-envio-op:hover b{ color:var(--precs-gold-title); }
    .precs-supwa-envio-barra{ display:block; height:10px; border-radius:var(--radius-pill); background:var(--bg-primary); overflow:hidden; }
    .precs-supwa-envio-barra i{ display:block; height:100%; border-radius:var(--radius-pill); transform-origin:left; animation:precsConsumoAlarga .8s var(--ease-2) both; animation-delay:calc(120ms + var(--i, 0) * 40ms); }
    .precs-supwa-envio-num{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:64px; }
    .precs-supwa-envio-num b{ font-family:var(--font-num); font-size:var(--fs-7); color:var(--text-primary); }
    .precs-supwa-envio-num small{ font-family:var(--font-rotulo); font-size:var(--fs-3); color:var(--text-muted); }
    .precs-supwa-envio-taxa{ display:flex; justify-content:flex-end; }
    .precs-supwa-envio-l.sem .precs-supwa-envio-num b{ color:var(--accent-red); }
    .precs-supwa-envio-l.sem .precs-sup-av{ filter:grayscale(1); opacity:.7; }
    @media (prefers-reduced-motion: reduce){ .precs-supwa-envio-l, .precs-supwa-envio-barra i{ animation:none; } .precs-supwa-envio-l{ transition:none; } }

    /* ---------------------------------------------------------------------- */
    /* (1.1.160) A matriz "quem tem cada modelo"                             */
    /* ---------------------------------------------------------------------- */
    .precs-supwa-mz-wrap{ overflow-x:auto; }
    .precs-supwa-mz{ display:flex; flex-direction:column; min-width:max-content; }
    .precs-supwa-mz-h, .precs-supwa-mz-l, .precs-supwa-mz-f{
      display:grid; grid-template-columns:minmax(220px, 1.4fr) repeat(var(--mz-n, 1), minmax(64px, 1fr));
      gap:var(--space-2); align-items:center; padding:var(--space-2) var(--space-4);
    }
    .precs-supwa-mz-h{
      position:sticky; top:var(--sup-cards-h, 0px); background:var(--bg-primary);
      border-bottom:1px solid var(--border-color); align-items:end;
    }
    .precs-supwa-mz-c0{ display:flex; flex-direction:column; gap:1px; min-width:0; }
    .precs-supwa-mz-h .precs-supwa-mz-c0{
      font-family:var(--font-rotulo); font-size:var(--fs-3); font-weight:700; text-transform:uppercase;
      letter-spacing:var(--ls-caps); color:var(--text-muted); align-self:end; padding-bottom:var(--space-1);
    }
    .precs-supwa-mz-op{
      display:flex; flex-direction:column; align-items:center; gap:var(--space-0); min-width:0;
      padding:var(--space-1); border:1px solid transparent; border-radius:var(--radius-inner); background:transparent;
      color:var(--text-secondary); cursor:pointer; font-family:var(--font-corpo);
      transition:background var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2);
    }
    .precs-supwa-mz-op .precs-sup-av{ width:36px; height:36px; }
    .precs-supwa-mz-op b{ font-size:var(--fs-4); font-weight:600; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-supwa-mz-op small{ font-family:var(--font-num); font-size:var(--fs-3); color:var(--text-muted); }
    .precs-supwa-mz-op:hover{ background:var(--bg-tertiary); transform:translateY(-1px); }
    .precs-supwa-mz-op.ativo{ border-color:var(--precs-gold); background:var(--precs-gold-light); color:var(--precs-gold-title); }
    .precs-supwa-mz-l{ border-bottom:1px solid var(--border-color); }
    .precs-supwa-mz-l:hover{ background:color-mix(in srgb, var(--text-primary) 3%, transparent); }
    .precs-supwa-mz-barra{ display:block; height:3px; width:100%; max-width:160px; margin-top:var(--space-1); border-radius:var(--radius-pill); background:var(--bg-primary); overflow:hidden; }
    .precs-supwa-mz-barra i{ display:block; height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--precs-gold), var(--precs-gold-soft)); transform-origin:left; animation:precsConsumoAlarga .7s var(--ease-2) both; animation-delay:calc(160ms + var(--i, 0) * 30ms); }
    .precs-supwa-mz-cel{ display:flex; align-items:center; justify-content:center; min-height:34px; }
    .precs-supwa-mz-cel > i{
      display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
      border-radius:50%; font-style:normal; font-weight:700; font-size:var(--fs-4);
      border:1px solid var(--border-color); color:var(--text-muted); background:var(--bg-primary);
      transition:transform var(--dur-2) var(--ease-2);
    }
    .precs-supwa-mz-cel:hover > i{ transform:scale(1.12); }
    .precs-supwa-mz-cel.b-ok > i{ color:var(--accent-green); border-color:color-mix(in srgb, var(--accent-green) 55%, transparent); background:color-mix(in srgb, var(--accent-green) 14%, transparent); }
    .precs-supwa-mz-cel.b-analise > i{ color:var(--accent-orange); border-color:color-mix(in srgb, var(--accent-orange) 55%, transparent); background:color-mix(in srgb, var(--accent-orange) 14%, transparent); }
    .precs-supwa-mz-cel.b-ruim > i{ color:var(--accent-red); border-color:color-mix(in srgb, var(--accent-red) 55%, transparent); background:color-mix(in srgb, var(--accent-red) 14%, transparent); }
    .precs-supwa-mz-cel.vazio > i{ width:8px; height:8px; border:none; background:var(--border-color); }
    .precs-supwa-mz-cel.soma{ flex-direction:row; gap:1px; font-family:var(--font-num); }
    .precs-supwa-mz-cel.soma b{ color:var(--accent-green); font-size:var(--fs-6); }
    .precs-supwa-mz-cel.soma small{ color:var(--text-muted); font-size:var(--fs-3); }
    .precs-supwa-mz-cel.soma.zero b{ color:var(--accent-red); }
    .precs-supwa-mz-f{ background:var(--bg-primary); font-family:var(--font-rotulo); font-size:var(--fs-3); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted); }
    .precs-supwa-mz-lg{ display:inline-flex; align-items:center; gap:var(--space-2); text-transform:none; letter-spacing:0; }
    .precs-supwa-mz-lg i{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; font-style:normal; font-weight:700; font-size:var(--fs-2); border:1px solid var(--border-color); }
    .precs-supwa-mz-lg i.b-ok{ color:var(--accent-green); } .precs-supwa-mz-lg i.b-analise{ color:var(--accent-orange); } .precs-supwa-mz-lg i.b-ruim{ color:var(--accent-red); }
    .precs-supwa-mz-lg i.vazio{ width:8px; height:8px; border:none; background:var(--border-color); }

    /* (1.1.160) A CASCATA DE ENTRADA: cards e linhas entram um atrás do outro, como na tela Consumo. `--i` vem do
       JS nas linhas; nos cards, do nth-child. Repintura por innerHTML reinicia a cascata, e é isso mesmo: a
       tela responde ao filtro com movimento. */
    .precs-supwa-kpi, .precs-supwa-tr, .precs-supwa-mz-l, .precs-supwa-quebra{
      animation:precsConsumoEntra .45s var(--ease-2) both; animation-delay:calc(40ms + var(--i, 0) * 28ms);
    }
    .precs-supwa-kpis > :nth-child(2){ --i:1; } .precs-supwa-kpis > :nth-child(3){ --i:2; } .precs-supwa-kpis > :nth-child(4){ --i:3; }
    .precs-supwa-kpis > :nth-child(5){ --i:4; } .precs-supwa-kpis > :nth-child(6){ --i:5; }
    .precs-supwa-quebras > :nth-child(2){ --i:2; } .precs-supwa-quebras > :nth-child(3){ --i:4; } .precs-supwa-quebras > :nth-child(4){ --i:6; }
    @media (prefers-reduced-motion: reduce){
      .precs-supwa-kpi, .precs-supwa-tr, .precs-supwa-mz-l, .precs-supwa-quebra, .precs-supwa-mz-barra i{ animation:none; }
      .precs-supwa-mz-op, .precs-supwa-mz-cel > i{ transition:none; }
    }
    /* (1.1.165) A PINTURA CALMA de Mensagens. Selecionar um operador para o gráfico, abrir o dia a dia, a releitura
       de cinco minutos e o resize repintam a sub-aba inteira, e a cascata acima fazia tudo entrar de novo: a tela
       piscava e o nome seguinte só ficava clicável depois. Com o recorte igual ao da pintura anterior o JS marca
       o corpo com `.precs-supwa-calmo` e nada entra de novo; o gráfico tem marca própria e só redesenha a curva
       quando a seleção muda. A linha clicada ganha `.precs-supwa-pulso`, um realce dourado que se apaga sozinho
       até o fundo da própria linha (selecionada ou não), e é ele que responde ao clique. */
    .precs-supwa-calmo .precs-supwa-kpi, .precs-supwa-calmo .precs-supwa-tr, .precs-supwa-calmo .precs-supwa-envio-l,
    .precs-supwa-calmo .precs-supwa-envio-barra i, .precs-supwa-calmo .precs-supwa-quebra{ animation:none; }
    .precs-supwa-calmo-graf .precs-supwa-linha{ stroke-dashoffset:0; animation:none; }
    .precs-supwa-calmo-graf .precs-supwa-ponto-serie, .precs-supwa-calmo-graf .precs-supwa-fim{ opacity:1; animation:none; }
    .precs-supwa-calmo-graf .precs-supwa-area{ animation:none; }
    .precs-supwa-calmo .precs-supwa-pulso{ animation:precsSupWaPulso .9s var(--ease-2) both; }
    @keyframes precsSupWaPulso{ from{ background:color-mix(in srgb, var(--precs-gold) 30%, transparent); } }
    @media (prefers-reduced-motion: reduce){ .precs-supwa-calmo .precs-supwa-pulso{ animation:none; } }
    .precs-supwa-chip{
      display:inline-flex; align-items:center; gap:6px;
      padding:5px var(--space-3);
      background:var(--bg-secondary); color:var(--text-secondary);
      border:1px solid var(--border-color); border-radius:var(--radius-pill);
      font-family:var(--font-acao); font-size:var(--fs-4); font-weight:600;
      cursor:pointer;
      /* `background` entrou na lista: o chip ativo troca as TRES coisas (cor, borda e
         preenchimento), e sem ele o dourado estalava enquanto texto e borda faziam fade. */
      transition:color var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1), background var(--dur-2) var(--ease-1);
    /* (1.1.60) ATENCAO, QUATRO TRANSICOES DESTE ARQUIVO ESTAO DORMENTES, e nao e defeito de
       valor: e que o no e SUBSTITUIDO.
       `.precs-supwa-chip.ativo`, `.precs-supwa-th-b.ativo`, `.precs-supwa-tr.aberta` e
       `.precs-supwa-tr-msg.aberta` declaram `transition`, mas as tres tabelas repintam por
       `innerHTML` inteiro (`precsSupWaPintar` -> `precsSupPintarComFoco`). O elemento novo
       NASCE no estado final, e transicao precisa de um estado de partida no MESMO no para
       interpolar. So `:hover` e `:active` sobrevivem, porque ali o no nao troca.
       Quem destrava isso e migrar as tres tabelas para `precsSupTabelaReconciliar` (app.js),
       que preserva o no e troca so o conteudo — e ai estas quatro passam a valer sem uma
       linha de CSS nova. Ate entao, afinar os valores delas e trabalho perdido: NADA na tela
       muda. Deixado escrito aqui porque um valor que nao faz efeito e o tipo de coisa que
       alguem afina por meia hora antes de descobrir por que. */
    }
    .precs-supwa-chip:active{ transform:translateY(1px); }
    @media (prefers-reduced-motion: reduce){
      .precs-supwa-chip{ transition:none; }
      .precs-supwa-chip:active{ transform:none; }
      .precs-supwa-th-b, .precs-supwa-oplink, .precs-supwa-mais{ transition:none; }
      .precs-supwa-mais:active{ transform:none; }
    }
    .precs-supwa-chip b{
      font-family:var(--font-num); font-size:var(--fs-3);
      color:var(--text-muted); font-weight:600;
    }
    .precs-supwa-chip:hover{ color:var(--text-primary); border-color:var(--precs-gold); }
    .precs-supwa-chip.ativo{
      color:var(--precs-gold-title); border-color:var(--precs-gold);
      background:var(--precs-gold-light);
    }
    .precs-supwa-chip.ativo b{ color:var(--precs-gold-title); }
    /* Chip sem nada para filtrar continua na tela (a ausencia e informacao) e para de
       convidar o clique.
       (1.1.32) `opacity` SAIU. Escurecer por opacidade texto que ja e secundario e a falha
       classica de contraste: no tema claro isso dava cerca de 1,9:1 num corpo de 12px. Agora
       o apagado vem da COR (`--text-muted`, que os tres temas tratam) e o cursor diz que nao
       ha o que clicar, com `pointer-events:none` para o hover nao clarear mais nada. */
    .precs-supwa-chip.zero{
      color:var(--text-muted); border-style:dashed; pointer-events:none;
    }
    .precs-supwa-chip.zero b{ color:var(--text-muted); }
    .precs-supwa-chip.limpar{ color:var(--accent-red-text); border-style:dashed; }

    /* ---------------------------------------------------------------------- */
    /* Tabelas (grid, com linha expansível)                                   */
    /* ---------------------------------------------------------------------- */
    /* (1.1.32) O `overflow:hidden` SAIU, e ele quebrava duas coisas de uma vez.
       Ele cria um contexto de rolagem que NUNCA rola (quem rola e a pagina), e um
       `position:sticky` so gruda no ancestral que rola: por isso a linha de Total nunca
       grudou, apesar de o comentario dela afirmar que grudava. E o anel de foco global tem
       `outline-offset:2px`, desenhado FORA da caixa, entao ele era aparado na primeira
       linha, na ultima e nos botoes de cabecalho.
       Esta pegadinha ja estava documentada e consertada neste mesmo arquivo, no
       `.precs-sup-panel{overflow:visible}` (ver o comentario acima dele), onde o sticky do
       `.precs-sup-th` "existia desde sempre e nunca funcionou" pelo mesmo motivo. O preco de
       tirar e o canto arredondado nao recortar mais o conteudo, resolvido dando o mesmo raio
       a primeira e a ultima linha. */
    .precs-supwa-tbl{
      background:var(--bg-secondary); border:1px solid var(--border-color);
      border-radius:var(--radius-inner); margin-bottom:var(--space-4);
    }
    /* (1.1.32) DENTRO DO PAINEL DA CASA a tabela nao desenha caixa nenhuma: quem tem fundo,
       borda, raio e sombra e o `.panel`. Sem isto seriam duas bordas concentricas com 1px
       de vao entre elas, que e o desenho de "caixa dentro de caixa" que a aba tinha e que
       fazia ela parecer outro produto. */
    .precs-supwa-panel-tbl > .precs-supwa-tbl{
      background:transparent; border:none; border-radius:0; margin-bottom:0;
    }
    .precs-supwa-tbl > *:first-child{
      border-top-left-radius:var(--radius-inner); border-top-right-radius:var(--radius-inner);
    }
    .precs-supwa-tbl > *:last-child{
      border-bottom-left-radius:var(--radius-inner); border-bottom-right-radius:var(--radius-inner);
    }
    .precs-supwa-th, .precs-supwa-tr{
      display:grid; gap:var(--space-3); align-items:center;
      /* Respiro vertical menor: com onze operadores na tabela de Mensagens, o padding de
         var(--space-3) somava quase 60px por linha e a lista virava rolagem longa. */
      padding:var(--space-2) var(--space-4);
    }
    /* (1.1.32) `minmax(0, Xfr)` e nao `Xfr` puro. Uma trilha `1fr` e `minmax(auto, 1fr)`:
       ela NAO encolhe abaixo do conteudo. Como esta tela tem conteudo que se recusa a
       encolher (a sparkline de 78px fixos, os selos com `nowrap`), entre 1100 e 1400px eles
       paravam de ceder e o excesso saia das colunas de NUMERO, que sao as que importam. Com
       o minmax as proporcoes escritas aqui voltam a valer em qualquer largura. As duas
       trilhas que ja estavam certas eram as do ranking e das quebras. */
    /* Sete colunas: entrou a da SETA, de 22px, no fim. Ver o comentario dela no app.js
       ("nem sabia que dava pra clicar"). Largura em pixels e nao `fr` pelo mesmo motivo da
       coluna de acoes da tabela de agentes: trilha `auto` mede o conteudo DAQUELA linha. */
    .precs-supwa-tbl-parque .precs-supwa-th,
    .precs-supwa-tbl-parque .precs-supwa-tr{
      grid-template-columns:minmax(0,1.35fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.15fr) minmax(0,.95fr) minmax(0,1fr) 22px;
    }
    .precs-supwa-tr-seta{
      display:flex; align-items:center; justify-content:center;
      color:var(--text-muted); transition:transform var(--dur-2) var(--ease-1), color var(--dur-2) var(--ease-1);
    }
    .precs-supwa-tr:hover .precs-supwa-tr-seta{ color:var(--precs-gold); }
    .precs-supwa-tr[aria-expanded="true"] .precs-supwa-tr-seta{
      transform:rotate(180deg); color:var(--precs-gold-title);
    }
    @media (prefers-reduced-motion: reduce){ .precs-supwa-tr-seta{ transition:none; } }
    /* Oito colunas e nao sete: o botao do detalhe dia a dia ganhou coluna PROPRIA (a ultima,
       de 28px). Ele morava dentro da celula de Custo/msg e caia numa segunda linha, o que
       engordava toda a tabela e deixava o botao parecendo solto no meio do numero. */
    .precs-supwa-tbl-msg .precs-supwa-th,
    .precs-supwa-tbl-msg .precs-supwa-tr{
      grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,.85fr) minmax(0,.85fr)
                            minmax(0,.62fr) minmax(0,.85fr) minmax(0,.85fr) 28px;
    }
    .precs-supwa-tbl-tpl .precs-supwa-th,
    .precs-supwa-tbl-tpl .precs-supwa-tr{
      grid-template-columns:minmax(0,1.25fr) minmax(0,1.65fr) minmax(0,1.05fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,.8fr);
    }

    /* Com o `overflow` fora do caminho, o cabecalho pode grudar como o do resto da
       supervisao. `--sup-cards-h` e a altura dos cards, escrita pelo pintor da aba
       Operadores; aqui o zero de fallback basta porque esta aba nao tem cards grudados. */
    .precs-supwa-th{
      position:sticky; top:var(--sup-cards-h, 0px); z-index:6;
      border-bottom:1px solid var(--border-color); background:var(--bg-primary);
      font-family:var(--font-rotulo); font-size:var(--fs-3); font-weight:700;
      text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted);
    }
    .precs-supwa-th-b{
      background:none; border:none; padding:0; cursor:pointer; color:inherit;
      font:inherit; letter-spacing:inherit; text-transform:inherit;
      display:inline-flex; align-items:center; gap:4px; text-align:left;
    }
    .precs-supwa-th-b{ transition:color var(--dur-1) var(--ease-1); }
    .precs-supwa-th-b:hover{ color:var(--text-primary); }
    .precs-supwa-th-b.ativo{ color:var(--precs-gold-title); }
    .precs-supwa-th-b i{ font-style:normal; font-size:var(--fs-2); }

    .precs-supwa-tr{
      border-bottom:1px solid var(--border-color);
      font-size:var(--fs-5); color:var(--text-secondary); text-align:left;
      width:100%; background:none; font-family:inherit;
    }
    .precs-supwa-tr:last-child{ border-bottom:none; }
    button.precs-supwa-tr{ border-left:none; border-right:none; border-top:none; cursor:pointer; }
    /* (1.1.32) O HOVER PASSOU A FALAR O IDIOMA DA CASA, e dois defeitos caem juntos.
       Ele era `background:var(--bg-primary)` chapado e SEM transicao, enquanto a tabela irma
       (`.precs-sup-linha`) usa um veu neutro de 5% do texto com .45s -- e era esse "nao esta
       suave igual da de agentes" que o Pedro relatou. Pior: `--bg-primary` e exatamente a cor
       de `.aberta`, entao passar o mouse numa linha ficava indistinguivel de te-la expandido.
       Agora o hover e veu, o expandido e superficie, e os dois se distinguem. */
    button.precs-supwa-tr{
      transition:background var(--dur-2) var(--ease-1), box-shadow var(--dur-2) var(--ease-1);
    }
    button.precs-supwa-tr:hover{
      background:color-mix(in srgb, var(--text-primary) 5%, transparent);
    }
    /* Expandida: superficie propria mais o filete dourado a esquerda, que e o idioma de "este
       item esta aberto" que as listas do painel ja usam (ver `.campaign-item:hover`). */
    /* (1.1.60) SEM FALLBACK NO OURO, e o motivo e o mesmo que `00-base.css` ja escreve para
       os `--radius-*`: fallback de token que existe em TODOS os temas e documentacao falsa que
       sobrevive por anos. E aqui ele estava ERRADO alem de morto — no tema Contraste o ouro e
       `#E8C46A`, e o literal dizia `#B49552`. Se algum dia o token faltasse, o fallback
       pintaria o filete do tema de alto contraste com o ouro do tema escuro. */
    .precs-supwa-tr.aberta{
      background:var(--bg-primary);
      box-shadow:inset 3px 0 0 var(--precs-gold);
    }
    @media (prefers-reduced-motion: reduce){
      button.precs-supwa-tr{ transition:none; }
    }
    .precs-supwa-tr > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
    /* (1.1.32) COLUNA DE NUMERO ALINHA A DIREITA, com `tabular-nums`. Sem isso a coluna lia
       serrilhada (o "1" e mais estreito que o "8" na Poppins) e o rotulo do cabecalho ficava
       sobre a casa das centenas em vez de sobre o numero. E o mesmo tratamento de
       `.precs-sup-lig` e `.precs-sup-ramal`, com o mesmo motivo escrito la.
       `.num` e marcada no JS; o cabecalho recebe pelo mesmo seletor, senao rotulo e valor
       deixam de casar. */
    .precs-supwa-tr > span.num, .precs-supwa-th > span.num{
      align-items:flex-end; text-align:right;
      font-variant-numeric:tabular-nums;
    }
    .precs-supwa-th > span.num{ align-items:flex-end; }
    .precs-supwa-th > span.num .precs-supwa-th-b{ text-align:right; }
    /* A celula do botao de detalhe e a unica que centraliza em vez de empilhar. */
    .precs-supwa-tbl-msg .precs-supwa-tr > span:last-child{
      flex-direction:row; align-items:center; justify-content:flex-end;
    }
    .precs-supwa-tr b{ color:var(--text-primary); font-weight:600; }
    .precs-supwa-tr.selecionada{ box-shadow:inset 3px 0 0 var(--precs-gold); }
    /* `.precs-supwa-tr-msg` existia no DOM sem uma linha de CSS. Ela e o gancho da linha da
       sub-aba Mensagens, e agora carrega o que e proprio dela: a celula do botao de detalhe,
       que e a unica que centraliza em vez de empilhar. */
    /* (1.1.32) A LINHA DE MENSAGENS INTEIRA ABRE O DIA A DIA, e não só o botão de 22px.
       Pedido do Pedro: "o botão de abrir o dia a dia pode funcionar se só clicarmos na linha
       também". O botão fica, porque ele é a única afetação visível de que há o que abrir; o
       `event.stopPropagation()` no botão de cor do operador é o que evita os dois dispararem
       juntos. */
    .precs-supwa-tr-msg{ cursor:pointer; transition:background var(--dur-2) var(--ease-1); }
    .precs-supwa-tr-msg:hover{ background:color-mix(in srgb, var(--text-primary) 5%, transparent); }
    .precs-supwa-tr-msg.aberta{
      background:var(--bg-primary); box-shadow:inset 3px 0 0 var(--precs-gold);
    }
    /* A linha de totais não abre nada. */
    .precs-supwa-tr.precs-supwa-tot{ cursor:default; }
    .precs-supwa-tr.precs-supwa-tot:hover{ background:var(--bg-primary); }
    @media (prefers-reduced-motion: reduce){ .precs-supwa-tr-msg{ transition:none; } }
    /* Linha de totais: a soma das colunas é a pergunta seguinte de quem acabou
       de ler a tabela, e ela fica presa embaixo em vez de rolar junto. */
    .precs-supwa-tr.precs-supwa-tot{
      background:var(--bg-primary); border-top:1px solid var(--border-color);
      position:sticky; bottom:0;
    }
    .precs-supwa-tr.precs-supwa-tot b{ color:var(--precs-gold-title); }

    /* (1.1.60) AQUI MORAVA `.precs-supwa-tr > span:empty{ display:none }`, E ELA ESTAVA
       NO LUGAR ERRADO. O conserto e de DADO na tela, nao de acabamento.

       O comentario dela dizia, corretamente, que existia para "quando a tabela colapsa em uma
       coluna" — e o colapso mora dentro de `@media (max-width:1100px)`, no fim deste arquivo.
       Ela ficou FORA do @media, entao valia no desktop tambem. E no desktop a linha e uma
       GRADE: apagar uma celula nao fecha um vao, ela puxa TUDO o que vem depois uma coluna
       para a esquerda.

       Quem emite celula vazia e so a linha de totais de Mensagens (duas: a da coluna Curva e
       a do botao `+`). O efeito medido em 09/09/2026, por geometria: o cabecalho tinha `Curva`
       em x=403, `Enviadas` em x=572 e `Entregues` em x=776, e a linha Total punha `34` em
       x=403, `31` em x=572 e `91,2%` em x=776. Ou seja o gestor lia o total de enviadas sob
       "Curva" e o custo estimado sob "Entrega".

       A regra agora vive no bloco de 1100px, onde ela sempre devia estar. */
    /* (1.1.32) A CÉLULA DO OPERADOR, com foto e faixa. Ver `precsSupWaCelulaOperador` no
       app.js para o porquê de cada peça. O wrapper em LINHA existe porque a célula da tabela
       é `flex-direction:column`: sem ele a foto empilha acima do nome. */
    .precs-supwa-op{
      display:flex; align-items:center; gap:var(--space-2); min-width:0; width:100%;
    }
    .precs-supwa-op-txt{
      display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto;
    }
    /* Ellipsis, como `.precs-sup-nome` faz. Só funciona porque os dois wrappers acima têm
       `min-width:0`, que é a pegadinha de grid e flex documentada naquela regra. */
    .precs-supwa-op-nome{
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      display:block; max-width:100%; font-weight:600; color:var(--text-primary);
    }
    .precs-supwa-op-sub{
      display:flex; align-items:center; gap:var(--space-2); min-width:0;
    }
    /* (1.1.60) AQUI MORAVA A FAIXA DE GRADUACAO DAS TABELAS, e ela nunca funcionou — nas
       DUAS pontas, o que e o motivo de ela sair em vez de ser afinada.

       Abaixo de 1400px de janela ela era `display:none`, e 1400px cobre qualquer notebook da
       operacao: na pratica a faixa nao aparecia para quase ninguem. Acima de 1400px ela
       renderizava a 29x5 PIXELS (medido em 09/09/2026), tamanho em que a faixa de jiu-jitsu
       le como uma barra de progresso cinza e nao comunica graduacao nenhuma.

       E a pergunta destas tres tabelas e sobre o NUMERO da pessoa (pode enviar? quanto
       mandou? qual modelo?), nao sobre a graduacao dela. A faixa continua onde ela tem
       tamanho e faz sentido: o trilho da aba Conversas, com 52px (80-supconversas.css), e o
       resumo do operador.

       Com ela saiu tambem o unico `@media (max-width:1400px)` dos dois arquivos, que existia
       so para esconde-la. */
    .precs-supwa-sub{ font-size:var(--fs-3); color:var(--text-muted); }
    .precs-supwa-mono{ font-family:var(--font-num); font-size:var(--fs-3); }
    /* Nome de modelo e um identificador sem espaco (`precs_confirmacao_audiencia_v2`), entao
       ele nao tem onde quebrar e empurra a coluna vizinha. `anywhere` deixa quebrar no meio
       da palavra, que aqui e melhor que estourar a grade. Vale so para o nome NA CELULA:
       codigo tecnico solto (pnid, namespace) segue em uma linha. */
    .precs-supwa-tbl b.precs-supwa-mono{ overflow-wrap:anywhere; }
    .precs-supwa-nulo{ color:var(--text-muted); }
    /* (1.1.32) `--accent-orange-text` e nao `--accent-orange`. O acento cru e cor de FORMA
       (fio, barra, ponto); como TEXTO ele dava cerca de 2,1:1 sobre branco no tema claro, e
       era ele que pintava os avisos mais importantes da aba. O fallback antigo apontava para
       o vermelho, o que trocaria o significado do aviso; e a cadeia era codigo morto de
       qualquer forma, porque `--accent-orange` existe nos tres temas. */
    .precs-supwa-aviso{ color:var(--accent-orange-text); }

    /* Linha expansível: o detalhe nasce abaixo da linha e ocupa a largura toda,
       fora do grid de colunas. */
    .precs-supwa-det{
      padding:var(--space-4);
      background:var(--bg-primary); border-bottom:1px solid var(--border-color);
    }
    .precs-supwa-det-h{
      font-family:var(--font-rotulo); font-size:var(--fs-3); font-weight:700;
      text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted);
      margin-bottom:var(--space-2);
    }
    /* (1.1.32) PAR EMPILHADO, e nao rotulo e valor nas pontas opostas.
       O `justify-content:space-between` funcionava com o par curto do desenho e quebrou com
       o dado real: numa trilha de 300px, "Nome verificado" e "—" ficavam separados por 220px
       de vazio, e o olho tinha que atravessar a linha inteira para casar um com o outro. Com
       o valor EMBAIXO do rotulo, os dois ficam a 14px de distancia e a coluna de valores
       vira uma coluna de verdade. Sobra tambem a largura para o namespace, que na tela do
       Pedro se sobrepunha ao pnid.
       `auto-fill` e nao `auto-fit` pelo mesmo motivo dos KPIs: com 12 pares, `auto-fit`
       esticaria o ultimo orfao para a largura inteira. */
    .precs-supwa-det-grid{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
      gap:var(--space-2) var(--space-4);
    }
    .precs-supwa-par{
      display:flex; flex-direction:column; gap:1px;
      font-size:var(--fs-4); padding:3px 0; min-width:0;
      border-bottom:1px dashed color-mix(in srgb, var(--border-color) 60%, transparent);
    }
    .precs-supwa-par > span{
      color:var(--text-muted); font-size:var(--fs-3); text-transform:uppercase;
      letter-spacing:var(--ls-caps); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .precs-supwa-par > b{
      color:var(--text-primary); font-weight:600; min-width:0; overflow-wrap:anywhere;
    }

    /* ---------------------------------------------------------------------- */
    /* Selos de estado                                                        */
    /* ---------------------------------------------------------------------- */
    .precs-supwa-selo{
      display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
      padding:2px var(--space-2); border-radius:var(--radius-pill);
      font-size:var(--fs-4); font-weight:600; white-space:nowrap;
      border:1px solid transparent;
    }
    .precs-supwa-ponto{
      width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto;
    }
    .precs-supwa-selo.t-ok{
      color:var(--accent-green-text); background:var(--accent-green-light);
      border-color:color-mix(in srgb, var(--accent-green) 40%, transparent);
    }
    /* Mesma correcao do `.precs-supwa-aviso`: o TEXTO usa a variante de texto, e a borda
       segue usando o acento cru, que ali e forma. Os fallbacks para dourado sairam por serem
       codigo morto (o token existe nos tres temas) e por darem a impressao de que o problema
       de contraste tinha sido tratado. */
    .precs-supwa-selo.t-warn{
      color:var(--accent-orange-text);
      background:var(--accent-orange-light);
      border-color:color-mix(in srgb, var(--accent-orange) 40%, transparent);
    }
    .precs-supwa-selo.t-bad{
      color:var(--accent-red-text); background:var(--accent-red-light);
      border-color:color-mix(in srgb, var(--accent-red) 40%, transparent);
    }
    /* (1.1.32) `--bg-tertiary` e nao `--bg-primary`. O hover da linha e o estado `.aberta`
       usam `--bg-primary`, entao um selo "Sem dados" perdia o fundo e sobrava so a borda de
       1px justamente ao passar o mouse na linha dele. */
    .precs-supwa-selo.t-nulo{
      color:var(--text-muted); background:var(--bg-tertiary); border-color:var(--border-color);
    }

    /* Trilha dos níveis: "conta: bloqueado · número: limitado". É ela que
       impede a tela de mandar o gestor mexer no número quando o bloqueio é da
       conta — o defeito que fez o health_status passar a ser lido por nível. */
    .precs-supwa-trilha{
      display:block; margin-top:var(--space-3);
      font-size:var(--fs-4); color:var(--text-muted);
    }
    .precs-supwa-trilha b{ color:var(--text-secondary); }

    .precs-supwa-mot{ margin-top:var(--space-3); }
    .precs-supwa-mot-g{ margin-bottom:var(--space-2); }
    .precs-supwa-mot-n{
      font-size:var(--fs-3); color:var(--precs-gold-title); font-weight:600;
      text-transform:uppercase; letter-spacing:.03em;
    }
    .precs-supwa-mot-l{
      font-size:var(--fs-4); color:var(--text-secondary);
      padding:3px 0 3px var(--space-3);
      border-left:2px solid var(--border-color);
    }
    .precs-supwa-mot-fix{ display:block; font-size:var(--fs-4); color:var(--text-muted); }

    /* ---------------------------------------------------------------------- */
    /* Cartões de causa ("o que fazer")                                       */
    /* ---------------------------------------------------------------------- */
    /* O bloco de causas virou painel; o que sobra da classe e o respiro que separa ele da
       tabela acima. */
    .precs-supwa-causas{ margin-top:var(--space-5); }
    .precs-supwa-panel{ margin-bottom:var(--space-4); }
    /* O titulo do painel e caixa-alta e o subtitulo NAO e: ele e a frase que explica o
       painel, e caixa-alta em frase e ruido. `margin-left:auto` na acao empurra o que
       vier depois (um botao, um selo) para a direita da faixa. */
    .precs-supwa-panel > .panel-header{ flex-wrap:wrap; gap:var(--space-2) var(--space-3); }
    .precs-supwa-panel-t{ white-space:nowrap; }
    .precs-supwa-panel > .panel-header .precs-supwa-sub{
      text-transform:none; letter-spacing:0; font-weight:400; font-size:var(--fs-4);
    }
    .precs-supwa-panel-a{ margin-left:auto; text-transform:none; letter-spacing:0; }
    /* O painel das quebras ja da o respiro; a grade la dentro nao precisa de outro. */
    .precs-supwa-panel-quebras .precs-supwa-quebras{ margin-bottom:0; }
    /* Saida do vazio filtrado: o chip de limpar aqui e um botao no meio do card, entao ele
       ganha respiro proprio em vez de encostar no subtitulo. */
    .precs-supwa-vazio-btn{ margin-top:var(--space-3); }
    /* `.precs-supwa-h3` foi retirado em 1.1.32: todo titulo de bloco virou `.panel-header`. */
    .precs-supwa-causa{
      background:var(--bg-secondary); border:1px solid var(--border-color);
      border-left:3px solid var(--border-color);
      border-radius:var(--radius-inner); padding:var(--space-3) var(--space-4);
      margin-bottom:var(--space-3);
    }
    .precs-supwa-causa.grave{ border-left-color:var(--accent-red); }
    .precs-supwa-causa-h{
      display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
    }
    .precs-supwa-causa-n{
      font-family:var(--font-titulo); font-size:var(--fs-9); font-weight:700;
      color:var(--precs-gold-title); min-width:1.4rem;
    }
    .precs-supwa-causa.grave .precs-supwa-causa-n{ color:var(--accent-red-text); }
    .precs-supwa-causa-t{ font-weight:600; color:var(--text-primary); font-size:var(--fs-6); }
    .precs-supwa-causa-a{
      font-size:var(--fs-4); color:var(--text-secondary); margin:var(--space-2) 0;
      line-height:1.45;
    }
    .precs-supwa-causa-q{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
    .precs-supwa-pill{
      display:inline-flex; align-items:center; gap:6px;
      padding:2px var(--space-2); border-radius:var(--radius-pill);
      background:var(--bg-primary); border:1px solid var(--border-color);
      font-size:var(--fs-4); color:var(--text-secondary);
    }
    .precs-supwa-pill i{ font-style:normal; color:var(--text-muted); }

    /* ---------------------------------------------------------------------- */
    /* Erro, vazio, esqueleto, nota                                           */
    /* ---------------------------------------------------------------------- */
    .precs-supwa-err{
      background:var(--accent-red-light); border:1px solid
        color-mix(in srgb, var(--accent-red) 40%, transparent);
      border-radius:var(--radius-inner); padding:var(--space-3) var(--space-4);
      margin-bottom:var(--space-4); font-size:var(--fs-5); color:var(--text-secondary);
      line-height:1.5;
    }
    .precs-supwa-err-t{
      display:flex; align-items:center; gap:var(--space-2);
      font-weight:700; color:var(--accent-red-text); margin-bottom:var(--space-2);
    }
    .precs-supwa-err-o{ margin-top:var(--space-2); color:var(--text-primary); }
    .precs-supwa-err code, .precs-supwa-nota code{
      font-family:var(--font-num); font-size:.9em;
      background:var(--bg-primary); padding:1px 4px; border-radius:4px;
    }
    /* `.precs-supwa-vazio` foi retirado em 1.1.32: o vazio virou `.precs-empty`, o mesmo
       de outras 28 telas do painel. */
    .precs-supwa-nota{
      font-size:var(--fs-4); color:var(--text-muted); line-height:1.5;
      padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3);
      background:var(--bg-secondary); border:1px dashed var(--border-color);
      border-radius:var(--radius-inner);
    }
    /* O shimmer proprio (`.precs-supwa-sk` e a animacao `precsSupWaBrilho`) saiu em 1.1.32:
       o esqueleto passou a usar `.precs-skel`, o da casa. O que fica e a SILHUETA da linha,
       que e o que faz o esqueleto parecer a tabela que vai chegar em vez de so piscar.

       (1.1.60) E A SILHUETA ESTAVA MENTINDO A ALTURA. Medido: `height:44px` mais 8px de
       margem em cima e embaixo dava um passo de 60px por linha, contra os ~47px da linha
       pronta (30px de avatar + 8px de padding de cada lado + 1px de borda). Em Mensagens sao
       oito linhas: 480px prometidos contra ~376px entregues, e a tela PULAVA 104px no
       instante em que o dado chegava — exatamente o susto que um esqueleto existe para evitar.

       Agora a conta e a mesma da linha real: 30px de miolo, e a separacao pelo mesmo
       `--space-2` que a linha usa de padding, sem margem horizontal (a linha da tabela nao
       tem recuo lateral, o painel dela tem). */
    /* A MOLDURA recebe o padding EXATO da linha (`.precs-supwa-tr`, mais acima neste
       arquivo) e a barra de dentro, a altura exata do avatar (`.precs-sup-av`, 30px). Com
       isso a caixa do esqueleto e a caixa da linha sao a mesma por CONSTRUCAO, em vez de
       coincidirem por uma soma que alguem tem de refazer quando o padding mudar. */
    .precs-supwa-sk-linha{
      padding:var(--space-2) var(--space-4);
      display:flex; flex-direction:column; gap:var(--space-0);
    }
    /* As duas alturas saem da MEDICAO da celula real (nome 17px de tela, sub-linha 14px, sob o
       zoom da densidade), e nao de gosto. A largura da segunda e menor porque a sub-linha real
       tambem e: ela leva o estado do vinculo, nao o nome. */
    .precs-supwa-sk-l1{ display:block; height:22px; }
    .precs-supwa-sk-l2{ display:block; height:16px; width:38%; }
    /* O KPI do esqueleto e um `.precs-sup-card` de verdade (ver `precsSupWaEsqueleto`), entao
       ele ja tem borda, raio, sombra, padding e o `min-height:78px`. O que falta e a silhueta
       de dentro: uma barra para o numero grande e outra, menor, para o rotulo. As larguras
       sao em `ch` para acompanharem o corpo de letra em vez de cravarem pixel. */
    /* A ALTURA MINIMA SAI DA MEDICAO, e ela e maior que o `min-height:78px` do KPI real de
       proposito: o card real CRESCE alem do minimo por causa do conteudo (o numero grande, o
       rotulo em duas palavras, a sub-linha) e a grade estica os cinco pela altura do mais alto.
       Um esqueleto no minimo faria a fileira inteira CRESCER na troca.

       E NAO EXISTE UM NUMERO CERTO AQUI, porque a altura real depende do dado: no Parque o card
       mede 95px com a sub-linha e 78px sem ela (o filtro a faz sumir), e a grade estica os
       cinco pela altura do mais alto. Um esqueleto colado num dos extremos erraria o outro na
       mesma medida, entao ele mira o MEIO da faixa — 86px, e daqui sai o 88.

       (1.1.96, segunda medicao) A FAIXA ERA 90..112 E VIROU 78..95 SEM NINGUEM TOCAR NESTE
       ARQUIVO. Quem a moveu foi o respiro lateral que a supervisao ganhou nesta mesma leva
       (`.precs-sup-wrap`, 24px de cada lado): a fileira de KPIs e `auto-fill` de 168px, entao
       48px a menos de conteiner redistribuem as trilhas e mudam onde o texto quebra. Fica
       registrado porque e a licao, e nao o numero: ESTA ALTURA E FUNCAO DA LARGURA DO
       CONTEINER, e toda mudanca de gutter, de teto ou de grade na supervisao a move de novo.
       Por isso a assercao do teste parou de decorar tolerancia e passou a MEDIR os dois
       extremos na hora (caso 14 do teste-supervisao-whatsapp) — ela agora acusa a deriva em
       vez de passar raspando por ela.

       (1.1.96) OS NUMEROS ACIMA ESTAO EM PX DE AUTOR, e a correcao veio com preco. Eles eram
       "93 e 79", medidos em px de TELA com o zoom de 0,85 da densidade normal de entao; em px
       de autor aquilo e 109 e 93, e por isso nunca fecharam com o 100 escrito logo abaixo.
       Enquanto o zoom encolhia tudo em 15%, os 12px de diferenca entre esqueleto e card cheio
       viravam 10 arredondados e a assercao do teste passava RASPANDO. Quando a escala passou a
       depender da tela e "normal" virou zoom 1 no monitor de 1920, os 12px apareceram inteiros
       e o teste reprovou sem que uma linha do WhatsApp tivesse mudado.
       A regra sempre esteve certa; o que estava errado era a UNIDADE do registro. Quem mede
       altura por getBoundingClientRect dentro do <main> le px de tela, e px de tela so vale
       junto da escala em que foi medido. A assercao agora mede os dois extremos na hora e cobra
       o meio da faixa, em vez de decorar um numero (ver o caso 14 do teste). */
    .precs-supwa-kpi-sk{
      display:flex; flex-direction:column; gap:var(--space-2); justify-content:center;
      min-height:88px;
    }
    /* Tres barras, na silhueta do card real: numero grande, rotulo, sub-linha. */
    .precs-supwa-sk-num{ display:block; height:26px; width:4ch; }
    .precs-supwa-sk-lbl{ display:block; height:10px; width:11ch; }
    .precs-supwa-sk-sub{ display:block; height:9px; width:7ch; }
    /* Cartao de esqueleto nao levanta no hover: ele nao promete clique nenhum. Mesmo motivo
       (e mesmo remedio) do `.precs-supwa-kpi-inerte` logo acima. */
    .precs-supwa-kpi-sk{ cursor:default; }
    .precs-supwa-kpi-sk:hover{ transform:none; border-color:var(--border-color); }

    /* ---------------------------------------------------------------------- */
    /* Controles e gráficos da sub-aba Mensagens                              */
    /* ---------------------------------------------------------------------- */
    .precs-supwa-ctrl{
      display:flex; align-items:center; gap:var(--space-3);
      flex-wrap:wrap; margin-bottom:var(--space-4);
    }
    /* (1.1.32) UM SEGMENTED, UMA APARENCIA. Os tres controles de Mensagens (periodo, metrica
       e moeda) sobrescreviam `font-size` para .78rem e o `padding` do segmented da casa, e
       ficavam visivelmente menores que as sub-abas Parque/Mensagens/Modelos a 40px de
       distancia -- "os filtros Hoje 7 dias 30 dias ... sao mt esqueciveis" (Pedro,
       26/08/2026). O que continua diferente e SO o que precisa ser: `flex:0 0 auto`, porque
       aqui os botoes tem rotulos de larguras muito distintas ("Hoje" x "30 dias") e o
       `flex:1` do padrao os esticaria todos para o tamanho do maior. */
    .precs-supwa-seg{ flex:0 0 auto; }
    .precs-supwa-seg button{ flex:0 0 auto; padding:var(--space-2) var(--space-3); }
    /* `.precs-supwa-card` foi retirado em 1.1.32: o card do grafico virou
       `.panel .precs-sup-panel`, o painel da casa. */
    /* (1.1.31 - 2a volta) `height:auto` e nao altura fixa, e isto e o par da medicao no JS.
       O viewBox passou a ter a largura REAL do container e altura 260, entao deixar o
       navegador calcular a altura mantem a escala 1:1 nos dois eixos. Com altura cravada em
       px, qualquer divergencia entre a largura medida e a renderizada voltaria a esticar o
       desenho -- que foi o defeito do "dash horrivel" relatado em 26/08/2026. */
    .precs-supwa-graf svg{ width:100%; height:auto; display:block; }
    .precs-supwa-grade{ stroke:var(--border-color); stroke-width:1; }
    /* 11px e nao 9px: com a escala 1:1 o corpo declarado e o corpo na tela. Antes o 9px era
       esticado 2,5x na horizontal, o que dava letra larga e fina. */
    .precs-supwa-eixo{
      fill:var(--text-muted); font-size:var(--fs-3); font-family:var(--font-num);
    }
    /* (1.1.32) A SÉRIE SE DESENHA. "Tela de mensagens é a mais legalzinha por conta do
       gráfico, mas parece sem vida, sem animação ao selecionar os operadores para comparar,
       tudo muito duro" (Pedro, 26/08/2026). Escolher um operador repintava o SVG inteiro e
       a curva nova simplesmente aparecia pronta.
       O traço entra por `stroke-dasharray` + `stroke-dashoffset`, que é a única forma de
       animar caminho SVG sem JavaScript.
       `.28s` de atraso deixa a grade e o eixo assentarem antes da curva correr.

       (1.1.40) O COMPRIMENTO VEM DO DESENHO, por `--supwa-dash`, e o 2000 fixo que estava
       aqui era um DEFEITO VISÍVEL, não uma folga.
       O valor tem que ser MAIOR que o caminho real: quando o offset chega a zero, o padrão
       repete "N pintado, N apagado", então tudo o que passa de N cai no vão e fica invisível
       PARA SEMPRE — não é a animação que não terminou, é traço que nunca é pintado.
       2000 cabia na tela em que isso foi escrito e não cabia na do Pedro: com o card em
       ~1.730px, 30 dias e a curva subindo e descendo, a polilinha passa de 2.000px. O sintoma
       foi o print de 31/08/2026 — a última parte do gráfico só com as bolinhas, porque os
       `<circle>` são elementos próprios e aparecem inteiros.
       Quem calcula agora é `precsSupWaLinhaSVG`, somando os segmentos (a curva é reta entre
       pontos, então a soma É o comprimento exato). O 2000 fica só como fallback do `var()`,
       para um SVG antigo em cache não sumir com a linha inteira. */
    .precs-supwa-linha{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
      stroke-dasharray:var(--supwa-dash, 2000); stroke-dashoffset:var(--supwa-dash, 2000);
      animation:precsSupWaTraco .9s var(--ease-2) .1s forwards; }
    @keyframes precsSupWaTraco{ to{ stroke-dashoffset:0; } }
    .precs-supwa-ponto-serie{ opacity:0; animation:precsSupWaPonto .25s ease .85s forwards; }
    @keyframes precsSupWaPonto{ to{ opacity:1; } }
    @media (prefers-reduced-motion: reduce){
      .precs-supwa-linha{ stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
      .precs-supwa-ponto-serie{ opacity:1; animation:none; }
    }
    /* Alvo de 6px de raio invisível sobre cada ponto: o `<title>` nativo do SVG
       precisa de área para o ponteiro achar, e o círculo visível tem 2,2px.
       O tooltip é `<title>` e não o crosshair do painel de origem porque o
       crosshair exige religar listeners a cada repintura, e esta tela repinta
       inteira — `<title>` sobrevive a qualquer innerHTML e o leitor de tela
       também o anuncia. */
    /* (1.1.32) O alvo passou a ser uma COLUNA por dia e nao um circulo por ponto: os
       circulos se sobrepunham entre series e escondiam cinco das seis. `cursor:crosshair`
       porque o alvo cobre a area do grafico e nao um objeto clicavel, e o realce fraco no
       hover diz qual coluna esta sendo lida. */
    .precs-supwa-alvo{
      fill:transparent; cursor:crosshair;
      transition:fill var(--dur-1) var(--ease-1);
    }
    .precs-supwa-alvo:hover{ fill:color-mix(in srgb, var(--text-primary) 5%, transparent); }
    @media (prefers-reduced-motion: reduce){ .precs-supwa-alvo{ transition:none; } }
    .precs-supwa-lgd{
      display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4);
      margin-top:var(--space-2); font-size:var(--fs-4); color:var(--text-secondary);
    }
    .precs-supwa-lgd-i{ display:inline-flex; align-items:center; gap:6px; }
    .precs-supwa-lgd-i i{ width:12px; height:3px; border-radius:2px; }
    /* (1.1.161) A área sob a curva e o valor na ponta. A área entra junto com a linha (fade), e o valor depois. */
    .precs-supwa-area{ opacity:.13; animation:precsSupWaArea .9s var(--ease-2) var(--dur-2) both; }
    @keyframes precsSupWaArea{ from{ opacity:0; } to{ opacity:.13; } }
    .precs-supwa-fim{ font-family:var(--font-num); font-size:var(--fs-4); font-weight:700; opacity:0; animation:precsSupWaPonto var(--dur-3) ease 1s forwards; }
    @media (prefers-reduced-motion: reduce){ .precs-supwa-area{ animation:none; } .precs-supwa-fim{ opacity:1; animation:none; } }
    .precs-supwa-spark{ width:78px; height:22px; }
    .precs-supwa-spark path{ fill:none; stroke-width:1.6; stroke-linejoin:round; }

    .precs-supwa-rank{ display:flex; flex-direction:column; gap:var(--space-2); }
    .precs-supwa-rank-l{
      display:grid; grid-template-columns:minmax(120px,1.2fr) 3fr auto;
      gap:var(--space-3); align-items:center; font-size:var(--fs-5);
    }
    .precs-supwa-rank-n{ color:var(--text-secondary); }
    .precs-supwa-rank-b{
      height:9px; background:var(--bg-primary); border-radius:var(--radius-pill); overflow:hidden;
    }
    .precs-supwa-rank-b i{ display:block; height:100%; border-radius:var(--radius-pill); }
    .precs-supwa-rank-v{
      font-family:var(--font-num); font-size:var(--fs-4); color:var(--text-primary);
    }

    /* Botão que liga a cor do operador ao gráfico. O quadradinho fica
       transparente quando ele não está selecionado, para o espaço não pular. */
    .precs-supwa-oplink{
      background:none; border:none; padding:0; cursor:pointer; color:var(--text-primary);
      font:inherit; font-weight:600; text-align:left;
      display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    /* O quadradinho de cor. Ele fica no lugar mesmo sem selecao, para o nome nao pular
       quando a pessoa escolhe o operador.
       (1.1.32) O ANEL SO APARECE quando ha o que mostrar: com o quadrado transparente e o
       anel sempre desenhado, cada linha exibia uma caixinha vazia ao lado do nome, que no
       tema claro lia como caixa de marcacao desmarcada. O hover devolve o anel, e ai ele
       diz "isto aqui clica" no momento em que a pergunta e feita. */
    .precs-supwa-oplink i{
      width:9px; height:9px; border-radius:2px; flex:0 0 auto;
      box-shadow:inset 0 0 0 1px transparent; transition:box-shadow var(--dur-1) var(--ease-1);
    }
    .precs-supwa-oplink[aria-pressed="true"] i,
    .precs-supwa-oplink:hover i{ box-shadow:inset 0 0 0 1px var(--border-color); }
    @media (prefers-reduced-motion: reduce){ .precs-supwa-oplink i{ transition:none; } }
    .precs-supwa-oplink{ transition:color var(--dur-1) var(--ease-1); }
    .precs-supwa-oplink:hover{ color:var(--precs-gold-title); }
    /* Na coluna propria dele agora: centralizado na linha, sem margem de encaixe. */
    .precs-supwa-mais{
      background:none; border:1px solid var(--border-color); border-radius:var(--radius-sm);
      width:22px; height:22px; line-height:1; cursor:pointer;
      color:var(--text-muted); font-size:var(--fs-5); padding:0;
    }
    .precs-supwa-mais{ transition:color var(--dur-1) var(--ease-1), border-color var(--dur-1) var(--ease-1); }
    .precs-supwa-mais:hover{ color:var(--precs-gold); border-color:var(--precs-gold); }
    .precs-supwa-mais:active{ transform:translateY(1px); }

    .precs-supwa-dias{ margin-top:var(--space-2); }
    .precs-supwa-dias-h, .precs-supwa-dias-l{
      display:grid; grid-template-columns:.8fr 1fr 1fr .8fr 1fr;
      gap:var(--space-3); padding:3px 0; font-size:var(--fs-4);
    }
    .precs-supwa-dias-h{
      color:var(--text-muted); font-size:var(--fs-3); text-transform:uppercase;
      letter-spacing:var(--ls-caps); border-bottom:1px solid var(--border-color);
      font-family:var(--font-rotulo); font-weight:700;
    }
    .precs-supwa-dias-l{ color:var(--text-secondary); }
    .precs-supwa-dias-l:nth-child(even){ background:var(--bg-secondary); }

    /* ---------------------------------------------------------------------- */
    /* Quebras de custo                                                       */
    /* ---------------------------------------------------------------------- */
    /* Mesmo motivo do `.precs-supwa-kpis`: sao quatro quebras, e a quarta ("Por numero", a
       mais longa) era a que esticava. */
    .precs-supwa-quebras{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
      gap:var(--space-3); margin-bottom:var(--space-4);
    }
    .precs-supwa-quebra{
      background:var(--bg-secondary); border:1px solid var(--border-color);
      border-radius:var(--radius-inner); padding:var(--space-3) var(--space-4);
    }
    .precs-supwa-quebra-t{
      font-family:var(--font-rotulo); font-size:var(--fs-3); font-weight:700;
      text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted);
      margin-bottom:var(--space-2);
    }
    .precs-supwa-quebra-l{
      display:grid; grid-template-columns:minmax(0,1.3fr) 1fr auto;
      gap:var(--space-2); align-items:center; font-size:var(--fs-4);
      color:var(--text-secondary); padding:2px 0;
    }
    .precs-supwa-quebra-l > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .precs-supwa-quebra-l b{
      font-family:var(--font-num); font-size:var(--fs-4); color:var(--text-primary);
      font-weight:600; white-space:nowrap;
    }
    .precs-supwa-quebra-b{
      height:6px; background:var(--bg-primary); border-radius:var(--radius-pill); overflow:hidden;
    }
    /* Aqui o ouro CABE: barra de proporção é cromo de interface, não série de dado. */
    .precs-supwa-quebra-b i{
      display:block; height:100%; border-radius:var(--radius-pill);
      background:linear-gradient(90deg, var(--precs-gold), var(--precs-gold-soft));
    }

    /* (1.1.32) A BUSCA GANHOU PRESENCA. Ela era um campo de 360px encostado na margem
       esquerda, no meio do respiro entre dois blocos, e some da tela: "o input totalmente
       esquecivel, nem enxergo ele". Agora ela e uma faixa da largura do painel, colada na
       tabela de baixo (margem inferior zero de proposito), com o fundo da superficie e o
       raio da casa -- o mesmo tratamento que a barra de filtros da aba Operadores tem. */
    .precs-supwa-busca-linha{
      display:flex; align-items:center; gap:var(--space-3);
      padding:var(--space-2) var(--space-3); margin-bottom:calc(var(--space-2) * -1);
      background:var(--bg-secondary); border:1px solid var(--border-color);
      border-bottom:none;
      border-top-left-radius:var(--radius-card); border-top-right-radius:var(--radius-card);
    }
    .precs-supwa-busca-linha .precs-supwa-busca{ flex:1 1 auto; max-width:420px; }
    /* O painel logo abaixo perde o canto de cima, para os dois lerem como uma peca so. */
    .precs-supwa-busca-linha + #sup-supwa-modelos-corpo .precs-supwa-panel:first-child{
      border-top-left-radius:0; border-top-right-radius:0;
    }

    /* ---------------------------------------------------------------------- */
    /* Estreito: as linhas viram cartões                                      */
    /* ---------------------------------------------------------------------- */
    /*  Mesmo breakpoint do resto da supervisão. Seis e sete colunas não cabem
        em 1100px, e encolher a fonte só empurra o problema: a linha vira um
        cartão de uma coluna, com o cabeçalho da tabela escondido (ele não
        rotula nada quando não há colunas). */
    @media (max-width: 1100px){
      .precs-supwa-tbl .precs-supwa-th{ display:none; }
      .precs-supwa-tbl-parque .precs-supwa-tr,
      .precs-supwa-tbl-msg .precs-supwa-tr,
      .precs-supwa-tbl-tpl .precs-supwa-tr{
        grid-template-columns:1fr; gap:var(--space-2);
      }
      .precs-supwa-tbl-msg .precs-supwa-tr > span:last-child{ justify-content:flex-start; }
      /* (1.1.60) A REGRA DE CELULA VAZIA VIVE AQUI, e so aqui. Com uma coluna so, celula sem
         conteudo viraria um vao de 8px no meio do cartao; com sete colunas, esconde-la
         escorrega a grade inteira (ver o bloco de comentario onde ela morava). */
      .precs-supwa-tr > span:empty{ display:none; }
      .precs-supwa-tr.precs-supwa-tot{ position:static; }
      .precs-supwa-rank-l{ grid-template-columns:1fr; gap:2px; }
      .precs-supwa-dias-h{ display:none; }
      .precs-supwa-dias-l{ grid-template-columns:repeat(2, 1fr); }
      .precs-supwa-topo{ align-items:flex-start; }
    }

    /* ====================================================================== */
    /* PRECS (1.1.31) — VERIFICAÇÃO EM DUAS ETAPAS NO LOGIN                   */
    /* ---------------------------------------------------------------------- */
    /*  A 3C ligou 2FA por local de acesso em 26/08/2026. O bloco vive dentro
        do mesmo painel de login e só aparece quando ela pede, então ele herda
        a moldura e precisa apenas do que é próprio: o campo do código, o QR do
        cadastro e os dois links do rodapé.                                   */
    .precs-2fa-topo{ margin-bottom: var(--space-4); }
    .precs-2fa-titulo{
      font-family:var(--font-rotulo); font-size:var(--fs-6); font-weight:700;
      color:var(--text-primary);
    }
    .precs-2fa-sub{
      font-size:var(--fs-4); color:var(--text-muted); margin-top:2px; line-height:1.45;
    }
    /* (1.1.31) `display:flex` DE AUTOR VENCE o `[hidden]{display:none}` do navegador, que e
       regra de UA. Sem a linha abaixo, `el.hidden = true` neste bloco nao esconde nada: o QR
       de cadastro continuava na tela no estado `otp_required`, onde ja nao ha o que cadastrar.
       E a mesma armadilha ja documentada em `.precs-seg[hidden]` e em `.precs-card-oculto`.
       Pegadinha dobrada: um teste que le a PROPRIEDADE `.hidden` passa com a tela errada, por
       isso o teste desta tela mede o `display` computado. */
    .precs-2fa-cadastro[hidden]{ display:none; }
    .precs-2fa-cadastro{
      display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
      padding:var(--space-4); margin-bottom:var(--space-4);
      background:var(--bg-primary); border:1px solid var(--border-color);
      border-radius:var(--radius-inner);
    }
    /* Fundo BRANCO fixo atrás do QR, e isto não é descuido de tema: o SVG que a
       Meta e a 3C mandam desenha os módulos em preto sem pintar o fundo, então
       num tema escuro ele fica preto no preto e a câmera não lê nada. */
    .precs-2fa-cadastro img{
      background:#FFFFFF; padding:6px; border-radius:var(--radius-sm); display:block;
    }
    .precs-2fa-chave{
      display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
      justify-content:center;
    }
    .precs-2fa-secret{
      font-family:var(--font-num); font-size:var(--fs-5); font-weight:600;
      color:var(--precs-gold-title); letter-spacing:.06em;
    }
    .precs-2fa-copiar{
      background:none; border:1px solid var(--border-color); border-radius:var(--radius-sm);
      padding:2px var(--space-2); cursor:pointer;
      font-family:var(--font-acao); font-size:var(--fs-4); color:var(--text-secondary);
    }
    .precs-2fa-copiar:hover{ color:var(--precs-gold); border-color:var(--precs-gold); }
    .precs-2fa-passos{
      margin:0; padding-left:1.1rem; font-size:var(--fs-4); color:var(--text-muted);
      line-height:1.6; align-self:stretch;
    }
    /* O campo é o alvo principal da tela: seis dígitos espaçados, centralizados e
       grandes, para quem está copiando do celular não errar de casa. */
    .precs-2fa-codigo{
      text-align:center; font-family:var(--font-num);
      font-size:var(--fs-11); font-weight:600; letter-spacing:.42em;
      text-indent:.42em;   /* compensa o espaçamento do último dígito e recentra */
    }
    .precs-2fa-rodape{
      display:flex; align-items:center; justify-content:space-between;
      gap:var(--space-3); margin-top:var(--space-3);
    }
    .precs-2fa-link{
      background:none; border:none; padding:0; cursor:pointer;
      font-family:var(--font-acao); font-size:var(--fs-4); color:var(--text-muted);
      text-decoration:underline; text-underline-offset:2px;
    }
    .precs-2fa-link:hover{ color:var(--precs-gold); }
    /* Rodape com um botao so (a 3C parou de permitir adiar) encosta a direita, em vez de
       deixar o "Voltar" solto no meio da linha. NAO da para usar `:only-child`: o botao
       escondido continua sendo filho, so nao e desenhado. Quem responde e o irmao seguinte
       de um `[hidden]`. */
    .precs-2fa-rodape > .precs-2fa-link[hidden] + .precs-2fa-link{ margin-left:auto; }

/* ==========================================================================
   (22/09/2026) A SUB-ABA LIGAÇÕES
   --------------------------------------------------------------------------
   Uma barra de escolha (caixa, atalhos de período, calendário PRECS), um resumo de uma linha e
   a lista. A linha é uma GRADE e não uma tabela: cada célula tem largura própria, a do nome
   estica, e o player abre EMBAIXO da linha sem empurrar as colunas das outras — que é o que
   uma `<table>` com `colspan` faria mal.

   Sem `@media` de largura (regra do teste-aparelho): quem cuida do aperto é o `wrap` da barra
   e o `minmax` da grade.
   ========================================================================== */
.precs-suplig-barra{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
}
.precs-suplig-rot{
  font-family: var(--font-rotulo);
  font-size: var(--fs-2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.precs-suplig-sel{
  min-width: 180px;
  max-width: 260px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-acao);
  font-size: var(--fs-4);
}
.precs-suplig-sel:focus-visible{ outline: 2px solid var(--precs-gold); outline-offset: 1px; }
.precs-suplig-atalhos{ display: flex; gap: var(--space-1); }
.precs-suplig-chip{
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-acao);
  font-size: var(--fs-3);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1),
              border-color var(--dur-1) var(--ease-1);
}
.precs-suplig-chip:hover{ border-color: var(--precs-gold); color: var(--precs-gold-title); }
/* ATENCAO AO TOKEN: `--precs-gold-soft` e uma COR DE OURO (#D2AE52 no escuro), e nao um
   fundo suave — o nome engana. Usado como `background` com texto dourado por cima, o
   rotulo some: foi o que aconteceu com o chip aceso e com o botao de ouvir, medido na
   tela do Pedro em 22/09/2026. O fundo suave da marca e `--precs-gold-light`, que ja e
   um rgba de 16%. */
.precs-suplig-chip.ativo{
  background: var(--precs-gold-light);
  border-color: var(--precs-gold);
  color: var(--precs-gold-title);
}
.precs-suplig-chip:focus-visible{ outline: 2px solid var(--precs-gold); outline-offset: 1px; }
.precs-suplig-datas{ margin-left: auto; }

.precs-suplig-resumo{
  padding: var(--space-3) var(--space-1) var(--space-2);
  font-family: var(--font-rotulo);
  font-size: var(--fs-4);
  color: var(--text-secondary);
}
.precs-suplig-resumo b{ color: var(--precs-gold-title); font-family: var(--font-num); }
.precs-suplig-resumo i{ color: var(--accent-orange-text); font-style: normal; }
.precs-suplig-vazio,
.precs-suplig-erro{
  padding: var(--space-5) var(--space-3);
  font-family: var(--font-rotulo);
  font-size: var(--fs-4);
  color: var(--text-muted);
  text-align: center;
}
.precs-suplig-erro{ color: var(--accent-red-text); }

.precs-suplig-lista{
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.precs-suplig-linha{
  border: 1px solid var(--border-color);
  border-radius: var(--radius-inner);
  background: var(--bg-secondary);
  overflow: hidden;
}
.precs-suplig-cab{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.precs-suplig-hora{
  font-family: var(--font-num);
  font-size: var(--fs-3);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* O contato em cima e a CAIXA embaixo, na mesma célula: lidos juntos viram uma frase ("conversa
   com fulano, na caixa de sicrano") e a grade não precisa de uma sexta coluna, que apertaria
   justamente o nome do credor — o que o olho procura primeiro. */
.precs-suplig-quem{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.precs-suplig-quem b{
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: var(--fs-4);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.precs-suplig-quem i{
  font-family: var(--font-rotulo);
  font-style: normal;
  font-size: var(--fs-2);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.precs-suplig-dir,
.precs-suplig-des{
  padding: var(--space-0) var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-rotulo);
  font-size: var(--fs-2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.precs-suplig-dir{ background: var(--bg-tertiary); color: var(--text-muted); }
/* As cores de estado são o vocabulário imutável do painel: verde é "deu certo" em toda a tela,
   e uma ligação atendida é o "deu certo" desta lista. */
.precs-suplig-des.boa{ background: var(--accent-green-light); color: var(--accent-green-text); }
.precs-suplig-des.ruim{ background: var(--accent-red-light); color: var(--accent-red-text); }
.precs-suplig-dur{
  font-family: var(--font-num);
  font-size: var(--fs-3);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.precs-suplig-ouvir{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--precs-gold);
  border-radius: var(--radius-pill);
  background: var(--precs-gold-light);
  color: var(--precs-gold-title);
  font-family: var(--font-acao);
  font-size: var(--fs-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-1);
}
.precs-suplig-ouvir:hover{ background: var(--precs-gold); color: var(--bg-primary); }
.precs-suplig-ouvir:focus-visible{ outline: 2px solid var(--precs-gold); outline-offset: 2px; }
.precs-suplig-semgrav{
  font-family: var(--font-rotulo);
  font-size: var(--fs-2);
  color: var(--text-muted);
  white-space: nowrap;
}
.precs-suplig-player{
  padding: var(--space-0) var(--space-3) var(--space-3);
  font-family: var(--font-rotulo);
  font-size: var(--fs-3);
  color: var(--text-muted);
}

/* A barra de páginas. Ela só existe com mais de uma página, e diz a FAIXA além do número: "16 a
   30 de 52" responde "onde eu estou" sem obrigar ninguém a multiplicar página por tamanho. */
.precs-suplig-pag{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2) var(--space-2);
}
.precs-suplig-pag-b{
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-acao);
  font-size: var(--fs-3);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1);
}
.precs-suplig-pag-b:hover:not(:disabled){
  border-color: var(--precs-gold);
  color: var(--precs-gold-title);
}
.precs-suplig-pag-b:focus-visible{ outline: 2px solid var(--precs-gold); outline-offset: 2px; }
/* Desabilitado e VISÍVEL: some-lo faria os dois botões dançarem de posição a cada página, e o
   dedo aprende posição. Ver a doutrina do trilho de temas. */
.precs-suplig-pag-b:disabled{ opacity: .38; cursor: default; }
.precs-suplig-pag-txt{
  font-family: var(--font-num);
  font-size: var(--fs-3);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.precs-suplig-pag-txt b{ color: var(--text-secondary); }

    /* ====================================================================== */
    /* (30/09/2026) A ABA META                                                 */
    /* ====================================================================== */
    /* O azul da Meta faz para esta aba o que o verde faz para a de WhatsApp: diz
       de longe que é outro assunto (a conta na Meta, e não a operação). O texto
       não usa o azul puro: misturado com a cor de texto do tema, ele clareia no
       escuro e escurece no claro, e fica legível nos dois.
       (2ª volta) "Impecável, sem input padrão de HTML": nenhum controle do
       navegador aparece cru; tudo anima com os tokens de duração e curva. */
    .precs-meta{
      --mb: var(--precs-meta-marca);
      --mb-txt: color-mix(in srgb, var(--precs-meta-marca) 72%, var(--text-primary));
      --mb-10: color-mix(in srgb, var(--precs-meta-marca) 10%, transparent);
      --mb-18: color-mix(in srgb, var(--precs-meta-marca) 18%, transparent);
      --mb-35: color-mix(in srgb, var(--precs-meta-marca) 35%, transparent);
      --mb-borda: color-mix(in srgb, var(--precs-meta-marca) 45%, var(--border-color));
    }
    .precs-seg button.precs-sup-aba-meta{
      color:color-mix(in srgb, var(--precs-meta-marca) 72%, var(--text-primary));
      box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--precs-meta-marca) 55%, transparent);
      display:inline-flex; align-items:center; gap:6px; justify-content:center;
    }
    /* O par do `[hidden]`, pelo mesmo motivo escrito na aba WhatsApp acima: o
       inline-flex empata em especificidade com a regra que esconde e vence por
       carregar depois. Sem esta linha o botão aparece com `hidden` setado. */
    .precs-seg button.precs-sup-aba-meta[hidden]{ display:none; }
    .precs-seg button.precs-sup-aba-meta:hover{ background:color-mix(in srgb, var(--precs-meta-marca) 12%, transparent); }
    .precs-seg button.precs-sup-aba-meta.active{
      background:color-mix(in srgb, var(--precs-meta-marca) 18%, var(--bg-secondary));
      box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--precs-meta-marca) 75%, transparent), var(--shadow);
    }
    .precs-sup-aba-meta-ico{ display:inline-flex; flex:0 0 auto; }

    /* O cabeçalho da aba: o símbolo num disco azul que respira devagar */
    .precs-meta-hero{
      display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5);
      margin-bottom:var(--space-4); border-radius:var(--radius-card);
      background:linear-gradient(120deg, var(--mb-18), transparent 70%), var(--bg-secondary);
      border:1px solid var(--mb-borda);
    }
    .precs-meta-hero-logo{
      display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; flex:0 0 auto;
      border-radius:50%; color:white;
      background:linear-gradient(135deg, var(--mb), color-mix(in srgb, var(--mb) 55%, black));
      animation:precsMetaRespira 6s var(--ease-1) infinite;
    }
    @keyframes precsMetaRespira{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
    .precs-meta-hero-txt{ display:flex; flex-direction:column; gap:var(--space-0); min-width:0; flex:1 1 auto; }
    .precs-meta-hero-txt b{ font-family:var(--font-rotulo); font-size:var(--fs-9); font-weight:700; color:var(--text-primary); }
    .precs-meta-hero-txt span{ font-size:var(--fs-5); color:var(--text-muted); }

    /* As abas, com a pílula azul que desliza até a escolhida */
    .precs-meta-abas{
      position:relative; display:inline-flex; flex-wrap:wrap; gap:var(--space-1); padding:var(--space-1);
      margin-bottom:var(--space-4); border-radius:var(--radius-pill);
      background:var(--bg-secondary); border:1px solid var(--border-color);
    }
    .precs-meta-abas::before{
      content:""; position:absolute; top:var(--space-1); bottom:var(--space-1); left:var(--px, 0); width:var(--pw, 0);
      border-radius:var(--radius-pill); background:linear-gradient(135deg, var(--mb), color-mix(in srgb, var(--mb) 62%, black));
      opacity:0; transition:left var(--dur-3) var(--ease-2), width var(--dur-3) var(--ease-2), opacity var(--dur-2) var(--ease-1);
    }
    .precs-meta-abas[data-pilula]::before{ opacity:1; }
    .precs-meta-abas button{
      position:relative; display:inline-flex; align-items:center; gap:var(--space-2);
      padding:var(--space-2) var(--space-4); border:none; border-radius:var(--radius-pill); background:transparent;
      color:var(--text-secondary); font-family:var(--font-acao); font-weight:600; font-size:var(--fs-5); cursor:pointer;
      transition:color var(--dur-2) var(--ease-1), background var(--dur-2) var(--ease-1);
    }
    .precs-meta-abas button:hover{ color:var(--text-primary); background:var(--mb-10); }
    .precs-meta-abas button.active{ color:white; }
    .precs-meta-abas:not([data-pilula]) button.active{ background:var(--mb); }
    .precs-meta-abas[data-pilula] button.active:hover{ background:transparent; }
    .precs-meta-abas button:focus-visible{ outline:2px solid var(--mb-txt); outline-offset:2px; }
    html[data-aparelho]:not([data-tv]) .precs-meta-abas{ display:flex; }
    html[data-aparelho]:not([data-tv]) .precs-meta-abas button{ padding:var(--space-2) var(--space-3); font-size:var(--fs-4); }

    /* A entrada de cada sub-aba */
    .precs-meta-entra{ animation:precsMetaEntra var(--dur-3) var(--ease-2) both; }
    @keyframes precsMetaEntra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

    /* Botões */
    .precs-meta-btn{
      position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
      padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill); cursor:pointer;
      font-family:var(--font-acao); font-weight:600; font-size:var(--fs-5);
      border:1px solid var(--mb-borda); background:var(--mb-10); color:var(--mb-txt);
      transition:transform var(--dur-2) var(--ease-2), background var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1), opacity var(--dur-2) var(--ease-1);
    }
    .precs-meta-btn:hover{ background:var(--mb-18); transform:translateY(-1px); }
    .precs-meta-btn:active{ transform:translateY(0) scale(.98); }
    .precs-meta-btn:focus-visible{ outline:2px solid var(--mb-txt); outline-offset:2px; }
    .precs-meta-btn.primario{
      color:white; border-color:transparent; padding:var(--space-3) var(--space-6); font-size:var(--fs-6);
      background:linear-gradient(135deg, var(--mb), color-mix(in srgb, var(--mb) 62%, black)); box-shadow:var(--shadow);
    }
    .precs-meta-btn.primario:hover{ box-shadow:var(--shadow-lg); filter:brightness(1.08); }
    .precs-meta-btn.fantasma{ background:transparent; }
    .precs-meta-btn.perigo{ color:var(--accent-red); border-color:color-mix(in srgb, var(--accent-red) 45%, transparent);
      background:color-mix(in srgb, var(--accent-red) 10%, transparent); }
    .precs-meta-btn.perigo:hover{ background:color-mix(in srgb, var(--accent-red) 18%, transparent); }
    .precs-meta-btn:disabled{ cursor:wait; opacity:.75; transform:none; }
    /* Ocupado: o texto some e um anel gira no lugar, sem o botão mudar de tamanho */
    .precs-meta-btn.ocupado{ color:transparent; }
    .precs-meta-btn.ocupado svg{ opacity:0; }
    .precs-meta-btn.ocupado::after{
      content:""; position:absolute; width:16px; height:16px; border-radius:50%;
      border:2px solid color-mix(in srgb, white 40%, transparent); border-top-color:white;
      animation:precsMetaGira .7s linear infinite;
    }
    .precs-meta-btn:not(.primario).ocupado::after{ border-color:var(--mb-35); border-top-color:var(--mb-txt); }
    @keyframes precsMetaGira{ to{ transform:rotate(360deg); } }
    .precs-meta-giro{ display:inline-flex; }
    #sup-meta-atualizar.girando .precs-meta-giro{ animation:precsMetaGira .9s linear infinite; }
    .precs-meta-link{
      border:none; background:none; padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); cursor:pointer;
      color:var(--mb-txt); font-family:var(--font-acao); font-weight:600; font-size:var(--fs-4);
      transition:background var(--dur-2) var(--ease-1);
    }
    .precs-meta-link:hover{ background:var(--mb-10); }

    /* Chips de filtro */
    .precs-meta-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
    .precs-meta-chip{
      display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3);
      border-radius:var(--radius-pill); border:1px solid var(--border-color); background:var(--bg-secondary);
      color:var(--text-secondary); font-family:var(--font-acao); font-weight:600; font-size:var(--fs-4); cursor:pointer;
      transition:background var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1), color var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2);
    }
    .precs-meta-chip b{ font-family:var(--font-num); font-weight:600; padding:0 var(--space-2); border-radius:var(--radius-pill); background:var(--bg-tertiary); }
    .precs-meta-chip:hover{ border-color:var(--mb-borda); transform:translateY(-1px); }
    .precs-meta-chip.ativo{ color:white; border-color:transparent; background:var(--mb); }
    .precs-meta-chip.ativo b{ background:color-mix(in srgb, white 22%, transparent); }
    .precs-meta-chip.zero{ opacity:.55; }

    /* Números: um cartão por linha */
    .precs-meta-resumo{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-4); }
    .precs-meta-alerta{
      padding:var(--space-3) var(--space-4); border-radius:var(--radius-inner); font-size:var(--fs-5);
      color:var(--text-primary); border:1px solid color-mix(in srgb, var(--accent-red) 40%, transparent);
      background:color-mix(in srgb, var(--accent-red) 9%, transparent);
    }
    .precs-meta-grade-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:var(--space-4); }
    .precs-meta-card{
      position:relative; display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4);
      border-radius:var(--radius-card); background:var(--bg-secondary); border:1px solid var(--border-color);
      overflow:hidden; animation:precsMetaEntra var(--dur-3) var(--ease-2) both; animation-delay:calc(var(--i, 0) * 35ms);
      transition:transform var(--dur-2) var(--ease-2), border-color var(--dur-2) var(--ease-1), box-shadow var(--dur-2) var(--ease-1);
    }
    .precs-meta-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent-green); }
    .precs-meta-card.mal::before{ background:var(--accent-red); }
    .precs-meta-card.atencao::before{ background:var(--accent-orange); }
    .precs-meta-card:hover{ transform:translateY(-3px); border-color:var(--mb-borda); box-shadow:var(--shadow-lg); }
    .precs-meta-card-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-2); }
    .precs-meta-card-cab .precs-sup-op{ min-width:0; }
    .precs-meta-card-num{ font-family:var(--font-num); font-size:var(--fs-7); color:var(--text-primary); letter-spacing:.02em; }
    .precs-meta-card-dl{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-2); margin:0; }
    .precs-meta-card-dl div{ padding:var(--space-2); border-radius:var(--radius-inner); background:var(--bg-tertiary); min-width:0; }
    .precs-meta-card-dl dt{ font-family:var(--font-rotulo); font-size:var(--fs-2); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted); }
    .precs-meta-card-dl dd{ margin:0; font-weight:600; font-size:var(--fs-5); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .precs-meta-card-dl dd.q-green{ color:var(--accent-green-text); }
    .precs-meta-card-dl dd.q-yellow{ color:var(--accent-orange); }
    .precs-meta-card-dl dd.q-red{ color:var(--accent-red); }
    .precs-meta-card-pe{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap;
      padding-top:var(--space-3); border-top:1px solid var(--border-color); margin-top:auto; }
    .precs-meta-card-acoes{ display:inline-flex; gap:var(--space-1); }
    .precs-meta-hook{ display:inline-flex; align-items:center; gap:var(--space-1); font-weight:600; font-size:var(--fs-4); }
    .precs-meta-hook.ok{ color:var(--accent-green-text); }
    .precs-meta-apps{ display:flex; flex-wrap:wrap; gap:var(--space-1); }
    .precs-meta-app{ font-size:var(--fs-3); color:var(--text-secondary); border:1px solid var(--border-color); border-radius:var(--radius-pill); padding:0 var(--space-2); }
    .precs-meta-app.nosso{ color:var(--mb-txt); border-color:var(--mb-borda); background:var(--mb-10); }
    .precs-meta-sit{ display:inline-flex; align-items:center; padding:var(--space-0) var(--space-2); border-radius:var(--radius-pill);
      font-size:var(--fs-3); font-weight:700; white-space:nowrap; letter-spacing:.01em; }
    .precs-meta-sit.bom{ color:var(--accent-green-text); background:color-mix(in srgb, var(--accent-green) 16%, transparent); }
    .precs-meta-sit.mal{ color:var(--accent-red); background:color-mix(in srgb, var(--accent-red) 14%, transparent); }
    .precs-meta-sit.atencao{ color:var(--accent-orange); background:color-mix(in srgb, var(--accent-orange) 15%, transparent); }
    .precs-meta-sit.neutro{ color:var(--text-muted); background:var(--bg-tertiary); }
    .precs-meta-tag{ font-size:var(--fs-3); font-weight:600; color:var(--mb-txt); background:var(--mb-10); padding:var(--space-0) var(--space-2); border-radius:var(--radius-pill); }
    .precs-meta-dim{ color:var(--text-muted); font-size:var(--fs-4); }

    /* Folhas (o fundo de cada formulário) e o par formulário + celular */
    .precs-meta-folha{
      display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-5);
      border-radius:var(--radius-card); background:var(--bg-secondary); border:1px solid var(--border-color);
    }
    .precs-meta-duo{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(300px, .85fr); gap:var(--space-5); align-items:start; }
    html[data-aparelho] .precs-meta-duo{ grid-template-columns:minmax(0, 1fr); }
    .precs-meta-campo{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
    .precs-meta-rot{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2);
      font-family:var(--font-rotulo); font-size:var(--fs-3); font-weight:700; text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted); }
    .precs-meta-rot small{ font-family:var(--font-corpo); text-transform:none; letter-spacing:0; font-weight:500; font-size:var(--fs-3); }
    .precs-meta-rot small.estourou{ color:var(--accent-red); }
    .precs-meta-rot code, .precs-meta-dica code{ font-family:var(--font-num); text-transform:none; color:var(--mb-txt); }
    .precs-meta-dica{ font-size:var(--fs-4); color:var(--text-muted); }
    .precs-meta-dica b{ color:var(--text-primary); }
    .precs-meta-dica-grande{ padding:var(--space-5); text-align:center; color:var(--text-muted); font-size:var(--fs-5);
      border:1px dashed var(--border-color); border-radius:var(--radius-inner); }
    .precs-meta-acoes{ display:flex; justify-content:flex-start; gap:var(--space-2); }

    /* Campos de texto: nada do navegador aparece cru */
    .precs-meta-in{
      width:100%; box-sizing:border-box; font:inherit; font-size:var(--fs-6); color:var(--text-primary);
      background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius-inner);
      padding:var(--space-3) var(--space-4); outline:none; appearance:none;
      transition:border-color var(--dur-2) var(--ease-1), background var(--dur-2) var(--ease-1), outline-color var(--dur-2) var(--ease-1);
      outline:3px solid transparent; outline-offset:0;
    }
    .precs-meta-in::placeholder{ color:var(--text-muted); opacity:.7; }
    .precs-meta-in:hover{ border-color:var(--mb-borda); }
    .precs-meta-in:focus{ border-color:var(--mb); outline-color:var(--mb-18); background:color-mix(in srgb, var(--bg-primary) 92%, var(--mb)); }
    textarea.precs-meta-in{ resize:vertical; min-height:11em; }
    .precs-meta-busca{
      display:flex; align-items:center; gap:var(--space-2); flex:1 1 260px; min-width:0; padding:0 var(--space-4);
      border-radius:var(--radius-pill); border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-muted);
      transition:border-color var(--dur-2) var(--ease-1);
    }
    .precs-meta-busca:focus-within{ border-color:var(--mb); color:var(--mb-txt); }
    .precs-meta-in-nu{ flex:1 1 auto; min-width:0; border:none; background:transparent; outline:none; appearance:none;
      color:var(--text-primary); font:inherit; font-size:var(--fs-5); padding:var(--space-3) 0; }
    .precs-meta-in-nu::-webkit-search-cancel-button{ appearance:none; }

    /* Controle segmentado, com a pílula que desliza */
    .precs-meta-seg{
      position:relative; display:inline-flex; gap:var(--space-1); padding:var(--space-1); align-self:flex-start;
      border-radius:var(--radius-pill); background:var(--bg-primary); border:1px solid var(--border-color);
    }
    .precs-meta-seg::before{
      content:""; position:absolute; top:var(--space-1); bottom:var(--space-1); left:var(--px, 0); width:var(--pw, 0);
      border-radius:var(--radius-pill); background:var(--mb); opacity:0;
      transition:left var(--dur-3) var(--ease-2), width var(--dur-3) var(--ease-2), opacity var(--dur-2) var(--ease-1);
    }
    .precs-meta-seg[data-pilula]::before{ opacity:1; }
    .precs-meta-seg button{
      position:relative; border:none; background:transparent; cursor:pointer; padding:var(--space-2) var(--space-5);
      border-radius:var(--radius-pill); color:var(--text-secondary); font-family:var(--font-acao); font-weight:600; font-size:var(--fs-5);
      transition:color var(--dur-2) var(--ease-1);
    }
    .precs-meta-seg button:hover{ color:var(--text-primary); }
    .precs-meta-seg button.ativo{ color:white; }
    .precs-meta-seg:not([data-pilula]) button.ativo{ background:var(--mb); }
    .precs-meta-seg button:focus-visible{ outline:2px solid var(--mb-txt); outline-offset:2px; }

    /* Variáveis: atalhos e campos de valor */
    .precs-meta-vars-atalho{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
    .precs-meta-var-chip{
      border:1px dashed var(--mb-borda); background:transparent; color:var(--mb-txt); cursor:pointer;
      padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); font-family:var(--font-num); font-size:var(--fs-4);
      transition:background var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2), border-style var(--dur-2) var(--ease-1);
    }
    .precs-meta-var-chip:hover{ background:var(--mb-10); border-style:solid; transform:translateY(-1px); }
    .precs-meta-var-chip.mais{ font-family:var(--font-acao); font-weight:600; }
    .precs-meta-vars{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--space-3); }
    .precs-meta-vars:empty{ display:none; }
    .precs-meta-var{ animation:precsMetaEntra var(--dur-3) var(--ease-2) both; animation-delay:calc(var(--i, 0) * 50ms); }

    /* O combo da casa (ver precsMetaComboHTML) */
    .precs-meta-slot{ min-width:0; }
    .precs-meta-combo{ position:relative; display:flex; min-width:0; }
    .precs-meta-combo-btn{
      display:flex; align-items:center; gap:var(--space-3); width:100%; min-width:0; text-align:left; cursor:pointer;
      padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2);
      border-radius:var(--radius-card); border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-primary);
      font-family:var(--font-corpo);
      transition:border-color var(--dur-2) var(--ease-1), background var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2);
    }
    .precs-meta-combo-btn:hover{ border-color:var(--mb-borda); }
    .precs-meta-combo-btn[aria-expanded="true"]{ border-color:var(--mb); background:color-mix(in srgb, var(--bg-primary) 90%, var(--mb)); }
    .precs-meta-combo.com-escolha .precs-meta-combo-btn{ border-color:var(--mb-borda); }
    .precs-meta-combo-btn:disabled{ cursor:default; opacity:.6; }
    .precs-meta-combo-btn:focus-visible{ outline:2px solid var(--mb-txt); outline-offset:2px; }
    .precs-meta-combo-btn .precs-sup-av, .precs-meta-combo-item .precs-sup-av{ width:38px; height:38px; flex:0 0 auto; }
    .precs-meta-combo-ico{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
      background:var(--mb-18); color:var(--mb-txt); font-family:var(--font-rotulo); font-weight:700; font-size:var(--fs-4); }
    .precs-meta-combo-ico.vazio{ background:var(--bg-tertiary); color:var(--text-muted); }
    .precs-meta-combo-txt{ display:flex; flex-direction:column; gap:var(--space-0); min-width:0; flex:1 1 auto; }
    .precs-meta-combo-txt b{ font-weight:600; font-size:var(--fs-6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-meta-combo-txt b.vazio{ color:var(--text-muted); font-weight:500; }
    .precs-meta-combo-txt small{ display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-num); font-size:var(--fs-3);
      color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-meta-combo-fx{ display:inline-flex; flex:0 0 auto; }
    .precs-meta-combo-seta{ display:inline-flex; color:var(--text-muted); flex:0 0 auto; transition:transform var(--dur-3) var(--ease-2), color var(--dur-2) var(--ease-1); }
    .precs-meta-combo-btn[aria-expanded="true"] .precs-meta-combo-seta{ transform:rotate(180deg); color:var(--mb-txt); }
    /* O popover: camada nativa, posicionada por medida; sem `display` de autor, para o
       `hidden` e o `:not(:popover-open)` do agente continuarem escondendo. */
    .precs-meta-combo-pop{
      inset:auto; margin:0; padding:var(--space-2); width:max-content; max-width:min(460px, 94vw);
      border:1px solid var(--mb-borda); border-radius:var(--radius-card);
      background:var(--bg-secondary); color:var(--text-primary); box-shadow:var(--shadow-lg);
      transform-origin:top left;
    }
    .precs-meta-combo-pop:popover-open{ animation:precsMetaComboEntra var(--dur-2) var(--ease-2) both; }
    .precs-meta-combo-pop.saindo{ animation:precsMetaComboSai var(--dur-2) var(--ease-1) both; }
    @keyframes precsMetaComboEntra{ from{ opacity:0; transform:translateY(-6px) scale(.97); } to{ opacity:1; transform:none; } }
    @keyframes precsMetaComboSai{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-6px) scale(.97); } }
    .precs-meta-combo-busca{
      display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-3); margin-bottom:var(--space-2);
      border:1px solid var(--border-color); border-radius:var(--radius-pill); background:var(--bg-primary); color:var(--text-muted);
    }
    .precs-meta-combo-busca:focus-within{ border-color:var(--mb); }
    .precs-meta-combo-busca input{ flex:1 1 auto; min-width:0; border:none; background:transparent; color:var(--text-primary);
      font-family:var(--font-corpo); font-size:var(--fs-5); outline:none; appearance:none; padding:var(--space-2) 0; }
    .precs-meta-combo-lista{ display:flex; flex-direction:column; gap:var(--space-0); max-height:min(56vh, 440px); overflow:auto; outline:none; }
    .precs-meta-combo-item{
      display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left; cursor:pointer;
      padding:var(--space-2) var(--space-3); border:none; border-radius:var(--radius-inner); background:transparent; color:var(--text-primary);
      font-family:var(--font-corpo); animation:precsMetaItem var(--dur-3) var(--ease-2) both; animation-delay:calc(var(--i, 0) * 18ms);
      transition:background var(--dur-1) var(--ease-1);
    }
    @keyframes precsMetaItem{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
    .precs-meta-combo-item:hover, .precs-meta-combo-item.ativo{ background:var(--mb-10); }
    .precs-meta-combo-item[aria-selected="true"]{ background:var(--mb-18); }
    .precs-meta-combo-item[aria-selected="true"] b{ color:var(--mb-txt); }
    .precs-meta-combo-item.dis{ cursor:not-allowed; opacity:.5; }
    .precs-meta-combo-marca{ display:inline-flex; color:var(--mb-txt); margin-left:auto; flex:0 0 auto; }
    .precs-meta-combo-selo{ font-style:normal; margin-left:auto; flex:0 0 auto; font-size:var(--fs-3); font-weight:700; color:var(--accent-red);
      background:color-mix(in srgb, var(--accent-red) 12%, transparent); padding:var(--space-0) var(--space-2); border-radius:var(--radius-pill); }
    .precs-meta-combo-vazio{ padding:var(--space-4); text-align:center; color:var(--text-muted); font-size:var(--fs-4); }

    /* Modelos: a barra do topo, a lista marcável e a barra de seleção que sobe */
    .precs-meta-barra-topo{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:stretch; }
    .precs-meta-barra-topo > .precs-meta-slot{ flex:1 1 320px; }
    .precs-meta-linha-chips{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
    .precs-meta-mods{ display:flex; flex-direction:column; gap:var(--space-2); }
    .precs-meta-mod{
      display:flex; align-items:flex-start; gap:var(--space-3); width:100%; text-align:left; cursor:pointer;
      padding:var(--space-3) var(--space-4); border-radius:var(--radius-inner); border:1px solid var(--border-color);
      background:var(--bg-primary); color:var(--text-primary); font-family:var(--font-corpo);
      animation:precsMetaEntra var(--dur-3) var(--ease-2) both; animation-delay:calc(var(--i, 0) * 25ms);
      transition:border-color var(--dur-2) var(--ease-1), background var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2);
    }
    .precs-meta-mod:hover{ border-color:var(--mb-borda); transform:translateX(2px); }
    .precs-meta-mod.marcado{ border-color:var(--mb); background:color-mix(in srgb, var(--bg-primary) 88%, var(--mb)); }
    .precs-meta-mod.dis{ cursor:default; opacity:.55; transform:none; }
    .precs-meta-mod.sk{ cursor:default; flex-direction:column; animation:none; }
    .precs-meta-sk-a{ display:block; height:14px; width:40%; border-radius:var(--radius-sm); }
    .precs-meta-sk-b{ display:block; height:12px; width:85%; border-radius:var(--radius-sm); }
    .precs-meta-caixa{
      display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:22px; height:22px; margin-top:1px;
      border-radius:var(--radius-sm); border:2px solid var(--border-color); color:transparent; background:var(--bg-secondary);
      transition:background var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1), color var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2);
    }
    .precs-meta-mod:hover .precs-meta-caixa{ border-color:var(--mb-borda); }
    .precs-meta-mod.marcado .precs-meta-caixa{ background:var(--mb); border-color:var(--mb); color:white; transform:scale(1.08); }
    .precs-meta-mod-corpo{ display:flex; flex-direction:column; gap:var(--space-1); min-width:0; flex:1 1 auto; }
    .precs-meta-mod-topo{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
    .precs-meta-mod-topo b{ font-weight:700; font-size:var(--fs-6); overflow-wrap:anywhere; }
    .precs-meta-mod-trecho{ font-size:var(--fs-4); color:var(--text-muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
    .precs-meta-selbar{
      position:sticky; bottom:var(--space-4); display:flex; align-items:center; gap:var(--space-3);
      padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-radius:var(--radius-pill);
      background:var(--bg-tertiary); border:1px solid var(--mb-borda); box-shadow:var(--shadow-lg);
      font-weight:600; font-size:var(--fs-5); animation:precsMetaSobe var(--dur-3) var(--ease-2) both;
    }
    .precs-meta-selbar[hidden]{ display:none; }
    .precs-meta-selbar > span{ flex:1 1 auto; }
    @keyframes precsMetaSobe{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

    /* Copiar: de → para */
    .precs-meta-ponte{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:var(--space-3); align-items:end; }
    html[data-aparelho] .precs-meta-ponte{ grid-template-columns:minmax(0, 1fr); }
    .precs-meta-ponte-seta{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:var(--space-2);
      border-radius:50%; background:var(--mb-18); color:var(--mb-txt); }
    html[data-aparelho] .precs-meta-ponte-seta{ transform:rotate(90deg); justify-self:center; }
    .precs-meta-troca{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto minmax(0, 1fr); gap:var(--space-3); align-items:center; }
    html[data-aparelho] .precs-meta-troca{ grid-template-columns:minmax(0, 1fr); }
    .precs-meta-troca-por{ color:var(--text-muted); font-size:var(--fs-5); }

    /* O celular da prévia */
    .precs-meta-fone{
      position:sticky; top:var(--space-4); display:flex; flex-direction:column; min-height:460px; overflow:hidden;
      border-radius:var(--radius-card); border:1px solid var(--mb-borda); background:var(--bg-primary); box-shadow:var(--shadow);
    }
    .precs-meta-fone-cab{
      display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); color:white;
      background:linear-gradient(135deg, var(--mb), color-mix(in srgb, var(--mb) 58%, black));
    }
    .precs-meta-fone-cab .precs-sup-av{ width:36px; height:36px; flex:0 0 auto; }
    .precs-meta-fone-cab span{ display:flex; flex-direction:column; min-width:0; }
    .precs-meta-fone-cab b{ font-size:var(--fs-6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-meta-fone-cab small{ font-size:var(--fs-3); opacity:.8; }
    .precs-meta-fone-tela{
      flex:1 1 auto; padding:var(--space-5) var(--space-4); display:flex; flex-direction:column; align-items:flex-start;
      background:radial-gradient(circle at 20% 10%, var(--mb-10), transparent 55%), var(--bg-primary);
    }
    .precs-meta-fone-bolha{ max-width:92%; animation:precsMetaBolha var(--dur-3) var(--ease-2) both; }
    .precs-meta-fone-bolha .precs-supwa-bolha{ background:var(--bg-secondary); border-color:var(--border-color); border-top-left-radius:var(--radius-sm); }
    @keyframes precsMetaBolha{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
    .precs-meta-fone-vazio{ margin:auto; max-width:24em; text-align:center; color:var(--text-muted); font-size:var(--fs-5); }

    /* Resultado: cartão com o visto que se desenha */
    .precs-meta-res{
      display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--radius-inner);
      font-size:var(--fs-5); border:1px solid color-mix(in srgb, var(--accent-green) 45%, transparent);
      background:color-mix(in srgb, var(--accent-green) 10%, transparent); animation:precsMetaEntra var(--dur-3) var(--ease-2) both;
    }
    .precs-meta-res-ico{ display:inline-flex; color:var(--accent-green-text); flex:0 0 auto; }
    .precs-meta-tique{ stroke-dasharray:16; stroke-dashoffset:16; animation:precsMetaTique .45s var(--ease-2) .1s forwards; }
    @keyframes precsMetaTique{ to{ stroke-dashoffset:0; } }

    /* (30/09/2026) O envio de teste esperando o webhook: aceito ainda NAO e entregue, e a tela diz isso. */
    .precs-meta-res.espera{ border-color:var(--mb-borda); background:var(--mb-10); }
    .precs-meta-res-giro{ flex:0 0 auto; width:18px; height:18px; margin-top:var(--space-0); border-radius:50%;
      border:2px solid var(--mb-35); border-top-color:var(--mb-txt); animation:precsMetaGira .8s linear infinite; }
    .precs-meta-card-selos{ display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-1); }
    @media (prefers-reduced-motion: reduce){
      .precs-meta-hero-logo, .precs-meta-entra, .precs-meta-card, .precs-meta-mod, .precs-meta-var, .precs-meta-combo-item,
      .precs-meta-selbar, .precs-meta-fone-bolha, .precs-meta-res, .precs-meta-res-giro, .precs-meta-combo-pop:popover-open, .precs-meta-combo-pop.saindo{ animation:none; }
      .precs-meta-tique{ animation:none; stroke-dashoffset:0; }
      .precs-meta-abas::before, .precs-meta-seg::before{ transition:none; }
    }

    /* ========================================================================
       (30/09/2026) A ABA ESTRATEGIAS (previa): quem pode discar em cada campanha.
       Os dados sao os reais da aba Campanhas; arrastar e tirar mudam so a tela.
       As cores de estado vem dos --st-* e nunca mudam por tema (contrato-de-tokens);
       os niveis pegam a paleta institucional, em ordem de nome.
       (01/10/2026) 2a volta: esquerda sem cards (filtros e secoes abertas), campanha
       compacta com o nivel so pelo nome, e a faixa AO VIVO em cada campanha.
       ======================================================================== */
    /* No celular a aba nao entra: o arrasto e de mouse, e a faixa de abas estoura com quatro. */
    html[data-aparelho] #sup-aba-btn-estrategias{ display:none; }

    /* O botao da aba, com cor e icone proprios, como WhatsApp e Meta */
    .precs-seg button.precs-sup-aba-est{
      color:color-mix(in srgb, var(--precs-est-marca) 78%, var(--text-primary));
      outline:1px solid color-mix(in srgb, var(--precs-est-marca) 50%, transparent); outline-offset:-1px;
      display:inline-flex; align-items:center; gap:var(--space-1); justify-content:center;
    }
    .precs-seg button.precs-sup-aba-est[hidden]{ display:none; }
    .precs-seg button.precs-sup-aba-est:hover{ background:color-mix(in srgb, var(--precs-est-marca) 12%, transparent); }
    .precs-seg button.precs-sup-aba-est.active{
      background:color-mix(in srgb, var(--precs-est-marca) 20%, var(--bg-secondary));
      outline-color:color-mix(in srgb, var(--precs-est-marca) 80%, transparent);
    }
    .precs-sup-aba-est-ico{ display:inline-flex; flex:0 0 auto; }
    .precs-seg button.precs-sup-aba-est.active .precs-sup-aba-est-ico{ animation:precsEstIco 1.2s var(--ease-2); }
    @keyframes precsEstIco{ 0%{ transform:rotate(-20deg) scale(.8); } 60%{ transform:rotate(8deg) scale(1.1); } 100%{ transform:none; } }

    #sup-aba-estrategias{
      --est-ind: var(--precs-gold-forma);
      --est-fio-pessoa: var(--precs-gold-hi);
      --est-marca: var(--precs-est-marca);
      --est-borda: color-mix(in srgb, var(--precs-gold) 30%, var(--border-color));
    }

    /* A barra de cima: um fio so */
    .precs-est-top{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
    .precs-est-acoes{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); margin-left:auto; flex-wrap:wrap; }
    .precs-est-dica{ color:var(--text-muted); font-size:var(--fs-4); }
    .precs-est-mudou{
      display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
      border:1px dashed var(--precs-gold-hi); background:color-mix(in srgb, var(--precs-gold) 10%, transparent); font-size:var(--fs-4);
      animation:precsEstEntra var(--dur-3) var(--ease-2) both;
    }
    .precs-est-mudou i{ font-style:normal; font-family:var(--font-num); font-weight:700; }
    .precs-est-mudou em{ font-style:normal; color:var(--text-secondary); max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .precs-est-aplicar{
      padding:var(--space-1) var(--space-3); border-radius:var(--radius-inner); border:1px solid var(--border-color); background:var(--bg-tertiary);
      color:var(--text-muted); font-family:var(--font-acao); font-size:var(--fs-4); cursor:not-allowed;
    }
    /* (01/10/2026, F1) Com prévia, o Aplicar acende no ouro do hover da casa, que cada tema já ajusta. */
    .precs-est-aplicar:not(:disabled){ color:var(--bg-primary); border-color:var(--precs-gold); background:var(--precs-gold); font-weight:700; cursor:pointer;
      transition:filter var(--dur-2) var(--ease-1), translate var(--dur-2) var(--ease-1); }
    .precs-est-aplicar:not(:disabled):hover{ filter:brightness(1.08); translate:0 -1px; }
    .precs-est-aplicar:not(:disabled):active{ translate:0 0; }

    /* A area de trabalho: altura da janela, e cada lado rola sozinho */
    .precs-est-palco{
      position:relative; display:grid; grid-template-columns:minmax(250px, 290px) minmax(0, 1fr); gap:var(--space-5);
      height:var(--est-h, 70vh); min-height:420px;
    }
    .precs-est-palco, .precs-est-top{ user-select:none; }
    .precs-est-busca{ user-select:text; }
    .precs-est-pessoas, .precs-est-lado{ display:flex; flex-direction:column; min-height:0; }
    .precs-est-busca{
      width:100%; padding:var(--space-2) var(--space-3); border-radius:var(--radius-pill); border:1px solid var(--border-color);
      background:var(--bg-secondary); color:var(--text-primary); font-family:var(--font-corpo); font-size:var(--fs-5);
      transition:border-color var(--dur-2) var(--ease-1), background-color var(--dur-2) var(--ease-1);
    }
    .precs-est-busca:focus{ outline:none; border-color:var(--est-marca); background:var(--bg-primary); }

    /* A esquerda, sem cards: filtros em cima e a lista aberta */
    .precs-est-filtros{ display:flex; flex-direction:column; gap:var(--space-2); padding-bottom:var(--space-3); border-bottom:1px solid var(--border-color); }
    .precs-est-combo .precs-opcombo, .precs-est-combo .precs-opcombo-btn{ width:100%; }
    /* A faixa: cinco pilulas numa linha so, de largura fixa. Escolher NAO muda tamanho (a 1a versao alargava a
       faixa e empurrava o Marrom para baixo); o que anima e o fundo, a borda e um brilho na tira. */
    .precs-est-faixas{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--space-1); }
    .precs-est-faixas button{
      position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--space-1); padding:var(--space-2) 0 var(--space-1);
      border-radius:var(--radius-inner); border:1px solid transparent; background:var(--bg-secondary); color:var(--text-secondary);
      font-size:var(--fs-2); cursor:pointer; overflow:hidden;
      transition:background-color var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1), color var(--dur-2) var(--ease-1), opacity var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2);
    }
    .precs-est-faixas button:hover{ color:var(--text-primary); transform:translateY(-1px); }
    .precs-est-faixas button i{
      width:70%; height:6px; border-radius:var(--radius-pill); background:var(--fx); outline:1px solid color-mix(in srgb, var(--text-muted) 40%, transparent);
      transition:transform var(--dur-3) var(--ease-2), filter var(--dur-3) var(--ease-1);
    }
    .precs-est-faixas button.on{ border-color:color-mix(in srgb, var(--fx) 70%, var(--text-muted)); color:var(--text-primary); background:color-mix(in srgb, var(--fx) 22%, var(--bg-secondary)); }
    .precs-est-faixas button.on i{ transform:scaleY(1.5); filter:drop-shadow(0 0 4px var(--fx)); }
    .precs-est-faixas.filtrando button:not(.on){ opacity:.4; }
    .precs-est-faixas button.pega{ animation:precsEstPega2 .5s var(--ease-2); }
    @keyframes precsEstPega2{ 0%{ transform:scale(.92); } 50%{ transform:scale(1.06); } 100%{ transform:none; } }
    /* A escolha "pega": um pulso que sai da pilula */

    .precs-est-lista{ flex:1 1 auto; overflow:auto; padding:0 var(--space-1) var(--space-2) 0; overscroll-behavior:contain; }
    .precs-est-grupo{ margin-bottom:var(--space-3); }
    .precs-est-grupo.fora{ display:none; }
    .precs-est-grupo-cab{
      position:sticky; top:0; display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-2) var(--space-2);
      background:var(--bg-primary); border-bottom:2px solid color-mix(in srgb, var(--eq) 55%, transparent);
    }
    .precs-est-grupo-cab[data-arr]{ cursor:grab; touch-action:none; transition:background-color var(--dur-2) var(--ease-1); }
    .precs-est-grupo-cab[data-arr]:hover, .precs-est-grupo-cab.fixo{ background:color-mix(in srgb, var(--eq) 14%, var(--bg-primary)); }
    .precs-est-grupo-cor{ width:10px; height:10px; border-radius:50%; background:var(--eq); flex:0 0 auto; }
    .precs-est-grupo-cab b{ font-size:var(--fs-5); flex:0 1 auto; }
    .precs-est-grupo-cab small{ color:var(--text-muted); font-family:var(--font-num); font-size:var(--fs-3); flex:1 1 auto; }
    .precs-est-alca{ color:var(--text-muted); font-size:var(--fs-6); opacity:0; transition:opacity var(--dur-2) var(--ease-1); }
    .precs-est-grupo-cab:hover .precs-est-alca{ opacity:1; }
    .precs-est-grupo-lista{ padding-top:var(--space-1); }

    .precs-est-pessoa{
      display:flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-2); border-radius:var(--radius-inner);
      color:var(--text-primary); cursor:grab; user-select:none; touch-action:none;
      transition:background-color var(--dur-1) var(--ease-1), opacity var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2);
    }
    .precs-est-pessoa:hover{ background:var(--bg-secondary); transform:translateX(3px); }
    .precs-est-pessoa.fixo{ background:color-mix(in srgb, var(--precs-gold) 12%, transparent); }
    .precs-est-pessoa.fora{ display:none; }
    .precs-est-pessoa.arrastado, .precs-est-grupo-cab.arrastado{ opacity:.3; transform:scale(.97); }
    .precs-est-pessoa .precs-est-av .precs-sup-av{ width:26px; height:26px; }
    /* Na lista, a foto NAO e posicionada: posicionada, ela pintava por cima do titulo fixo do nivel ao rolar
       (o titulo e sticky e nao ha z-index para ganhar dela). Sem o anel que pulsa aqui, que precisa de posicao. */
    .precs-est-pessoa .precs-est-av{ position:static; }
    .precs-est-pessoa .precs-est-av::after{ display:none; }
    .precs-est-pessoa-txt{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
    .precs-est-pessoa-txt b{ font-size:var(--fs-5); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-est-pessoa-txt small{ color:var(--text-muted); font-size:var(--fs-2); }
    .precs-est-fx{ display:inline-flex; flex:0 0 auto; width:34px; }
    .precs-est-fx svg{ width:34px; height:auto; }
    .precs-est-n{
      flex:0 0 auto; min-width:20px; padding:0 var(--space-1); border-radius:var(--radius-pill); text-align:center; font-style:normal;
      font-family:var(--font-num); font-size:var(--fs-2); font-weight:700; color:var(--text-muted);
    }
    .precs-est-nada{ display:none; padding:var(--space-4); text-align:center; color:var(--text-muted); font-size:var(--fs-5); }
    .precs-est-nada.on{ display:block; }

    /* O avatar com o anel de estado ao vivo */
    .precs-est-av{ --e:var(--st-offline); position:relative; display:inline-flex; flex:0 0 auto; border-radius:50%; outline:2px solid var(--e); outline-offset:1px;
      transition:outline-color var(--dur-3) var(--ease-1); }
    .precs-est-av .precs-sup-av{ width:30px; height:30px; }
    .precs-est-av[data-e="falando"]{ --e:var(--st-call); }
    .precs-est-av[data-e="tpa"]{ --e:var(--st-tpa); }
    .precs-est-av[data-e="mtpa"]{ --e:var(--st-mtpa); }
    .precs-est-av[data-e="manual"]{ --e:var(--st-manual); }
    .precs-est-av[data-e="ocioso"]{ --e:var(--st-idle); }
    .precs-est-av[data-e="intervalo"]{ --e:var(--st-interval); }
    .precs-est-av[data-e="offline"]{ opacity:.55; outline-color:color-mix(in srgb, var(--st-offline) 50%, transparent); }
    .precs-est-av[data-e="falando"]::after{
      content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--e); opacity:0; animation:precsEstOnda 1.8s ease-out infinite;
    }
    .precs-est-av.mudou{ animation:precsEstMudou .6s var(--ease-2); }
    @keyframes precsEstOnda{ 0%{ transform:scale(.9); opacity:.7; } 100%{ transform:scale(1.35); opacity:0; } }
    @keyframes precsEstMudou{ 0%{ transform:scale(1.25); } 100%{ transform:none; } }

    /* As campanhas, num quadro de colunas pelo tipo: as mais mexidas do dia primeiro */
    .precs-est-lado{ gap:var(--space-2); }
    .precs-est-camps{ flex:1 1 auto; overflow:auto; padding:0 var(--space-1) var(--space-2) 0; overscroll-behavior:contain; }
    .precs-est-quadro{ display:flex; gap:var(--space-3); align-items:flex-start; min-height:100%; }
    .precs-est-secao{
      flex:1 1 0; min-width:200px; display:flex; flex-direction:column; gap:var(--space-2); padding:0 0 var(--space-2);
      transition:flex-basis var(--dur-3) var(--ease-2), min-width var(--dur-3) var(--ease-2);
    }
    .precs-est-secao.vazias{ flex:.8 1 0; min-width:170px; }
    .precs-est-quadro.chega .precs-est-secao{ animation:precsEstChega .45s var(--ease-2) both; animation-delay:calc(var(--i, 0) * 70ms); }
    @keyframes precsEstChega{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
    .precs-est-secao.fora{ display:none; }
    .precs-est-secao-cab{
      position:sticky; top:0; display:flex; align-items:center; gap:var(--space-2); width:100%; padding:var(--space-2) var(--space-2);
      border:0; border-bottom:2px solid color-mix(in srgb, var(--est-marca) 45%, transparent); background:var(--bg-primary);
      color:var(--text-primary); text-align:left; cursor:pointer; font-family:var(--font-rotulo);
    }
    .precs-est-secao.vazias .precs-est-secao-cab{ border-bottom-color:var(--border-color); color:var(--text-secondary); }
    .precs-est-secao-cab b{ font-size:var(--fs-5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-est-secao-cab em{ font-style:normal; font-family:var(--font-num); font-size:var(--fs-3); color:var(--text-muted); flex:1 1 auto; }
    .precs-est-secao-nota{ color:var(--text-muted); font-size:var(--fs-2); padding:0 var(--space-2); }
    .precs-est-seta{ display:inline-block; color:var(--text-muted); transition:transform var(--dur-2) var(--ease-2); }
    .precs-est-secao-corpo{ display:flex; flex-direction:column; gap:var(--space-2); transition:opacity var(--dur-2) var(--ease-1); }
    /* Fechada: uma tira fina com o nome em pe, que ainda abre no clique */
    .precs-est-secao.fechada{ flex:0 0 40px; min-width:40px; }
    .precs-est-secao.fechada .precs-est-secao-cab{ flex-direction:column; height:220px; padding:var(--space-3) 0; border-bottom:0; border-left:2px solid color-mix(in srgb, var(--est-marca) 45%, transparent); }
    .precs-est-secao.fechada .precs-est-secao-cab b{ writing-mode:vertical-rl; transform:rotate(180deg); }
    .precs-est-secao.fechada .precs-est-secao-cab em{ flex:0 0 auto; }
    .precs-est-secao.fechada .precs-est-seta{ transform:rotate(180deg); }
    .precs-est-secao.fechada .precs-est-secao-corpo, .precs-est-secao.fechada .precs-est-secao-nota{ display:none; }

    /* (01/10/2026) ARRUMAR O QUADRO: a coluna se arrasta pelo titulo, a campanha pelo titulo dela, e o
       alfinete fixa no topo. As marcas de insercao sao uma barra laranja onde a coisa vai cair. */
    .precs-est-secao{ position:relative; }
    .precs-est-secao-cab[data-arrs]{ cursor:grab; touch-action:none; }
    .precs-est-secao-cab .precs-est-alca{ opacity:.35; }
    .precs-est-secao-cab:hover .precs-est-alca{ opacity:1; }
    .precs-est-secao.arrastado{ opacity:.35; }
    .precs-est-secao.insere::before, .precs-est-secao.insere-fim::after{
      content:""; position:absolute; top:0; bottom:0; width:3px; border-radius:var(--radius-pill); background:var(--precs-est-marca);
      filter:drop-shadow(0 0 6px var(--precs-est-marca)); animation:precsEstAparece var(--dur-2) var(--ease-2) both;
    }
    .precs-est-secao.insere::before{ left:calc(-1 * var(--space-2)); }
    .precs-est-secao.insere-fim::after{ right:calc(-1 * var(--space-2)); }
    .precs-est-secao.alvo-coluna .precs-est-secao-cab{ background:color-mix(in srgb, var(--precs-est-marca) 12%, var(--bg-primary)); }
    .precs-est-camp-cab[data-arrc]{ cursor:grab; touch-action:none; }
    .precs-est-camp.arrastado{ opacity:.3; transform:scale(.97); }
    .precs-est-camp.insere::before, .precs-est-secao-corpo.insere-fim::after{
      content:""; display:block; height:3px; border-radius:var(--radius-pill); background:var(--precs-est-marca);
      filter:drop-shadow(0 0 6px var(--precs-est-marca)); animation:precsEstAparece var(--dur-2) var(--ease-2) both;
    }
    .precs-est-camp.insere::before{ position:absolute; left:0; right:0; top:calc(-1 * var(--space-1) - 2px); }
    .precs-est-palco.movendo-camp .precs-est-camp{ border-style:dashed; }
    .precs-est-camp.assentou, .precs-est-secao.assentou{ animation:precsEstAssenta .55s var(--ease-2); }
    @keyframes precsEstAssenta{ 0%{ transform:scale(1.04); } 100%{ transform:none; } }
    .precs-est-secao-vazio{
      padding:var(--space-4) var(--space-2); border:1px dashed var(--border-color); border-radius:var(--radius-inner);
      color:var(--text-muted); font-size:var(--fs-3); text-align:center;
    }
    .precs-est-sonda-passos{ margin:var(--space-3) 0 0; padding-left:var(--space-4); text-align:left; font-size:var(--fs-4); color:var(--text-secondary); }
    .precs-est-sonda-passos li{ margin-bottom:var(--space-1); }

    /* (01/10/2026, F2) As sub-abas e o modo: o segmentado da casa, do tamanho do rótulo. O par [hidden] vem junto
       porque o palco e a folha têm display de autor (ver a memória do hidden que não esconde). */
    .precs-est-seg{ flex:0 0 auto; width:max-content; }
    .precs-est-palco[hidden], .precs-est-cron[hidden]{ display:none; }
    /* A deriva: na 3C sem o cronograma pedir (contorno tracejado em vermelho) e o que falta (linha no pé do card) */
    .precs-est-ind.deriva{ border-style:dashed; border-color:var(--accent-red); }
    .precs-est-falta{ margin-top:var(--space-2); padding:var(--space-1) var(--space-2); border-radius:var(--radius-inner);
      background:color-mix(in srgb, var(--precs-gold) 8%, transparent); color:var(--text-secondary); font-size:var(--fs-3); }
    .precs-est-deriva-n{ padding:var(--space-1) var(--space-2); border-radius:var(--radius-inner); border:1px dashed var(--accent-red);
      color:var(--accent-red-text); font-size:var(--fs-4); font-weight:600; }
    /* A folha do cronograma */
    .precs-est-cron{ display:flex; flex-direction:column; gap:var(--space-3); }
    .precs-est-cron-topo{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
    .precs-est-cron-acoes{ display:flex; align-items:center; gap:var(--space-2); margin-left:auto; flex-wrap:wrap; }
    .precs-est-cron-corpo{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(280px, 2fr); gap:var(--space-4); align-items:start; }
    .precs-est-cron-faixas, .precs-est-cron-lado{ display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
    .precs-est-cron-f, .precs-est-cron-aj, .precs-est-cron-prev{ border:1px solid var(--border-color); border-radius:var(--radius-inner); background:var(--bg-secondary); padding:var(--space-3); }
    .precs-est-cron-f{ border-left:3px solid var(--eq); }
    .precs-est-cron-f.agora{ outline:1px solid var(--precs-gold); outline-offset:-1px; }
    .precs-est-cron-f-cab{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
    .precs-est-cron-f-cab span{ color:var(--text-muted); font-size:var(--fs-4); }
    .precs-est-cron input, .precs-est-cron select, .precs-est-colar{
      padding:var(--space-1) var(--space-2); border:1px solid var(--border-color); border-radius:var(--radius-inner);
      background:var(--bg-primary); color:var(--text-primary); font-family:inherit; font-size:var(--fs-4); min-width:0;
    }
    .precs-est-cron-rot{ flex:1 1 200px; }
    .precs-est-cron-agora{ font-style:normal; font-size:var(--fs-3); font-weight:700; color:var(--precs-gold-title); }
    .precs-est-cron-lib{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }
    .precs-est-cron-chip{ display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-0) var(--space-1) var(--space-0) var(--space-2);
      border:1px solid var(--border-color); border-radius:var(--radius-inner); background:var(--bg-tertiary); font-size:var(--fs-4); color:var(--text-secondary); }
    .precs-est-cron-chip b{ color:var(--text-primary); font-weight:600; }
    .precs-est-cron-mais{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
    .precs-est-cron-mais select{ max-width:220px; }
    .precs-est-cron-aj h4, .precs-est-cron-prev h4{ display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-2); font-family:var(--font-rotulo); font-size:var(--fs-5); color:var(--text-primary); }
    .precs-est-cron-aj ul{ list-style:none; margin:0 0 var(--space-3); padding:0; display:flex; flex-direction:column; gap:var(--space-1); }
    .precs-est-cron-aj li{ display:flex; align-items:center; gap:var(--space-1); font-size:var(--fs-4); color:var(--text-secondary); padding-left:var(--space-2); border-left:3px solid var(--border-color); }
    .precs-est-cron-aj li.mais{ border-left-color:var(--precs-gold); }
    .precs-est-cron-aj li.menos{ border-left-color:var(--accent-red); }
    .precs-est-cron-aj li.agora b{ color:var(--precs-gold-title); }
    .precs-est-cron-aj li .precs-est-x{ margin-left:auto; }
    .precs-est-colar{ width:100%; resize:vertical; }
    /* (01/10/2026, 3ª volta) O CRONOGRAMA, DIA A DIA E POR ETAPA. Etapas e pessoas à esquerda, a semana no meio (sem
       rolagem própria), o que muda e o automático à direita. O bloco se posiciona por --a (topo) e --h (altura); a
       exceção ocupa a faixa direita do dia, do tamanho do horário dela; a agulha atravessa a semana. */
    .precs-est-campo{
      box-sizing:border-box; font:inherit; font-size:var(--fs-4); color:var(--text-primary); min-width:0;
      background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius-inner);
      padding:var(--space-2) var(--space-3); appearance:none; outline:2px solid transparent; outline-offset:0;
      transition:border-color var(--dur-2) var(--ease-1), outline-color var(--dur-2) var(--ease-1);
    }
    .precs-est-campo::placeholder{ color:var(--text-muted); opacity:.75; }
    .precs-est-campo:hover:not(:disabled){ border-color:var(--precs-gold); }
    .precs-est-campo:focus{ border-color:var(--precs-gold); outline-color:color-mix(in srgb, var(--precs-gold) 28%, transparent); }
    .precs-est-campo:disabled{ opacity:.55; cursor:not-allowed; }
    .precs-est-sel{ position:relative; display:inline-flex; min-width:0; }
    .precs-est-sel select.precs-est-campo{ padding-right:var(--space-6); cursor:pointer; max-width:100%; }
    .precs-est-sel::after{ content:''; position:absolute; right:12px; top:50%; width:7px; height:7px; margin-top:-5px; pointer-events:none;
      border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted); transform:rotate(45deg); }
    .precs-est-sel select.precs-est-campo option, .precs-est-sel select.precs-est-campo optgroup{ background:var(--bg-secondary); color:var(--text-primary); }
    textarea.precs-est-campo{ width:100%; resize:vertical; min-height:9em; }
    .precs-est-cal-link{ display:inline-flex; align-items:center; gap:var(--space-1); margin-left:var(--space-2); padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill);
      border:1px solid color-mix(in srgb, var(--precs-gold) 35%, var(--border-color)); background:color-mix(in srgb, var(--precs-gold) 8%, transparent);
      color:var(--precs-gold-title); font:inherit; font-size:var(--fs-3); font-weight:600; cursor:pointer;
      transition:background-color var(--dur-1) var(--ease-1), border-color var(--dur-1) var(--ease-1), transform var(--dur-1) var(--ease-2); }
    .precs-est-cal-link:hover{ background:color-mix(in srgb, var(--precs-gold) 18%, transparent); border-color:var(--precs-gold); }
    .precs-est-cal-link:active{ transform:scale(.96); }
    .precs-est-cal-nav{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-5); color:var(--text-primary); }
    .precs-est-cal-nav .precs-supwa-btn{ padding:var(--space-1) var(--space-3); }
    .precs-est-cal{ display:grid; grid-template-columns:minmax(170px, 200px) minmax(0, 1fr) minmax(260px, 320px); gap:var(--space-4); align-items:start; }
    .precs-est-cal-lado-e{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
    .precs-est-cal-lado-e h4{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-1); margin:var(--space-2) 0 0; font-family:var(--font-rotulo); font-size:var(--fs-5); color:var(--text-primary); }
    .precs-est-cal-lado-e h4 small{ font-weight:400; font-size:var(--fs-3); color:var(--text-muted); }
    .precs-est-cal-etapas{ display:flex; flex-direction:column; gap:var(--space-1); }
    .precs-est-cal-etapa{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-2); border-radius:var(--radius-inner);
      border:1px solid color-mix(in srgb, var(--eq) 55%, transparent); background:color-mix(in srgb, var(--eq) 18%, transparent);
      color:var(--text-primary); font-size:var(--fs-4); font-weight:600; cursor:grab; user-select:none; touch-action:none; }
    .precs-est-cal-pessoas{ display:flex; flex-direction:column; gap:var(--space-0); max-height:440px; overflow:auto; }
    .precs-est-cal-pessoa{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-0) var(--space-1); border-radius:var(--radius-inner);
      font-size:var(--fs-4); color:var(--text-secondary); cursor:grab; user-select:none; touch-action:none; }
    .precs-est-cal-pessoa:hover{ background:var(--bg-tertiary); color:var(--text-primary); }
    .precs-est-cal-pessoa.oculto{ display:none; }
    .precs-est-cal-grade{ position:relative; display:flex; gap:var(--space-1); min-width:0; }
    .precs-est-cal-horas{ position:relative; flex:0 0 34px; height:var(--alt); margin-top:var(--topo); }
    .precs-est-cal-horas small{ position:absolute; top:var(--a); right:var(--space-1); transform:translateY(-50%); font-size:var(--fs-2); color:var(--text-muted); }
    .precs-est-cal-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
    .precs-est-cal-col header{ position:relative; display:flex; flex-direction:column; justify-content:center; height:46px; box-sizing:border-box; margin-bottom:var(--space-2);
      padding:var(--space-1) var(--space-2); border-radius:var(--radius-inner); background:var(--bg-secondary); }
    .precs-est-cal-col header b{ font-size:var(--fs-4); color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-est-cal-col header small{ font-size:var(--fs-2); color:var(--text-muted); }
    .precs-est-cal-col.hoje header{ outline:1px solid var(--precs-gold); outline-offset:-1px; }
    .precs-est-cal-col.hoje header b{ color:var(--precs-gold-title); }
    .precs-est-cal-copiar{ position:absolute; top:50%; right:var(--space-1); transform:translateY(-50%); border:0; background:none; color:var(--text-muted); cursor:pointer; font-size:var(--fs-5); padding:var(--space-1); border-radius:var(--radius-inner); }
    .precs-est-cal-copiar:hover{ color:var(--precs-gold-title); background:var(--bg-tertiary); }
    .precs-est-cal-corpo{ position:relative; height:var(--alt); border:1px solid var(--border-color); border-radius:var(--radius-inner);
      background:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pxh, 46px) - 1px), var(--border-color) calc(var(--pxh, 46px) - 1px), var(--border-color) var(--pxh, 46px)),
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pxh, 46px) / 4 - 1px), color-mix(in srgb, var(--border-color) 45%, transparent) calc(var(--pxh, 46px) / 4 - 1px), color-mix(in srgb, var(--border-color) 45%, transparent) calc(var(--pxh, 46px) / 4)),
        var(--bg-secondary);
      cursor:crosshair; touch-action:none; overflow:hidden; }
    .precs-est-cal-col.ro .precs-est-cal-corpo{ cursor:default; opacity:.55; }
    .precs-est-cal-bloco{ position:absolute; left:3px; right:3px; top:var(--a); height:var(--h); overflow:hidden; display:flex; flex-direction:column; box-sizing:border-box;
      padding:var(--space-1) var(--space-2); border-radius:calc(var(--radius-inner) - 2px); border-left:4px solid var(--eq);
      background:color-mix(in srgb, var(--eq) 30%, var(--bg-primary)); color:var(--text-primary); cursor:pointer; user-select:none; touch-action:none;
      transition:filter var(--dur-2) var(--ease-1); }
    .precs-est-cal-col.com-exc .precs-est-cal-bloco{ right:40%; }
    .precs-est-cal-bloco:hover{ filter:brightness(1.12); }
    .precs-est-cal-bloco b{ font-size:var(--fs-3); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:var(--space-4); }
    .precs-est-cal-bloco small{ font-size:var(--fs-2); color:var(--text-secondary); }
    .precs-est-cal-bloco.vazio{ border:1px dashed var(--border-color); border-left-width:4px; background:var(--bg-tertiary); }
    .precs-est-cal-bloco.criando{ pointer-events:none; opacity:.7; }
    .precs-est-cal-x{ position:absolute; top:2px; right:2px; width:20px; height:20px; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
      background:color-mix(in srgb, var(--bg-primary) 70%, transparent); color:var(--text-secondary); font-size:var(--fs-2); opacity:0; transition:opacity var(--dur-2) var(--ease-1); }
    .precs-est-cal-bloco:hover .precs-est-cal-x, .precs-est-cal-x:focus-visible{ opacity:1; }
    .precs-est-cal-x:hover{ color:var(--accent-red-text); }
    .precs-est-cal-alca{ position:absolute; left:0; right:0; bottom:0; height:8px; cursor:ns-resize; }
    .precs-est-cal-alca::after{ content:''; position:absolute; left:40%; right:40%; bottom:2px; height:2px; border-radius:2px; background:var(--text-muted); }
    .precs-est-cal-ajs{ position:absolute; top:0; bottom:0; right:0; width:0; }
    .precs-est-cal-col.com-exc .precs-est-cal-ajs{ width:40%; }
    .precs-est-cal-aj{ position:absolute; top:var(--a); height:var(--h); left:2px; right:3px; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column;
      padding:var(--space-1) var(--space-1); border-radius:calc(var(--radius-inner) - 2px); cursor:pointer;
      background:color-mix(in srgb, var(--precs-gold) 22%, var(--bg-primary)); border:1px solid var(--precs-gold); color:var(--text-primary); }
    .precs-est-cal-aj.menos{ background:color-mix(in srgb, var(--accent-red) 20%, var(--bg-primary)); border-color:var(--accent-red); }
    .precs-est-cal-aj b{ font-size:var(--fs-2); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-est-cal-aj small{ font-size:var(--fs-1); color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; }
    .precs-est-cal-agulha{ position:absolute; left:34px; right:0; top:calc(var(--topo) + var(--a)); height:2px; background:var(--accent-red); pointer-events:none;
      transition:top var(--dur-3) var(--ease-2); }
    .precs-est-cal-agulha[hidden]{ display:none; }
    .precs-est-cal-agulha::before{ content:''; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--accent-red);
      animation:precsEstAgulhaPulsa 2.4s var(--ease-1) infinite; }
    @keyframes precsEstAgulhaPulsa{ 0%, 100%{ outline:0 solid color-mix(in srgb, var(--accent-red) 55%, transparent); } 50%{ outline:6px solid color-mix(in srgb, var(--accent-red) 0%, transparent); } }
    .precs-est-cal-agulha span{ position:absolute; left:-38px; top:-9px; padding:0 var(--space-1); border-radius:var(--radius-pill); background:var(--accent-red); color:var(--bg-primary); font-size:var(--fs-1); font-weight:700; }
    /* A janela do bloco e da exceção: um <dialog> (camada de topo nativa, Esc fecha) */
    /* `margin:auto` de volta: o reset global (`* { margin:0 }`) tira a centralização nativa do <dialog>. */
    .precs-est-modal{ margin:auto; width:min(760px, 94vw); max-height:88vh; padding:0; border:1px solid var(--border-color); border-radius:var(--radius-card); background:var(--bg-secondary); color:var(--text-primary); overflow:auto; }
    .precs-est-modal::backdrop{ background:color-mix(in srgb, var(--bg-primary) 72%, transparent); backdrop-filter:blur(2px); }
    .precs-est-modal-corpo{ display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-5); }
    .precs-est-modal-cab{ display:flex; align-items:center; gap:var(--space-3); padding-bottom:var(--space-3); border-bottom:1px solid var(--border-color); }
    .precs-est-modal-cab .precs-est-chip-cor{ width:14px; height:14px; }
    .precs-est-modal-cab h3{ margin:0; font-family:var(--font-titulo); font-size:var(--fs-7); }
    .precs-est-modal-cab small{ color:var(--text-muted); font-size:var(--fs-4); }
    .precs-est-modal-x{ margin-left:auto; border:0; background:none; color:var(--text-muted); font-size:var(--fs-6); cursor:pointer; padding:var(--space-1) var(--space-2); border-radius:var(--radius-inner); }
    .precs-est-modal-x:hover{ color:var(--text-primary); background:var(--bg-tertiary); }
    .precs-est-modal section h4{ margin:0 0 var(--space-2); font-family:var(--font-rotulo); font-size:var(--fs-5); color:var(--text-primary); }
    .precs-est-modal section h4 small{ font-weight:400; font-size:var(--fs-3); color:var(--text-muted); margin-left:var(--space-1); }
    .precs-est-modal-linha{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
    .precs-est-modal-linha > span{ color:var(--text-muted); font-size:var(--fs-4); }
    .precs-est-modal-etapas{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
    .precs-est-modal-etapa{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-pill); cursor:pointer;
      border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-secondary); font:inherit; font-size:var(--fs-4); font-weight:600; }
    .precs-est-modal-etapa i{ width:10px; height:10px; border-radius:50%; background:var(--eq); }
    .precs-est-modal-etapa.on{ border-color:var(--eq); background:color-mix(in srgb, var(--eq) 26%, var(--bg-primary)); color:var(--text-primary); }
    .precs-est-modal-tab{ width:100%; border-collapse:collapse; font-size:var(--fs-4); }
    .precs-est-modal-tab th{ width:120px; text-align:left; vertical-align:top; padding:var(--space-2) var(--space-2) var(--space-2) 0; color:var(--text-primary); font-weight:600; }
    .precs-est-modal-tab td{ padding:var(--space-1) 0; border-bottom:1px solid var(--border-color); }
    .precs-est-modal-tab tr:last-child td{ border-bottom:0; }
    .precs-est-modal-camp{ display:inline-flex; margin:var(--space-0) var(--space-1) var(--space-0) 0; padding:var(--space-0) var(--space-2); border-radius:var(--radius-pill);
      font-size:var(--fs-3); border:1px solid var(--border-color); background:var(--bg-tertiary); color:var(--text-secondary); }
    .precs-est-modal-camp.etapa{ border-color:var(--precs-gold); background:color-mix(in srgb, var(--precs-gold) 18%, var(--bg-primary)); color:var(--text-primary); }
    .precs-est-modal-camp.fechada{ border-color:var(--accent-red); color:var(--accent-red-text); background:transparent; text-decoration:line-through; }
    .precs-est-modal-legenda, .precs-est-modal-fecha{ margin:var(--space-2) 0 0; font-size:var(--fs-3); color:var(--text-muted); }
    .precs-est-modal-exc{ list-style:none; margin:0 0 var(--space-3); padding:0; display:flex; flex-direction:column; gap:var(--space-1); }
    .precs-est-modal-exc li{ display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap; font-size:var(--fs-4); padding:var(--space-2) var(--space-3);
      border-radius:var(--radius-inner); border-left:3px solid var(--precs-gold); background:var(--bg-primary); }
    .precs-est-modal-exc li.menos{ border-left-color:var(--accent-red); }
    .precs-est-modal-exc li .precs-est-x{ margin-left:auto; }
    .precs-est-modal-form{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
    .precs-est-modal-form > input.precs-est-campo{ flex:1 1 220px; }
    .precs-est-modal-pe{ display:flex; justify-content:flex-end; gap:var(--space-2); padding-top:var(--space-3); border-top:1px solid var(--border-color); }
    .precs-est-modal-frase{ font-size:var(--fs-6); margin:0; padding:var(--space-3); border-radius:var(--radius-inner); border-left:4px solid var(--precs-gold); background:var(--bg-primary); }
    .precs-est-modal-frase.menos{ border-left-color:var(--accent-red); }
    .precs-est-modal-dias{ display:flex; flex-direction:column; gap:var(--space-2); text-align:left; }
    .precs-est-check-rot{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-5); cursor:pointer; }
    .precs-est-check-rot input, .precs-est-check input{ accent-color:var(--precs-gold); width:16px; height:16px; cursor:pointer; }
    .precs-supwa-btn.perigo{ color:var(--accent-red-text); }
    .precs-supwa-btn.perigo:hover:not(:disabled){ color:var(--accent-red-text); border-color:var(--accent-red); }
    /* As etapas em grade: campanha (linha) x nível (coluna) */
    /* (02/10/2026) "A aba de etapas jogou tudo pra esquerda": a lista virou grade da largura toda, dois cartões por linha
       quando cabe, e a explicação e o pé (com Salvar/Descartar) atravessam as colunas. */
    .precs-est-cal-etapas-lista{ display:grid; grid-template-columns:repeat(auto-fit, minmax(640px, 1fr)); gap:var(--space-4); align-items:start; }
    .precs-est-cal-largo, .precs-est-cal-etapas-pe{ grid-column:1 / -1; }
    .precs-est-cal-etapas-pe{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; padding-top:var(--space-2); border-top:1px solid var(--border-color); }
    .precs-est-cal-explica{ display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-3) var(--space-4); border-radius:var(--radius-inner); background:var(--bg-secondary); border:1px solid var(--border-color); }
    .precs-est-cal-explica p{ margin:0; font-size:var(--fs-4); color:var(--text-secondary); }
    .precs-est-cal-explica b{ color:var(--text-primary); }
    .precs-est-cal-etapa-cartao{ display:flex; flex-direction:column; gap:var(--space-3); border:1px solid var(--border-color); border-left:4px solid var(--eq); border-radius:var(--radius-inner); background:var(--bg-secondary); padding:var(--space-4); }
    .precs-est-cal-etapa-cab{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
    .precs-est-cal-etapa-cab .precs-est-chip-cor{ width:14px; height:14px; }
    .precs-est-cal-etapa-nome{ flex:1 1 220px; font-size:var(--fs-6); font-weight:600; }
    .precs-est-cal-cores{ display:flex; align-items:center; gap:var(--space-1); }
    .precs-est-cal-cores button{ width:18px; height:18px; border-radius:50%; border:1px solid var(--border-color); background:var(--eq); cursor:pointer; padding:0; }
    .precs-est-cal-cores button.on{ outline:2px solid var(--text-primary); outline-offset:1px; }
    .precs-est-cal-cor-livre{ position:relative; width:18px; height:18px; border-radius:50%; overflow:hidden; cursor:pointer; border:1px solid var(--border-color);
      background:conic-gradient(var(--precs-paleta-1), var(--precs-paleta-3), var(--precs-paleta-5), var(--precs-paleta-7), var(--precs-paleta-9), var(--precs-paleta-1)); }
    .precs-est-cal-cor-livre.on{ outline:2px solid var(--text-primary); outline-offset:1px; }
    .precs-est-cal-cor-livre input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
    .precs-est-cal-matriz{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-4); }
    .precs-est-cal-matriz th, .precs-est-cal-matriz td{ padding:var(--space-2) var(--space-2); border-bottom:1px solid var(--border-color); text-align:center; vertical-align:middle; }
    .precs-est-cal-matriz thead th{ font-size:var(--fs-3); font-weight:600; color:var(--text-muted); text-transform:uppercase; }
    .precs-est-cal-matriz tbody th{ text-align:left; color:var(--text-primary); font-weight:600; }
    .precs-est-cal-matriz tbody th small{ display:block; font-weight:400; }
    .precs-est-cal-matriz thead th:first-child{ text-align:left; }
    /* (02/10/2026) A célula fica célula (display de tabela): o flex mora no div de dentro, e a linha não entorta */
    .precs-est-cal-tambem{ text-align:left; vertical-align:middle; }
    .precs-est-cal-tambem > div{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); }
    .precs-est-cal-camp-nome{ display:inline-flex; align-items:center; gap:var(--space-2); }
    .precs-est-switch{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-4); color:var(--text-secondary); cursor:pointer; margin-left:auto; }
    .precs-est-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
    .precs-est-switch i{ position:relative; width:34px; height:18px; border-radius:var(--radius-pill); background:var(--bg-tertiary); border:1px solid var(--border-color); transition:background var(--dur-2) var(--ease-1); }
    .precs-est-switch i::after{ content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--text-muted); transition:transform var(--dur-2) var(--ease-1), background var(--dur-2) var(--ease-1); }
    .precs-est-switch input:checked + i{ background:color-mix(in srgb, var(--precs-gold) 40%, var(--bg-primary)); border-color:var(--precs-gold); }
    .precs-est-switch input:checked + i::after{ transform:translateX(16px); background:var(--precs-gold); }
    .precs-est-switch input:focus-visible + i{ outline:2px solid var(--precs-gold); outline-offset:2px; }
    .precs-est-cal-aviso{ margin:var(--space-1) 0 0; font-size:var(--fs-3); color:var(--accent-red-text); }
    /* (02/10/2026) AS JANELAS COM CARA: ícone do contexto num círculo da cor do tom, entrada animada, botão principal com
       destaque. Vale para o <dialog> do bloco e para a janela genérica das Estratégias. */
    .precs-est-modal[open]{ animation:precsEstJanelaEntra var(--dur-3) var(--ease-2) both; }
    .precs-est-modal[open]::backdrop{ animation:precsEstFundoEntra var(--dur-3) var(--ease-1) both; }
    @keyframes precsEstJanelaEntra{ from{ opacity:0; translate:0 14px; scale:.97; } to{ opacity:1; translate:0 0; scale:1; } }
    @keyframes precsEstFundoEntra{ from{ opacity:0; } to{ opacity:1; } }
    .precs-est-dlg.larga{ width:min(900px, 94vw); }
    .precs-est-modal .precs-est-dlg-cab, .precs-est-modal .precs-est-modal-cab{ display:flex; align-items:center; gap:var(--space-3); padding:0 0 var(--space-3); background:none; border-bottom:1px solid var(--border-color); }
    .precs-est-dlg-cab h3{ margin:0; font-family:var(--font-titulo); font-size:var(--fs-7); color:var(--text-primary); }
    .precs-est-dlg-cab small{ display:block; margin-top:var(--space-0); color:var(--text-muted); font-size:var(--fs-4); }
    .precs-est-dlg-ico{ flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
      color:var(--precs-gold-title); background:color-mix(in srgb, var(--precs-gold) 16%, transparent); border:1px solid color-mix(in srgb, var(--precs-gold) 45%, transparent);
      animation:precsEstIcoEntra var(--dur-3) var(--ease-2) both; }
    @keyframes precsEstIcoEntra{ from{ scale:.6; rotate:-12deg; opacity:0; } to{ scale:1; rotate:0deg; opacity:1; } }
    .precs-est-dlg-cab.tom-verde .precs-est-dlg-ico{ color:var(--accent-green); background:color-mix(in srgb, var(--accent-green) 16%, transparent); border-color:color-mix(in srgb, var(--accent-green) 45%, transparent); }
    .precs-est-dlg-cab.tom-vermelho .precs-est-dlg-ico{ color:var(--accent-red-text); background:color-mix(in srgb, var(--accent-red) 14%, transparent); border-color:color-mix(in srgb, var(--accent-red) 45%, transparent); }
    .precs-est-dlg-conteudo{ display:flex; flex-direction:column; gap:var(--space-3); }
    .precs-est-dlg-ok{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-5); border-radius:var(--radius-inner); cursor:pointer;
      border:1px solid var(--precs-gold); background:var(--precs-gold); color:var(--bg-primary); font-family:var(--font-acao); font-size:var(--fs-5); font-weight:700;
      transition:filter var(--dur-2) var(--ease-1), translate var(--dur-2) var(--ease-1); }
    .precs-est-dlg-ok:hover{ filter:brightness(1.08); translate:0 -1px; }
    .precs-est-dlg-ok.perigo{ background:var(--accent-red); border-color:var(--accent-red); color:var(--bg-primary); }
    .precs-est-dlg-ok:focus-visible{ outline:2px solid var(--text-primary); outline-offset:2px; }
    /* A conferência do Aplicar e o resultado: por campanha, quem entra e quem sai, com foto e faixa */
    .precs-est-apl{ display:flex; flex-direction:column; gap:var(--space-3); max-height:58vh; overflow:auto; padding-right:var(--space-1); }
    .precs-est-apl-camp{ display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3); border-radius:var(--radius-inner); background:var(--bg-primary); border:1px solid var(--border-color);
      animation:precsEstLinhaEntra var(--dur-3) var(--ease-2) both; }
    .precs-est-apl-camp:nth-child(2){ animation-delay:40ms; } .precs-est-apl-camp:nth-child(3){ animation-delay:80ms; } .precs-est-apl-camp:nth-child(n+4){ animation-delay:120ms; }
    /* O `header { }` global do painel (a barra do topo) pega todo <header>: os da janela, da conferência e do grupo zeram o que ele põe. */
    .precs-est-modal header, .precs-est-apl-camp header, .precs-est-gov-grupo header{ border-bottom:0; box-shadow:none; justify-content:flex-start; }
    .precs-est-apl-camp header{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; padding:0; background:none; }
    .precs-est-apl-camp header b{ font-size:var(--fs-5); color:var(--text-primary); }
    .precs-est-apl-camp header small{ color:var(--text-muted); font-size:var(--fs-3); }
    .precs-est-apl-camp.fora{ opacity:.6; }
    .precs-est-apl-camp.ok{ border-left:3px solid var(--accent-green); }
    .precs-est-apl-camp.erro{ border-left:3px solid var(--accent-red); }
    .precs-est-apl-st{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-weight:700; font-size:var(--fs-3);
      background:color-mix(in srgb, var(--accent-green) 22%, transparent); color:var(--accent-green); }
    .precs-est-apl-camp.erro .precs-est-apl-st{ background:color-mix(in srgb, var(--accent-red) 22%, transparent); color:var(--accent-red-text); }
    .precs-est-apl-n{ padding:var(--space-0) var(--space-2); border-radius:var(--radius-pill); font-size:var(--fs-3); font-weight:700; }
    .precs-est-apl-n.mais{ background:color-mix(in srgb, var(--precs-gold) 20%, transparent); color:var(--precs-gold-title); }
    .precs-est-apl-n.menos{ background:color-mix(in srgb, var(--accent-red) 18%, transparent); color:var(--accent-red-text); }
    .precs-est-apl-fora{ font-size:var(--fs-3); color:var(--text-muted); }
    .precs-est-apl-linha{ display:flex; align-items:flex-start; gap:var(--space-3); }
    .precs-est-apl-linha > div{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
    .precs-est-apl-rot{ flex:0 0 84px; padding-top:var(--space-1); font-size:var(--fs-3); font-weight:700; text-transform:uppercase; color:var(--text-muted); }
    .precs-est-apl-linha.mais .precs-est-apl-rot{ color:var(--precs-gold-title); }
    .precs-est-apl-linha.menos .precs-est-apl-rot, .precs-est-apl-linha.erro .precs-est-apl-rot{ color:var(--accent-red-text); }
    .precs-est-apl-travas{ list-style:none; margin:0; padding:0; font-size:var(--fs-3); color:var(--text-muted); }
    .precs-est-apl-falha{ margin:0; font-size:var(--fs-3); color:var(--accent-red-text); }
    .precs-est-pessoa-mini{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1); border-radius:var(--radius-pill);
      background:var(--bg-secondary); border:1px solid var(--border-color); }
    .precs-est-pessoa-mini .precs-sup-av{ width:26px; height:26px; flex:0 0 26px; }
    .precs-est-pessoa-mini > span{ display:flex; flex-direction:column; }
    .precs-est-pessoa-mini b{ font-size:var(--fs-4); color:var(--text-primary); white-space:nowrap; }
    .precs-est-pessoa-mini small{ font-size:var(--fs-2); color:var(--text-muted); }
    .precs-est-apl-linha.mais .precs-est-pessoa-mini{ border-color:color-mix(in srgb, var(--precs-gold) 50%, var(--border-color)); }
    .precs-est-apl-linha.menos .precs-est-pessoa-mini, .precs-est-apl-linha.erro .precs-est-pessoa-mini{ border-color:color-mix(in srgb, var(--accent-red) 50%, var(--border-color)); }
    @keyframes precsEstLinhaEntra{ from{ opacity:0; translate:0 6px; } to{ opacity:1; translate:0 0; } }
    /* Blocos no mesmo horário: lado a lado, e marcados como valendo juntos */
    .precs-est-cal-corpo{ --area:100%; }
    .precs-est-cal-col.com-exc .precs-est-cal-corpo{ --area:60%; }
    .precs-est-cal-bloco, .precs-est-cal-col.com-exc .precs-est-cal-bloco{ right:auto; left:calc(3px + (var(--area) - 6px) * var(--l, 0) / var(--n, 1)); width:calc((var(--area) - 6px) / var(--n, 1) - 2px); }
    .precs-est-cal-bloco.junto{ border-top:2px dotted var(--eq); }
    .precs-est-cal-bloco.junto b{ white-space:normal; }
    .precs-est-cal-bloco:not(.criando){ animation:precsEstLinhaEntra var(--dur-2) var(--ease-2) both; }
    /* A exceção: arrasta para mover, a alça muda a duração */
    .precs-est-cal-aj.movel{ cursor:grab; touch-action:none; user-select:none; }
    .precs-est-cal-aj[data-hora]::after{ content:attr(data-hora); font-size:var(--fs-1); font-weight:700; color:var(--precs-gold-title); }
    .precs-est-cal-aj .precs-est-cal-alca{ height:7px; }
    .precs-est-cal-mais{ display:inline-flex; align-items:center; gap:var(--space-2); align-self:flex-start; padding:var(--space-2) var(--space-3); border-radius:var(--radius-inner); cursor:pointer;
      border:1px dashed color-mix(in srgb, var(--precs-gold) 60%, var(--border-color)); background:transparent; color:var(--precs-gold-title); font:inherit; font-size:var(--fs-4); font-weight:600;
      transition:background var(--dur-2) var(--ease-1); }
    .precs-est-cal-mais:hover{ background:color-mix(in srgb, var(--precs-gold) 12%, transparent); }
    .precs-est-modal-frase{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
    .precs-est-modal-form{ animation:precsEstLinhaEntra var(--dur-2) var(--ease-2) both; }
    /* Agora na 3C: limpo */
    .precs-est-agora{ display:flex; flex-direction:column; gap:var(--space-2); border:1px solid var(--border-color); border-radius:var(--radius-inner); background:var(--bg-secondary); padding:var(--space-3); }
    .precs-est-agora h4{ display:flex; align-items:baseline; gap:var(--space-2); margin:0; font-family:var(--font-rotulo); font-size:var(--fs-5); color:var(--text-primary); }
    .precs-est-agora h4 small{ color:var(--text-muted); font-weight:400; }
    .precs-est-agora-etapas{ display:flex; flex-wrap:wrap; gap:var(--space-1); }
    .precs-est-agora-etapa{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); font-size:var(--fs-4); font-weight:600;
      background:color-mix(in srgb, var(--eq) 22%, var(--bg-primary)); border:1px solid color-mix(in srgb, var(--eq) 55%, transparent); color:var(--text-primary); }
    .precs-est-agora-etapa i{ width:9px; height:9px; border-radius:50%; background:var(--eq); }
    .precs-est-agora-etapa.base{ --eq:var(--text-muted); }
    .precs-est-agora-n{ display:flex; flex-wrap:wrap; gap:var(--space-3); font-size:var(--fs-4); color:var(--text-secondary); }
    .precs-est-agora-n .mais b{ color:var(--precs-gold-title); } .precs-est-agora-n .menos b{ color:var(--accent-red-text); }
    .precs-est-agora-ok{ margin:0; font-size:var(--fs-4); color:var(--text-secondary); }
    /* O automático: um interruptor */
    .precs-est-auto{ display:flex; flex-direction:column; gap:var(--space-3); border:1px solid var(--border-color); border-radius:var(--radius-inner); background:var(--bg-secondary); padding:var(--space-3);
      transition:border-color var(--dur-2) var(--ease-1); }
    .precs-est-auto.ligado{ border-color:var(--precs-gold); }
    .precs-est-auto-cab{ display:flex; align-items:center; gap:var(--space-3); }
    .precs-est-auto-cab h4{ margin:0; font-family:var(--font-rotulo); font-size:var(--fs-5); color:var(--text-primary); }
    .precs-est-auto-cab small{ display:block; font-size:var(--fs-3); color:var(--text-muted); }
    .precs-est-auto-cab .precs-est-switch{ margin-left:auto; }
    .precs-est-auto-ico{ display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:50%; color:var(--text-muted); background:var(--bg-tertiary); transition:color var(--dur-2) var(--ease-1), background var(--dur-2) var(--ease-1); }
    .precs-est-auto.ligado .precs-est-auto-ico{ color:var(--precs-gold-title); background:color-mix(in srgb, var(--precs-gold) 18%, transparent); }
    .precs-est-auto-gov{ display:flex; align-items:center; gap:var(--space-3); width:100%; padding:var(--space-2) var(--space-3); border-radius:var(--radius-inner); cursor:pointer; text-align:left;
      border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-secondary); font:inherit; font-size:var(--fs-4); transition:border-color var(--dur-2) var(--ease-1); }
    .precs-est-auto-gov:hover{ border-color:var(--precs-gold); }
    .precs-est-auto-gov b{ color:var(--text-primary); }
    .precs-est-auto-gov em{ margin-left:auto; font-style:normal; font-weight:600; color:var(--precs-gold-title); }
    .precs-est-auto-rostos{ display:flex; }
    .precs-est-auto-rostos .precs-sup-av{ width:24px; height:24px; flex:0 0 24px; margin-left:calc(var(--space-2) * -1); border:2px solid var(--bg-primary); border-radius:50%; }
    .precs-est-auto-rostos .precs-sup-av:first-child{ margin-left:0; }
    .precs-est-auto-avisos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-1); font-size:var(--fs-3); color:var(--text-muted); }
    .precs-est-auto-avisos li::before{ content:'• '; color:var(--precs-gold-title); }
    .precs-est-auto-acoes{ display:flex; gap:var(--space-3); }
    .precs-est-auto-acoes .precs-est-cal-link{ margin:0; }
    .precs-est-auto-sim{ margin:0; font-size:var(--fs-3); color:var(--text-secondary); }
    .precs-est-auto-rastro summary{ cursor:pointer; font-size:var(--fs-3); color:var(--text-muted); }
    .precs-est-auto-rastro ul{ list-style:none; margin:var(--space-1) 0 0; padding:0; font-size:var(--fs-3); color:var(--text-secondary); }
    .precs-est-switch.grande i{ width:46px; height:24px; }
    .precs-est-switch.grande i::after{ width:18px; height:18px; }
    .precs-est-switch.grande input:checked + i::after{ transform:translateX(22px); }
    .precs-est-switch input:disabled + i{ opacity:.5; }
    /* Quem o automático move: por nível, com foto, faixa e filtro */
    .precs-est-gov-topo{ display:flex; align-items:center; gap:var(--space-3); }
    .precs-est-gov-topo .precs-est-campo{ flex:1 1 auto; }
    .precs-est-gov-conta{ font-size:var(--fs-4); font-weight:700; color:var(--precs-gold-title); white-space:nowrap; }
    .precs-est-gov-topo .precs-est-cal-link{ margin:0; }
    .precs-est-gov-lista{ display:flex; flex-direction:column; gap:var(--space-3); max-height:52vh; overflow:auto; padding-right:var(--space-1); }
    .precs-est-gov-grupo{ display:flex; flex-direction:column; gap:var(--space-1); }
    .precs-est-gov-grupo header{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-2); border-radius:var(--radius-inner); background:var(--bg-tertiary); }
    .precs-est-gov-grupo header b{ font-size:var(--fs-4); color:var(--text-primary); }
    .precs-est-gov-grupo header small{ font-size:var(--fs-3); color:var(--text-muted); }
    .precs-est-gov-grupo header .precs-est-switch{ margin-left:auto; }
    .precs-est-gov-pessoa{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-1) var(--space-2); border-radius:var(--radius-inner); cursor:pointer; transition:background var(--dur-2) var(--ease-1); }
    .precs-est-gov-pessoa:hover{ background:var(--bg-primary); }
    .precs-est-gov-pessoa.oculto{ display:none; }
    .precs-est-gov-pessoa .precs-sup-av{ width:30px; height:30px; flex:0 0 30px; }
    .precs-est-gov-nome{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
    .precs-est-gov-nome b{ font-size:var(--fs-4); color:var(--text-primary); }
    .precs-est-gov-nome small{ font-size:var(--fs-2); color:var(--text-muted); }
    /* As etapas: o cabeçalho do nível, a casa animada, e as pessoas com foto */
    .precs-est-nivel-cab{ display:inline-flex; flex-direction:column; align-items:center; gap:var(--space-0); text-transform:none; }
    .precs-est-nivel-cab i{ width:10px; height:10px; border-radius:50%; background:var(--eq); }
    .precs-est-nivel-cab small{ font-weight:400; color:var(--text-muted); font-size:var(--fs-2); }
    .precs-est-check{ position:relative; display:inline-grid; place-items:center; width:24px; height:24px; cursor:pointer; }
    .precs-est-check input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
    .precs-est-check i{ width:20px; height:20px; border-radius:var(--radius-inner); border:2px solid var(--border-color); background:var(--bg-primary); display:grid; place-items:center;
      transition:background var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1), scale var(--dur-2) var(--ease-2); }
    .precs-est-check i::after{ content:''; width:5px; height:10px; translate:0 -2px; border-right:2px solid var(--bg-primary); border-bottom:2px solid var(--bg-primary); rotate:45deg; scale:0;
      transition:scale var(--dur-2) var(--ease-2); }
    .precs-est-check:hover i{ border-color:var(--eq, var(--precs-gold)); }
    .precs-est-check input:checked + i{ background:var(--eq, var(--precs-gold)); border-color:var(--eq, var(--precs-gold)); animation:precsEstMarca var(--dur-2) var(--ease-2); }
    .precs-est-check input:checked + i::after{ scale:1; }
    .precs-est-check input:focus-visible + i{ outline:2px solid var(--precs-gold); outline-offset:2px; }
    @keyframes precsEstMarca{ 0%{ scale:.8; } 60%{ scale:1.12; } 100%{ scale:1; } }
    .precs-est-cal-matriz tr.nova{ animation:precsEstLinhaEntra var(--dur-3) var(--ease-2) both; }
    .precs-est-cal-matriz tbody tr{ transition:background var(--dur-2) var(--ease-1); }
    .precs-est-cal-matriz tbody tr:hover{ background:color-mix(in srgb, var(--eq) 6%, transparent); }
    .precs-est-chip-fx i{ width:10px; height:10px; border-radius:50%; background:var(--fx); border:1px solid var(--border-color); }
    .precs-est-chip-op .precs-sup-av{ width:20px; height:20px; flex:0 0 20px; }
    .precs-est-cron-chip{ animation:precsEstLinhaEntra var(--dur-2) var(--ease-2) both; }
    @media (prefers-reduced-motion: reduce){
      .precs-est-modal[open], .precs-est-modal[open]::backdrop, .precs-est-dlg-ico, .precs-est-apl-camp, .precs-est-cal-bloco, .precs-est-modal-form,
      .precs-est-cal-matriz tr.nova, .precs-est-cron-chip, .precs-est-check input:checked + i{ animation:none; }
    }
    /* (F3) O robô: estado, as quatro travas lado a lado, a simulação e o rastro */
    .precs-est-cron-robo{ border:1px solid var(--border-color); border-radius:var(--radius-inner); background:var(--bg-secondary); padding:var(--space-3); }
    .precs-est-cron-robo h4{ display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-2); font-family:var(--font-rotulo); font-size:var(--fs-5); color:var(--text-primary); }
    .precs-est-robo-estado{ padding:var(--space-0) var(--space-2); border-radius:var(--radius-inner); font-size:var(--fs-3); font-weight:600; border:1px solid var(--border-color); color:var(--text-secondary); }
    .precs-est-robo-estado.ligado{ border-color:var(--precs-gold); color:var(--precs-gold-title); }
    .precs-est-robo-estado.parado{ border-color:var(--accent-red); color:var(--accent-red-text); }
    .precs-est-robo-travas{ list-style:none; margin:0 0 var(--space-2); padding:0; display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3); font-size:var(--fs-4); }
    .precs-est-robo-travas li.on{ color:var(--text-primary); }
    .precs-est-robo-travas li.off{ color:var(--text-muted); }
    .precs-est-robo-sim{ margin-top:var(--space-2); font-size:var(--fs-4); color:var(--text-secondary); }
    .precs-est-robo-rastro{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-0); font-size:var(--fs-3); color:var(--text-secondary); }
    .precs-est-robo-gov-lista{ max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:var(--space-1); text-align:left; }
    .precs-est-robo-gov{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-4); color:var(--text-secondary); cursor:pointer; }
    .precs-est-fantasma.quadro{ border-color:var(--precs-est-marca); padding-left:var(--space-3); font-family:var(--font-rotulo); }
    /* O alfinete: aparece no hover do card e fica aceso na campanha fixada */
    .precs-est-pino{
      display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:0 0 auto; border:0; border-radius:50%;
      background:transparent; color:var(--text-muted); cursor:pointer; opacity:0;
      transition:opacity var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1), transform var(--dur-2) var(--ease-2), background-color var(--dur-1) var(--ease-1);
    }
    .precs-est-camp:hover .precs-est-pino, .precs-est-pino:focus-visible{ opacity:.8; }
    .precs-est-pino:hover{ background:var(--bg-tertiary); color:var(--text-primary); opacity:1; }
    .precs-est-pino.on{ opacity:1; color:var(--precs-gold-hi); transform:rotate(-25deg); }
    .precs-est-camp.fixa{ border-top:2px solid color-mix(in srgb, var(--precs-gold-hi) 70%, transparent); }
    /* (02/10/2026) A pausa da campanha: botão no hover como o alfinete, selo no título e o card esmaecido */
    .precs-est-pausar{
      display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:0 0 auto; border:0; border-radius:50%;
      background:transparent; color:var(--text-muted); cursor:pointer; opacity:0;
      transition:opacity var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1), background-color var(--dur-1) var(--ease-1);
    }
    .precs-est-camp:hover .precs-est-pausar, .precs-est-pausar:focus-visible, .precs-est-camp.pausada .precs-est-pausar{ opacity:.8; }
    .precs-est-pausar:hover{ background:var(--bg-tertiary); color:var(--text-primary); opacity:1; }
    .precs-est-pausar.on{ opacity:1; color:var(--accent-orange); }
    .precs-est-pausa-selo{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0 var(--space-1); border-radius:var(--radius-pill);
      background:color-mix(in srgb, var(--accent-orange) 18%, transparent); color:var(--accent-orange); font-size:var(--fs-2); }
    /* (02/10/2026) Pausada tem que se ler de longe: fundo hachurado em laranja, borda laranja, e o selo com a palavra */
    .precs-est-camp.pausada{ border-color:color-mix(in srgb, var(--accent-orange) 35%, var(--border-color)); border-left:3px solid var(--accent-orange); }
    .precs-est-camp.pausada .precs-est-zona{ opacity:.5; filter:saturate(.6); }
    .precs-est-camp.pausada .precs-est-camp-cab > b{ color:var(--text-secondary); }
    .precs-est-pausa-selo span{ font-family:var(--font-rotulo); font-size:var(--fs-1); font-weight:700; text-transform:uppercase; }
    .precs-est-pausa-selo{ gap:var(--space-0); padding:0 var(--space-2) 0 var(--space-1); }
    .precs-est-camp.pend-estado{ border-style:dashed; border-color:var(--accent-orange); }
    .precs-est-falta.estado{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-1); background:color-mix(in srgb, var(--accent-orange) 10%, transparent); }
    .precs-est-apl-estado{ display:inline-flex; align-items:center; padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); border:1px solid var(--border-color);
      background:var(--bg-secondary); color:var(--text-primary); font-size:var(--fs-4); font-weight:600; }
    .precs-est-apl-linha.menos .precs-est-apl-estado{ border-color:var(--accent-orange); color:var(--accent-orange); }
    .precs-est-apl-linha.mais .precs-est-apl-estado{ border-color:var(--accent-green); color:var(--accent-green); }
    .precs-est-eq-mini > i{ width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:color-mix(in srgb, var(--eq) 30%, transparent); border:2px solid var(--eq); }
    .precs-est-apl-falha.ok{ color:var(--accent-green); }
    .precs-est-camp{
      position:relative; display:flex; flex-direction:column; border-radius:var(--radius-inner); border:1px solid var(--border-color); background:var(--bg-secondary);
      transition:border-color var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2), opacity var(--dur-2) var(--ease-1), background-color var(--dur-2) var(--ease-1);
    }
    .precs-est-camp.fora{ display:none; }
    .precs-est-camp.vazia{ border-style:dashed; background:transparent; }
    .precs-est-palco.focando .precs-est-camp.apagada{ opacity:.3; }
    .precs-est-camp.foco{ outline:2px solid var(--est-ind); outline-offset:-1px; }
    .precs-est-palco.arrastando .precs-est-camp{ border-style:dashed; border-color:color-mix(in srgb, var(--est-marca) 40%, var(--border-color)); }
    .precs-est-palco.arrastando .precs-est-camp.alvo{
      border-style:solid; border-color:var(--est-marca); transform:scale(1.03);
      outline:2px solid color-mix(in srgb, var(--est-marca) 55%, transparent); outline-offset:3px;
      background:color-mix(in srgb, var(--est-marca) 16%, var(--bg-secondary));
    }
    .precs-est-palco.arrastando .precs-est-camp.alvo.ja{ border-color:var(--text-muted); outline-color:transparent; background:var(--bg-secondary); transform:none; }
    .precs-est-camp.pisca{ animation:precsEstPisca .7s var(--ease-2); }
    .precs-est-camp.pisca-menos{ animation:precsEstPiscaMenos .6s var(--ease-2); }
    @keyframes precsEstPisca{ 0%{ background:color-mix(in srgb, var(--accent-green) 22%, var(--bg-secondary)); } 100%{ background:var(--bg-secondary); } }
    @keyframes precsEstPiscaMenos{ 0%{ background:color-mix(in srgb, var(--accent-red) 16%, var(--bg-secondary)); } 100%{ background:var(--bg-secondary); } }
    .precs-est-camp-cab{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-2) var(--space-1) var(--space-3); }
    .precs-est-camp-cab > b{ flex:1 1 auto; min-width:0; font-family:var(--font-rotulo); font-size:var(--fs-4); font-weight:700; color:var(--precs-gold-title); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .precs-est-camp.vazia .precs-est-camp-cab > b{ color:var(--text-secondary); font-weight:600; }
    .precs-est-logados{ display:none; align-items:center; gap:var(--space-1); flex:0 0 auto; font-size:var(--fs-2); color:var(--accent-green-text); }
    .precs-est-logados.on{ display:inline-flex; }
    .precs-est-logados{ font-family:var(--font-num); font-weight:700; }
    .precs-est-logados i{ width:6px; height:6px; border-radius:50%; background:var(--st-idle); }
    .precs-est-logados i.ligando{ background:var(--st-call); animation:precsEstPisca2 1.6s ease-in-out infinite; }
    .precs-est-logados.mudou{ animation:precsEstMudou .6s var(--ease-2); }
    @keyframes precsEstPisca2{ 50%{ opacity:.35; } }
    .precs-est-conta{ min-width:22px; padding:0 var(--space-1); border-radius:var(--radius-pill); text-align:center; font-family:var(--font-num); font-size:var(--fs-3); font-weight:700; background:var(--bg-tertiary); color:var(--text-secondary); }
    .precs-est-solte{
      margin:0 var(--space-2) var(--space-1); padding:var(--space-0); text-align:center; color:var(--text-muted); font-size:var(--fs-3);
      opacity:0; transition:opacity var(--dur-2) var(--ease-1);
    }
    .precs-est-palco.arrastando .precs-est-solte, .precs-est-camp.vazia:hover .precs-est-solte{ opacity:1; }
    .precs-est-zona{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-1); padding:var(--space-1) var(--space-2) var(--space-2); }

    /* O nivel dentro da campanha: so o nome, a cor e quantos */
    /* (01/10/2026) Todos os chips do card com o MESMO tamanho: duas colunas iguais e altura fixa, o nome
       cortado com reticencias. O tamanho pelo conteudo deixava "Nivel 2" e "Aron" em larguras sortidas. */
    .precs-est-chip-eq, .precs-est-ind, .precs-est-vaga{
      position:relative; display:flex; align-items:center; gap:var(--space-1); min-width:0; height:24px; padding:0 var(--space-2); border-radius:var(--radius-pill);
      font-family:var(--font-acao); font-size:var(--fs-3); cursor:grab; touch-action:none;
      transition:background-color var(--dur-2) var(--ease-1), opacity var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2);
    }
    .precs-est-chip-eq{ border:1px solid color-mix(in srgb, var(--eq) 50%, transparent); background:color-mix(in srgb, var(--eq) 16%, transparent); }
    .precs-est-chip-eq:hover{ background:color-mix(in srgb, var(--eq) 28%, transparent); }
    .precs-est-chip-cor{ width:8px; height:8px; border-radius:50%; background:var(--eq); flex:0 0 auto; }
    .precs-est-chip-eq b, .precs-est-ind b, .precs-est-vaga b{ flex:1 1 auto; min-width:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-est-ind{ padding-left:var(--space-0); border:1px solid color-mix(in srgb, var(--est-ind) 45%, transparent); background:color-mix(in srgb, var(--precs-gold) 10%, transparent); }
    .precs-est-ind:hover{ background:color-mix(in srgb, var(--precs-gold) 20%, transparent); }
    .precs-est-ind .precs-est-av{ outline-width:1px; }
    .precs-est-ind .precs-est-av .precs-sup-av{ width:18px; height:18px; }
    .precs-est-ind .precs-est-av::after{ display:none; }
    .precs-est-chip-eq.arrastado, .precs-est-ind.arrastado{ opacity:.3; }
    .precs-est-x{
      display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:0; border-radius:50%; flex:0 0 auto;
      background:transparent; color:var(--text-muted); cursor:pointer; font-size:var(--fs-2); opacity:.55;
      transition:background-color var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1), transform var(--dur-2) var(--ease-2), opacity var(--dur-1) var(--ease-1);
    }
    /* O ✕ fica DENTRO do chip, por cima do fim do nome, e so aparece no hover: o nome usa a largura toda. */
    .precs-est-chip-eq .precs-est-x, .precs-est-ind .precs-est-x{ position:absolute; right:var(--space-0); top:50%; margin-top:-9px; opacity:0; background:var(--bg-tertiary); }
    .precs-est-chip-eq:hover .precs-est-x, .precs-est-ind:hover .precs-est-x, .precs-est-x:focus-visible{ opacity:1; }
    .precs-est-x:hover{ background:var(--accent-red-light); color:var(--accent-red-text); transform:rotate(90deg); }
    .precs-est-chip-eq.pendente, .precs-est-ind.pendente{ border-style:dashed; border-color:var(--precs-gold-hi); animation:precsEstPendente 1.8s ease-in-out infinite; }
    @keyframes precsEstPendente{ 50%{ border-color:color-mix(in srgb, var(--precs-gold-hi) 35%, transparent); } }
    /* A vaga do arrasto */
    .precs-est-vaga{ border:1px dashed var(--precs-est-marca); background:color-mix(in srgb, var(--precs-est-marca) 14%, transparent); color:var(--text-primary); cursor:inherit;
      animation:precsEstPop var(--dur-3) var(--ease-2) both; }
    .precs-est-vaga.eq{ border-color:var(--eq); background:color-mix(in srgb, var(--eq) 18%, transparent); }
    .precs-est-vaga i{ font-style:normal; color:var(--precs-est-marca); font-weight:700; }
    .precs-est-vaga.eq i{ color:var(--eq); }
    /* Eco: o nivel ou a pessoa do card acende na esquerda */
    .precs-est-pessoa.eco{ background:color-mix(in srgb, var(--eq, var(--precs-gold)) 16%, transparent); transform:translateX(3px); }
    .precs-est-grupo-cab.eco{ background:color-mix(in srgb, var(--eq) 18%, var(--bg-primary)); }
    /* Entrar e sair tem movimento: o olho precisa ver o que mudou */
    .precs-est-chip-eq.entrou, .precs-est-ind.entrou{ animation:precsEstPop .45s var(--ease-2) both; }
    .precs-est-chip-eq.saindo, .precs-est-ind.saindo{ animation:precsEstSai .24s var(--ease-3) forwards; }
    @keyframes precsEstPop{ 0%{ transform:scale(.3); opacity:0; } 70%{ transform:scale(1.12); opacity:1; } 100%{ transform:none; } }
    @keyframes precsEstSai{ 0%{ transform:none; opacity:1; } 100%{ transform:scale(.3); opacity:0; } }

    .precs-est-mais{ margin-left:var(--space-1); color:var(--text-muted); font-family:var(--font-num); font-size:var(--fs-2); }

    /* O fantasma do arrasto: camada de topo (popover), sem z-index, preso ao ponto da pegada */
    .precs-est-fantasma{
      position:fixed; inset:auto; left:0; top:0; margin:0; overflow:visible; align-items:center; gap:var(--space-2);
      padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1); border-radius:var(--radius-pill);
      background:var(--bg-tertiary); border:1px solid var(--precs-est-marca); color:var(--text-primary);
      box-shadow:var(--shadow-lg); pointer-events:none; font-size:var(--fs-5); white-space:nowrap; will-change:transform;
      animation:precsEstLevanta var(--dur-2) var(--ease-2) both;
    }
    .precs-est-fantasma:popover-open{ display:flex; }
    .precs-est-fantasma.eq{ border-color:var(--eq); background:color-mix(in srgb, var(--eq) 22%, var(--bg-tertiary)); padding-left:var(--space-3); }
    .precs-est-fantasma small{ color:var(--text-muted); font-size:var(--fs-3); }
    .precs-est-fantasma.sobre{ outline:2px solid var(--precs-est-marca); outline-offset:2px; }
    .precs-est-fantasma.tira{ border-color:var(--accent-red); background:color-mix(in srgb, var(--accent-red) 18%, var(--bg-tertiary)); }
    .precs-est-fantasma.voa{ transition:transform var(--dur-2) var(--ease-3), opacity var(--dur-2) var(--ease-3); opacity:.15; }
    .precs-est-fantasma.volta{ transition:transform var(--dur-3) var(--ease-2), opacity var(--dur-3) var(--ease-2); opacity:0; }
    .precs-est-fantasma.cai{ transition:opacity var(--dur-3) var(--ease-3); opacity:0; animation:precsEstCai .32s var(--ease-3) forwards; }
    @keyframes precsEstLevanta{ from{ scale:.9; } to{ scale:1.03; } }
    @keyframes precsEstCai{ to{ scale:.4; rotate:12deg; } }
    body.precs-est-agarrado, body.precs-est-agarrado *{ cursor:grabbing; user-select:none; }
    body.precs-est-agarrado #precs-tip{ opacity:0; visibility:hidden; }

    /* As linhas, por cima dos cards e sem capturar o mouse */
    .precs-est-fios{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; transition:opacity var(--dur-3) var(--ease-1); }
    .precs-est-palco.arrastando .precs-est-fios{ opacity:.22; }
    .precs-est-fios path{
      fill:none; stroke:var(--fio); stroke-width:2.5; stroke-linecap:round; opacity:.9;
      stroke-dasharray:100; stroke-dashoffset:100; animation:precsEstDesenha .45s var(--ease-2) forwards;
      filter:drop-shadow(0 0 3px color-mix(in srgb, var(--fio) 60%, transparent));
    }
    .precs-est-fios path.ind{ stroke-width:3.5; opacity:1; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--fio) 75%, transparent)); }
    .precs-est-fio-bola{ fill:var(--fio); filter:drop-shadow(0 0 4px var(--fio)); }
    .precs-est-fios path.eq{ stroke-dasharray:3 2.2; stroke-dashoffset:0; animation:precsEstFlui 1.4s linear infinite, precsEstAparece var(--dur-3) var(--ease-2) both; }
    .precs-est-fios circle{ fill:var(--fio, var(--est-ind)); }
    .precs-est-fio-p{ animation:precsEstAparece var(--dur-2) var(--ease-2) both; }
    @keyframes precsEstDesenha{ to{ stroke-dashoffset:0; } }
    @keyframes precsEstFlui{ to{ stroke-dashoffset:-10.4; } }
    @keyframes precsEstAparece{ from{ opacity:0; } to{ opacity:.9; } }

    /* Carregando */
    .precs-est-lendo{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-6); color:var(--text-muted); font-size:var(--fs-5); }
    .precs-est-giro{ width:18px; height:18px; border-radius:50%; border:2px solid color-mix(in srgb, var(--est-marca) 30%, transparent); border-top-color:var(--est-marca); animation:precsEstGira .8s linear infinite; }
    @keyframes precsEstGira{ to{ transform:rotate(360deg); } }


    @keyframes precsEstEntra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
    @media (prefers-reduced-motion: reduce){
      .precs-est-fios path, .precs-est-fio-p, .precs-est-camp.pisca, .precs-est-camp.pisca-menos, .precs-est-mudou,
      .precs-est-chip-eq.entrou, .precs-est-ind.entrou, .precs-est-fantasma, .precs-est-av::after, .precs-est-av.mudou,
      .precs-est-logados i, .precs-est-logados.mudou, .precs-est-faixas > .pega, .precs-est-quadro.chega .precs-est-secao,
      .precs-est-camp.assentou, .precs-est-secao.assentou,
      .precs-est-chip-eq.pendente, .precs-est-ind.pendente, .precs-est-vaga,
      .precs-seg button.precs-sup-aba-est.active .precs-sup-aba-est-ico{ animation:none; }
      .precs-est-fios path{ stroke-dashoffset:0; }
      .precs-est-secao, .precs-est-secao-corpo{ transition:none; }
      .precs-est-palco.arrastando .precs-est-camp.alvo, .precs-est-pessoa:hover{ transform:none; }
    }

/* ===================================================================== */
/* (02/10/2026) Estratégias: a identidade de cada campanha, o seletor     */
/* da aba (pessoa, faixa ou campanha), a chave entra/sai e a exceção nova */
/* ===================================================================== */
    .precs-est-ident{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:26px; height:22px; padding:0 var(--space-1);
      border-radius:var(--radius-sm); background:color-mix(in srgb, var(--id) 22%, transparent); border:1px solid color-mix(in srgb, var(--id) 70%, transparent);
      color:var(--id); font-family:var(--font-rotulo); font-size:var(--fs-2); font-weight:700; }
    .precs-est-ident.vazio{ --id:var(--text-muted); border-style:dashed; }
    .precs-opcombo-item .precs-est-ident, .precs-opcombo-btn .precs-est-ident{ min-width:34px; height:30px; font-size:var(--fs-3); }
    .precs-est-pick-grupo{ padding:var(--space-2) var(--space-2) var(--space-1); font-family:var(--font-rotulo); font-size:var(--fs-2); font-weight:700;
      text-transform:uppercase; color:var(--text-muted); }
    .precs-est-pick-fx{ background:color-mix(in srgb, var(--fx) 30%, transparent); border:3px solid var(--fx); box-sizing:border-box; }
    .precs-est-pick-mini{ display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill);
      border:1px dashed var(--border-color); background:transparent; color:var(--text-muted); font:inherit; font-size:var(--fs-3); font-weight:600; cursor:pointer;
      transition:border-color var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1), background-color var(--dur-1) var(--ease-1); }
    .precs-est-pick-mini:hover, .precs-est-pick-mini[aria-expanded="true"]{ border-color:var(--precs-gold); border-style:solid; color:var(--precs-gold-title); background:color-mix(in srgb, var(--precs-gold) 8%, transparent); }
    .precs-est-pick-grande{ flex:1 1 240px; max-width:none; text-align:left; }
    .precs-est-modal-form .precs-est-pick-grande{ min-width:0; }
    /* Entra / sai: uma chave de dois lados, com o marcador que desliza */
    .precs-est-entra-sai{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; flex:0 0 auto; padding:var(--space-0); border-radius:var(--radius-pill);
      border:1px solid var(--border-color); background:var(--bg-primary); isolation:isolate; }
    .precs-est-entra-sai > i{ position:absolute; top:var(--space-0); bottom:var(--space-0); left:var(--space-0); width:calc(50% - var(--space-0)); border-radius:var(--radius-pill);
      background:color-mix(in srgb, var(--precs-gold) 22%, var(--bg-secondary)); border:1px solid var(--precs-gold); box-sizing:border-box;
      transition:translate var(--dur-2) var(--ease-2), background-color var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1); }
    .precs-est-entra-sai.sai > i{ translate:100% 0; background:color-mix(in srgb, var(--accent-red) 18%, var(--bg-secondary)); border-color:var(--accent-red); }
    .precs-est-entra-sai button{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); padding:var(--space-1) var(--space-3);
      border:0; background:transparent; color:var(--text-muted); font:inherit; font-size:var(--fs-4); font-weight:600; cursor:pointer; white-space:nowrap;
      transition:color var(--dur-2) var(--ease-1); }
    .precs-est-entra-sai button.on{ color:var(--precs-gold-title); }
    .precs-est-entra-sai.sai button.on{ color:var(--accent-red-text); }
    /* A exceção no calendário: foto, quem, se entra ou sai, e a campanha com a identidade dela */
    .precs-est-cal-aj{ gap:var(--space-0); border-left:3px solid var(--id, var(--precs-gold)); }
    .precs-est-cal-aj-quem{ display:flex; align-items:center; gap:var(--space-1); min-width:0; }
    .precs-est-cal-aj-quem .precs-sup-av{ width:18px; height:18px; flex:0 0 18px; }
    .precs-est-cal-aj-quem b{ flex:1 1 auto; min-width:0; }
    .precs-est-cal-aj-quem em{ flex:0 0 auto; padding:0 var(--space-1); border-radius:var(--radius-pill); font-style:normal; font-size:var(--fs-1); font-weight:700;
      background:color-mix(in srgb, var(--precs-gold) 30%, transparent); color:var(--precs-gold-title); }
    .precs-est-cal-aj.menos .precs-est-cal-aj-quem em{ background:color-mix(in srgb, var(--accent-red) 28%, transparent); color:var(--accent-red-text); }
    .precs-est-cal-aj small{ display:flex; align-items:center; gap:var(--space-1); white-space:nowrap; }
    .precs-est-cal-aj small .precs-est-ident{ min-width:18px; height:14px; font-size:var(--fs-1); }
    .precs-est-cal-aj.curta small{ display:none; }
    /* O que a etapa fecha: uma linha embaixo da grade, com cadeado */
    .precs-est-cal-fecha{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); margin-top:var(--space-2); padding:var(--space-2);
      border-radius:var(--radius-inner); border:1px dashed color-mix(in srgb, var(--accent-red) 35%, var(--border-color)); background:color-mix(in srgb, var(--accent-red) 5%, transparent); }
    .precs-est-cal-fecha-rot{ display:inline-flex; align-items:center; gap:var(--space-1); margin-right:var(--space-1); font-size:var(--fs-3); font-weight:700; color:var(--accent-red-text); }
    .precs-est-chip-fecha .precs-est-ident{ min-width:20px; height:16px; font-size:var(--fs-1); }
    .precs-est-chip-fecha{ text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--accent-red) 60%, transparent); }
    .precs-est-cal-fecha .precs-est-cal-link{ margin-left:auto; }
    .precs-est-cal-fecha.vazia{ border-color:var(--border-color); background:transparent; }
    .precs-est-cal-fecha.vazia .precs-est-cal-fecha-rot{ color:var(--text-muted); font-weight:600; }
    /* Reler com o giro; Repetir com o ícone */
    .precs-est-reler, .precs-est-repetir{ display:inline-flex; align-items:center; gap:var(--space-2); }
    .precs-est-reler .precs-est-giro{ width:14px; height:14px; }
    .precs-est-reler.lendo{ cursor:progress; }
    .precs-est-repetir svg{ color:var(--precs-gold-title); flex:0 0 auto; }
    /* As janelas saem animadas; a troca Cronograma/Etapas entra deslizando */
    .precs-est-modal.saindo{ animation:precsEstJanelaSai var(--dur-2) var(--ease-1) both; }
    .precs-est-modal.saindo::backdrop{ animation:precsEstFundoSai var(--dur-2) var(--ease-1) both; }
    @keyframes precsEstJanelaSai{ from{ opacity:1; translate:0 0; scale:1; } to{ opacity:0; translate:0 10px; scale:.97; } }
    @keyframes precsEstFundoSai{ from{ opacity:1; } to{ opacity:0; } }
    .precs-est-cal-vista.entra{ animation:precsEstVistaEntra var(--dur-3) var(--ease-2) both; }
    @keyframes precsEstVistaEntra{ from{ opacity:0; translate:0 8px; } to{ opacity:1; translate:0 0; } }
    @media (prefers-reduced-motion: reduce){
      .precs-est-entra-sai > i, .precs-est-entra-sai button, .precs-est-pick-mini, .precs-est-cal-link{ transition:none; }
      .precs-est-modal.saindo, .precs-est-modal.saindo::backdrop, .precs-est-cal-vista.entra{ animation:none; }
    }

/* ===================================================================== */
/* (02/10/2026) A REPAGINADA FINAL DAS ESTRATÉGIAS                        */
/* identidade das abas, dos modos e dos botões; a troca animada; o foco   */
/* do "fora do combinado"; a gravação visível; o botão de energia do      */
/* automático; o zoom do calendário                                       */
/* ===================================================================== */
    /* As abas Operadores e Campanhas, com marca e ícone como as outras três */
    .precs-sup-aba-ico{ display:inline-flex; flex:0 0 auto; }
    .precs-seg button.precs-sup-aba-oper, .precs-seg button.precs-sup-aba-camp{ display:inline-flex; align-items:center; gap:var(--space-1); justify-content:center; }
    .precs-seg button.precs-sup-aba-oper[hidden], .precs-seg button.precs-sup-aba-camp[hidden]{ display:none; }
    .precs-seg button.precs-sup-aba-oper{ color:color-mix(in srgb, var(--precs-oper-marca) 78%, var(--text-primary)); outline:1px solid color-mix(in srgb, var(--precs-oper-marca) 45%, transparent); outline-offset:-1px; }
    .precs-seg button.precs-sup-aba-oper:hover{ background:color-mix(in srgb, var(--precs-oper-marca) 12%, transparent); }
    .precs-seg button.precs-sup-aba-oper.active{ background:color-mix(in srgb, var(--precs-oper-marca) 20%, var(--bg-secondary)); outline-color:color-mix(in srgb, var(--precs-oper-marca) 80%, transparent); }
    .precs-seg button.precs-sup-aba-camp{ color:color-mix(in srgb, var(--precs-camp-marca) 78%, var(--text-primary)); outline:1px solid color-mix(in srgb, var(--precs-camp-marca) 45%, transparent); outline-offset:-1px; }
    .precs-seg button.precs-sup-aba-camp:hover{ background:color-mix(in srgb, var(--precs-camp-marca) 12%, transparent); }
    .precs-seg button.precs-sup-aba-camp.active{ background:color-mix(in srgb, var(--precs-camp-marca) 20%, var(--bg-secondary)); outline-color:color-mix(in srgb, var(--precs-camp-marca) 80%, transparent); }
    .precs-seg button.precs-sup-aba-oper.active .precs-sup-aba-ico, .precs-seg button.precs-sup-aba-camp.active .precs-sup-aba-ico{ animation:precsEstIco 1.2s var(--ease-2); }
    /* Com a pílula medida, quem pinta é o trilho (senão seriam duas pastilhas): o botão ativo fica transparente e a
       pílula toma a cor da aba que está embaixo dela. */
    .precs-sup-abas[data-pilula] > button.precs-sup-aba-oper.active, .precs-sup-abas[data-pilula] > button.precs-sup-aba-camp.active{ background:transparent; }
    .precs-sup-abas[data-pilula][data-aba="operadores"]::before{ background:color-mix(in srgb, var(--precs-oper-marca) 20%, var(--bg-secondary)); }
    .precs-sup-abas[data-pilula][data-aba="campanhas"]::before{ background:color-mix(in srgb, var(--precs-camp-marca) 20%, var(--bg-secondary)); }
    /* As sub-abas e os modos das Estratégias: ícone, e o ponto vivo do Hoje */
    .precs-est-seg button{ gap:var(--space-1); }
    .precs-est-seg button svg{ flex:0 0 auto; opacity:.75; transition:opacity var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2); }
    .precs-est-seg button.active svg{ opacity:1; transform:scale(1.08); }
    .precs-est-vivo{ width:8px; height:8px; border-radius:50%; background:var(--accent-green); flex:0 0 auto; opacity:.6; }
    .precs-est-seg button.active .precs-est-vivo{ opacity:1; animation:precsEstVivo 2s var(--ease-1) infinite; }
    @keyframes precsEstVivo{ 0%, 100%{ outline:0 solid color-mix(in srgb, var(--accent-green) 50%, transparent); } 50%{ outline:4px solid color-mix(in srgb, var(--accent-green) 0%, transparent); } }
    /* A troca de sub-aba e de modo entra deslizando */
    .precs-est-palco.entra, .precs-est-cron.entra{ animation:precsEstVistaEntra var(--dur-3) var(--ease-2) both; }
    /* "N fora do combinado": um botão que acende no quadro só o que está fora */
    .precs-est-deriva-n{ display:inline-flex; align-items:center; gap:var(--space-1); cursor:pointer; background:transparent; font:inherit; font-size:var(--fs-4); font-weight:600;
      transition:background-color var(--dur-2) var(--ease-1), border-style var(--dur-2) var(--ease-1), transform var(--dur-1) var(--ease-2); }
    .precs-est-deriva-n b{ font-family:var(--font-num); }
    .precs-est-deriva-n:hover{ background:color-mix(in srgb, var(--accent-red) 10%, transparent); }
    .precs-est-deriva-n.on{ border-style:solid; background:color-mix(in srgb, var(--accent-red) 16%, transparent); }
    .precs-est-deriva-n:active{ transform:scale(.97); }
    .precs-est-palco.deriva-foco .precs-est-camp:not(.com-deriva){ opacity:.22; filter:saturate(.4); }
    .precs-est-palco.deriva-foco .precs-est-camp.com-deriva{ outline:2px solid var(--accent-red); outline-offset:2px; animation:precsEstDerivaAcende var(--dur-3) var(--ease-2) both; }
    .precs-est-palco.deriva-foco .precs-est-ind.deriva{ animation:precsEstDerivaPulsa 1.4s var(--ease-1) infinite; }
    .precs-est-palco.deriva-foco .precs-est-falta{ background:color-mix(in srgb, var(--accent-red) 14%, transparent); color:var(--text-primary); }
    .precs-est-palco.deriva-foco .precs-est-pessoas{ opacity:.45; }
    @keyframes precsEstDerivaAcende{ from{ outline-color:transparent; transform:scale(.98); } to{ outline-color:var(--accent-red); transform:none; } }
    @keyframes precsEstDerivaPulsa{ 0%, 100%{ border-color:var(--accent-red); } 50%{ border-color:color-mix(in srgb, var(--accent-red) 35%, transparent); } }
    /* A gravação visível: a faixa no topo e o card que está sendo gravado */
    .precs-est-gravando{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
      border:1px solid var(--precs-gold); background:color-mix(in srgb, var(--precs-gold) 12%, transparent); color:var(--text-primary); font-size:var(--fs-4); animation:precsEstEntra var(--dur-3) var(--ease-2) both; }
    .precs-est-gravando .precs-est-giro{ width:14px; height:14px; }
    .precs-est-gravando i{ font-style:normal; font-family:var(--font-num); font-weight:700; }
    .precs-est-gravando b{ display:inline-flex; align-items:center; gap:var(--space-1); color:var(--precs-gold-title); }
    .precs-est-gravando .precs-est-ident{ min-width:20px; height:16px; font-size:var(--fs-1); }
    .precs-est-camp.gravando{ outline:2px solid var(--precs-gold); outline-offset:2px; animation:precsEstGravaPulsa 1.1s var(--ease-1) infinite; }
    @keyframes precsEstGravaPulsa{ 0%, 100%{ outline-color:var(--precs-gold); } 50%{ outline-color:color-mix(in srgb, var(--precs-gold) 25%, transparent); } }
    /* Os botões do cronograma, com ícone; o grupo do texto do grupo; o zoom */
    .precs-est-btn-ico{ display:inline-flex; align-items:center; gap:var(--space-2); }
    .precs-est-btn-ico svg{ flex:0 0 auto; color:var(--precs-gold-title); }
    .precs-est-btn-ico.perigo svg{ color:var(--accent-red-text); }
    .precs-est-aplicar.precs-est-btn-ico:not(:disabled) svg{ color:inherit; }
    .precs-est-cron-grupo{ display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-0); border-radius:var(--radius-inner); border:1px dashed var(--border-color); }
    .precs-est-cron-grupo .precs-supwa-btn{ border-color:transparent; }
    .precs-est-cron-grupo .precs-supwa-btn:hover:not(:disabled){ border-color:var(--precs-gold); }
    .precs-est-cal-zoom{ display:inline-flex; align-items:center; gap:var(--space-0); margin-left:var(--space-2); padding:var(--space-0); border-radius:var(--radius-pill); border:1px solid var(--border-color); }
    .precs-est-cal-zoom button{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:var(--text-secondary); cursor:pointer;
      transition:background-color var(--dur-1) var(--ease-1), color var(--dur-1) var(--ease-1); }
    .precs-est-cal-zoom button:hover:not(:disabled){ background:var(--bg-tertiary); color:var(--text-primary); }
    .precs-est-cal-zoom button:disabled{ opacity:.35; cursor:default; }
    .precs-est-cal-horas small.meia{ font-size:var(--fs-1); opacity:.7; }
    /* O automático: o botão de energia e, ligado, o anel que corre em volta do card */
    @property --precs-est-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
    .precs-est-auto{ position:relative; }
    .precs-est-auto.ligado::before{ --precs-est-ang:0deg; content:''; position:absolute; inset:calc(-1 * var(--space-0)); border-radius:inherit; padding:var(--space-0); pointer-events:none;
      background:conic-gradient(from var(--precs-est-ang), transparent 0 62%, color-mix(in srgb, var(--precs-gold) 35%, transparent) 78%, var(--precs-gold-hi) 90%, transparent 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
      animation:precsEstEnergia 3.2s linear infinite; }
    @keyframes precsEstEnergia{ to{ --precs-est-ang:360deg; } }
    .precs-est-auto.ligado .precs-est-auto-ico svg{ animation:precsEstRaio 2.4s var(--ease-1) infinite; }
    @keyframes precsEstRaio{ 0%, 100%{ transform:none; } 50%{ transform:scale(1.12); } }
    .precs-est-power{ position:relative; margin-left:auto; flex:0 0 auto; cursor:pointer; }
    .precs-est-power input{ position:absolute; opacity:0; width:1px; height:1px; }
    .precs-est-power i{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:2px solid var(--border-color); background:var(--bg-primary); color:var(--text-muted);
      transition:border-color var(--dur-2) var(--ease-1), color var(--dur-2) var(--ease-1), background-color var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2), box-shadow var(--dur-3) var(--ease-1); }
    .precs-est-power:hover i{ border-color:var(--text-secondary); color:var(--text-primary); transform:scale(1.04); }
    .precs-est-power input:checked + i{ border-color:var(--precs-gold); color:var(--precs-gold-hi); background:color-mix(in srgb, var(--precs-gold) 18%, var(--bg-primary)); box-shadow:0 0 18px color-mix(in srgb, var(--precs-gold) 45%, transparent); }
    .precs-est-power input:checked + i svg{ animation:precsEstLigou .6s var(--ease-2); }
    @keyframes precsEstLigou{ 0%{ transform:scale(.7) rotate(-30deg); } 60%{ transform:scale(1.15) rotate(6deg); } 100%{ transform:none; } }
    .precs-est-power input:focus-visible + i{ outline:2px solid var(--precs-gold); outline-offset:3px; }
    .precs-est-power input:disabled + i{ opacity:.5; cursor:progress; }
    @media (prefers-reduced-motion: reduce){
      .precs-est-palco.entra, .precs-est-cron.entra, .precs-est-palco.deriva-foco .precs-est-camp.com-deriva, .precs-est-palco.deriva-foco .precs-est-ind.deriva,
      .precs-est-camp.gravando, .precs-est-auto.ligado::before, .precs-est-auto.ligado .precs-est-auto-ico svg, .precs-est-power input:checked + i svg, .precs-est-seg button.active .precs-est-vivo,
      .precs-est-gravando, .precs-seg button.precs-sup-aba-oper.active .precs-sup-aba-ico, .precs-seg button.precs-sup-aba-camp.active .precs-sup-aba-ico{ animation:none; }
      .precs-est-deriva-n, .precs-est-power i, .precs-est-seg button svg, .precs-est-cal-zoom button{ transition:none; }
    }

/* (02/10/2026, 4ª volta) A etapa que abre e pausa campanhas: as duas listas do cartão, quem está em cada uma, a janela do
   bloco com Abertas/Pausadas, e o Colar do dia */
    .precs-est-cal-lista{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); padding:var(--space-2); border-radius:var(--radius-inner); border:1px solid var(--border-color); }
    .precs-est-cal-lista.abre{ border-color:color-mix(in srgb, var(--precs-gold) 40%, var(--border-color)); background:color-mix(in srgb, var(--precs-gold) 6%, transparent); }
    .precs-est-cal-lista.pausa{ border-style:dashed; border-color:color-mix(in srgb, var(--accent-orange) 40%, var(--border-color)); background:color-mix(in srgb, var(--accent-orange) 5%, transparent); }
    .precs-est-cal-lista.vazia{ background:transparent; border-color:var(--border-color); }
    .precs-est-cal-lista-rot{ display:inline-flex; align-items:center; gap:var(--space-1); margin-right:var(--space-1); font-size:var(--fs-3); font-weight:700; color:var(--precs-gold-title); }
    .precs-est-cal-lista.pausa .precs-est-cal-lista-rot{ color:var(--accent-orange); }
    .precs-est-cal-lista.vazia .precs-est-cal-lista-rot{ color:var(--text-muted); font-weight:600; }
    .precs-est-chip-abre .precs-est-ident, .precs-est-chip-pausa .precs-est-ident, .precs-est-cal-quem .precs-est-ident, .precs-est-cal-gov .precs-est-ident{ min-width:20px; height:16px; font-size:var(--fs-1); }
    .precs-est-chip-pausa{ text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--accent-orange) 70%, transparent); }
    .precs-est-cal-quem{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin:0; font-size:var(--fs-3); color:var(--text-muted); }
    .precs-est-cal-quem span{ display:inline-flex; align-items:center; gap:var(--space-1); }
    .precs-est-cal-gov{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); }
    .precs-est-cal-gov .precs-est-ident{ margin-left:var(--space-1); }
    .precs-est-modal-estado{ display:grid; grid-template-columns:84px minmax(0, 1fr); gap:var(--space-2); align-items:start; padding:var(--space-2) 0; border-bottom:1px solid var(--border-color); }
    .precs-est-modal-estado > b{ font-size:var(--fs-3); text-transform:uppercase; color:var(--text-muted); padding-top:var(--space-1); }
    .precs-est-modal-estado.aberta > b{ color:var(--precs-gold-title); }
    .precs-est-modal-estado.pausada > b{ color:var(--accent-orange); }
    .precs-est-modal-estado > div{ display:flex; flex-wrap:wrap; gap:var(--space-1); }
    .precs-est-modal-camp{ display:inline-flex; align-items:center; gap:var(--space-1); }
    .precs-est-modal-camp .precs-est-ident{ min-width:18px; height:14px; font-size:var(--fs-1); }
    .precs-est-cal-cab-acoes{ position:absolute; top:50%; right:var(--space-1); transform:translateY(-50%); display:flex; gap:var(--space-0); }
    .precs-est-cal-cab-acoes .precs-est-cal-copiar{ position:static; transform:none; }
    .precs-est-cal-copiar.colar{ display:inline-flex; color:var(--precs-gold-title); }

/* (02/10/2026, 5ª volta) fios por cima dos cards e grudados na borda; a pílula nas sub-abas; a troca com direção;
   a entrada das abas da supervisão; a pílula da faixa de cima na cor de cada aba */
    /* O cabeçalho do card é um <header> e herdava a regra global (sticky com camada): só ele ficava por cima dos fios */
    .precs-est-camp-cab{ position:static; z-index:auto; border-bottom:0; background:transparent; }
    .precs-est-fios path.fora{ stroke-dasharray:6 4; opacity:.75; }
    .precs-est-fio-seta{ fill:var(--fio); stroke:none; filter:drop-shadow(0 0 4px var(--fio)); animation:precsEstAparece var(--dur-2) var(--ease-2) both; }
    .precs-seg.precs-seg-pilula{ position:relative; }
    .precs-seg.precs-seg-pilula > button{ position:relative; }
    .precs-seg.precs-seg-pilula::before{ content:''; position:absolute; top:var(--space-1); bottom:var(--space-1); left:var(--px, 0px); width:var(--pw, 0px);
      border-radius:calc(var(--radius-inner) - 1px); background:color-mix(in srgb, var(--precs-gold) 16%, var(--bg-secondary)); outline:1px solid color-mix(in srgb, var(--precs-gold) 45%, transparent); outline-offset:-1px; opacity:0;
      transition:left var(--dur-3) var(--ease-2), width var(--dur-3) var(--ease-2), opacity var(--dur-2) var(--ease-1); }
    .precs-seg.precs-seg-pilula[data-pilula]::before{ opacity:1; }
    .precs-seg.precs-seg-pilula[data-pilula] > button.active, .precs-seg.precs-seg-pilula[data-pilula] > button.active:hover{ background:transparent; box-shadow:none; }
    .precs-est-palco.entra-dir, .precs-est-cron.entra-dir, .precs-est-cal-vista.entra-dir{ animation-name:precsEstEntraDir; }
    .precs-est-palco.entra-esq, .precs-est-cron.entra-esq, .precs-est-cal-vista.entra-esq{ animation-name:precsEstEntraEsq; }
    @keyframes precsEstEntraDir{ from{ opacity:0; translate:18px 0; } to{ opacity:1; translate:0 0; } }
    @keyframes precsEstEntraEsq{ from{ opacity:0; translate:-18px 0; } to{ opacity:1; translate:0 0; } }
    .precs-sup-painel-entra{ animation:precsSupPainelEntra var(--dur-3) var(--ease-2) both; }
    @keyframes precsSupPainelEntra{ from{ opacity:0; translate:0 10px; scale:.995; } to{ opacity:1; translate:0 0; scale:1; } }
    .precs-sup-abas[data-pilula][data-aba="estrategias"]::before{ background:color-mix(in srgb, var(--precs-est-marca) 20%, var(--bg-secondary)); }
    .precs-sup-abas[data-pilula][data-aba="whatsapp"]::before{ background:color-mix(in srgb, var(--accent-green) 18%, var(--bg-secondary)); }
    .precs-sup-abas[data-pilula][data-aba="meta"]::before{ background:color-mix(in srgb, var(--precs-meta-marca) 18%, var(--bg-secondary)); }
    .precs-sup-abas[data-pilula] > button.precs-sup-aba-est.active, .precs-sup-abas[data-pilula] > button.precs-sup-aba-wa.active, .precs-sup-abas[data-pilula] > button.precs-sup-aba-meta.active{ background:transparent; box-shadow:none; }
    @media (prefers-reduced-motion: reduce){
      .precs-seg.precs-seg-pilula::before{ transition:none; }
      .precs-sup-painel-entra, .precs-est-fio-seta{ animation:none; }
    }

/* (02/10/2026, 6ª volta) identidade da campanha no card, passado sombreado no calendário, pílula das abas na cor */
    .precs-est-camp::before{ content:''; position:absolute; left:var(--space-3); right:var(--space-3); top:-1px; height:2px; border-radius:var(--radius-pill);
      background:var(--id, transparent); opacity:.85; pointer-events:none; transition:opacity var(--dur-2) var(--ease-1), left var(--dur-2) var(--ease-2), right var(--dur-2) var(--ease-2); }
    .precs-est-camp:hover::before{ left:var(--space-1); right:var(--space-1); opacity:1; }
    .precs-est-camp.vazia::before{ opacity:.35; }
    .precs-est-ident{ background:linear-gradient(135deg, color-mix(in srgb, var(--id) 34%, transparent), color-mix(in srgb, var(--id) 12%, transparent));
      transition:background-color var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2); }
    .precs-est-camp:hover .precs-est-ident, .precs-opcombo-item:hover .precs-est-ident{ transform:scale(1.06); }
    .precs-est-cal-col.hoje .precs-est-cal-corpo::after{ content:''; position:absolute; left:0; right:0; top:0; height:var(--agora, 0px); pointer-events:none;
      background:color-mix(in srgb, var(--bg-primary) 38%, transparent); transition:height var(--dur-3) var(--ease-2); }
    .precs-sup-abas[data-pilula][data-aba="operadores"]::before{ outline:1px solid color-mix(in srgb, var(--precs-oper-marca) 60%, transparent); outline-offset:-1px; }
    .precs-sup-abas[data-pilula][data-aba="campanhas"]::before{ outline:1px solid color-mix(in srgb, var(--precs-camp-marca) 60%, transparent); outline-offset:-1px; }
    .precs-sup-abas[data-pilula][data-aba="estrategias"]::before{ outline:1px solid color-mix(in srgb, var(--precs-est-marca) 60%, transparent); outline-offset:-1px; }
    .precs-sup-abas[data-pilula][data-aba="whatsapp"]::before{ outline:1px solid color-mix(in srgb, var(--accent-green) 60%, transparent); outline-offset:-1px; }
    .precs-sup-abas[data-pilula][data-aba="meta"]::before{ outline:1px solid color-mix(in srgb, var(--precs-meta-marca) 60%, transparent); outline-offset:-1px; }
    .precs-seg button.precs-sup-aba-wa.active .precs-sup-aba-wa-ico, .precs-seg button.precs-sup-aba-meta.active .precs-sup-aba-meta-ico{ animation:precsEstIco 1.2s var(--ease-2); }
    @media (prefers-reduced-motion: reduce){
      .precs-est-cal-agulha, .precs-est-cal-col.hoje .precs-est-cal-corpo::after, .precs-est-camp::before, .precs-est-ident{ transition:none; }
      .precs-est-cal-agulha::before, .precs-seg button.precs-sup-aba-wa.active .precs-sup-aba-wa-ico, .precs-seg button.precs-sup-aba-meta.active .precs-sup-aba-meta-ico{ animation:none; }
    }

/* (02/10/2026, 7ª volta) a janela do bloco em três grupos: abre, pausa, base */
    .precs-est-modal-estado.base > b{ color:var(--text-secondary); }
    .precs-est-modal-estado:last-of-type{ border-bottom:0; }

/* (02/10/2026, 8ª volta) hora e dia pelo seletor; seletor para cima; página travada; bloco entre dias; a virada */
    .precs-est-hora-btn{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-2) var(--space-1) var(--space-3); border-radius:var(--radius-pill);
      border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-primary); font:inherit; cursor:pointer;
      transition:border-color var(--dur-1) var(--ease-1), background-color var(--dur-1) var(--ease-1); }
    .precs-est-hora-btn > svg:first-child{ color:var(--text-muted); flex:0 0 auto; }
    .precs-est-hora-btn b{ font-family:var(--font-num); font-size:var(--fs-5); font-weight:700; }
    .precs-est-hora-btn small{ color:var(--text-muted); font-size:var(--fs-3); }
    .precs-est-hora-btn:hover, .precs-est-hora-btn[aria-expanded="true"]{ border-color:var(--precs-gold); background:color-mix(in srgb, var(--precs-gold) 8%, var(--bg-primary)); }
    .precs-est-hora-btn.ro{ cursor:default; opacity:.7; }
    .precs-est-hora-btn.ro .precs-opcombo-seta{ display:none; }
    .precs-est-pick-hora{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--bg-tertiary); color:var(--text-secondary);
      font-family:var(--font-num); font-size:var(--fs-3); font-weight:700; }
    .precs-opcombo-item[aria-selected="true"] .precs-est-pick-hora{ background:color-mix(in srgb, var(--precs-gold) 25%, transparent); color:var(--precs-gold-title); }
    .precs-opcombo-pop.para-cima:popover-open{ animation-name:precsOpComboEntraCima; }
    @keyframes precsOpComboEntraCima{ from{ opacity:0; translate:0 6px; } to{ opacity:1; translate:0 0; } }
    html.precs-modal-aberta body{ overflow:hidden; }
    .precs-est-cal-col.alvo-dia .precs-est-cal-corpo{ outline:2px dashed var(--precs-gold); outline-offset:-2px; background-color:color-mix(in srgb, var(--precs-gold) 6%, var(--bg-secondary)); }
    .precs-est-cal-col.alvo-dia header b{ color:var(--precs-gold-title); }
    /* A etapa de agora: o chip da lista e o bloco de hoje acendem */
    .precs-est-cal-etapa.agora{ outline:2px solid var(--eq); outline-offset:1px; }
    .precs-est-cal-etapa.agora::after{ content:'agora'; margin-left:auto; padding:0 var(--space-2); border-radius:var(--radius-pill); background:var(--eq); color:var(--bg-primary); font-size:var(--fs-1); font-weight:700; text-transform:uppercase; }
    .precs-est-cal-bloco.agora{ outline:2px solid color-mix(in srgb, var(--eq) 85%, white); outline-offset:1px; animation:precsEstAgoraPulsa 2.4s var(--ease-1) infinite; }
    @keyframes precsEstAgoraPulsa{ 0%, 100%{ outline-color:color-mix(in srgb, var(--eq) 85%, white); } 50%{ outline-color:color-mix(in srgb, var(--eq) 25%, transparent); } }
    /* A faixa da virada: atravessa o painel com a cor da etapa, e some sozinha */
    .precs-est-virada{ inset:auto; margin:0; padding:0; border:0; background:transparent; overflow:visible; }
    .precs-est-virada:popover-open{ display:block; }
    .precs-est-virada-corpo{ position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto auto; column-gap:var(--space-5); row-gap:var(--space-1); align-items:center;
      padding:var(--space-4) var(--space-6); border-radius:var(--radius-card); color:var(--text-primary); overflow:hidden;
      background:linear-gradient(100deg, color-mix(in srgb, var(--eq) 55%, var(--bg-secondary)), var(--bg-secondary) 70%); border:1px solid color-mix(in srgb, var(--eq) 70%, var(--border-color));
      box-shadow:var(--shadow-lg); animation:precsEstViradaEntra var(--dur-3) var(--ease-2) both; cursor:pointer; }
    .precs-est-virada-corpo::before{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 20%, color-mix(in srgb, white 18%, transparent) 50%, transparent 80%); translate:-100% 0; animation:precsEstViradaVarre 1.6s var(--ease-2) var(--dur-2) both; pointer-events:none; }
    .precs-est-virada-rot{ grid-column:1; grid-row:1; font-family:var(--font-rotulo); font-size:var(--fs-2); font-weight:700; text-transform:uppercase; color:var(--text-secondary); }
    .precs-est-virada h3{ grid-column:1; grid-row:2 / span 2; margin:0; font-family:var(--font-titulo); font-size:var(--fs-9); font-weight:700; color:var(--text-primary); white-space:nowrap; }
    .precs-est-virada-linha{ grid-column:2; display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-1); font-size:var(--fs-4); }
    .precs-est-virada-linha > b{ min-width:48px; font-size:var(--fs-3); text-transform:uppercase; color:var(--precs-gold-title); }
    .precs-est-virada-linha.pausa > b{ color:var(--accent-orange); }
    .precs-est-virada-linha > span{ display:inline-flex; flex-wrap:wrap; gap:var(--space-1); align-items:center; }
    .precs-est-virada-linha .precs-est-ident{ margin-right:var(--space-0); }
    .precs-est-virada-linha em{ color:var(--text-muted); font-style:normal; }
    .precs-est-virada-fu{ padding:0 var(--space-2); border-radius:var(--radius-pill); background:var(--bg-tertiary); color:var(--text-secondary); font-size:var(--fs-3); }
    .precs-est-virada small{ grid-column:1 / -1; color:var(--text-muted); font-size:var(--fs-3); }
    .precs-est-virada.saindo .precs-est-virada-corpo{ animation:precsEstViradaSai var(--dur-3) var(--ease-1) both; }
    @keyframes precsEstViradaEntra{ from{ opacity:0; translate:0 -14px; scale:.98; } to{ opacity:1; translate:0 0; scale:1; } }
    @keyframes precsEstViradaSai{ to{ opacity:0; translate:0 -10px; } }
    @keyframes precsEstViradaVarre{ to{ translate:100% 0; } }
    @media (prefers-reduced-motion: reduce){
      .precs-est-cal-bloco.agora, .precs-est-virada-corpo, .precs-est-virada-corpo::before, .precs-est-virada.saindo .precs-est-virada-corpo, .precs-opcombo-pop.para-cima:popover-open{ animation:none; }
      .precs-est-hora-btn{ transition:none; }
    }

/* (02/10/2026, 9ª volta) a aba Etapas enxuta: a explicação numa linha com o "+ Etapa" e o Salvar ao lado; o resultado
   de cada etapa no pé do cartão; o cartão novo acende */
    .precs-est-cal-explica{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
    .precs-est-cal-explica p{ flex:1 1 320px; }
    .precs-est-cal-explica .precs-est-cron-acoes{ margin-left:auto; }
    .precs-est-cal-res{ display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-2) var(--space-3); border-radius:var(--radius-inner); background:var(--bg-primary); border:1px solid var(--border-color); }
    .precs-est-cal-res-linha{ display:grid; grid-template-columns:64px minmax(0, 1fr); gap:var(--space-2); align-items:start; font-size:var(--fs-3); }
    .precs-est-cal-res-linha > b{ font-size:var(--fs-2); text-transform:uppercase; color:var(--text-muted); padding-top:var(--space-0); }
    .precs-est-cal-res-linha.abre > b{ color:var(--precs-gold-title); }
    .precs-est-cal-res-linha.pausa > b{ color:var(--accent-orange); }
    .precs-est-cal-res-linha > div{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-0) var(--space-2); color:var(--text-secondary); }
    .precs-est-cal-res-linha > div > span{ margin-right:var(--space-1); }
    .precs-est-cal-res-linha.pausa > div > span{ text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--accent-orange) 60%, transparent); }
    .precs-est-cal-res-linha em{ color:var(--text-muted); font-style:normal; }
    .precs-est-cal-res .precs-est-ident{ min-width:18px; height:14px; font-size:var(--fs-1); }
    .precs-est-cal-etapa-cartao.nova{ animation:precsEstAssenta .55s var(--ease-2); outline:2px solid var(--eq); outline-offset:2px; }
    @media (prefers-reduced-motion: reduce){ .precs-est-cal-etapa-cartao.nova{ animation:none; } }

/* (02/10/2026, 10ª volta) o topo do Cronograma na linha de cima; o cartão novo entra deslizando */
    #sup-est-cron-topo{ flex:1 1 auto; min-width:0; }
    .precs-est-cron-topo[hidden]{ display:none; }
    .precs-est-top .precs-est-cron-acoes{ margin-left:auto; }
    .precs-est-cal-etapa-cartao.nova{ animation:precsEstCartaoEntra var(--dur-3) var(--ease-2) both; }
    @keyframes precsEstCartaoEntra{ from{ opacity:0; translate:0 16px; scale:.98; } to{ opacity:1; translate:0 0; scale:1; } }
    @media (prefers-reduced-motion: reduce){ .precs-est-cal-etapa-cartao.nova{ animation:none; } }

/* (05/10/2026, 11ª volta) O POLIMENTO DA ESTREIA: o título do nível por cima da foto apagada, nomes em duas linhas,
   o combinado numa linha, a exceção que cabe na coluna estreita, e os hovers que faltavam */
    /* A FOTO APAGADA (opacity:.55 de quem está offline) cria contexto de empilhamento e, por ordem de DOM, passava por
       cima do título fixo do nível ao rolar a lista. A foto continua `static`, como o teste exige: o que a punha na frente
       era a opacidade, não a posição. O título ganha uma camada própria, e o `isolation` da lista a confina ali: nada
       fora da coluna muda de ordem (os fios continuam por cima, o popover continua na camada de topo). */
    #sup-aba-estrategias{ --est-camada-titulo: 1; }
    .precs-est-lista{ isolation:isolate; }
    .precs-est-grupo-cab{ z-index:var(--est-camada-titulo); }
    /* O nome da campanha em até DUAS linhas: com cinco colunas, "Campanha A…" e "Campanha Auto…" eram a mesma coisa */
    .precs-est-camp-cab > b{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
    /* O bloco do calendário também, quando tem altura para a segunda linha (`curto` é escrito pelo JS). A quebra é só
       entre palavras: "Estagnada / s" era pior que "Estagnad…". */
    .precs-est-cal-bloco:not(.curto) b{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
    .precs-est-cal-bloco small{ white-space:nowrap; }
    /* "O combinado pede: pausar" numa linha só, com o botão à direita */
    .precs-est-falta.estado{ justify-content:space-between; }
    .precs-est-falta.estado > span b{ font-weight:600; color:var(--text-primary); }
    .precs-est-falta.estado .precs-est-cal-link{ margin-left:auto; }
    /* A exceção na coluna estreita (40% de um dia): o nome some e ficam a foto, o sinal e a identidade da campanha */
    .precs-est-cal-ajs{ container-type:inline-size; }
    @container (max-width: 96px){
      .precs-est-cal-aj-quem b, .precs-est-cal-aj small span:not(.precs-est-ident){ display:none; }
      .precs-est-cal-aj-quem{ justify-content:space-between; }
    }
    /* Hovers que faltavam: o card do quadro, o chip da etapa e o bloco do calendário respondem ao mouse */
    .precs-est-camp:hover{ border-color:color-mix(in srgb, var(--precs-gold) 40%, var(--border-color)); }
    .precs-est-camp.pausada:hover{ border-left-color:var(--accent-orange); }
    .precs-est-camp.pend-estado:hover{ border-color:var(--accent-orange); }
    .precs-est-cal-etapa{ transition:background-color var(--dur-2) var(--ease-1), border-color var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-2); }
    .precs-est-cal-etapa:hover{ background:color-mix(in srgb, var(--eq) 28%, transparent); border-color:color-mix(in srgb, var(--eq) 80%, transparent); transform:translateX(2px); }
    .precs-est-cal-bloco:not(.criando):hover{ outline:1px solid color-mix(in srgb, var(--eq) 70%, var(--text-primary)); outline-offset:-1px; }
    .precs-est-cal-bloco.agora:hover{ outline-width:2px; outline-offset:1px; }
    @media (prefers-reduced-motion: reduce){
      .precs-est-cal-etapa{ transition:none; }
      .precs-est-cal-etapa:hover{ transform:none; }
    }
    /* O CARD LARGO (quatro colunas numa tela de 1920) tinha duas colunas de chips e metade do card vazia: a partir de
       330 px de largura da coluna, três colunas. Quem mede é o JS (`precsEstLargura`, na pintura e no resize) e escreve
       `larga` no quadro: a container query no card deixou o teste do voo dos cards da aba Campanhas instável (3 em 6
       rodadas), pelo mesmo custo de invalidação que já derrubou o `:has()` no trilho das abas. */
    .precs-est-quadro.larga .precs-est-zona{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
    /* O DIA VAZIO diz como começar (a tela real de estreia tinha quatro colunas em branco, sem nenhuma pista); ao arrastar
       um bloco de outro dia por cima, vira "Solte aqui". Some assim que o dia ganha um bloco ou uma exceção. */
    .precs-est-cal-col.vazia .precs-est-cal-corpo::before{ content:'Arraste uma etapa para cá, ou desenhe um bloco com o mouse'; position:absolute; inset:0; display:grid; place-items:center;
      padding:var(--space-4); text-align:center; color:var(--text-muted); font-size:var(--fs-3); pointer-events:none; opacity:.75; }
    .precs-est-cal-col.vazia.alvo-dia .precs-est-cal-corpo::before{ content:'Solte aqui'; color:var(--precs-gold-title); opacity:1; }

/* (05/10/2026) Quem pôs o bloco: a foto no canto de cima à direita do bloco do calendário */
    .precs-est-cal-por{ position:absolute; top:3px; right:3px; display:inline-flex; pointer-events:auto; }
    .precs-est-cal-por .precs-sup-av{ width:18px; height:18px; font-size:var(--fs-1); outline:1px solid color-mix(in srgb, var(--eq) 70%, transparent); }
    .precs-est-cal-bloco:hover .precs-est-cal-por{ right:24px; }
    .precs-est-cal-bloco.curto .precs-est-cal-por{ display:none; }

/* (05/10/2026) BLOCO COM MAIS DE UMA ETAPA: a faixa da esquerda é dividida em uma fatia por etapa e o fundo passa de uma
   cor para a outra (`--faixa` e `--fundo` montados em precsEstCalCoresEstilo). A borda esquerda fica transparente e a
   faixa é desenhada por cima dela, como camada de fundo na caixa da borda: assim ela acompanha o raio do bloco. */
    .precs-est-cal-bloco.multi{ border-left-color:transparent;
      background:var(--faixa) left top / 4px 100% no-repeat border-box, var(--fundo) border-box; }
    .precs-est-cal-bloco.multi.agora{ outline-color:color-mix(in srgb, var(--eq2) 85%, white); }

/* (05/10/2026) EXCEÇÕES LADO A LADO: as que se sobrepõem dividem a faixa das exceções em colunas (`--l` de `--n`). Na
   coluna estreita fica o rosto, o sinal e o selo da campanha; o nome vai na dica. */
    .precs-est-cal-aj.lado{ left:calc(2px + (100% - 5px) * var(--l, 0) / var(--n, 1)); right:auto; width:calc((100% - 5px) / var(--n, 1) - 2px); padding-inline:var(--space-0); }
    .precs-est-cal-aj.lado .precs-est-cal-aj-quem{ flex-direction:column; align-items:center; justify-content:flex-start; flex:1 1 auto; min-height:0; }
    .precs-est-cal-aj.lado .precs-est-cal-aj-quem b{ display:block; flex:0 1 auto; min-height:0; writing-mode:vertical-rl; transform:rotate(180deg);
      font-size:var(--fs-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .precs-est-cal-aj.lado small{ justify-content:center; }
    .precs-est-cal-aj.lado small > span:not(.precs-est-ident){ display:none; }
/* A campanha que só a exceção abre, no "Agora na 3C"; com gente a mais logada nela, o aviso fica em vermelho. */
    .precs-est-agora-excl{ margin-top:var(--space-2); padding:var(--space-1) var(--space-2); border-radius:var(--radius-inner);
      border:1px solid color-mix(in srgb, var(--precs-gold) 45%, var(--border-color)); background:color-mix(in srgb, var(--precs-gold) 8%, transparent); }
    .precs-est-agora-excl p{ margin:0; font-size:var(--fs-2); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); }
    .precs-est-agora-excl small{ color:var(--text-secondary); }
    .precs-est-agora-quem{ font-weight:700; color:var(--precs-gold-title); }
    .precs-est-agora-excl.alerta{ border-color:color-mix(in srgb, var(--accent-red) 55%, var(--border-color)); }
    .precs-est-agora-excl-eq{ margin-top:var(--space-1) !important; color:var(--text-secondary); }
    .precs-est-agora-excl-aviso{ margin-top:var(--space-1) !important; color:var(--accent-red-text); }

/* (05/10/2026) A exceção em várias campanhas: o seletor soma, e cada campanha escolhida vira etiqueta com ✕. */
    .precs-est-exc-cbox{ display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
    .precs-est-exc-camps{ display:flex; flex-wrap:wrap; gap:var(--space-1); }
    .precs-est-exc-camp{ display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-0) var(--space-1) var(--space-0) var(--space-2);
      border-radius:var(--radius-pill); border:1px solid var(--border-color); background:var(--bg-tertiary); font-size:var(--fs-2); }
    .precs-est-exc-camp b{ font-weight:600; white-space:nowrap; }
    .precs-est-exc-camp button{ border:0; background:transparent; color:var(--text-secondary); cursor:pointer; padding:0 var(--space-1); border-radius:var(--radius-pill); }
    .precs-est-exc-camp button:hover{ color:var(--accent-red-text); background:color-mix(in srgb, var(--accent-red) 14%, transparent); }

/* (06/10/2026) A caixa da campanha da exceção ocupa o lugar do antigo botão; dentro dela o botão NÃO cresce (empilhada na
   vertical, a base de 240px do botão virava ALTURA, e o botão de cantos de pílula virava uma bola). */
    .precs-est-exc-cbox{ flex:1 1 240px; }
    .precs-est-exc-cbox > .precs-est-pick-btn{ flex:0 0 auto; width:100%; }
    .precs-est-exc-camps[hidden]{ display:none; }

/* (06/10/2026) O CARTÃO DE GRUPO das exceções sobrepostas: a contagem, os rostos em grade e os selos das campanhas. */
    .precs-est-cal-aj.grupo{ cursor:pointer; gap:var(--space-1); padding:var(--space-1); }
    .precs-est-cal-grupo-n{ font-size:var(--fs-1); color:var(--text-secondary); white-space:nowrap; }
    .precs-est-cal-grupo-n b{ font-size:var(--fs-3); color:var(--precs-gold-title); margin-right:var(--space-0); }
    .precs-est-cal-grupo-rostos{ display:flex; flex-wrap:wrap; gap:var(--space-0); min-height:0; overflow:hidden; }
    .precs-est-cal-grupo-rostos{ padding-left:var(--space-1); flex-wrap:nowrap; align-items:center; flex:0 0 auto; }
    .precs-est-cal-grupo-mais{ margin-left:var(--space-0); font-size:var(--fs-1); font-weight:700; color:var(--text-secondary); white-space:nowrap; }
    .precs-est-cal-aj.grupo .precs-est-cal-grupo-rosto .precs-sup-av{ width:20px; height:20px; flex:0 0 20px; font-size:var(--fs-1);
      margin-left:calc(var(--space-1) * -1); outline:2px solid var(--bg-secondary); }
    .precs-est-cal-grupo-rosto.sai .precs-sup-av{ outline:2px solid var(--accent-red); outline-offset:-1px; }
    .precs-est-cal-aj.grupo small{ display:flex; flex-wrap:wrap; gap:var(--space-0); }
    .precs-est-cal-grupo-h{ margin-top:auto; font-size:var(--fs-1); color:var(--text-muted); white-space:nowrap; }
/* As etiquetas das campanhas escolhidas não esticam a janela: até três linhas, e rolam dali para baixo. */
    .precs-est-exc-camps{ max-height:6.4em; overflow-y:auto; align-content:flex-start; }