/* Sonar — claro editorial.
 *
 * Os tokens ficam TODOS em :root e sao redefinidos para o tema escuro. Cor
 * solta no componente e' o que faz um tema novo virar caca ao hex perdido.
 *
 * O tema claro e' o padrao de proposito: a sabatina e' a primeira tela que um
 * dono de pequeno negocio ve, e painel escuro denso intimida quem nao e'
 * operador tecnico. O escuro existe para quem prefere, nao como identidade.
 */

:root {
  /* LIQUID GLASS (22/10/2026). `--fundo` deixou de ser o branco do cartao e
   * virou a SUPERFICIE DE VIDRO: translucida, sobre a aurora da marca. Como
   * todo cartao do produto ja' pintava `background: var(--fundo)`, as 34
   * superficies viraram vidro de uma vez, sem caca a seletor. O desfoque
   * (`backdrop-filter`) nao vai no token: ele pesa, e so' as superficies de
   * cima o recebem — ver a secao "liquid glass" no fim do arquivo.
   *
   * `--fundo-2` e `--fundo-3` sao POCOS dentro do vidro, e por isso sao
   * escurecimentos translucidos, nao cinzas solidos: cinza chapado dentro de
   * vidro parece buraco na tela. A pagina em si e' `--pagina`. */
  --pagina: #f3f1ee;
  --fundo: rgb(255 255 255 / .64);
  --fundo-2: rgb(24 20 40 / .035);
  --fundo-3: rgb(24 20 40 / .07);
  --fundo-solido: #ffffff;
  --borda: rgb(24 20 40 / .1);
  --borda-forte: rgb(24 20 40 / .2);

  --vidro: rgb(255 255 255 / .5);
  --vidro-forte: rgb(255 255 255 / .74);
  --vidro-borda: rgb(255 255 255 / .78);
  --vidro-sombra: 0 1px 2px rgb(20 16 40 / .04), 0 12px 36px rgb(20 16 40 / .08);
  --brilho: rgb(255 255 255 / .9);
  --desfoque: blur(22px) saturate(1.7);
  /* O AZUL DO SONAR FICA FIXO EM UM LUGAR: o pulso do logo. O acento
   * passou a ser da marca; a assinatura do produto, nao. */
  --sonar: #2f6bff;

  --texto: #17171a;
  --texto-2: #55555f;
  --texto-3: #86868f;

  --acento: #2f6bff;
  --acento-fundo: #eef3ff;
  --acento-borda: #c3d4ff;
  /* O que se escreve EM CIMA do acento. No tema escuro o acento clareia,
   * e branco sobre #7aa2ff da' 2,2:1 — abaixo do minimo legivel. */
  --sobre-acento: #ffffff;
  /* O instrumento e' uma superficie com identidade, nao um bloco escuro
   * fixo: escuro dentro de tema claro parecia defeito de tema, e com
   * razao. Ele se destaca por TINTA e profundidade, seguindo o tema. */
  --instrumento: linear-gradient(165deg, #f4f7ff 0%, #ffffff 58%);
  --instrumento-borda: #d7e2ff;
  --instrumento-texto: #17171a;
  --instrumento-fraco: #6b7489;
  --instrumento-regua: #e3eaff;
  --instrumento-trilho: #e3eaff;
  --malha: rgba(23, 23, 26, .07);
  --halo: rgba(47, 107, 255, .07);

  --ok: #0e8a5f;
  --ok-fundo: #e8f6f0;
  --alerta: #c2410c;
  --alerta-fundo: #fdf0e8;

  --raio: 12px;
  --raio-g: 18px;
  --sombra: 0 1px 2px rgba(20, 20, 30, .05), 0 8px 24px rgba(20, 20, 30, .06);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pagina: #0f0e12;
    --fundo: rgb(30 30 38 / .56);
    --fundo-2: rgb(255 255 255 / .035);
    --fundo-3: rgb(255 255 255 / .07);
    --fundo-solido: #18181d;
    --borda: rgb(255 255 255 / .09);
    --borda-forte: rgb(255 255 255 / .18);
    --vidro: rgb(30 28 38 / .46);
    --vidro-forte: rgb(36 34 46 / .7);
    --vidro-borda: rgb(255 255 255 / .12);
    --vidro-sombra: 0 1px 2px rgb(0 0 0 / .3), 0 12px 40px rgb(0 0 0 / .4);
    --brilho: rgb(255 255 255 / .2);
    --texto: #ecedef;
    --texto-2: #a8abb3;
    --texto-3: #7c8089;
    --acento: #7aa2ff;
    --acento-fundo: #1b2235;
    --acento-borda: #2e3c5e;
    --sobre-acento: #10131a;
    --instrumento: linear-gradient(165deg, #1b2130 0%, #15181f 58%);
    --instrumento-borda: #2c3650;
    --instrumento-texto: #eef0f4;
    --instrumento-fraco: rgba(238, 240, 244, .5);
    --instrumento-regua: rgba(255, 255, 255, .09);
    --instrumento-trilho: rgba(255, 255, 255, .08);
    --malha: rgba(255, 255, 255, .055);
    --halo: rgba(122, 162, 255, .08);
    --ok: #3cc08d;
    --ok-fundo: #15251f;
    --alerta: #f08a5d;
    --alerta-fundo: #2a1d16;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --pagina: #0f0e12;
  --fundo: rgb(30 30 38 / .56);
  --fundo-2: rgb(255 255 255 / .035);
  --fundo-3: rgb(255 255 255 / .07);
  --fundo-solido: #18181d;
  --borda: rgb(255 255 255 / .09);
  --borda-forte: rgb(255 255 255 / .18);
  --vidro: rgb(30 28 38 / .46);
  --vidro-forte: rgb(36 34 46 / .7);
  --vidro-borda: rgb(255 255 255 / .12);
  --vidro-sombra: 0 1px 2px rgb(0 0 0 / .3), 0 12px 40px rgb(0 0 0 / .4);
  --brilho: rgb(255 255 255 / .2);
  --texto: #ecedef;
  --texto-2: #a8abb3;
  --texto-3: #7c8089;
  --acento: #7aa2ff;
  --acento-fundo: #1b2235;
  --acento-borda: #2e3c5e;
  --sobre-acento: #10131a;
  --instrumento: linear-gradient(165deg, #1b2130 0%, #15181f 58%);
  --instrumento-borda: #2c3650;
  --instrumento-texto: #eef0f4;
  --instrumento-fraco: rgba(238, 240, 244, .5);
  --instrumento-regua: rgba(255, 255, 255, .09);
  --instrumento-trilho: rgba(255, 255, 255, .08);
  --malha: rgba(255, 255, 255, .055);
  --halo: rgba(122, 162, 255, .08);
  --ok: #3cc08d;
  --ok-fundo: #15251f;
  --alerta: #f08a5d;
  --alerta-fundo: #2a1d16;
}

* { box-sizing: border-box; }

/* O FUNDO E' A AURORA DA MARCA. O vidro nao tem cor propria — ele mostra,
 * desfocado, o que esta' atras —, entao e' aqui que a identidade do cliente
 * entra na tela inteira: tres manchas largas, a principal no matiz da marca
 * e duas vizinhas, sobre uma base quente. A malha fina continua por cima,
 * como textura. Fica em `body` para valer tambem na sabatina.
 *
 * GRADIENTE, E NAO TRES DIVS COM `filter: blur`. O desfoque de 60px em tela
 * cheia custava quadro no celular; o gradiente radial ja' nasce macio e
 * custa zero. Sem animacao pelo mesmo motivo: o fundo atras de vidro
 * desfocado e' recomposto a cada quadro em que ele se move. */
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--pagina);
  background-image:
    radial-gradient(circle at 1px 1px, var(--malha) 1px, transparent 0),
    radial-gradient(ellipse 58% 62% at 6% 0%, var(--aurora-1), transparent 70%),
    radial-gradient(ellipse 46% 54% at 100% 14%, var(--aurora-2), transparent 70%),
    radial-gradient(ellipse 60% 52% at 52% 108%, var(--aurora-3), transparent 72%);
  background-size: 24px 24px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, fixed, fixed, fixed;
  color: var(--texto);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); }

/* ── a cor da marca do cliente ───────────────────────────────────────────── *
 *
 * `--marca-l` e `--marca-d` chegam no atributo `style` do <body>, vindos de
 * apps/marca/tema.py. Aqui so' se escolhe qual dos dois vale — a conta de
 * contraste ja' foi feita em Python, antes da primeira pintura, porque
 * calcular isso em JavaScript faria a cor chegar depois da tela.
 *
 * O MAPEAMENTO FICA EM `body`, E NAO EM `:root`. Custom property herda para
 * baixo, nunca para cima: uma regra em `:root` lendo `var(--marca-l)` nao
 * enxergaria um valor declarado no <body>. Foi exatamente assim que a
 * primeira versao disto ficou sem cor nenhuma.
 *
 * O FALLBACK E' O ACENTO DO SONAR. Marca sem logo nao e' erro — e' a maioria
 * no primeiro dia —, e nesse caso a tela fica exatamente como era. */
