/* ══════════════════════════════════════════════════════════════════════════
   ui-v4-app.css — a ÚNICA folha do visual novo escrita à mão.

   Todo o resto (ui-v4.css, ui-v4-shell.css, ui-v4-<tela>.css) é GERADO por
   tools/portar-v2.py a partir dos mockups e não deve ser editado. Aqui mora só
   o que o mockup não tinha como saber: que ele passou a viver DENTRO de um app
   que já tem esqueleto, barras flutuantes e menu de celular próprios.

   Nada aqui muda o visual antigo: tudo está preso a `.v2root` ou a `body.v2on`,
   e nenhuma das duas existe com a chave desligada.
   ══════════════════════════════════════════════════════════════════════════ */

/* O mockup era uma página inteira (`html,body{height:100%;overflow:hidden}`, que
   o gerador trouxe para `.v2root`). Dentro do app, `.v2root` é filho de um div de
   altura automática — `height:100%` viraria `auto` e o `overflow:hidden` cortaria
   a tela. Fixar no viewport devolve exatamente a caixa que o mockup tinha. */
.v2root{position:fixed;inset:0;height:auto}

/* Selo de créditos e "Reportar problemas" flutuavam sobre o canto da tela. No
   desenho novo eles moram no topo, dentro da coluna — dois lugares para a mesma
   informação seria ruído, e o flutuante ainda cobriria o CTA da faixa de marca. */
body.v2on #top-badges{display:none!important}
/* O hambúrguer antigo abre a lateral ANTIGA (.app.navopen). A lateral nova tem o
   próprio, com o recorte certo para a coluna de 268px. */
body.v2on>.hamb{display:none!important}

/* ── LATERAL NO CELULAR ────────────────────────────────────────────────────
   O mockup some com a lateral abaixo de 900px e não põe nada no lugar: numa
   página de demonstração ninguém precisa navegar. No app, some a navegação
   inteira. Aqui ela vira gaveta. */
.v2-hamb{display:none;position:fixed;top:12px;left:12px;z-index:40;width:40px;height:40px;
  border-radius:12px;border:1px solid var(--line-2,rgba(255,255,255,.13));
  background:rgba(14,17,23,.86);backdrop-filter:blur(10px);color:#F4F6FA;
  align-items:center;justify-content:center;cursor:pointer;padding:0}
.v2-hamb svg{width:19px;height:19px}
.v2-scrim{position:fixed;inset:0;z-index:29;background:rgba(4,6,9,.62);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease,ease)}
@media (max-width:900px){
  .v2-hamb{display:flex}
  /* o `display:none` do mockup vem de `.v2root .v2-side` (0,2,0); para revertê-lo
     sem !important a regra da gaveta precisa de peso maior — daí `.v2root.navopen`. */
  .v2root.navopen .v2-side{display:flex;position:fixed;top:0;bottom:0;left:0;width:268px;z-index:30;
    box-shadow:0 0 60px rgba(0,0,0,.6)}
  .v2root.navopen .v2-scrim{opacity:1;pointer-events:auto}
  .v2root .v2-top{padding-left:62px}     /* abre espaço para o botão da gaveta */
}

/* ── FAIXAS DO APP DENTRO DA COLUNA NOVA ───────────────────────────────────
   `.eban` (confirme o e-mail) e `.cfgbar` (configure a marca) são componentes do
   app, não do mockup. Continuam com o estilo próprio; só precisam da margem da
   coluna, porque o `.v2-wrap` já tem o respiro lateral e elas nasceram para uma
   coluna sem padding. A reserva à direita que `_cfgbarPad()` calculava era para
   os badges flutuantes — que aqui não existem mais. */
.v2root .eban,
.v2root .cfgbar{margin:0 0 16px;padding-right:16px!important;position:static;border-radius:14px}

/* ── O QUE O MOCKUP NÃO TINHA COMO TER ─────────────────────────────────────
   Um mockup mostra o caso cheio e bem-sucedido. O app precisa também do caso
   vazio, do que ainda está carregando e do que falhou. */

/* Bloco sem dado (marca nova, tendência ainda não gerada, erro de rede). Sem
   isto o Dashboard de quem acabou de entrar abre com três buracos. */
.v2root .v2-vazio{padding:22px 4px;text-align:center;color:var(--ink-3);font-size:13.5px}
.v2root .v2-vazio a{color:var(--lime);font-weight:600;text-decoration:none}
.v2root .v2-vazio a:hover{text-decoration:underline}