body {
  --marca: var(--marca-l, var(--acento));
  --marca-texto: var(--marca-texto-l, var(--acento));
  --marca-rgb: var(--marca-rgb-l, 47 107 255);
  --marca-2: var(--marca-2-l, var(--acento));
  --sobre-marca: var(--sobre-marca-l, #fff);
  /* As lavagens saem todas do mesmo triplo. Um token por opacidade viraria
   * oito tokens que podem sair de sincronia; assim ha' uma cor so'. */
  --marca-vefu: rgb(var(--marca-rgb) / .07);
  --marca-borda: rgb(var(--marca-rgb) / .28);
  /* O ACENTO E' DA MARCA (dose "dosado"), ja' derivado para contraste em
   * apps/marca/tema.py. Os fallbacks sao o azul do Sonar e a aurora neutra
   * — o que vale para marca sem logo. */
  --acento: var(--acento-l, #2f6bff);
  --acento-rgb: var(--acento-rgb-l, 47 107 255);
  --acento-fundo: var(--acento-fundo-l, #eef3ff);
  --acento-borda: var(--acento-borda-l, #c3d4ff);
  --tinta: var(--tinta-l, rgb(207 222 253 / 0));
  --aurora-1: var(--aurora-1-l, #c0d5fe);
  --aurora-2: var(--aurora-2-l, #e6d5ff);
  --aurora-3: var(--aurora-3-l, #b3dcec);
  --instrumento: linear-gradient(165deg, rgb(var(--acento-rgb) / .09) 0%, rgb(255 255 255 / .5) 58%);
  --instrumento-borda: var(--vidro-borda);
  --instrumento-regua: rgb(var(--acento-rgb) / .12);
  --instrumento-trilho: rgb(var(--acento-rgb) / .12);
}
:root[data-theme="dark"] body {
  --marca: var(--marca-d, var(--acento));
  --marca-texto: var(--marca-texto-d, var(--acento));
  --marca-rgb: var(--marca-rgb-d, 122 162 255);
  --marca-2: var(--marca-2-d, var(--acento));
  --sobre-marca: var(--sobre-marca-d, #10131a);
  --marca-vefu: rgb(var(--marca-rgb) / .09);
  --marca-borda: rgb(var(--marca-rgb) / .3);
  --acento: var(--acento-d, #7aa2ff);
  --acento-rgb: var(--acento-rgb-d, 122 162 255);
  --acento-fundo: var(--acento-fundo-d, #1b2235);
  --acento-borda: var(--acento-borda-d, #2e3c5e);
  --tinta: var(--tinta-d, rgb(4 36 130 / 0));
  --aurora-1: var(--aurora-1-d, #223661);
  --aurora-2: var(--aurora-2-d, #332841);
  --aurora-3: var(--aurora-3-d, #183d4a);
  --instrumento: linear-gradient(165deg, rgb(var(--acento-rgb) / .12) 0%, rgb(30 30 38 / .5) 58%);
  --instrumento-borda: var(--vidro-borda);
  --instrumento-regua: rgb(255 255 255 / .09);
  --instrumento-trilho: rgb(255 255 255 / .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    --marca: var(--marca-d, var(--acento));
    --marca-texto: var(--marca-texto-d, var(--acento));
    --marca-rgb: var(--marca-rgb-d, 122 162 255);
    --marca-2: var(--marca-2-d, var(--acento));
    --sobre-marca: var(--sobre-marca-d, #10131a);
    --marca-vefu: rgb(var(--marca-rgb) / .09);
    --marca-borda: rgb(var(--marca-rgb) / .3);
    --acento: var(--acento-d, #7aa2ff);
    --acento-rgb: var(--acento-rgb-d, 122 162 255);
    --acento-fundo: var(--acento-fundo-d, #1b2235);
    --acento-borda: var(--acento-borda-d, #2e3c5e);
    --tinta: var(--tinta-d, rgb(4 36 130 / 0));
    --aurora-1: var(--aurora-1-d, #223661);
    --aurora-2: var(--aurora-2-d, #332841);
    --aurora-3: var(--aurora-3-d, #183d4a);
    --instrumento: linear-gradient(165deg, rgb(var(--acento-rgb) / .12) 0%, rgb(30 30 38 / .5) 58%);
    --instrumento-borda: var(--vidro-borda);
    --instrumento-regua: rgb(255 255 255 / .09);
    --instrumento-trilho: rgb(255 255 255 / .08);
  }
}

/* O rastro de selecao e' da marca. Custa um seletor e aparece em toda tela
 * sem disputar com nada — o tipo de dose que o pedido pedia. */
::selection { background: rgb(var(--marca-rgb) / .22); }

/* ── barra da conta ──────────────────────────────────────────────────────── */

/* A LARGURA E O RECUO SAO OS MESMOS DO CONTEUDO. Antes a barra tinha 860px e
 * a pagina 1180px, entao a logo flutuava deslocada em relacao ao nome da
 * marca logo abaixo — o tipo de desalinho que faz a tela parecer montada as
 * pressas. */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 28px 13px;
  max-width: 1320px; margin: 0 auto;
}
.topo-acoes { display: flex; align-items: center; gap: 10px; }

/* ── as moedas (créditos de IA), sempre à vista ──────────────────────────── */
.moedas {
  display: inline-flex; align-items: center; gap: 6px; height: 36px;
  padding: 0 12px; border-radius: 99px; text-decoration: none;
  border: 1px solid var(--borda); background: var(--fundo); color: #d9a521;
}
.moedas b { font: 700 14px/1 var(--mono); color: var(--texto); }
.moedas-rotulo { font-size: 12px; color: var(--texto-3); }
.moedas:hover { border-color: #d9a521; }

/* ── a visão: simples ou completa ────────────────────────────────────────── */
.visao {
  display: inline-flex; align-items: center; gap: 2px; height: 36px;
  padding: 3px 4px 3px 10px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--fundo);
}
.visao-olho { color: var(--texto-3); margin-right: 4px; }
.visao button {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--texto-3);
  padding: 6px 10px; border-radius: 99px;
}
.visao button[aria-pressed="true"] {
  background: var(--acento-fundo); color: var(--acento); font-weight: 600;
}
.visao .visao-olho-botao { display: none; }
@media (max-width: 640px) {
  .topo-acoes { gap: 6px; }
  .moedas-rotulo { display: none; }
  .moedas { padding: 0 10px; }
  /* No celular o switch vira só o olho: riscado na visão simples. */
  .visao { width: 36px; padding: 0; justify-content: center; }
  .visao .visao-olho, .visao button[aria-pressed] { display: none; }
  .visao .visao-olho-botao {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    color: var(--texto-2);
  }
  html[data-visao="completa"] .visao .visao-olho-botao { color: var(--acento); }
  html[data-visao="completa"] .visao-risco { display: none; }
}

/* NA VISÃO SIMPLES, o que é detalhe sai da tela. Cada tela marca com
 * `.detalhe` o que é número de apoio, análise secundária ou nota; a ação e o
 * veredito ficam. `.so-completa` é o mesmo, para texto; `.so-simples` é o
 * contrário — resumo que só faz sentido quando o detalhe está escondido. */
html[data-visao="simples"] .detalhe,
html[data-visao="simples"] .so-completa { display: none !important; }
html:not([data-visao="simples"]) .so-simples { display: none !important; }
html[data-visao="simples"] .secao-cabeca > p { display: none; }
html[data-visao="simples"] .lista-curta > :nth-child(n+3) { display: none; }
html[data-visao="simples"] .lista-tres > :nth-child(n+4) { display: none; }
html[data-visao="simples"] .lista-cinco > :nth-child(n+6) { display: none; }
@media (min-width: 641px) {
  /* As colunas escondidas saem da grade: sem isto, o botão e o veredito
   * cairiam nas colunas estreitas dos números que sumiram. */
  html[data-visao="simples"] .vizinho-linha:not(.vizinho-candidato) {
    grid-template-columns: minmax(0, 1fr) 130px 96px auto;
  }
  html[data-visao="simples"] .vizinho-linha .vizinho-falta { grid-column: 2 / 4; }
  html[data-visao="simples"] .rende-linha {
    grid-template-columns: minmax(0, 1fr) 100px 170px;
  }
}

.logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  letter-spacing: -.018em; color: var(--texto); text-decoration: none;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.pulso {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 0 4px var(--acento-fundo);
  flex: 0 0 auto;
}

.tema {
  display: grid; place-items: center; cursor: pointer;
  width: 36px; height: 36px; padding: 0;
  background: var(--fundo); color: var(--texto-2);
  border: 1px solid var(--borda); border-radius: 50%;
  transition: color .15s, border-color .15s;
}
.tema:hover { color: var(--texto); border-color: var(--borda-forte); }
.tema svg { grid-area: 1 / 1; }
/* O icone mostra PARA ONDE se vai, nao onde se esta': no claro, a lua. */
.tema-lua { display: block; }
.tema-sol { display: none; }
:root[data-theme="dark"] .tema-lua { display: none; }
:root[data-theme="dark"] .tema-sol { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-lua { display: none; }
  :root:not([data-theme="light"]) .tema-sol { display: block; }
}

/* ── conta e marcas ──────────────────────────────────────────────────────── */

.perfil { position: relative; }
.perfil summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  list-style: none; padding: 5px 11px 5px 5px;
  border: 1px solid var(--borda); border-radius: 99px;
  background: var(--fundo); transition: border-color .15s;
}
.perfil summary::-webkit-details-marker { display: none; }
.perfil summary::marker { content: ''; }
.perfil summary:hover { border-color: var(--borda-forte); }
/* A CARA DA MARCA. A logo precisa de tamanho FIXO e `object-fit`: sem isso a
 * imagem vem no tamanho natural do arquivo e arrebenta a pagina inteira — foi
 * o que aconteceu no primeiro corte. O quadrado com cantos arredondados, e nao
 * o circulo, porque logo de negocio raramente sobrevive a um recorte redondo. */
.face {
  width: 28px; height: 28px; flex: 0 0 auto; overflow: hidden;
  border-radius: 9px;
  background: var(--acento); color: var(--sobre-acento);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  line-height: 1;
}
.face img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: #fff;
}
.face.pequena { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; }
.face.grande { width: 44px; height: 44px; font-size: 21px; border-radius: 13px; }
.face.enorme { width: 52px; height: 52px; font-size: 25px; border-radius: 15px; }
.perfil-nome { display: grid; line-height: 1.25; text-align: left; }
.perfil-nome b { font-size: 13px; font-weight: 600; }
.perfil-nome i {
  font-style: normal; font: 9.5px/1.4 var(--mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3);
}
.perfil-seta { color: var(--texto-3); transition: transform .18s; }
.perfil[open] .perfil-seta { transform: rotate(180deg); }

.perfil-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 304px; padding: 6px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 14px; box-shadow: var(--sombra);
  animation: sobe .16s ease-out both;
}
.perfil-conta {
  margin: 0; padding: 8px 10px 10px; font-size: 12px; color: var(--texto-3);
  border-bottom: 1px solid var(--borda);
}
.perfil-rotulo {
  margin: 0; padding: 11px 10px 6px;
  font: 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3);
}
.perfil-marca {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; font: inherit; text-align: left;
}
.perfil-marca:hover { background: var(--fundo-2); }
.perfil-marca.aqui { background: var(--acento-fundo); }
.perfil-marca-texto { display: grid; line-height: 1.3; min-width: 0; }
.perfil-marca-texto b {
  font-size: 13px; font-weight: 600; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.perfil-marca-texto i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.perfil-item {
  display: block; margin-top: 2px; padding: 9px 10px; border-radius: 9px;
  font-size: 13px; color: var(--texto-2); text-decoration: none;
}
.perfil-item:hover { background: var(--fundo-2); color: var(--texto); }
.perfil-item:first-of-type { margin-top: 6px; border-top: 1px solid var(--borda); padding-top: 11px; }
/* O Sair é botão de formulário; aqui ele fica igual aos links do menu. */
.perfil-item.perfil-sair {
  width: 100%; text-align: left; border: 0; background: none;
  font-family: inherit; cursor: pointer;
  margin-top: 2px; padding-top: 9px;
}
.perfil-item.perfil-sair:hover { background: var(--fundo-2); }

@media (max-width: 640px) {
  .topo { padding: 12px 16px; }
  .perfil-nome { display: none; }
  .perfil summary { padding: 5px; }
}

.palco {
  max-width: 860px; margin: 0 auto; padding: 0 16px 72px;
}

.cartao {
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra);
  padding: 28px 24px;
}

@media (max-width: 640px) {
  .cartao { padding: 22px 16px; }
}

/* ── progresso ───────────────────────────────────────────────────────────── */

.barra {
  height: 4px; background: var(--fundo-3);
  border-radius: 99px; overflow: hidden; margin-bottom: 6px;
}
.barra > i { display: block; height: 100%; background: var(--acento); transition: width .3s ease; }
.passo-conta { font-size: 12.5px; color: var(--texto-3); margin-bottom: 20px; }

/* ── a pergunta ──────────────────────────────────────────────────────────── */

.pergunta {
  font-family: var(--serif); font-size: 29px; line-height: 1.2;
  letter-spacing: -.015em; margin: 0 0 8px;
}
.ajuda { color: var(--texto-2); font-size: 14.5px; margin: 0 0 22px; }

.erro {
  background: var(--alerta-fundo); color: var(--alerta);
  border: 1px solid var(--alerta); border-radius: var(--raio);
  padding: 10px 13px; font-size: 14px; margin-bottom: 16px;
}

/* ── chips ───────────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 9px; }

.chip {
  appearance: none; cursor: pointer;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 99px;
  padding: 11px 18px; font: inherit; font-size: 15px;
  transition: background .12s, border-color .12s, transform .08s;
}
.chip:hover { background: var(--acento-fundo); border-color: var(--acento-borda); }
.chip:active { transform: scale(.98); }
.chip[aria-pressed="true"] {
  background: var(--acento-fundo); border-color: var(--acento);
  color: var(--acento); font-weight: 600;
}

/* ── campos ──────────────────────────────────────────────────────────────── */

.campo, select.campo {
  width: 100%; padding: 13px 15px; font: inherit;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.campo:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.campo::placeholder { color: var(--texto-3); }

.linha { display: flex; gap: 10px; }
.linha > .campo:first-child { flex: 1; }
/* Varios campos de texto na mesma linha dividem o espaco. Sem isto o segundo,
 * com width:100%, espremia o primeiro a uma faixa de 30px — era o nome da
 * filial, sumido, no formulario de acrescentar unidade. */
.linha > input.campo { flex: 1 1 0; min-width: 0; }
.linha > input.campo[maxlength="2"] { flex: 0 0 76px; }
.linha > select.campo { width: 108px; flex: 0 0 auto; }

.acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }

/* `text-decoration: none` e `display` existem porque metade dos botoes da
 * tela sao <a> e a outra metade e' <button>. Sem isto o <a> herda o sublinhado
 * de `a` e vira "link pintado de botao" — era o que estava acontecendo em
 * "Conectar" e "Adicionar". */
.botao {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap;
  background: var(--acento); color: var(--sobre-acento); border: 1px solid var(--acento);
  border-radius: var(--raio); padding: 12px 22px;
}
.botao:hover { filter: brightness(1.07); }
.botao.fantasma { background: transparent; color: var(--texto-2); border-color: var(--borda-forte); }
.botao.fantasma:hover { background: var(--fundo-2); filter: none; }

/* ── confirmacao derivada do @ ───────────────────────────────────────────── */

.lido {
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 16px 18px; margin-bottom: 20px;
}
.lido dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; }
.lido dt { color: var(--texto-3); font-size: 13px; }
.lido dd { margin: 0; font-size: 14.5px; font-weight: 500; }

/* ── paleta ──────────────────────────────────────────────────────────────── */

.cores { display: flex; flex-wrap: wrap; gap: 12px; }
.cor { position: relative; }
.cor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cor span {
  display: block; width: 68px; height: 68px; border-radius: var(--raio);
  border: 2px solid var(--borda); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  position: relative;
}
.cor input:checked + span { border-color: var(--texto); }
.cor input:not(:checked) + span { opacity: .3; }
.cor input:checked + span::after {
  content: "\2713"; position: absolute; right: 5px; bottom: 3px;
  color: #fff; font-size: 14px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.cor code { display: block; text-align: center; font: 11px var(--mono); color: var(--texto-3); margin-top: 5px; }

/* ── amostras de tom ─────────────────────────────────────────────────────── */

.amostras { display: grid; gap: 10px; }
.amostra {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  padding: 15px 17px; line-height: 1.45;
}
.amostra:hover { border-color: var(--acento); background: var(--acento-fundo); }

/* ── a conversa ──────────────────────────────────────────────────────────── */

/* O que ja' foi dito fica na rolagem. A pergunta da vez chega embaixo, e o
 * campo mora colado no pe' da tela — a pessoa nunca precisa procurar onde
 * responder. */

.conversa { display: grid; gap: 13px; padding-top: 10px; }

.msg { display: flex; }
.msg.bot { justify-content: flex-start; }
.msg.eu { justify-content: flex-end; }

.balao {
  max-width: min(84%, 540px);
  padding: 13px 17px;
  border-radius: var(--raio-g);
  font-size: 15.5px; line-height: 1.5;
}

.msg.bot > .balao {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 20, 30, .04);
}

/* O balao da pessoa e' um BOTAO: tocar reabre aquela pergunta. E' como se
 * corrige resposta num chat, e e' o mesmo gesto que ja' alimentava a metrica
 * `corrigido`. Por isso a affordance fica visivel sempre, e nao so' no hover:
 * em telefone nao existe hover, e a maioria vai responder no telefone. */
.msg.eu > .balao {
  appearance: none; cursor: pointer; font: inherit; font-size: 15.5px;
  text-align: left;
  background: var(--acento); color: var(--sobre-acento);
  border: 1px solid var(--acento);
  border-bottom-right-radius: 6px;
  transition: filter .12s, transform .08s;
}
.msg.eu > .balao:hover { filter: brightness(1.08); }
.msg.eu > .balao:active { transform: scale(.99); }
.msg.eu > .balao:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

.mudar {
  display: block; margin-top: 5px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  opacity: .66;
}
.vazio { font-style: italic; }

/* PULAR NAO E' DIZER. O grupo profundo inteiro sai num toque — e' o caminho
 * desenhado de proposito — e com o balao cheio isso virava seis retangulos
 * azuis seguidos: a ausencia de resposta ficava sendo a parte mais visivel da
 * conversa. O balao recua ao peso da informacao que carrega, e continua
 * tocavel para quem quiser voltar nele. */
.msg.eu > .balao.pulado {
  background: transparent; color: var(--texto-3);
  border-color: var(--borda);
  font-size: 13.5px; padding: 7px 14px;
}
.msg.eu > .balao.pulado:hover {
  filter: none; background: var(--fundo); color: var(--texto-2);
}
.balao.pulado .mudar { opacity: .5; margin-top: 2px; }

.cores-mini { display: flex; gap: 5px; }
.cores-mini i {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .55);
}

.lista-mini { margin: 0; padding-left: 17px; font-size: 14px; }
.lista-mini li { margin: 2px 0; }

/* A pergunta da vez ganha a serif e um pouco mais de corpo: e' onde o olho
 * tem que cair depois da troca. As anteriores viram historico. */
.fala { margin: 0; }
.msg.bot.novo .fala {
  font-family: var(--serif); font-size: 23px; line-height: 1.25;
  letter-spacing: -.012em;
}
.dica { color: var(--texto-2); font-size: 13.5px; margin: 7px 0 0; }
.msg.bot .lido { margin: 14px 0 2px; }

.msg.novo { animation: chega .22s ease-out; }
@keyframes chega {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .msg.novo { animation: none; }
}

/* ── "digitando" ─────────────────────────────────────────────────────────── */

/* So' aparece quando ha' trabalho de verdade: ler o @ chama o coletor e a
 * inferencia, e isso leva segundos. Atraso artificial nas outras perguntas
 * seria mentir para parecer humano numa tela que promete 2 minutos. */
.digitando { display: none; }
.digitando.htmx-request { display: flex; }
.digitando .balao { display: flex; gap: 4px; align-items: center; padding: 15px 17px; }
.digitando i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--texto-3); animation: pulsa 1.1s infinite ease-in-out;
}
.digitando i:nth-child(2) { animation-delay: .16s; }
.digitando i:nth-child(3) { animation-delay: .32s; }
@keyframes pulsa {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ── onde se responde ────────────────────────────────────────────────────── */

.composer {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: 8px; padding: 14px 0 18px;
  background: var(--fundo-2);
  border-top: 1px solid var(--borda);
}
.composer::before {
  /* Esfuma a mensagem que passa por tras do campo colado no pe'. */
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px;
  background: linear-gradient(to top, var(--fundo-2), transparent);
  pointer-events: none;
}
/* NA PORTA (entrar, criar, olhar) A CONVERSA E' CURTA: nada rola por tras do
 * campo, entao o fundo e a borda que existem para cobrir mensagens viravam uma
 * caixa escura solta em volta dos botoes. Aqui o composer e' so' o conteudo. */
.composer-porta { background: transparent; border-top: 0; padding-top: 6px; }
.composer-porta::before { display: none; }
.composer .acoes { margin-top: 12px; }
.composer .linha > .botao { flex: 0 0 auto; }
.composer-topo { margin-bottom: 4px; }
.composer .barra { margin-bottom: 5px; }
.composer .passo-conta { margin-bottom: 13px; }
.composer .erro { margin-bottom: 13px; }
.composer .cores { margin-top: 2px; }

/* ── o playbook como mensagem ────────────────────────────────────────────── */

/* O cartao final chega como anexo do assistente: a conversa inteira continua
 * rolavel acima dele. A pessoa acabou de responder catorze perguntas; apagar
 * a tela no momento da entrega jogaria fora o contexto do que ela leu. */
.msg > .cartao {
  width: 100%; max-width: 100%;
  border-bottom-left-radius: 6px;
}

@media (max-width: 640px) {
  .balao { max-width: 90%; }
  .msg.bot.novo .fala { font-size: 21px; }
  .composer .linha { flex-wrap: wrap; }
  .composer .linha > .botao { width: 100%; }
}

/* ── payoff ──────────────────────────────────────────────────────────────── */

.selo {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ok-fundo); color: var(--ok);
  border-radius: 99px; padding: 5px 13px; font-size: 12.5px; font-weight: 600;
  margin-bottom: 14px;
}
.selo.aviso { background: var(--alerta-fundo); color: var(--alerta); }

.titulo { font-family: var(--serif); font-size: 33px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 6px; }
.subtitulo { color: var(--texto-2); font-size: 15px; margin: 0 0 26px; }

.secao { margin: 30px 0 0; }
.secao > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-3); margin: 0 0 14px;
}

.mix { display: grid; gap: 9px; }
.mix-linha { display: grid; grid-template-columns: 94px 1fr 74px; gap: 12px; align-items: center; font-size: 14px; }
.mix-barra { height: 9px; background: var(--fundo-3); border-radius: 99px; overflow: hidden; }
.mix-barra > i { display: block; height: 100%; background: var(--acento); }
.delta { font: 13px/1 var(--mono); text-align: right; }
.delta.sobe { color: var(--ok); }
.delta.desce { color: var(--texto-3); }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 11px; }
.numero { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 15px; }
.numero b { display: block; font-family: var(--serif); font-size: 25px; line-height: 1.1; }
.numero span { font-size: 12.5px; color: var(--texto-3); }

.pauta { border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 10px; background: var(--fundo); }
.pauta-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.formato { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--acento); background: var(--acento-fundo); border-radius: 5px; padding: 3px 8px; font-weight: 700; }
.pauta h3 { font-size: 16.5px; margin: 0; font-weight: 600; }
.pauta p { margin: 6px 0 0; font-size: 14px; color: var(--texto-2); }
.pauta .porque { color: var(--texto-3); font-size: 13px; }

.audio { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--borda); font-size: 14.5px; }
.audio:last-child { border-bottom: 0; }
.licenca { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 3px 8px; margin-left: auto; white-space: nowrap; }
.licenca.ok { background: var(--ok-fundo); color: var(--ok); }
.licenca.nao { background: var(--alerta-fundo); color: var(--alerta); }

.nota {
  background: var(--fundo-2); border: 1px dashed var(--borda-forte);
  border-radius: var(--raio); padding: 13px 15px;
  font-size: 13px; color: var(--texto-2); margin-top: 22px;
}

.salvar { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--borda); }
.salvar .linha { margin-bottom: 12px; }

/* ── o painel ────────────────────────────────────────────────────────────── */

/* DUAS CORRECOES DE RUMO ESTAO AQUI.
 *
 * 1. Coluna unica com prosa lia como documento. Site quer PAINEL e DENSIDADE:
 *    superficies distintas, tamanhos diferentes, a largura trabalhando. O
 *    playbook ja' tinha gancho, audio, hashtag e ritmo de corte guardados —
 *    faltava tela, nao dado.
 *
 * 2. A largura cresce com o espaco. No telefone a leitura rapida de uma coluna
 *    e' o certo; no desktop, a mesma coluna vira margem vazia dos dois lados. */

.app { max-width: 1320px; margin: 0 auto; padding: 0 28px 90px; }

/* ── topo ────────────────────────────────────────────────────────────────── */

/* Bloco, nao `space-between`: com perfil e tema movidos para a barra de cima,
 * sobraram so' titulo e meta — e `space-between` jogava o meta para a direita,
 * longe do nome a que ele pertence. */
/* A CAPA substituiu o masthead. Ver a secao "capa da marca" mais abaixo: o
 * cabecalho deixou de ser duas linhas de texto e virou a faixa onde a cor do
 * cliente aparece e onde se le', sem clicar, o que esta' ligado. */
.masthead { padding: 14px 0 16px; }
.masthead-titulo { display: flex; align-items: center; gap: 13px; }
.masthead-nome {
  font-family: var(--serif); font-size: 38px; line-height: 1.02;
  font-weight: 600; letter-spacing: -.028em; margin: 0;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.masthead-meta { margin: 6px 0 0; color: var(--texto-2); font-size: 13.5px; }
.masthead-meta span { color: var(--texto-3); margin: 0 4px; }

/* ── a casca: barra lateral + coluna ─────────────────────────────────────── *
 *
 * A LATERAL FLUTUA, nao encosta na borda. E' um painel de vidro com respiro
 * em volta, como no iPadOS 26: encostada, ela vira moldura de janela e o
 * vidro perde o que tem atras para mostrar. Fica `sticky` para nao rolar
 * junto com a tela, e a altura e' a da janela menos o respiro. */
.casca {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 26px;
  max-width: 1600px; margin: 0 auto; padding: 16px 28px 0 16px;
}
.casca .app { max-width: 1320px; width: 100%; margin: 0; padding: 0 0 90px; }
/* O rodape da pagina vive na lateral, no painel. */
.casca ~ .rodape { display: none; }
.filtros { position: absolute; width: 0; height: 0; }

.barra-lateral {
  position: sticky; top: 16px; height: calc(100vh - 32px);
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 12px 14px; border-radius: 26px;
}
.barra-lateral .logo { padding: 2px 10px 14px; font-size: 22px; }
.barra-lateral .pulso, .conta-barra .pulso { background: var(--sonar); box-shadow: 0 0 0 4px rgb(47 107 255 / .14); }
.barra-lateral-pe { margin: 10px 10px 0; font-size: 11.5px; line-height: 1.4; color: var(--texto-3); }

.trilho { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.trilho::-webkit-scrollbar { display: none; }
.trilho ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px; min-height: 100%;
}
.trilho a {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 14px; white-space: nowrap;
  color: var(--texto-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: color .18s, background-color .18s;
}
.trilho a:hover { color: var(--texto); background: var(--fundo-2); }
.trilho a.aqui { color: var(--texto); font-weight: 600; background: none; }
.trilho a.aqui .trilho-icone { color: var(--acento); }
.trilho-icone, .trilho .glifo { width: 19px; height: 19px; flex: 0 0 auto; }
.trilho-corte { display: none; }
.trilho-grupo {
  padding: 14px 12px 6px;
  font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3);
}
.trilho-grupo:first-child { padding-top: 4px; }
.trilho-empurra { flex: 1 1 auto; min-height: 12px; }

/* A LENTE. Vidro mais denso que a lateral, com a cor da marca em dois lugares
 * so': a borda interna e a tinta. A mola na transicao (o 1,45 da curva) e' o
 * "liquido": ela passa do ponto e volta, como gota.
 *
 * `view-transition-name` e' o que a faz deslizar ENTRE PAGINAS: a lente da
 * pagina velha e a da nova tem o mesmo nome, e o navegador anima uma ate' a
 * outra. Sem suporte, ela so' aparece no lugar novo. */
.lente {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(var(--tinta), var(--tinta)), var(--vidro-forte);
  border: 1px solid var(--vidro-borda);
  box-shadow: 0 6px 18px rgb(20 16 40 / .1), inset 0 1px 0 var(--brilho),
              inset 0 0 0 1px rgb(var(--acento-rgb) / .2);
  view-transition-name: lente;
}
@supports (backdrop-filter: url(#x)) {
  .lente { backdrop-filter: url(#refracao) blur(2px) saturate(1.8); }
}
::view-transition-group(lente) { animation-duration: .52s; animation-timing-function: cubic-bezier(.3, 1.45, .45, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@view-transition { navigation: auto; }

/* A barra das acoes da conta, no alto da coluna. */
.conta-barra { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 2px 0 12px; }
.conta-barra-logo { display: none; margin-right: auto; }

/* ── o tabuleiro ─────────────────────────────────────────────────────────── */

.tabuleiro {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  /* `start` e' o que impede o painel curto de esticar ate' a altura do
   * vizinho alto e virar caixa oca. A altura desigual e' a assimetria que
   * separa tabuleiro de grade de cartoes iguais. */
  align-items: start;
  margin-bottom: 30px;
}
/* ── o vocabulario de largura ────────────────────────────────────────────── *
 *
 * A grade tem 6 colunas e cada peca declara quantas ocupa. A REGRA QUE
 * FALTAVA: cada fileira tem que somar 6. Sem isso, um `span 4` seguido de
 * outro `span 4` deixa duas colunas orfas do tamanho do cartao ao lado — e
 * foi exatamente o buraco que apareceu na aba da marca, ao lado da "Visao
 * geral" e embaixo do panorama.
 *
 * Nao se usa `grid-auto-flow: dense` para tapar isso. Dense faz o cartao
 * pequeno pular para tras e preencher o furo, e ai' a ordem que o olho le'
 * deixa de ser a ordem do HTML — que e' a ordem que o teclado e o leitor de
 * tela seguem. Tapa o buraco visual e abre um pior.
 *
 * `.peca` vem DEPOIS de `.peca-larga` de proposito? Nao: vem ANTES, para a
 * classe mais especifica poder vencer. As duas tem a mesma especificidade, e
 * antes `.peca` estava embaixo — entao `class="peca peca-larga"` dava span 2
 * em silencio, que e' a pegadinha que ja' custou meia hora uma vez. */
.peca { grid-column: span 2; }
.peca-meia { grid-column: span 3; }
.peca-larga { grid-column: span 4; }
.peca-cheia { grid-column: span 6; }

.peca {
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 16px; padding: 18px 20px 17px;
  animation: sobe .34s cubic-bezier(.22, 1, .36, 1) both;
  transition: border-color .15s, transform .15s;
}
.peca:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
/* ICONE EM CADA ROTULO. Os produtos que nao parecem gerados tem um icone
 * minusculo em praticamente toda etiqueta — e' o que da' ritmo a uma coluna
 * que, sem ele, e' so' texto empilhado. */
.peca-titulo {
  margin: 0 0 14px; font: 10px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-3);
  display: flex; align-items: center; gap: 7px;
}
.peca-titulo svg { color: var(--acento); flex: 0 0 auto; }
.peca-rodape { margin: 12px 0 0; font-size: 12.5px; color: var(--texto-3); line-height: 1.45; }

.ganchos { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ganchos li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  font-size: 13.5px; line-height: 1.4;
}
.ganchos li .eixo { margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
.ganchos span {
  font: 10px/1.6 var(--mono); color: var(--acento);
  background: var(--acento-fundo); border-radius: 5px;
  text-align: center; height: 17px;
}

.audio-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borda);
}
.audio-linha:last-of-type { border-bottom: 0; }
.audio-linha b { display: block; font-size: 13.5px; font-weight: 500; }
.audio-linha i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.licenca {
  font: 9.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  border-radius: 4px; padding: 5px 7px; white-space: nowrap; flex: 0 0 auto;
}
.licenca.ok { background: var(--ok-fundo); color: var(--ok); }
.licenca.nao { background: var(--alerta-fundo); color: var(--alerta); }

.numero-solto {
  margin: 0; font-family: var(--serif); font-size: 40px; font-weight: 500;
  line-height: 1; letter-spacing: -.03em;
  font-variation-settings: "SOFT" 20;
}
.numero-solto i {
  display: block; font-style: normal; font-family: var(--sans);
  font-size: 12px; color: var(--texto-3); margin-top: 8px; letter-spacing: 0;
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tags code {
  font: 11.5px var(--mono); color: var(--texto-2);
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 5px; padding: 4px 7px;
}

/* As regras ocupam a fileira inteira em duas colunas: meia fileira deixava um
 * vazio que parecia erro de layout, e sao a informacao que mais pesa aqui. */
.peca-regra { grid-column: span 6; }
.regras {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 26px;
}
.regras li {
  position: relative; padding-left: 18px; font-size: 13px; line-height: 1.4;
  color: var(--texto-2);
}
.regras li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--alerta);
  opacity: .55;
}

/* ── a aba da marca ──────────────────────────────────────────────────────── */

.campo-linha { grid-template-columns: 110px 1fr; }
.campo-valor { font-size: 13px; color: var(--instrumento-texto); }
.campo-valor.falta { color: var(--instrumento-fraco); font-style: italic; }

.identidade { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.identidade b { display: block; font-size: 15px; font-weight: 600; }
.identidade i { font-style: normal; font-size: 12.5px; color: var(--texto-3); }

/* Fita, nao quadradinhos soltos: a paleta e' uma coisa so'. */
/* `.paleta-fita` saiu: era uma barra chapada da cor extraida, sem rotulo e
 * sem hex, ocupando a largura do cartao. Virou `.paleta-grade` — ver a secao
 * "amostras de paleta". */

.historico { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.historico li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; }
.historico-v {
  font: 10px/1.9 var(--mono); color: var(--acento); background: var(--acento-fundo);
  border-radius: 5px; text-align: center; height: 20px;
}
.historico b { font-size: 13px; font-weight: 500; }
.historico i { font-style: normal; font-size: 11.5px; color: var(--texto-3); margin-left: 6px; }

.fontes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.fontes li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.fontes b { font-weight: 500; color: var(--texto-2); flex: 1; }

/* ── tela de conexao ─────────────────────────────────────────────────────── */

.permissoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px; margin: 22px 0 4px;
  padding-top: 20px; border-top: 1px solid var(--instrumento-regua);
}
.permissoes .peca-titulo { color: var(--instrumento-fraco); }
.lista-sim, .lista-nao { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lista-sim li, .lista-nao li {
  position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.45;
  color: var(--instrumento-texto);
}
.lista-sim li::before, .lista-nao li::before {
  position: absolute; left: 0; top: -1px; font-size: 13px; font-weight: 700;
}
.lista-sim li::before { content: "+"; color: var(--ok); }
.lista-nao li::before { content: "–"; color: var(--instrumento-fraco); }
.lista-nao li { color: var(--instrumento-fraco); }

.instrumento .acoes { margin-top: 22px; gap: 10px; }
.instrumento .erro { margin-bottom: 18px; }

.perfil-conectar {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 600;
  color: var(--acento); text-decoration: none;
  background: var(--acento-fundo); border-radius: 6px; padding: 5px 9px;
}
.perfil-conectar:hover { filter: brightness(.96); }

/* ── a onda do clique ────────────────────────────────────────────────────── */

/* Sutil de proposito: um anel fino que abre e some em meio segundo. Fica em
 * `fixed` com `pointer-events: none` para nunca atrapalhar o clique que a
 * originou, e `z-index` alto para valer por cima do menu da conta. */
.onda {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 1.5px solid var(--acento);
  opacity: .5;
  animation: onda-abre .55s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes onda-abre {
  to { transform: scale(7); opacity: 0; border-width: .5px; }
}

/* ── conexoes ────────────────────────────────────────────────────────────── */

/* Dentro do instrumento, entao herda as cores dele. */
.conexoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 2px 26px;
}
.conexao {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 0; border-top: 1px solid var(--instrumento-regua);
}
.conexao-nome { display: grid; line-height: 1.3; flex: 1; min-width: 0; }
.conexao-nome b { font-size: 13.5px; font-weight: 600; color: var(--instrumento-texto); }
.conexao-nome i { font-style: normal; font-size: 11.5px; color: var(--instrumento-fraco); }

.botao.pequeno { padding: 7px 14px; font-size: 12.5px; border-radius: 9px; }
.botao.fantasma[disabled] { opacity: .5; cursor: not-allowed; }
.instrumento .botao.fantasma {
  color: var(--instrumento-fraco); border-color: var(--instrumento-regua);
  background: transparent;
}

.perfil-conexao {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px;
}
.perfil-conexao .chip-estado { flex: 0 0 auto; }
.perfil-conexao-texto { display: grid; line-height: 1.25; flex: 1; min-width: 0; }
.perfil-conexao-texto b {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.perfil-conexao-texto i {
  font-style: normal; font-size: 11px; color: var(--texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Rotulo com largura FIXA: com `auto`, o nome mais longo definia a coluna e
 * o valor era empurrado para a linha de baixo dentro de um cartao estreito. */
/* A regra base sumiu numa troca de bloco, e sem `display: grid` o
 * `grid-template-columns` de `.ficha-curta` nao agia: dt e dd voltavam a
 * empilhar como bloco. */
.ficha {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 18px;
}
.ficha dt { color: var(--texto-3); font-size: 12.5px; }
.ficha dd { margin: 0; font-size: 14px; }

.ficha-curta {
  grid-template-columns: 62px 1fr; gap: 8px 14px; margin: 14px 0 0;
  align-items: baseline;
}
.ficha-curta dt { font-size: 11.5px; }
.ficha-curta dd { font-size: 13px; line-height: 1.4; }
.formatos-claro .formato-nome { color: var(--texto-2); }
.formatos-claro .formato-share { color: var(--texto-3); }
.formatos-claro .formato-trilho { background: var(--fundo-3); }
.formatos-claro .delta.sobe { color: var(--ok); }
.formatos-claro .delta.desce { color: var(--texto-3); }

/* ── integracoes e assistente ────────────────────────────────────────────── */

.tarifas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  padding-bottom: 20px; border-bottom: 1px solid var(--instrumento-regua);
}
.tarifa b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 32px; line-height: 1; letter-spacing: -.03em;
  font-variation-settings: "SOFT" 20;
}
.tarifa.alvo b { color: var(--acento); }
.tarifa-tipo {
  display: block; margin-top: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--instrumento-texto);
}
.tarifa-quando {
  display: block; margin-top: 2px; font-size: 11.5px;
  color: var(--instrumento-fraco);
}

.peca-corpo { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }

/* Nota DENTRO do instrumento: herda as cores dele, nao as da pagina. */
.instrumento-nota {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--instrumento-regua);
  font-size: 13px; line-height: 1.5; color: var(--instrumento-fraco);
  max-width: 68ch;
}

.requisitos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.requisitos li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--texto-2);
}

/* O anel vazio e' "ainda nao detectado"; cheio e' fonte ligada. O mesmo gesto
 * carrega os dois estados, em vez de dois simbolos sem parentesco. */
.anel.ligado { border-style: solid; border-color: var(--ok); background: var(--ok); }
.chip-estado.ok { background: var(--ok-fundo); color: var(--ok); }

/* ── o instrumento ───────────────────────────────────────────────────────── */

.instrumento {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--instrumento); color: var(--instrumento-texto);
  border: 1px solid var(--instrumento-borda);
  border-radius: 16px; padding: 22px 24px 20px;
  box-shadow: var(--sombra);
  animation: sobe .36s cubic-bezier(.22, 1, .36, 1) both;
}
/* Grao: visual impecavel demais le' como gerado; textura indica que alguem
 * fez. Sutil de proposito — e' acabamento, nao efeito. */
.instrumento::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.instrumento-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 20px;
}
.instrumento-topo h2 {
  font-family: var(--serif); font-size: 25px; font-weight: 600;
  letter-spacing: -.022em; margin: 0; line-height: 1.1;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.instrumento .etiqueta {
  font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento); background: var(--acento-fundo);
  border: 1px solid var(--acento-borda);
  border-radius: 99px; padding: 6px 10px; white-space: nowrap;
}

.leitura {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding-bottom: 20px; border-bottom: 1px solid var(--instrumento-regua);
}
.leitura-item b {
  font-family: var(--serif); font-weight: 500;
  font-size: 38px; line-height: .95; letter-spacing: -.03em;
  font-variation-settings: "SOFT" 20;
}
.leitura-item b i, .leitura-item .sufixo {
  font-style: normal; font-size: 19px; opacity: .45;
}
.leitura-item.alvo b { color: var(--acento); }
.leitura-item span {
  display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.35;
  color: var(--instrumento-fraco);
}

.formatos { margin-top: 18px; display: grid; gap: 10px; }
.formato-linha {
  display: grid; grid-template-columns: 74px 1fr 42px 46px; gap: 12px;
  align-items: center; font-size: 13px;
}
.formato-nome { color: var(--instrumento-fraco); }
.formato-share { font: 11.5px/1 var(--mono); color: var(--instrumento-fraco); text-align: right; }
.formato-trilho {
  height: 6px; background: var(--instrumento-trilho); border-radius: 99px;
  overflow: hidden;
}
.formato-trilho > i {
  display: block; height: 100%; width: var(--ate); border-radius: 99px;
  background: linear-gradient(90deg, var(--acento), var(--acento));
  animation: enche .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--ordem, 1) * 80ms);
}
@keyframes enche { from { width: 0; } to { width: var(--ate); } }
.instrumento .delta { font: 11.5px/1 var(--mono); text-align: right; }
.instrumento .delta.sobe { color: var(--ok); }
.instrumento .delta.desce { color: var(--instrumento-fraco); }

/* ── fora do alcance ─────────────────────────────────────────────────────── */

/* A VARREDURA MORA AQUI. Sobre dado parado ela era enfeite; sobre o que ainda
 * nao foi alcancado, ela e' o proprio sentido do produto. */

.nao-detectado {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--borda); padding: 26px 0 0;
}
.varredura {
  position: absolute; top: -130px; left: 50%; width: 460px; height: 460px;
  margin-left: -230px; z-index: 0; pointer-events: none;
}
.varredura i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--acento); opacity: 0; transform: scale(.2);
  animation: pingar 6s cubic-bezier(.2, .7, .3, 1) infinite;
}
.varredura i:nth-child(2) { animation-delay: 2s; }
.varredura i:nth-child(3) { animation-delay: 4s; }
@keyframes pingar {
  0% { transform: scale(.15); opacity: 0; }
  10% { opacity: .16; }
  100% { transform: scale(1); opacity: 0; }
}