/* Marca sem logo: a inicial ocupa o mesmo lugar do <img> do desenho, com as
   mesmas medidas — trocar o elemento não pode mudar o alinhamento da linha. */
.v2root .v2-ini{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--raised);border:1px solid var(--line-2);color:var(--ink-2);
  font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:-.02em}
.v2root .mc-l .v2-ini{width:38px;height:38px;border-radius:11px;font-size:15px}

/* O filete de uso do selo de créditos era 60% fixo no desenho. Aqui ele é o
   saldo real; a variável entra por style inline em v2Cred(). */
.v2root .v2-pill.v2-cred::after{width:var(--cred,0%)}

/* Contador do sino. O desenho não previa avisos — o app tem. */
.v2root .v2-pill{position:relative}
.v2root .v2-avn{position:absolute;top:5px;right:5px;min-width:15px;height:15px;padding:0 4px;
  border-radius:8px;background:var(--purple);color:#fff;font-size:9.5px;font-weight:800;
  display:grid;place-items:center;font-style:normal;line-height:1}

/* Modais e overlays do app (fila, estúdio, checkout) são renderizados no <body>,
   fora do .v2root, e por isso mantêm o visual antigo de propósito: trocar os dois
   ao mesmo tempo tornaria impossível saber de onde veio um bug. */

/* Faixas do app (confirme o e-mail / configure a marca) nas telas que ocupam a
   largura toda: sem a coluna do Dashboard elas precisam do respiro lateral que
   o `.v2-wrap` dava. Mesma medida do cabeçalho de cada tela. */
.v2root .v2-faixas:empty{display:none}
.v2root .v2-faixas{padding:16px 26px 0}
@media (max-width:900px){ .v2root .v2-faixas{padding:14px 16px 0} }

/* Selo do template não pode quebrar em duas linhas ("Mais / popular"). No mockup
   o card é mais largo e isso nunca aparecia; aqui é garantia, não sorte. */
.v2root .v2-tp-badge{white-space:nowrap}

/* Onde a view assíncrona injeta o conteúdo depois que a API responde.
   `display:contents` faz os filhos deste div virarem filhos DIRETOS do
   `.v2-main`. Sem isso o `.in-rolo` / `.st-rolo` — que é quem tem
   `flex:1;overflow:auto` — fica um nível abaixo do flex e não vira o rolador:
   o cabeçalho da tela rola junto com o conteúdo, em vez de ficar fixo como no
   desenho. O div continua existindo para o getElementById da view. */
.v2root .v2-slot{display:contents}

/* O selo "Suas redes" é componente do app ANTIGO reusado no hero novo, e traz do
   app.css um `margin-bottom:26px` que lá fazia sentido (era o último item de uma
   pilha). Aqui ele fica logo acima do título e o desenho pede 20px de respiro —
   medido no mockup, não estimado. Sem isto o vão era de 46px. */
.v2root .connect-pill{margin-bottom:0}

/* ── ESPECIALISTAS ─────────────────────────────────────────────────────────
   O mockup escreveu o subtítulo do card ("Diagnóstico, posicionamento e oferta");
   aqui ele vem do registro do agente e pode ser mais longo. Duas linhas e corta:
   um card que cresce empurra a lista de conversas para fora da tela. */
.v2root .v2-es-card .v2-t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Apagar conversa. O desenho não previu — numa demonstração nada precisa sumir. */
.v2root .v2-es-conv{position:relative;padding-right:30px}
.v2root .v2-es-del{position:absolute;top:9px;right:6px;width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;color:var(--ink-4);opacity:0;transition:.16s}
.v2root .v2-es-conv:hover .v2-es-del{opacity:1}
.v2root .v2-es-del:hover{color:var(--ink);background:rgba(255,255,255,.07)}

/* O que ainda não está no Cérebro. As etiquetas cinzas sozinhas não dizem o que
   fazer; esta linha diz, e leva para o lugar que resolve. */
.v2root .v2-es-falta{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.5;color:var(--ink-4)}
.v2root .v2-es-falta a{color:var(--lime);font-weight:600;text-decoration:none}
.v2root .v2-es-falta a:hover{text-decoration:underline}

/* A barra de ações da resposta só aparece no hover — em tela de toque não existe
   hover, e copiar a resposta ficaria inalcançável no celular. */
@media (hover:none){ .v2root .v2-es-acoes{opacity:1} }