.nao-detectado-topo {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.nao-detectado-topo h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: -.02em; margin: 0;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}

.contatos {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px;
}
.contato {
  display: grid; grid-template-columns: 24px 1fr; gap: 11px;
  align-items: start; padding: 14px 0;
  border-top: 1px solid var(--borda);
  animation: sobe .34s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--atraso, 0ms);
}
.anel {
  width: 12px; height: 12px; margin-top: 4px; border-radius: 50%;
  border: 1.5px dashed var(--borda-forte);
  transition: border-color .2s, transform .2s;
}
.contato:hover .anel { border-color: var(--acento); transform: scale(1.2); }
.contato h3 {
  margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.contato p { margin: 3px 0 0; font-size: 12.5px; color: var(--texto-3); line-height: 1.4; }

.chip-estado {
  font: 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  border-radius: 4px; padding: 5px 7px; white-space: nowrap; font-weight: 400;
}
.chip-estado.bloqueado { background: var(--alerta-fundo); color: var(--alerta); }
.chip-estado.a_fazer { background: var(--fundo-3); color: var(--texto-2); }
.chip-estado.sem_plano { background: var(--fundo-3); color: var(--texto-3); }

/* ── o assistente, em conversa ───────────────────────────────────────────── */

/* A conversa ocupa a coluna larga do tabuleiro, com as fontes ao lado. Antes
 * era uma coluna de 720px centrada, e a largura sobrava dos dois lados. */
.tabuleiro-conversa { align-items: start; }
.conversa-app { grid-column: span 4; max-width: none; margin: 0; }
.lateral { grid-column: span 2; display: grid; gap: 14px; align-content: start; }
.balao-ficha { max-width: 100%; }
.balao-ficha .ficha {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 18px;
}
.balao-ficha dt { color: var(--texto-3); font-size: 12.5px; }
.balao-ficha dd { margin: 0; font-size: 14px; }
.balao-acao {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.balao-acao span { font-size: 12px; color: var(--texto-3); }

.sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sugestoes .chip { font-size: 13px; padding: 9px 14px; opacity: .55; cursor: not-allowed; }

.composer-nota {
  margin: 10px 0 0; font-size: 12px; color: var(--texto-3);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.aberta { margin-bottom: 22px; }
.aberta-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
}
.aberta-topo h2 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  letter-spacing: -.022em; margin: 0;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.etiqueta {
  font: 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--acento); background: var(--acento-fundo);
  border-radius: 99px; padding: 6px 11px; white-space: nowrap;
}
.lead { margin: 0 0 18px; color: var(--texto-2); font-size: 15px; max-width: 58ch; }

@keyframes sobe {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .instrumento, .peca, .contato, .formato-trilho > i, .perfil-menu { animation: none; }
  .varredura { display: none; }
  .peca:hover { transform: none; }
}

/* ── telefone: a coluna unica volta a ser o certo ────────────────────────── */

@media (max-width: 980px) {
  .tabuleiro { grid-template-columns: repeat(2, 1fr); }
  .peca-larga, .peca-cheia, .peca-meia,
  .conversa-app, .lateral { grid-column: span 2; }
  .peca { grid-column: span 1; }
  .peca-regra { grid-column: span 2; }
  .contatos { grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
}
@media (max-width: 640px) {
  .app { padding: 0 16px 80px; }
  .masthead-nome { font-size: 30px; }
  .tabuleiro { grid-template-columns: 1fr; }
  .peca-larga, .peca-cheia, .peca-meia, .peca, .peca-regra,
  .conversa-app, .lateral { grid-column: span 1; }
  .regras { grid-template-columns: 1fr; }
  .leitura { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .leitura-item b { font-size: 32px; }
  .instrumento-topo h2 { font-size: 21px; }
  .contatos { grid-template-columns: 1fr; gap: 0; }
}

.rodape {
  max-width: 1320px; margin: 0 auto; padding: 0 28px 40px;
  font-size: 12.5px; color: var(--texto-3);
}

/* ════════════════════════════════════════════════════════════════════════════
 * ELEMENTOS VISUAIS
 *
 * O diagnostico que gerou esta secao: a tela estava tipograficamente limpa e
 * visualmente muda. Numero grande em serifa, rotulo pequeno, ponto cinza,
 * repetir. Nada que o olho lesse antes do texto — e painel se le' de relance.
 *
 * O criterio para cada peca abaixo foi um so': ELA MOSTRA DADO QUE JA EXISTE?
 * Nenhum grafico foi acrescentado para preencher espaco. Sem serie temporal,
 * nao ha' sparkline — teria que ser inventada, e numero de mentira que se
 * passa por medido e' pior que tela vazia. O que entrou:
 *
 *   anel de completude   percentual do brief, que ja' era calculado
 *   glifos de plataforma reconhecimento imediato na lista de integracoes
 *   amostras de paleta   a cor extraida, com o hex, em vez de fita muda
 *   capa tingida         a cor da marca onde a marca e' o assunto
 *   barras da marca      o mix de formato, que ja' era barra, agora na cor
 *                        de quem o dado descreve
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── capa da marca ───────────────────────────────────────────────────────── *
 *
 * A LAVAGEM VAI DE 7% A ZERO, de cima para baixo. Chapado na cor do cliente
 * seria faixa de banner e brigaria com o conteudo; dissolvendo, a cor
 * aparece e entrega a tela ao texto.
 *
 * O FIO DE CIMA E' O QUE FAZ A COR SER LIDA COMO IDENTIDADE. Dois pixels
 * saturados no topo bastam — e' a mesma economia de uma lombada de livro. */
.capa {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  margin: 10px 0 20px; padding: 20px 22px 19px;
  border: 1px solid var(--marca-borda);
  border-radius: var(--raio-g);
  background:
    linear-gradient(170deg, var(--marca-vefu), transparent 72%),
    var(--fundo);
  overflow: hidden;
}
.capa::before {
  content: ""; position: absolute; inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--marca), var(--marca-2) 62%, transparent);
}

.capa-identidade { display: flex; align-items: center; gap: 15px; min-width: 0; }
.capa-texto { min-width: 0; }
.capa-nome {
  font-family: var(--serif); font-size: 34px; line-height: 1.05;
  letter-spacing: -.022em; margin: 0; font-weight: 600;
  font-variation-settings: "SOFT" 18, "WONK" 1;
}
.capa-meta {
  margin: 5px 0 0; color: var(--texto-2); font-size: 13.5px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
}
.capa-meta a { color: var(--marca-texto); text-decoration: none; font-weight: 500; }
.capa-meta a:hover { text-decoration: underline; }
/* O separador vira um ponto desenhado: o "·" tipografico some em tela de
 * baixa densidade e desalinha com o texto ao lado. */
.ponto {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--texto-3); opacity: .55; flex: 0 0 auto;
}

/* A fileira de glifos. APAGADO E' O QUE FALTA, ACESO E' O QUE MEDE — e a
 * diferenca e' saturacao e opacidade, nao cor, para continuar legivel em
 * monocromia e para quem nao distingue cor. O numero ao lado repete o mesmo
 * fato em texto, que e' o que a leitura por voz vai anunciar. */
.capa-ligadas {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px 7px 9px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--fundo-2);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.capa-ligadas:hover { border-color: var(--marca-borda); background: var(--marca-vefu); }
.ligada-item {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  filter: grayscale(1); opacity: .32; transition: filter .2s, opacity .2s;
  color: var(--texto-2);
}
.ligada-item.acesa { filter: none; opacity: 1; color: var(--texto); }
.capa-ligadas-conta {
  font: 11.5px/1 var(--mono); color: var(--texto-3);
  padding-left: 7px; margin-left: 1px; border-left: 1px solid var(--borda);
}

/* A aura da logo e' da marca. E' o detalhe mais barato da lista e o que mais
 * faz a tela parecer "deles": a propria logo passa a ter halo da propria cor. */
.face.grande, .face.enorme {
  box-shadow: 0 0 0 1px var(--marca-borda), 0 0 0 5px var(--marca-vefu);
}

/* ── glifos de plataforma ────────────────────────────────────────────────── */

.glifo { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.glifo.grande { width: 26px; height: 26px; }

/* O LADRILHO EXISTE PARA A MARCA DE TERCEIRO NAO ENCOSTAR NO FUNDO DA TELA.
 * O glifo do WhatsApp e' verde chapado e o do Instagram e' gradiente quente:
 * soltos sobre o fundo claro eles parecem adesivo colado. Dentro de um
 * ladrilho com a tinta da propria plataforma a 8%, viram componente. */
.glifo-caixa {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--fundo-2); border: 1px solid var(--borda);
}
.glifo-caixa.grande { width: 48px; height: 48px; border-radius: 14px; }
.glifo-caixa.instagram, .glifo-caixa.direct {
  background: linear-gradient(135deg, rgb(255 213 33 / .14), rgb(185 0 180 / .12) 55%, rgb(64 82 255 / .14));
  border-color: rgb(185 0 180 / .22);
}
.glifo-caixa.whatsapp { background: rgb(37 211 102 / .11); border-color: rgb(37 211 102 / .28); }
.glifo-caixa.tiktok { background: rgb(254 44 85 / .09); border-color: rgb(254 44 85 / .22); }

/* ── anel de progresso ───────────────────────────────────────────────────── *
 *
 * `--ate` chega como numero de 0 a 100 e vira angulo aqui. Fazer a conta no
 * template espalharia unidade por HTML; `calc()` mantem a regra num lugar so'.
 *
 * O VALOR FICA NO CENTRO porque anel sozinho se le' por alto — serve para
 * "falta muito ou pouco", nao para "quanto exatamente", e aqui a pessoa
 * decide com o numero se vale revisar o brief. */
.medidor {
  position: relative; display: grid; place-content: center; justify-items: center;
  width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--marca) calc(var(--ate) * 1%), var(--fundo-3) 0);
}
.medidor::after {
  content: ""; position: absolute; inset: 9px;
  border-radius: 50%; background: var(--fundo);
}
.medidor-valor, .medidor-rotulo { position: relative; z-index: 1; }
.medidor-valor {
  font-family: var(--serif); font-size: 25px; line-height: 1;
  font-weight: 600; letter-spacing: -.02em;
}
.medidor-valor i { font-style: normal; font-size: 13px; color: var(--texto-3); }
.medidor-rotulo { font-size: 10.5px; color: var(--texto-3); margin-top: 3px; }
.medidor.cheio { background: conic-gradient(var(--ok) 100%, var(--ok) 0); }
.medidor.cheio .medidor-valor { color: var(--ok); }
.leitura-com-anel { grid-template-columns: 92px repeat(3, 1fr); align-items: center; }

/* ── amostras de paleta ──────────────────────────────────────────────────── *
 *
 * A FITA CHAPADA SAIU. Ela era uma barra da cor extraida ocupando a largura
 * do cartao, sem rotulo e sem hex: gastava o espaco de um elemento de design
 * e nao dizia que cor era nem de onde tinha vindo. Com marca de cor clara ela
 * ainda virava um bloco berrante no meio da tela.
 *
 * O HEX MOSTRADO E' O EXTRAIDO, nao o ajustado para contraste. Aqui o assunto
 * e' a marca, e fidelidade e' o ponto; o ajuste e' problema da interface. */
.paleta-grade { display: grid; gap: 8px; margin-top: 14px; }
.paleta-amostra {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--fundo-2);
}
.paleta-cor {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  /* O contorno interno de 1px e' o que separa amostra branca do fundo
   * branco. Sem ele, marca de logo clara mostra um quadrado invisivel. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.paleta-amostra code { font: 11.5px var(--mono); color: var(--texto-2); letter-spacing: .02em; }
.paleta-amostra i {
  font-style: normal; font-size: 10.5px; margin-left: auto;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3);
}
.paleta-amostra.principal { border-color: var(--marca-borda); background: var(--marca-vefu); }
/* A VARIANTE FINA E' UMA FILEIRA, NAO UMA PILHA. Na visao geral a paleta
 * convive com outros dois cartoes na mesma linha, e empilhada ela esticava o
 * cartao da identidade em ~90px — o suficiente para a fileira inteira ficar
 * irregular e a tela parecer montada as pressas. A lista rotulada completa
 * continua existindo no perfil da marca, que e' onde ela e' o assunto. */
.paleta-grade.fina {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.paleta-grade.fina .paleta-amostra {
  padding: 4px 9px 4px 5px; gap: 7px; border-radius: 99px;
}
.paleta-grade.fina .paleta-cor { width: 18px; height: 18px; border-radius: 50%; }
.paleta-grade.fina code { font-size: 10.5px; }

/* ── conexoes como cartao ────────────────────────────────────────────────── */

.conexao {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--raio);
  border: 1px solid var(--instrumento-borda); background: transparent;
  text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s, transform .15s;
}
.conexao:hover {
  border-color: var(--marca-borda); background: var(--marca-vefu);
  transform: translateY(-1px);
}
.conexao-acao {
  font-size: 11.5px; font-weight: 600; color: var(--acento);
  white-space: nowrap; flex: 0 0 auto;
}
.conexao.ligada .conexao-nome i { color: var(--ok); }

/* ── a tela de perfil ────────────────────────────────────────────────────── *
 *
 * Largura FIXA no trilho: um trilho que se ajusta ao rotulo mais longo faz o
 * conteudo pular de lugar a cada troca de secao. */
.perfil-tela { display: grid; grid-template-columns: 236px 1fr; gap: 26px; align-items: start; }
.perfil-corpo { display: grid; gap: 16px; min-width: 0; }

.perfil-trilho { display: grid; gap: 3px; position: sticky; top: 16px; }
.perfil-trilho a {
  display: grid; gap: 2px; padding: 11px 13px;
  border-radius: var(--raio); text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.perfil-trilho a:hover { background: var(--fundo-2); }
.perfil-trilho a.aqui {
  background: var(--marca-vefu); border-color: var(--marca-borda);
}
.perfil-trilho b { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.perfil-trilho i { font-style: normal; font-size: 11.5px; color: var(--texto-3); line-height: 1.4; }
.perfil-trilho a.aqui b { color: var(--marca-texto); }

/* ── blocos do perfil ────────────────────────────────────────────────────── *
 *
 * `.bloco` e' o cartao do perfil, e e' deliberadamente mais calmo que
 * `.peca`: aqui nao ha' dado para destacar, so' informacao para conferir. */
.bloco {
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-g); padding: 18px 20px 20px;
}
.bloco-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.bloco-topo h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.bloco-resumo { font-size: 12.5px; color: var(--texto-3); }
.bloco-corpo { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.bloco-nota {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--borda);
  font-size: 12.5px; color: var(--texto-3); line-height: 1.5;
}
.bloco-nota.aviso { color: var(--alerta); }
/* `align-items: start` para o bloco curto nao esticar ate' a altura do
 * vizinho: cartao com um palmo de vazio no pe' parece conteudo faltando. */
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.ficha-conta { display: flex; align-items: center; gap: 14px; }
.ficha-conta > div { flex: 1; min-width: 0; }
.ficha-conta b { display: block; font-size: 15px; font-weight: 600; }
.ficha-conta i { font-style: normal; font-size: 12.5px; color: var(--texto-3); }
.inicial {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--acento-fundo); color: var(--acento);
  font-family: var(--serif); font-size: 20px; font-weight: 600;
}

.retrato { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.retrato-texto { flex: 1; min-width: 0; }
.retrato-texto b {
  display: block; font-family: var(--serif); font-size: 23px;
  font-weight: 600; letter-spacing: -.018em; line-height: 1.15;
}
.retrato-texto i { font-style: normal; font-size: 13px; color: var(--texto-3); }

/* ── marcas da conta ─────────────────────────────────────────────────────── */

.marcas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 12px; }
.cartao-marca {
  display: grid; gap: 11px; padding: 16px;
  border: 1px solid var(--borda); border-radius: var(--raio-g);
  background: var(--fundo-2);
}
.cartao-marca.aqui { border-color: var(--marca-borda); background: var(--marca-vefu); }
.cartao-marca-texto b { display: block; font-size: 14.5px; font-weight: 600; }
.cartao-marca-texto i { font-style: normal; font-size: 12px; color: var(--texto-3); }
.cartao-marca-nicho { display: block; font-size: 11.5px; color: var(--texto-3); margin-top: 4px; }
.cartao-marca-pe { display: flex; flex-wrap: wrap; gap: 8px; }
.medida {
  font: 11px/1 var(--mono); color: var(--texto-3);
  background: var(--fundo-3); border-radius: 6px; padding: 5px 8px;
}
.medida b { color: var(--texto-2); font-weight: 700; }
/* Zero ligadas e' a informacao mais acionavel desta lista: e' o cliente que
 * nao esta' recebendo nada. Entao ele nao e' cinza como o resto. */
.medida.vazia { background: var(--alerta-fundo); color: var(--alerta); }
.medida.vazia b { color: var(--alerta); }
.cartao-marca-aqui {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--marca-texto); font-weight: 700;
}

/* ── cartoes de integracao ───────────────────────────────────────────────── */

/* ── `auto-fit`, NUNCA `auto-fill` ───────────────────────────────────────── *
 *
 * E' a diferenca que explodiu metade dos vazios da tela, e ela tem uma linha
 * de regra: `auto-fill` CRIA as trilhas que cabem e deixa vazias as que
 * sobram; `auto-fit` COLAPSA as vazias e os itens esticam para ocupar tudo.
 *
 * Com `auto-fill`, uma secao de 1360px com faixa de 290px abre quatro
 * trilhas — e dois posts de referencia ficavam encolhidos a' esquerda com
 * metade da largura da tela reservada para trilhas que nunca seriam
 * preenchidas. Para um painel cujo numero de cartoes VARIA (um nicho tem tres
 * outliers, outro tem um), `auto-fill` e' sempre a escolha errada.
 *
 * A faixa minima continua larga para a contagem baixa nao virar cartao
 * esticado demais. */
.integracoes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.cartao-integracao {
  display: grid; gap: 11px; align-content: start;
  padding: 16px; border: 1px solid var(--borda);
  border-radius: var(--raio-g); background: var(--fundo-2);
  transition: border-color .15s, transform .15s;
}
.cartao-integracao:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
.cartao-integracao.ligada { background: var(--fundo); border-color: var(--ok); }
.cartao-integracao > header { display: flex; align-items: center; gap: 11px; }
.cartao-integracao-nome { flex: 1; min-width: 0; }
.cartao-integracao-nome b { display: block; font-size: 14.5px; font-weight: 600; }
.cartao-integracao-nome i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.cartao-integracao-resumo { margin: 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.5; }
.cartao-integracao > footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 2px;
}
.conta-ligada {
  font-size: 12px; color: var(--ok); font-weight: 600;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.conta-ligada em { font-style: normal; }
.cartao-integracao-espera { font-size: 11.5px; color: var(--texto-3); }

/* ── a oficina: colar credencial ─────────────────────────────────────────── *
 *
 * ESTA PECA TEM QUE PARECER FERRAMENTA, E NAO PRODUTO. Ela aceita credencial
 * colada e so' existe em desenvolvimento; se parecesse com o resto da tela,
 * alguem acabaria pedindo um token ao cliente. Dai' o traco diagonal, o selo
 * e o fato de vir fechada quando ja' ha' conexao. */
.peca-oficina {
  background:
    repeating-linear-gradient(135deg, var(--fundo-2), var(--fundo-2) 9px, transparent 9px, transparent 18px);
  border-style: dashed;
}
.peca-oficina:hover { transform: none; }
.peca-oficina summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  flex-wrap: wrap; font-size: 14px; font-weight: 600; list-style: none;
}
.peca-oficina summary::-webkit-details-marker { display: none; }
.peca-oficina summary::marker { content: ''; }
.oficina-selo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; padding: 4px 8px; border-radius: 6px;
  background: var(--alerta-fundo); color: var(--alerta);
}
/* Na coluna estreita a dica nao cabe na mesma linha do selo: em vez de
 * espremer, ela desce inteira. `margin-left: auto` so' vale quando sobra. */
.oficina-dica { font-size: 12px; font-weight: 400; color: var(--texto-3); margin-left: auto; }
@media (max-width: 1240px) { .oficina-dica { margin-left: 0; width: 100%; } }
.peca-oficina details[open] summary { margin-bottom: 14px; }

.colar { display: grid; gap: 14px; }
.colar-campo { display: grid; gap: 5px; }
.colar-rotulo { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.colar-rotulo i {
  font-style: normal; font-weight: 400; font-size: 11px;
  color: var(--texto-3); margin-left: 5px;
}
.colar small { font-size: 11.5px; color: var(--texto-3); line-height: 1.45; }
.colar .botao { justify-self: start; }

/* ── detalhe da conexao ──────────────────────────────────────────────────── */

.instrumento-titulo { display: flex; align-items: center; gap: 13px; min-width: 0; }
.instrumento-titulo h2 { margin: 0; }
.instrumento-sub { margin: 3px 0 0; font-size: 13px; color: var(--instrumento-fraco); line-height: 1.45; }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); }