/* Miolo da resposta. Existe porque o streaming reescreve este nó a cada pedaço:
   se o alvo fosse a `.v2-es-txt`, o cabeçalho "quem está falando" e as ações
   piscariam a cada token. Sem estilo próprio — só um lugar para o texto morar. */
.v2root .v2-es-md{min-width:0}

/* LISTA NUMERADA. O mockup só desenhou lista com marcador, então o <ol> saía com o
   número do navegador MAIS o pontinho do `li::before` — dois marcadores no mesmo
   item. Aqui o número é o marcador e o ponto sai de cena.

   O `[data-tela]` não é enfeite: a regra do mockup é
   `.v2root[data-tela="especialistas"] .v2-es-txt li::before` (3 classes) e venceria
   um `.v2root .v2-es-txt ol>li::before` (2 classes) — o `content:''` dela ganharia e
   o ponto continuaria aparecendo. Regra escopada só vence com peso igual ou maior. */
.v2root[data-tela="especialistas"] .v2-es-txt ol{margin:0 0 14px;padding-left:0;list-style:none;counter-reset:v2li}
.v2root[data-tela="especialistas"] .v2-es-txt ol>li{counter-increment:v2li;padding-left:26px}
.v2root[data-tela="especialistas"] .v2-es-txt ol>li::before{content:counter(v2li) '.';top:0;left:0;width:auto;height:auto;
  border-radius:0;background:none;opacity:1;color:var(--lime);font-weight:700;font-size:13px}

/* O negrito do markdown sai como <b> (`espMd`), e o mockup só pintou <strong>. */
.v2root .v2-es-txt p b,.v2root .v2-es-txt li b{color:var(--ink);font-weight:700}
/* o subtítulo fecha o parágrafo corrente e abre outro; o vazio do meio não vale margem */
.v2root .v2-es-txt p:empty{display:none}
.v2root .v2-es-env:disabled{opacity:.5;pointer-events:none}
/* três pontinhos enquanto a resposta não começa (o indicador é o mesmo do visual antigo) */
.v2root .esp-typing{display:inline-flex;gap:4px;align-items:center;height:22px}
.v2root .esp-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-4);animation:v2-esptyp 1.1s infinite}
.v2root .esp-typing span:nth-child(2){animation-delay:.15s}
.v2root .esp-typing span:nth-child(3){animation-delay:.3s}
@keyframes v2-esptyp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Forma de pagamento: as duas linhas convivem, o selo diz qual está valendo.
   O botão fica à direita do selo, não no lugar dele — quem está no cartão precisa
   ver ao mesmo tempo que é o atual E que dá para trocar. */
.v2root[data-tela="config"] .v2-cf-l .v2-cf-tag+.v2-btn-g{margin-left:10px}
.v2root[data-tela="config"] .v2-cf-l .v2-btn-g{flex:none;padding:7px 14px;font-size:12.5px}

/* ── EDITAR CONCORRENTES ───────────────────────────────────────────────────
   Cada concorrente é um BLOCO fechado. Antes eram três caixas soltas sob um rótulo
   "CONCORRENTE 1" — nenhuma dizia qual campo era, e o botão de remover pairava
   entre um concorrente e o seguinte, o que deixava fácil apagar o errado.
   Agora o nome vai no cabeçalho do bloco e o remover ao lado dele: fica claro o
   que exatamente vai embora. */
.v2root[data-tela="estrategia"] .v2-st-bloco{border:1px solid var(--line);border-radius:14px;padding:13px 14px 14px;
  background:var(--sunken);margin-bottom:12px}