.escopos { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.escopos code {
  font: 11px var(--mono); padding: 5px 9px; border-radius: 6px;
  background: var(--instrumento-trilho); color: var(--instrumento-fraco);
}

.espera {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px dashed var(--instrumento-borda); border-radius: var(--raio);
}
.espera p {
  margin: 0; flex: 1; min-width: 220px; font-size: 13px;
  color: var(--instrumento-fraco); line-height: 1.5;
}

/* ── o mix de formato na cor da marca ────────────────────────────────────── *
 *
 * E' o dado do nicho DELA, no cartao com o nome DELA. O azul do Sonar
 * continua nos botoes e nos links, que sao nossos. */
.formatos-marca .formato-trilho > i { background: var(--marca); }

.perfil-item.destaque { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.perfil-contagem { font: 11px/1 var(--mono); color: var(--texto-3); }

@media (max-width: 1020px) {
  .perfil-tela { grid-template-columns: 1fr; gap: 16px; }
  .perfil-trilho { position: static; grid-auto-flow: column; overflow-x: auto; }
  .perfil-trilho i { display: none; }
  .duas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .capa { padding: 16px 16px 15px; }
  .capa-nome { font-size: 27px; }
  .leitura-com-anel { grid-template-columns: 1fr 1fr; }
  .medidor { width: 78px; height: 78px; }
  .retrato { flex-wrap: wrap; }
}

/* NUMERO E NOME NAO PODEM TER O MESMO CORPO. A tira de leitura foi desenhada
 * para numero curto em serifa de 38px; um @ de usuario com 16 letras nessa
 * medida invade a coluna seguinte e quebra a grade. Quando o valor e' texto,
 * ele desce de corpo e ganha quebra. */
.leitura-item.texto b {
  font-size: 21px; line-height: 1.2; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════════════════════════
 * O ANALISTA, OS POSTS QUE ESTOURARAM E O PANORAMA
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── a conversa do analista ──────────────────────────────────────────────── */

.conversa-app { grid-column: auto; max-width: none; margin: 0; }

/* Pauta e analise precisam de largura: duas colunas de uma palavra cada nao
 * se leem. O balao de texto corrido continua estreito, que e' o certo para
 * prosa. */
.balao-largo { max-width: 100%; width: 100%; }
.balao-erro { border-color: var(--alerta) !important; }
.balao-erro .fala { color: var(--alerta); }

.assinatura {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 13px 0 0; padding-top: 11px;
  border-top: 1px solid var(--borda);
  font-size: 11px; color: var(--texto-3);
}
.assinatura .chip-estado { margin-right: 2px; }

.pautas { display: grid; gap: 10px; margin-top: 12px; }
.balao-largo .pauta { background: var(--fundo-2); }

/* ── analise de um post ──────────────────────────────────────────────────── */

.analise-alvo {
  display: flex; align-items: center; gap: 13px; margin-bottom: 13px;
  padding-bottom: 13px; border-bottom: 1px solid var(--borda);
}
.analise-alvo b { display: block; font-size: 14.5px; font-weight: 600; }
.analise-alvo i { font-style: normal; font-size: 12px; color: var(--texto-3); }

/* O SALTO E' O NUMERO DA TELA, e por isso ele e' grande. E' multiplo sobre a
 * linha de base da propria conta — nunca views. Ver _exemplos.html. */
.salto {
  display: flex; align-items: baseline; gap: 1px; flex: 0 0 auto;
  font-family: var(--serif); font-size: 27px; font-weight: 600;
  line-height: 1; letter-spacing: -.02em; color: var(--marca-texto);
}
.salto i { font-style: normal; font-size: 15px; opacity: .6; }

.analise-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.analise-titulo {
  margin: 0 0 9px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700;
}
.analise-titulo.sim { color: var(--ok); }
.analise-titulo.nao { color: var(--texto-3); }
.analise-teste {
  margin: 15px 0 0; padding: 11px 13px; border-radius: var(--raio);
  background: var(--marca-vefu); border: 1px solid var(--marca-borda);
  font-size: 13.5px; line-height: 1.5;
}

/* ── os posts que estouraram ─────────────────────────────────────────────── */

.estourados { margin-bottom: 0; }
.estourados-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.estourados-topo h2 {
  margin: 0; font-family: var(--serif); font-size: 23px;
  font-weight: 600; letter-spacing: -.02em;
}
.estourados-regra {
  margin: 0 0 14px; font-size: 13px; color: var(--texto-2);
  line-height: 1.55; max-width: 76ch;
}

.postes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.poste {
  display: grid; gap: 11px; align-content: start; padding: 16px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  transition: border-color .15s, transform .15s;
}
.poste:hover { border-color: var(--marca-borda); transform: translateY(-2px); }
.poste > header { display: flex; align-items: center; gap: 12px; }
.poste-nome { min-width: 0; }
.poste-nome b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.poste-nome i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.poste-gancho {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-2);
  padding-left: 11px; border-left: 2px solid var(--marca-borda);
}

/* Os sinais sao as features MEDIDAS — duracao, cortes, texto na tela. Sao as
 * que transferem de conta grande para pequena, e por isso sao o corpo do
 * cartao e nao um rodape. */
.sinais {
  display: grid; gap: 2px 22px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.sinais > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 12.5px;
  padding: 5px 0; border-bottom: 1px dashed var(--borda);
}
.sinais > div:last-child { border-bottom: 0; }
.sinais dt { color: var(--texto-3); }
.sinais dd { margin: 0; font-weight: 600; font-family: var(--mono); font-size: 11.5px; }
.sinal-alvo dd { color: var(--ok); }

/* ── panorama entre redes ────────────────────────────────────────────────── */

.panorama { display: grid; gap: 2px; }
.panorama-cabeca, .panorama-linha {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 12px; align-items: center; padding: 11px 14px;
}
.panorama-cabeca {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-3); font-weight: 700; padding-bottom: 6px;
}
.panorama-linha {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo-2); text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.panorama-linha:hover { border-color: var(--marca-borda); background: var(--marca-vefu); }
.panorama-linha.ligada { background: var(--fundo); border-color: var(--ok); }
.panorama-rede { display: flex; align-items: center; gap: 9px; min-width: 0; }
.panorama-rede b { font-size: 13.5px; font-weight: 600; }
.panorama-rede em { font-style: normal; }
.panorama-valor b { font-family: var(--serif); font-size: 19px; font-weight: 600; }
/* A celula vazia DIZ por que esta vazia. Um traco mudo faz a tela parecer
 * quebrada; o motivo faz a mesma celula virar o proximo passo. */
.panorama-falta { font-style: normal; font-size: 11.5px; color: var(--texto-3); }

/* ── sinais do nicho ─────────────────────────────────────────────────────── */

.sinais-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.sinal {
  display: grid; gap: 3px; padding: 13px 14px;
  border-radius: var(--raio); background: var(--fundo-2);
  border: 1px solid var(--borda); border-left-width: 3px;
}
.sinal.sobe { border-left-color: var(--ok); }
.sinal.desce { border-left-color: var(--alerta); }
.sinal-rotulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.sinal b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.sinal i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }

/* ── destaques na aba da marca ───────────────────────────────────────────── */

.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.destaque {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--fundo-2); text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.destaque:hover { border-color: var(--marca-borda); transform: translateY(-1px); }
.destaque-texto { min-width: 0; }
.destaque-texto b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.destaque-texto i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }

@media (max-width: 860px) {
  .fundamento-corpo, .analise-colunas { grid-template-columns: 1fr; gap: 18px; }
  .panorama-cabeca { display: none; }
  .panorama-linha { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .panorama-rede { grid-column: 1 / -1; }
}

/* ── o fundamento virou menu ─────────────────────────────────────────────── *
 *
 * Ele era uma faixa de largura inteira acima do chat. Fechada ja' custava
 * ~56px com a margem, e aberta empurrava a conversa para baixo — num painel
 * de altura travada, empurrar para baixo e' tirar linha de resposta.
 *
 * Agora e' um menu na propria linha do titulo: fechado nao ocupa altura
 * nenhuma, e aberto FLUTUA por cima. O conteudo e' o mesmo; o que mudou foi
 * parar de cobrar espaco permanente por informacao que se consulta uma vez. */

.fundamento {
  position: relative; flex: 0 0 auto;
  margin: 0; border: 0; background: transparent;
}
.fundamento summary {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--fundo);
  font-size: 12px; color: var(--texto-2); cursor: pointer;
  transition: border-color .15s;
}
.fundamento summary:hover { border-color: var(--marca-borda); }
.fundamento[open] summary { border-color: var(--marca-borda); background: var(--marca-vefu); }
.fundamento-mais {
  font-size: 11px; color: var(--texto-3);
  padding-left: 8px; border-left: 1px solid var(--borda);
}

/* FLUTUA, NAO EMPURRA. `position: absolute` e' o que mantem a altura do chat
 * intacta quando o menu abre. */
.fundamento-corpo {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 30;
  width: min(620px, calc(100vw - 56px));
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin: 0; padding: 18px 20px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra);
}

/* Com o menu fora do fluxo, o chat volta a ter altura. */
@media (max-width: 860px) {
  .fundamento-corpo { grid-template-columns: 1fr; gap: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * O ANALISTA FLUTUANTE
 *
 * Ele era uma aba, e como aba comecava a conversa a ~270px do topo: capa,
 * trilho e cabecalho comiam a altura antes da primeira mensagem, e numa tela
 * de notebook o campo de escrever caia para fora do viewport. Travar a altura
 * com `calc` nao resolveu de forma estavel, porque a capa muda de altura com
 * o tamanho do nome da marca.
 *
 * Como modal, a conversa tem a tela inteira e a altura e' uma fracao do
 * viewport — que o navegador mede sozinho, sem constante nenhuma no CSS.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── o ponto no canto ────────────────────────────────────────────────────── *
 *
 * E' O PULSO DO SONAR, e nao um balao de chat generico. O produto se chama
 * Sonar e o anel concentrico ja' e' a assinatura da marca em toda a tela —
 * usar aqui o mesmo gesto faz o botao pertencer ao produto. */
.analista-dot {
  position: fixed; right: 26px; bottom: 26px; z-index: 40;
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 15px; border-radius: 99px;
  background: var(--acento); color: var(--sobre-acento);
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--acento);
  box-shadow: 0 2px 6px rgb(20 20 30 / .18), 0 14px 34px rgb(20 20 30 / .22);
  transition: transform .16s, box-shadow .16s;
}
.analista-dot:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgb(20 20 30 / .2), 0 18px 42px rgb(20 20 30 / .28);
}
.analista-dot:active { transform: translateY(0); }
.analista-dot-conta {
  font: 11px/1 var(--mono); padding: 4px 7px; border-radius: 99px;
  background: rgb(255 255 255 / .22);
}
/* A contagem some no telefone junto do rotulo: o que precisa sobrar e' o
 * alvo de toque, nao a informacao. */
@media (max-width: 560px) {
  .analista-dot {
    right: 16px; bottom: 16px; padding: 0;
    width: 52px; height: 52px; justify-content: center;
  }
  .analista-dot-rotulo, .analista-dot-conta { display: none; }
}

/* ── o modal ─────────────────────────────────────────────────────────────── *
 *
 * `<dialog>` E NAO UMA DIV. Ele traz de graca o que um modal feito a mao erra:
 * Esc fecha, o foco fica preso dentro, o resto da pagina sai da arvore de
 * acessibilidade e o empilhamento nao depende de z-index chutado.
 *
 * `max-height: 86dvh` com `dvh`: no celular a barra do navegador entra e sai,
 * e com `vh` o compositor fica atras dela. */
.analista-modal {
  width: min(960px, calc(100vw - 32px));
  height: min(820px, 86vh); height: min(820px, 86dvh);
  max-width: none; max-height: none;
  padding: 0; border: 1px solid var(--borda); border-radius: var(--raio-g);
  background: var(--fundo); color: var(--texto);
  box-shadow: 0 10px 30px rgb(10 10 20 / .22), 0 40px 90px rgb(10 10 20 / .3);
  overflow: hidden;
}
.analista-modal[open] { display: flex; flex-direction: column; }
.analista-modal::backdrop { background: rgb(12 14 20 / .55); backdrop-filter: blur(3px); }

/* Sem JavaScript o `<dialog open>` renderiza no fluxo da pagina, sem fundo e
 * sem centralizar. Fixo e centrado a mao, o caminho degradado continua
 * parecendo um modal. */
.analista-modal[open]:not(:modal) {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 60;
}

.analista-topo {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px 13px 18px; border-bottom: 1px solid var(--borda);
  background: linear-gradient(180deg, var(--marca-vefu), transparent);
}
.analista-titulo { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.analista-titulo b { display: block; font-size: 14.5px; font-weight: 600; }
.analista-titulo i {
  font-style: normal; font-size: 11.5px; color: var(--texto-3);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.analista-marca { display: flex; flex: 0 0 auto; }
.analista-fechar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--texto-3); text-decoration: none;
  border: 1px solid transparent; transition: background .15s, color .15s;
}
.analista-fechar:hover { background: var(--fundo-3); color: var(--texto); }

/* A COLUNA FLEX PRECISA DE TODOS OS ELOS. `.conversa-app` perdeu o
 * `display: flex` quando o CSS da aba antiga foi removido, e o sintoma foi
 * exato: a area de rolagem voltou a crescer com o conteudo (1048px dentro de
 * uma caixa de 751px) e empurrou o compositor para fora do modal, que o
 * recortava com `overflow: hidden`. Sem o elo, nao ha' rolagem interna.
 *
 * Dentro do modal a conversa nao precisa de moldura propria: a moldura e' o
 * modal. */
.analista-modal .conversa-app {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  border: 0; border-radius: 0; background: transparent;
}
.analista-modal .conversa-rolagem { min-height: 0; padding: 20px 22px; }
.analista-modal .composer-app { padding: 13px 20px 16px; }

/* O menu de fundamento abre para a ESQUERDA aqui: encostado na direita do
 * cabecalho, ele sairia pela borda do modal. */
.analista-modal .fundamento-corpo {
  right: 0; width: min(560px, calc(100vw - 80px));
}

@media (max-width: 720px) {
  .analista-modal {
    width: 100vw; height: 100dvh; border-radius: 0; border: 0;
    max-width: none;
  }
  .analista-modal .conversa-rolagem { padding: 14px; }
}

/* ── a mecanica da rolagem do chat ───────────────────────────────────────── *
 *
 * Estas regras moravam no bloco da aba do assistente e foram embora com ela.
 * O lugar delas e' aqui: elas sao do COMPONENTE de conversa, nao da tela que
 * o hospedava — e e' por isso que ele pode viver num modal sem reescrever
 * nada.
 *
 * A CADEIA TEM QUE ESTAR INTEIRA: modal (flex, altura travada) ->
 * .conversa-app (flex, min-height 0) -> .conversa-rolagem (flex 1,
 * min-height 0, overflow auto). Falta um elo e a area de rolagem volta a
 * crescer com o conteudo e empurra o compositor para fora da caixa — que foi
 * exatamente o que aconteceu quando `.conversa-app` perdeu o `display: flex`.
 *
 * `min-height: 0` nao e' detalhe: o default de um item flex e' `auto`, que
 * usa o tamanho do conteudo como piso e impede o encolhimento. */
.conversa-app { display: flex; flex-direction: column; min-height: 0; }

.conversa-rolagem {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: 13px; align-content: start;
  padding: 18px 20px; margin: 0;
  /* `scroll-behavior: auto` de proposito: a suavidade e' pedida no JS, e
   * declarada aqui ela venceria o `behavior` do `scrollTo` — era o que fazia
   * a conversa abrir no topo em vez de na ultima resposta. */
  scroll-behavior: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent;
}
.conversa-rolagem::-webkit-scrollbar { width: 9px; }
.conversa-rolagem::-webkit-scrollbar-thumb {
  background: var(--borda-forte); border-radius: 99px;
  border: 3px solid var(--fundo);
}
.conversa-rolagem::-webkit-scrollbar-track { background: transparent; }

/* O compositor fica FORA da area que rola: e' o que o mantem a' vista com a
 * conversa em qualquer posicao. */
.composer-app {
  flex: 0 0 auto; position: static; margin: 0;
  padding: 13px 20px 16px;
  border-top: 1px solid var(--borda); background: var(--fundo-2);
}
.composer-app::before { display: none; }
.composer-app .sugestoes {
  justify-content: flex-start; margin-bottom: 9px; gap: 7px;
}
.composer-app .chip {
  opacity: 1; cursor: pointer; padding: 7px 12px; font-size: 12.5px;
}
.composer-app .chip:hover { background: var(--acento-fundo); border-color: var(--acento-borda); }
.composer-app .campo:disabled { background: var(--fundo-2); cursor: not-allowed; }
.composer-app .botao:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 720px) {
  /* No telefone os atalhos rolam na horizontal em vez de empilhar em tres
   * fileiras e comerem metade da conversa. */
  .composer-app .sugestoes {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px;
    scrollbar-width: none;
  }
  .composer-app .sugestoes::-webkit-scrollbar { display: none; }
  .composer-app .chip { flex: 0 0 auto; }
  .composer-app { padding: 11px 14px 13px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * AS ABAS NOVAS E O SINO
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── o sino ──────────────────────────────────────────────────────────────── *
 *
 * Fica na barra da CONTA, e nao na aba de nenhuma marca: quem cuida de dez
 * clientes so' descobre que o Instagram de um caiu quando o cliente reclama. */
.sino { position: relative; }
.sino summary {
  display: grid; place-items: center; cursor: pointer; list-style: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fundo); color: var(--texto-2);
  border: 1px solid var(--borda);
  transition: color .15s, border-color .15s;
}
.sino summary::-webkit-details-marker { display: none; }
.sino summary::marker { content: ''; }
.sino summary:hover { color: var(--texto); border-color: var(--borda-forte); }
.sino[open] summary { color: var(--texto); border-color: var(--borda-forte); }

/* A CONTAGEM SO' SOMA O QUE PEDE ACAO. Um numero que inclui sugestao de
 * melhoria nunca chega a zero, e sino que nunca zera e' sino que se ignora. */
.sino-conta {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 99px; background: var(--alerta); color: #fff;
  font: 700 10px/1 var(--mono);
  border: 2px solid var(--fundo-2);
}

.sino-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 50;
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 560px); overflow-y: auto;
  padding: 6px; border-radius: var(--raio-g);
  background: var(--fundo); border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  scrollbar-width: thin;
}
.sino-topo {
  display: flex; align-items: baseline; gap: 7px;
  margin: 0; padding: 10px 12px 11px; border-bottom: 1px solid var(--borda);
  font-size: 13px; color: var(--texto-2);
}
.sino-topo b { font-size: 15px; color: var(--texto); }
.sino-topo i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.sino-vazio {
  margin: 0; padding: 16px 12px; font-size: 12.5px;
  color: var(--texto-3); line-height: 1.5;
}

/* O GRAU E' A ORDEM DE LEITURA, e vem na borda: 'parado' significa que o
 * produto deixou de funcionar para aquela marca e alguem age hoje. */
.sinal-linha {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; border-left: 3px solid transparent;
  border-radius: var(--raio);
}
.sinal-linha:hover { background: var(--fundo-2); }
.sinal-linha.parado { border-left-color: var(--alerta); }
.sinal-linha.atencao { border-left-color: #d9a21b; }
.sinal-linha.ajuste { border-left-color: var(--borda-forte); }
.sinal-marca { flex: 0 0 auto; padding-top: 1px; }
.sinal-texto { flex: 1; min-width: 0; }
.sinal-texto b { font-size: 13px; font-weight: 600; display: block; }
.sinal-texto i {
  font-style: normal; font-size: 11px; color: var(--texto-3);
  display: block; margin-top: 1px;
}
.sinal-texto p {
  margin: 5px 0 0; font-size: 11.5px; color: var(--texto-2); line-height: 1.45;
}
.sinal-acao {
  flex: 0 0 auto; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 6px 11px; border-radius: 99px;
  background: var(--acento-fundo); color: var(--acento);
  border: 1px solid var(--acento-borda);
}
.sinal-acao:hover { filter: brightness(.97); }

/* ── a semana do plano ───────────────────────────────────────────────────── *
 *
 * `auto-fit` com faixa larga: com peca estreita, a especificacao de tres
 * linhas vira coluna de uma palavra; com `auto-fill`, a ultima fileira
 * incompleta deixaria trilha vazia. */
.pecas-semana {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 12px;
}
.peca-plano {
  display: grid; gap: 11px; align-content: start; padding: 16px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  transition: border-color .15s, transform .15s;
}
.peca-plano:hover { border-color: var(--marca-borda); transform: translateY(-2px); }
.peca-plano > header { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.peca-plano-ordem {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--marca-vefu); color: var(--marca-texto);
  font: 700 12px/1 var(--mono);
}
.peca-plano-share {
  margin-left: auto; font-size: 11px; color: var(--texto-3);
  display: flex; align-items: baseline; gap: 6px;
}
.peca-plano-share .delta { font-size: 11px; }
.peca-plano-tema {
  margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4;
  padding-left: 11px; border-left: 2px solid var(--marca-borda);
}

/* ── a defasagem que ainda nao foi medida ────────────────────────────────── *
 *
 * E' a secao mais valiosa da aba e a unica sem numero. Ela e' grande de
 * proposito: o espaco vazio aqui NAO e' falha de layout, e' a promessa do
 * produto esperando medicao — e desenhar numero chutado nela queimaria
 * justamente a feature que esta sendo construida para vender. */
.defasagem {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 28px;
  padding: 30px 32px; border-radius: var(--raio-g);
  border: 1px dashed var(--instrumento-borda);
  background: var(--instrumento);
}
/* A VARREDURA E' DECORACAO ABSOLUTA DE 460px. Posta no fluxo com `static`,
 * ela trouxe a propria altura junto e abriu ~500px de vazio dentro do bloco —
 * o anel ficou maior que o texto que ele deveria acompanhar. Aqui ela volta a
 * ser absoluta, ancorada a' esquerda, com tamanho proprio. */
.defasagem .varredura {
  position: absolute; top: 50%; left: 34px;
  width: 150px; height: 150px; margin: -75px 0 0;
}
.defasagem-texto { position: relative; z-index: 1; margin-left: 186px; }
.defasagem-texto { flex: 1; min-width: 0; color: var(--instrumento-texto); }
.defasagem-texto h2 {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 0 0 10px; font-family: var(--serif); font-size: 23px;
  font-weight: 600; letter-spacing: -.02em;
}
.defasagem-texto p {
  margin: 0 0 10px; font-size: 13.5px; line-height: 1.6;
  color: var(--instrumento-fraco); max-width: 74ch;
}
.defasagem-texto p:last-child { margin-bottom: 0; }
.defasagem-texto b { color: var(--instrumento-texto); }
.defasagem-aviso {
  padding-top: 11px; border-top: 1px solid var(--instrumento-regua);
  font-size: 12.5px !important;
}

/* ── a fila de observacao ────────────────────────────────────────────────── */

.observar { display: grid; gap: 10px; margin-top: 16px; }
.observar .linha > select.campo { width: 132px; }

.observadas { display: grid; gap: 9px; }
.observada {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--raio);
  background: var(--fundo); border: 1px solid var(--borda);
}
.observada-texto { flex: 1; min-width: 0; }
.observada-texto b { display: block; font-size: 13.5px; font-weight: 600; }
.observada-texto i {
  font-style: normal; font-size: 11.5px; color: var(--texto-3);
  display: block; margin-top: 2px;
}

@media (max-width: 720px) {
  .defasagem { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
  /* No telefone o anel sai: com a coluna estreita ele atravessaria o texto. */
  .defasagem .varredura { display: none; }
  .defasagem-texto { margin-left: 0; }
  .observar .linha { flex-wrap: wrap; }
  .observar .linha > select.campo { width: 100%; }
  .sino-menu { width: calc(100vw - 24px); right: -8px; }
}

/* O tema que volta na semana. Marca discreta: a informacao e' "voce ja' viu
 * este assunto", nao um alerta. */
.peca-plano-repete {
  display: inline-block; margin-left: 6px;
  font-size: 10.5px; font-weight: 400; color: var(--texto-3);
  padding: 2px 7px; border-radius: 99px; background: var(--fundo-3);
}

/* As que ja' sairam: linhas finas, sem cartao. Nao pedem nada de ninguem, e
 * cartao do mesmo tamanho das que esperam midia disputaria a atencao com
 * elas. */
.sairam { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--borda); }
.sairam header { display: flex; justify-content: space-between; gap: 10px;
                 align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
.sairam header b { font-size: 12.5px; color: var(--texto-2); }
.sairam header a { font-size: 11.5px; color: var(--marca-texto); }
.saiu { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
        padding: 6px 2px; border-bottom: 1px dashed var(--borda); }
.saiu:last-child { border-bottom: 0; }
.saiu span { font-size: 12.5px; color: var(--texto-2); }
.saiu i { font-style: normal; font-size: 11px; color: var(--texto-3); }

/* ── montar a arte ───────────────────────────────────────────────────────── */
.montar-arte { display: grid; gap: 16px; }
.capas-campos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.capas-campos li { display: grid; gap: 4px; }
.capas-campos li.fechamento { padding-top: 10px; border-top: 1px dashed var(--borda); }
.capa-rotulo { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.montar-arte-botao { justify-self: start; width: fit-content; margin: 2px 0 4px; }

/* ── o modo da unidade ───────────────────────────────────────────────────── *
 *
 * A FAIXA DIZ O QUE ACONTECE COM A SEMANA. Discreta em Direcao (e' so'
 * informacao), com o botao em Montagem (e' o proximo passo). */
.modo-faixa {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 12px 15px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
}
.modo-faixa.montagem { border-color: var(--marca-borda); background: var(--marca-vefu); }
.modo-faixa > div { flex: 1 1 280px; display: grid; gap: 3px; }
.modo-faixa b { font-size: 13.5px; color: var(--texto); }
.modo-faixa span { font-size: 12px; line-height: 1.45; color: var(--texto-2); }

.modo-escolha .campo { padding: 6px 30px 6px 10px; font-size: 12.5px; width: auto; }
.modos-legenda { display: grid; gap: 8px; margin: 14px 0 0; }
.modos-legenda > div { display: grid; gap: 2px; }
.modos-legenda dt { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.modos-legenda dt i { font-style: normal; font-weight: 400; color: var(--texto-3); }
.modos-legenda dd { margin: 0; font-size: 12px; color: var(--texto-2); }
.modos-legenda .indisponivel dt, .modos-legenda .indisponivel dd { opacity: .6; }

.unidade-estado.fora_do_sonar { background: var(--fundo-3); color: var(--texto-2); }

/* ── a equipe da marca ───────────────────────────────────────────────────── *
 *
 * O LINK E' A PECA PRINCIPAL DA LINHA. E' ele que a matriz vai mandar, entao
 * fica num campo de texto selecionavel com um clique, e o botao do WhatsApp do
 * lado — o caminho que o dono de academia de fato usa. */
.convidar { display: grid; gap: 14px; }
.papeis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }
.ajuda-campo { font-size: 11.5px; color: var(--texto-3); margin-top: -6px; }

.convites { display: grid; gap: 7px; }
.convite-linha {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
}
.convite-linha.novo { border-color: var(--marca-borda); background: var(--marca-vefu); }
.convite-quem { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.convite-quem b { font-size: 13.5px; color: var(--texto); overflow-wrap: anywhere; }
.convite-quem i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.convite-link {
  flex: 2 1 260px; min-width: 0;
  font: 11.5px/1.3 var(--mono); color: var(--texto-2);
}
.convite-acoes { display: flex; gap: 6px; flex: 0 0 auto; }

/* ── a rede, unidade a unidade ───────────────────────────────────────────── *
 *
 * A ORDEM E' DE QUEM PRECISA DE ATENCAO, e a cor acompanha: a matriz nao abre
 * esta tela para elogiar. Quem esta' parado ou sem conta ganha a borda
 * marcada; quem esta' na mediana nao chama atencao nenhuma, que e' o certo. */
.unidades-grade { display: grid; gap: 7px; }
.unidade-linha {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 13px 15px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
  border-left-width: 3px; border-left-color: var(--borda);
}
.unidade-linha.parada, .unidade-linha.sem_conta {
  border-left-color: var(--alerta);
}
.unidade-linha.abaixo { border-left-color: var(--texto-3); }
.unidade-linha.acima { border-left-color: var(--ok); }

.unidade-nome { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.unidade-nome b { font-size: 13.5px; color: var(--texto); }
.unidade-nome i {
  font-style: normal; font-size: 11.5px; color: var(--texto-3);
}
.unidade-numero {
  flex: 0 0 auto; display: grid; gap: 1px; min-width: 76px;
}
.unidade-numero b { font: 600 17px/1 var(--mono); color: var(--texto); }
.unidade-numero span { font-size: 10.5px; color: var(--texto-3); }
.unidade-estado {
  flex: 0 0 auto; font-size: 11px; padding: 4px 9px; border-radius: 99px;
  background: var(--fundo-3); color: var(--texto-3);
}
.unidade-estado.parada, .unidade-estado.sem_conta {
  background: var(--alerta-fundo); color: var(--alerta);
}
.unidade-estado.acima { background: var(--ok-fundo); color: var(--ok); }

@media (max-width: 640px) {
  .unidade-numero { min-width: 62px; }
}

/* ── quem chamou depois de cada peca ─────────────────────────────────────── *
 *
 * O NUMERO VEM PRIMEIRO E E' GRANDE. E' a unica coisa desta aba que o dono de
 * academia reconhece como resultado — "doze pessoas me chamaram" — e enterrar
 * isso em letra de corpo seria desperdicar o argumento inteiro. */
.conversas-lista { display: grid; gap: 6px; }
.conversa-linha {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 13px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
}
.conversa-linha > b {
  flex: 0 0 auto; min-width: 34px; text-align: right;
  font: 600 20px/1 var(--mono); color: var(--marca-texto);
}
.conversa-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.conversa-texto span { font-size: 13px; color: var(--texto); }
.conversa-texto i {
  font-style: normal; font-size: 11px; color: var(--texto-3);
}

/* ── onde o ano esta' ────────────────────────────────────────────────────── *
 *
 * A CONTAGEM E' O ARGUMENTO. "Faltam 11 semanas para o pico de janeiro" e' a
 * frase que uma ferramenta sem nicho nao consegue dizer — por isso o numero
 * fica do tamanho dos outros numeros da leitura, e nao em letra de rodape. */
.momento {
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  margin: 2px 0 16px; padding: 13px 15px;
  border: 1px solid var(--marca-borda); border-radius: var(--raio);
  background: var(--marca-vefu);
}
.momento-agora { flex: 1 1 260px; display: grid; gap: 3px; }
.momento-agora b { font-size: 13.5px; color: var(--marca-texto); }
.momento-agora span { font-size: 12px; line-height: 1.45; color: var(--texto-2); }
.momento-marco {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px;
  padding-left: 22px; border-left: 1px solid var(--borda);
}
.momento-marco b { font: 600 24px/1 var(--serifa, inherit); color: var(--texto); }
.momento-marco span { font-size: 11.5px; line-height: 1.35; color: var(--texto-3); }

/* A QUEM A PECA FALA. Discreto de proposito: e' leitura de apoio, nao
 * etiqueta de estado. So' o eixo do mes ganha a cor da marca — e' ele que
 * explica por que a semana mudou de assunto. */
.eixo {
  /* `justify-self` porque o cartao da peca e' grid: sem isto o selo estica
   * na largura toda e vira barra, que le como estado e nao como etiqueta. */
  display: inline-block; justify-self: start; width: fit-content;
  margin-top: 7px;
  font-size: 10.5px; line-height: 1; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 99px;
  border: 1px solid var(--borda); color: var(--texto-3);
}
.eixo-foco {
  border-color: var(--marca-borda); background: var(--marca-vefu);
  color: var(--marca-texto); font-weight: 600;
}

/* ── o roteiro de gravacao ───────────────────────────────────────────────── *
 *
 * A ESPECIFICACAO E' PARA QUEM SABE EXECUTAR; O ROTEIRO E' PARA QUEM NAO
 * SABE. Fechado por padrao porque sete pecas com cinco passos cada viram uma
 * parede de texto — e quem ja' le' "7,4 cortes por 10 s" nao precisa abrir. */
.roteiro { margin-top: 10px; border-top: 1px solid var(--borda); }
.roteiro summary {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 0 0; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; color: var(--marca-texto);
}
.roteiro summary::-webkit-details-marker { display: none; }
.roteiro summary::before {
  content: ''; width: 5px; height: 5px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.roteiro[open] summary::before { transform: rotate(45deg); }
.roteiro summary span {
  font: 10.5px/1 var(--mono); font-weight: 400; color: var(--texto-3);
}
.roteiro-precisa {
  margin: 9px 0 0; font-size: 11.5px; color: var(--texto-3);
}
.roteiro ol { margin: 8px 0 2px; padding-left: 19px; display: grid; gap: 5px; }
.roteiro li { font-size: 12.5px; line-height: 1.45; color: var(--texto-2); }
.roteiro li::marker { color: var(--texto-3); font-family: var(--mono); font-size: 11px; }

/* LARGURA E APARENCIA SAO CLASSES DIFERENTES. `.peca` da' fundo, borda e
 * raio; `.peca-regra` e as demais dao span. Trocar uma pela outra para mudar
 * largura tira o cartao junto — foi o que deixou "Regras que respeito" como
 * texto solto no fundo da pagina.
 *
 * Esta regra existe porque `.peca-regra` (span 6) vence `.peca-larga` por vir
 * depois no arquivo. Com as tres classes, a especificidade resolve. */
.peca.peca-regra.peca-larga { grid-column: span 4; }

/* ── a travessia que ainda nao foi medida ────────────────────────────────── *
 *
 * As duas pontas sao fato: o conteudo sobe no TikTok e aparece no Reels. O que
 * falta e' a MEDIDA da travessia — quantos dias e que proporcao. Desenhar as
 * duas incognitas como incognitas preenche a faixa com o mecanismo da
 * pergunta, em vez de deixar o espaco vazio ou, pior, de encher com um numero
 * plausivel que ninguem mediu. */
.travessia {
  flex: 0 0 auto; display: flex; align-items: center; gap: 22px;
  padding: 20px 26px; border-radius: var(--raio-g);
  background: rgb(var(--marca-rgb) / .05);
  border: 1px solid var(--instrumento-regua);
}
.travessia-ponta { display: grid; justify-items: center; gap: 7px; }
.travessia-ponta span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--instrumento-fraco);
}
.travessia-meio { display: grid; justify-items: center; gap: 9px; }
.travessia-incognita {
  font: 600 12px/1 var(--mono); color: var(--instrumento-fraco);
  padding: 4px 9px; border-radius: 99px;
  border: 1px dashed var(--instrumento-borda);
}
.travessia-seta {
  width: 118px; height: 1px; position: relative;
  background: linear-gradient(90deg, transparent, var(--instrumento-borda));
}
.travessia-seta::after {
  content: ""; position: absolute; right: 0; top: -3px;
  border: 3.5px solid transparent; border-left-color: var(--instrumento-borda);
}
@media (max-width: 1100px) { .travessia { display: none; } }

/* ── as secoes do painel ─────────────────────────────────────────────────── *
 *
 * O PROBLEMA QUE ISTO RESOLVE: depois dos dois blocos grandes, a tela virava
 * uma parede de cartoes pequenos com rotulinho em caixa alta, sem nada
 * dizendo o que agrupa um com o outro. Cada cartao se explicava; o conjunto
 * nao.
 *
 * Cada secao responde UMA pergunta, e o subtitulo e' onde ela aparece escrita.
 * Secao sem pergunta propria e' secao que existe so' para decorar — e ai' e'
 * melhor nao ter.
 *
 * A REGUA E' FINA E O FUNDO NAO MUDA. Caixa dentro de caixa faz a tela
 * parecer formulario; o que separa aqui e' o espaco e um fio.
 *
 * Cada secao tem o SEU proprio `.tabuleiro`, e as colunas continuam alinhadas
 * de uma secao para outra porque todas tem a mesma geometria: 6 colunas no
 * mesmo container. */
.secao-painel { margin-bottom: 30px; }
.secao-painel > .tabuleiro { margin-bottom: 0; }

.secao-cabeca {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}
.secao-cabeca h2 {
  margin: 0; font-family: var(--serif); font-size: 19px;
  font-weight: 600; letter-spacing: -.015em;
}
/* `max-width` em `ch` porque o limite de leitura e' em CARACTERES, nao em
 * pixels: a 1360px a frase corria a largura inteira e o olho perdia a linha na
 * volta. 78 caracteres e' o teto confortavel para texto de apoio. */
.secao-cabeca p {
  margin: 0; flex: 1; min-width: 200px; max-width: 78ch;
  font-size: 12.5px; color: var(--texto-3); line-height: 1.5;
}
.secao-cabeca .etiqueta { flex: 0 0 auto; }

@media (max-width: 640px) {
  .secao-cabeca h2 { font-size: 17px; }
  .secao-cabeca p { min-width: 0; }
}

/* ── filiais ─────────────────────────────────────────────────────────────── *
 *
 * O seletor so' existe a partir da SEGUNDA unidade. Quem tem um endereco so'
 * nunca ve' que esta tabela existe — a tela fica identica ao que sempre foi. */
.filial { position: relative; display: inline-block; margin: 2px 0 1px; }
.filial summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  list-style: none; padding: 4px 10px 4px 9px; border-radius: 99px;
  border: 1px solid var(--marca-borda); background: var(--marca-vefu);
  font-size: 12px; color: var(--texto-2);
}
.filial summary::-webkit-details-marker { display: none; }
.filial summary::marker { content: ''; }
.filial summary b { font-weight: 600; color: var(--texto); }
.filial summary svg { color: var(--marca-texto); flex: 0 0 auto; }
.filial-conta {
  font: 10.5px/1 var(--mono); color: var(--texto-3);
  padding-left: 7px; border-left: 1px solid var(--marca-borda);
}
.filial-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 30;
  width: min(320px, calc(100vw - 48px)); padding: 6px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra);
}
.filial-rotulo {
  margin: 4px 8px 7px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-3); font-weight: 700;
}
.filial-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--raio);
  background: transparent; cursor: pointer; font: inherit; text-align: left;
}
.filial-item:hover { background: var(--fundo-2); }
.filial-item.aqui { background: var(--marca-vefu); }
.filial-nome { display: grid; line-height: 1.3; flex: 1; min-width: 0; }
.filial-nome b { font-size: 13px; font-weight: 600; }
.filial-nome i { font-style: normal; font-size: 11px; color: var(--texto-3); }
.filial-item em {
  font-style: normal; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-3);
}
.filial-gerir {
  display: block; margin-top: 4px; padding: 9px 10px;
  border-top: 1px solid var(--borda); font-size: 12.5px;
  color: var(--acento); text-decoration: none;
}
.filial-gerir:hover { background: var(--fundo-2); }