.v2root[data-tela="estrategia"] .v2-st-bh{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.v2root[data-tela="estrategia"] .v2-st-bh b{font-family:var(--head);font-size:14px;font-weight:700;color:var(--ink);
  letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2root[data-tela="estrategia"] .v2-st-rm{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;
  color:var(--ink-4);border:1px solid var(--line);background:var(--raised);transition:.15s}
.v2root[data-tela="estrategia"] .v2-st-rm:hover{color:#FB6F8D;border-color:rgba(251,111,141,.45);background:rgba(251,111,141,.1)}
/* o rótulo de campo dentro do bloco não é o cabeçalho da seção: menor e sem caixa alta larga */
.v2root[data-tela="estrategia"] .v2-st-bloco .v2-st-lbl{margin-bottom:5px}
.v2root[data-tela="estrategia"] .v2-st-bloco .v2-st-lbl span{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-4)}
.v2root[data-tela="estrategia"] .v2-st-bloco .v2-st-lbl.v2-mt{margin-top:11px}

/* ── PUBLICAÇÕES: cards da mesma linha alinhados ───────────────────────────
   No mockup TODO título tinha duas linhas, então nada nunca desalinhava. No app o
   título é o que a peça tem: "Novo card" ocupa uma linha e sobe o selo, a hora e
   as quatro ações junto — a linha inteira fica torta.

   Duas travas, porque são dois problemas diferentes:
   1. O título reserva DUAS linhas mesmo quando usa uma. Isso alinha o selo de
      estado e a hora, que ficam logo abaixo dele.
   2. As ações grudam no fundo do card. O grid já deixa os cards da linha com a
      mesma altura; sem `margin-top:auto` essa altura sobrava como espaço morto
      embaixo e os botões continuavam em alturas diferentes se a capa variasse.
   O `[data-tela]` é obrigatório: sem ele estas regras perdem em peso para as do
   mockup e nada muda. */
.v2root[data-tela="publicacoes"] .v2-pb-card{display:flex;flex-direction:column}
.v2root[data-tela="publicacoes"] .v2-pb-meta{flex:1;display:flex;flex-direction:column}
.v2root[data-tela="publicacoes"] .v2-pb-meta b{min-height:2.76em}   /* 2 × line-height 1.38 */
.v2root[data-tela="publicacoes"] .v2-pb-acoes{margin-top:auto;padding-top:11px}

/* ── MODAIS: o que o mockup não desenhou ───────────────────────────────────
   O modal de reportar do desenho tem a área de soltar print, mas nenhum print
   dentro dela — numa demonstração ninguém anexa nada. Aqui anexa (até 3). */
.v2root .v2-rp-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.v2root .v2-rp-thumbs:empty{display:none}
.v2root .v2-rp-th{position:relative;width:74px;height:74px;border-radius:11px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--sunken)}
.v2root .v2-rp-th img{width:100%;height:100%;object-fit:cover;display:block}
.v2root .v2-rp-th button{position:absolute;top:4px;right:4px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;background:rgba(8,10,14,.88);border:1px solid var(--line-2);color:var(--ink-2)}
.v2root .v2-rp-th button:hover{color:#FB6F8D;border-color:rgba(251,111,141,.5)}
.v2root .v2-rp-drop.on{border-color:rgba(198,255,0,.5);color:var(--ink)}

/* ── CONFIGURAÇÕES ─────────────────────────────────────────────────────────
   O mockup desenhou a galeria só cheia e sem remover nada: numa demonstração o
   logo certo já está lá. No app dá para apagar. */
.v2root[data-tela="config"] .v2-cf-lg .v2-x{position:absolute;top:5px;right:5px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;background:rgba(10,12,16,.86);border:1px solid var(--line-2);
  color:var(--ink-3);opacity:0;transition:.15s}
.v2root[data-tela="config"] .v2-cf-lg:hover .v2-x{opacity:1}
.v2root[data-tela="config"] .v2-cf-lg .v2-x:hover{color:#FB6F8D;border-color:rgba(251,111,141,.5)}
@media (hover:none){.v2root[data-tela="config"] .v2-cf-lg .v2-x{opacity:1}}

/* O seletor de cor nativo mora POR BAIXO da bolinha, do tamanho dela: clicar na cor
   abre o seletor. Sem isso a bolinha do desenho seria só enfeite — bonita e morta. */
.v2root[data-tela="config"] .v2-cf-cor input[type=color]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;cursor:pointer;background:none}

/* A caixa de aviso do modal de cartão nasce VAZIA — ela só ganha texto quando o
   pagamento dá erro ou é confirmado. No mockup ela sempre tinha conteúdo, então a
   borda e o fundo dela nunca apareceram sozinhos; aqui aparecia como uma caixa
   verde fantasma embaixo do CVV, logo antes de a pessoa digitar o cartão. */
.v2root[data-tela="config"] .v2-pg-nota:empty{display:none}

/* Abas de ciclo da grade de planos (mensal / trimestral / anual). */
.v2root[data-tela="config"] .v2-cf-pp{display:flex;gap:7px;margin:0 0 14px;flex-wrap:wrap}
.v2root[data-tela="config"] .v2-cf-pp button{padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--ink-3);border:1px solid var(--line);background:var(--raised);transition:.18s}
.v2root[data-tela="config"] .v2-cf-pp button.on{color:#07080C;background:var(--sign);border-color:transparent}

/* ── O CONSELHO ────────────────────────────────────────────────────────────
   Tese longa: o mockup escreveu uma de linha e meia, o modelo às vezes devolve um
   parágrafo inteiro. A 31px isso vira dez linhas e empurra o resto do documento
   para fora da primeira tela. */
.v2root[data-tela="conselho"] .v2-cn-tese.v2-longa{font-size:22px;line-height:1.32;letter-spacing:-.026em}
@media (max-width:760px){.v2root[data-tela="conselho"] .v2-cn-tese.v2-longa{font-size:19px}}

/* ESTADOS DA PEÇA que o mockup não tinha. Ele só desenhou "pronto", porque numa
   demonstração tudo dá certo. No app a peça também fica publicada, agendada, em
   ajuste ou falha — e um selo sem cor própria faria os quatro lerem como iguais.
   A cor segue a régua do resto do produto: lima = feito, roxo = programado,
   âmbar = exige ação sua, rosa = deu errado. */
.v2root .v2-pb-est.v2-publicado{color:#A855F7;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.26)}
.v2root .v2-pb-est.v2-agendado {color:#4DA3FF;background:rgba(77,163,255,.12);border:1px solid rgba(77,163,255,.26)}
.v2root .v2-pb-est.v2-ajuste   {color:#FFB020;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.26)}
.v2root .v2-pb-est.v2-falha    {color:#FB6F8D;background:rgba(251,111,141,.12);border:1px solid rgba(251,111,141,.28)}

/* ── AUDITORIA 08/08/2026 ─────────────────────────────────────────────────── */

/* CADEIRAS DO CONSELHO: eram <button> com cursor:pointer e três regras de :hover, e
   clicar não fazia nada — o card só informa. Viraram <div>; aqui some o resto do
   disfarce de botão. */
.v2root[data-tela="conselho"] .v2-cn-cad{cursor:default}
.v2root[data-tela="conselho"] .v2-cn-cad:hover{transform:none}

/* PUBLICAÇÃO SEM IMAGEM RENDERIZADA: o card tinha 326px de vazio. */
.v2root[data-tela="publicacoes"] .v2-pb-capa.v2-pb-semcapa{
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 10px,transparent 10px 20px),
    var(--sunken)}
.v2root[data-tela="publicacoes"] .v2-pb-nada{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:22px;text-align:center;
  color:var(--ink-4);max-width:230px}
.v2root[data-tela="publicacoes"] .v2-pb-nada svg{width:26px;height:26px;opacity:.55}
.v2root[data-tela="publicacoes"] .v2-pb-nada b{font-family:var(--head);font-size:13.5px;
  font-weight:700;letter-spacing:-.015em;color:var(--ink-3)}
.v2root[data-tela="publicacoes"] .v2-pb-nada i{font-style:normal;font-size:11.5px;line-height:1.5}

/* PRÉVIA AO VIVO DENTRO DA GRADE (.bp-canvas): é uma superfície CLARA (#f5f7f8)
   renderizada dentro do .v2root, onde `--ink` vale quase BRANCO (#F4F6FA). Ela herdava
   esse branco e virava texto branco sobre card branco: 9 publicações apareciam como
   retângulo vazio. Medido: fundo rgb(245,247,248), texto rgb(244,246,250).
   Aqui o token volta ao valor do app (quase preto) só dentro da prévia. */
.v2root .bp-canvas{--ink:#0c0e14;--txt:#0c0e14;color:#0c0e14}

/* A seta "role para ver sua operação" nasceu `pointer-events:none` no mockup — lá ela é só
   um aviso. No app ela tem seta pra baixo, fica centralizada sob o composer e pisca: todo
   mundo clica. Aqui ela aceita o clique e rola de verdade. */
.v2root[data-tela="dashboard"] button.v2-desce{pointer-events:auto;cursor:pointer;
  background:none;border:0;z-index:4}

/* ANEL VERDE DENTRO DO COMPOSER: o invólucro `.v2-comp` já sinaliza foco (borda roxa +
   halo). O textarea por dentro ainda pegava o `textarea:focus` do app.css — borda
   `--indigo` e halo `rgba(var(--p-rgb))`, que é o lima da marca — e desenhava um segundo
   retângulo verde-oliva por dentro da caixa. Um foco só, no invólucro. */
.v2root .v2-comp textarea:focus,
.v2root .v2-comp textarea:focus-visible{outline:none;box-shadow:none;border-color:transparent}