/* O agrupamento do panorama: com filial a pergunta deixa de ser "qual rede
 * parou" e vira "qual LOJA parou". */
.panorama-grupo {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 12px 0 3px; padding: 0 14px;
}
.panorama-grupo:first-child { margin-top: 2px; }
.panorama-grupo b { font-size: 13px; font-weight: 600; }
.panorama-grupo i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.panorama-grupo-conta {
  margin-left: auto; font: 10.5px/1 var(--mono); color: var(--texto-3);
}
.panorama-grupo-conta.vazia { color: var(--alerta); }

.unidades { display: grid; gap: 9px; }
.unidade {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--raio);
  background: var(--fundo-2); border: 1px solid var(--borda);
}
.unidade.aqui { border-color: var(--marca-borda); background: var(--marca-vefu); }
.unidade-texto { flex: 1; min-width: 0; }
.unidade-texto b { display: block; font-size: 13.5px; font-weight: 600; }
.unidade-texto i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.unidade-selo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--marca-texto);
}

/* ── a fila de publicação ────────────────────────────────────────────────── *
 *
 * O ESTADO E' O QUE A TELA MOSTRA PRIMEIRO. Publicar e' a unica acao deste
 * produto que sai para fora: "agendada" e "publicada" nao podem se parecer. */
.fila { display: grid; gap: 11px; }
.peca-fila {
  display: grid; gap: 10px; padding: 15px 16px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-left-width: 3px; border-radius: var(--raio-g);
}
.peca-fila.rascunho { border-left-color: var(--borda-forte); }
.peca-fila.agendada { border-left-color: var(--acento); }
.peca-fila.enviando { border-left-color: #d9a21b; }
.peca-fila.publicada { border-left-color: var(--ok); }
.peca-fila.falhou { border-left-color: var(--alerta); }
.peca-fila > header { display: flex; align-items: center; gap: 11px; }
.peca-fila-nome { flex: 1; min-width: 0; }
.peca-fila-nome b { display: block; font-size: 14px; font-weight: 600; }
.peca-fila-nome i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.peca-fila-legenda {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-2);
  padding-left: 11px; border-left: 2px solid var(--borda);
}
.peca-fila-audio { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12.5px; }
.peca-fila-audio em { font-style: normal; }
.peca-fila-erro {
  margin: 0; padding: 9px 11px; border-radius: var(--raio);
  background: var(--alerta-fundo); color: var(--alerta);
  font-size: 12.5px; line-height: 1.5;
}
.peca-fila-nota { margin: 0; font-size: 11.5px; color: var(--texto-3); }
.peca-fila > footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.estado-peca {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 99px;
  background: var(--fundo-3); color: var(--texto-2);
}
.estado-peca.agendada { background: var(--acento-fundo); color: var(--acento); }
.estado-peca.publicada { background: var(--ok-fundo); color: var(--ok); }
.estado-peca.falhou { background: var(--alerta-fundo); color: var(--alerta); }

.agendar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.agendar .campo { width: auto; padding: 8px 11px; font-size: 12.5px; }
/* A MARCACAO DE IMPULSIONAR E' O QUE ARMA A TRAVA DE LICENCA. Audio de
 * consumidor e' permitido no organico e proibido no pago — sem a pessoa
 * declarar a intencao, o produto teria que escolher entre bloquear o que e'
 * legal ou liberar o que nao e'. */
.impulsionar {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--texto-2); cursor: pointer;
}

/* ── a aba Postagem ──────────────────────────────────────────────────────── *
 *
 * A REDE VEM PRIMEIRO porque a fila e' por rede: Instagram e TikTok sao duas
 * listas diferentes, e a pessoa alterna entre elas o tempo todo. */
.rede-trilho { display: flex; gap: 8px; margin-bottom: 22px; }
.rede-trilho a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--fundo);
  text-decoration: none; color: var(--texto-2);
  transition: border-color .15s, background .15s;
}
.rede-trilho a:hover { border-color: var(--borda-forte); }
.rede-trilho a.aqui {
  border-color: var(--marca-borda); background: var(--marca-vefu);
  color: var(--texto);
}
.rede-trilho b { font-size: 13.5px; font-weight: 600; }
.rede-trilho span {
  font: 11px/1 var(--mono); padding: 3px 7px; border-radius: 99px;
  background: var(--fundo-3); color: var(--texto-3);
}
.rede-trilho a.aqui span { background: var(--fundo); color: var(--marca-texto); }

/* ── as sub-abas da postagem: Fila | Montar ──────────────────────────────── *
 *
 * O TRILHO DE REDE E' PILULA, A SUB-ABA E' SUBLINHADO. Duas fileiras de
 * pilulas iguais, uma embaixo da outra, nao contariam qual das duas escolhas
 * contem a outra — a forma e' que diz a hierarquia, nao a posicao.
 *
 * O sublinhado usa `--marca-texto` e nao `--marca-borda`: dois pixels de cor
 * da marca precisam ser vistos, e e' o token com contraste garantido (4.5).
 * Com `--marca-borda`, que e' translucido para servir de contorno, a aba ativa
 * ficava indistinguivel da inativa em paleta clara. */
.vista-trilho {
  display: flex; gap: 2px; margin: 0 0 20px;
  border-bottom: 1px solid var(--borda);
}
.vista-trilho a {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  text-decoration: none; color: var(--texto-3);
  font-size: 13px; font-weight: 600;
  transition: color .15s, border-color .15s;
}
.vista-trilho a:hover { color: var(--texto); }
.vista-trilho a.aqui { color: var(--texto); border-bottom-color: var(--marca-texto); }
.vista-trilho span {
  font: 11px/1 var(--mono); padding: 3px 7px; border-radius: 99px;
  background: var(--fundo-3); color: var(--texto-3);
}
.vista-trilho a.aqui span { background: var(--marca-vefu); color: var(--marca-texto); }

/* `[hidden]` e' regra do navegador e PERDE para qualquer classe que defina
 * `display`. Sem este `!important` a vista escondida continuaria na tela —
 * o mesmo tropeco de `.peca` x `.peca-larga`, com outro nome. */
[hidden] { display: none !important; }

.montar { display: grid; gap: 15px; }
.montar-formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.formato-opcao { position: relative; display: block; cursor: pointer; }
.formato-opcao input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.formato-opcao span {
  display: grid; gap: 3px; padding: 11px 13px; border-radius: var(--raio);
  border: 1px solid var(--instrumento-borda); background: transparent;
  transition: border-color .15s, background .15s;
}
.formato-opcao input:checked + span {
  border-color: var(--marca-borda); background: var(--marca-vefu);
}
.formato-opcao b { font-size: 13.5px; font-weight: 600; color: var(--instrumento-texto); }
.formato-opcao i {
  font-style: normal; font-size: 11.5px; line-height: 1.45;
  color: var(--instrumento-fraco);
}
.montar textarea.campo { resize: vertical; font: inherit; }

.do-plano { display: grid; gap: 7px; }
.do-plano-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: var(--raio); cursor: pointer;
  border: 1px solid var(--borda); background: var(--fundo-2);
  font: inherit; text-align: left;
}
.do-plano-item:hover { border-color: var(--marca-borda); background: var(--marca-vefu); }
.do-plano-tema { flex: 1; min-width: 0; font-size: 12.5px; }
.do-plano-item em {
  font-style: normal; font-size: 11px; font-weight: 600; color: var(--acento);
}

/* ── as mídias da peça ───────────────────────────────────────────────────── *
 *
 * A MIDIA APARECE. Uma fila que mostra so' o nome do arquivo obriga a abrir
 * cada peca para saber o que vai sair — e anexar o video errado so' apareceria
 * depois de publicado. O numero embaixo e' a ORDEM, que no carrossel e'
 * conteudo: a primeira capa e' o gancho, a ultima fecha com o que fazer. */
.midias { display: flex; flex-wrap: wrap; gap: 8px; }
.midia {
  position: relative; margin: 0; width: 78px; height: 104px;
  border-radius: 10px; overflow: hidden; background: var(--fundo-3);
  border: 1px solid var(--borda);
}
.midia img, .midia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.midia figcaption {
  position: absolute; left: 5px; bottom: 5px;
  min-width: 17px; padding: 1px 5px; border-radius: 99px;
  background: rgb(10 12 18 / .66); color: #fff;
  font: 700 10px/1.6 var(--mono); text-align: center;
}
.midia-tipo {
  position: absolute; right: 5px; top: 5px; padding: 2px 6px;
  border-radius: 99px; background: rgb(10 12 18 / .66); color: #fff;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
}
.midia-tirar {
  position: absolute; right: 4px; bottom: 4px;
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 0; background: rgb(10 12 18 / .66); color: #fff;
  font-size: 13px; line-height: 1; padding: 0;
}
.midia-tirar:hover { background: var(--alerta); }

.midia-mais label {
  display: grid; place-items: center; cursor: pointer;
  width: 78px; height: 104px; border-radius: 10px;
  border: 1px dashed var(--borda-forte); color: var(--texto-3);
  font-size: 22px;
}
.midia-mais label:hover { border-color: var(--marca-borda); color: var(--marca-texto); }
.midia-mais input { display: none; }

.sem-midia { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sem-midia .campo { flex: 1; min-width: 200px; padding: 8px 11px; font-size: 12.5px; }

/* ── <button> NAO HERDA `color` ──────────────────────────────────────────── *
 *
 * `font: inherit` resolve a fonte e NAO resolve a cor: o botao fica com o
 * `buttontext` do sistema, que e' preto. Em tema claro ninguem percebe; no
 * escuro o texto some no fundo escuro — foi o que aconteceu na lista "direto
 * do plano" e no seletor de filial.
 *
 * A regra vale para todo botao que o produto usa como LINHA DE LISTA, e nao
 * como botao de acao (esses ja' declaram a propria cor). Fica num lugar so'
 * para o proximo nascer certo. */
.do-plano-item,
.filial-item,
.perfil-marca,
.midia-mais label { color: var(--texto); }
.do-plano-tema, .filial-nome b, .perfil-marca-texto b { color: var(--texto); }

/* ── o seletor de arquivo com a cara da pagina ───────────────────────────── *
 *
 * O `<input type="file">` nativo desenha o botao do SISTEMA OPERACIONAL —
 * cinza, com a fonte do sistema e o texto "Nenhum arquivo escolhido". Fica
 * fora de qualquer desenho, e em tema escuro vem claro no meio do escuro.
 *
 * `::file-selector-button` estiliza so' o botao e deixa o resto (o nome do
 * arquivo) no lugar, que e' o que se quer: a pessoa continua vendo o que
 * anexou. */
input[type="file"].campo {
  padding: 7px 9px; font-size: 12.5px; color: var(--texto-2);
  cursor: pointer;
}
input[type="file"].campo::file-selector-button {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  margin-right: 11px; padding: 7px 14px;
  border-radius: 9px; border: 1px solid var(--borda-forte);
  background: var(--fundo-2); color: var(--texto);
  transition: border-color .15s, background .15s;
}
input[type="file"].campo::file-selector-button:hover {
  border-color: var(--marca-borda); background: var(--marca-vefu);
}

/* ── o que cada post alcancou ────────────────────────────────────────────── *
 *
 * O MESMO DESENHO DA REDE UNIDADE A UNIDADE, um nivel abaixo: la' a unidade
 * contra as irmas, aqui o post contra a propria conta. A borda so' ganha cor
 * quando ha' o que dizer — estourou ou ficou abaixo. Estado tambem vai em
 * palavra, nunca so' em cor. */
.rende-lista { display: grid; gap: 7px; }
.rende-linha {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
  border-left-width: 3px; border-left-color: var(--borda);
}
.rende-linha.estourou { border-left-color: var(--acento); }
.rende-linha.acima { border-left-color: var(--ok); }
.rende-linha.abaixo { border-left-color: var(--texto-3); }
.rende-nome { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.rende-nome b, .rende-nome a {
  font-size: 13.5px; font-weight: 600; color: var(--texto);
  overflow-wrap: anywhere;
}
.rende-nome a { text-decoration: none; }
.rende-nome a:hover { text-decoration: underline; }
.rende-nome i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.rende-numero { flex: 0 0 auto; display: grid; gap: 1px; min-width: 76px; }
.rende-numero b { font: 600 17px/1 var(--mono); color: var(--texto); }
.rende-numero span { font-size: 10.5px; color: var(--texto-3); }
.rende-estado {
  flex: 0 0 auto; font-size: 11px; padding: 4px 9px; border-radius: 99px;
  background: var(--fundo-3); color: var(--texto-3); white-space: nowrap;
}
.rende-estado.estourou { background: var(--acento-fundo); color: var(--acento); font-weight: 600; }
.rende-estado.acima { background: var(--ok-fundo); color: var(--ok); }

.aviso-coleta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
}
.aviso-coleta p { margin: 0; flex: 1 1 240px; font-size: 13px; color: var(--texto-2); }

/* O selo tem largura fixa pelo mesmo motivo da coluna vazia: "4,8× estourou"
 * e "1,0× no seu normal" tem tamanhos diferentes e empurravam os numeros. */
/* SETE COLUNAS SO' COM ESPACO PARA ELAS: abaixo disto (tablet em retrato) a
 * linha volta a quebrar, em vez de esmagar o titulo do post a zero. */
@media (min-width: 900px) {
  .rende-linha {
    display: grid; align-items: center; gap: 16px;
    grid-template-columns: minmax(0, 1fr) 80px 104px 96px 92px 92px 150px;
  }
  .rende-estado { text-align: center; }
}
@media (max-width: 640px) {
  .rende-numero { min-width: 62px; }
  .rende-numero:empty { display: none; }
}

/* ── os vizinhos ─────────────────────────────────────────────────────────── *
 *
 * A mesma linha de numeros da aba Resultados, para as duas telas lerem
 * igual. Quem ainda nao foi lido fica mais apagado e diz por que — sem
 * numero inventado no lugar. */
.vizinho-lista { display: grid; gap: 7px; }
.vizinho-linha {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
}
.vizinho-linha.sem-leitura { opacity: .75; }
.vizinho-nome { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.vizinho-nome a, .vizinho-nome b {
  font-size: 13.5px; font-weight: 600; color: var(--texto);
  text-decoration: none; overflow-wrap: anywhere;
}
.vizinho-nome a:hover { text-decoration: underline; }
.vizinho-nome i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.vizinho-falta { flex: 0 1 auto; font-size: 12px; color: var(--texto-3); }
.vizinho-acrescentar { margin-top: 12px; }
a.vizinho-abrir { text-decoration: none; color: inherit; cursor: pointer; }
a.vizinho-abrir:hover b { color: var(--acento); }
.vizinho-candidato { background: transparent; }

/* ── concorrentes: ações, filtro, avisos ─────────────────────────────────── */
.conc-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conc-aviso {
  margin: 12px 0 0; padding: 9px 12px; border-radius: var(--raio);
  background: var(--alerta-fundo); color: var(--alerta); font-size: 13px;
}
.conc-filtro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 16px 0 22px;
}
.conc-filtro-rotulo {
  font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3); margin: 0 4px 0 8px;
}
.conc-filtro-rotulo:first-child { margin-left: 0; }
.filtro-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px; font-size: 12.5px;
  border: 1px solid var(--borda-forte); color: var(--texto-2);
  text-decoration: none; background: var(--fundo); white-space: nowrap;
}
.filtro-chip i { font-style: normal; font-size: 11px; color: var(--texto-3); }
.filtro-chip:hover { border-color: var(--acento-borda); color: var(--texto); }
.filtro-chip.aceso {
  border-color: var(--acento); background: var(--acento-fundo);
  color: var(--acento); font-weight: 600;
}
.conc-dica { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-3); }
.conc-tiradas > summary {
  cursor: pointer; font-size: 13px; color: var(--texto-2); margin-bottom: 8px;
}
.destaque-espera { font-size: 11.5px; color: var(--texto-3); }

/* ── vale impulsionar ────────────────────────────────────────────────────── */
.impulso-cartao {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 16px 0 6px; padding: 14px 16px; border-radius: var(--raio);
  border: 1px solid var(--acento-borda); background: var(--acento-fundo);
}
.impulso-cartao > div:first-of-type { flex: 1 1 280px; min-width: 0; }
.impulso-cartao b { font-size: 14px; }
.impulso-cartao p { margin: 4px 0 0; font-size: 13px; color: var(--texto-2); line-height: 1.5; }
.impulso-cartao.ativo { border-color: var(--ok); background: var(--ok-fundo); }
.impulso-selo {
  font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 6px; background: var(--fundo); color: var(--acento);
}
.impulso-cartao.ativo .impulso-selo { color: var(--ok); }
.impulso-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.impulso-ranking { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.impulso-ranking li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px;
  align-items: baseline; padding: 8px 12px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2); font-size: 13px;
}
.impulso-ranking li.aqui { border-color: var(--acento); }
.impulso-vezes { font: 600 14px/1 var(--mono); color: var(--acento); }
.impulso-tema { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impulso-ranking i { font-style: normal; font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }
.impulso-fechado {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--raio);
  background: var(--ok-fundo); color: var(--texto); font-size: 13px;
}
@media (max-width: 640px) {
  .impulso-ranking li { grid-template-columns: 48px minmax(0, 1fr); }
  .impulso-ranking i { grid-column: 2; }
}

/* ── a forma que o modelo recomenda ──────────────────────────────────────── */
.forma {
  display: grid; gap: 3px; margin: 8px 0; padding: 9px 11px;
  border-radius: var(--raio); border: 1px solid var(--acento-borda);
  background: var(--acento-fundo); font-size: 12.5px;
}
.forma b { font: 600 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.forma span { color: var(--texto); line-height: 1.45; }
.forma i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.forma.aposta { border-style: dashed; border-color: var(--alerta); background: var(--alerta-fundo); }
.forma.aposta b { color: var(--alerta); }
.plano-aprendizado { margin: 12px 0 0; font-size: 13px; color: var(--texto-2); }
.plano-aprendizado a { margin-left: 6px; color: var(--acento); }
.aprendido-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.aprendido-lista li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px;
  align-items: baseline; font-size: 13.5px;
}
.aprendido-pct { font: 600 13px/1 var(--mono); }
.aprendido-pct.sobe { color: var(--ok); }
.aprendido-pct.desce { color: var(--texto-3); }
.aprendido-lista i { font-style: normal; font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }

/* ── plano e créditos ────────────────────────────────────────────────────── */
.plano-preco { font: 600 13px/1 var(--mono); color: var(--texto-2); }
.plano-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.plano-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.plano-lista li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
.plano-lista b { font: 600 12px/1.4 var(--mono); color: var(--acento); white-space: nowrap; }
.plano-extrato { display: grid; gap: 4px; }
.plano-movimento {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 13px;
}
.plano-movimento span:first-child { font-family: var(--mono); color: var(--texto-3); font-size: 12px; }
.plano-movimento b { font-family: var(--mono); }
.plano-movimento b.entra { color: var(--ok); }
.plano-movimento b.sai { color: var(--texto-2); }

/* ── link da bio ─────────────────────────────────────────────────────────── */
.link-bio-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.link-bio-endereco {
  padding: 8px 12px; border-radius: var(--raio); background: var(--fundo-2);
  border: 1px solid var(--borda); font: 500 13.5px/1.3 var(--mono); overflow-wrap: anywhere;
}
.link-bio-serie {
  display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px;
  height: 56px; align-items: end; margin: 14px 0 4px;
}
.link-bio-serie span { height: 100%; display: flex; align-items: flex-end; }
.link-bio-serie i {
  display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: var(--acento); opacity: .8;
}
.link-bio-form { margin-top: 14px; }
.link-bio-form .linha { display: flex; gap: 10px; flex-wrap: wrap; }
.link-bio-form .campo { flex: 1 1 260px; }
.minha-versao { margin-top: 8px; }

/* ── a janela (perfil do concorrente, comparativo) ───────────────────────── *
 *
 * <dialog> que abre por parâmetro na URL. Sem JavaScript ele nasce `open` e
 * fica fixo na tela; com JavaScript vira modal (`showModal`), com Esc e fundo.
 */
.janela {
  padding: 0; border: 1px solid var(--borda); border-radius: var(--raio-g);
  background: var(--fundo); color: var(--texto);
  box-shadow: 0 10px 30px rgb(10 10 20 / .22), 0 40px 90px rgb(10 10 20 / .3);
  max-height: 88vh; max-height: 88dvh; overflow: auto;
}
.janela::backdrop { background: rgb(12 14 20 / .55); backdrop-filter: blur(3px); }
.janela[open]:not(:modal) { position: fixed; z-index: 60; }
.janela-larga { width: min(900px, calc(100vw - 32px)); }
.janela-larga[open]:not(:modal) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.janela-lateral {
  width: min(460px, 100vw); height: 100vh; height: 100dvh; max-height: none;
  margin: 0 0 0 auto; border-radius: var(--raio-g) 0 0 var(--raio-g);
}
.janela-lateral[open]:not(:modal) { top: 0; right: 0; }
.janela-topo {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; background: var(--fundo); border-bottom: 1px solid var(--borda);
}
.janela-topo h2 { margin: 0; font-size: 20px; }
.janela-topo p { margin: 4px 0 0; font-size: 12.5px; color: var(--texto-3); }
.janela-fechar {
  font-size: 24px; line-height: 1; color: var(--texto-2); text-decoration: none;
  padding: 2px 8px; border-radius: 8px;
}
.janela-fechar:hover { background: var(--fundo-2); color: var(--texto); }
.janela-corpo { padding: 16px 20px 22px; display: grid; gap: 12px; }
.janela-sub {
  margin: 8px 0 0; font: 600 10px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto-3);
}
.perfil-numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.perfil-numeros > div {
  padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo-2); display: grid; gap: 3px;
}
.perfil-numeros b { font: 600 20px/1.1 var(--mono); }
.perfil-numeros span { font-size: 11.5px; color: var(--texto-3); line-height: 1.35; }
.perfil-formatos { display: flex; flex-wrap: wrap; gap: 6px; }
.comparativo-resumo ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.55; font-size: 14px; }
.comparativo-resumo li + li { margin-top: 4px; }
.comparativo-tabela-rolagem { overflow-x: auto; }
.comparativo-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.comparativo-tabela th, .comparativo-tabela td {
  padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.comparativo-tabela thead th {
  font: 600 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3);
}
.comparativo-tabela tbody th { text-align: left; font-weight: 600; }
.comparativo-tabela tbody th a { color: var(--texto); text-decoration: none; }
.comparativo-tabela tbody th a:hover { color: var(--acento); }
.comparativo-tabela td { font-family: var(--mono); }
.comparativo-voce { background: var(--acento-fundo); }
.comparativo-voce th { color: var(--acento); }
.comparativo-mediana th, .comparativo-mediana td { color: var(--texto-2); border-bottom: 0; }

.vizinho-destaques {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.vizinho-destaque {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
}
.vizinho-destaque > b { font: 600 18px/1.1 var(--mono); color: var(--acento); }
.vizinho-destaque > div { min-width: 0; display: grid; gap: 3px; }
.vizinho-destaque a, .vizinho-destaque span {
  font-size: 13px; font-weight: 600; color: var(--texto);
  text-decoration: none; overflow-wrap: anywhere;
}
.vizinho-destaque i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.destaque-ficha { margin-top: 4px; font-size: 12.5px; color: var(--texto-2); }
.destaque-ficha summary {
  cursor: pointer; font-weight: 600; color: var(--acento); font-size: 12px;
}
.destaque-ficha p { margin: 6px 0 0; line-height: 1.45; }
.destaque-ficha ol { margin: 6px 0 0; padding-left: 18px; line-height: 1.45; }
.destaque-ficha b { color: var(--texto); font-weight: 600; }
.medido-vezes {
  display: block; font-style: normal; font-size: 11.5px;
  font-family: var(--mono); color: var(--acento);
}
.numero-solto + .numero-solto { margin-top: 14px; }
.versao-roteiro {
  margin: 10px 0; padding-left: 20px; font-size: 13.5px; line-height: 1.55;
  color: var(--texto);
}
.versao-roteiro li + li { margin-top: 4px; }
.versao-porque { color: var(--texto-2); font-size: 12.5px; }
.medido-ideia { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto); }
.medido-passos {
  margin: 10px 0 0; padding-left: 18px; font-size: 12.5px;
  line-height: 1.5; color: var(--texto-2);
}
.destaque-versao {
  padding: 8px 10px; border-radius: var(--raio);
  background: var(--fundo); border: 1px solid var(--borda);
}

@media (min-width: 641px) {
  .vizinho-linha {
    display: grid; align-items: center; gap: 16px;
    grid-template-columns: minmax(0, 1fr) 120px 84px 96px 104px auto;
  }
  .vizinho-linha .vizinho-falta { grid-column: 2 / 6; }
  .vizinho-linha.vizinho-candidato { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ── resposta ao comentario ──────────────────────────────────────────────── *
 *
 * As duas mensagens lado a lado, na ordem em que a pessoa vai receber. No
 * telefone viram uma coluna, na mesma ordem. */
.regra-form { display: grid; gap: 14px; margin-top: 4px; }
.regra-passos {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.regra-campo { display: grid; gap: 6px; min-width: 0; }
.regra-campo > span { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.regra-campo > span i { font-style: normal; font-weight: 400; color: var(--texto-3); }
.regra-campo textarea { resize: vertical; min-height: 84px; font: inherit; }
.regra-form .ajuda-campo { margin-top: 0; }
.regra-form .acoes { margin-top: 0; }
.aviso-ok {
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--raio);
  background: var(--ok-fundo); color: var(--ok); font-size: 12.5px;
}

/* ── os stories da semana ────────────────────────────────────────────────── *
 *
 * Sete colunas curtas, uma por dia: a semana de stories se le' como rotina,
 * nao como lista. No telefone viram uma coluna. O estado de cada story ("pelo
 * app", "foto na hora", "pronto") vai em palavra, nunca so' em cor. */
.stories-semana {
  display: grid; gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.story-dia {
  display: grid; gap: 6px; align-content: start;
  padding: 10px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
}
.story-dia-nome { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.story-item {
  display: grid; gap: 2px; padding: 7px 8px; border-radius: 8px;
  background: var(--fundo-3); border-left: 3px solid var(--borda);
}
.story-item.captacao { border-left-color: var(--acento); }
.story-item span { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.story-item i { font-style: normal; font-size: 11px; color: var(--texto-3); }
.secao-cabeca form { margin-left: auto; }

@media (max-width: 900px) {
  .stories-semana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .stories-semana { grid-template-columns: 1fr; }
}

/* ── a campanha da matriz ────────────────────────────────────────────────── *
 *
 * A grade e' a razao da tela: uma linha por unidade, celulas lado a lado. A
 * celula que pede algo da matriz (aprovacao) ou que perde alcance (arte da
 * matriz) ganha a borda marcada; o estado vai sempre em palavra. */
.campanhas-lista, .campanha-pecas { display: grid; gap: 7px; margin-bottom: 12px; }
.campanha-item, .campanha-peca {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
  color: var(--texto); text-decoration: none;
}
.campanha-item b, .campanha-peca b { font-size: 13.5px; }
.campanha-item i, .campanha-peca i { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.campanha-item { justify-content: space-between; }
.campanha-item:hover { border-color: var(--acento-borda); }
.campanha-peca > div { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.campanha-peca p { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-2); }
.campanha-form, .campanha-nova, .campanha-enviar { display: grid; gap: 10px; }
.campanha-form > .botao, .campanha-enviar > .botao,
.campanha-celula form .botao { justify-self: start; }
.campanha-arte { display: grid; gap: 5px; font-size: 12.5px; }
.campanha-arte i { font-style: normal; color: var(--texto-3); }
.campanha-aprova { font-size: 12.5px; color: var(--texto-2); display: flex; gap: 8px; align-items: center; }
.campanha-unidades { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.campanha-unidades label { display: flex; gap: 6px; align-items: center; }

.campanha-grade { display: grid; gap: 8px; }
.campanha-linha {
  display: grid; gap: 7px; align-items: start;
  grid-template-columns: 150px repeat(auto-fit, minmax(170px, 1fr));
}
.campanha-unidade { font-size: 13.5px; padding-top: 10px; }
.campanha-celula {
  display: grid; gap: 4px; padding: 9px 10px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-2);
  border-left-width: 3px;
}
.campanha-celula-tema { font-size: 12px; color: var(--texto-2); }
.campanha-celula-estado { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.campanha-celula.aprovacao { border-left-color: var(--acento); }
.campanha-celula.arte_da_matriz, .campanha-celula.sem_midia,
.campanha-celula.falhou { border-left-color: var(--alerta); }
.campanha-celula.publicada, .campanha-celula.agendada { border-left-color: var(--ok); }
.campanha-celula img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 6px; }
.campanha-celula-legenda { margin: 0; font-size: 12px; color: var(--texto-2); }
.campanha-devolver { display: grid; gap: 6px; }

.legenda-editar summary { cursor: pointer; font-size: 13px; color: var(--texto-2); }
.legenda-editar form { display: grid; gap: 8px; margin-top: 8px; }
.aviso-repetida { color: var(--alerta); }

@media (max-width: 640px) {
  .campanha-linha { grid-template-columns: 1fr; }
}

.analista-creditos { color: var(--acento); text-decoration: none; }

/* Checagem de fatos na fila: a fonte de cada afirmação antes de agendar. */
.fontes-checagem { display: flex; flex-direction: column; gap: .35rem; width: 100%;
  font-size: .85rem; color: var(--texto-2, #b9b4c4); }
.fontes-checagem textarea { width: 100%; min-height: 4.2rem; resize: vertical; }

/* ════════════════════════════════════════════════════════════════════════════
 * LIQUID GLASS (22/10/2026)
 *
 * O QUE E' VIDRO E O QUE NAO E'. O token `--fundo` ja' deixou toda superficie
 * translucida (ver :root). Aqui fica o resto, que e' o caro: o DESFOQUE do que
 * esta' atras. Ele vai so' nas camadas de cima — a lateral, a capa, os
 * cartoes, os menus e os modais. Dentro de um cartao nada mais desfoca: vidro
 * dentro de vidro desfoca o proprio vidro e so' gasta GPU.
 *
 * A TINTA DA MARCA e' uma camada de 7% por cima do vidro (`--tinta`, de
 * apps/marca/tema.py). E' ela que faz o vidro da ECiaA ser lilas e o de uma
 * academia vermelha ser rosado, sem pintar nenhum cartao de cor.
 *
 * O BRILHO DE CIMA (`inset 0 1px 0 var(--brilho)`) e' o reflexo especular da
 * borda — o detalhe que separa vidro de "cartao com transparencia".
 * ═════════════════════════════════════════════════════════════════════════ */

.barra-lateral, .capa, .peca, .instrumento, .perfil-menu, .analista-modal, .janela,
.moedas, .visao, .tema, .perfil summary {
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
}

.barra-lateral {
  background: linear-gradient(var(--tinta), var(--tinta)), var(--vidro);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-sombra), inset 0 1px 0 var(--brilho);
}

.peca, .capa, .instrumento {
  border-color: var(--vidro-borda);
  box-shadow: var(--vidro-sombra), inset 0 1px 0 var(--brilho);
}
.peca {
  background: linear-gradient(var(--tinta), var(--tinta)), var(--fundo);
  border-radius: 20px;
}
.peca:hover { border-color: rgb(var(--acento-rgb) / .3); }
.capa {
  background:
    linear-gradient(170deg, var(--marca-vefu), transparent 72%),
    linear-gradient(var(--tinta), var(--tinta)), var(--fundo);
  border-radius: 24px;
}
.instrumento { border-radius: 22px; }
/* O grao do instrumento era acabamento sobre superficie lisa; sobre vidro ele
 * vira sujeira. */
.instrumento::after { display: none; }

/* Os controles da conta viram pilulas de vidro. */
.moedas, .visao, .tema, .perfil summary {
  background: linear-gradient(var(--tinta), var(--tinta)), var(--vidro);
  border-color: var(--vidro-borda);
  box-shadow: inset 0 1px 0 var(--brilho), 0 2px 10px rgb(20 16 40 / .05);
}

/* MENU E MODAL FLUTUAM SOBRE CONTEUDO, nao sobre a aurora: precisam de vidro
 * mais denso, ou o texto de baixo atravessa e disputa leitura. */
.perfil-menu, .analista-modal, .janela {
  background: linear-gradient(var(--tinta), var(--tinta)), var(--vidro-forte);
  border-color: var(--vidro-borda);
}
.analista-modal, .janela { -webkit-backdrop-filter: blur(34px) saturate(1.8); backdrop-filter: blur(34px) saturate(1.8); }

/* O botao principal ganha o brilho de cima, como uma gota da cor da marca. */
.botao, .analista-dot {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 6px 18px rgb(var(--acento-rgb) / .28);
}

/* ── notebook estreito: a lateral so' de icones ──────────────────────────── *
 *
 * Abaixo de 1100px os 236px da lateral comem o tabuleiro. Ela encolhe para a
 * coluna de icones; o rotulo sai da TELA mas nao do leitor de tela — some com
 * o recorte de acessibilidade, e nao com `display: none`, que tiraria o nome
 * do link junto. */
@media (max-width: 1100px) and (min-width: 861px) {
  .casca { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; }
  .barra-lateral { padding: 16px 8px 12px; }
  .barra-lateral .logo { justify-content: center; padding: 6px 0 14px; font-size: 0; gap: 0; }
  .barra-lateral-pe, .trilho-grupo { display: none; }
  .trilho a { justify-content: center; padding: 11px 0; }
  .trilho a > span:not(.lente) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ── celular: a lateral desce e vira a barra de baixo ────────────────────── *
 *
 * E' o mesmo elemento, e nao uma segunda navegacao escondida no desktop: uma
 * lista so' de secoes, que nao tem como discordar de si mesma. Rola para o
 * lado quando as secoes nao cabem, e a lente vai junto. */
@media (max-width: 860px) {
  .casca { display: block; padding: 10px 16px 0; }
  .casca .app { padding: 0 0 112px; }
  .conta-barra { justify-content: flex-end; }
  .conta-barra-logo { display: flex; font-size: 20px; }
  .barra-lateral {
    position: fixed; z-index: 30; left: 10px; right: 10px; bottom: 10px; top: auto;
    height: auto; padding: 6px; border-radius: 28px; flex-direction: row;
  }
  .barra-lateral .logo, .barra-lateral-pe, .trilho-grupo, .trilho-empurra { display: none; }
  .trilho { overflow-x: auto; overflow-y: hidden; margin: 0; padding: 0; }
  .trilho ul { flex-direction: row; min-height: 0; gap: 0; }
  .trilho li { flex: 1 0 auto; }
  .trilho a {
    flex-direction: column; justify-content: center; gap: 3px;
    min-width: 66px; padding: 8px 8px 6px; border-radius: 22px;
    font-size: 10.5px; font-weight: 500;
  }
  .trilho a.aqui { font-weight: 600; }
  .trilho-icone, .trilho .glifo { width: 21px; height: 21px; }
  /* O analista sobe para nao sentar em cima da barra. */
  .analista-dot { bottom: 92px; }
  /* No celular so' a barra e os menus desfocam: dez cartoes com desfoque
   * rolando juntos derrubam o quadro em aparelho medio. Os cartoes ficam
   * com vidro mais denso, sem desfoque — a diferenca no olho e' pequena. */
  .peca, .capa, .instrumento, .moedas, .visao, .tema, .perfil summary {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .peca, .capa { background-color: var(--vidro-forte); }
}

/* ── quem pediu menos ────────────────────────────────────────────────────── *
 *
 * "Reduzir transparencia" existe no sistema por causa do vidro — a propria
 * Apple teve que acrescentar. Aqui ele vira superficie solida, com a tinta da
 * marca por cima, e nada desfoca. Os tokens sao trocados no `body` porque e'
 * la' que eles chegam a todos, nos dois temas. */
@media (prefers-reduced-transparency: reduce) {
  body { --fundo: var(--fundo-solido); --vidro: var(--fundo-solido); --vidro-forte: var(--fundo-solido); }
  .barra-lateral, .capa, .peca, .instrumento, .perfil-menu, .analista-modal, .janela,
  .moedas, .visao, .tema, .perfil summary, .lente {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}