/* Shell compartilhado por todos os painéis do Influencer Camaleão.
   Cada perfil (admin, influencer, lojista, fornecedor, editor) usa esta base
   e só troca a navegação e o conteúdo das seções. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }

/* O Safari do iPhone e o Chrome do Android aumentam o texto sozinhos quando o
   aparelho deita, ou quando acham que um bloco ficou largo demais para ler.
   No modo responsivo do navegador isso não acontece, e por isso a tela parecia
   certa no computador e desproporcional no telefone. O tamanho é o do CSS. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Campo com letra menor que 16px faz o iPhone dar zoom na página inteira ao
   tocar nele, e a página não volta sozinha: a pessoa termina de digitar numa
   tela ampliada e cortada dos dois lados. Vale só onde o dedo é o ponteiro —
   no computador os campos continuam com o tamanho de cada tela. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
  select, textarea { font-size: max(16px, 1em) !important; }
}

/* Rede de segurança: o helper `icone()` nunca define width/height no <svg>,
   só viewBox — sem um container com `X svg { width; height }`, o navegador
   renderiza no padrão de ~300x150px. Foi assim que a lâmpada, o relógio e o
   "+" da lista de lojas viraram gigantes. Especificidade de elemento perde
   para qualquer seletor de classe existente, então isso só entra em ação
   onde nada mais definiu o tamanho — nenhum ícone já dimensionado muda. */
svg:not([width]) { width: 1em; height: 1em; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--roxo-escuro) !important;
  outline-offset: 2px !important;
  box-shadow: var(--anel-foco);
}

:where(button, input, textarea, select) { font-family: inherit; }

/* ================= Campo sem desenho próprio ================
   Todo campo de formulário que nenhuma tela estilizou (e que por isso aparecia
   no cinza do navegador, torto no modo escuro) recebe o desenho padrão do painel.
   É `:where`, com especificidade zero: qualquer regra de tela vence, então campo
   que já tem estilo não muda. Ficam de fora botões, caixas, rádios, arquivos,
   cores e os campos dentro de tabela (compactos de propósito). */
:where(input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=hidden], [type=file], [type=range], [type=color], [type=image]), select, textarea):where(:not(table *)) {
  box-sizing: border-box; max-width: 100%; padding: 9px 13px; border: 1px solid #e3ddef; border: 1px solid light-dark(#e3ddef, #3a2e52); border-radius: 10px;
  color: inherit; background-color: #fff; background-color: light-dark(#fff, #1b152c); font-size: 14px; line-height: 1.35;
}
:where(input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=hidden], [type=file], [type=range], [type=color], [type=image]), select):where(:not(table *)) { min-height: 42px; }
:where(textarea):where(:not(table *)) { line-height: 1.5; }
:where(select):where(:not(table *)) {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b84a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
:where(input, textarea)::placeholder { color: #a8a1b9; color: light-dark(#a8a1b9, #9b94ac); opacity: 1; }
:where(input[readonly]) { cursor: text; }
/* As opções abertas da lista: o pop-up do navegador pode ser claro mesmo com o
   campo escuro, e a cor herdada do campo deixava o texto ilegível. */
:where(select) :where(option, optgroup) { background-color: #fff; background-color: light-dark(#fff, #1b152c); color: #1f1633; color: light-dark(#1f1633, #f3efff); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* O `hidden` do navegador é regra de user-agent e perde para qualquer
   `display` que a gente declare — quem tem display:flex continua na tela
   mesmo escondido. Aqui ele volta a valer para todo mundo. */
[hidden] { display: none !important; }

.pular-conteudo {
  position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 8px 16px;
  border-radius: var(--raio-controle); color: #fff; background: var(--roxo-forte);
  font-size: 13px; font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.pular-conteudo:focus { transform: translateY(0); }

body {
  font-family: var(--fonte);
  background-color: var(--fundo);
  background-image: none;
  color: var(--tinta);
  font-size: 14px;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: clip;
}

body.painel { display: flex; }

/* ---------- A lateral ----------

   Transparente, com uma linha fina à direita. Sem ela, o menu e o conteúdo
   flutuavam no mesmo lavanda e a tela não dizia onde uma coisa acaba e a outra
   começa — o olho procurava a borda e não achava.

   Linha, e não painel branco: o branco é a cor dos cartões nesta interface, e
   dar branco à lateral faria dela mais um cartão, competindo com os que têm o
   conteúdo. A linha separa sem disputar atenção. */
.sidebar {
  width: 248px; flex-shrink: 0;
  background: transparent;
  border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
  padding: 16px 16px;
  position: sticky; top: 0; height: 100vh;
}

/* ---------- A marca ----------

   A espiral e "kamalion" em minúsculas, como no desenho. O símbolo é o mesmo
   arquivo que a landing já usava — não há duas marcas, há uma. */
.marca { display: flex; align-items: center; gap: 8px; padding: 2px 8px 24px; }
/* Os dois botões da gaveta existem no HTML sempre e só aparecem no celular:
   quem decide a largura é a media query lá embaixo, num lugar só. */
.abrir-menu, .fechar-menu { display: none; }

/* ---------- A faixa do painel de demonstração ----------

   Presa no alto da janela, e não no topo da página: quem abre o painel de
   demonstração fica dentro dele por minutos, rolando de tela em tela, e uma
   faixa que some na primeira rolada é uma faixa que não avisa nada. Ela é
   também o caminho de volta — sem ele, sair seria deslogar e entrar de novo.

   Âmbar, e não roxo: a cor do sistema diria "isto faz parte do painel", e a
   frase inteira serve para dizer o contrário. */
.faixa-demonstracao {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 18px;
  background: #FEF3C7; background: light-dark(#FEF3C7, #342400); border-bottom: 1px solid #FCD34D; border-bottom: 1px solid light-dark(#FCD34D, #816400); color: #78350F; color: light-dark(#78350F, #feaf8a);
  font-size: 12.5px; line-height: 1.5;
}
.faixa-demonstracao b { font-weight: 600; }
.faixa-demonstracao form { margin-left: auto; }
/* Sem a altura mínima dos botões do painel (40px): com ela a faixa passava de
   42px e cobria o topo de toda tela, que só desce 42px (logo abaixo). */
.faixa-demonstracao .btn-secundario { font-size: 12.5px; padding: 4px 12px; min-height: 0; }

/* O corpo desce a altura da faixa, e a lateral desce junto: fixa no topo, ela
   passaria por baixo do aviso. */
.painel.demonstrando { padding-top: 42px; }
/* `body` na frente: telas que fixam a lateral em top 0 (Persona e Projetos do
   influencer) têm a mesma força e vinham depois — e o logo sumia sob a faixa. */
body.painel.demonstrando .sidebar { top: 42px; height: calc(100vh - 42px); }
/* No celular a frase inteira quebrava em três linhas, a faixa passava de 100px
   e cobria o título. Fica o essencial — de quem é o painel e a volta —, numa
   linha, dentro dos 42px. */
@media (max-width: 900px) {
  .faixa-demonstracao { flex-wrap: nowrap; padding: 6px 12px; font-size: 12px; }
  .faixa-demonstracao-detalhe { display: none; }
  .faixa-demonstracao > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .faixa-demonstracao .btn-secundario { flex: none; font-size: 12px; padding: 4px 10px; white-space: nowrap; }
}
.marca-icone { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; }
.marca-icone img { width: 100%; height: 100%; object-fit: contain; }
.marca-nome {
  font-size: 21px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--tinta);
}

/* Faixa que diz em qual painel você está */
.selo-perfil {
  display: flex; align-items: center; gap: 8px;
  margin: 0 4px 16px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--cor-perfil-fraca);
  /* A cor do perfil pura fica abaixo de 4,5:1 no próprio fundo claro dela. */
  color: color-mix(in srgb, var(--cor-perfil) 75%, #000); color: color-mix(in srgb, var(--cor-perfil) 75%, light-dark(#000, #f2efff));
}
.selo-perfil svg { width: 14px; height: 14px; }

/* Menu comprido (o do lojista) rola dentro da lateral. A barra fica visível e
   o fim esmaece, para ninguém achar que o menu acaba no último item que cabe. */
.nav {
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding: 0 2px 24px 0;
  scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
/* 16px acima e 8px abaixo: o rótulo pertence aos itens de baixo, e o respiro
   maior em cima é o que separa um grupo do outro. */
.nav-grupo {
  margin: 16px 12px 8px; color: var(--cinza-fraco); font-size: 11px;
  font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .08em;
}
.nav-grupo:first-child { margin-top: 2px; }
.nav button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 12px;
  border: 0; background: none;
  border-radius: var(--raio-botao);
  color: var(--cinza);
  font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav button svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav button:hover { background: color-mix(in srgb, #fff 55%, transparent); background: color-mix(in srgb, light-dark(#fff, #1b152c) 55%, transparent); color: var(--tinta); }

/* O item marcado é uma pílula branca com uma barra à esquerda. A barra existe
   porque só a cor de fundo não basta num fundo já claro: ela é o que se vê de
   canto de olho. */
.nav button.ativo {
  background: var(--superficie); color: var(--roxo-escuro); font-weight: 600;
  box-shadow: 0 1px 2px rgb(58 42 120 / .05), 0 6px 16px -10px rgb(58 42 120 / .3);
  position: relative;
}
.nav button.ativo::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--roxo);
}

.rodape-sidebar { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }

.cartao-usuario {
  display: flex; align-items: center; gap: 8px;
  border: 0;
  border-radius: var(--raio-cartao);
  padding: 8px 12px;
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lavanda); color: var(--roxo-escuro);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; flex-shrink: 0;
}
.cartao-usuario b { font-size: 12.5px; font-weight: 600; display: block; }
.cartao-usuario span { font-size: 11px; color: var(--cinza); }
.cartao-usuario .sair { margin-left: auto; color: var(--cinza-fraco); display: grid; place-items: center; }
.cartao-usuario .sair svg { width: 16px; height: 16px; }
.cartao-usuario .sair:hover { color: var(--roxo-escuro); }

/* ---------- Área principal ---------- */
.principal { flex: 1; width: 100%; min-width: 0; max-width: 100%; display: flex; flex-direction: column; }

.topo { display: flex; align-items: center; gap: 20px; min-height: 84px; padding: 16px var(--pagina-x); border-bottom: 0; background: transparent; }
/* Sem linha embaixo do topo, em tela nenhuma: nas telas com arte ela cortava o
   desenho, e uma regra que só vale para metade das telas é ruído. */
/* O bloco do título pode encolher: sem isto, um título longo como
   "Configurações" soma com a busca de largura fixa e empurra a página. */
.topo > div:not(.topo-acoes) { min-width: 0; }
.topo h1 { font-size: var(--texto-pagina); line-height: 1.2; font-weight: 700; letter-spacing: 0; }
.topo h1 + p { color: var(--cinza); font-size: 14px; margin-top: 4px; line-height: 1.45; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.busca {
  display: flex; align-items: center; gap: 8px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-operacional);
  padding: 8px 12px; width: 280px;
}
.busca svg { width: 16px; height: 16px; color: var(--cinza-fraco); flex-shrink: 0; }
.busca input { border: 0; outline: 0; background: none; font: inherit; font-size: 13px; width: 100%; color: var(--tinta); }
.busca input::placeholder { color: var(--cinza-fraco); }
/* O campo mora dentro da caixa da busca (com a lupa e o atalho): o espaço e a altura são da caixa. */
.busca input, .retailer-search input, .partner-search input { padding: 0; min-height: 0; border-radius: 0; box-shadow: none; }
.busca kbd {
  font: inherit; font-size: 11px; color: var(--cinza-fraco);
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 5px; padding: 2px 4px; flex-shrink: 0;
}

/* Em tela apertada a busca cede espaço antes de todo mundo: ela é a peça do
   cabeçalho de que menos se precisa para entender onde se está. Primeiro
   encolhe, depois solta o atalho, e por último sai de cena. */
@media (max-width: 1180px) {
  .busca { width: 190px; }
  .busca kbd { display: none; }
}
@media (max-width: 1010px) {
  .busca { display: none; }
}
@media (max-width: 820px) {
  .topo { flex-wrap: wrap; }
  .topo-acoes { margin-left: 0; width: 100%; }
}

/* Voltar para de onde se veio, à esquerda do título da seção. Leva a palavra
   junto: um ícone sozinho num cabeçalho branco passa despercebido, e este é
   o único caminho de saída do painel. Alinha com a primeira linha do título,
   não com o topo do cabeçalho. */
.voltar {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px 0 12px; flex-shrink: 0; margin-top: 1px;
  border-radius: var(--raio-botao);
  background: var(--lavanda); border: 1px solid transparent;
  color: var(--roxo-escuro); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.voltar svg { width: 17px; height: 17px; flex-shrink: 0; }
.voltar:hover { background: var(--superficie); border-color: var(--roxo); }
.voltar:focus-visible { outline: 2px solid var(--roxo); outline-offset: 1px; }

/* Numa tela estreita fica só a seta, que aí o título é que precisa do lugar. */
@media (max-width: 900px) {
  .voltar { padding: 0; width: 38px; justify-content: center; }
  .voltar span { display: none; }
}

.icone-botao {
  width: 40px; height: 40px; border-radius: var(--raio-controle);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  display: grid; place-items: center; cursor: pointer; color: var(--cinza);
}
.icone-botao svg { width: 18px; height: 18px; }
.icone-botao:hover { color: var(--tinta); }

.btn-primario {
  display: flex; align-items: center; gap: 8px;
  background: var(--grad-primario); color: #fff;
  min-height: 40px; border: 0; border-radius: var(--raio-controle);
  padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--roxo) 70%, transparent);
}
.btn-primario svg { width: 16px; height: 16px; }
.btn-primario:hover { filter: brightness(1.06); }

.btn-secundario {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--superficie); color: var(--tinta);
  min-height: 40px; border: 1px solid var(--borda-forte); border-radius: var(--raio-controle);
  padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn-secundario svg { width: 15px; height: 15px; }
.btn-secundario:hover { border-color: var(--roxo); color: var(--roxo-escuro); }

/* ---------- Seções ---------- */
.secao { display: none; flex: 1; width: 100%; min-width: 0; max-width: var(--pagina-max); margin-inline: auto; flex-direction: column; padding: 0 var(--pagina-x) var(--pagina-y); }
.secao.ativa { display: flex; }
.secao > * { min-width: 0; max-width: 100%; }

/* Placeholder de seção ainda não construída */
.a-construir {
  flex: 1;
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--raio-cartao);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 60px 20px; text-align: center;
  min-height: 280px;
}
.a-construir svg { width: 30px; height: 30px; color: var(--cinza-fraco); }
.a-construir b { font-size: 14px; font-weight: 600; color: var(--cinza); }
.a-construir p { font-size: 12.5px; color: var(--cinza-fraco); max-width: 320px; line-height: 1.6; }

/* ---------- Cartões genéricos ---------- */
/* Sem borda: quem recorta o cartão é o branco contra o lavanda do fundo, e um
   traço por cima disso vira ruído. A sombra faz o resto. */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-painel);
  box-shadow: var(--sombra-painel);
  padding: 16px;
}
.cartao-titulo { font-size: 15px; font-weight: 600; margin-bottom: 3px; letter-spacing: 0; }
.cartao-sub { font-size: var(--texto-meta); color: var(--cinza); line-height: 1.5; }
.cartao-sub + :is(.btn-secundario, .button_to) { margin-top: 14px; }

/* ---------- Assinatura visual ----------
   A faixa que guarda a arte de cada tela sem virar hero: altura limitada,
   mascote à direita, nenhum texto dentro. A tarefa começa logo abaixo. */
.brand-strip {
  position: relative; overflow: hidden; isolation: isolate; flex-shrink: 0;
  height: clamp(160px, 15vw, 200px);
  border: 1px solid var(--borda); border-radius: var(--raio-painel);
  background: radial-gradient(ellipse 42% 95% at 6% 45%, color-mix(in srgb, var(--roxo) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 70% at 42% 0%, color-mix(in srgb, var(--roxo-claro) 12%, transparent), transparent 72%),
    linear-gradient(120deg, var(--lavanda) 0%, #F5F1FF 48%, var(--superficie) 100%); background: radial-gradient(ellipse 42% 95% at 6% 45%, color-mix(in srgb, var(--roxo) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 70% at 42% 0%, color-mix(in srgb, var(--roxo-claro) 12%, transparent), transparent 72%),
    linear-gradient(120deg, var(--lavanda) 0%, light-dark(#F5F1FF, #29203b) 48%, var(--superficie) 100%);
  box-shadow: var(--sombra-painel);
}
.brand-strip__mark {
  position: absolute; z-index: 0; right: 18%; bottom: -55%; width: 62%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--roxo) 14%, transparent), transparent 68%);
}
.brand-strip__image {
  position: absolute; z-index: 1; top: 50%; right: 3%;
  height: 126%; width: auto; max-width: 60%; transform: translateY(-50%);
  object-fit: contain; object-position: right center;
  filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--roxo-escuro) 22%, transparent));
  pointer-events: none; user-select: none;
}
.brand-strip--wide .brand-strip__image { height: 104%; max-width: 78%; right: 1%; }
.brand-strip--banner { border-color: color-mix(in srgb, var(--roxo) 14%, var(--borda)); }
.brand-strip--banner .brand-strip__mark { display: none; }
.brand-strip--banner .brand-strip__image {
  inset: 0; width: 100%; height: 100%; max-width: none; transform: none;
  object-fit: contain; object-position: right center; filter: none;
}
.brand-strip--strong { height: clamp(220px, 21vw, 280px); }
.brand-strip--strong .brand-strip__image { height: 112%; max-width: 64%; }
.brand-strip--compact { height: 112px; }
.brand-strip--compact .brand-strip__image { height: 150%; }
.brand-strip--compact.brand-strip--banner .brand-strip__image { height: 100%; }
.secao > .brand-strip { margin-bottom: var(--espaco-4); }

/* O hero de marca: a mesma faixa, com label + titulo + subtitulo à esquerda
   e as frases manuscritas encostadas na arte. Abre Planejamento, Campanhas,
   Influencers, Minhas lojas, Prazos, Editores e Calendário. */
.brand-strip--com-texto {
  height: clamp(180px, 16vw, 216px);
  display: flex; align-items: center; padding: 0 36px;
}
.brand-strip--com-texto .brand-strip__image { max-width: 40%; height: 108%; right: 6%; }
.brand-strip__texto { position: relative; z-index: 2; max-width: 46%; }
.brand-strip__eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--roxo-escuro); margin-bottom: 8px;
}
.brand-strip__titulo { font-size: clamp(20px, 2vw, 26px); font-weight: 700; color: var(--tinta); line-height: 1.25; }
.brand-strip__subtitulo { margin-top: 8px; font-size: 13.5px; color: var(--cinza); line-height: 1.5; }
/* As duas frases manuscritas ficam sobre a arte, e a arte tem cor e brilho
   demais para letra sem fundo ficar legível em qualquer trecho onde caia.
   O balão resolve isso onde quer que ele pouse — igual ao da avaliação. */
.brand-strip__legenda {
  position: absolute; z-index: 2; top: 10%; right: 3%; max-width: 138px;
  padding: 7px 11px; border-radius: 13px 13px 4px 13px;
  background: rgb(255 255 255 / .85); background: light-dark(rgb(255 255 255 / .85), #1b152cd9); box-shadow: 0 4px 14px -8px rgb(76 42 143 / .35);
  font-family: cursive; font-size: 12.5px; line-height: 1.35; color: #443071; color: light-dark(#443071, #cfc2fe); text-align: center;
}
.brand-strip__etiqueta {
  position: absolute; z-index: 2; top: 50%; right: 1%; max-width: 104px; transform: translateY(-50%);
  padding: 7px 10px; border-radius: 13px 4px 13px 13px;
  background: rgb(255 255 255 / .85); background: light-dark(rgb(255 255 255 / .85), #1b152cd9); box-shadow: 0 4px 14px -8px rgb(76 42 143 / .35);
  font-family: cursive; font-size: 11px; line-height: 1.35; color: #443071; color: light-dark(#443071, #cfc2fe); text-align: right;
}
.brand-strip__etiqueta span { color: #f59e0b; color: light-dark(#f59e0b, #d17d00); }

@media (max-width: 820px) {
  .brand-strip { height: 140px; }
  .brand-strip__image { max-width: 70%; right: -4%; }
  .brand-strip--wide .brand-strip__image { max-width: 92%; right: -6%; }
  .brand-strip--strong { height: 200px; }
  .brand-strip--compact { height: 96px; }
  .brand-strip--com-texto { height: auto; min-height: 168px; padding: 20px 24px; }
  .brand-strip--com-texto .brand-strip__image { position: static; max-width: 100%; height: auto; width: 130px; margin: 12px 0 0 auto; display: block; transform: none; }
  .brand-strip__texto { max-width: 100%; }
  .brand-strip__legenda, .brand-strip__etiqueta { display: none; }
}
@media (max-width: 560px) {
  .brand-strip { height: 118px; }
  .brand-strip__image { max-width: 84%; right: -14%; opacity: .92; }
  .brand-strip--wide .brand-strip__image { max-width: 118%; right: -22%; }
  .brand-strip--banner .brand-strip__image { object-position: right center; }
  .brand-strip--strong { height: 168px; }
  .brand-strip--compact { height: 84px; }
}

.grade { display: grid; gap: 16px; }
.grade-2 { --min-coluna: 300px; grid-template-columns: repeat(auto-fit, minmax(var(--min-coluna), 1fr)); }
.grade-3 { --min-coluna: 272px; grid-template-columns: repeat(auto-fit, minmax(var(--min-coluna), 1fr)); }

/* Um número em destaque dentro de um cartão. Nasceu no admin e passou a valer
   também no painel do editor, então mora aqui. */
.numero-grande {
  font-size: 26px; font-weight: 600; color: var(--tinta);
  margin: 4px 0 2px; letter-spacing: -.5px;
}
.grade-4 { --min-coluna: 210px; grid-template-columns: repeat(auto-fit, minmax(var(--min-coluna), 1fr)); }

/* `auto-fit` recolhe as colunas vazias e o que sobrou estica para preencher a
   linha. Numa grade em que o número de cartões depende do perfil ou do que a
   pessoa tem hoje, um cartão sozinho vira uma faixa de ponta a ponta com um
   número no meio. `auto-fill` guarda as colunas: um cartão ocupa um cartão.

   Vem depois das três para vencer no cascade, e herda a largura de coluna de
   quem ela acompanha — `grade-3 grade-fixa` mantém a coluna de 272px. */
.grade-fixa { grid-template-columns: repeat(auto-fill, minmax(var(--min-coluna, 210px), 1fr)); }

/* ---------- Board kanban ---------- */
/* O min-width:0 é o que faz o overflow-x valer. Sem ele, um item flex não
   encolhe abaixo do próprio conteúdo, e as seis colunas empurram a página
   inteira para o lado em vez de rolarem dentro do quadro. */
.board {
  flex: 1; min-width: 0;
  display: flex; gap: 16px; overflow-x: auto;
  align-items: stretch; padding-bottom: 4px;
}

.coluna {
  flex: 1 1 0; min-width: 178px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  display: flex; flex-direction: column;
  height: calc(100vh - 152px);
  position: relative; overflow: hidden;
}
.coluna::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cor-estado); }

.coluna-topo { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--borda); }
.ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.coluna-titulo { font-size: 13px; font-weight: 600; }
.contador {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 99px; background: var(--fundo); color: var(--cinza);
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
.coluna-corpo { padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; }
.coluna-dica {
  margin-top: auto; min-height: 122px; padding: 14px 11px 10px;
  color: var(--cinza);
  background: linear-gradient(145deg, transparent 25%, color-mix(in srgb, var(--cor-estado) 8%, white)); background: linear-gradient(145deg, transparent 25%, color-mix(in srgb, var(--cor-estado) 8%, light-dark(white, #1b152c)));
}
.coluna-dica > span {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--cor-estado); background: color-mix(in srgb, var(--cor-estado) 10%, white); background: color-mix(in srgb, var(--cor-estado) 10%, light-dark(white, #1b152c));
}
.coluna-dica svg { width: 23px; height: 23px; }
.coluna-dica p { margin-top: 8px; font-size: 12px; line-height: 1.45; }
.coluna-dica i { display: block; width: 28px; margin-top: 10px; border-top: 2px solid var(--cor-estado); }

/* ---------- O vazio ----------

   O desenho novo mostra o ícone de linha da tela no vazio; as telas que têm
   arte própria (camaleões) desenham o vazio delas por cima desta base. */
.vazio {
  min-height: 160px; border: 1px dashed var(--borda-forte); border-radius: var(--raio-painel);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 34px 12px; text-align: center;
}
.vazio svg { width: 22px; height: 22px; color: var(--cinza-fraco); }
.vazio p { max-width: 520px; font-size: var(--texto-meta); color: var(--cinza); line-height: 1.55; }

.btn-adicionar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; background: none; border: 0;
  padding: 9px; margin-top: 2px; border-radius: 9px;
  color: var(--cinza); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.btn-adicionar svg { width: 14px; height: 14px; }
.btn-adicionar:hover { background: var(--lavanda); color: var(--roxo-escuro); }

/* ---------- Números em destaque e gráfico ---------- */

/* O número que a tela lidera — só um por painel. */
.hero { font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin-top: 4px; }

/* Variação em relação ao período anterior. O sinal e o texto carregam o
   significado; a cor só reforça — vermelho e verde não se distinguem em
   boa parte dos casos de daltonismo. */
.delta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; margin-top: 7px; }
.delta svg { width: 13px; height: 13px; }
.delta.bom { color: #006300; color: light-dark(#006300, #86d97f); }
.delta.ruim { color: #C0392F; color: light-dark(#C0392F, #fe8778); }
.delta.neutro { color: var(--cinza-fraco); font-weight: 400; }
.delta .periodo { color: var(--cinza); font-weight: 400; }

/* Tile de indicador */
.tile { display: flex; flex-direction: column; gap: 2px; }
.tile-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.tile-icone {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--cor-tile, var(--roxo)) 12%, transparent);
  color: var(--cor-tile, var(--roxo)); flex-shrink: 0;
}
.tile-icone svg { width: 16px; height: 16px; }
.tile-rotulo { font-size: 12.5px; color: var(--cinza); font-weight: 500; }
.tile-valor { font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.tile-nota { font-size: 11.5px; color: var(--cinza-fraco); margin-top: 3px; }
.tile-seta {
  position: absolute; right: 17px; top: 28px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%; color: var(--roxo-escuro);
  background: color-mix(in srgb, var(--roxo) 8%, transparent);
}
.tile-seta svg { width: 16px; height: 16px; }

/* Cartão do gráfico */
.cartao-grafico { padding: 20px 20px 12px; }
/* O cabeçalho do gráfico quebra em duas linhas quando o título e os
   controles não cabem lado a lado, em vez de empurrar a página. */
.grafico-topo { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 6px; flex-wrap: wrap; }
.grafico-topo > div:not(.grafico-acoes) { min-width: 0; flex: 1 1 220px; }
.grafico-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.grafico { position: relative; width: 100%; }
.grafico svg { display: block; }
.grafico .captura { cursor: crosshair; }

.grafico-vazio {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 12.5px; color: var(--cinza-fraco); text-align: center;
  pointer-events: none;
}
/* A mensagem tem fundo próprio: as linhas de grade não passam por cima do texto. */
.grafico-vazio > span { padding: 8px 14px; border-radius: 10px; background: var(--superficie); line-height: 1.45; }

.grafico-dica {
  position: absolute; transform: translate(-50%, -100%);
  background: var(--tinta); color: #fff;
  border-radius: 8px; padding: 7px 10px;
  font-size: 12px; line-height: 1.45;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgb(30 27 46 / .4);
}
.grafico-dica b { display: block; font-weight: 600; }
.grafico-dica span { color: #D9D3EE; }

/* ---------- Funil ----------
   Usado no Garimpo dos dois lados: no influencer para mostrar o caminho da
   busca até as escolhidas, no admin para o caminho do varrido até a venda. */
.funil { display: flex; flex-direction: column; gap: 2px; }
.funil-etapa { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.funil-etapa .quantos {
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  width: 74px; text-align: right; flex-shrink: 0;
}
.funil-etapa .barra {
  flex: 1; min-width: 40px; height: 8px; border-radius: 99px;
  background: var(--fundo); overflow: hidden;
}
.funil-etapa .barra i { display: block; height: 100%; background: var(--roxo); opacity: .85; }
.funil-etapa .rotulo { font-size: 12.5px; color: var(--cinza); width: 220px; flex-shrink: 0; }
.funil-etapa:last-child .quantos { color: var(--roxo-escuro); }

/* Tabela alternativa ao gráfico — a leitura que não depende de enxergar cor. */
.tabela-dados { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12.5px; }
.tabela-dados th, .tabela-dados td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--borda); }
.tabela-dados th { color: var(--cinza); font-weight: 600; }
.tabela-dados td:last-child, .tabela-dados th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-dados tr:last-child td { border-bottom: 0; }

.link-discreto {
  background: none; border: 0; padding: 0; margin-top: 10px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--roxo-escuro); cursor: pointer;
}
.link-discreto:hover { text-decoration: underline; }

/* Seletor no cabeçalho de um gráfico (a "setinha" que troca o recorte) */
.seletor { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
/* A opção mais longa ("Entradas · assinaturas e taxas") é mais larga que o
   cartão num telefone pequeno: o campo encolhe e corta com reticências. */
.seletor select { max-width: 100%; text-overflow: ellipsis; }
.seletor select {
  appearance: none; -webkit-appearance: none;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 9px 34px 9px 13px;
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.seletor select:hover { border-color: var(--roxo); }
.seletor select:focus-visible { outline: 2px solid var(--roxo); outline-offset: 1px; }
.seletor svg {
  position: absolute; right: 11px; width: 14px; height: 14px;
  color: var(--cinza); pointer-events: none;
}

/* ---------- Chips de filtro ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* Uma fila de botões. O button_to embrulha cada botão num <form>, e o form em
   bloco empilhava um botão por linha: "contents" deixa o botão na fila. */
.acoes-entrada { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.acoes-entrada > form, .chips > form { display: contents; }
/* A lacuna que ela ainda precisa preencher: [VOCÊ: ...] e [CONFERIR: ...]. */
/* A subida do vídeo do Pro direto para o S3. */
.barra-de-envio { height: 6px; border-radius: 999px; background: var(--linha, #e5e1f5); background: var(--linha, light-dark(#e5e1f5, #2d2642)); overflow: hidden; margin-top: 8px; }
.barra-de-envio > span { display: block; height: 100%; width: 0; background: var(--cor-perfil, #7C3AED); transition: width .2s; }
/* As três etapas da conferência de conteúdo, na ficha do vídeo. */
.etapas-conferencia { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; font-size: 13.5px; }
.etapas-conferencia li.feita { color: #15803D; color: light-dark(#15803D, #6bca82); }
mark.lacuna { background: color-mix(in srgb, #D97706 18%, transparent); color: inherit; padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.campo-bloco input.busca-campo { width: 100%; }
.chip {
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: 99px;
  padding: 6px 13px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  /* Um cinza mais escuro que o --cinza dos rótulos: aqui é texto clicável
     de 12,5px, que precisa de 4,5:1 sobre o fundo claro do próprio chip. */
  color: #5E5A76; color: light-dark(#5E5A76, #b9b5d4);
  cursor: pointer;
}
.chip:hover { border-color: var(--roxo); color: var(--roxo-escuro); }
.chip:focus-visible { outline: 2px solid var(--roxo); outline-offset: 1px; }
.chip[aria-pressed="true"] {
  background: var(--lavanda); border-color: var(--lavanda);
  color: var(--roxo-escuro); font-weight: 600;
}

/* ================= CALENDÁRIO =================
   Mesmo visual nos quatro painéis: é a mesma tela, montada pelo mesmo código. */

/* Um ícone dentro de um título acompanha o texto. Sem isto o SVG cresce até o
   tamanho do container — um robô de mil pixels no meio da tela. */
.cartao-titulo { display: flex; align-items: center; gap: 8px; }
.cartao-titulo svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--cinza); }

.tiras-agente {
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.tiras-agente > div { display: flex; flex-direction: column; gap: 2px; }
.tiras-agente b { font-size: 18px; color: var(--tinta); }

.grade-mes {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; margin-top: 14px;
  background: var(--borda); border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  overflow: hidden;
}
.grade-mes .cabeca-dia {
  background: var(--fundo); padding: 7px 8px; font-size: 11px; color: var(--cinza);
  text-transform: uppercase; letter-spacing: .5px;
}
.grade-mes .dia {
  background: var(--superficie); min-height: 92px; padding: 6px;
  display: flex; flex-direction: column; gap: 3px; cursor: pointer;
}
.grade-mes .dia:hover { background: var(--fundo); }
.grade-mes .dia.fora { opacity: .45; }
.grade-mes .dia.hoje { box-shadow: inset 0 0 0 2px var(--roxo); }
.grade-mes .numero-dia { font-size: 12px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.grade-mes .dia.hoje .numero-dia { color: var(--roxo-escuro); font-weight: 700; }

.grade-mes .pilula {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 1.3; padding: 3px 5px; border-radius: 5px;
  background: color-mix(in srgb, var(--cor) 12%, var(--superficie));
  color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grade-mes .pilula i { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.grade-mes .mais-dia { font-size: 11px; color: var(--cinza); padding-left: 4px; }

/* Quem publica o item (calendario/_aviso_do_modo): o assistido não sai sozinho. */
.aviso-do-modo {
  margin: 6px 0 2px; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.45;
  background: #fff7e6; background: light-dark(#fff7e6, #2a2010);
  border: 1px solid #f5d38a; border-color: light-dark(#f5d38a, #6b5320);
  color: var(--tinta);
}
.aviso-do-modo-acao { display: inline; margin: 0; }
.legenda-para-copiar { margin: 6px 0; display: grid; gap: 6px; justify-items: start; }
.redes-publicadas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.legenda-para-copiar .legenda-previa { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--fundo); font-size: 13px; white-space: pre-line; }
.aviso-do-modo-acao button { font-weight: 600; }

.item-agenda {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.item-agenda:last-child { border-bottom: 0; }
.item-agenda .quando {
  display: flex; flex-direction: column; align-items: center; min-width: 52px;
  font-variant-numeric: tabular-nums;
}
.item-agenda .quando b { font-size: 13px; color: var(--tinta); }
.item-agenda .quando span { font-size: 11px; color: var(--cinza); }
.item-agenda .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-agenda .corpo b { font-size: 13.5px; color: var(--tinta); }
.item-agenda .acoes-item { display: flex; gap: 6px; flex-shrink: 0; }
.item-agenda .acoes-item button { padding: 4px 10px; font-size: 12px; }
.aviso-agenda { font-size: 11.5px; color: #B45309; color: light-dark(#B45309, #f68f53); line-height: 1.45; }

.dialogo {
  border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  background: var(--superficie); color: var(--tinta);
  padding: 22px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.dialogo::backdrop { background: rgba(15, 23, 42, .45); }
/* A confirmação do turbo_confirm, na tela (application.js).
   Não usa `.dialogo`: essa classe também pertence a formulários grandes nas
   folhas dos perfis e fazia a confirmação virar uma faixa larga. */
dialog.confirmacao {
  box-sizing: border-box;
  width: min(460px, calc(100vw - 32px)); max-width: 460px;
  max-height: calc(100dvh - 32px); margin: auto; padding: 24px;
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--borda-forte); border-radius: 14px;
  color: var(--tinta); background: var(--superficie);
  box-shadow: 0 24px 70px -24px rgb(15 10 30 / .55);
}
dialog.confirmacao::backdrop { background: rgb(15 10 30 / .58); backdrop-filter: blur(2px); }
dialog.confirmacao .confirmacao-texto {
  max-width: 42ch; margin: 0;
  color: var(--tinta); font-size: 15px; line-height: 1.55; font-weight: 500;
}
dialog.confirmacao .confirmacao-acoes {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 22px; flex-wrap: wrap;
}
dialog.confirmacao .confirmacao-acoes > button { min-height: 42px; padding-inline: 18px; }
dialog.confirmacao .confirmacao-perigo,
dialog.confirmacao .confirmacao-perigo:hover {
  /* `--erro` clareia no tema escuro porque normalmente é cor de texto. Aqui
     ele é preenchimento de botão e precisa continuar fechado sob o branco. */
  border-color: #9F1D17 !important; color: #fff; background: #9F1D17 !important;
}
dialog.confirmacao .confirmacao-perigo:hover { background: #861812 !important; filter: none; }

@media (max-width: 480px) {
  dialog.confirmacao { width: calc(100vw - 24px); padding: 20px; }
  dialog.confirmacao .confirmacao-acoes { display: grid; grid-template-columns: 1fr 1fr; }
  dialog.confirmacao .confirmacao-acoes > button { width: 100%; justify-content: center; }
}
.form-agenda { display: flex; flex-direction: column; gap: 14px; }
.form-agenda .linha-campo { display: flex; flex-direction: column; gap: 6px; }
.form-agenda .linha-campo > span { font-size: 12px; color: var(--cinza); }
.form-agenda .linha-campo > span i { font-style: normal; opacity: .8; }
.form-agenda input, .form-agenda textarea, .form-agenda select {
  font: inherit; font-size: 13.5px; padding: 9px 12px; color: var(--tinta);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-campo);
  background: var(--superficie); width: 100%; resize: vertical;
}
.form-agenda input:focus, .form-agenda textarea:focus { outline: 2px solid var(--roxo); outline-offset: 1px; }
.form-agenda .dupla { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.form-agenda .acoes-form { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

@media (max-width: 720px) {
  .grade-mes .dia { min-height: 64px; }
  .grade-mes .pilula { font-size: 11px; }
  .item-agenda { flex-wrap: wrap; }
}

/* ================= PERSONA E ROTEIRO ================= */

.campo-persona { display: flex; flex-direction: column; gap: 8px; }
.campo-persona .linha-campo { display: flex; flex-direction: column; gap: 6px; }
.campo-persona .linha-campo > span { font-size: 12.5px; color: var(--tinta); font-weight: 500; }
.campo-persona textarea, .campo-persona input {
  font: inherit; font-size: 13.5px; padding: 9px 12px; color: var(--tinta); width: 100%;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-campo);
  background: var(--superficie); resize: vertical;
}
.campo-persona textarea:focus, .campo-persona input:focus { outline: 2px solid var(--roxo); outline-offset: 1px; }
.campo-persona .porque { font-size: 11.5px; opacity: .85; }

.blocos-roteiro { display: grid; gap: 14px; margin-top: 14px; }
.blocos-roteiro .bloco {
  display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--borda);
}
.blocos-roteiro .bloco:first-child { border-top: 0; padding-top: 0; }
.blocos-roteiro .tempo {
  display: flex; flex-direction: column; min-width: 82px; font-size: 12px;
  color: var(--roxo-escuro); font-weight: 600; font-variant-numeric: tabular-nums;
}
.blocos-roteiro .tempo span { color: var(--cinza); font-weight: 400; font-size: 11.5px; }
.blocos-roteiro .corpo { flex: 1; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.blocos-roteiro textarea {
  font: inherit; font-size: 13px; padding: 8px 10px; color: var(--tinta); width: 100%;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  background: var(--fundo); resize: vertical;
}

.briefing { display: grid; gap: 2px; margin-top: 12px; }
.linha-brief { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.linha-brief:last-child { border-bottom: 0; }
.linha-brief > span { font-size: 12px; color: var(--cinza); min-width: 130px; flex-shrink: 0; }
.linha-brief > b { font-size: 13px; color: var(--tinta); font-weight: 400; line-height: 1.5; }

@media (max-width: 720px) {
  .blocos-roteiro .bloco { flex-direction: column; gap: 8px; }
  .linha-brief { flex-direction: column; gap: 2px; }
}


/* ================= PEÇAS COMPARTILHADAS =================

   Estas regras nasceram no painel do admin e passaram a ser usadas pelos
   módulos que os quatro painéis montam — persona, roteiro, calendário. Ficar
   só lá deixava a mesma tela bonita no admin e quebrada no cliente. */

.ficha-topo { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }

.ficha-topo .quem { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }

.ficha-topo .quem b { font-size: 16px; color: var(--tinta); }

.acoes-ficha { display: flex; gap: 8px; flex-wrap: wrap; }

.colar {
  width: 100%; font: inherit; font-size: 13px; line-height: 1.5; padding: 10px 12px;
  margin: 12px 0 10px; color: var(--tinta); resize: vertical;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao); background: var(--superficie);
}

.colar:focus { outline: 2px solid var(--roxo); outline-offset: 1px; }

.andamento { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

.andamento .barra {
  flex: 1; min-width: 140px; height: 6px; border-radius: 3px; background: var(--borda); overflow: hidden;
}

.andamento .barra i {
  display: block; height: 100%; border-radius: 3px; background: var(--roxo);
  transition: width .25s ease;
}

.andamento span { font-size: 12.5px; color: var(--cinza); }

.previa {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px;
  padding: 14px 16px; font-size: 13px; line-height: 1.6; white-space: pre-wrap;
  word-break: break-word;
}

.rolagem { overflow-x: auto; }
/* Toda caixa que rola de lado é a referência dos filhos com `position:
   absolute`. Sem isso, o rótulo escondido do leitor de tela (`.sr-only`) de
   uma coluna lá no fim da tabela escapava da rolagem e alargava a página: na
   avaliação do lojista o documento ia a 377px num telefone de 360, e o
   Chrome do Android reduzia o zoom da tela inteira para caber — o modo
   responsivo do computador não faz isso, e a tela parecia certa lá. */
:where(.rolagem, .av-tabela-rolagem, .analises-tabela-wrap, .ka-tabela-wrap,
       .mlojas-tabela-rolagem, .diretor-revisao-rolagem, .tabela-clientes,
       .calendario-rolagem, .ranking-regras) { position: relative; }

.situacao {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--cor-sit) 12%, transparent);
  color: var(--cor-sit);
}

.lista-vazia {
  padding: 46px 20px; text-align: center;
  font-size: 12.5px; color: var(--cinza-fraco); line-height: 1.6;
}

/* ================= AGENTES ================= */

.agente { display: flex; flex-direction: column; gap: 12px; }
/* Nome próprio de propósito: existe um .a-construir no shell que centraliza
   texto, e herdar aquilo aqui centralizava o cartão inteiro. */
.agente.agente-parado { opacity: .82; }
.cabeca-agente { display: flex; align-items: flex-start; gap: 12px; }
.marca-agente {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cor) 13%, var(--superficie)); color: var(--cor);
}
.marca-agente svg { width: 19px; height: 19px; }
.cabeca-agente .quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cabeca-agente .quem b { font-size: 14.5px; color: var(--tinta); }
.agente, .agente * { text-align: left; }
.cabeca-agente .selo {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: #B45309; color: light-dark(#B45309, #f68f53); background: color-mix(in srgb, #B45309 10%, transparent);
  padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 2px;
  white-space: nowrap; display: inline-block;
}
.agente .faz { line-height: 1.55; }
.agente .porque-nao { line-height: 1.55; padding: 10px 12px; border-radius: 8px; background: var(--fundo); }

.condicoes { display: grid; gap: 7px; }
.condicao { display: flex; align-items: flex-start; gap: 9px; }
.condicao .marca {
  /* `.marca` também é o logo da barra lateral (padding embaixo): aqui zera. */
  box-sizing: border-box; padding: 0; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--fundo); border: 1px solid var(--borda); color: var(--cinza);
}
.condicao.ok .marca {
  background: color-mix(in srgb, #006300 12%, var(--superficie));
  border-color: color-mix(in srgb, #006300 30%, var(--borda)); color: #006300; color: light-dark(#006300, #b3dbb3);
}
.condicao b { font-size: 12.5px; color: var(--tinta); font-weight: 500; display: block; }
.condicao:not(.ok) b { color: var(--cinza); }
.condicao .cartao-sub { display: block; font-size: 11.5px; }
.condicao.opcional .marca { border-style: dashed; }

.pe-agente { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; }

/* A caixa de pedir alguma coisa ao agente, dentro do próprio cartão.
   Fica escondida até alguém clicar em "Rodar agora": o cartão existe para
   explicar o que o agente precisa, e um campo de texto aberto o tempo todo
   competiria com essa leitura. */
.rodar-agente { display: grid; gap: 10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--borda); }
.rodar-agente .campo { width: 100%; resize: vertical; font-family: inherit; }

/* A resposta vem em markdown e é mostrada como texto, de propósito — o que o
   modelo devolve não vira HTML nesta tela. Fonte mono porque o que chega é
   tabela e roteiro com timecode, que dependem de alinhamento. */
.resposta-agente, .texto-revisado {
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-botao);
  padding: 12px 14px; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--tinta);
}

/* ---------- Captação ----------
   O texto do consentimento é o que a pessoa vai ler de verdade, então ele
   aparece na tela com o mesmo destaque que terá lá fora — e não como mais um
   campo de formulário no meio de outros. */
.consentimento-ativo { margin-top: 14px; }
.linha-versao { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.selo-vigente {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #006300; color: light-dark(#006300, #86d97f); background: color-mix(in srgb, #16A34A 12%, transparent);
  border-radius: 4px; padding: 2px 6px;
}

/* O aviso de que falta o consentimento não é decoração: enquanto ele estiver
   na tela, não há captação nenhuma acontecendo. Por isso ocupa espaço. */
.alerta-lei {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--raio-botao);
  background: color-mix(in srgb, #B45309 8%, transparent);
  border-left: 3px solid #B45309;
  font-size: 12.5px; line-height: 1.55; color: var(--tinta);
}
.alerta-lei b { display: block; margin-bottom: 3px; }

.form-consentimento { display: grid; gap: 14px; margin-top: 14px; }
.form-consentimento .linha-campo { display: flex; flex-direction: column; gap: 6px; }
.form-consentimento .linha-campo > span:first-child { font-size: 12.5px; font-weight: 500; }
.form-consentimento textarea,
.form-consentimento input[type="text"],
.form-consentimento select,
.campo-persona select,
.campo-persona input[type="number"] {
  width: 100%; font: inherit; font-size: 13px; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-botao); padding: 8px 10px; resize: vertical;
}

/* O opt-in é a única caixa de marcar da tela, e marcá-la é uma declaração —
   por isso vem com o texto inteiro do lado, não com um rótulo curto. */
.opt-in { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.opt-in input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--roxo); }
.opt-in > span { display: grid; gap: 3px; font-size: 12.5px; }

.tetos { display: grid; gap: 12px; }
.tetos > div { display: grid; gap: 2px; }
.tetos b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; }

.faixa {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--cor-faixa); border: 1px solid var(--cor-faixa);
  border-radius: 4px; padding: 1px 6px; margin-right: 6px;
}
.lead-saiu td { opacity: .55; }
.acoes-lead { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.link-discreto.perigo { color: #C0392F; color: light-dark(#C0392F, #fe8778); font-weight: 600; }

.historico { margin-top: 16px; }
.historico summary { font-size: 12.5px; color: var(--cinza); cursor: pointer; }
.historico summary:hover { color: var(--roxo-escuro); }

/* A liberação por perfil, no cartão do agente. Só a administração vê.
   Separada do pé por uma linha porque é uma decisão de outra natureza: ligar
   diz se o agente trabalha, liberar diz para quem ele trabalha por trás. */
.liberacao {
  display: grid; gap: 7px; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed var(--borda);
}
.liberacao .rotulo { font-weight: 600; color: var(--tinta); }
.liberacao .chip { font-size: 11.5px; padding: 4px 9px; }
.liberacao .chip.ativo { border-color: var(--cor, var(--borda)); font-weight: 600; }
.liberacao-perfil { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.liberacao-perfil form { margin: 0; }

/* A vitrine de editores, vista por quem contrata. */
.busca-editores { display: grid; gap: 10px; margin-top: 14px; }
.busca-campo {
  width: 100%; font: inherit; font-size: 13px; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-botao); padding: 9px 12px;
}
.busca-campo:focus { outline: 2px solid var(--roxo); outline-offset: 1px; }

.editor-vitrine { display: flex; flex-direction: column; gap: 12px; }
.cabeca-editor { display: flex; align-items: flex-start; gap: 12px; }
.cabeca-editor .quem { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cabeca-editor .quem b { font-size: 14px; }

/* A nota fica à direita e grande: é o primeiro número que quem contrata
   procura, e o que decide a ordem em que ele lê o resto do cartão. */
.nota-editor { text-align: right; display: grid; gap: 1px; }
.nota-editor b { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }

.numeros-editor { display: flex; flex-wrap: wrap; gap: 18px; }
.numeros-editor > div { display: grid; gap: 1px; }
.numeros-editor b { font-size: 13.5px; font-variant-numeric: tabular-nums; }

.tags-editor { display: flex; flex-wrap: wrap; gap: 6px; }
.tags-editor span {
  font-size: 11.5px; color: var(--roxo-escuro); background: var(--lavanda);
  border-radius: 4px; padding: 2px 8px;
}

/* Os três preços lado a lado, porque a escolha entre editores é quase sempre
   entre o preço da peça que a pessoa vai mandar. */
.precos-editor {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--borda);
}
.precos-editor > div { display: grid; gap: 1px; }
.precos-editor b { font-size: 14px; font-variant-numeric: tabular-nums; }
/* A entrega rápida é a única tag que não é especialidade: ela muda o prazo,
   não o assunto. Por isso ganha cor própria em vez de se misturar às outras. */
.tags-editor .express {
  color: #006300; color: light-dark(#006300, #86d97f); background: color-mix(in srgb, #16A34A 12%, transparent); font-weight: 600;
}

/* O item de menu que ainda não foi liberado. Continua clicável de propósito:
   quem clica merece saber o que vai ter ali, e um botão que não responde
   parece defeito. */
.nav button.bloqueado { color: var(--cinza-fraco); }
.nav button.bloqueado svg:last-child { margin-left: auto; width: 13px; height: 13px; opacity: .75; }
.a-construir.bloqueada svg { color: var(--cinza-fraco); }

/* Os projetos que a pessoa cria por conta própria. */
.novo-projeto { display: grid; gap: 10px; margin-top: 14px; }
.novo-projeto textarea { resize: vertical; font-family: inherit; }

.projeto { display: flex; flex-direction: column; gap: 10px; }
.cabeca-projeto { display: flex; align-items: center; gap: 10px; }
.cabeca-projeto .cartao-sub { margin-left: auto; }

/* A ideia é o conteúdo do cartão, não um subtítulo: ela vem em corpo de texto
   de leitura, porque é a frase que a pessoa vai reler para lembrar o que quis. */
.ideia-projeto { font-size: 14.5px; line-height: 1.5; color: var(--tinta); }

.roteiro-projeto { display: grid; gap: 8px; }
.mini-select {
  font: inherit; font-size: 12px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao); padding: 5px 8px;
}

/* ---------- Roteiro ---------- */
.persona-ligada {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
  padding: 10px 12px; border-radius: var(--raio-botao); background: var(--fundo);
  font-size: 12.5px; color: var(--cinza);
}
.persona-ligada .barra { flex: none; width: 90px; height: 6px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.persona-ligada .barra i { display: block; height: 100%; border-radius: 999px; background: var(--roxo); }
.persona-ligada.boa .barra i { background: #16A34A; }
.persona-ligada.media .barra i { background: #D97706; }
.persona-ligada.fraca .barra i { background: #C0392F; }

.abrir-avancadas {
  font: inherit; font-size: 12.5px; color: var(--roxo-escuro); background: none; border: 0;
  cursor: pointer; padding: 12px 0 0; text-align: left;
}
.abrir-avancadas:hover { text-decoration: underline; }
.avancadas { display: grid; gap: 14px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--borda); }
.contagem {
  font-size: 11.5px; font-weight: 600; color: var(--cinza);
  background: var(--fundo); border-radius: 999px; padding: 1px 8px; margin-left: 6px;
}

.card-roteiro { display: flex; flex-direction: column; gap: 8px; }
.titulo-roteiro { font-size: 14.5px; line-height: 1.4; }
.score-linha { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--borda); }
.score-linha b { font-size: 20px; font-variant-numeric: tabular-nums; }
.score-linha .btn-secundario { margin-left: auto; }

.topo-roteiro { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.topo-roteiro .situacao { margin-left: auto; }
.acoes-roteiro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* A linha do tempo: o vídeo inteiro em um olhar. Cada faixa é proporcional ao
   tempo que a parte ocupa, então desequilíbrio de ritmo aparece sozinho. */
.timeline { margin-top: 14px; }
.faixas { display: flex; gap: 2px; }
.faixa {
  min-width: 0; padding: 7px 8px; font-size: 11px; font-weight: 600;
  background: var(--lavanda); color: var(--roxo-escuro);
  border-radius: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.faixa.gancho { background: var(--roxo-forte); color: #fff; }
.faixa.fraco { background: color-mix(in srgb, #B45309 16%, transparent); color: #B45309; color: light-dark(#B45309, #f68f53); }
.marcas-tempo { display: flex; gap: 2px; margin-top: 3px; }
.marcas-tempo span { font-size: 11px; color: var(--cinza-fraco); font-variant-numeric: tabular-nums; }
.marcas-tempo .fim { flex: none; }

.cabeca-score { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.nota-score { display: grid; gap: 1px; }
.nota-score b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.eixos-score { flex: 1; min-width: 240px; display: grid; gap: 5px; }
.eixo { display: grid; grid-template-columns: 88px 1fr 30px; align-items: center; gap: 8px; }
.eixo .barra { height: 6px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.eixo .barra i { display: block; height: 100%; background: var(--roxo); border-radius: 999px; }
.eixo b { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

.avisos-score { display: grid; gap: 8px; margin-top: 12px; }
.aviso-score {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; line-height: 1.5; color: var(--tinta);
  background: color-mix(in srgb, #B45309 7%, transparent);
  border-left: 3px solid #B45309; border-radius: var(--raio-botao); padding: 9px 12px;
}
.aviso-score span { flex: 1; min-width: 200px; }

.abas-roteiro { margin-bottom: 14px; }
.corpo-aba { display: grid; gap: 12px; }
.bloco-gravar, .bloco-editar {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.bloco-gravar:last-of-type, .bloco-editar:last-of-type { border-bottom: 0; }
.tempo-bloco { display: grid; gap: 2px; }
.tempo-bloco b { font-size: 12.5px; color: var(--roxo-escuro); font-variant-numeric: tabular-nums; }
.fala-bloco p { font-size: 14.5px; line-height: 1.55; color: var(--tinta); }
.fala-bloco .cartao-sub { display: block; margin-top: 5px; }
.linhas-edicao { display: grid; gap: 5px; }
.fecho-brief { display: grid; gap: 5px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
/* A seta do voltar acompanha o texto, e não o contrário. */
.voltar-lista { display: inline-flex; align-items: center; gap: 5px; }
.voltar-lista svg { width: 14px; height: 14px; }

/* O que falta para o agente rodar sem ninguém pedir. Fica separado das
   condições de responder por uma linha tracejada: são duas naturezas, e
   misturá-las era o que fazia agente que funciona parecer travado. */
.para-sozinho {
  display: grid; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed var(--borda);
}
.para-sozinho .rotulo { line-height: 1.5; }
/* O que o agente fez sozinho (RodadaDeAgente) e o último erro dele. */
.rodadas-do-agente { margin-top: 10px; line-height: 1.5; }
.rodadas-do-agente .erro-do-agente { display: block; margin-top: 4px; color: #B45309; color: light-dark(#B45309, #f5c18a); }

/* ---------- Contas de acesso ---------- */
.contas { display: grid; gap: 1px; background: var(--borda); border-radius: 10px; overflow: hidden; margin-top: 12px; }
.linha-conta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--superficie); padding: 12px 14px;
}
.linha-conta.inativa { opacity: .6; }
.quem-conta { display: grid; gap: 1px; flex: 1; min-width: 160px; }
.quem-conta b { font-size: 13.5px; }
.nota-conta { font-style: italic; }
.acoes-conta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* O formulário aberto dentro da lista fica com a borda da vez, para não parecer
   que a linha de baixo é dele. */
.editando-conta {
  background: var(--fundo); border: 1px solid var(--roxo);
  border-radius: 10px; padding: 14px; margin: 0;
}

/* ---------- Persona: o passo a passo ----------
   Vinte perguntas mostradas de uma vez fazem fechar a aba. O que a pessoa vê é
   a etapa de agora e, ao lado, quanto falta — a trilha é progresso e navegação
   ao mesmo tempo, porque a resposta da etapa 4 muda a da 1. */
.persona-topo {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao, 12px); padding: 18px 20px;
}
.persona-topo > div:first-child { flex: 1; min-width: 220px; }
.persona-progresso { height: 9px; overflow: hidden; border-radius: 99px; background: #ebe8f4; background: light-dark(#ebe8f4, #2c243f); }
.persona-progresso i { display: block; height: 100%; border-radius: 99px; background: var(--grad-primario); }
.persona-dica {
  grid-column: 1 / -1; align-self: end; display: grid;
  grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
  margin-top: 14px; padding: 16px 14px; border-radius: var(--raio-painel);
  color: var(--roxo-escuro); background: var(--lavanda);
}
.persona-dica svg { width: 24px; height: 24px; }
.persona-dica p { color: var(--cinza); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.persona-dica span { grid-column: 2; width: 28px; border-top: 2px solid var(--roxo); }
.tanto-feito { text-align: right; display: grid; gap: 1px; }
.tanto-feito b { font-size: 30px; line-height: 1; color: var(--roxo-escuro); font-variant-numeric: tabular-nums; }

.persona-wizard { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 900px) { .persona-wizard { grid-template-columns: 1fr; } }

/* A trilha, com a barra vertical que enche conforme as respostas entram. */
.trilha {
  position: sticky; top: 16px; display: grid; grid-template-columns: 4px 1fr; gap: 14px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao, 12px); padding: 16px 14px;
}
.barra-trilha { background: var(--borda); border-radius: 999px; overflow: hidden; align-self: stretch; }
.barra-trilha i {
  display: block; width: 100%; border-radius: 999px;
  background: linear-gradient(180deg, var(--roxo), var(--roxo-claro));
  transition: height .25s ease;
}
.trilha ol { list-style: none; display: grid; gap: 4px; }
.passo {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; text-align: left; background: none; border: 0; cursor: pointer;
  border-radius: 8px; padding: 8px 9px;
}
.passo:hover { background: color-mix(in srgb, var(--roxo) 6%, transparent); }
.passo.agora { background: var(--lavanda); }
.passo .bolha {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--borda); color: var(--cinza);
}
.passo.agora .bolha { background: var(--roxo-forte); color: #fff; }
.passo.feito .bolha { background: color-mix(in srgb, #16A34A 16%, transparent); color: #006300; color: light-dark(#006300, #86d97f); }
.texto-passo { display: grid; gap: 1px; min-width: 0; }
.texto-passo b { font-size: 12.5px; }

.etapa-atual { display: grid; gap: 18px; }
.cabeca-etapa { display: flex; align-items: flex-start; gap: 12px; }
.numero-etapa {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: var(--lavanda); color: var(--roxo-escuro);
}
.cabeca-etapa > div { display: grid; gap: 2px; }
.cabeca-etapa b { font-size: 16px; }

.perguntas { display: grid; gap: 22px; }
/* Remove o contorno padrão do agrupamento, mantendo os campos e cartões. */
.secao-persona fieldset.perguntas { border: 0; margin: 0; padding: 0; min-width: 0; }
.pergunta { display: grid; gap: 8px; }
.titulo-pergunta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.titulo-pergunta b { font-size: 14.5px; line-height: 1.4; }
.pergunta .ajuda { line-height: 1.5; }
.pergunta textarea { width: 100%; resize: vertical; font-family: inherit; }

/* As opções. Alvo grande e marca visível: a diferença entre marcada e não
   marcada precisa ser óbvia de longe, porque a pessoa vai marcar várias. */
.opcoes-pergunta { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; color: var(--tinta); cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: 999px; padding: 8px 14px;
}
.opcao:hover { border-color: var(--roxo); }
.marca-opcao {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--borda-forte); background: var(--superficie);
}
.opcoes-pergunta.multi .marca-opcao { border-radius: 4px; }
.opcao.marcada { border-color: var(--roxo); background: var(--lavanda); color: var(--roxo-escuro); font-weight: 500; }
.opcao.marcada .marca-opcao {
  border-color: var(--roxo); background: var(--roxo);
  box-shadow: inset 0 0 0 2.5px var(--superficie);
}
.opcao.escrita .x { opacity: .55; margin-left: 2px; }
.opcao.pontilhada { border-style: dashed; color: var(--cinza); }
.escrever-outro { flex: 1 1 240px; }
.escrever-outro input { width: 100%; font-size: 13px; padding: 8px 12px; }

.pe-etapa { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.pe-etapa .cartao-sub { flex: 1; text-align: center; }
.secao-persona .pe-etapa [data-persona-target=recado] { font-size: 16px; font-weight: 600; line-height: 1.5; }

.previa-fixa { margin-top: 16px; display: grid; gap: 8px; }
.aprendeu { font-weight: 600; color: var(--roxo-escuro); }
.frase-previa { font-size: 14px; line-height: 1.6; color: var(--tinta); }

/* O que o Garimpo e o quadro de planejamento desenham.

   Estas regras eram do influencer.css, e mudaram de folha quando o lojista
   passou a ter as duas telas. A regra do projeto é essa: o que duas telas
   precisam mora aqui, para que não haja duas cópias divergindo. */

/* Abas dentro de uma seção */
.subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borda); margin-bottom: 18px;
}
/* Botão e link: no sistema pronto as abas trocam por JS, aqui cada aba é um
   endereço. O visual é o mesmo, e um endereço por aba é o que permite mandar
   "olha a aba de comissões" para alguém. */
.subnav button, .subnav a {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 13px; margin-bottom: -1px; text-decoration: none;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--cinza);
  cursor: pointer; white-space: nowrap;
}
.subnav button:hover, .subnav a:hover { color: var(--tinta); }
.subnav button[aria-selected="true"], .subnav a[aria-selected="true"] {
  color: var(--roxo-escuro); font-weight: 600; border-bottom-color: var(--roxo);
}

/* Tela de venda do Garimpo */
.venda { max-width: 620px; margin: 0 auto; text-align: center; padding: 20px 0 40px; }
.venda .selo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lavanda); color: var(--roxo-escuro);
  border-radius: 99px; padding: 7px 15px; font-size: 12.5px; font-weight: 600;
}
.venda .selo svg { width: 15px; height: 15px; }
.venda h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 18px 0 10px; }
.venda .chamada { font-size: 14.5px; color: var(--cinza); line-height: 1.6; }
.venda .preco { font-size: 38px; font-weight: 600; letter-spacing: -.03em; margin-top: 26px; }
.venda .preco small { font-size: 15px; font-weight: 500; color: var(--cinza); }
.venda .porfora { font-size: 12.5px; color: var(--cinza-fraco); margin-top: 4px; }

.inclui { text-align: left; margin: 26px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px 22px; }
.inclui div { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; }
.inclui .check { color: #16A34A; color: light-dark(#16A34A, #43c166); font-weight: 700; flex-shrink: 0; }

/* A taxa de performance não fica em letra miúda: é a parte que decide. */
.taxa {
  text-align: left; border: 1px solid var(--borda-forte); border-radius: var(--raio-cartao);
  padding: 16px 18px; background: var(--fundo);
}
.taxa b { font-size: 13.5px; display: block; margin-bottom: 8px; }
.taxa p { font-size: 13px; color: var(--cinza); line-height: 1.6; }
.taxa table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.taxa td { padding: 5px 0; }
.taxa td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.taxa tr.destaque td { border-top: 1px solid var(--borda-forte); padding-top: 9px; }

.aceite { display: flex; align-items: flex-start; gap: 10px; text-align: left; margin: 20px 0; font-size: 13px; line-height: 1.55; }
.aceite input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--roxo); flex-shrink: 0; }

/* Onboarding */
.onboarding { max-width: 760px; margin: 0 auto; padding: 6px 0 40px; }
.onboarding h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 26px; }
.onboarding > .cartao-sub { margin-top: 5px; }
.passo-corpo { margin-top: 22px; }
.passo-acoes { display: flex; gap: 10px; align-items: center; margin-top: 26px; flex-wrap: wrap; }

.passos { display: flex; gap: 8px; flex-wrap: wrap; }
.passo { display: flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: 99px; }
.passo .bolha {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fundo); color: var(--cinza-fraco);
  font-size: 11.5px; font-weight: 700; flex-shrink: 0;
}
.passo .nome { font-size: 12.5px; color: var(--cinza-fraco); font-weight: 500; }
.passo.agora { background: var(--lavanda); }
.passo.agora .bolha { background: var(--roxo-forte); color: #fff; }
.passo.agora .nome { color: var(--roxo-escuro); font-weight: 600; }
.passo.feito .bolha { background: var(--sucesso); color: #fff; }
.passo.feito .nome { color: var(--cinza); }

.chip.grande { padding: 9px 15px; font-size: 13px; }

/* Cartão que se escolhe clicando */
.cartao-escolha {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  font: inherit; cursor: pointer; border: 1px solid var(--borda);
  transition: border-color .15s, background .15s;
}
/* O cartão é um <button>: sem cor própria, o título herdava o cinza do botão
   do navegador e sumia no tema escuro. */
.cartao-escolha b { color: var(--tinta); font-size: 14px; font-weight: 600; }
.cartao-escolha .estado-escolha { font-size: 12px; font-weight: 600; color: var(--cinza-fraco); margin-top: 6px; }
.cartao-escolha:hover { border-color: var(--roxo); }
.cartao-escolha.escolhido { border-color: color-mix(in srgb, #16A34A 45%, var(--borda)); }
.cartao-escolha.escolhido .estado-escolha { color: #006300; color: light-dark(#006300, #86d97f); }

/* Home do Garimpo */
.saudacao { font-size: 15px; color: var(--cinza); margin-bottom: 16px; }
.saudacao b { color: var(--tinta); font-weight: 600; }

/* Cartão de oferta */
.oferta { display: flex; flex-direction: column; gap: 12px; }
.oferta-topo { display: flex; align-items: flex-start; gap: 12px; }
.oferta h4 { font-size: 14px; font-weight: 600; line-height: 1.35; }
.oferta .onde { font-size: 12px; color: var(--cinza); margin-top: 3px; }
.nota {
  flex-shrink: 0; text-align: center; border-radius: 10px; padding: 7px 11px;
  background: color-mix(in srgb, var(--cor) 12%, transparent); color: var(--cor);
}
.nota .n { font-size: 19px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.nota .r { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.precos { display: flex; align-items: baseline; gap: 10px; }
.precos .por { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.precos .de { font-size: 13px; color: var(--cinza-fraco); text-decoration: line-through; }
.precos .off {
  font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px;
  background: color-mix(in srgb, #C0392F 12%, transparent); color: #C0392F; color: light-dark(#C0392F, #fe8778);
}

.componentes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
.componente { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.componente .cv { margin-left: auto; color: var(--cinza); font-weight: 500; white-space: nowrap; }
.componente .cn { color: var(--cinza-fraco); }

.ganho-oferta {
  display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
  padding-top: 11px; border-top: 1px solid var(--borda); margin-top: auto;
}
.ganho-oferta b { font-size: 14px; }
.oferta-acoes { display: flex; gap: 8px; }
.oferta-acoes button { flex: 1; }

/* Publicação pronta */
.publicacao { display: flex; flex-direction: column; gap: 10px; }
.publicacao pre {
  font: inherit; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px;
}
.publicacao-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.publicacao-topo b { font-size: 13.5px; }
.canais-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.canal-chip {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
  background: color-mix(in srgb, #16A34A 12%, transparent); color: #006300; color: light-dark(#006300, #86d97f);
}

/* O que o histórico do influencer soma ou tira desta oferta */
.afinidade {
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
  align-self: flex-start;
}
.afinidade.boa  { background: color-mix(in srgb, #16A34A 10%, transparent); color: #006300; color: light-dark(#006300, #86d97f); }
.afinidade.ruim { background: color-mix(in srgb, #C0392F 10%, transparent); color: #C0392F; color: light-dark(#C0392F, #fe8778); }

/* Oferta destacada pelo radar da plataforma */
.oferta.destacada { border-color: color-mix(in srgb, #C0392F 35%, var(--borda)); }
.selo-radar {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, #C0392F 10%, transparent); color: #C0392F; color: light-dark(#C0392F, #fe8778);
  border-radius: 99px; padding: 4px 11px;
  font-size: 11px; font-weight: 600; align-self: flex-start;
}
.selo-radar svg { width: 13px; height: 13px; }

.aviso-radar {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid color-mix(in srgb, #C0392F 25%, var(--borda));
  background: color-mix(in srgb, #C0392F 5%, var(--superficie));
  border-radius: var(--raio-cartao); padding: 14px 16px; margin-bottom: 16px;
}
.aviso-radar .ic { color: #C0392F; color: light-dark(#C0392F, #fe8778); flex-shrink: 0; }
.aviso-radar .ic svg { width: 19px; height: 19px; }
.aviso-radar b { font-size: 13.5px; display: block; margin-bottom: 3px; }
.aviso-radar p { font-size: 12.5px; color: var(--cinza); line-height: 1.55; }

/* Card do quadro de planejamento */
.card-conteudo {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; padding: 11px 12px;
  box-shadow: 0 1px 2px rgb(30 27 46 / .04);
  display: flex; flex-direction: column; gap: 6px;
}
.card-conteudo .card-origem {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #B45309; color: light-dark(#B45309, #f68f53);
  /* A cor vem do status, pela view, e a do editor (#0EA5E9) dá 2,8:1 no branco.
     Escurecer o conjunto mantém o tom de cada status e passa de 4,5:1 em todos. */
}
html:not([data-tema="escuro"]) .card-conteudo .card-origem { filter: brightness(.6); }
.card-conteudo .card-origem svg { width: 13px; height: 13px; }
.card-conteudo b { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.card-conteudo p {
  font-size: 11.5px; color: var(--cinza); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-conteudo .card-pe {
  display: flex; gap: 10px; font-size: 11px; color: var(--cinza-fraco);
  padding-top: 7px; border-top: 1px solid var(--borda);
}

/* Roteiro gerado a partir de uma oferta */
.roteiro-topo { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.roteiro-topo h3 { font-size: 16px; font-weight: 600; }
.roteiro-topo .cartao-sub { margin-top: 3px; }

.gancho {
  background: var(--lavanda); border-radius: 10px; padding: 14px 16px; margin: 16px 0;
}
.gancho .r {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--roxo-escuro); margin-bottom: 5px;
}
.gancho p { font-size: 15px; line-height: 1.5; font-weight: 500; }

.bloco-roteiro { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--borda); }
.bloco-roteiro:last-child { border-bottom: 0; }
.bloco-roteiro .tempo {
  font-size: 11.5px; font-weight: 600; color: var(--roxo-escuro);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bloco-roteiro .titulo { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.bloco-roteiro .fala { font-size: 13.5px; line-height: 1.55; }
.bloco-roteiro .broll {
  font-size: 12px; color: var(--cinza); margin-top: 6px; line-height: 1.5;
  padding-left: 11px; border-left: 2px solid var(--borda-forte);
}

.roteiro-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 4px; }
.roteiro-extras .titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cinza-fraco); margin-bottom: 7px;
}
.roteiro-extras p { font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 12px; color: var(--roxo-escuro); }

/* Fechamento de comissões */
.fechamento { display: grid; gap: 1px; background: var(--borda); border-radius: 10px; overflow: hidden; }
.fechamento div { display: flex; align-items: baseline; gap: 12px; background: var(--superficie); padding: 12px 16px; font-size: 13.5px; }
.fechamento div span:last-child { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.fechamento div.menos span:last-child { color: #C0392F; color: light-dark(#C0392F, #fe8778); }
.fechamento div.seu { background: color-mix(in srgb, #16A34A 8%, var(--superficie)); }
.fechamento div.seu span:last-child { color: #006300; color: light-dark(#006300, #86d97f); font-size: 16px; }
.fechamento .explica { font-size: 12px; color: var(--cinza-fraco); }

/* Uma pessoa por linha dentro de um cartão-lista: quem se inscreveu, quem
   está com o trabalho, quem deve uma entrega. Saiu do influencer.css quando
   a tela de Prazos do lojista passou a desenhar a mesma linha. */
.inscrito-linha { display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-bottom: 1px solid var(--borda); }
.inscrito-linha:last-child { border-bottom: 0; }
.inscrito-linha b { font-size: 13.5px; font-weight: 600; display: block; }
.inscrito-linha .sobre { font-size: 12px; color: var(--cinza); margin-top: 2px; }
.inscrito-linha .situacao { margin-left: auto; }

/* ================= Meus vídeos =================
   A galeria e a tela de leitura do arquivo. Nasce no base.css porque o
   influencer e o lojista abrem a mesma seção. */

.filtros-galeria { display: grid; gap: 8px; margin-top: 14px; }

.grade-videos {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.video-card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao); overflow: hidden;
  box-shadow: 0 1px 2px rgb(30 27 46 / .04);
  display: flex; flex-direction: column;
}
.video-capa {
  position: relative; aspect-ratio: 16 / 10; background: var(--fundo);
  display: grid; place-items: center; overflow: hidden;
}
.video-capa img { width: 100%; height: 100%; object-fit: cover; }
.sem-capa { color: var(--cinza-fraco); display: grid; place-items: center; }
.sem-capa svg { width: 26px; height: 26px; }
.video-nota {
  position: absolute; top: 8px; right: 8px;
  background: rgb(30 27 46 / .78); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px;
}
.video-corpo { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 7px; }
.video-corpo b { font-size: 12.5px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.video-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.video-meta span {
  font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 99px;
  background: var(--fundo); color: var(--cinza);
}
.video-meta .fraco { color: var(--cinza-fraco); background: transparent; padding-left: 0; }

/* O corte entre as duas telas da seção. Sem ele, a galeria e a leitura
   pareciam a mesma coisa empilhada. */
.divisor-secao { margin: 26px 0 16px; padding-top: 22px; border-top: 1px solid var(--borda); }
.divisor-secao h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px;
}
.divisor-secao h3 svg { width: 19px; height: 19px; color: var(--roxo-escuro); }
.divisor-secao p { font-size: 13px; color: var(--cinza); line-height: 1.6; margin-top: 5px; max-width: 62ch; }

.colunas-video { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: 1.5fr 1fr; }
@media (max-width: 900px) { .colunas-video { grid-template-columns: 1fr; } }

.area-arquivo {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1.5px dashed var(--borda-forte); border-radius: 12px;
  padding: 30px 20px; margin-top: 14px; cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.area-arquivo:hover { border-color: var(--roxo); background: var(--lavanda); }
.area-arquivo.escolhido { border-style: solid; border-color: color-mix(in srgb, #16A34A 45%, var(--borda)); }
.area-icone {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--lavanda); color: var(--roxo-escuro); margin-bottom: 4px;
}
.area-icone svg { width: 21px; height: 21px; }
.area-arquivo b { font-size: 14px; font-weight: 600; }

.campos-video { display: grid; gap: 16px; margin-top: 18px; }
.campos-video .linha-campo > span { font-size: 12.5px; font-weight: 500; color: var(--cinza); }
.campos-video i { font-style: normal; display: block; margin-top: 5px; }
.campos-video select {
  font: inherit; font-size: 13.5px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 9px 12px; width: 100%; margin-top: 6px;
}
.campos-video .chips { margin-top: 6px; }

.lendo { margin-top: 18px; display: grid; gap: 8px; }
.trilho-leitura { height: 6px; border-radius: 99px; background: var(--fundo); overflow: hidden; }
.trilho-leitura i { display: block; height: 100%; background: var(--roxo); transition: width .2s; }

.lista-checada { list-style: none; margin: 12px 0 0; display: grid; gap: 8px; }
.lista-checada li {
  font-size: 13px; line-height: 1.5; padding-left: 24px; position: relative; color: var(--tinta);
}
.lista-checada li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
}
.lista-checada .tem::before { content: "✓"; background: color-mix(in srgb, #16A34A 14%, transparent); color: #006300; color: light-dark(#006300, #86d97f); }
.lista-checada .nao::before { content: "–"; background: var(--fundo); color: var(--cinza-fraco); }
.lista-checada .nao { color: var(--cinza); }
.lista-checada i { font-style: normal; color: var(--cinza-fraco); }

.analises { display: grid; gap: 12px; margin-top: 14px; }
.analise { border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.analise.aberta { border-color: var(--roxo); }
.analise-topo {
  display: flex; align-items: center; gap: 13px; padding: 11px 13px; cursor: pointer;
  background: var(--superficie);
}
.analise-topo:hover { background: var(--fundo); }
.analise-capa {
  width: 62px; height: 40px; border-radius: 7px; object-fit: cover; flex-shrink: 0;
  background: var(--fundo);
}
.analise-quem { flex: 1; min-width: 0; }
.analise-quem b { font-size: 13.5px; font-weight: 600; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analise-corpo { padding: 4px 14px 16px; border-top: 1px solid var(--borda); }

/* A onda do som. Cem barras, altura proporcional ao pico da janela. */
.onda {
  display: flex; align-items: flex-end; gap: 1px; height: 54px;
  margin: 14px 0 8px; padding: 0 2px;
  background: var(--fundo); border-radius: 8px;
}
.onda i { flex: 1; background: var(--roxo); border-radius: 1px; min-height: 2px; opacity: .8; }

.criterios { display: grid; gap: 14px; margin-top: 4px; }
.criterio-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.criterio-topo b { font-size: 13px; font-weight: 600; }
.criterio-valor { font-size: 12px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.criterio-pontos {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--cinza);
  font-variant-numeric: tabular-nums;
}
.trilho-criterio { height: 5px; border-radius: 99px; background: var(--fundo); margin: 6px 0 5px; overflow: hidden; }
.trilho-criterio i { display: block; height: 100%; background: var(--roxo); }

.analise-acoes { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.resposta-alice {
  margin-top: 12px; font-size: 13px; line-height: 1.6; white-space: pre-wrap;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px;
  padding: 13px 15px; max-height: 460px; overflow-y: auto;
}

/* ================= Calendário =================
   O mês à esquerda com o formulário embaixo, e à direita o que ajuda a decidir
   a hora. A coluna da direita é metade da tela de propósito: marcar horário sem
   saber a janela da rede é marcar por palpite. */

.calendario-colunas { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: 1fr 320px; align-items: start; }
@media (max-width: 1080px) { .calendario-colunas { grid-template-columns: 1fr; } }
.calendario-lado { display: block; }

.topo-mes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topo-mes .cartao-titulo { font-size: 17px; }
.nav-mes { display: flex; gap: 7px; margin-left: auto; }
.nav-mes button { padding: 7px 13px; }

.abas-rede {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borda); margin: 14px 0 16px;
}
.abas-rede button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px; margin-bottom: -1px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--cinza);
  cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0;
}
.abas-rede button:hover { color: var(--tinta); }
.abas-rede button[aria-selected="true"] {
  color: var(--roxo-escuro); font-weight: 600;
  border-bottom-color: var(--roxo); background: var(--lavanda);
}

.dia.aberto { border-color: var(--roxo); background: var(--lavanda); }
.selo-data {
  display: block; font-size: 11px; font-weight: 600; line-height: 1.25;
  color: #B45309; color: light-dark(#B45309, #f68f53); background: color-mix(in srgb, #D97706 12%, transparent);
  border-radius: 4px; padding: 2px 4px; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.form-calendario {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.form-calendario .largo { grid-column: 1 / -1; }
.form-calendario .linha-campo > span { font-size: 12.5px; font-weight: 500; color: var(--cinza); }
.form-calendario .linha-campo i { font-style: normal; color: var(--cinza-fraco); }
/* O botão de enviar também é um input: sem tirá-lo daqui, ele ganha borda de
   campo e fundo claro, e deixa de parecer um botão. */
.form-calendario input:not([type=submit]), .form-calendario select {
  font: inherit; font-size: 13.5px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 9px 12px; width: 100%; margin-top: 6px;
}
.form-calendario input:not([type=submit]):focus, .form-calendario select:focus {
  outline: 2px solid var(--roxo); outline-offset: -1px; border-color: var(--roxo);
}
.form-calendario select:disabled, .form-calendario option:disabled { color: var(--cinza-fraco); }

.barras-frequencia { display: grid; gap: 13px; margin-top: 14px; }
.frequencia-topo { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.frequencia-topo b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.frequencia-topo b.passou { color: #C0392F; color: light-dark(#C0392F, #fe8778); }
.frequencia-linha .trilho {
  display: block; height: 5px; border-radius: 99px; background: var(--fundo);
  overflow: hidden; margin-top: 6px;
}
.frequencia-linha .trilho i { display: block; height: 100%; }

.tabela-horario { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.tabela-horario td { padding: 9px 0; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela-horario tr:last-child td { border-bottom: 0; }
.tabela-horario .janela {
  text-align: right; font-weight: 600; color: var(--roxo-escuro); padding-left: 12px;
}
.tabela-horario .janela .cartao-sub { display: block; font-weight: 500; }

/* O identificador já lido de um link, na tela do admin e na do cliente. */
.ja-ligada { display: grid; gap: 6px; margin-bottom: 4px; }
.ja-ligada div { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.ja-ligada span { color: var(--cinza); }
.ja-ligada b { color: var(--tinta); font-family: ui-monospace, monospace; word-break: break-all; }
.ja-ligada .cartao-sub { display: block; font-size: 11.5px; }
.ja-ligada button { justify-self: start; margin-top: 4px; }

/* O quarto passo do Garimpo: o combinado, repetido antes de ligar. */
.linha-resumo {
  display: flex; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.linha-resumo:last-child { border-bottom: 0; }
.linha-resumo .rotulo { font-size: 12.5px; color: var(--cinza); min-width: 104px; flex-shrink: 0; }
.linha-resumo b { font-size: 13.5px; font-weight: 600; display: block; line-height: 1.45; }
.linha-resumo .cartao-sub { display: block; margin-top: 3px; }

/* O cartão de cada loja nas configurações do Garimpo. Diz três coisas em
   ordem: se está ligada, qual é o identificador, e se o bot publica sozinho
   dali — que são diferentes, e antes a tela dizia só "conectada". */
.loja-config {
  border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 13px; margin-bottom: 10px;
}
.loja-config:last-child { margin-bottom: 0; }
.loja-config.pronta { border-color: color-mix(in srgb, #16A34A 35%, var(--borda)); }
.loja-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.loja-topo b { font-size: 13.5px; font-weight: 600; }
.loja-topo .cartao-sub { flex: 1; min-width: 120px; }
.loja-topo .interruptor { margin-left: auto; }
.loja-pe {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--borda);
}
.loja-pe .cartao-sub { flex: 1; min-width: 200px; }
/* Campo branco com borda fina, como no desenho — e não o cinza de dentro do
   cartão, que num cartão branco vira um bloco flutuando dentro de outro. */
/* ================= Mirar no papel, e não no elemento =================

   Isto era `input, textarea, select` — e `submit` também é `input`. O botão
   "Guardar e continuar" herdou largura total e fundo branco, e virou uma
   faixa sem cor no fim do formulário.

   Estilizar por tipo de ELEMENTO atinge coisas que não são campo. A lista
   abaixo mira no papel: o que a pessoa preenche. Botão é outro papel e tem o
   estilo dele. */
/* `file` também sai da lista: quem o estiliza é o bloco que o esconde
   (`.campo-arquivo`, `.area-arquivo`), e esta regra o esticava por cima. */
.loja-config .linha-campo input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.loja-config .linha-campo textarea,
.loja-config .linha-campo select {
  width: 100%; font: inherit; font-size: 13px; padding: 8px 11px; color: var(--tinta);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  background: var(--fundo);
}
/* As medidas e o fundo lilás-claro são os do desenho da backup. */
.loja-config .linha-campo select { padding: 9px 11px; }
.loja-config .linha-campo input:not([type="submit"])::placeholder,
.loja-config .linha-campo textarea::placeholder { color: var(--cinza-fraco); }
.loja-config .linha-campo input:not([type="submit"]):not([type="button"]):focus,
.loja-config .linha-campo textarea:focus,
.loja-config .linha-campo select:focus {
  outline: 0; border-color: var(--roxo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 14%, transparent);
}

/* Uma linha de configuração, e o botão que liga ou desliga alguma coisa. Eram
   do admin.css, e mudaram de folha quando a tela de Configurações do Garimpo —
   que é do painel do cliente — passou a usar as duas. Enquanto estavam lá, a
   tela do cliente desenhava as regras sem estilo nenhum. */
/* Uma regra por linha: o que acontece e quanto vale. */
.regra {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 13px;
}
.regra:last-child { border-bottom: 0; }
.regra .vale {
  margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.regra .vale.ganha { color: #006300; color: light-dark(#006300, #86d97f); }
.regra .vale.perde { color: #C0392F; color: light-dark(#C0392F, #fe8778); }
.regra .sim { color: #006300; color: light-dark(#006300, #86d97f); font-weight: 600; }

.interruptor {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: 99px; padding: 6px 13px 6px 10px;
  font: inherit; font-size: 12.5px; font-weight: 500; color: #5E5A76; color: light-dark(#5E5A76, #b9b5d4); cursor: pointer;
}
.interruptor .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-fraco); }
.interruptor[aria-pressed="true"] { color: #006300; color: light-dark(#006300, #86d97f); border-color: color-mix(in srgb, #16A34A 40%, var(--borda-forte)); }
.interruptor[aria-pressed="true"] .ponto { background: #16A34A; }
.interruptor:hover { border-color: var(--roxo); }
.interruptor:focus-visible { outline: 2px solid var(--roxo); outline-offset: 1px; }

/* ================= Ranking e prêmios, na tela de quem joga ================= */

.progresso-grande { display: grid; gap: 8px; }
.progresso-grande b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.progresso-grande .trilho {
  display: block; height: 7px; border-radius: 99px; background: var(--fundo); overflow: hidden;
}
.progresso-grande .trilho i { display: block; height: 100%; background: var(--roxo); }

.grade-premios {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.premio-card {
  border: 1px solid var(--borda); border-radius: 12px; padding: 13px 13px 14px;
  display: flex; flex-direction: column; gap: 6px; background: var(--superficie);
}
/* O degrau alcançado muda de cor, e o do sorteio muda de outra: são estados
   diferentes, e pintar os dois de verde faria a entrada parecer ganho. */
.premio-card.liberado { border-color: color-mix(in srgb, #16A34A 45%, var(--borda)); }
.premio-card.inscrito { border-color: color-mix(in srgb, #D97706 50%, var(--borda)); }
.premio-card.bloqueado { background: var(--fundo); }
/* Com a escada congelada, o degrau alcançado não é verde nem âmbar: os dois
   dizem "chegou e vai receber", e a decisão foi não prometer nada. Borda
   marcada, cor nenhuma — a pessoa tem os pontos, e é só isso que se sabe. */
.premio-card.congelado { border-color: var(--cinza-fraco); border-style: dashed; }
.aviso-congelado {
  border: 1px dashed var(--cinza-fraco); border-radius: 12px;
  padding: 12px 14px; margin-top: 14px; background: var(--fundo);
}
.aviso-congelado b { display: block; font-size: 13px; margin-bottom: 3px; }
.aviso-congelado svg { width: 16px; height: 16px; vertical-align: -3px; }
.premio-topo { display: flex; align-items: center; gap: 8px; }
.premio-selo { font-size: 15px; line-height: 1; color: var(--cinza-fraco); }
.premio-card.liberado .premio-selo { color: #006300; color: light-dark(#006300, #86d97f); font-weight: 700; }
.premio-selo svg { width: 15px; height: 15px; }
.premio-posicao {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--cinza-fraco);
  background: var(--fundo); border-radius: 99px; padding: 2px 8px;
}
.premio-card.bloqueado .premio-posicao { background: var(--superficie); }
.premio-card b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.premio-pr { font-size: 12.5px; font-weight: 600; color: var(--roxo-escuro); font-variant-numeric: tabular-nums; }
.premio-card .trilho { display: block; height: 4px; border-radius: 99px; background: var(--fundo); overflow: hidden; }
.premio-card.bloqueado .trilho { background: var(--superficie); }
.premio-card .trilho i { display: block; height: 100%; background: var(--roxo); }
.premio-nota {
  font-size: 11px; line-height: 1.4; color: var(--aviso);
  background: var(--aviso-fundo);
  border-radius: 6px; padding: 4px 7px; margin-top: 2px;
}

/* A linha de quem está olhando, quando ela cai fora dos dez primeiros. */
.linha-eu td { background: var(--lavanda); }
.linha-eu td:first-child { border-radius: 8px 0 0 8px; }
.linha-eu td:last-child { border-radius: 0 8px 8px 0; }

/* A tabela de linhas com números — uso de IA, regras de pontuação, top do
   ranking. Era do admin.css, e mudou de folha quando a tela de Meu ranking,
   que é do painel do cliente, passou a usá-la: lá ela desenhava sem largura
   nenhuma, espremida num canto. */
.tabela-uso { width: 100%; border-collapse: collapse; }
.tabela-uso th {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cinza-fraco); text-align: left; white-space: nowrap;
  padding: 12px 16px; border-bottom: 1px solid var(--borda);
}
.tabela-uso td {
  font-size: 13px; padding: 12px 16px;
  border-bottom: 1px solid var(--borda); vertical-align: middle;
}
.tabela-uso tr:last-child td { border-bottom: 0; }
.tabela-uso .operacao { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 9px; }
.tabela-uso .operacao .ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tabela-uso .num,
.tabela-uso th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-uso td.custo { font-weight: 600; }
.tabela-uso .fraco { color: var(--cinza); }

/* ================= As três opções de roteiro ================= */

/* O cartão de opção é uma coluna alta com o botão no rodapé. O `align-items`
   da grade não pode esticar nem encolher: as três precisam terminar na mesma
   linha para os botões ficarem alinhados. */
.opcao { display: flex; flex-direction: column; gap: 10px; position: relative; border-radius: var(--raio-cartao); }
.opcao.recomendada { border-color: color-mix(in srgb, #7C3AED 45%, var(--borda)); }
.opcao.aberta { grid-column: 1 / -1; }
.selo-recomendada {
  position: absolute; top: -9px; left: 14px;
  background: var(--roxo-forte); color: #fff; border-radius: 99px;
  font-size: 11px; font-weight: 700; padding: 3px 10px;
}
.opcao-nome { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; }
.opcao-gancho { background: var(--lavanda); border-radius: 10px; padding: 11px 13px; }
.opcao-gancho .r {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--roxo-escuro); display: block; margin-bottom: 4px;
}
.opcao-gancho p { font-size: 13.5px; line-height: 1.45; font-weight: 500; }
.opcao-numeros { display: flex; gap: 18px; }
.opcao-numeros div { display: flex; flex-direction: column; }
.opcao-numeros b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.opcao-numeros span { font-size: 11px; color: var(--cinza-fraco); }
/* O custo de cada estratégia fica à vista, e não escondido num tooltip:
   escolha sem custo declarado não é escolha, é aposta. */
.opcao-custo {
  font-size: 12px; line-height: 1.5; color: var(--cinza);
  background: var(--fundo); border-radius: 9px; padding: 10px 12px;
}
.opcao-custo b { display: block; color: var(--tinta); font-size: 11.5px; margin-bottom: 3px; }
.opcao-acoes { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.opcao-acoes button { flex: 1; }
.opcao-corpo { border-top: 1px solid var(--borda); margin-top: 4px; padding-top: 8px; }

/* O card de quem está com o editor. O prazo vencido fica vermelho: um trabalho
   atrasado que parece igual a um no prazo é um trabalho que ninguém cobra. */
.card-edicao .card-pe { justify-content: space-between; align-items: center; }
.card-edicao .card-pe .atrasado { color: #C0392F; color: light-dark(#C0392F, #fe8778); font-weight: 600; }
.card-edicao .card-pe .link-discreto { font-size: 11px; padding: 0; }

/* A ficha de um vídeo: o que ele é, com quem está e para quando. */
.ficha-video { display: grid; gap: 1px; background: var(--borda); border-radius: 10px; overflow: hidden; margin-top: 14px; }
.ficha-video div {
  display: flex; align-items: baseline; gap: 14px;
  background: var(--superficie); padding: 11px 14px; font-size: 13px;
}
.ficha-video span { color: var(--cinza); min-width: 132px; flex-shrink: 0; }
.ficha-video b { font-weight: 600; }
.ficha-video b.atrasado { color: #C0392F; color: light-dark(#C0392F, #fe8778); }
.video-card[data-abrir-video] { cursor: pointer; transition: border-color .12s; }
.video-card[data-abrir-video]:hover { border-color: var(--roxo); }

/* ---------------------------------------------------------------------------
   A avaliação de entrada

   Mora aqui, e não em influencer.css, porque as duas primeiras telas que a
   usam são de painéis diferentes — influencer e lojista. Regra da casa: o que
   duas telas precisam vive no base.
   --------------------------------------------------------------------------- */

.av-topo { max-width: 680px; margin: 0 auto 18px; }
.av-passos { font-size: 12px; color: var(--cinza); margin-bottom: 8px; letter-spacing: .02em; }
.av-barra { height: 4px; background: var(--borda); border-radius: 99px; overflow: hidden; }
.av-barra span {
  display: block; height: 100%; background: var(--grad-primario);
  border-radius: 99px; transition: width .25s ease;
}

.av-cartao {
  max-width: 680px; margin: 0 auto 14px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  padding: 22px 24px; box-shadow: var(--sombra-cartao);
}
.av-cartao > b { display: block; font-size: 16px; font-weight: 600; line-height: 1.45; }
.av-sub { color: var(--cinza); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
.av-texto { font-size: 14px; line-height: 1.7; margin: 10px 0 0; white-space: pre-line; }
.av-dica { color: var(--cinza-fraco); font-size: 12px; margin: 10px 0 0; }
.av-erro {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: #FEF2F2; background: light-dark(#FEF2F2, #241d35); border: 1px solid #FECACA; border: 1px solid light-dark(#FECACA, #865959); color: #B4231C; color: light-dark(#B4231C, #fe9486);
}
.av-alerta { border-color: #FDE68A; border-color: light-dark(#FDE68A, #6d5800); background: #FFFCF2; background: light-dark(#FFFCF2, #150e25); }

.av-pergunta > b { font-size: 19px; }
.av-pergunta textarea, .av-arroba input {
  width: 100%; margin-top: 16px; font: inherit; font-size: 15px; color: var(--tinta);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 12px 14px; background: var(--fundo); resize: vertical;
}
.av-pergunta textarea:focus, .av-arroba input:focus {
  outline: none; border-color: var(--roxo); background: var(--superficie);
}

.av-arroba { display: flex; align-items: center; gap: 0; margin-top: 16px; }
.av-arroba span {
  font-size: 15px; color: var(--cinza); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-right: 0;
  border-radius: var(--raio-botao) 0 0 var(--raio-botao); padding: 12px 4px 12px 14px;
}
.av-arroba input { margin-top: 0; border-radius: 0 var(--raio-botao) var(--raio-botao) 0; }

.av-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.av-opcao {
  font: inherit; font-size: 13.5px; color: var(--tinta); cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: 99px; padding: 9px 15px; transition: all .12s;
}
.av-opcao:hover { border-color: var(--roxo); color: var(--roxo-escuro); }
.av-opcao.escolhida {
  background: var(--lavanda); border-color: var(--roxo);
  color: var(--roxo-escuro); font-weight: 600;
}

.av-botoes {
  max-width: 680px; margin: 20px auto 0; display: flex;
  justify-content: space-between; align-items: center; gap: 12px;
}
.av-cartao .av-botoes { margin: 22px 0 0; }
.av-botoes-direita { display: flex; align-items: center; gap: 14px; }

/* Enquanto o servidor lê os perfis e o modelo escreve. Sem barra falsa de
   progresso: ninguém sabe quanto falta, e fingir que sabe é mentir na tela. */
.av-trabalhando { text-align: center; padding: 40px 24px; }
.av-girando {
  width: 30px; height: 30px; margin: 0 auto 18px; border-radius: 50%;
  border: 3px solid var(--lavanda); border-top-color: var(--roxo);
  animation: av-girar .8s linear infinite;
}
@keyframes av-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .av-girando { animation-duration: 2.4s; } }

/* O layout de duas colunas da primeira tela (pergunta + apoio lateral). Vive
   aqui, e não na folha de um perfil só, porque tanto influencer quanto
   lojista abrem esta mesma view — regra da casa, ver o comentário lá em cima. */

.avaliacao-experiencia {
  width: 100%; max-width: 1240px; margin: 45px auto 0;
  display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(340px, 1fr);
  grid-template-rows: auto auto; column-gap: 32px; row-gap: 22px; align-items: start;
}
.avaliacao-conteudo { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; }
.avaliacao-sobretitulo {
  color: var(--roxo-escuro); font-size: 14px; line-height: 1.2; font-weight: 500;
  letter-spacing: 0; text-transform: none; margin-bottom: 8px;
}
.avaliacao-conteudo > h2 { color: #0f1021; color: light-dark(#0f1021, #daddf7); font-size: 38px; line-height: 1.15; font-weight: 600; }
.avaliacao-introducao { color: #68628c; color: light-dark(#68628c, #b2acdb); font-size: 15px; line-height: 1.45; margin-top: 5px; }
.avaliacao-conteudo .av-topo { max-width: none; margin: 43px 0 33px; }
.av-progresso-legenda { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #5f5883; color: light-dark(#5f5883, #b8b1e2); font-size: 12px; }
.avaliacao-conteudo .av-passos { color: inherit; font-size: inherit; margin-bottom: 0; }
.avaliacao-conteudo .av-barra { height: 9px; margin-top: 7px; border-radius: 99px; background: #e7e3f2; background: light-dark(#e7e3f2, #2e2540); overflow: hidden; }
.avaliacao-conteudo .av-barra span { background: #8b48f7; }
.avaliacao-conteudo .av-cartao {
  max-width: none; margin: 0; padding: 26px 24px 22px; border-color: #e4e0ec; border-color: light-dark(#e4e0ec, #64567b);
  border-radius: 12px; box-shadow: 0 10px 28px -16px rgb(42 30 93 / .20);
}
.avaliacao-conteudo .av-pergunta > b { color: #111226; color: light-dark(#111226, #d9dcf9); font-size: 18px; line-height: 1.4; }
.avaliacao-conteudo .av-sub { color: var(--cinza); font-size: 13px; margin-top: 4px; }
.avaliacao-conteudo .av-pergunta textarea,
.avaliacao-conteudo .av-arroba input {
  min-height: 116px; background: #fff; background: light-dark(#fff, #1b152c); border-color: #d8cff0; border-color: light-dark(#d8cff0, #6e6288); border-radius: 9px;
  font-size: 15px; padding: 14px; box-shadow: inset 0 0 0 1px rgb(139 92 246 / .03);
}
.avaliacao-conteudo .av-arroba input { min-height: auto; }
.avaliacao-conteudo .av-opcao { border-radius: 8px; padding: 10px 15px; }
.av-contagem { margin-top: 5px; color: var(--cinza); font-size: 11px; text-align: right; }
.avaliacao-conteudo .av-botoes { margin-top: 18px; }
.avaliacao-conteudo .btn-primario { min-width: 142px; justify-content: center; padding: 10px 18px; background: #ff9900; box-shadow: 0 8px 18px -10px rgb(255 153 0 / .7); }
.avaliacao-conteudo .btn-primario:hover { background: #f28f00; }
.avaliacao-conteudo .av-botoes > .btn-secundario { min-width: 116px; justify-content: center; color: #71699d; color: light-dark(#71699d, #ada6de); background: #f1eefb; background: light-dark(#f1eefb, #29213d); border-color: transparent; }
.avaliacao-conteudo .av-voltar-inativo { opacity: 1; cursor: default; }

.avaliacao-apoio { grid-column: 2; grid-row: 1; min-width: 0; align-self: start; display: grid; gap: 18px; }
.avaliacao-dica {
  align-self: start;
  padding: 22px 24px 20px;
  border: 1px solid #e8e4f1; border: 1px solid light-dark(#e8e4f1, #5e5176); border-radius: 12px;
  background: #fffefa; background: light-dark(#fffefa, #19132a); box-shadow: 0 10px 28px -20px rgb(42 30 93 / .24);
}
.avaliacao-dica-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.avaliacao-dica-icone {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; color: #ff9800; color: light-dark(#ff9800, #da7600);
  background: #fff1dd; background: light-dark(#fff1dd, #332205); border-radius: 9px;
}
.avaliacao-dica-icone svg { width: 16px; height: 16px; }
.avaliacao-dica h3 { color: #17172a; color: light-dark(#17172a, #d9dbf6); font-size: 15px; font-weight: 600; margin: 0; }
.avaliacao-dica p { color: #5f5a76; color: light-dark(#5f5a76, #b9b4d4); font-size: 13px; line-height: 1.5; margin: 0; }
.avaliacao-boas-praticas { margin-top: 16px; padding-top: 15px; border-top: 1px solid #e5e1e8; border-top: 1px solid light-dark(#e5e1e8, #62508f); }
.avaliacao-boas-praticas b { display: block; font-size: 13px; margin-bottom: 9px; }
.avaliacao-boas-praticas ul { display: grid; gap: 8px; list-style: none; }
.avaliacao-boas-praticas li { position: relative; padding-left: 27px; color: #59556e; color: light-dark(#59556e, #bcb8d5); font-size: 12.5px; line-height: 1.4; }
.avaliacao-boas-praticas li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 17px; height: 17px; display: grid; place-items: center; border: 1.5px solid #22c55e; border-radius: 50%; color: #16a34a; color: light-dark(#16a34a, #43c166); font-size: 10px; font-weight: 700; }

.avaliacao-arte {
  position: relative; text-align: center; padding: 20px 18px 16px; overflow: hidden;
  border: 1px solid #e8e4f1; border: 1px solid light-dark(#e8e4f1, #5e5176); border-radius: 12px;
  background: linear-gradient(180deg, #f6f1ff 0%, #fbf9ff 65%); background: linear-gradient(180deg, light-dark(#f6f1ff, #2a1f3a) 0%, light-dark(#fbf9ff, #110b21) 65%);
  box-shadow: 0 10px 24px -20px rgb(42 30 93 / .2);
}
.avaliacao-arte::before { content: ""; position: absolute; z-index: 0; width: 130px; height: 130px; right: -30px; bottom: -35px; border-radius: 50%; background: rgb(139 92 246 / .1); }
.avaliacao-camaleao {
  position: relative; z-index: 1; display: block; width: 170px; max-width: 60%; height: auto;
  margin: 6px auto 0; pointer-events: none; user-select: none;
}
.avaliacao-balao { position: relative; z-index: 2; max-width: 230px; margin: 0 auto; padding: 12px 16px; border-radius: 16px 16px 16px 4px; color: #443071; color: light-dark(#443071, #cfc2fe); background: rgb(225 210 255 / .78); background: light-dark(rgb(225 210 255 / .78), #372255c7); box-shadow: 0 4px 14px -8px rgb(76 42 143 / .35); font-family: cursive; font-size: 13px; line-height: 1.4; }
.avaliacao-balao span { color: #f59e0b; color: light-dark(#f59e0b, #d17d00); }
.avaliacao-assinatura {
  position: relative; z-index: 2; margin-top: 10px; color: #6c6486; color: light-dark(#6c6486, #b4acd1);
  font-family: cursive; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.avaliacao-assinatura span { display: block; width: 24px; margin: 6px auto 0; border-top: 1px solid var(--roxo); opacity: .5; }
.avaliacao-rodape { grid-column: 1 / -1; grid-row: 2; display: grid; justify-items: center; gap: 14px; margin-top: 26px; }
.avaliacao-pontos { display: flex; gap: 8px; }
.avaliacao-pontos i { width: 8px; height: 8px; border-radius: 50%; background: #e5e0f2; background: light-dark(#e5e0f2, #2f2641); }
.avaliacao-pontos i.ativo { background: var(--roxo); }
.avaliacao-rodape p { padding: 6px 16px; border: 1px solid #ddd7ef; border: 1px solid light-dark(#ddd7ef, #695e84); border-radius: 99px; color: var(--cinza); font-size: 11px; }

@media (max-width: 1280px) {
  .avaliacao-experiencia { grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr); gap: 22px; }
}
@media (max-width: 1050px) {
  .avaliacao-experiencia { grid-template-columns: 1fr; max-width: 760px; }
  .avaliacao-conteudo, .avaliacao-rodape { grid-column: 1; grid-row: auto; }
  .avaliacao-apoio { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr); align-items: stretch; }
}
@media (max-width: 700px) {
  .avaliacao-experiencia { margin-top: 8px; gap: 16px; }
  .avaliacao-conteudo { margin-top: 12px; }
  .avaliacao-sobretitulo { font-size: 11px; }
  .avaliacao-conteudo > h2 { font-size: 28px; }
  .avaliacao-introducao { font-size: 14px; }
  .avaliacao-introducao br { display: none; }
  .avaliacao-conteudo .av-topo { margin: 24px 0 18px; }
  .avaliacao-conteudo .av-cartao { padding: 20px 18px; }
  .avaliacao-conteudo .av-pergunta > b { font-size: 17px; }
  .avaliacao-apoio { grid-template-columns: 1fr; }
  .avaliacao-camaleao { width: 150px; }
  .avaliacao-rodape { margin-top: 0; }
}

/* ---------- Avaliação guiada pelo Kameo ---------- */
.avaliacao-experiencia {
  --avaliacao-acento: #8b5cf6;
  grid-template-columns: minmax(0, 1.55fr) minmax(350px, .9fr);
  column-gap: 36px;
  margin-top: 30px;
}
.avaliacao-conteudo > h2 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: 0;
}
.avaliacao-introducao {
  max-width: 590px;
  margin-top: 7px;
}
.avaliacao-conteudo .av-topo {
  position: relative;
  margin: 32px 0 22px;
  padding: 14px 16px 15px;
  border: 1px solid color-mix(in srgb, var(--avaliacao-acento) 14%, #e4e0ec); border: 1px solid color-mix(in srgb, var(--avaliacao-acento) 14%, light-dark(#e4e0ec, #64567b));
  border-radius: 12px;
  background: rgb(255 255 255 / .7); background: light-dark(rgb(255 255 255 / .7), #1b152cb2);
  box-shadow: 0 10px 26px -22px rgb(42 30 93 / .3);
}
.av-progresso-fase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: var(--cinza);
  font-size: 11px;
}
.av-progresso-fase b {
  color: var(--avaliacao-acento);
  font-weight: 700;
}
.av-progresso-fase-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--avaliacao-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--avaliacao-acento) 12%, transparent);
}
.avaliacao-conteudo .av-barra {
  height: 7px;
  margin-top: 9px;
  background: color-mix(in srgb, var(--avaliacao-acento) 10%, #ebe8f1); background: color-mix(in srgb, var(--avaliacao-acento) 10%, light-dark(#ebe8f1, #2b253d));
}
.avaliacao-conteudo .av-barra span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--avaliacao-acento) 78%, #fff), var(--avaliacao-acento)); background: linear-gradient(90deg, color-mix(in srgb, var(--avaliacao-acento) 78%, light-dark(#fff, #1b152c)), var(--avaliacao-acento));
  box-shadow: 0 0 14px color-mix(in srgb, var(--avaliacao-acento) 28%, transparent);
  transition: width .42s cubic-bezier(.22, 1, .36, 1), background .28s ease;
}
.avaliacao-perguntas {
  min-height: 374px;
  perspective: 900px;
}
.avaliacao-conteudo .av-cartao {
  border-color: color-mix(in srgb, var(--avaliacao-acento) 13%, #e4e0ec); border-color: color-mix(in srgb, var(--avaliacao-acento) 13%, light-dark(#e4e0ec, #64567b));
  border-radius: 14px;
  box-shadow: 0 16px 36px -24px rgb(42 30 93 / .28);
}
.av-pergunta-cabecalho {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.av-pergunta-cabecalho > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--avaliacao-acento) 18%, transparent);
  border-radius: 10px;
  color: var(--avaliacao-acento);
  background: color-mix(in srgb, var(--avaliacao-acento) 9%, #fff); background: color-mix(in srgb, var(--avaliacao-acento) 9%, light-dark(#fff, #1b152c));
  font-size: 11px;
  font-weight: 700;
}
.av-pergunta-cabecalho b {
  display: block;
  color: #111226; color: light-dark(#111226, #d9dcf9);
  font-size: 18px;
  line-height: 1.4;
}
.av-pergunta-cabecalho .av-sub { margin-top: 4px; }
.avaliacao-conteudo .av-pergunta textarea:focus,
.avaliacao-conteudo .av-arroba input:focus {
  border-color: var(--avaliacao-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--avaliacao-acento) 10%, transparent);
}
.avaliacao-conteudo .av-opcao:hover {
  border-color: var(--avaliacao-acento);
  color: color-mix(in srgb, var(--avaliacao-acento) 82%, #251d33); color: color-mix(in srgb, var(--avaliacao-acento) 82%, light-dark(#251d33, #dfd5f3));
}
.avaliacao-conteudo .av-opcao.escolhida {
  border-color: var(--avaliacao-acento);
  color: color-mix(in srgb, var(--avaliacao-acento) 82%, #251d33); color: color-mix(in srgb, var(--avaliacao-acento) 82%, light-dark(#251d33, #dfd5f3));
  background: color-mix(in srgb, var(--avaliacao-acento) 10%, #fff); background: color-mix(in srgb, var(--avaliacao-acento) 10%, light-dark(#fff, #1b152c));
}
.avaliacao-conteudo .btn-primario {
  background: var(--avaliacao-acento);
  box-shadow: 0 9px 20px -12px color-mix(in srgb, var(--avaliacao-acento) 70%, transparent);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.avaliacao-conteudo .btn-primario:hover {
  background: var(--avaliacao-acento);
  filter: brightness(.94);
  transform: translateY(-1px);
}
.avaliacao-conteudo .btn-primario svg,
.avaliacao-conteudo .btn-secundario svg { flex-shrink: 0; }
.av-passo-saindo {
  opacity: 0;
  transform: translateX(-12px) rotateY(-1deg);
  transition: opacity .17s ease, transform .17s ease;
}
.av-passo-saindo.av-passo-backward { transform: translateX(12px) rotateY(1deg); }
.av-passo-entrando {
  opacity: 0;
  transform: translateX(14px) rotateY(1deg);
}
.av-passo-entrando.av-passo-backward { transform: translateX(-14px) rotateY(-1deg); }
[data-questionario-target="passo"] {
  opacity: 1;
  transform: translateX(0) rotateY(0);
  transform-origin: center;
  transition: opacity .25s ease, transform .25s ease;
}

.avaliacao-apoio {
  position: sticky;
  top: 18px;
  display: block;
}
.avaliacao-guia {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--avaliacao-acento) 17%, #e8e4f1); border: 1px solid color-mix(in srgb, var(--avaliacao-acento) 17%, light-dark(#e8e4f1, #5e5176));
  border-radius: 18px;
  background: radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--avaliacao-acento) 15%, transparent), transparent 31%),
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--avaliacao-acento) 5%, #fff) 100%); background: radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--avaliacao-acento) 15%, transparent), transparent 31%),
    linear-gradient(180deg, light-dark(#fff, #1b152c) 0%, color-mix(in srgb, var(--avaliacao-acento) 5%, light-dark(#fff, #1b152c)) 100%);
  box-shadow: 0 22px 50px -34px rgb(42 30 93 / .34);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.avaliacao-guia::before {
  content: "";
  position: absolute;
  top: -72px;
  right: -68px;
  width: 190px;
  height: 190px;
  border: 28px solid color-mix(in srgb, var(--avaliacao-acento) 7%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.avaliacao-guia-topo {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 17px 18px 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--avaliacao-acento) 10%, #ebe7f1); border-bottom: 1px solid color-mix(in srgb, var(--avaliacao-acento) 10%, light-dark(#ebe7f1, #5a4987));
  background: rgb(255 255 255 / .68); background: light-dark(rgb(255 255 255 / .68), #1b152cad);
  backdrop-filter: blur(12px);
}
.avaliacao-guia-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--avaliacao-acento);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}
.avaliacao-guia-topo h3 {
  margin: 0;
  color: #242033; color: light-dark(#242033, #dbd6f0);
  font-size: 14px;
  letter-spacing: 0;
}
.avaliacao-fase-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--avaliacao-acento) 16%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--avaliacao-acento) 82%, #332943); color: color-mix(in srgb, var(--avaliacao-acento) 82%, light-dark(#332943, #dcd0f2));
  background: color-mix(in srgb, var(--avaliacao-acento) 7%, #fff); background: color-mix(in srgb, var(--avaliacao-acento) 7%, light-dark(#fff, #1b152c));
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.avaliacao-fase-selo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--avaliacao-acento);
}
.avaliacao-fases {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 10px 14px 3px;
}
.avaliacao-fases span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #aaa4b5; color: light-dark(#aaa4b5, #9a94a5);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  transition: color .24s ease;
}
.avaliacao-fases i {
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: #e9e5ef; background: light-dark(#e9e5ef, #2d263f);
  transition: background .24s ease, box-shadow .24s ease;
}
.avaliacao-fases span.ativa { color: var(--avaliacao-acento); }
.avaliacao-fases span.ativa i {
  background: var(--avaliacao-acento);
  box-shadow: 0 0 9px color-mix(in srgb, var(--avaliacao-acento) 26%, transparent);
}
.avaliacao-fases span.concluida i {
  background: color-mix(in srgb, var(--avaliacao-acento) 46%, #d9d4e2); background: color-mix(in srgb, var(--avaliacao-acento) 46%, light-dark(#d9d4e2, #362b46));
}
.avaliacao-palco {
  position: relative;
  height: 240px;
  overflow: hidden;
  margin: 7px 14px 0;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--avaliacao-acento) 9%, #fff), rgb(255 255 255 / .4)),
    #faf8ff; background: linear-gradient(180deg, color-mix(in srgb, var(--avaliacao-acento) 9%, light-dark(#fff, #1b152c)), light-dark(rgb(255 255 255 / .4), #1b152c66)),
    light-dark(#faf8ff, #211b33);
}
.avaliacao-palco::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -38px;
  width: 135px;
  height: 135px;
  border: 22px solid color-mix(in srgb, var(--avaliacao-acento) 8%, transparent);
  border-radius: 50%;
}
.avaliacao-fala {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  max-width: 205px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--avaliacao-acento) 13%, transparent);
  border-radius: 11px 11px 11px 3px;
  color: #4f465e; color: light-dark(#4f465e, #c9bfdb);
  background: rgb(255 255 255 / .9); background: light-dark(rgb(255 255 255 / .9), #1b152ce6);
  box-shadow: 0 8px 20px -14px rgb(53 37 84 / .28);
  font-size: 11px;
  line-height: 1.45;
}
.avaliacao-mascote-area {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
/* Kameo do onboarding: um único corpo e camadas independentes.
   Ordem de empilhamento: rabo (atrás) > língua (sai por trás do focinho) >
   corpo > olhos. As imagens nunca são trocadas; cada animação mora em uma
   só camada, ligada pelo data-anim que o mascote_controller aplica. */
.onboarding-mascot {
  --tail-x: -4%;
  --tail-y: 32%;
  --tail-width: 56%;
  --tail-origin: 94% 66%;
  --tongue-x: 65.5%;
  --tongue-y: 9%;
  --tongue-width: 42%;
  --tongue-origin: 3% 36%;
  position: absolute;
  right: 18px;
  bottom: 9px;
  z-index: 2;
  width: min(52%, 205px);
  aspect-ratio: 1;
  margin: 0;
}
.onboarding-mascot-layer {
  position: absolute;
  display: block;
  max-width: none;
  margin: 0;
  pointer-events: none;
  user-select: none;
}
.onboarding-mascot-body,
.onboarding-mascot-eyes {
  inset: 0;
  width: 100%;
  height: 100%;
}
.onboarding-mascot-tail {
  top: var(--tail-y);
  left: var(--tail-x);
  z-index: 1;
  width: var(--tail-width);
  height: auto;
  transform-origin: var(--tail-origin);
}
.onboarding-mascot-tongue {
  top: var(--tongue-y);
  left: var(--tongue-x);
  z-index: 2;
  width: var(--tongue-width);
  height: auto;
  opacity: 0;
  transform: scaleX(.05);
  transform-origin: var(--tongue-origin);
}
.onboarding-mascot-body {
  z-index: 3;
  filter: drop-shadow(0 15px 14px rgb(40 23 71 / .16));
}
.onboarding-mascot-eyes { z-index: 4; }
.onboarding-mascot-eye {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  opacity: 0;
}
/* PoseLayer: poses completas, sempre carregadas e trocadas só por opacidade. */
.onboarding-mascot-pose {
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 15px 14px rgb(40 23 71 / .16));
  transition: opacity .2s ease;
}
.onboarding-mascot-pose[data-ativa] { opacity: 1; }
.onboarding-mascot > :not(.onboarding-mascot-pose) { transition: opacity .2s ease; }
.onboarding-mascot[data-com-pose] > :not(.onboarding-mascot-pose) { opacity: 0; }
.onboarding-mascot-eyes[data-eye-state="half"] .onboarding-mascot-eye--half,
.onboarding-mascot-eyes[data-eye-state="closed"] .onboarding-mascot-eye--closed {
  opacity: 1;
}

/* TailLayer */
.onboarding-mascot-tail[data-anim="tailIdle"] {
  animation: onboardingTailIdle 3.8s ease-in-out infinite;
  will-change: transform;
}
@keyframes onboardingTailIdle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  52% { transform: rotate(-3deg); }
  76% { transform: rotate(2deg); }
}

/* TongueLayer */
.onboarding-mascot-tongue[data-anim="tongueGuide"] {
  animation: onboardingTongueGuide 1.4s ease-in-out both;
  will-change: opacity, transform;
}
.onboarding-mascot-tongue[data-anim="tongueGrab"] {
  animation: onboardingTongueGrab .75s cubic-bezier(.3, .7, .4, 1) both;
  will-change: opacity, transform;
}
@keyframes onboardingTongueGuide {
  0% { opacity: 0; transform: scaleX(.05); }
  8%, 92% { opacity: 1; }
  30% { transform: scaleX(1) rotate(0deg); }
  45% { transform: scaleX(.96) rotate(2deg); }
  60% { transform: scaleX(1) rotate(-1deg); }
  75% { transform: scaleX(1) rotate(0deg); }
  100% { opacity: 0; transform: scaleX(.05); }
}
@keyframes onboardingTongueGrab {
  0% { opacity: 0; transform: scaleX(.05); }
  6%, 94% { opacity: 1; }
  35% { transform: scaleX(1.04) rotate(0deg); }
  48% { transform: scaleX(1) rotate(-3deg); }
  100% { opacity: 0; transform: scaleX(.05) rotate(0deg); }
}
.avaliacao-mascote-sombra {
  position: absolute;
  left: 18%;
  right: 12%;
  bottom: 7px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--avaliacao-acento) 18%, transparent);
  filter: blur(14px);
}
.avaliacao-guia-conteudo {
  position: relative;
  z-index: 3;
  padding: 16px 18px 14px;
}
.avaliacao-guia-conteudo .avaliacao-dica-topo { margin-bottom: 9px; }
.avaliacao-guia-conteudo .avaliacao-dica-topo > div span {
  display: block;
  margin-bottom: 1px;
  color: var(--cinza);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.avaliacao-guia-conteudo .avaliacao-dica-icone {
  color: var(--avaliacao-acento);
  background: color-mix(in srgb, var(--avaliacao-acento) 9%, #fff); background: color-mix(in srgb, var(--avaliacao-acento) 9%, light-dark(#fff, #1b152c));
}
.avaliacao-guia-conteudo h4 {
  margin: 0;
  color: #252132; color: light-dark(#252132, #dbd6ee);
  font-size: 13px;
}
.avaliacao-guia-conteudo > p {
  margin: 0;
  color: #625b70; color: light-dark(#625b70, #bcb4cc);
  font-size: 11.5px;
  line-height: 1.55;
}
.avaliacao-guia-conteudo .avaliacao-boas-praticas {
  margin-top: 12px;
  padding-top: 11px;
  border-top-color: color-mix(in srgb, var(--avaliacao-acento) 10%, #e5e1e8); border-top-color: color-mix(in srgb, var(--avaliacao-acento) 10%, light-dark(#e5e1e8, #62508f));
}
.avaliacao-guia-conteudo .avaliacao-boas-praticas b {
  margin-bottom: 7px;
  font-size: 11px;
}
.avaliacao-guia-conteudo .avaliacao-boas-praticas ul { gap: 6px; }
.avaliacao-guia-conteudo .avaliacao-boas-praticas li {
  padding-left: 22px;
  font-size: 11px;
}
.avaliacao-guia-conteudo .avaliacao-boas-praticas li::before {
  width: 15px;
  height: 15px;
  color: var(--avaliacao-acento);
  border-color: var(--avaliacao-acento);
  font-size: 9px;
}
.avaliacao-guia-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 18px 11px;
  border-top: 1px solid color-mix(in srgb, var(--avaliacao-acento) 9%, #ebe7f1); border-top: 1px solid color-mix(in srgb, var(--avaliacao-acento) 9%, light-dark(#ebe7f1, #5a4987));
  color: var(--cinza);
  font-size: 11px;
}
.avaliacao-guia-rodape b { color: var(--avaliacao-acento); }
.avaliacao-guia-pulso {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--avaliacao-acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--avaliacao-acento) 10%, transparent);
}
.avaliacao-rodape {
  gap: 10px;
  margin-top: 10px;
}
.avaliacao-pontos i {
  width: 7px;
  height: 7px;
  transition: width .22s ease, background .22s ease;
}
.avaliacao-pontos i.concluido {
  background: color-mix(in srgb, var(--avaliacao-acento) 45%, #dcd7e5); background: color-mix(in srgb, var(--avaliacao-acento) 45%, light-dark(#dcd7e5, #342945));
}
.avaliacao-pontos i.ativo {
  width: 22px;
  border-radius: 99px;
  background: var(--avaliacao-acento);
}
.avaliacao-rodape p {
  max-width: 560px;
  color: var(--cinza);
  background: rgb(255 255 255 / .54); background: light-dark(rgb(255 255 255 / .54), #1b152c8a);
  text-align: center;
  transition: color .25s ease, border-color .25s ease;
}
.avaliacao-conclusao {
  min-height: 374px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.avaliacao-conclusao.hidden { display: none; }
.avaliacao-conclusao-arte {
  width: 210px;
  height: 120px;
  overflow: hidden;
  margin-bottom: 8px;
}
.avaliacao-conclusao-arte img {
  width: 240px;
  max-width: none;
  height: auto;
  transform: translate(-14px, -15px);
}
.avaliacao-conclusao-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #9a5a06; color: light-dark(#9a5a06, #e6a05d);
  background: #fff7e5; background: light-dark(#fff7e5, #2f2203);
  font-size: 11px;
  font-weight: 700;
}
.avaliacao-conclusao h3 {
  margin: 10px 0 5px;
  color: #251f31; color: light-dark(#251f31, #ddd6ef);
  font-size: 20px;
}
.avaliacao-conclusao > p {
  max-width: 430px;
  margin: 0;
  color: #706879; color: light-dark(#706879, #b5adbf);
  font-size: 12px;
  line-height: 1.55;
}
.avaliacao-processando {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--cinza);
  font-size: 11px;
}
.avaliacao-processando .av-girando {
  width: 17px;
  height: 17px;
  margin: 0;
  border-width: 2px;
  border-top-color: #d97706;
}
.avaliacao-concluindo .avaliacao-apoio,
.avaliacao-concluindo .avaliacao-rodape {
  opacity: .48;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .avaliacao-experiencia {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
    gap: 24px;
  }
}
@media (max-width: 1050px) {
  .avaliacao-experiencia { grid-template-columns: 1fr; max-width: 780px; }
  .avaliacao-apoio {
    position: static;
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }
  .avaliacao-guia {
    min-height: auto;
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  }
  .avaliacao-guia-topo,
  .avaliacao-fases,
  .avaliacao-guia-rodape { grid-column: 1 / -1; }
  .avaliacao-palco { height: 245px; margin-bottom: 12px; }
  .avaliacao-guia-conteudo { align-self: center; }
}
@media (max-width: 700px) {
  .avaliacao-experiencia { margin-top: 6px; }
  .avaliacao-conteudo > h2 { font-size: 27px; }
  .avaliacao-conteudo .av-topo { margin: 22px 0 15px; padding: 12px 13px; }
  .avaliacao-perguntas { min-height: 0; }
  .av-pergunta-cabecalho { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; }
  .av-pergunta-cabecalho > span { width: 32px; height: 32px; }
  .av-pergunta-cabecalho b { font-size: 16px; }
  .avaliacao-conteudo .av-botoes { align-items: stretch; }
  .avaliacao-conteudo .av-botoes > .btn-secundario { min-width: 92px; }
  .av-botoes-direita { justify-content: flex-end; gap: 8px; }
  .avaliacao-conteudo .btn-primario { min-width: 0; }
  .avaliacao-guia { display: block; border-radius: 15px; }
  .avaliacao-guia-topo { padding: 14px; }
  .avaliacao-fases span { font-size: 11px; }
  .avaliacao-palco { height: 220px; margin: 7px 10px 0; }
  .avaliacao-fala { max-width: 175px; font-size: 11px; }
  .onboarding-mascot { right: 14px; bottom: 8px; width: min(54%, 195px); }
  .avaliacao-guia-conteudo { padding: 15px 16px 13px; }
  .avaliacao-rodape p { border-radius: 12px; }
}
@media (max-width: 430px) {
  .av-progresso-legenda { gap: 8px; }
  .av-botoes { flex-wrap: wrap; }
  .av-botoes-direita { flex: 1; }
  .avaliacao-conteudo .av-botoes > .btn-secundario { min-width: 86px; }
  .avaliacao-fases span { font-size: 0; }
  .avaliacao-fases i { height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-passo-saindo,
  .av-passo-entrando,
  [data-questionario-target="passo"],
  .avaliacao-mascote-area,
  .avaliacao-guia,
  .avaliacao-conteudo .av-barra span { transition: none; }
  .onboarding-mascot-layer { animation: none !important; }
}

/* --- Editores: movido de influencer.css para cá em 2026-09-18, a pedido de correcao do bug de layout do lojista --- */
/* Editores */
.secao-edicao {
  background: radial-gradient(ellipse 58% 38% at 62% 0%, rgb(139 92 246 / .09), transparent 72%),
    radial-gradient(ellipse 34% 28% at 98% 96%, rgb(37 99 235 / .06), transparent 70%),
    #fbfaff; background: radial-gradient(ellipse 58% 38% at 62% 0%, rgb(139 92 246 / .09), transparent 72%),
    radial-gradient(ellipse 34% 28% at 98% 96%, rgb(37 99 235 / .06), transparent 70%),
    light-dark(#fbfaff, #130c22);
}
.secao-edicao .principal { overflow: hidden; }
.secao-edicao .secao {
  display: block;
  padding: 0 var(--pagina-x) 30px;
}
.editores-dashboard {
  display: grid;
  gap: 16px;
  font-family: var(--fonte);
}
.editores-dashboard button,
.editores-dashboard input,
.editores-dashboard textarea { font-family: inherit; }
.editores-dashboard svg { stroke-width: 1.8; }


.editores-painel {
  padding: 18px;
  border: 1px solid #e6e1f0; border: 1px solid light-dark(#e6e1f0, #625479);
  border-radius: 8px;
  background: rgb(255 255 255 / .9); background: light-dark(rgb(255 255 255 / .9), #1b152ce6);
  box-shadow: 0 10px 28px rgb(42 30 93 / .05);
}
.editores-painel-topo {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.editores-painel-topo h2,
.editores-painel-topo strong {
  display: block;
  color: #17152d; color: light-dark(#17152d, #dadafc);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}
.editores-painel-topo p,
.editores-painel-topo small {
  display: block;
  margin-top: 3px;
  color: #756f8e; color: light-dark(#756f8e, #aea8c9);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;
}
.editores-titulo-icone {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 8px;
  color: #7447e8; color: light-dark(#7447e8, #ad9fff);
  background: #f0eaff; background: light-dark(#f0eaff, #2b223d);
}
.editores-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.editores-disponiveis a.editor-card { color: inherit; text-decoration: none; }
.editores-disponiveis .editor-card {
  min-height: 116px;
  padding: 14px;
  gap: 13px;
  border-color: #e7e2f1; border-color: light-dark(#e7e2f1, #605377);
  border-radius: 8px;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.editores-disponiveis .editor-card:hover {
  transform: translateY(-2px);
  border-color: #cdbdf4; border-color: light-dark(#cdbdf4, #79699b);
  box-shadow: 0 12px 26px rgb(69 45 133 / .08);
}
.editores-disponiveis .editor-topo .avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, #f1eaff, #e2d7ff); background: linear-gradient(145deg, light-dark(#f1eaff, #2c223c), light-dark(#e2d7ff, #342154));
  color: #6740cc; color: light-dark(#6740cc, #b5a8ff);
  box-shadow: inset 0 0 0 1px rgb(112 71 222 / .08);
}
.editores-disponiveis .editor-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #efecf5; border-top: 1px solid light-dark(#efecf5, #554381);
}
.editores-disponiveis .editor-numeros b { color: #26213e; color: light-dark(#26213e, #d8d4fb); font-size: 14px; }
.editores-disponiveis .editor-numeros span { display: block; margin-top: 2px; }
.editores-disponiveis .nao-medido { color: #7a5bc9; color: light-dark(#7a5bc9, #b29afe); font-size: 11px; font-style: normal; }
.editores-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 8px;
  background: #f7f3ff; background: light-dark(#f7f3ff, #291f39);
  color: #655b80; color: light-dark(#655b80, #bab0d9);
}
.editores-aviso svg { flex: 0 0 auto; color: #7950e6; color: light-dark(#7950e6, #ac9cfe); }
.editores-aviso p { font-size: 12px; line-height: 1.55; }

.editores-pedido summary {
  position: relative;
  padding-right: 30px;
  list-style: none;
  cursor: pointer;
}
.editores-pedido summary::-webkit-details-marker { display: none; }
.editores-summary-seta {
  position: absolute;
  top: 7px;
  right: 2px;
  color: var(--cinza);
  transition: transform .18s ease;
}
.editores-pedido[open] .editores-summary-seta { transform: rotate(180deg); }
.editores-form {
  display: grid;
  gap: 13px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #ebe7f3; border: 1px solid light-dark(#ebe7f3, #5b4e72);
  border-radius: 8px;
  background: #fcfbfe; background: light-dark(#fcfbfe, #140e24);
}
.editores-form .linha-campo { gap: 6px; }
.editores-form .linha-campo > span {
  color: #4d4768; color: light-dark(#4d4768, #c4bee5);
  font-size: 13px;
  font-weight: 600;
}
.editores-form input[type="text"],
.editores-form textarea {
  width: 100%;
  border: 1px solid #dcd6e9; border: 1px solid light-dark(#dcd6e9, #6c5f84);
  border-radius: 7px;
  background: #fff; background: light-dark(#fff, #1b152c);
  color: #211e37; color: light-dark(#211e37, #d8d6f9);
  font-size: 13px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.editores-form input[type="text"] { min-height: 40px; padding: 9px 11px; }
.editores-form textarea { min-height: 88px; padding: 10px 11px; resize: vertical; }
.editores-form input:focus,
.editores-form textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgb(139 92 246 / .09);
}
.editores-tipos { gap: 8px; margin-top: 1px; }
.editores-tipos label { cursor: pointer; }
.editores-tipos .av-opcao {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 7px;
  background: #fff; background: light-dark(#fff, #1b152c);
  border-color: #ddd6ec; border-color: light-dark(#ddd6ec, #6b5e83);
  font-size: 13px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.editores-tipos label:hover .av-opcao { border-color: #ae94ee; }
.editores-tipos input:checked + .av-opcao {
  border-color: #8b5cf6;
  background: #f2edff; background: light-dark(#f2edff, #2a213c);
  color: #5c2dc5; color: light-dark(#5c2dc5, #bab1fe);
  box-shadow: 0 0 0 2px rgb(139 92 246 / .07);
}
.editores-form .av-dica { color: var(--cinza); font-size: 12px; }
.editores-form .btn-primario,
section.editores-pedido > .btn-primario {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  border-radius: 7px;
}
/* O botão do pedido tem a largura do texto, e não da linha toda; no celular ocupa a linha. */
section.editores-pedido > .btn-primario { display: inline-flex; width: auto; margin-top: 16px; gap: 8px; padding-inline: 28px; }
@media (max-width: 560px) { section.editores-pedido > .btn-primario { display: flex; width: 100%; } }

.editores-historico .linhas-edicao { margin-top: 16px; }
.editores-vazio {
  min-height: 82px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  padding: 14px 18px;
  text-align: center;
  border: 1px dashed #d8d0e9; border: 1px dashed light-dark(#d8d0e9, #6f6287);
  border-radius: 8px;
  color: var(--cinza);
  background: #fdfcff; background: light-dark(#fdfcff, #161026);
}
.editores-vazio svg { color: #9b78ef; color: light-dark(#9b78ef, #a987fe); }
.editores-vazio p { font-size: 13px; }
.editores-vazio .link-discreto { margin-left: 3px; font-size: 11px; }

@media (max-width: 1180px) {
  .editores-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .secao-edicao .topo { min-height: 62px; padding-inline: 18px; }
  .secao-edicao .secao { padding: 0 16px 24px; }
  .editores-grade { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .editores-dashboard { gap: 12px; }
  .editores-painel { padding: 14px; }
  .editores-disponiveis .editor-numeros { grid-template-columns: 1fr 1fr 1fr; }
  .editores-tipos { display: grid; grid-template-columns: 1fr 1fr; }
  .editores-tipos label,
  .editores-tipos .av-opcao { width: 100%; }
  .editores-vazio { flex-direction: column; text-align: center; padding: 16px; }
}
.briefing-todo { font-size: 13px; color: var(--cinza); line-height: 1.55; }
.campanha-numeros { display: flex; flex-wrap: wrap; gap: 20px; }
.campanha-numeros div { display: flex; flex-direction: column; gap: 1px; }
.campanha-numeros .n { font-size: 14px; font-weight: 600; }
.campanha-numeros .r { font-size: 11.5px; color: var(--cinza-fraco); }
.campanha-pe { display: flex; gap: 10px; align-items: center; padding-top: 12px;
  border-top: 1px solid var(--borda); margin-top: auto; }
.campanha-pe button { margin-left: auto; }
.prazo { font-size: 12px; color: var(--cinza); }
.prazo.urgente { color: #C0392F; color: light-dark(#C0392F, #fe8778); font-weight: 600; }


/* --- Minhas lojas: movido de influencer.css para cá em 2026-09-18, a pedido de correcao do bug de layout do lojista --- */
/* Minhas lojas */
.secao-lojas {
  background-color: #fbfaff; background-color: light-dark(#fbfaff, #130c22);
  background-image:
    radial-gradient(ellipse 62% 44% at 45% 0%, rgb(139 92 246 / .10), transparent 72%),
    radial-gradient(ellipse 42% 36% at 82% 95%, rgb(139 92 246 / .07), transparent 72%);
}
.secao-lojas .principal { position: relative; overflow: hidden; }
.secao-lojas .topo { position: relative; z-index: 4; }
.secao-lojas .topo h1 { color: #0f1021; color: light-dark(#0f1021, #daddf7); font-size: var(--texto-pagina); line-height: 1.08; font-weight: 700; letter-spacing: 0; }
.secao-lojas .topo h1 + p { color: var(--cinza); font-size: 14px; }
.secao-lojas .secao { position: relative; z-index: 2; }


.secao-lojas .lojas-conectar {
  padding: 17px 21px; border-radius: 10px; box-shadow: 0 12px 32px rgb(42 30 93 / .055);
}
.lojas-conectar .cartao-titulo { color: #17172a; color: light-dark(#17172a, #d9dbf6); font-size: 16px; }
.lojas-conectar > .cartao-sub { margin-top: 3px; font-size: 11px; }
.lojas-conectar .loja-config { gap: 8px; margin-top: 12px; }
.lojas-conectar .linha-campo { gap: 4px; }
.lojas-conectar .linha-campo > span:first-child { font-size: 12px; color: #77718f; color: light-dark(#77718f, #ada7c7); }
.lojas-conectar select, .lojas-conectar input { min-height: 38px; border-radius: 8px; font-size: 13px; }
.lojas-conectar .av-dica { font-size: 12px; }
.lojas-conectar .btn-primario { width: 100%; min-height: 38px; justify-content: center; }

.lojas-catalogo { margin-top: 18px; }
.lojas-catalogo-topo { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 10px; }
.lojas-catalogo-topo h2 { color: #17172a; color: light-dark(#17172a, #d9dbf6); font-size: 15px; }
.lojas-catalogo-topo p { color: #77718f; color: light-dark(#77718f, #ada7c7); font-size: 12px; }
.lojas-catalogo-topo .link-discreto { display: inline-flex; align-items: center; gap: 8px; }
.lojas-catalogo-topo svg { width: 14px; height: 14px; }
.lojas-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lojas-grade > .cartao { min-width: 0; min-height: 126px; padding: 14px; border-radius: 10px; }
.loja-disponivel, .loja-conectada { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 8px; }
.loja-marca {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: var(--loja-cor); background: color-mix(in srgb, var(--loja-cor) 10%, white); background: color-mix(in srgb, var(--loja-cor) 10%, light-dark(white, #1b152c));
  font-size: 14px; font-weight: 700;
}
.loja-disponivel b, .loja-conectada b { color: #17172a; color: light-dark(#17172a, #d9dbf6); font-size: 13px; }
.loja-disponivel p { margin-top: 3px; color: var(--cinza); font-size: 12px; }
.loja-disponivel .btn-secundario { grid-column: 1 / -1; width: 100%; justify-content: center; min-height: 34px; padding: 6px; color: var(--roxo-escuro); }
.loja-conectada .loja-topo { grid-column: 1 / -1; }
.loja-conectada .aviso-agenda, .loja-conectada .nota-rodape { grid-column: 1 / -1; }
.loja-ver-mais { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.loja-ver-mais > span {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px;
  border-radius: 50%; color: var(--roxo-escuro); background: #eee7ff; background: light-dark(#eee7ff, #2c223f);
}
.loja-ver-mais svg { width: 20px; height: 20px; }
.loja-ver-mais b { color: #17172a; color: light-dark(#17172a, #d9dbf6); font-size: 13px; }
.loja-ver-mais p { margin-top: 3px; color: var(--cinza); font-size: 12px; line-height: 1.35; }

@media (min-width: 1321px) {
  body.secao-lojas { display: block; }
  .secao-lojas .sidebar {
    position: fixed; z-index: 20; inset: 0 auto 0 0; width: 258px; height: 100vh;
    padding: 20px 16px; display: flex; visibility: visible; transform: none;
  }
  .secao-lojas .principal { width: calc(100% - 258px); min-height: 100vh; margin-left: 258px; }
  .secao-lojas .topo {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 48px auto;
    gap: 12px 20px; padding: 22px var(--pagina-x) 16px;
  }
  .secao-lojas .topo .voltar { grid-column: 1; grid-row: 1; justify-self: start; }
  .secao-lojas .topo > div:not(.topo-acoes) { grid-column: 1; grid-row: 2; }
  .secao-lojas .topo-acoes { grid-column: 2; grid-row: 1; align-self: start; }
  .secao-lojas .secao { padding: 0 var(--pagina-x) 24px; }
}

@media (max-width: 1320px) {
  .lojas-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lojas-grade { grid-template-columns: 1fr; }
}

.lojas-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 16px 0 18px;
  padding: 5px;
  border: 1px solid #e9e3fb; border: 1px solid light-dark(#e9e3fb, #5c5176);
  border-radius: 14px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 10px 26px rgb(42 30 93 / .045);
}
.lojas-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  color: #625b7e; color: light-dark(#625b7e, #b8b1d9);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.lojas-tab.ativo {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow: 0 10px 20px rgb(91 33 182 / .18);
}
.lojas-bloco { margin-top: 18px; }
.lojas-bloco-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px 12px;
}
.lojas-bloco-topo h2,
.lojas-explorar-intro h2 {
  color: #111226; color: light-dark(#111226, #d9dcf9);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0;
}
.lojas-bloco-topo p,
.lojas-explorar-intro p,
.lojas-bloco-topo > span {
  margin-top: 4px;
  color: #706a8c; color: light-dark(#706a8c, #b0aace);
  font-size: 13px;
}
.lojas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.lojas-grade--marketplace {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lojas-grade > .cartao {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 16px;
}
.loja-conectada {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px !important;
  border: 1px solid #e9e3fb; border: 1px solid light-dark(#e9e3fb, #5c5176);
  box-shadow: 0 12px 28px rgb(42 30 93 / .055);
}
.loja-card-cabecalho,
.loja-market-topo,
.loja-detalhe-identidade {
  display: flex;
  align-items: center;
  gap: 12px;
}
.loja-card-cabecalho > div,
.loja-market-topo > div,
.loja-detalhe-identidade > div { min-width: 0; }
.loja-card-cabecalho b,
.loja-market-card h3 {
  color: #111226; color: light-dark(#111226, #d9dcf9);
  font-size: 15px;
  line-height: 1.2;
}
.loja-card-cabecalho p,
.loja-market-card p,
.loja-identificador {
  color: var(--cinza);
  font-size: 12px;
}
.loja-marca {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--loja-cor);
  background: color-mix(in srgb, var(--loja-cor) 12%, white); background: color-mix(in srgb, var(--loja-cor) 12%, light-dark(white, #1b152c));
  font-size: 14px;
  font-weight: 800;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-pill--ok { color: #15803d; color: light-dark(#15803d, #6bca82); background: #ecfdf3; background: light-dark(#ecfdf3, #082b1c); }
.loja-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.loja-metricas div {
  padding: 10px;
  border: 1px solid #eee8fb; border: 1px solid light-dark(#eee8fb, #584b6f);
  border-radius: 12px;
  background: #fdfcff; background: light-dark(#fdfcff, #161026);
}
.loja-metricas dt {
  color: var(--cinza);
  font-size: 11px;
}
.loja-metricas dd {
  margin-top: 2px;
  color: #17172a; color: light-dark(#17172a, #d9dbf6);
  font-size: 13px;
  font-weight: 800;
}
.loja-card-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}
.loja-card-acoes form,
.loja-card-acoes form button { width: 100%; }
.loja-card-acoes .btn-primario,
.loja-card-acoes .btn-secundario { justify-content: center; }
.lojas-vazio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
}
.lojas-vazio > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: #6d28d9; color: light-dark(#6d28d9, #baa9ff);
  background: #f0e9ff; background: light-dark(#f0e9ff, #2c223d);
}
.lojas-vazio svg { width: 22px; height: 22px; }
.lojas-vazio h2 {
  color: #111226; color: light-dark(#111226, #d9dcf9);
  font-size: 16px;
}
.lojas-vazio p {
  margin-top: 3px;
  color: #706a8c; color: light-dark(#706a8c, #b0aace);
  font-size: 13px;
}
.lojas-vazio > div:last-child {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.lojas-vazio--compacto > div:last-child { margin-left: 0; }
.secao-lojas .lojas-conectar {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid #e9e3fb; border: 1px solid light-dark(#e9e3fb, #5c5176);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgb(42 30 93 / .055);
}
.lojas-conectar--destaque { margin-top: 14px; }
.lojas-conectar .loja-config {
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(240px, 1fr) 170px;
  align-items: end;
  gap: 12px;
  margin-top: 4px;
}
.lojas-conectar .linha-campo { display: flex; flex-direction: column; gap: 5px; }
.lojas-conectar .linha-campo > span:first-child,
.lojas-busca label > span {
  color: #77718f; color: light-dark(#77718f, #ada7c7);
  font-size: 12px;
  font-weight: 700;
}
.lojas-conectar select,
.lojas-conectar input,
.lojas-busca input,
.lojas-busca select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #ded6f5; border: 1px solid light-dark(#ded6f5, #695e83);
  border-radius: 11px;
  background: #fff; background: light-dark(#fff, #1b152c);
  color: #18172d; color: light-dark(#18172d, #d9daf9);
  font-size: 13px;
}
.lojas-conectar .av-dica {
  color: var(--cinza);
  font-size: 11.5px;
  line-height: 1.35;
}
.lojas-explorar-intro {
  margin-top: 6px;
  padding: 4px 2px 12px;
}
.lojas-filtros,
.produtos-filtros {
  padding: 14px;
  border: 1px solid #e9e3fb; border: 1px solid light-dark(#e9e3fb, #5c5176);
  border-radius: 16px;
}
.lojas-busca {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(5, minmax(120px, .7fr)) auto;
  gap: 10px;
  align-items: end;
}
.lojas-busca label { display: flex; flex-direction: column; gap: 5px; }
.lojas-campo-busca {
  position: relative;
  display: block !important;
}
.lojas-campo-busca svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: var(--cinza);
  transform: translateY(-50%);
}
.lojas-campo-busca input { padding-left: 38px; }
.lojas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.lojas-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #e3dcf7; border: 1px solid light-dark(#e3dcf7, #64597e);
  border-radius: 12px;
  background: #fff; background: light-dark(#fff, #1b152c);
  color: #4d4569; color: light-dark(#4d4569, #c6bee8);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.lojas-chip.ativo {
  border-color: transparent;
  color: #fff;
  background: #6d28d9;
}
.lojas-chip--neutro { color: var(--cinza); background: #faf8ff; background: light-dark(#faf8ff, #211b33); }
.loja-market-card { overflow: hidden; }
.loja-market-banner {
  display: grid;
  place-items: center;
  min-height: 104px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--loja-cor) 28%, white), #f9f6ff 72%),
    radial-gradient(circle at 78% 20%, rgb(255 255 255 / .9), transparent 28%); background: linear-gradient(135deg, color-mix(in srgb, var(--loja-cor) 28%, light-dark(white, #1b152c)), light-dark(#f9f6ff, #221c34) 72%),
    radial-gradient(circle at 78% 20%, light-dark(rgb(255 255 255 / .9), #1b152ce6), transparent 28%);
}
.loja-market-banner .loja-marca {
  width: 86px;
  height: 64px;
  border-radius: 18px;
  background: rgb(255 255 255 / .9); background: light-dark(rgb(255 255 255 / .9), #1b152ce6);
  box-shadow: 0 16px 30px rgb(42 30 93 / .12);
}
.loja-market-corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.loja-market-topo { align-items: flex-start; justify-content: space-between; }
.loja-favorito {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e7defc; border: 1px solid light-dark(#e7defc, #61557a);
  border-radius: 12px;
  color: #6d28d9; color: light-dark(#6d28d9, #baa9ff);
  background: #fff; background: light-dark(#fff, #1b152c);
}
.loja-favorito svg { width: 17px; height: 17px; }
.loja-market-dados {
  display: grid;
  gap: 7px;
  color: #48415f; color: light-dark(#48415f, #c9c2e6);
  font-size: 12px;
  line-height: 1.35;
}
.loja-market-dados li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.loja-market-dados svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: #6d28d9; color: light-dark(#6d28d9, #baa9ff);
}
.loja-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.loja-tags span {
  padding: 5px 9px;
  border-radius: 999px;
  color: #635b7c; color: light-dark(#635b7c, #bab1d6);
  background: #f2edff; background: light-dark(#f2edff, #2a213c);
  font-size: 11px;
}
.loja-market-card .btn-secundario { justify-content: center; width: 100%; }
.lojas-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 16px;
  color: #756e8f; color: light-dark(#756e8f, #afa7cb);
  font-size: 12px;
}
.lojas-breadcrumb a {
  color: #5f4aa6; color: light-dark(#5f4aa6, #b9acff);
  font-weight: 700;
  text-decoration: none;
}
.lojas-breadcrumb svg { width: 13px; height: 13px; }
.loja-detalhe-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid #e9e3fb; border: 1px solid light-dark(#e9e3fb, #5c5176);
  border-radius: 18px;
}
.loja-detalhe-identidade .loja-marca {
  width: 72px;
  height: 72px;
  font-size: 18px;
}
.loja-detalhe-identidade h1 {
  color: #0f1021; color: light-dark(#0f1021, #daddf7);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
}
.loja-detalhe-identidade p:last-child {
  max-width: 680px;
  margin-top: 5px;
  color: #6f6888; color: light-dark(#6f6888, #b2abcd);
  font-size: 13px;
}
.loja-resumo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.loja-resumo .cartao {
  padding: 14px;
  border-radius: 14px;
}
.loja-resumo span {
  color: var(--cinza);
  font-size: 12px;
}
.loja-resumo strong {
  display: block;
  margin-top: 4px;
  color: #111226; color: light-dark(#111226, #d9dcf9);
  font-size: 16px;
}
.lojas-busca--produtos {
  grid-template-columns: minmax(240px, 1fr) auto;
}
.produtos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.produto-card {
  overflow: hidden;
  border-radius: 16px;
}
.produto-imagem {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: #f4efff; background: light-dark(#f4efff, #2a203b);
}
.produto-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.produto-imagem svg {
  width: 34px;
  height: 34px;
  color: #7c3aed; color: light-dark(#7c3aed, #b39dff);
}

/* Foto de produto inteira, sem corte nem esticar: cabe no quadro (contain) e a
   própria foto, desfocada, preenche as sobras. Serve para qualquer proporção
   que o lojista mandar. */
.foto-adaptavel { position: relative; overflow: hidden; isolation: isolate; }
.foto-adaptavel > img.foto-fundo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(16px) saturate(1.15) brightness(.85);
  transform: scale(1.15);
}
.foto-adaptavel > img.foto-produto { width: 100%; height: 100%; object-fit: contain; }
.produto-corpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.produto-corpo h3 {
  color: #111226; color: light-dark(#111226, #d9dcf9);
  font-size: 14px;
  line-height: 1.3;
}
.produto-corpo dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.produto-corpo dl div {
  padding: 9px;
  border-radius: 12px;
  background: #fbf9ff; background: light-dark(#fbf9ff, #110b21);
}
.produto-corpo dt {
  color: var(--cinza);
  font-size: 11px;
}
.produto-corpo dd {
  margin-top: 2px;
  color: #111226; color: light-dark(#111226, #d9dcf9);
  font-size: 13px;
  font-weight: 800;
}
.produto-recebe {
  grid-column: 1 / -1;
  border: 1px solid #d8c9ff; border: 1px solid light-dark(#d8c9ff, #706291);
  background: #f3edff !important; background: light-dark(#f3edff, #2b213b) !important;
}
.produto-recebe dd { color: #5b21b6; color: light-dark(#5b21b6, #c3b5ff); font-size: 16px; }
.produto-descricao,
.produto-estoque {
  color: #716a87; color: light-dark(#716a87, #b1aaca);
  font-size: 12px;
  line-height: 1.4;
}
.produto-estoque {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  color: #15803d; color: light-dark(#15803d, #6bca82);
  background: #ecfdf3; background: light-dark(#ecfdf3, #082b1c);
  font-weight: 800;
}
.produto-card .btn-primario,
.produto-card .btn-secundario {
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

@media (min-width: 1500px) {
  .lojas-grade--marketplace { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .produtos-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .lojas-busca { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lojas-campo-busca { grid-column: 1 / -1; }
  .loja-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lojas-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .lojas-tab { padding-inline: 8px; }
  .lojas-bloco-topo,
  .loja-detalhe-hero,
  .lojas-vazio {
    align-items: stretch;
    flex-direction: column;
  }
  .lojas-vazio > div:last-child {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }
  .lojas-vazio .btn-primario,
  .lojas-vazio .btn-secundario { justify-content: center; width: 100%; }
  .lojas-conectar .loja-config,
  .lojas-busca,
  .lojas-busca--produtos,
  .loja-card-acoes,
  .loja-resumo,
  .produto-corpo dl {
    grid-template-columns: 1fr;
  }
  .loja-detalhe-identidade {
    align-items: flex-start;
  }
  .loja-detalhe-identidade .loja-marca {
    width: 56px;
    height: 56px;
    font-size: 15px;
  }
  .loja-detalhe-identidade h1 { font-size: 24px; }
  .produto-recebe { grid-column: auto; }
}


/* --- Meus videos (legado): movido de influencer.css para cá em 2026-09-18, a pedido de correcao do bug de layout do lojista --- */
/* Meus videos */
.secao-videos {
  background: #fbfaff; background: light-dark(#fbfaff, #130c22);
  background-image:
    radial-gradient(ellipse 55% 32% at 58% 0%, rgb(139 92 246 / .08), transparent 72%),
    radial-gradient(ellipse 30% 24% at 92% 92%, rgb(139 92 246 / .06), transparent 70%);
}
.secao-videos .principal { overflow: hidden; }
.secao-videos .topo {
  padding: 21px var(--pagina-x) 16px;
  align-items: flex-start;
}
.secao-videos .topo h1 {
  color: #0d1028; color: light-dark(#0d1028, #d6ddff);
  font-size: var(--texto-pagina);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0;
}
.secao-videos .topo h1 + p {
  color: var(--cinza);
  font-size: 14px;
  margin-top: 6px;
}
.secao-videos .voltar { display: none; }
.secao-videos .secao {
  padding: 0 var(--pagina-x) 28px;
  display: block;
}
.videos-dashboard {
  display: grid;
  gap: 16px;
  font-family: var(--fonte);
}
.videos-dashboard button,
.videos-dashboard input,
.videos-dashboard textarea,
.videos-dashboard select { font-family: inherit; }
.videos-dashboard .lucide-placeholder { display: inline-block; }
.videos-dashboard svg { stroke-width: 1.8; }
.videos-metricas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}
.cartao.tile.videos-tile {
  position: relative;
  min-height: 80px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-rows: 20px 30px 15px;
  gap: 0 10px;
  padding: 14px 18px 12px;
  border-color: #e7e3f1; border-color: light-dark(#e7e3f1, #5f5377);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(42 30 93 / .055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cartao.tile.videos-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cor-tile) 28%, #e7e3f1); border-color: color-mix(in srgb, var(--cor-tile) 28%, light-dark(#e7e3f1, #5f5377));
  box-shadow: 0 14px 30px rgb(42 30 93 / .09);
}
.videos-tile .tile-icone {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 48px;
  height: 48px;
  align-self: center;
  border-radius: 50%;
}
.videos-tile .tile-icone svg {
  width: 26px;
  height: 26px;
}
.videos-tile .tile-rotulo {
  grid-column: 2 / 4;
  grid-row: 1;
  color: #1a1833; color: light-dark(#1a1833, #d8d8fe);
  font-size: 11px;
  font-weight: 700;
}
.videos-tile .tile-valor {
  grid-column: 2;
  grid-row: 2;
  color: #0d1028; color: light-dark(#0d1028, #d6ddff);
  font-size: 26px;
  font-weight: 700;
}
.videos-tile .tile-nota {
  grid-column: 2 / 4;
  grid-row: 3;
  align-self: end;
  color: #746f91; color: light-dark(#746f91, #ada8cc);
  font-size: 12px;
  text-align: right;
}
.videos-delta {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  color: #22c55e; color: light-dark(#22c55e, #20b657);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.videos-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .98fr);
  gap: 13px;
  align-items: start;
}
.secao-videos .cartao {
  border-color: #e7e3f1; border-color: light-dark(#e7e3f1, #5f5377);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgb(42 30 93 / .05);
}
.videos-envio {
  min-height: 528px;
  padding: 16px 18px 12px;
}
.videos-envio .cartao-titulo,
.videos-info .cartao-titulo {
  color: #0d1028; color: light-dark(#0d1028, #d6ddff);
  font-size: 17px;
  font-weight: 700;
}
.videos-envio .cartao-sub {
  color: #77718f; color: light-dark(#77718f, #ada7c7);
  font-size: 11px;
}
.videos-envio .campos-video {
  gap: 10px;
  margin-top: 15px;
}
.secao-videos .area-arquivo {
  position: relative;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px dashed #c8b9ff; border: 1.5px dashed light-dark(#c8b9ff, #7869a9);
  border-radius: 7px;
  background: rgb(255 255 255 / .62); background: light-dark(rgb(255 255 255 / .62), #1b152c9e);
  color: #0d1028; color: light-dark(#0d1028, #d6ddff);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.secao-videos .area-arquivo:hover,
.secao-videos .area-arquivo:focus-within {
  border-color: #8b5cf6;
  background: #faf8ff; background: light-dark(#faf8ff, #211b33);
  box-shadow: 0 0 0 4px rgb(139 92 246 / .08);
}
.secao-videos .area-arquivo input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.area-arquivo-icone {
  color: #8b48f7; color: light-dark(#8b48f7, #b295ff);
  display: grid;
  place-items: center;
}
.area-arquivo-icone svg {
  width: 26px;
  height: 26px;
}
.secao-videos .area-arquivo b {
  font-size: 11.5px;
  font-weight: 700;
}
.secao-videos .area-arquivo small {
  color: var(--cinza);
  font-size: 12px;
}
.secao-videos .colunas-video {
  gap: 14px;
  margin-top: 2px;
  grid-template-columns: 1fr 1fr;
}
.secao-videos .campos-video .linha-campo {
  gap: 5px;
}
.secao-videos .campos-video .linha-campo > span,
.secao-videos .campo-bloco > .rotulo-campo {
  color: #494467; color: light-dark(#494467, #c4c0e9);
  font-size: 11px;
  font-weight: 700;
}
.secao-videos .campos-video input[type=text],
.secao-videos .campos-video textarea,
.secao-videos .campos-video select {
  min-height: 32px;
  border: 1px solid #d9d3e7; border: 1px solid light-dark(#d9d3e7, #6d6186);
  border-radius: 5px;
  background: rgb(255 255 255 / .82); background: light-dark(rgb(255 255 255 / .82), #1b152cd1);
  color: #15142d; color: light-dark(#15142d, #d8dafe);
  font-size: 11px;
  padding: 8px 10px;
  box-shadow: inset 0 1px 1px rgb(42 30 93 / .03);
}
.secao-videos .campos-video textarea {
  min-height: 48px;
  resize: vertical;
}
.secao-videos .videos-redes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.videos-redes .chip {
  justify-content: center;
  min-height: 33px;
  border-radius: 7px;
  background: #fff; background: light-dark(#fff, #1b152c);
  font-size: 12px;
  color: #2c2943; color: light-dark(#2c2943, #d6d3f5);
  box-shadow: 0 4px 12px rgb(42 30 93 / .035);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.videos-redes .chip:hover { transform: translateY(-1px); border-color: #cbbcf7; border-color: light-dark(#cbbcf7, #786a9f); }
.videos-redes .chip:has(input:checked) {
  border-color: #8b5cf6;
  background: #f5f0ff; background: light-dark(#f5f0ff, #2a203a);
  color: #5426a9; color: light-dark(#5426a9, #c4b9ff);
}
.videos-redes .plataforma-icone { flex: 0 0 auto; color: #726989; color: light-dark(#726989, #b3a9cc); }
.videos-redes [data-rede="instagram-reels"] .plataforma-icone { color: #d62976; color: light-dark(#d62976, #ff73a5); }
.videos-redes [data-rede^="youtube"] .plataforma-icone { color: #ef1d1d; color: light-dark(#ef1d1d, #ff7769); }
.videos-redes [data-rede="tiktok"] .plataforma-icone { color: #111827; color: light-dark(#111827, #d3def3); }
.videos-redes [data-rede="kwai"] .plataforma-icone { color: #ff6b00; color: light-dark(#ff6b00, #f26f26); }
.videos-envio .btn-primario {
  width: 100%;
  justify-content: center;
  min-height: 35px;
  margin-top: -2px;
  border-radius: 5px;
  font-size: 12px;
}
.videos-apoio {
  display: grid;
  gap: 13px;
}
.videos-info {
  min-height: 213px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 218px;
  gap: 18px;
  padding: 16px 18px 12px;
  overflow: hidden;
}
.videos-info .lista-checada {
  gap: 9px;
  margin-top: 12px;
}
.videos-info .lista-checada li {
  color: #1c1a35; color: light-dark(#1c1a35, #d8d8fd);
  font-size: 12px;
  font-weight: 600;
}
.videos-info .lista-checada li::before {
  width: 15px;
  height: 15px;
  font-size: 12px;
}
.videos-info .lista-checada .cartao-sub {
  color: #5f5a82; color: light-dark(#5f5a82, #b6b2df);
  font-size: 12px;
  font-weight: 500;
}
.videos-info .nota-rodape {
  grid-column: 1 / -1;
  align-self: end;
  color: #5f5a82; color: light-dark(#5f5a82, #b6b2df);
  font-size: 12px;
  line-height: 1.45;
}
.videos-ilustra {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 150px;
}
.videos-play > span {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, rgb(255 255 255 / .9), #e4d8ff); background: linear-gradient(145deg, light-dark(rgb(255 255 255 / .9), #1b152ce6), light-dark(#e4d8ff, #342152));
  color: #8b48f7; color: light-dark(#8b48f7, #b295ff);
  box-shadow: 18px 0 0 -5px rgb(139 72 247 / .22), 0 18px 30px rgb(42 30 93 / .11);
}
.videos-play svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 7px 10px rgb(82 47 183 / .3));
}
.videos-ilustra p {
  position: absolute;
  right: 2px;
  bottom: 8px;
  width: 120px;
  color: #685c82; color: light-dark(#685c82, #bbaed8);
  font-family: var(--fonte);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
  font-style: normal;
}
.videos-barras > span {
  width: 92px;
  height: 102px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 8px;
  padding-bottom: 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgb(255 255 255 / .76), rgb(235 226 255 / .5)); background: linear-gradient(145deg, light-dark(rgb(255 255 255 / .76), #1b152cc2), light-dark(rgb(235 226 255 / .5), #2f224580));
  transform: translateX(-32px);
}
.videos-barras > span i {
  width: 14px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #9862ff, #d8c8ff); background: linear-gradient(180deg, #9862ff, light-dark(#d8c8ff, #3a275a));
  box-shadow: 0 10px 18px rgb(42 30 93 / .08);
}
.videos-barras > span i:nth-child(1) { height: 32px; opacity: .5; }
.videos-barras > span i:nth-child(2) { height: 48px; opacity: .64; }
.videos-barras > span i:nth-child(3) { height: 66px; opacity: .8; }
.videos-barras > span i:nth-child(4) { height: 86px; }
.videos-galeria {
  padding: 16px 18px;
}
.videos-galeria-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.videos-galeria-topo .chips {
  justify-content: flex-end;
  margin-top: 0;
}

@media (min-width: 1321px) {
  body.secao-videos { display: block; }
  .secao-videos .sidebar {
    position: fixed;
    z-index: 20;
    inset: 0 auto 0 0;
    width: 242px;
    height: 100vh;
    padding: 16px 16px 20px;
    display: flex;
    visibility: visible;
    transform: none;
  }
  .secao-videos .principal {
    width: calc(100% - 242px);
    min-height: 100vh;
    margin-left: 242px;
  }
  .secao-videos .topo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    padding: 22px var(--pagina-x) 16px;
  }
  .secao-videos .topo > div:not(.topo-acoes) {
    grid-column: 1;
  }
  .secao-videos .topo-acoes {
    grid-column: 2;
    align-self: start;
  }
}
@media (max-width: 1180px) {
  .videos-corpo { grid-template-columns: 1fr; }
  .videos-apoio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .videos-metricas,
  .videos-apoio {
    grid-template-columns: 1fr 1fr;
  }
  .videos-info {
    grid-template-columns: 1fr;
  }
  .videos-ilustra {
    display: none;
  }
}
@media (max-width: 700px) {
  .secao-videos .topo {
    padding: 16px 18px 12px;
  }
  .secao-videos .secao {
    padding: 0 14px 20px;
  }
  .videos-metricas,
  .videos-apoio,
  .secao-videos .videos-redes {
    grid-template-columns: 1fr;
  }
  .cartao.tile.videos-tile {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .videos-delta {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
  }
  .videos-tile .tile-nota {
    text-align: left;
  }
  .videos-galeria-topo {
    display: grid;
  }
  .videos-galeria-topo .chips {
    justify-content: flex-start;
  }
}


/* --- Calendario SaaS: movido de influencer.css para cá em 2026-09-18, a pedido de correcao do bug de layout do lojista --- */
/* Calendário SaaS */
.secao-calendario { background: #faf9fd; background: light-dark(#faf9fd, #100a20); }
.secao-calendario .principal { overflow: visible; }
.secao-calendario .secao { position: relative; padding: 0 var(--pagina-x) 28px; }
.calendario-dashboard { display: grid; gap: 14px; }
.calendario-dashboard > .aviso { margin: 0; }
.calendario-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.secao-calendario .calendario-resumo-card {
  min-height: 78px;
  height: auto;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: none;
  align-items: center;
  gap: 10px;
  border: 1px solid #e7e3ed; border: 1px solid light-dark(#e7e3ed, #5f4e8c);
  border-radius: 8px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 5px 16px rgb(50 36 82 / .035);
}
.calendario-resumo-icone { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: #7650da; color: light-dark(#7650da, #af9dff); background: #f1edfb; background: light-dark(#f1edfb, #2b213c); }
.calendario-resumo-card.publicado .calendario-resumo-icone { color: #258368; color: light-dark(#258368, #6ac2a4); background: #eaf7f2; background: light-dark(#eaf7f2, #032e23); }
.calendario-resumo-card.pendente .calendario-resumo-icone { color: #b06927; color: light-dark(#b06927, #e19657); background: #fff4e9; background: light-dark(#fff4e9, #352006); }
.calendario-resumo-card.ideias .calendario-resumo-icone { color: #a04379; color: light-dark(#a04379, #f18cc3); background: #faedf5; background: light-dark(#faedf5, #371c2e); }
.calendario-resumo-card > div { min-width: 0; }
.calendario-resumo-card span:not(.calendario-resumo-icone) { display: block; color: #6e667e; color: light-dark(#6e667e, #b5adc7); font-size: 12px; font-weight: 600; }
.secao-calendario .calendario-resumo-card strong { display: block; margin: 2px 0; color: #201a31; color: light-dark(#201a31, #ddd7f6); font-size: 20px; line-height: 1; }
.calendario-resumo-card small { display: block; overflow: hidden; color: var(--cinza); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.calendario-painel { display: grid; grid-template-columns: minmax(0, 73fr) minmax(245px, 27fr); gap: 14px; align-items: start; }
.secao-calendario .calendario-principal {
  height: auto;
  min-width: 0;
  padding: 15px;
  overflow: visible;
  border: 1px solid #e4e0e9; border: 1px solid light-dark(#e4e0e9, #635190);
  border-radius: 8px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 6px 20px rgb(50 36 82 / .04);
}
.calendario-cabecalho { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.calendario-cabecalho > div > span { color: var(--cinza); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.calendario-cabecalho h2 { margin-top: 2px; color: #211b32; color: light-dark(#211b32, #ddd6f6); font-size: 16px; letter-spacing: 0; }
.nav-mes { display: flex; align-items: center; gap: 6px; }
.calendario-icone-botao { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #e5e0ec; border: 1px solid light-dark(#e5e0ec, #655579); border-radius: 7px; color: #6e637e; color: light-dark(#6e637e, #b8adca); background: #fff; background: light-dark(#fff, #1b152c); }
.calendario-icone-botao:hover { color: #7448d8; color: light-dark(#7448d8, #b3a0ff); border-color: #cfc2ed; border-color: light-dark(#cfc2ed, #766a90); background: #faf8ff; background: light-dark(#faf8ff, #211b33); }
.calendario-hoje { min-height: 31px; padding: 6px 10px; font-size: 13px; }
.calendario-filtros { margin: 10px 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.calendario-filtros::-webkit-scrollbar { display: none; }
.secao-calendario .calendario-filtros .aba { min-height: 28px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e8e3ee; border: 1px solid light-dark(#e8e3ee, #635175); border-radius: 7px; color: #756d82; color: light-dark(#756d82, #b2a9c0); background: #fff; background: light-dark(#fff, #1b152c); font-size: 13px; white-space: nowrap; }
.secao-calendario .calendario-filtros .aba.ativa { color: #6840c7; color: light-dark(#6840c7, #b7a8ff); border-color: #cfc1ed; border-color: light-dark(#cfc1ed, #776a91); background: #f3effc; background: light-dark(#f3effc, #2a213b); }
.calendario-filtro-ponto { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--cor); }
.secao-calendario .calendario-principal .grade-mes { margin-top: 0; overflow: hidden; border: 1px solid #e8e4ed; border: 1px solid light-dark(#e8e4ed, #5e4d8b); border-radius: 7px; }
.secao-calendario .calendario-principal .grade-mes .cabeca-dia { height: 28px; padding: 7px 5px; color: var(--cinza); background: #faf9fc; background: light-dark(#faf9fc, #100a20); font-size: 12px; font-weight: 600; text-align: center; text-transform: uppercase; }
.secao-calendario .calendario-principal .grade-mes .dia { height: auto; min-height: 72px; padding: 6px; background: #fff; background: light-dark(#fff, #1b152c); }
.secao-calendario .calendario-principal .grade-mes .dia.fora { background: #fcfbfd; background: light-dark(#fcfbfd, #140d24); opacity: .5; }
.secao-calendario .calendario-principal .grade-mes .dia.hoje { background: #faf8ff; background: light-dark(#faf8ff, #211b33); box-shadow: inset 0 0 0 1px #9270df; }
.secao-calendario .grade-mes .numero-dia { color: #5f576d; color: light-dark(#5f576d, #beb6cf); font-size: 12px; font-weight: 600; }
.secao-calendario .grade-mes .pilula { margin-top: 3px; padding: 3px 4px; overflow: hidden; border-radius: 4px; color: #51485e; color: light-dark(#51485e, #c8bed8); background: color-mix(in srgb, var(--cor) 10%, white); background: color-mix(in srgb, var(--cor) 10%, light-dark(white, #1b152c)); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.secao-calendario .calendario-principal .divisor-secao,
.secao-calendario .calendario-principal > .item-agenda { display: none; }
.calendario-agendar { height: auto; margin-top: 12px; padding: 0; overflow: hidden; border: 1px solid #e5e0eb; border: 1px solid light-dark(#e5e0eb, #665579); border-radius: 8px; background: #faf9fc; background: light-dark(#faf9fc, #100a20); }
.calendario-agendar[open] { height: auto; overflow: visible; }
.calendario-agendar > summary { min-height: 55px; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.calendario-agendar > summary::-webkit-details-marker { display: none; }
.calendario-agendar > summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: #6842c7; color: light-dark(#6842c7, #b6a8fe); }
.calendario-agendar > summary b { color: #2a233a; color: light-dark(#2a233a, #dcd4f2); font-size: 13px; }
.calendario-agendar-texto { color: var(--cinza); font-size: 12px; }
.calendario-agendar summary .btn-primario { min-height: 34px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.calendario-formulario { padding: 14px; border-top: 1px solid #e5e0eb; border-top: 1px solid light-dark(#e5e0eb, #665579); background: #fff; background: light-dark(#fff, #1b152c); }
.calendario-apoio { display: grid; gap: 12px; }
.calendario-card { padding: 14px; border: 1px solid #e5e1eb; border: 1px solid light-dark(#e5e1eb, #61508f); border-radius: 8px; background: #fff; background: light-dark(#fff, #1b152c); box-shadow: 0 6px 20px rgb(50 36 82 / .035); }
.calendario-card > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 9px; }
.calendario-card-icone { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #7149ce; color: light-dark(#7149ce, #b4a2ff); background: #f0ebfa; background: light-dark(#f0ebfa, #2c223c); }
.calendario-card h2 { color: #282139; color: light-dark(#282139, #dcd4f4); font-size: 13px; letter-spacing: 0; }
.calendario-card header p { margin-top: 2px; color: var(--cinza); font-size: 12px; line-height: 1.4; }
.calendario-proximos { min-height: 252px; height: auto; overflow: visible; }
.calendario-proximos-lista { margin-top: 12px; }
.calendario-proximo { min-height: 50px; padding: 8px 0; display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 9px; border-bottom: 1px solid #eeeaf1; border-bottom: 1px solid light-dark(#eeeaf1, #574683); }
.calendario-proximo:last-child { border-bottom: 0; }
.calendario-proximo-data { width: 35px; height: 38px; display: grid; place-content: center; border-left: 2px solid var(--cor); border-radius: 5px; text-align: center; background: color-mix(in srgb, var(--cor) 8%, white); background: color-mix(in srgb, var(--cor) 8%, light-dark(white, #1b152c)); }
.calendario-proximo-data b { color: #30283f; color: light-dark(#30283f, #dbd2f0); font-size: 13px; line-height: 1; }
.calendario-proximo-data small { margin-top: 2px; color: var(--cinza); font-size: 12px; text-transform: uppercase; }
.calendario-proximo strong { display: block; overflow: hidden; color: #30283f; color: light-dark(#30283f, #dbd2f0); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.calendario-proximo p { margin-top: 2px; color: var(--cinza); font-size: 12px; }
.calendario-sem-itens { min-height: 165px; padding: 30px 10px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--cinza); text-align: center; }
.calendario-sem-itens strong { color: #4b4258; color: light-dark(#4b4258, #ccc2dc); font-size: 13px; }
.calendario-sem-itens p { font-size: 12px; line-height: 1.5; max-width: 260px; }
.calendario-sem-itens .link-discreto { margin-top: 4px; font-size: 13px; }
.calendario-rolagem { min-width: 0; }
.calendario-rolagem-dica { display: none; align-items: center; gap: 6px; margin: 0 0 6px; color: #7a7290; color: light-dark(#7a7290, #aea6c6); font-size: 12px; }
.calendario-limites { margin-top: 12px; border-top: 1px solid #eeeaf1; border-top: 1px solid light-dark(#eeeaf1, #574683); }
.calendario-limites summary { padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #675d74; color: light-dark(#675d74, #bcb1cb); font-size: 12px; cursor: pointer; list-style: none; }
.calendario-limites summary::-webkit-details-marker { display: none; }
.calendario-limites > div { padding-top: 9px; color: var(--cinza); font-size: 12px; line-height: 1.5; }
.calendario-limites strong { color: #5e536d; color: light-dark(#5e536d, #c2b6d4); }
.calendario-limites p { margin-top: 5px; }

@media (max-width: 1080px) {
  .calendario-painel { grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr); }
}
@media (max-width: 900px) {
  .calendario-painel { grid-template-columns: 1fr; }
  .calendario-apoio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .secao-calendario .topo { min-height: 58px; padding-inline: 16px; }
  .secao-calendario .secao { padding: 0 16px 24px; }
  .calendario-resumo { grid-template-columns: 1fr 1fr; }
  .calendario-cabecalho { align-items: flex-start; }
  .secao-calendario .calendario-principal .grade-mes .dia { min-height: 62px; }
}
@media (max-width: 560px) {
  .calendario-dashboard { gap: 12px; }
  .calendario-resumo { grid-template-columns: 1fr; }
  .secao-calendario .calendario-resumo-card { min-height: 68px; }
  .calendario-cabecalho { display: grid; }
  .nav-mes { justify-content: space-between; }
  .calendario-filtros { margin-inline: -2px; }
  .secao-calendario .calendario-principal { padding: 11px; }
  /* Só a grade rola de lado, e a rolagem é anunciada; o formulário de
     agendar continua na largura da tela. */
  .calendario-rolagem { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; margin-inline: -11px; padding-inline: 11px; }
  .calendario-rolagem .grade-mes { min-width: 610px; }
  .calendario-rolagem-dica { display: inline-flex; }
  .calendario-agendar > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .calendario-agendar-texto { display: none; }
  .calendario-apoio { grid-template-columns: 1fr; }
}


/* --- Meus videos SaaS: movido de influencer.css para cá em 2026-09-18, a pedido de correcao do bug de layout do lojista --- */
/* Meus vídeos SaaS */
.secao-videos { background: #faf9fd; background: light-dark(#faf9fd, #100a20); background-image: none; }
.secao-videos .principal { overflow: visible; }
.secao-videos .topo { min-height: 88px; padding: 20px var(--pagina-x) 13px; align-items: flex-start; background: #faf9fd; background: light-dark(#faf9fd, #100a20); }
.secao-videos .topo h1 { color: #19142b; color: light-dark(#19142b, #ddd9f9); font-size: var(--texto-pagina); line-height: 1.1; letter-spacing: 0; font-weight: 700; }
.secao-videos .topo h1 + p { margin-top: 5px; color: var(--cinza); font-size: 14px; }
.secao-videos .topo-acoes { transform: translateY(-5px); }
.secao-videos .secao { padding: 0 var(--pagina-x) 28px; }
.videos-dashboard { display: grid; gap: 14px; }
.videos-metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.secao-videos .videos-tile {
  min-height: 76px;
  height: auto;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: none;
  align-items: center;
  gap: 10px;
  border: 1px solid #e7e3ed; border: 1px solid light-dark(#e7e3ed, #5f4e8c);
  border-radius: 8px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 5px 16px rgb(50 36 82 / .035);
  transition: border-color .18s ease;
}
.secao-videos .videos-tile:hover { transform: none; border-color: #d5cce5; border-color: light-dark(#d5cce5, #73648a); box-shadow: 0 5px 16px rgb(50 36 82 / .035); }
.videos-tile-icone { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: #7550d2; color: light-dark(#7550d2, #b19ffe); background: #f1edfb; background: light-dark(#f1edfb, #2b213c); }
.videos-tile.aguardando .videos-tile-icone { color: #a76527; color: light-dark(#a76527, #e09a5e); background: #fff4e9; background: light-dark(#fff4e9, #352006); }
.videos-tile.nota .videos-tile-icone { color: #287f68; color: light-dark(#287f68, #70c3a9); background: #eaf7f2; background: light-dark(#eaf7f2, #032e23); }
.videos-tile.guardados .videos-tile-icone { color: #476da6; color: light-dark(#476da6, #89b2f0); background: #edf3fb; background: light-dark(#edf3fb, #251f37); }
.videos-tile > div { min-width: 0; }
.videos-tile > div > span { display: block; color: #6e667c; color: light-dark(#6e667c, #b6adc5); font-size: 12px; font-weight: 600; }
.videos-tile > div > strong { display: block; margin: 2px 0; color: #201a31; color: light-dark(#201a31, #ddd7f6); font-size: 20px; line-height: 1; }
.videos-tile small { display: block; overflow: hidden; color: var(--cinza); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.videos-corpo { display: grid; grid-template-columns: minmax(0, 65fr) minmax(290px, 35fr); gap: 14px; align-items: start; }
.secao-videos .videos-envio,
.videos-info,
.videos-galeria { border: 1px solid #e5e1ea; border: 1px solid light-dark(#e5e1ea, #62508f); border-radius: 8px; background: #fff; background: light-dark(#fff, #1b152c); box-shadow: 0 6px 20px rgb(50 36 82 / .035); }
.videos-envio { min-height: 0; padding: 16px; }
.videos-envio-cabecalho,
.videos-info > header,
.videos-galeria-topo > div:first-child { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 9px; }
.videos-secao-icone,
.videos-info-icone { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #7048cb; color: light-dark(#7048cb, #b6a3fe); background: #f0ebfa; background: light-dark(#f0ebfa, #2c223c); }
.videos-envio h2,
.videos-info h2,
.videos-galeria h2 { color: #292238; color: light-dark(#292238, #dcd4f2); font-size: 14px; line-height: 1.35; letter-spacing: 0; }
.videos-envio-cabecalho p,
.videos-info header p,
.videos-galeria-topo p { margin-top: 2px; color: var(--cinza); font-size: 12px; line-height: 1.45; }
.videos-envio .campos-video { margin-top: 14px; display: grid; gap: 10px; }
.secao-videos .area-arquivo { min-height: 122px; gap: 4px; border: 1px dashed #bfaee6; border-radius: 8px; color: #312941; color: light-dark(#312941, #dbd2f1); background: #fbfaff; background: light-dark(#fbfaff, #130c22); }
.secao-videos .area-arquivo:hover,
.secao-videos .area-arquivo:focus-within { border-color: #7b55cf; background: #f8f5fd; background: light-dark(#f8f5fd, #231d34); box-shadow: 0 0 0 3px rgb(113 73 205 / .07); }
.area-arquivo-icone { width: 37px; height: 37px; border-radius: 8px; color: #7048cb; color: light-dark(#7048cb, #b6a3fe); background: #eee8fa; background: light-dark(#eee8fa, #2d233d); }
.area-arquivo-icone svg { width: 20px; height: 20px; }
.secao-videos .area-arquivo b { font-size: 13px; }
.secao-videos .area-arquivo small { color: var(--cinza); font-size: 12px; }
.secao-videos .colunas-video { margin: 0; gap: 10px; }
/* A grade sem teto de largura deixava o "Nenhum arquivo escolhido" dos campos
   de áudio e capa esticar as colunas: o formulário saía do cartão e passava
   por cima do "Status do meu vídeo" (09/10). */
.secao-videos .campos-video { grid-template-columns: minmax(0, 1fr); }
.secao-videos .colunas-video { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.secao-videos .colunas-video > * { min-width: 0; }
.secao-videos .campos-video input[type=file] { max-width: 100%; min-width: 0; }
.secao-videos .campos-video .linha-campo { gap: 4px; }
.secao-videos .campos-video .linha-campo > span,
.secao-videos .campo-bloco > .rotulo-campo { color: #50475e; color: light-dark(#50475e, #c9beda); font-size: 12px; font-weight: 600; }
.secao-videos .campos-video input[type=text],
.secao-videos .campos-video textarea,
.secao-videos .campos-video select { min-height: 34px; padding: 8px 9px; border: 1px solid #ded9e5; border: 1px solid light-dark(#ded9e5, #6d5c81); border-radius: 6px; color: #282132; color: light-dark(#282132, #ded5ec); background: #fff; background: light-dark(#fff, #1b152c); font-size: 13px; box-shadow: none; }
.secao-videos .campos-video input:focus,
.secao-videos .campos-video textarea:focus,
.secao-videos .campos-video select:focus { outline: 2px solid rgb(113 73 205 / .16); border-color: #9475d5; }
.secao-videos .campos-video textarea { min-height: 54px; }
.secao-videos .videos-redes { margin-top: 5px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.videos-redes .chip { min-height: 31px; padding: 5px 7px; border-radius: 6px; font-size: 12px; box-shadow: none; }
.videos-redes .chip:hover { transform: none; }
.videos-envio .btn-primario { position: sticky; bottom: 8px; min-height: 38px; margin-top: 2px; border-radius: 6px; font-size: 13px; box-shadow: 0 6px 16px rgb(99 56 190 / .16); }
.videos-apoio { display: grid; gap: 12px; }
.videos-info { min-height: 0; padding: 14px; display: block; overflow: visible; }
.videos-lista { margin-top: 12px; display: grid; gap: 7px; }
.videos-lista li { display: flex; align-items: center; gap: 7px; color: #4e465b; color: light-dark(#4e465b, #c9c0d9); font-size: 12px; }
.videos-lista svg { color: #32866f; color: light-dark(#32866f, #6ebfa6); }
.videos-limites { margin-top: 11px; display: grid; gap: 7px; }
.videos-limites li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid #f0edf2; border-bottom: 1px solid light-dark(#f0edf2, #544280); }
.videos-limites li:last-child { border-bottom: 0; }
.videos-limites strong { color: #4e465b; color: light-dark(#4e465b, #c9c0d9); font-size: 12px; }
.videos-limites span { color: var(--cinza); font-size: 12px; text-align: right; }
.videos-info-nota { margin-top: 11px; padding-top: 9px; border-top: 1px solid #eeeaf1; border-top: 1px solid light-dark(#eeeaf1, #574683); color: var(--cinza); font-size: 12px; line-height: 1.5; }
.videos-dica { min-height: 78px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 9px; }
.videos-dica p { margin-top: 3px; color: var(--cinza); font-size: 12px; line-height: 1.5; }
.videos-galeria { padding: 15px; }
.videos-galeria-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.videos-filtros { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.videos-filtros .chip { min-height: 28px; padding: 5px 8px; border-radius: 6px; font-size: 12px; }
.videos-filtros .chip[aria-pressed="true"] { color: #6741c3; color: light-dark(#6741c3, #b8a9fe); border-color: #cdbfeb; border-color: light-dark(#cdbfeb, #786b93); background: #f3effb; background: light-dark(#f3effb, #2b203b); }
.secao-videos .grade-videos { margin-top: 14px; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.secao-videos .video-card { overflow: hidden; border: 1px solid #e7e2eb; border: 1px solid light-dark(#e7e2eb, #604f8d); border-radius: 8px; background: #fff; background: light-dark(#fff, #1b152c); box-shadow: none; }
.secao-videos .video-card:hover { border-color: #cfc3e2; border-color: light-dark(#cfc3e2, #79698f); transform: none; box-shadow: 0 5px 14px rgb(50 36 82 / .05); }
.secao-videos .video-capa { min-height: 84px; display: grid; place-items: center; color: #8061c3; color: light-dark(#8061c3, #b496fe); background: #f4f1f9; background: light-dark(#f4f1f9, #251f37); }
.secao-videos .video-corpo { padding: 10px; }
.secao-videos .video-corpo > strong { color: #312a3e; color: light-dark(#312a3e, #dbd2ec); font-size: 13px; }
.secao-videos .video-corpo p,
.secao-videos .video-linha { color: var(--cinza); font-size: 12px; }
.videos-galeria-vazia { min-height: 178px; margin-top: 13px; padding: 24px; display: grid; place-content: center; justify-items: center; border: 1px dashed #ddd6e6; border: 1px dashed light-dark(#ddd6e6, #6f5e82); border-radius: 8px; color: var(--cinza); text-align: center; background: #fcfbfd; background: light-dark(#fcfbfd, #140d24); }
.videos-galeria-vazia > span { width: 46px; height: 46px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 50%; color: #7149cc; color: light-dark(#7149cc, #b5a2ff); background: #eee9f8; background: light-dark(#eee9f8, #2d223d); }
.videos-galeria-vazia strong { color: #4b4258; color: light-dark(#4b4258, #ccc2dc); font-size: 13px; }
.videos-galeria-vazia p { max-width: 420px; margin-top: 5px; font-size: 12px; line-height: 1.5; }
.videos-galeria-vazia.compacta { min-height: 110px; gap: 6px; }

@media (max-width: 1120px) {
  .videos-corpo { grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); }
  .secao-videos .videos-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .videos-corpo { grid-template-columns: 1fr; }
  .videos-apoio { grid-template-columns: 1fr 1fr; }
  .videos-dica { grid-column: 1 / -1; }
  .secao-videos .grade-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .secao-videos .topo { min-height: 80px; padding: 16px 16px 10px; }
  .secao-videos .secao { padding: 0 16px 22px; }
  .videos-metricas { grid-template-columns: 1fr 1fr; }
  .videos-apoio { grid-template-columns: 1fr; }
  .videos-dica { grid-column: auto; }
  .videos-galeria-topo { display: grid; }
  .videos-filtros { justify-content: flex-start; }
}
@media (max-width: 500px) {
  .videos-metricas { grid-template-columns: 1fr; }
  .secao-videos .colunas-video,
  .secao-videos .videos-redes,
  .secao-videos .grade-videos { grid-template-columns: 1fr; }
  .videos-envio { padding: 13px; }
  .videos-limites li { grid-template-columns: 1fr; }
  .videos-limites span { text-align: left; }
}


/* --- Roteiro: movido de influencer.css para cá, componente compartilhado entre perfis --- */
/* Roteiro */
.secao-roteiro {
  background-color: #fbfaff; background-color: light-dark(#fbfaff, #130c22);
  background-image:
    radial-gradient(ellipse 58% 44% at 45% 4%, rgb(139 92 246 / .10), transparent 72%),
    radial-gradient(ellipse 48% 40% at 76% 92%, rgb(139 92 246 / .08), transparent 72%);
}
.secao-roteiro .principal { position: relative; overflow: hidden; }
.secao-roteiro .principal::before {
  content: ""; position: absolute; z-index: 0; width: 850px; height: 850px;
  right: -120px; top: -370px; border: 3px solid rgb(139 92 246 / .055);
  border-radius: 50%; pointer-events: none;
}
.secao-roteiro .topo { position: relative; z-index: 4; }
.secao-roteiro .topo h1 { color: #0f1021; color: light-dark(#0f1021, #daddf7); font-size: var(--texto-pagina); line-height: 1.08; font-weight: 700; letter-spacing: 0; }
.secao-roteiro .topo h1 + p { color: var(--cinza); font-size: 14px; }
.secao-roteiro .secao { position: relative; z-index: 2; }
.secao-roteiro .secao > * { position: relative; z-index: 3; }

.roteiro-camaleao {
  position: absolute !important; z-index: 1 !important; width: 600px; height: auto;
  right: -18px; top: -140px; pointer-events: none; user-select: none;
}
.roteiro-marca-frase, .roteiro-assinatura, .roteiro-ideias {
  position: absolute !important; z-index: 2 !important; color: #8461dc; color: light-dark(#8461dc, #ae95fe); font-size: 12px;
  line-height: 1.55; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.roteiro-marca-frase { right: 520px; top: -132px; }
.roteiro-assinatura {
  right: 12px; bottom: 28px; font-family: cursive; font-size: 16px; line-height: 1.2;
  font-weight: 400; letter-spacing: 0; text-transform: none; transform: rotate(-8deg);
}
.roteiro-ideias {
  right: 6px; top: -96px; font-family: cursive; font-size: 19px; line-height: 1.25;
  font-weight: 400; letter-spacing: 0; text-transform: none; transform: rotate(-8deg);
}
.roteiro-marca-frase span, .roteiro-assinatura span, .roteiro-ideias span {
  display: block; width: 28px; margin-top: 14px; border-top: 2px solid var(--roxo);
}

.secao-roteiro .roteiro-intro {
  width: 100%; max-width: 925px; min-height: 126px; padding: 16px; border-color: #f1d571; border-color: light-dark(#f1d571, #7f6600);
  background: rgb(255 253 247 / .91); background: light-dark(rgb(255 253 247 / .91), #171127e8); border-radius: 10px;
}
.roteiro-intro .cartao-titulo { font-size: 14px; color: #17172a; color: light-dark(#17172a, #d9dbf6); }
.roteiro-intro .cartao-titulo svg {
  width: 40px; height: 40px; padding: 9px; border-radius: 10px;
  color: var(--roxo-escuro); background: rgb(139 92 246 / .10);
}
.roteiro-intro > .cartao-sub { max-width: 720px; margin: -7px 0 0 52px; }
.secao-roteiro .persona-ligada {
  margin: 9px 0 0; padding: 8px 12px; background: rgb(255 255 255 / .72); background: light-dark(rgb(255 255 255 / .72), #1b152cb8);
}
.secao-roteiro .persona-ligada .link-discreto { margin-left: auto; }

.secao-roteiro form:has(.roteiro-formulario) { width: 100%; max-width: 1142px; }
.secao-roteiro .roteiro-formulario {
  min-height: 518px; padding: 15px 20px; border-radius: 10px;
  box-shadow: 0 14px 38px rgb(42 30 93 / .06);
}
.secao-roteiro .roteiro-formulario .campo-bloco { gap: 4px; }
.secao-roteiro .roteiro-formulario .campo-bloco:not(:first-child) { margin-top: 10px !important; }
.secao-roteiro .roteiro-formulario .rotulo-campo { font-size: 12px; }
.secao-roteiro .roteiro-formulario textarea { min-height: 47px; padding: 8px 12px; }
.secao-roteiro .roteiro-formulario .cartoes-escolha {
  grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px;
}
.secao-roteiro .roteiro-formulario .cartao-escolha {
  min-height: 82px; padding: 10px; border-radius: 8px;
}
.secao-roteiro .roteiro-formulario .cartao-escolha b { font-size: 11px; }
.secao-roteiro .roteiro-formulario .cartao-escolha .cartao-sub { font-size: 12px; }
.secao-roteiro .roteiro-formulario .chips { gap: 6px; }
.secao-roteiro .roteiro-formulario .chip { padding: 7px 13px; font-size: 12px; }
.secao-roteiro .roteiro-formulario .pe-agente { margin-top: 12px !important; }
.secao-roteiro .roteiro-formulario .btn-primario { min-width: 195px; justify-content: center; }
.secao-roteiro .roteiro-lista {
  width: 100%; max-width: 1375px; min-height: 112px; padding: 14px 16px; border-radius: 10px;
}
.secao-roteiro .roteiro-lista .vazio { min-height: 64px; padding: 12px; }

.roteiro-dica {
  position: absolute !important; z-index: 4 !important; top: 138px; right: 0; width: 216px;
  min-height: 222px; padding: 26px 20px; border: 1px solid rgb(255 255 255 / .85); border: 1px solid light-dark(rgb(255 255 255 / .85), #42306bd9);
  border-radius: 10px; background: rgb(255 255 255 / .78); background: light-dark(rgb(255 255 255 / .78), #1b152cc7); backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgb(42 30 93 / .07);
}
.roteiro-dica > span {
  float: left; width: 48px; height: 48px; margin: -4px 12px 10px 0; display: grid;
  place-items: center; color: var(--roxo-escuro); background: rgb(139 92 246 / .10); border-radius: 10px;
}
.roteiro-dica svg { width: 27px; height: 27px; }
.roteiro-dica b { display: block; color: #17172a; color: light-dark(#17172a, #d9dbf6); font-size: 14px; line-height: 1.35; }
.roteiro-dica p { clear: both; color: #77718f; color: light-dark(#77718f, #ada7c7); font-size: 11px; line-height: 1.6; padding-top: 10px; }
.roteiro-dica i { display: block; width: 28px; margin-top: 14px; border-top: 2px solid var(--roxo); }

@media (min-width: 1321px) {
  body.secao-roteiro { display: block; }
  .secao-roteiro .sidebar {
    position: fixed; z-index: 20; inset: 0 auto 0 0; width: 258px; height: 100vh;
    padding: 20px 16px; display: flex; visibility: visible; transform: none;
  }
  .secao-roteiro .principal { width: calc(100% - 258px); min-height: 100vh; margin-left: 258px; }
  .secao-roteiro .topo {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 48px auto;
    gap: 12px 20px; padding: 22px var(--pagina-x) 14px;
  }
  .secao-roteiro .topo .voltar { grid-column: 1; grid-row: 1; justify-self: start; }
  .secao-roteiro .topo > div:not(.topo-acoes) { grid-column: 1; grid-row: 2; }
  .secao-roteiro .topo-acoes { grid-column: 2; grid-row: 1; align-self: start; }
  .secao-roteiro .secao { padding: 0 var(--pagina-x) 28px; }
}

/* O card de dica flutua encostado na borda direita da coluna (posição
   absoluta, e não flex/grid, para não mexer no fluxo dos cartões abaixo).
   Ele só cabe sem sobrepor o formulário quando a coluna tem espaço de sobra
   além dos 1142px do formulário — abaixo disso, ele soma nas contas e some. */
@media (max-width: 1720px) {
  .roteiro-dica { display: none; }
}
@media (max-width: 1320px) {
  .roteiro-camaleao { opacity: .10; right: -190px; }
  .roteiro-marca-frase, .roteiro-assinatura, .roteiro-ideias { display: none; }
  .secao-roteiro .roteiro-formulario .cartoes-escolha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .secao-roteiro .roteiro-formulario .cartoes-escolha { grid-template-columns: 1fr 1fr; }
  .secao-roteiro .roteiro-intro > .cartao-sub { margin-left: 0; }
}


/* --- Mensagens: movido de influencer.css, componente compartilhado entre perfis --- */
/* Mensagens */
.secao-mensagens .secao { padding-top: 0; }
.mensagens-dashboard { display: grid; gap: 14px; padding-bottom: 24px; }
.mensagens-painel { padding: 17px; border: 1px solid #e3deec; border: 1px solid light-dark(#e3deec, #66587c); border-radius: 8px; background: #fff; background: light-dark(#fff, #1b152c); box-shadow: 0 6px 18px rgb(68 48 105 / .045); }
.mensagens-painel-cabecalho { display: flex; align-items: flex-start; gap: 11px; }
.mensagens-painel-icone,
.mensagens-avatar,
.mensagens-vazio > span { display: grid; flex: 0 0 auto; place-items: center; color: #7747e8; color: light-dark(#7747e8, #ae9eff); background: #f0eaff; background: light-dark(#f0eaff, #2b223d); }
.mensagens-painel-icone { width: 34px; height: 34px; border-radius: 8px; }
.mensagens-painel-cabecalho h2 { margin: 0; color: #1d1831; color: light-dark(#1d1831, #dcd7fa); font-size: 14px; line-height: 1.35; letter-spacing: 0; }
.mensagens-painel-cabecalho p { max-width: 980px; margin-top: 3px; color: #776f8d; color: light-dark(#776f8d, #afa7c7); font-size: 12px; line-height: 1.5; }
.mensagens-vazio {
  min-height: 142px;
  margin-top: 13px;
  padding: 22px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px dashed #ddd5eb; border: 1px dashed light-dark(#ddd5eb, #6d5e83);
  border-radius: 8px;
  text-align: center;
  background: #fefeff; background: light-dark(#fefeff, #19132a);
}
.mensagens-vazio > span { width: 48px; height: 48px; margin-bottom: 10px; border-radius: 50%; }
.mensagens-vazio strong { color: #574d72; color: light-dark(#574d72, #c2b8e2); font-size: 13px; }
.mensagens-vazio p { max-width: 560px; margin-top: 5px; color: var(--cinza); font-size: 12px; line-height: 1.5; }
.mensagens-lista { margin-top: 13px; overflow: hidden; border: 1px solid #e8e3ef; border: 1px solid light-dark(#e8e3ef, #625175); border-radius: 8px; }
.mensagens-linha {
  min-height: 72px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #eeeaf3; border-bottom: 1px solid light-dark(#eeeaf3, #574583);
  color: inherit;
  transition: background-color .18s ease;
}
.mensagens-linha:last-child { border-bottom: 0; }
a.mensagens-linha:hover { background: #faf8ff; background: light-dark(#faf8ff, #211b33); }
.mensagens-avatar { width: 40px; height: 40px; border-radius: 8px; }
.mensagens-linha strong { color: #2a243d; color: light-dark(#2a243d, #dad4f5); font-size: 13px; }
.mensagens-linha p,
.mensagens-linha small,
.mensagens-linha time { color: var(--cinza); font-size: 12px; line-height: 1.5; }
.mensagens-linha small { display: block; margin-top: 2px; }
.mensagens-linha time { white-space: nowrap; }
.mensagens-seta { color: var(--cinza); }
.mensagens-abrir { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

@media (max-width: 820px) {
  .secao-mensagens .topo { min-height: 60px; padding-inline: 16px; }
  .secao-mensagens .secao { padding: 0 16px 22px; }
  /* O horário desce para baixo do texto em vez de sumir: é ele que diz se a
     conversa está parada. */
  .mensagens-linha { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .mensagens-linha time { grid-column: 2; grid-row: 2; margin-top: 2px; }
  .mensagens-linha .mensagens-seta { grid-row: 1 / span 2; }
}
@media (max-width: 560px) {
  .mensagens-dashboard { gap: 12px; }
  .mensagens-painel { padding: 13px; }
  .mensagens-painel-cabecalho p { font-size: 12px; }
  .mensagens-vazio { min-height: 154px; padding-inline: 16px; }
  .mensagens-linha { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 9px; padding: 11px; }
  .mensagens-avatar { width: 36px; height: 36px; grid-row: 1 / span 2; }
  .mensagens-seta { display: none; }
  .mensagens-abrir { grid-column: 2; justify-self: start; }
}
.mensagens-vazio .link-discreto { margin-top: 10px; font-size: 13px; }


/* --- Assinatura: movido de influencer.css, componente compartilhado entre perfis --- */
/* Assinatura */
.secao-assinatura { background: #faf9fd; background: light-dark(#faf9fd, #100a20); }
.secao-assinatura .principal { overflow: visible; }
.secao-assinatura .topo { min-height: 92px; padding: 20px var(--pagina-x) 14px; align-items: flex-start; background: #faf9fd; background: light-dark(#faf9fd, #100a20); }
.secao-assinatura .topo h1 { color: #19142b; color: light-dark(#19142b, #ddd9f9); font-size: var(--texto-pagina); line-height: 1.1; letter-spacing: 0; font-weight: 700; }
.secao-assinatura .topo h1 + p { margin-top: 5px; color: var(--cinza); font-size: 14px; }
.secao-assinatura .topo-acoes { transform: translateY(-5px); }
.secao-assinatura .secao { padding: 0 var(--pagina-x) 28px; }
.assinatura-dashboard { display: grid; gap: 16px; }
.assinatura-resumo {
  min-height: 142px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(250px, 30%);
  align-items: start;
  gap: 18px;
  border: 1px solid #bda6ee;
  border-radius: 8px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 6px 20px rgb(50 36 82 / .035);
}
.assinatura-resumo-icone { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; color: #7042d8; color: light-dark(#7042d8, #b3a3ff); background: #efe9fb; background: light-dark(#efe9fb, #2d223d); }
.assinatura-resumo-conteudo { min-width: 0; }
.assinatura-resumo-conteudo h2 { color: #211a32; color: light-dark(#211a32, #ded6f7); font-size: 14px; letter-spacing: 0; }
.assinatura-resumo-conteudo h2 .situacao { margin-left: 6px; font-size: 12px; }
.assinatura-uso { margin-top: 8px; }
.assinatura-uso > div { display: flex; justify-content: space-between; gap: 12px; color: #71687f; color: light-dark(#71687f, #b5abc4); font-size: 12px; }
.assinatura-uso strong { color: #766b8a; color: light-dark(#766b8a, #b3a7c9); font-size: 12px; font-weight: 600; }
.assinatura-trilho { height: 6px; margin-top: 6px; display: block; overflow: hidden; border-radius: 6px; background: #eee9f6; background: light-dark(#eee9f6, #2e223d); }
.assinatura-trilho i { height: 100%; display: block; border-radius: inherit; background: #7c4ce0; }
.assinatura-explicacao { margin-top: 12px; color: var(--cinza); font-size: 12px; line-height: 1.55; }
.assinatura-explicacao a { color: var(--roxo-escuro); font-weight: 600; text-decoration: none; }
.assinatura-explicacao a:hover { text-decoration: underline; }
.assinatura-resumo-conteudo > small { display: block; margin-top: 5px; color: var(--cinza); font-size: 12px; }
.assinatura-sem-limite { margin-top: 8px; color: #71687f; color: light-dark(#71687f, #b5abc4); font-size: 12px; }
.assinatura-dica { min-height: 82px; padding-left: 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 12px; border-left: 1px solid #e5dfed; border-left: 1px solid light-dark(#e5dfed, #66567a); }
.assinatura-dica > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #7445dd; color: light-dark(#7445dd, #b2a0ff); background: #f0eafa; background: light-dark(#f0eafa, #2d223c); }
.assinatura-dica h3 { margin-top: 2px; color: #6232c7; color: light-dark(#6232c7, #baaeff); font-size: 12px; letter-spacing: 0; }
.assinatura-dica p { margin-top: 5px; color: #71697f; color: light-dark(#71697f, #b4abc3); font-size: 12px; line-height: 1.5; }
.assinatura-planos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.assinatura-plano {
  position: relative;
  min-width: 0;
  min-height: 420px;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e1e9; border: 1px solid light-dark(#e5e1e9, #62508f);
  border-radius: 8px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 6px 20px rgb(50 36 82 / .04);
}
.assinatura-plano.atual { border-color: #45c982; }
.assinatura-plano.recomendado { border: 1.5px solid #7d4ce3; background: #fdfcff; background: light-dark(#fdfcff, #161026); }
.assinatura-selo { position: absolute; z-index: 2; top: -12px; min-height: 25px; padding: 5px 13px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 15px; font-size: 12px; font-weight: 700; }
.assinatura-selo.atual { left: 16px; color: #147445; color: light-dark(#147445, #77cd98); background: #d9f8e7; background: light-dark(#d9f8e7, #00311d); }
.assinatura-selo.popular { left: 50%; min-width: 104px; color: #fff; background: #7c4ce0; transform: translateX(-50%); }
.assinatura-plano-icone { width: 42px; height: 42px; margin-top: 3px; display: grid; place-items: center; border-radius: 50%; color: #7446dc; color: light-dark(#7446dc, #b2a0ff); background: #f0eafa; background: light-dark(#f0eafa, #2d223c); }
.assinatura-plano h2 { margin-top: 13px; color: #211a32; color: light-dark(#211a32, #ded6f7); font-size: 13px; letter-spacing: 0; }
.assinatura-preco { min-height: 36px; margin-top: 7px; display: flex; align-items: baseline; gap: 6px; }
.assinatura-preco strong { color: #171229; color: light-dark(#171229, #ded9fa); font-size: clamp(18px, 1.7vw, 25px); line-height: 1.05; white-space: nowrap; }
.assinatura-preco span { color: #776e83; color: light-dark(#776e83, #b2a9bf); font-size: 12px; white-space: nowrap; }
.assinatura-plano-resumo { min-height: 45px; margin-top: 7px; color: #756d82; color: light-dark(#756d82, #b2a9c0); font-size: 12px; line-height: 1.5; }
.assinatura-beneficios { margin-top: 13px; display: grid; gap: 9px; }
.assinatura-beneficios li { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: start; gap: 6px; color: #62596f; color: light-dark(#62596f, #beb4cd); font-size: 12px; line-height: 1.4; }
.assinatura-beneficios svg { width: 17px; height: 17px; padding: 3px; border-radius: 50%; color: #7548d7; color: light-dark(#7548d7, #b3a0fe); background: #f0eafa; background: light-dark(#f0eafa, #2d223c); }
.assinatura-plano.atual .assinatura-beneficios svg { color: #167649; color: light-dark(#167649, #75cb99); background: #dff8e9; background: light-dark(#dff8e9, #0a2e1d); }
.assinatura-plano-acao { margin-top: auto; padding-top: 16px; }
.assinatura-plano-acao form { width: 100%; }
.assinatura-plano-acao .btn-primario,
.assinatura-botao-atual { width: 100%; min-height: 42px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; font-size: 13px; font-weight: 700; }
.assinatura-plano-acao .btn-primario { box-shadow: 0 7px 15px rgb(101 57 196 / .14); }
.assinatura-botao-atual { color: #177247; color: light-dark(#177247, #7acd9c); background: #dff8e9; background: light-dark(#dff8e9, #0a2e1d); }
.assinatura-recomendacao { min-height: 17px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--cinza); font-size: 12px; text-align: center; }
.assinatura-recomendacao svg { color: #7748dd; color: light-dark(#7748dd, #b29ffe); }
.assinatura-rodape { min-height: 74px; padding: 14px 18px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; border: 1px solid #e5e1e9; border: 1px solid light-dark(#e5e1e9, #62508f); border-radius: 8px; background: #fff; background: light-dark(#fff, #1b152c); }
.assinatura-rodape > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: #7446dc; color: light-dark(#7446dc, #b2a0ff); background: #f0eafa; background: light-dark(#f0eafa, #2d223c); }
.assinatura-rodape h2 { color: #2a2338; color: light-dark(#2a2338, #dcd4f0); font-size: 13px; letter-spacing: 0; }
.assinatura-rodape p { margin-top: 3px; color: var(--cinza); font-size: 12px; }
.assinatura-cancelar { padding: 13px 16px; border: 1px solid #e6e1eb; border: 1px solid light-dark(#e6e1eb, #61508f); border-radius: 8px; background: #fff; background: light-dark(#fff, #1b152c); }
.assinatura-cancelar summary { display: flex; align-items: center; justify-content: space-between; color: #6d6479; color: light-dark(#6d6479, #b8aec5); font-size: 12px; cursor: pointer; list-style: none; }
.assinatura-cancelar summary::-webkit-details-marker { display: none; }
.assinatura-cancelar > p { margin-top: 12px; color: var(--cinza); font-size: 12px; line-height: 1.5; }
.assinatura-cancelar form { margin-top: 12px; display: flex; align-items: end; gap: 10px; }
.assinatura-cancelar label { flex: 1; display: grid; gap: 5px; color: #62596f; color: light-dark(#62596f, #beb4cd); font-size: 12px; }
.assinatura-cancelar label small { color: var(--cinza); }
.assinatura-cancelar input[type=text] { min-height: 34px; padding: 7px 9px; border: 1px solid #ddd7e4; border: 1px solid light-dark(#ddd7e4, #6f5d81); border-radius: 6px; font-size: 13px; }

@media (max-width: 1250px) {
  .assinatura-planos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .assinatura-plano { min-height: 390px; }
}
@media (max-width: 900px) {
  .assinatura-resumo { grid-template-columns: 46px minmax(0, 1fr); }
  .assinatura-resumo-icone { width: 46px; height: 46px; }
  .assinatura-dica { grid-column: 1 / -1; padding: 14px 0 0; border-top: 1px solid #e5dfed; border-top: 1px solid light-dark(#e5dfed, #66567a); border-left: 0; }
  .assinatura-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .secao-assinatura .topo { min-height: 82px; padding: 16px 16px 10px; }
  .secao-assinatura .secao { padding: 0 16px 24px; }
  .assinatura-resumo { padding: 17px 15px; }
  .assinatura-cancelar form { align-items: stretch; flex-direction: column; }
}
@media (max-width: 520px) {
  .assinatura-resumo { grid-template-columns: 1fr; }
  .assinatura-planos { grid-template-columns: 1fr; }
  .assinatura-plano { min-height: 370px; }
  .assinatura-preco strong { font-size: 24px; }
}


/* --- Prazos: movido de influencer.css, componente compartilhado entre perfis --- */
.prazos-dashboard { display: grid; gap: 14px; padding-bottom: 24px; }
.prazos-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.prazos-tile {
  min-height: 102px;
  padding: 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid #e7e2ee; border: 1px solid light-dark(#e7e2ee, #635377);
  border-radius: 8px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 6px 18px rgb(69 49 104 / .04);
}
.prazos-tile-icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #7550df; color: light-dark(#7550df, #ad9eff); background: #f0ebff; background: light-dark(#f0ebff, #2a223d); }
.prazos-tile > div { min-width: 0; }
.prazos-tile span:not(.prazos-tile-icone) { display: block; color: #686080; color: light-dark(#686080, #b7afd2); font-size: 12px; font-weight: 600; }
.prazos-tile strong { display: block; margin: 2px 0; color: #17132a; color: light-dark(#17132a, #dcd9fa); font-size: 22px; line-height: 1.1; }
.prazos-tile small { display: block; overflow: hidden; color: var(--cinza); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.prazos-tile-atrasado .prazos-tile-icone { color: #c2415b; color: light-dark(#c2415b, #fe7e91); background: #fff0f3; background: light-dark(#fff0f3, #391a23); }
.prazos-tile-semana .prazos-tile-icone { color: #a93473; color: light-dark(#a93473, #ff84c0); background: #fdeef7; background: light-dark(#fdeef7, #361c2d); }
.prazos-tile-entrega .prazos-tile-icone { color: #cf650d; color: light-dark(#cf650d, #f1843a); background: #fff3e8; background: light-dark(#fff3e8, #361f07); }
.prazos-tile-recebe .prazos-tile-icone { color: #168d70; color: light-dark(#168d70, #59c1a1); background: #e8f8f3; background: light-dark(#e8f8f3, #002d24); }
.prazos-vazio {
  position: relative;
  min-height: 304px;
  padding: 38px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #e5e0ec; border: 1px solid light-dark(#e5e0ec, #655579);
  border-radius: 8px;
  text-align: center;
  background: #fff; background: light-dark(#fff, #1b152c);
}
.prazos-relogio-arte { width: clamp(170px, 20vw, 245px); height: 135px; object-fit: contain; filter: drop-shadow(0 10px 18px rgb(98 70 178 / .12)); }
.prazos-vazio h2 { margin-top: 10px; color: #1e1834; color: light-dark(#1e1834, #dcd6fd); font-size: 17px; letter-spacing: 0; }
.prazos-vazio > p { max-width: 460px; margin-top: 7px; color: var(--cinza); font-size: 13px; line-height: 1.55; }
.prazos-adicionar { margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; }
.prazos-listagem { display: grid; gap: 12px; }
.prazos-grupo { overflow: hidden; border: 1px solid #e4dfec; border: 1px solid light-dark(#e4dfec, #66567b); border-radius: 8px; background: #fff; background: light-dark(#fff, #1b152c); box-shadow: 0 5px 16px rgb(70 51 102 / .035); }
.prazos-grupo > header { min-height: 54px; padding: 12px 15px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #eeeaf3; border-bottom: 1px solid light-dark(#eeeaf3, #574583); }
.prazos-grupo-icone { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #7047dd; color: light-dark(#7047dd, #afa2ff); background: #f0ebff; background: light-dark(#f0ebff, #2a223d); }
.prazos-grupo-alerta .prazos-grupo-icone { color: #bd3f54; color: light-dark(#bd3f54, #ff818f); background: #fff0f2; background: light-dark(#fff0f2, #3a1a21); }
.prazos-grupo h2 { color: #27213a; color: light-dark(#27213a, #dbd4f6); font-size: 13px; letter-spacing: 0; }
.prazos-grupo .contador { margin-left: auto; }
.prazos-item { min-height: 66px; padding: 11px 15px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; align-items: center; gap: 11px; border-bottom: 1px solid #eeeaf3; border-bottom: 1px solid light-dark(#eeeaf3, #574583); color: inherit; transition: background-color .18s ease; }
.prazos-item:last-child { border-bottom: 0; }
.prazos-item:hover { background: #faf8ff; background: light-dark(#faf8ff, #211b33); }
.prazos-item-marca { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: #7753db; color: light-dark(#7753db, #ae9cff); background: #f2edff; background: light-dark(#f2edff, #2a213c); }
.prazos-item strong { color: #302941; color: light-dark(#302941, #dad2f1); font-size: 13px; }
.prazos-item p { margin-top: 2px; color: var(--cinza); font-size: 12px; }
.prazos-item-meta { display: flex; align-items: center; gap: 9px; color: var(--cinza); font-size: 12px; white-space: nowrap; }
.prazos-item-meta strong.atrasado { color: #bd334d; color: light-dark(#bd334d, #fe8692); }
.prazos-item-seta { color: var(--cinza); }

@media (max-width: 1180px) {
  .prazos-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .prazos-item { grid-template-columns: 36px minmax(0, 1fr) 18px; }
  .prazos-item-meta { grid-column: 2; flex-wrap: wrap; white-space: normal; }
  .prazos-item-seta { grid-column: 3; grid-row: 1 / span 2; }
  .prazos-tile { min-height: 88px; }
}
@media (max-width: 560px) {
  .prazos-dashboard { gap: 12px; }
  .prazos-resumo { grid-template-columns: 1fr; }
  .prazos-tile { min-height: 84px; }
  .prazos-vazio { min-height: 330px; padding-inline: 17px; }
  .prazos-item { padding-inline: 11px; }
}

/* ---- O resultado ---- */

.av-estagio { text-align: center; border-color: var(--roxo); }
.av-selo {
  display: inline-block; background: var(--grad-primario); color: #fff;
  font-size: 15px; font-weight: 600; padding: 7px 18px; border-radius: 99px;
}
.av-significa { font-size: 15px; line-height: 1.65; margin: 14px 0 0; }
.av-porque {
  font-size: 12.5px; color: var(--cinza); line-height: 1.6;
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--borda);
}

.av-perfis { display: grid; gap: 10px; margin-top: 14px; }
.av-perfil { border: 1px solid var(--borda); border-radius: 10px; padding: 13px 15px; }
.av-perfil.ok { border-color: #BBF7D0; border-color: light-dark(#BBF7D0, #2e6746); background: #F6FFF9; background: light-dark(#F6FFF9, #160f26); }
.av-perfil.aviso { border-color: #FDE68A; border-color: light-dark(#FDE68A, #6d5800); background: #FFFCF2; background: light-dark(#FFFCF2, #150e25); }
.av-perfil.erro { border-color: #FECACA; border-color: light-dark(#FECACA, #865959); background: #FFF7F7; background: light-dark(#FFF7F7, #211b33); }
.av-perfil-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.av-perfil-topo b { font-size: 13.5px; font-weight: 600; }
.av-arroba-lido { color: var(--cinza); font-weight: 500; }
.av-perfil-quem { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; min-width: 0; }
/* A foto do perfil lido: 40px, redonda, igual para Instagram e TikTok, no
   resultado e na conferência do questionário (avaliacoes/_foto_do_perfil). */
.av-perfil-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.av-perfil-inicial {
  display: grid; place-items: center; font-size: 16px; font-weight: 700;
  color: var(--av-roxo, #7c3aed); color: var(--av-roxo, light-dark(#7c3aed, #c2b3db)); background: #f4eeff; background: light-dark(#f4eeff, #2b203b);
}
.av-perfil-texto { min-width: 0; }
.av-perfil-texto b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.av-perfil-bio { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--cinza); white-space: pre-line; overflow-wrap: anywhere; }
.av-etiqueta { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.av-etiqueta.ok { background: #DCFCE7; background: light-dark(#DCFCE7, #003017); color: #15803D; color: light-dark(#15803D, #6bca82); }
.av-etiqueta.aviso { background: #FEF3C7; background: light-dark(#FEF3C7, #342400); color: #92400E; color: light-dark(#92400E, #fca074); }
.av-etiqueta.erro { background: #FEE2E2; background: light-dark(#FEE2E2, #3f1f20); color: #B4231C; color: light-dark(#B4231C, #fe9486); }
.av-numeros { display: flex; gap: 26px; margin-top: 12px; flex-wrap: wrap; }
.av-numeros div { display: flex; flex-direction: column; }
.av-numeros span { font-size: 18px; font-weight: 700; }
.av-numeros small { font-size: 11px; color: var(--cinza); }
.av-nota {
  font-size: 12.5px; color: var(--cinza); line-height: 1.6;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--borda);
}

.av-resumo > b { font-size: 17px; line-height: 1.5; }
.av-lista { margin: 12px 0 0; padding-left: 0; list-style: none; display: grid; gap: 9px; }
.av-lista li { font-size: 14px; line-height: 1.6; padding-left: 22px; position: relative; }
.av-lista li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
}
.av-lista.boa li::before { background: var(--st-aprovado); }
.av-lista.ruim li::before { background: var(--st-revisao); }

.av-primeiro .av-tema { font-size: 15px; font-weight: 600; margin: 12px 0 0; }
.av-gancho {
  margin: 12px 0 0; padding: 12px 16px; background: var(--lavanda);
  border-left: 3px solid var(--roxo); border-radius: 0 8px 8px 0;
  font-size: 14.5px; line-height: 1.6; font-style: italic;
}

.av-plano { display: grid; gap: 1px; background: var(--borda); border-radius: 10px; overflow: hidden; margin-top: 14px; }
.av-semana { display: flex; gap: 16px; background: var(--superficie); padding: 14px 16px; }
.av-semana-num {
  flex-shrink: 0; width: 82px; font-size: 12px; font-weight: 600;
  color: var(--roxo-escuro); padding-top: 2px;
}
.av-semana b { font-size: 14px; font-weight: 600; }
.av-semana p { font-size: 13.5px; line-height: 1.6; margin: 5px 0 0; }
.av-semana .av-sub { margin-top: 6px; }

@media (max-width: 640px) {
  .av-cartao { padding: 18px 16px; }
  .av-semana { flex-direction: column; gap: 6px; }
  .av-semana-num { width: auto; }
  .av-botoes { flex-direction: column-reverse; align-items: stretch; }
  .av-botoes-direita { flex-direction: column-reverse; align-items: stretch; }
}

/* ---------------------------------------------------------------------------
   A versão Rails da moldura

   Na versão em JavaScript o menu era feito de <button>, porque todas as seções
   moravam na mesma página e o clique trocava qual estava visível. Aqui cada
   seção é uma página e o menu é feito de links — quem chega por um link direto
   cai na tela certa em vez de na primeira do menu.

   O desenho é o mesmo; o que muda é o elemento. Estas regras repetem as de
   `.nav button` para `.nav .nav-item`, em vez de reescrever o arquivo inteiro:
   assim uma correção de estilo continua valendo para os dois enquanto os dois
   existirem.
   --------------------------------------------------------------------------- */

.nav .nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 12px;
  border: 0; background: none;
  border-radius: var(--raio-botao);
  color: var(--cinza);
  font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s;
}
.nav .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav a.nav-item:hover { background: var(--fundo); color: var(--tinta); }
.nav .nav-item.ativo { background: var(--lavanda); color: var(--roxo-escuro); font-weight: 600; }

/* O botão de sair vira um formulário, porque sair é um POST — sair por link
   significa que qualquer imagem numa página consegue deslogar quem a abrir. */
.cartao-usuario .sair-form { margin-left: auto; display: grid; place-items: center; }
.cartao-usuario .sair-form button {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--cinza-fraco); display: grid; place-items: center;
}
.cartao-usuario .sair-form button:hover { color: var(--roxo-escuro); }
.cartao-usuario .sair-form svg { width: 16px; height: 16px; }

/* O recado de confirmação ou de erro depois de uma ação. Aparece no topo da
   área principal, onde o olho já está — e não no fim da página, onde ninguém
   vai procurar. */
.recado {
  margin: 0 var(--pagina-x) 16px; padding: 11px 15px;
  border-radius: var(--raio-botao); font-size: 13px; line-height: 1.55;
  border: 1px solid;
}
.recado.ok { background: #F0FDF4; background: light-dark(#F0FDF4, #0b2b19); border-color: #BBF7D0; border-color: light-dark(#BBF7D0, #2e6746); color: #15803D; color: light-dark(#15803D, #6bca82); }
.recado.erro { background: #FEF2F2; background: light-dark(#FEF2F2, #241d35); border-color: #FECACA; border-color: light-dark(#FECACA, #865959); color: #B4231C; color: light-dark(#B4231C, #fe9486); }

/* Contrato compartilhado de formularios. Regras de pagina podem definir
   layout, mas nao reduzir legibilidade, area de toque ou foco. */
:where(.secao) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) {
  min-height: 40px;
  border-radius: var(--raio-controle);
}
:where(.secao) :where(input, textarea)::placeholder {
  color: var(--cinza-fraco);
  opacity: 1;
}
:where(.secao) textarea { line-height: 1.5; }
:where(.secao) :where(.linha-campo, .campo) > :where(span, label):first-child {
  font-size: var(--texto-label);
  line-height: 1.4;
}
:where(.secao) :where(.nota-rodape, .tile-nota, .cartao-sub) { line-height: 1.5; }
:where(.secao) :where(.btn-primario, .btn-secundario, .icone-botao) { flex-shrink: 0; }

@media (max-width: 820px) {
  .topo { min-height: 82px; padding-inline: var(--pagina-x); }
  .secao { padding-inline: var(--pagina-x); }
  :where(.secao) :where(button, .btn-primario, .btn-secundario, .icone-botao) { min-height: 44px; }

  /* A gaveta do celular é a do menu-lateral (bloco "O painel no celular"). */
  body.painel.menu-aberto { overflow: hidden; }
  .principal { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* O cartão que carrega um número grande e uma explicação: as duas moedas do
   ranking, o custo do mês, o total de uma tela. `destaque` é o que a pessoa
   veio ver; `aviso` é o que ela precisa saber antes de continuar. */
.cartao.destaque { border-color: var(--roxo); }
.cartao.aviso { border-color: #FDE68A; border-color: light-dark(#FDE68A, #6d5800); background: #FFFCF2; background: light-dark(#FFFCF2, #150e25); }
/* O rodapé de um cartão: a frase que explica de onde veio o número acima.
   NÃO se chama `.nota` porque `.nota` já é o selo de pontuação da oferta —
   duas coisas com o mesmo nome numa folha só é o tipo de colisão que aparece
   como "a tela do lado quebrou" e leva meia hora para achar. */
.nota-rodape {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda);
  font-size: 11.5px; line-height: 1.6; color: var(--cinza);
}

/* Dinheiro e ponto no extrato: entrou em verde, saiu em vermelho. A cor é a
   primeira coisa que se lê numa tabela de números. */
.tabela-dados td.positivo { color: #15803D; color: light-dark(#15803D, #6bca82); font-weight: 600; }
.tabela-dados td.negativo { color: #B4231C; color: light-dark(#B4231C, #fe9486); font-weight: 600; }
.tabela-dados td .cartao-sub { display: block; margin-top: 2px; font-size: 11px; }
.tabela-dados td.fraco { color: var(--cinza-fraco); text-decoration: line-through; }

/* A lista do que não vale. Sem marcador de "certo": são proibições, e um
   tique verde ao lado de "venda cancelada" leria como aprovação. */
.lista-checada { display: grid; gap: 7px; margin-top: 12px; }
.lista-checada li {
  font-size: 12.5px; line-height: 1.55; color: var(--cinza);
  padding-left: 16px; position: relative; list-style: none;
}
.lista-checada li::before {
  content: "—"; position: absolute; left: 0; color: var(--cinza-fraco);
}

/* O formulário de novo cartão, dentro da coluna. Fechado por padrão: um
   formulário aberto em cada uma das sete colunas seria um quadro em que não se
   enxerga o quadro. */
.novo-cartao summary { list-style: none; }
.novo-cartao summary::-webkit-details-marker { display: none; }
.form-novo-cartao { display: grid; gap: 7px; margin-top: 8px; }
.form-novo-cartao input {
  font: inherit; font-size: 12px; color: var(--tinta);
  border: 1px solid var(--borda-forte); border-radius: 8px;
  padding: 7px 9px; width: 100%; background: var(--fundo);
}
.form-novo-cartao input:focus { outline: none; border-color: var(--roxo); background: var(--superficie); }
.form-novo-cartao .btn-primario { width: 100%; justify-content: center; font-size: 12px; padding: 7px; }

/* As setas que movem o cartão de coluna. Sem borda e sem fundo: elas moram
   dentro do card e competir com o conteúdo dele não ajuda ninguém. */
.card-pe .mover { display: flex; align-items: center; gap: 4px; }
.card-pe .mover-form { display: inline; }
.card-pe .mover-form button {
  border: 0; background: none; cursor: pointer; padding: 1px 5px;
  color: var(--cinza-fraco); font-size: 13px; line-height: 1; border-radius: 5px;
}
.card-pe .mover-form button:hover { background: var(--fundo); color: var(--roxo-escuro); }

/* O rádio e a caixa de marcar que viram pílula. O input fica escondido e
   acessível: sumir com `display:none` tira ele do teclado e do leitor de tela,
   e aí a tela deixa de funcionar para quem navega sem mouse. */
/* ================= O campo que existe e não se vê =================

   O input fica no DOM — o teclado e o leitor de tela precisam dele — e quem
   aparece é o rótulo que o embrulha. É o mesmo truque do seletor de arquivo e
   dos chips de estrela.

   Os `!important` são de propósito, e são o único lugar do sistema que os tem.
   Toda folha de formulário manda `width: 100%` nos seus campos, com
   especificidade maior que uma classe solta — e um input de 1px virava 100% da
   página. Como ele é `absolute` sem ancestral posicionado, "100%" era a largura
   do documento: 1839px de campo invisível, e o painel rolando de lado no
   telefone. Aconteceu três vezes, em três telas diferentes.

   A regra de um utilitário assim não é uma preferência que outra regra possa
   discutir: é o trabalho dele. Ou ele some, ou ele não serve. */
.escondido {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.escondido:checked + .av-opcao {
  background: var(--lavanda); border-color: var(--roxo);
  color: var(--roxo-escuro); font-weight: 600;
}
.escondido:focus-visible + .av-opcao { outline: 2px solid var(--roxo); outline-offset: 2px; }
.av-opcoes label { display: inline-flex; }
.dica-publicar { align-self: flex-start; width: auto; min-height: 0; padding: 8px 22px; }
/* Chip em linha que quebra de linha sobrepõe os vizinhos; em caixa própria ele cresce. */
.linha-campo .chips > label { display: flex; max-width: 100%; }
.linha-campo .chips > label .av-opcao { display: block; max-width: 100%; overflow-wrap: anywhere; }

/* O wizard esconde as perguntas que não são a da vez. */
.hidden { display: none !important; }

/* As abas de rede do calendário, que na versão em JavaScript eram botões. */
.abas-rede .aba {
  padding: 8px 13px; font-size: 12.5px; color: var(--cinza);
  border-bottom: 2px solid transparent; text-decoration: none; cursor: pointer;
}
.abas-rede .aba:hover { color: var(--tinta); }
.abas-rede .aba.ativa { color: var(--roxo-escuro); border-bottom-color: var(--roxo); font-weight: 600; }

/* O formulário lateral do calendário. */
/* O formulário de agendar mora embaixo da grade, numa coluna larga: os campos
   curtos dividem a linha e o que é lista ocupa a linha inteira. */
.form-calendario { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-calendario .largo { grid-column: 1 / -1; }
.form-calendario .linha-campo { display: grid; gap: 5px; align-content: start; }
.form-calendario .opcoes-modo { display: flex; flex-wrap: wrap; gap: 18px; }
.form-calendario .opcao-modo { max-width: 320px; }
.form-calendario input[type=submit] { justify-self: start; }
@media (max-width: 720px) { .form-calendario { grid-template-columns: 1fr; } }
.form-calendario .linha-campo > span { font-size: 11.5px; color: var(--cinza); }
.form-calendario input:not([type=radio]):not([type=checkbox]):not([type=submit]) {
  font: inherit; font-size: 13px; color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 9px 11px; width: 100%;
}
.form-calendario input:not([type=submit]):focus { outline: none; border-color: var(--roxo); background: var(--superficie); }
.opcao-modo { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.opcao-modo b { font-size: 12.5px; font-weight: 600; display: block; }
.opcao-modo .cartao-sub { font-size: 11px; line-height: 1.45; }
/* O rádio do "Como" (Assistido/Automático) herdava a largura de campo de
   texto de regras gerais e virava uma caixa de 100 px, empurrando o texto
   para longe da bolinha (11/2026). Tamanho de rádio, sem encolher nem esticar. */
.opcao-modo input[type=radio] { flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; }

/* O dia do mês na lista de baixo. */
.selo-data {
  flex-shrink: 0; width: 44px; text-align: center;
  background: var(--fundo); border-radius: 9px; padding: 6px 0;
}
.selo-data b { display: block; font-size: 15px; font-weight: 700; }
.selo-data span { font-size: 11px; color: var(--cinza); }

.item-agenda .situacao { margin-left: auto; align-self: center; }
.item-agenda .acoes-ficha { display: flex; gap: 8px; align-self: center; }
.cartao-sub.urgente { color: #B45309; color: light-dark(#B45309, #f68f53); font-weight: 600; }

/* O aviso de publicações grudadas. Avisa e não bloqueia: às vezes a pessoa
   quer mesmo, e um sistema que proíbe o que não entende se contorna. */
.aviso-agenda {
  margin-top: 12px; padding: 9px 11px; border-radius: 9px; font-size: 11.5px;
  line-height: 1.55; background: #FFFCF2; background: light-dark(#FFFCF2, #150e25); border: 1px solid #FDE68A; border: 1px solid light-dark(#FDE68A, #6d5800); color: #92400E; color: light-dark(#92400E, #fca074);
}

.barras-frequencia { display: grid; gap: 14px; margin-top: 14px; }
.frequencia-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.frequencia-linha .trilho {
  display: block; height: 5px; border-radius: 99px; background: var(--fundo);
  overflow: hidden; margin-top: 5px;
}
.frequencia-linha .trilho i { display: block; height: 100%; }
.frequencia-linha .cartao-sub { font-size: 11px; margin-top: 4px; }

/* A tela de vídeos. */
.voltar-lista { display: inline-block; margin-bottom: 14px; font-size: 12.5px; color: var(--cinza); text-decoration: none; }
.voltar-lista:hover { color: var(--roxo-escuro); }
.video-capa.grande { border-radius: var(--raio-cartao); overflow: hidden; background: #000; margin-bottom: 16px; }
.video-capa.grande video { width: 100%; display: block; max-height: 62vh; }

.grade-videos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); margin-top: 16px; }
.video-card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao);
  text-decoration: none; color: inherit; display: block;
}
.video-card:hover { border-color: var(--roxo); }
.video-card.destacado { border-color: var(--roxo); }
.video-corpo { padding: 14px 15px; }
.video-corpo b { font-size: 13.5px; font-weight: 600; line-height: 1.35; display: block; }
.video-linha { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--cinza); }

.video-meta { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 14px; }
.video-meta > div { display: flex; flex-direction: column; }
.video-meta b { font-size: 18px; font-weight: 700; }
.video-meta span { font-size: 11px; color: var(--cinza); }

.campos-video { display: grid; gap: 12px; margin-top: 16px; }
.campos-video .linha-campo { display: grid; gap: 5px; }
.campos-video .linha-campo > span { font-size: 11.5px; color: var(--cinza); }
.campos-video input[type=text], .campos-video textarea {
  font: inherit; font-size: 13px; color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 9px 11px; width: 100%; resize: vertical;
}
.campos-video input:focus, .campos-video textarea:focus {
  outline: none; border-color: var(--roxo); background: var(--superficie);
}
.colunas-video { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Este input de arquivo aparece de propósito — é o seletor nativo, com o botão
   vestido logo abaixo. `max-width` porque o campo nativo declara uma largura
   própria, grande, que num telefone passava da tela e fazia a página rolar de
   lado por 9px. */
.area-arquivo input[type=file] { font: inherit; font-size: 12.5px; max-width: 100%; }
.area-arquivo input[type=file]::file-selector-button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: var(--raio-botao); padding: 8px 14px; margin-right: 12px;
  background: var(--lavanda); color: var(--roxo-escuro);
}
/* Áudio e capa, no formulário de vídeo: o mesmo botão lavanda do arquivo
   principal, em vez do botão cinza do navegador. */
.colunas-video input[type=file] { font: inherit; font-size: 12.5px; color: var(--cinza); max-width: 100%; }
.colunas-video input[type=file]::file-selector-button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: var(--raio-botao); padding: 8px 14px; margin-right: 12px;
  background: var(--lavanda); color: var(--roxo-escuro);
}

.ficha-video div span { min-width: 110px; }

/* O Garimpo. */
.linha-busca { display: flex; gap: 10px; flex-wrap: wrap; }
.linha-busca input {
  flex: 1; min-width: 200px;
  font: inherit; font-size: 14px; color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao); padding: 11px 13px;
}
.linha-busca input:focus { outline: none; border-color: var(--roxo); background: var(--superficie); }

.oferta .nota b { display: block; font-size: 19px; font-weight: 700; line-height: 1; }
.oferta .nota span { font-size: 11px; }
.oferta-topo h4 { margin-top: 8px; }
.eixos-score { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--cinza); }
.eixos-score b { font-weight: 600; color: var(--tinta); }
.oferta-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--borda); padding-top: 12px; }
.oferta-acoes .btn-secundario { margin-left: auto; }

.loja-topo { display: flex; align-items: flex-start; gap: 12px; }
.loja-topo b { font-size: 14px; font-weight: 600; }
.loja-topo > :last-child { margin-left: auto; }
.loja-topo code { font-family: ui-monospace, monospace; font-size: 11.5px; }

.loja-config { display: grid; gap: 12px; margin-top: 14px; }
.loja-config .linha-campo { display: grid; gap: 5px; }
.loja-config .linha-campo > span:first-child { font-size: 11.5px; color: var(--cinza); }
/* A terceira vez que a mesma armadilha aparece: `submit` também é `input`. Esta
   regra é a mais larga das três — pega todo input dentro de qualquer formulário
   `.loja-config` — e vencia a classe do botão pela especificidade. "Guardar e
   continuar", no fim de cada passo do perfil do editor, saía com fundo de campo
   e borda cinza: a ação principal da tela parecendo um campo vazio.

   A lista mira no papel, não na tag: o que a pessoa preenche. `file` fica de
   fora porque quem o veste é o rótulo que o esconde. */
.loja-config input:not([type="submit"]):not([type="button"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.loja-config select {
  font: inherit; font-size: 13px; color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 9px 11px; width: 100%;
}
.loja-config input:not([type="submit"]):not([type="button"]):focus, .loja-config select:focus {
  outline: none; border-color: var(--roxo); background: var(--superficie);
}

/* A classe de transição foi embora: nenhuma tela usa mais .bloco, e cada
   pedaço tem o nome do que ele é. A migração de estilo acabou. */

/* Os estados que aparecem como selo ao lado de um item: uma rodada de sorteio,
   um roteiro esperando escolha, uma chave que falta. Mesma forma, cores
   diferentes — a cor é o que se lê primeiro numa lista. */
.situacao {
  display: inline-block; border-radius: 99px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; background: var(--fundo); color: var(--cinza);
}
.situacao.pronto, .situacao.sorteado, .situacao.publicado { background: #DCFCE7; background: light-dark(#DCFCE7, #003017); color: #15803D; color: light-dark(#15803D, #6bca82); }
.situacao.aberto, .situacao.esperando, .situacao.agendado, .situacao.publicando { background: var(--lavanda); color: var(--roxo-escuro); }
.situacao.falta, .situacao.atrasado { background: #FEF3C7; background: light-dark(#FEF3C7, #342400); color: #92400E; color: light-dark(#92400E, #fca074); }
.situacao.cancelado, .situacao.falhou { background: #FEE2E2; background: light-dark(#FEE2E2, #3f1f20); color: #B4231C; color: light-dark(#B4231C, #fe9486); }

.cartao.pronto { border-color: color-mix(in srgb, #16A34A 45%, var(--borda)); }
.av-cartao.faltando { border-color: #FCA5A5; border-color: light-dark(#FCA5A5, #ad5e5f); }
tr.desligada { opacity: .5; }

/* O que o sistema aprendeu, mas ainda como tendência: cinza, porque afirmar
   "você prefere X" depois de duas vezes erra na cara de quem lê. */
.tendencia { color: var(--cinza); }

/* O quadrinho de uma seção que ainda vem. Mesmo desenho do tile de número, sem
   número: o que ele carrega é o nome da tela e o que ela vai fazer. */
.tile {
  border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  padding: 14px 15px; background: var(--fundo);
}
.tile:not(.cartao) .tile-topo { display: flex; align-items: center; gap: 9px; }
.tile:not(.cartao) .tile-icone { color: var(--roxo-escuro); display: grid; place-items: center; }
.tile:not(.cartao) .tile-icone svg { width: 18px; height: 18px; }
.tile:not(.cartao) .tile-rotulo { font-size: 13.5px; font-weight: 600; }
/* A grade de quatro é a do sistema pronto (lá em cima, mínimo de 210px): com
   190px cabiam cinco por linha, e oito números saíam em cinco e três. */

/* Os agentes. */
/* Só o cartão-link dos painéis de cliente vira bloco. No cartão da
   administração o `.agente` do sistema pronto é coluna com respiro entre as
   partes, e o `display: block` daqui colava tudo. */
a.cartao.agente { text-decoration: none; color: inherit; display: block; }
a.cartao.agente:hover { border-color: var(--roxo); }
.cabeca-agente { display: flex; align-items: flex-start; gap: 12px; }
.cabeca-agente b { font-size: 14px; font-weight: 600; display: block; }
.cabeca-agente > .situacao { margin-left: auto; }
.cabeca-agente > .situacao:not([style*="--cor-sit"]) { background: transparent; }
.marca-agente {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
}
.marca-agente svg { width: 19px; height: 19px; }
/* O pé do cartão segue o do sistema pronto (lá em cima): sem linha própria.
   A linha que aparece no cartão de agente é a da liberação, logo acima. */

.rodar-agente { display: grid; gap: 12px; margin-top: 16px; }
.rodar-agente .linha-campo { display: grid; gap: 5px; }
.rodar-agente .linha-campo > span { font-size: 11.5px; color: var(--cinza); }
.rodar-agente textarea {
  font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--tinta);
  background: var(--fundo); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-botao); padding: 11px 13px; width: 100%; resize: vertical;
}
.rodar-agente textarea:focus { outline: none; border-color: var(--roxo); background: var(--superficie); }

.resposta-agente .lendo { font-size: 14px; line-height: 1.75; }
.resposta-agente .lendo p { margin-bottom: 10px; }

.liberacao { margin-top: 14px; }
.liberacao .chips { margin-top: 8px; }
.chip-form { display: inline; }
.chip-form input[type=submit] {
  font: inherit; font-size: 13px; cursor: pointer;
  border-radius: 999px; padding: 8px 14px;
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--tinta);
}
.chip-form input[type=submit]:hover { border-color: var(--roxo); }
.chip-form .escolhido, .chip-form input.escolhido {
  background: var(--lavanda); border-color: var(--roxo);
  color: var(--roxo-escuro); font-weight: 600;
}
.av-opcao.desligado { opacity: .4; cursor: not-allowed; }

/* A fila de edição. */
.linhas-edicao { display: grid; gap: 1px; background: var(--borda); border-radius: 10px; overflow: hidden; margin-top: 14px; }
.linha-edicao {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  background: var(--superficie); padding: 13px 15px;
}
.linha-edicao .min-zero { flex: 1; min-width: 200px; }
.linha-edicao b { font-size: 13.5px; font-weight: 600; display: block; }
.pe-edicao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pe-edicao .cartao-sub.atrasado { color: #C0392F; color: light-dark(#C0392F, #fe8778); font-weight: 600; }
.pedir-ajuste summary { cursor: pointer; }
.pedir-ajuste .loja-config { margin-top: 8px; min-width: 240px; }
.pedir-ajuste textarea {
  font: inherit; font-size: 12.5px; width: 100%;
  border: 1px solid var(--borda-forte); border-radius: 8px; padding: 8px 10px;
  background: var(--fundo); resize: vertical;
}

/* O catálogo e os pedidos. */
.linha-edicao.desligado { opacity: .5; }
.arquivos-edicao { width: 100%; margin-top: 10px; }
.arquivos-edicao h4 { margin: 0 0 9px; font-size: 13px; }
.arquivos-edicao-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.arquivos-edicao-grade article { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 9px; background: var(--fundo); }
.arquivos-edicao-grade span, .arquivos-edicao-grade small { color: var(--cinza); font-size: 11px; }
.arquivos-edicao-grade b { color: var(--tinta); font-size: 12.5px; }
.arquivos-edicao-grade .link-discreto { width: fit-content; font-size: 12px; }
.arquivos-edicao-versoes { margin-top: 9px; }
.arquivos-edicao-versoes summary { cursor: pointer; }
.arquivos-edicao-versoes ol { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 20px; }
.arquivos-edicao-versoes li { padding-left: 3px; font-size: 12px; }
.arquivos-edicao-versoes small { margin-left: 6px; color: var(--cinza); }
@media (max-width: 680px) { .arquivos-edicao-grade { grid-template-columns: 1fr; } }
.comparacao-edicao { margin-top: 12px; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); }
.comparacao-edicao h4 { margin: 0 0 9px; font-size: 13px; }
.comparacao-edicao-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.comparacao-edicao-colunas article { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 9px; }
.comparacao-edicao-colunas article.depois { border-color: var(--roxo); }
.comparacao-edicao-rotulo { color: var(--cinza); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.comparacao-edicao-colunas b { color: var(--tinta); font-size: 13px; }
.comparacao-edicao-colunas small { color: var(--cinza); font-size: 11.5px; }
.comparacao-edicao-colunas .link-discreto { width: fit-content; min-height: 32px; font-size: 12px; }
.comparacao-edicao-nota { margin: 9px 0 0; color: var(--cinza); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.comparacao-edicao-nota b { display: block; color: var(--tinta); font-size: 11.5px; }
@media (max-width: 680px) { .comparacao-edicao-colunas { grid-template-columns: 1fr; } }
.comentarios-tempo { width: 100%; margin-top: 12px; padding: 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); }
.comentarios-tempo > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.comentarios-tempo h4 { margin: 0; font-size: 13px; }
.comentarios-tempo header p, .comentarios-tempo-vazio { margin: 3px 0 0; color: var(--cinza); font-size: 11.5px; }
.comentarios-tempo header > span { flex: none; color: var(--cinza); font-size: 11px; }
.comentarios-tempo ol { display: grid; gap: 7px; margin: 12px 0; padding: 0; list-style: none; }
.comentarios-tempo li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px; }
.comentarios-tempo time { height: fit-content; padding: 3px 6px; border-radius: 6px; background: var(--roxo-claro); color: var(--roxo-escuro); font-size: 11px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.comentarios-tempo li b { font-size: 11.5px; }
.comentarios-tempo li p { margin: 1px 0 0; color: var(--cinza); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comentarios-tempo-form { display: grid; grid-template-columns: 64px 64px minmax(180px, 1fr) auto; align-items: end; gap: 8px; margin-top: 12px; }
.comentarios-tempo-form label { display: grid; gap: 3px; color: var(--cinza); font-size: 10.5px; }
.comentarios-tempo-form input { width: 100%; min-height: 38px; border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--superficie); color: var(--tinta); font: inherit; padding: 7px 9px; }
.comentarios-tempo-regra { display: block; margin-top: 7px; color: var(--cinza); font-size: 10.5px; }
@media (max-width: 680px) { .comentarios-tempo-form { grid-template-columns: 1fr 1fr; } .comentarios-tempo-texto, .comentarios-tempo-form .btn-secundario { grid-column: 1 / -1; } }
.linha-estoque { display: flex; align-items: center; gap: 6px; }
.linha-estoque input[type=number], .linha-estoque input[type=date] {
  font: inherit; font-size: 12.5px; width: 7.5rem;
  border: 1px solid var(--borda-forte); border-radius: 8px; padding: 6px 8px;
  background: var(--fundo);
}
.linha-estoque input:focus { outline: none; border-color: var(--roxo); background: var(--superficie); }
.tabela-dados td .situacao { font-size: 11px; }

/* O contador ao lado do título de um grupo de prazos. */
.cartao-titulo .contador { margin-left: 8px; display: inline-grid; vertical-align: middle; }

/* O gráfico de constância: oito barras e nada mais. Um gráfico com eixo,
   legenda e tooltip diria a mesma coisa e levaria três vezes mais tempo para
   ser lido. `.grafico-barras`, e não `.grafico`: `.grafico` é o de linha do
   sistema pronto, e as duas regras no mesmo nome achatavam o SVG em 140px. */
.grafico-barras { display: flex; align-items: flex-end; gap: 8px; height: 140px; margin-top: 16px; }
.barra-semana { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; }
.barra-semana span {
  display: block; width: 100%; min-height: 3px; border-radius: 5px 5px 0 0;
  background: var(--grad-primario);
}
.barra-semana small { font-size: 11px; color: var(--cinza-fraco); text-align: center; }

/* O aceite: a caixa vem junto do texto que está sendo aceito. Uma caixinha com
   "aceito os termos" sem os termos à vista não prova nada. */
.aceite {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.6;
}
.aceite input { margin-top: 3px; flex-shrink: 0; }
.cartao-titulo .situacao { margin-left: 8px; vertical-align: middle; }

/* As três opções de roteiro. */
.opcao-roteiro { display: flex; flex-direction: column; gap: 14px; }
.opcao-topo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.opcao-topo > .min-zero { flex: 1; min-width: 200px; }
.opcao-nome { display: flex; align-items: center; gap: 8px; }
.opcao-nome b { font-size: 15px; font-weight: 600; }
.selo-recomendada {
  background: var(--lavanda); color: var(--roxo-escuro);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 99px; padding: 3px 9px;
}
.opcao-custo {
  display: grid; gap: 6px; border-top: 1px solid var(--borda); padding-top: 12px;
  font-size: 12.5px; line-height: 1.6;
}

/* O roteiro em blocos, do jeito que o editor lê. */
.blocos-roteiro { display: grid; gap: 1px; background: var(--borda); border-radius: 10px; overflow: hidden; }
.fala-bloco { display: flex; gap: 14px; background: var(--superficie); padding: 11px 13px; }
.tempo-bloco {
  width: 58px; flex-shrink: 0; font-family: ui-monospace, monospace;
  font-size: 11.5px; color: var(--roxo-escuro); padding-top: 2px;
}
.fala-bloco p { font-size: 13.5px; line-height: 1.6; }
.fala-bloco .cartao-sub { margin-top: 3px; }

.fechamento { background: var(--fundo); border-radius: 10px; padding: 12px 14px; }
.cta-roteiro { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.fechamento .cartao-sub { margin-top: 8px; }
.tags { margin-top: 6px; font-size: 12px; color: var(--roxo-escuro); }

.lista-checada li.tendencia { color: var(--cinza-fraco); }
.lista-checada li .cartao-sub { display: block; margin-top: 2px; font-size: 11px; }

/* A explicação das opções, embaixo delas: "didático" e "sutil" querem dizer
   coisas diferentes para cada pessoa, e o exemplo resolve sem debate. */
.explica-opcoes { background: var(--fundo); border-radius: 10px; padding: 11px 13px; margin-top: 14px; }
.explica-opcoes p { font-size: 11.5px; line-height: 1.6; color: var(--cinza); }
.explica-opcoes b { color: var(--tinta); font-weight: 600; }

.av-significa { font-size: 16px; font-weight: 600; line-height: 1.5; margin-top: 10px; }
.cartao .chips { margin-top: 14px; }

/* O tile com número: o contador de cada público, o custo de cada tela. */
.tile:not(.cartao) .tile-valor { font-size: 26px; font-weight: 700; margin-top: 8px; }
a.cartao.tile { text-decoration: none; color: inherit; display: block; }
a.cartao.tile:hover { border-color: var(--roxo); }
.cartao-titulo .link-discreto { margin-left: 8px; font-weight: 400; }
.topo-acoes .nav-mes { margin-left: 0; }

/* Um bloco de conteúdo dentro de um cartão, sem papel próprio: um par de
   campos, uma linha de texto com um botão ao lado. Herdou o lugar da classe de
   transição, agora com um nome que diz o que ela é. */
.linha-solta { display: block; }
.linha-solta + .linha-solta { margin-top: 10px; }
.cartao > .linha-solta:first-of-type { margin-top: 12px; }

/* O preço no cartão de plano. */
.numero-grande .cartao-sub { font-size: 12px; font-weight: 400; margin-left: 4px; }
.cartao .lista-checada { margin-top: 14px; }
.cartao .acoes-entrada { margin-top: 16px; }

/* Os cartões de plano têm listas de tamanhos diferentes, e o botão vinha logo
   depois da última linha: três cartões lado a lado, três botões em alturas
   diferentes. Comparar preço já é trabalho; procurar onde clicar em cada
   coluna é trabalho a mais. A coluna vira flex e a ação desce para o pé. */
.grade-planos > .cartao { display: flex; flex-direction: column; }
.grade-planos > .cartao .acoes-entrada { margin-top: auto; padding-top: 16px; }
.chip b { margin-left: 4px; font-weight: 700; }

/* O número grande, a variação e o gráfico usam as regras do sistema pronto,
   lá em cima. Aqui ficam só as cores do resultado do Financeiro, que pinta o
   número negativo de vermelho, e o respiro da tabela embaixo de um gráfico. */
.delta.subiu { color: #15803D; color: light-dark(#15803D, #6bca82); }
.delta.caiu { color: #C0392F; color: light-dark(#C0392F, #fe8778); }
.cartao-grafico .tabela-dados { margin-top: 20px; }

/* O selo de "ao vivo", com o pulso. Discreto de propósito: um ponto piscando
   grande demais rouba a atenção de tudo o que está ao lado. */
.selo-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.pulso {
  width: 8px; height: 8px; border-radius: 50%; background: #16A34A;
  box-shadow: 0 0 0 0 rgb(22 163 74 / .55); animation: pulsar 2s infinite;
}
@keyframes pulsar {
  70% { box-shadow: 0 0 0 9px rgb(22 163 74 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0); }
}
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

/* ---------- Mensagens ---------- */

/* A linha inteira da lista é clicável. Um link só no nome obrigaria a mirar
   numa palavra para abrir uma conversa. */
.linha-toda { text-decoration: none; color: inherit; }
.linha-toda:hover { background: var(--fundo); }

/* A prévia da última mensagem em uma linha só: duas linhas de prévia e a
   lista vira a conversa, o que tira a razão de existir da lista. */
.previa-linha {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch;
}

/* O produto no alto da conversa sobre um pedido de produto. */
.conversa-produto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.conversa-produto-foto { display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; border-radius: 14px; background: #f1ebff; background: light-dark(#f1ebff, #2b223d); color: #7821ff; color: light-dark(#7821ff, #b0a1fe); }
.conversa-produto-foto img { width: 100%; height: 100%; object-fit: cover; }
.conversa-produto-info { min-width: 0; }
.conversa-produto-info h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.conversa-produto-dados { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.conversa-produto-dados b { color: var(--cinza); font-weight: 500; margin-right: 4px; }
.conversa-produto-lado { display: grid; justify-items: end; gap: 8px; }
@media (max-width: 560px) {
  .conversa-produto { grid-template-columns: auto minmax(0, 1fr); }
  .conversa-produto-lado { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: space-between; }
}

/* Os atalhos da loja na conversa sobre um pedido de produto. */
.respostas-prontas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.respostas-prontas .chip { text-align: left; white-space: normal; }


/* ---------- Configurações da conta ---------- */

/* Uma coluna, e não duas: cada campo aqui é uma decisão separada, e campos
   lado a lado fazem alguém preencher o de baixo achando que é o de cima. */
.form-conta { display: grid; gap: 14px; margin-top: 14px; }
.form-conta label { display: block; font-size: 12.5px; font-weight: 500; color: var(--cinza); }
/* De novo a mesma armadilha: `submit` também é `input`. Estilizar `input` sem
   excluí-lo dava ao botão a cara de campo — fundo branco, borda cinza — e o
   `width: auto` não salvava, porque num grid o item estica sozinho. "Salvar" e
   "Trocar a senha" viravam duas faixas brancas.

   A regra vale para o papel, não para a tag: o que é campo se estiliza como
   campo, e o que é botão fica com a classe de botão. */
.form-conta input:not([type="submit"]):not([type="button"]) {
  font: inherit; font-size: 13.5px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 9px 12px; width: 100%; margin-top: 6px;
}
.form-conta input:not([type="submit"]):not([type="button"]):focus {
  outline: 2px solid var(--roxo); outline-offset: -1px; border-color: var(--roxo);
}
.form-conta input[type="submit"] { width: auto; justify-self: start; }

/* A exclusão de conta existe em todos os painéis. O estilo não pode depender
   de admin.css, que não é carregado para Influencer, Lojista e Editor. */
.form-conta .btn-perigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid #c0392f;
  border-radius: var(--raio-botao);
  background: #c0392f;
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
  cursor: pointer;
}
.form-conta .btn-perigo:hover { background: #a32f27; border-color: #a32f27; }

/* O texto pronto para copiar. Monoespaçado e com as quebras preservadas: é
   assim que ele vai chegar no grupo, e ver diferente aqui seria ver outra
   coisa. */
.texto-publicado {
  white-space: pre-wrap; word-break: break-word; margin-top: 12px;
  padding: 12px 14px; border-radius: var(--raio-botao);
  background: var(--fundo); border: 1px solid var(--borda);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  line-height: 1.6; color: var(--tinta);
}

/* A nota do vídeo dentro do título do cartão. Mesmo desenho da nota da oferta
   — é a mesma ideia de "conta com as partes à vista", e duas aparências para a
   mesma ideia fariam parecer duas coisas. */
.cartao-titulo .nota { margin-left: auto; }
.cartao-titulo .nota b { display: block; font-size: 19px; font-weight: 700; line-height: 1; }
.cartao-titulo .nota span { font-size: 11px; font-weight: 500; }

/* Cada linha da avaliação traz a frase do que ela viu, embaixo da barra. */
.frequencia-linha .cartao-sub { margin-top: 5px; }

/* O logo. No sistema pronto o JS troca o `currentColor` do desenho por branco
   antes de pôr na tela; aqui o SVG sai do helper com `currentColor`, então a
   cor branca vem do círculo — sem ela o traço herda a tinta e sai escuro. */
.marca-icone { color: #fff; }
.marca-icone-logo {
  background: transparent;
  color: inherit;
  overflow: visible;
}
.marca-logo {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
}

/* Link com cara de botão ou de chip. No sistema pronto são <button>, que não
   sublinham; aqui levam a um endereço, e o sublinhado do <a> tem de sair. */
a.btn-primario, a.btn-secundario, a.chip { text-decoration: none; }

/* Os períodos do gráfico colam no topo do cartão como no sistema pronto: o
   `.cartao .chips` daqui de cima, pensado para chips soltos, os empurrava 12px. */
.cartao .faixa-periodos { margin-top: 2px; }

/* A faixa de atenção e o gráfico, um embaixo do outro, com o respiro do
   sistema pronto — lá os dois são irmãos dentro da seção. */
.cartao.atencao + .cartao { margin-top: 16px; }
a.atencao-item { text-decoration: none; color: inherit; }

/* O selo com a cor vinda da própria linha (`--cor-sit`), como nas listas do
   sistema pronto. O `.situacao` daqui de cima pinta tudo de cinza, e sem esta
   regra "Ativo" e "Cancelado" saíam da mesma cor. */
.situacao[style*="--cor-sit"] {
  display: inline; padding: 4px 10px;
  background: color-mix(in srgb, var(--cor-sit) 12%, transparent);
  color: var(--cor-sit);
}

/* O tile de número dentro de cartão volta a ser o do sistema pronto. O `.tile`
   daqui de cima é o quadrinho cinza de seção que ainda vem, e as regras dele
   (fundo, rótulo em 13,5px negrito, ícone sem fundo) vazavam para os
   indicadores — que lá são brancos, com o ícone num quadrado colorido. */
.cartao.tile {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--superficie); padding: 18px;
}
a.cartao.tile { display: flex; }
.cartao.tile .tile-topo { margin-bottom: 6px; }
.cartao.tile .tile-icone {
  width: 30px; height: 30px; border-radius: 8px;
  background: color-mix(in srgb, var(--cor-tile, var(--roxo)) 12%, transparent);
  color: var(--cor-tile, var(--roxo));
}
.cartao.tile .tile-icone svg { width: 16px; height: 16px; }
.cartao.tile .tile-rotulo { font-size: 12.5px; color: var(--cinza); font-weight: 500; }
.cartao.tile .tile-valor { font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin-top: 0; }

/* Os chips no cabeçalho de uma lista ficam na linha do título, como no sistema
   pronto — o `.cartao .chips` genérico os empurrava para baixo. */
.lista-topo .chips { margin-top: 0; }

/* O rodapé de uma lista: a contagem à esquerda, a soma à direita, separados
   por uma linha. Estava só no admin.css, que as telas do editor não carregam —
   e em Entregas a contagem e o total saíam colados, um atrás do outro no meio
   do parágrafo. */
.rodape-lista {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-top: 1px solid var(--borda);
  font-size: 12.5px; color: var(--cinza);
}
.rodape-lista .soma {
  margin-left: auto; color: var(--tinta); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A linha da fila de atenção é um link inteiro: leva para onde aquilo se
   resolve. Sem sublinhado, e com o fundo claro no hover que diz "clicável". */
a.pendencia { text-decoration: none; color: inherit; }
a.pendencia:hover { background: var(--fundo); }

/* Botão desligado precisa parecer desligado: "Testar o bot" e "Ligar o bot"
   ficam travados enquanto falta passo, e com a cor cheia pareciam quebrados. */
.btn-primario:disabled, .btn-secundario:disabled { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; }

/* O chip que é um rádio: o painel que a conta abre. O círculo some, e o chip
   marcado ganha o desenho do chip pressionado. */
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio:has(input:checked) { background: var(--lavanda); border-color: var(--lavanda); color: var(--roxo-escuro); font-weight: 600; }
.chip-radio:has(input:focus-visible) { outline: 2px solid var(--roxo); outline-offset: 1px; }
/* Os planos de cada papel no formulário de Acessos: só a família do papel
   marcado aparece. Sem isto, o display: flex dos chips vencia o hidden. */
[data-controller~="planos-do-perfil"] [hidden] { display: none !important; }

/* As ações de cada conta são links e botões misturados; os dois leem igual,
   sem sublinhado até o mouse passar. O "você" fica na mesma linha. */
.acoes-conta a.link-discreto, .acoes-conta button.link-discreto { text-decoration: none; margin-top: 0; }
.acoes-conta a.link-discreto:hover, .acoes-conta button.link-discreto:hover { text-decoration: underline; }
.acoes-conta .cartao-sub { margin: 0; }
.pe-agente a.link-discreto { text-decoration: none; margin-top: 0; }
.pe-agente a.link-discreto:hover { text-decoration: underline; }

/* ---------- Persona: o que a referência desenhou e o que faltou nela ----------

   A opção da persona é um label com o input escondido dentro — no sistema
   pronto era um botão com classe `.marcada`, e aqui o formulário precisa
   funcionar sem JavaScript. O desenho é o mesmo; o seletor é que muda. */
.opcao:has(input:checked) {
  border-color: var(--roxo); background: var(--lavanda);
  color: var(--roxo-escuro); font-weight: 500;
}
.opcao:has(input:checked) .marca-opcao {
  border-color: var(--roxo); background: var(--roxo);
  box-shadow: inset 0 0 0 2.5px var(--superficie);
}
.opcao:has(input:focus-visible) { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* Os tons vêm em cartão, e não em pílula: escolher entre oito palavras soltas é
   sortear, e o que cada tom faz só cabe num cartão. No sistema pronto a grade
   dos cartões ficou sem folha de estilo e os oito saíram empilhados. */
.cartoes-escolha {
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.cartao-escolha { padding: 12px 14px; gap: 3px; }
.cartao-escolha b { display: flex; align-items: center; gap: 7px; }
.cartao-escolha.escolhido { border-color: var(--roxo); background: var(--lavanda); }
.cartao-escolha .exemplo-tom { font-style: italic; margin-top: 4px; }
.selo-principal {
  background: var(--roxo-forte); color: #fff; border-radius: 99px;
  padding: 2px 8px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
}

/* A pergunta respondida não ganha cor: o que muda é a trilha ao lado. Aqui só o
   espaço entre o enunciado e o campo, que o cartão da etapa não dá. */
.pergunta textarea { width: 100%; resize: vertical; font-family: inherit; }
.persona-topo .cartao-titulo { display: flex; align-items: center; gap: 8px; }
.persona-topo .cartao-titulo svg { width: 18px; height: 18px; color: var(--roxo-escuro); }

/* ---------- Roteiro: o pedido numa página ----------

   O sistema pronto não tinha folha para estes dois: `campo-bloco` e
   `rotulo-campo` saíam com o estilo que o navegador dá. Aqui eles são o que
   aparentavam ser lá — rótulo em cima, campo embaixo. */
.campo-bloco { display: grid; gap: 6px; }
.campo-bloco > .rotulo-campo { font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.campo-bloco > .rotulo-campo .cartao-sub { font-weight: 400; margin-left: 4px; }
.campo-bloco textarea { width: 100%; resize: vertical; font-family: inherit; }
.campo-bloco.faltando > .rotulo-campo { color: #C0392F; color: light-dark(#C0392F, #fe8778); }
.campo-bloco.faltando textarea, .campo-bloco.faltando .chips { outline: 1px solid #C0392F; outline-offset: 4px; border-radius: 8px; }

/* O cartão que se escolhe com um rádio dentro: o mesmo desenho do sistema
   pronto, com o input escondido para o formulário andar sem JavaScript. */
.cartao-escolha:has(input:checked) { border-color: var(--roxo); background: var(--lavanda); }
.cartao-escolha:has(input:focus-visible) { outline: 2px solid var(--roxo); outline-offset: 2px; }

.detalhe-avancadas > summary { list-style: none; }
.detalhe-avancadas > summary::-webkit-details-marker { display: none; }
.detalhe-avancadas > summary::before { content: "+ "; }
.detalhe-avancadas[open] > summary::before { content: "− "; }

/* Um roteiro na lista: situação e data em cima, assunto, e no pé a nota com o
   botão de abrir. */
.roteiro-cartao { display: flex; flex-direction: column; gap: 7px; }
.topo-roteiro { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roteiro-cartao b { font-size: 14px; line-height: 1.35; }
.roteiro-cartao b a { text-decoration: none; color: inherit; }
.roteiro-cartao b a:hover { color: var(--roxo-escuro); }
.pe-roteiro {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px;
}
.acoes-cartao-roteiro { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.acoes-cartao-roteiro form { margin: 0; }
.btn-excluir-roteiro { color: var(--erro); }
.nota-roteiro { font-size: 12px; color: var(--cinza); }
.nota-roteiro b { font-size: 19px; color: var(--cor-nota); margin-right: 4px; }
.persona-ligada .link-discreto { text-decoration: none; margin-top: 0; }
.persona-ligada .link-discreto:hover { text-decoration: underline; }

/* Um roteiro sozinho não ocupa a linha inteira: a coluna vazia fica vazia, e a
   lista continua parecendo uma lista quando chegar o segundo. */
.lista-roteiros { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }

/* "Não medido" não é zero, e não pode parecer um número: itálico, cinza, do
   tamanho do texto ao redor. Ele aparece no painel do influencer e no da
   administração, então mora aqui. */
.nao-medido { font-size: 12.5px; font-weight: 500; font-style: italic; color: var(--cinza-fraco); letter-spacing: 0; }

/* Um campo de valor dentro de uma linha de tabela: cabe o dinheiro e mais nada. */
.campo-curto { width: 96px; padding: 5px 8px; font-size: 12.5px; text-align: right; }

/* A tabela da fatia do Garimpo: quatro colunas de número e uma de campo. Sem
   respiro entre elas os títulos encostam um no outro e viram uma frase só. */
.tabela-fatia { width: 100%; }
.tabela-fatia th + th, .tabela-fatia td + td { padding-left: 18px; }
.tabela-fatia .estado { white-space: nowrap; }

/* Meus vídeos: a capa sem miniatura mostra o ícone, e os selos ficam na linha
   debaixo do título. Um título de bloco fora de cartão precisa do mesmo peso
   do título de dentro. */
.video-capa svg { width: 34px; height: 34px; color: var(--cinza-fraco); }
.video-capa:has(svg) { display: grid; place-items: center; background: var(--fundo); }
.video-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.titulo-bloco { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.titulo-bloco svg { width: 18px; height: 18px; color: var(--roxo-escuro); }

/* O tique verde da lista: a regra que o sistema pronto tinha ficou coberta pela
   lista de proibições, que veio depois e usa traço. Aqui ela volta, marcada
   item a item — traço para o que não vale, tique para o que está incluído. */
.lista-checada li.tem::before { content: "✓"; color: #006300; color: light-dark(#006300, #86d97f); font-weight: 700; }
.lista-checada li.tem { color: var(--tinta); }

.opcao-modo.travada { opacity: .55; }
.opcao-modo.travada b { color: var(--cinza); }

/* O cartão de um editor: quem é, o que já entregou e o que está com ele. */
.editor-card { display: flex; flex-direction: column; gap: 12px; }
.editor-topo { display: flex; align-items: center; gap: 10px; }
.editor-topo b { font-size: 13.5px; display: block; }
.editor-topo .avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--lavanda);
  color: var(--roxo-escuro); font-size: 12px; font-weight: 700;
}
.editor-numeros { display: flex; gap: 16px; flex-wrap: wrap; }
.editor-numeros b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.editor-numeros span { font-size: 11px; color: var(--cinza-fraco); }

/* Cartão de campanha */
.campanha { display: flex; flex-direction: column; gap: 12px; }
.campanha-topo { display: flex; align-items: flex-start; gap: 12px; }
.campanha h3 { font-size: 15px; font-weight: 600; line-height: 1.35; }
.campanha .marca { font-size: 12px; color: var(--cinza); margin-top: 2px; }
.campanha .briefing {
  font-size: 12.5px; color: var(--cinza); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.estado-campanha {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
  white-space: nowrap; flex-shrink: 0;
  background: color-mix(in srgb, var(--cor) 12%, transparent); color: var(--cor);
}

.campanha-numeros { display: flex; flex-wrap: wrap; gap: 18px; }
.campanha-numeros div { display: flex; flex-direction: column; gap: 1px; }
.campanha-numeros .n { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.campanha-numeros .r { font-size: 11.5px; color: var(--cinza-fraco); }

.vagas { display: flex; align-items: center; gap: 9px; }
.vagas .trilho { flex: 1; height: 6px; border-radius: 99px; background: var(--fundo); overflow: hidden; min-width: 60px; }
.vagas .trilho i { display: block; height: 100%; background: var(--roxo); }
.vagas .quanto { font-size: 12px; color: var(--cinza); white-space: nowrap; }

.prazo { font-size: 12px; color: var(--cinza); }
.prazo.urgente { color: #C0392F; color: light-dark(#C0392F, #fe8778); font-weight: 600; }

.campanha-pe { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--borda); margin-top: auto; }
.campanha-pe button { margin-left: auto; }
.campanha-pe .btn-primario, .campanha-pe .btn-secundario { margin-left: auto; text-decoration: none; }
.campanha h3 a { text-decoration: none; color: inherit; }
.campanha h3 a:hover { color: var(--roxo-escuro); }

/* Quem se inscreveu numa campanha: avatar, quem é, o que já fez por esta loja
   e as duas decisões. Escolher alguém vendo só o nome é sortear. */
.lista-inscritos { display: grid; margin-top: 12px; }
.inscrito {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--borda);
}
.inscrito:last-child { border-bottom: 0; }
.inscrito .avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lavanda); color: var(--roxo-escuro); font-size: 12.5px; font-weight: 700;
}
.inscrito b { font-size: 13.5px; display: block; }
.inscrito .sobre { font-size: 12px; color: var(--cinza); margin-top: 2px; }
.inscrito .recado { margin-top: 5px; font-style: italic; }
.inscrito .acoes { display: flex; gap: 8px; }
@media (max-width: 640px) {
  .inscrito { grid-template-columns: 38px minmax(0, 1fr); }
  .inscrito .situacao, .inscrito .acoes { grid-column: 2; }
}

/* O briefing que veio com o trabalho, dentro da linha da fila. Recolhido para
   a fila continuar sendo uma lista; aberto, com a quebra de linha preservada,
   porque ele foi escrito em blocos. */
.briefing-do-trabalho { margin-top: 8px; }
.roteiro-recebido {
  margin-top: 10px; padding: 16px 18px; border: 1px solid #e7e0f5; border: 1px solid light-dark(#e7e0f5, #34294d); border-radius: 12px;
  background: #faf8ff; background: light-dark(#faf8ff, #1b1530);
  font: inherit; font-size: 13px; line-height: 1.7; color: inherit;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto;
  scrollbar-width: thin; scrollbar-color: #8b5cf6 transparent;
}
.roteiro-recebido .briefing-bloco { color: #5b21b6; color: light-dark(#5b21b6, #c4b0ff); font-weight: 700; letter-spacing: .02em; }
.briefing-do-trabalho > summary { font-weight: 600; }
.briefing-do-trabalho + .cartao-sub { margin-top: 14px; }

/* O aviso de que o arquivo não sobe. Âmbar e não vermelho: não é erro, é como
   o plano funciona. */
.aviso-drive {
  padding: 11px 13px; border-radius: 10px; margin: 0 0 12px;
  background: #FFF9ED; background: light-dark(#FFF9ED, #2f2102); border: 1px solid #F5E3BD; border: 1px solid light-dark(#F5E3BD, #6a5832); color: #6B5320; color: light-dark(#6B5320, #d5ba86);
}
.aviso-drive b { color: #6B5320; color: light-dark(#6B5320, #d5ba86); }

/* O catálogo de editores: cartão com foto à esquerda, texto no meio e o botão
   na ponta. `minmax(0, 1fr)` no meio porque a apresentação é texto livre e sem
   isso ela empurra o botão para fora. */
.grade-editores { display: grid; gap: 12px; }
.cartao-editor {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px;
  align-items: center; padding: 14px 16px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--branco);
}
.cartao-editor .foto-editor { width: 56px; height: 56px; margin: 0; }
.cartao-editor .chips { margin: 6px 0; }
.foto-editor.sem-foto {
  display: grid; place-items: center; background: var(--fundo);
  font-weight: 600; color: var(--cinza);
}
.foto-editor.grande { width: 96px; height: 96px; }
.cabeca-editor { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }

@media (max-width: 620px) {
  .cartao-editor { grid-template-columns: 48px minmax(0, 1fr); }
  .cartao-editor .btn-secundario { grid-column: 1 / -1; }
  .cabeca-editor { grid-template-columns: minmax(0, 1fr); }
}

/* A trilha das etapas do perfil do editor: progresso e navegação ao mesmo
   tempo. Quem preencheu a etapa 3 precisa poder voltar à 1 sem refazer nada. */
/* Cinco círculos ligados por uma linha, como no desenho. A linha é o que
   transforma cinco botões soltos numa trilha: ela diz que há uma ordem, e que
   a pessoa está em algum ponto dela.

   No celular vira lista: cinco círculos lado a lado em 380px ficariam com o
   texto ilegível, e a ordem já é óbvia numa coluna. */
.trilha-etapas {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; margin-bottom: 16px;
}
/* `background: none` de propósito: existe um `.passo.agora` genérico, de outra
   tela, que pinta o fundo de lavanda. Aqui o marcado é o círculo, e uma
   pílula em volta dele some com a linha da trilha. */
.trilha-etapas .passo,
.trilha-etapas .passo:hover,
.trilha-etapas .passo.agora {
  background: none;
}
.trilha-etapas .passo {
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  padding: 4px 6px; text-decoration: none; position: relative;
  font-size: 12.5px; color: var(--cinza); text-align: center; line-height: 1.3;
}
/* A linha sai do meio do círculo e vai até o próximo. O último não tem linha:
   ela apontaria para fora da trilha. */
.trilha-etapas .passo::after {
  content: ""; position: absolute; top: 16px; left: calc(50% + 20px); right: calc(-50% + 20px);
  height: 2px; background: var(--borda-forte);
}
.trilha-etapas .passo:last-child::after { display: none; }
.trilha-etapas .passo.feito::after { background: var(--roxo-claro); }

.trilha-etapas .bolha {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie); border: 2px solid var(--borda-forte);
  font-size: 13px; font-weight: 600; color: var(--cinza); position: relative; z-index: 1;
}
.trilha-etapas .passo.feito .bolha { background: var(--roxo-forte); border-color: var(--roxo-forte); color: #fff; }
.trilha-etapas .passo.agora .bolha {
  background: var(--roxo-forte); border-color: var(--roxo-forte); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--roxo) 18%, transparent);
}
.trilha-etapas .passo.agora { color: var(--roxo-escuro); font-weight: 600; }
.trilha-etapas .passo.feito { color: var(--tinta); }

@media (max-width: 700px) {
  .trilha-etapas { grid-auto-flow: row; gap: 4px; }
  .trilha-etapas .passo { flex-direction: row; gap: 10px; text-align: left; padding: 6px; }
  .trilha-etapas .passo::after { display: none; }
}

.cartao-interno {
  padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px;
  margin-bottom: 12px; background: var(--fundo);
}
.foto-editor {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--borda); margin-bottom: 8px;
}

/* Assistir pelo Drive: a capa à esquerda e o botão ao lado. A capa tem largura
   fixa porque ela é 9:16 e ocupar a tela inteira com um retrato empurraria
   todo o resto da ficha para baixo da dobra. */
.assistir-no-drive {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 16px; border-radius: var(--raio-cartao); border: 1px solid var(--borda);
  background: var(--branco); margin-bottom: 16px;
}
.assistir-no-drive .capa-grande {
  width: 180px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #000;
}
.assistir-no-drive .btn-primario { display: inline-flex; width: auto; padding-inline: 22px; }
.assistir-no-drive p { margin: 10px 0 0; }

@media (max-width: 560px) {
  .assistir-no-drive { grid-template-columns: minmax(0, 1fr); }
  .assistir-no-drive .capa-grande { width: 120px; }
}

/* As estrelas da avaliação: as vazias ficam apagadas no lugar de sumirem, para
   "três estrelas" e "cinco estrelas" terem larguras iguais e serem comparáveis
   de relance numa lista. */
.avaliacao-do-trabalho { margin-top: 8px; }
.avaliacao-do-trabalho b { color: #D97706; color: light-dark(#D97706, #e68321); letter-spacing: 1px; }
.avaliacao-do-trabalho .apagada { color: var(--borda-forte); }
.chips.estrelas .av-opcao { letter-spacing: 1px; color: #D97706; color: light-dark(#D97706, #e68321); }

/* O bloqueio da conferência de conteúdo: vermelho contido, porque a pessoa
   pode não ter feito nada errado — o aviso informa, não acusa. */
.aviso-bloqueio { border-color: #F0C9C4; border-color: light-dark(#F0C9C4, #8a5d58); background: #FFF6F5; background: light-dark(#FFF6F5, #221b33); }
.aviso-bloqueio .cartao-titulo { color: #C0392F; color: light-dark(#C0392F, #fe8778); }
.aviso-bloqueio p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.ficha-video .largo { grid-column: 1 / -1; }

/* O material que veio com o pedido de edição: capa à esquerda, o resto ao
   lado. `minmax(0, 1fr)` na segunda coluna porque a legenda pode ser longa e
   sem isso ela empurra a capa para fora do cartão. */
.material-do-trabalho {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px;
  margin-top: 10px; padding: 11px 13px; border-radius: 10px; background: var(--fundo);
}
.material-do-trabalho:not(:has(.material-capa)) { grid-template-columns: minmax(0, 1fr); }
.material-capa {
  width: 96px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: #000;
}
.material-lista p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; }
.material-lista p:last-child { margin-bottom: 0; }
.material-lista b { color: var(--tinta); }

@media (max-width: 560px) {
  .material-do-trabalho { grid-template-columns: minmax(0, 1fr); }
  .material-capa { width: 72px; }
}

/* A tabela de clientes: usada na administração, no financeiro do editor e
   onde mais houver linha com nome, número e ação. */
.tabela-clientes { width: 100%; border-collapse: collapse; }
.tabela-clientes th {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cinza-fraco); text-align: left;
  padding: 12px 16px; border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.tabela-clientes td {
  font-size: 13px; padding: 12px 16px;
  border-bottom: 1px solid var(--borda); vertical-align: middle;
}
.tabela-clientes tr:last-child td { border-bottom: 0; }
.tabela-clientes .cliente { font-weight: 600; font-size: 13.5px; }
.tabela-clientes .perfil {
  display: flex; align-items: center; gap: 7px;
  color: var(--cinza); white-space: nowrap;
}
.tabela-clientes .perfil .ponto-perfil { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tabela-clientes .valor,
.tabela-clientes th.valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-clientes td.valor { font-weight: 600; }
.tabela-clientes .quando { color: var(--cinza); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-clientes td.estado { text-align: right; }
.tabela-clientes .cliente .sub { display: block; font-size: 11px; color: var(--cinza); font-weight: 400; }


/* ================= O seletor de arquivo =================

   O controle nativo é "Escolher arquivo / Nenhum arquivo escolhido" em cinza
   do sistema, e ele destoa de tudo. Não dá para estilizá-lo direto: o que se
   faz é escondê-lo e vestir o rótulo que o aciona.

   O <input> continua no HTML e continua sendo ele que abre o seletor — clicar
   no rótulo clica nele. Sem JavaScript, funciona igual. */
/* O input de arquivo fica escondido atrás do rótulo, mas continua no DOM para
   o teclado e o leitor de tela o acharem.

   A regra de campo do `.loja-config .linha-campo` é mais específica e mandava
   `width: 100%` também aqui. O input escondido ficava com a largura do bloco
   que o contém — e, como ele é `absolute` sem ancestral posicionado, esse
   bloco era a página inteira: 1839px de campo invisível, e uma barra de
   rolagem horizontal na tela de perfil. Lá `file` saiu da lista de campos.

   `.campo-arquivo` virou `relative` pelo mesmo motivo, de outro lado: um
   vazamento futuro fica preso ao cartão em vez de esticar a página. */
.campo-arquivo-input {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.campo-arquivo {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 22px 18px; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--borda-forte); border-radius: var(--raio-cartao);
  background: var(--fundo); color: var(--roxo-escuro);
  font-size: 13.5px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.campo-arquivo:hover { border-color: var(--roxo); background: var(--lavanda); }
.campo-arquivo.arquivo-selecionado { border-color: var(--roxo); background: var(--lavanda); }
.campo-arquivo svg { width: 20px; height: 20px; }
.campo-arquivo small { font-weight: 400; color: var(--cinza); font-size: 12px; }
/* O teclado precisa ver o foco: o input está escondido, então quem mostra é
   o rótulo. */
.campo-arquivo:focus-within { border-color: var(--roxo); background: var(--lavanda); }

/* A foto e o seletor lado a lado: a pessoa vê o que já está lá e o que trocar
   no mesmo olhar. No celular empilha, porque 96px de foto mais uma área
   tracejada não cabem em 380px sem espremer as duas. */
.linha-foto { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.linha-foto:has(.campo-arquivo-input:focus-visible) .campo-arquivo {
  border-color: var(--roxo); background: var(--lavanda);
}
.linha-foto .campo-arquivo { flex: 1; min-width: 220px; }
.foto-editor.sem-foto {
  display: grid; place-items: center; background: var(--lavanda); color: var(--roxo-escuro);
}
.foto-editor.sem-foto svg { width: 38px; height: 38px; }

.portfolio-card { display: flex; flex-direction: column; gap: 12px; }
.portfolio-capa,
.portfolio-sem-capa { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--lavanda); }
.portfolio-capa { object-fit: contain; }
.portfolio-sem-capa { display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--cinza); font-size: 12px; }


/* Os blocos do formulário do editor respiram entre si. O grid de duas colunas
   tem margem em cima e nenhuma embaixo, então o campo seguinte encostava no
   texto de ajuda do anterior — e rótulo colado no campo de cima parece
   pertencer a ele. */
/* `+ .linha-campo` e não `:first-of-type`: este último conta por TIPO DE TAG,
   e o bloco da foto é `div` enquanto o da apresentação é `label`. Cada um era
   o "primeiro do seu tipo", os dois perdiam a margem, e os dois encostavam no
   texto de ajuda de cima. */
.loja-config .cartao > * + .linha-campo { margin-top: 18px; }

/* O botão que fecha a etapa fica à direita, como no desenho, e não esticado.
   `display: flex` no `.btn-primario` o faz ocupar a linha inteira quando é
   filho direto de um grid — então ele ganha um lugar próprio. */
.loja-config .cartao > input[type="submit"].btn-primario,
.loja-config .cartao > .btn-primario {
  display: inline-flex; width: auto; margin-left: auto; margin-top: 20px;
}

/* ================================================================
   O celular mora no fim do arquivo.

   Não é organização: é a única posição em que estas regras ganham. Elas têm a
   mesma especificidade das regras de desktop que corrigem (`.secao` contra
   `.secao`), e entre iguais quem vence é a última. No meio do arquivo, a
   `.secao` de desktop vinha depois e devolvia os 32px de margem — o telefone
   ficava com 64 dos seus 390px gastos em espaço branco.
   ================================================================ */

/* ================= O painel no celular =================

   A lateral tem 248px fixos e senta ao lado do conteúdo. Num telefone de 390px
   isso deixava 140px para a tela inteira: todas as páginas rolavam de lado, e
   a coluna de conteúdo ficava mais estreita que o próprio menu.

   Abaixo de 900px ela sai do fluxo e vira gaveta. O corte é 900 e não 768
   porque o que aperta não é o telefone: é a soma de 248px de menu com a
   largura mínima que um cartão de conteúdo precisa para não quebrar as
   palavras no meio. Um tablet em pé já está do lado errado dessa conta.

   A gaveta abre com `transform`, e não com `left`: transform é a única
   propriedade que o navegador anima sem refazer o layout da página inteira a
   cada quadro — e num telefone isso é a diferença entre deslizar e engasgar. */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 60;
    width: min(82vw, 290px); height: 100dvh;
    /* No fluxo ela era transparente porque o fundo da página aparecia atrás.
       Solta por cima do conteúdo, precisa de fundo próprio — senão o menu fica
       legível sobre o que estiver embaixo dele. */
    background: var(--pagina);
    box-shadow: 0 0 40px rgba(46, 33, 92, .18);
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
  }
  .painel.menu-aberto .sidebar { transform: none; }

  .fundo-do-menu {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(30, 27, 46, .45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }

  /* O botão da gaveta alinha com a primeira linha do título, como o "Voltar" */
  .abrir-menu {
    display: grid; place-items: center; flex-shrink: 0;
    width: 38px; height: 38px; margin-top: 1px; padding: 0;
    border-radius: var(--raio-botao); border: 1px solid var(--borda-forte);
    background: var(--superficie); color: var(--tinta); cursor: pointer;
  }
  .abrir-menu svg { width: 19px; height: 19px; }
  .fechar-menu {
    display: grid; place-items: center; margin-left: auto;
    width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: var(--raio-botao);
    background: none; color: var(--cinza); cursor: pointer;
  }
  .fechar-menu svg { width: 18px; height: 18px; }

  /* Sem a lateral no fluxo, o conteúdo ocupa a tela — e ganha margens de
     telefone: 32px de cada lado comem 64 dos 390px disponíveis. */
  /* Uma faixa só: gaveta, título, sino. A regra de 820px mandava as ações
     ocuparem a largura inteira, e num telefone isso gastava três alturas de
     linha — botão, título, sino — para dizer o nome da tela. */
  .topo { padding: 18px var(--pagina-x) 14px; gap: 12px; align-items: center; }
  .topo-acoes { margin-left: auto; width: auto; flex-shrink: 0; }
  /* `flex: 1 1 0` e não `min-width: 0`: com `flex-wrap`, o item cuja largura
     natural não cabe pula de linha em vez de encolher. Zerando a base, ele
     passa a caber sempre — e é o título que cede espaço, não o layout. */
  .topo > div:not(.topo-acoes) { flex: 1 1 0; }
  .secao { padding: 0 var(--pagina-x) 24px; }
  .recado { margin: 0 18px 14px; }
}

/* Telefone de verdade. O que cabia em duas colunas passa a caber em uma, e o
   que era tabela passa a rolar dentro do próprio cartão — a página nunca. */
@media (max-width: 620px) {
  .grade-2, .grade-3, .grade-4, .grade-fixa { grid-template-columns: 1fr; }
  .grade { gap: 12px; }
  /* `1fr` é `minmax(auto, 1fr)`: a trilha não encolhe abaixo do conteúdo mais
     teimoso que houver dentro dela. Bastava um campo nativo ou uma palavra
     longa para a coluna passar da tela inteira e levar a página junto. Com
     `min-width: 0` a trilha cede, e quem tem conteúdo largo resolve por
     dentro — com rolagem própria, que é o que `.rolagem` já faz nas tabelas. */
  .grade > * { min-width: 0; }

  .topo { padding: 16px 14px 12px; align-items: flex-start; }
  /* Gaveta, título e tema cabem numa faixa só. Quando o topo tem mais que isso
     — o Voltar, o sino, o "Novo" da administração —, os botões ocupavam metade
     dos 360px e o título ficava numa coluna de uma palavra por linha, com o
     subtítulo escondido atrás do sino. Aí o título desce para uma linha só
     dele, inteira, e os botões ficam juntos na faixa de cima. */
  .topo:has(> .voltar, > .topo-acoes > :nth-child(3)) { row-gap: 12px; column-gap: 8px; }
  .topo-acoes { gap: 8px; }
  .topo:has(> .voltar, > .topo-acoes > :nth-child(3)) > div:not(.topo-acoes) { order: 1; flex: 1 0 100%; }
  .secao { padding: 0 14px 20px; }
  .recado { margin: 0 14px 12px; }
  .cartao { padding: 16px 14px; }

  /* A linha de um trabalho vira duas: o que ele é em cima, o que fazer com ele
     embaixo. Lado a lado, o botão espremia o título até sobrar uma palavra. */
  .linha-edicao { flex-direction: column; align-items: stretch; gap: 10px; }
  .pe-edicao { align-items: flex-start; }
  .acoes-ficha { width: 100%; }

  .rodape-lista { padding: 12px 0 0; }
  .vazio { padding: 24px 10px; }
}

/* Some da tela e continua para o leitor de tela: a legenda do fieldset diz o
   que a pergunta é, e o título visível da seção já diz o mesmo. */
.visualmente-escondido {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* A chave de ligar e desligar: um checkbox com cara de interruptor. Nasceu
   nos adicionais do /assinar e serve também no admin. */
.chave {
  appearance: none; width: 44px; height: 24px; border-radius: 999px; margin: 0; cursor: pointer; flex: none;
  background: #E4E1EE; background: light-dark(#E4E1EE, #2e2642); position: relative; transition: background .15s;
}
.chave::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; background: light-dark(#fff, #1b152c); box-shadow: 0 1px 3px rgb(30 27 46 / .25); transition: transform .15s;
}
.chave:checked { background: var(--roxo-escuro); }
.chave:checked::after { transform: translateX(20px); }
.chave:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* ---------- Compositor (montar a postagem automática) ---------- */
.form-compositor .cartao { margin-top: 16px; }
.form-compositor .compositor-acoes { gap: 10px; margin-top: 20px; }
.form-compositor .compositor-acoes :is(.btn-primario, .btn-secundario) {
  width: auto; min-height: 36px; padding: 6px 12px; font-size: 12px;
}
.opcao-video { cursor: pointer; align-items: flex-start; }
.opcao-video.travada { opacity: .55; cursor: not-allowed; }
.capa-mini { width: 54px; height: 96px; object-fit: cover; border-radius: 6px; background: var(--cinza-fraco); }
.legenda-previa { font-size: 13px; margin-top: 6px; white-space: pre-line; overflow-wrap: anywhere; }
.bloco-rede { border-top: 1px solid var(--borda); padding: 12px 0; }
.bloco-rede:first-of-type { border-top: 0; }
.ajustes-rede { margin: 8px 0 0 26px; display: grid; gap: 8px; }
.interruptores { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.opcao-modo.travada { opacity: .55; cursor: not-allowed; }

@media (max-width: 620px) {
  /* No compositor, a miniatura e o texto ainda cabem lado a lado. A regra
     genérica de filas empilhava rádio, capa e título em três andares. */
  .form-compositor .opcao-video {
    display: grid; grid-template-columns: 20px 54px minmax(0, 1fr);
    align-items: start; gap: 10px; padding: 12px;
  }
  .form-compositor .opcao-video .min-zero { min-width: 0; }
  .form-compositor .opcao-video .cartao-sub { overflow-wrap: anywhere; }
  .form-compositor .compositor-acoes {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 12px; width: 100%; margin-top: 0; padding-top: 20px;
  }
  .form-compositor .compositor-acoes :is(.btn-primario, .btn-secundario) {
    width: 100%; min-height: 44px; justify-content: center; text-align: center;
  }
}

/* ---------- Avaliação: os números de uma rede, quando a leitura não abriu ---------- */
.av-numero { display: grid; gap: 6px; margin-top: 16px; }
.av-numero > span { font-weight: 600; font-size: 14px; }
.av-numero input {
  width: 100%; max-width: 260px; font: inherit; font-size: 15px; color: var(--tinta);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 12px 14px; background: var(--fundo);
}
.av-numero input:focus { outline: none; border-color: var(--roxo); background: var(--superficie); }
.av-numero .av-dica { margin: 0; }
.av-informado { margin-top: 8px; }
/* Guard rails do design system. Ficam no fim para impedir que estilos antigos
   voltem a criar texto ilegivel ou controles pequenos em telas internas. */
.secao small { font-size: 11px; line-height: 1.45; }
.secao :where(.situacao, .marcador, .contador, .tile-nota) { font-size: 11px; }
.secao :where(.btn-primario, .btn-secundario, button:not(.link-discreto), input[type="submit"]) { min-height: 40px; }
.secao :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { font-size: 13px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Kameo Assistente ---------- */
.kameo-assistente { position: relative; z-index: 80; }
/* O fim de toda página fica livre do botão flutuante do Kameo (64px + 24px). */
body.painel:has(.kameo-launcher) .principal { padding-bottom: 88px; }
.kameo-launcher {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--roxo) 24%, #fff); border: 1px solid color-mix(in srgb, var(--roxo) 24%, light-dark(#fff, #42306b));
  border-radius: 50%;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 14px 34px rgb(75 54 124 / .18), 0 0 0 6px rgb(237 233 254 / .72);
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kameo-launcher:hover {
  transform: translateY(-1px) scale(1.03) rotate(-1deg);
  border-color: color-mix(in srgb, var(--roxo) 42%, #fff); border-color: color-mix(in srgb, var(--roxo) 42%, light-dark(#fff, #42306b));
  box-shadow: 0 18px 42px rgb(75 54 124 / .22), 0 0 0 7px rgb(237 233 254 / .82);
}
.kameo-launcher:focus-visible,
.kameo-fechar:focus-visible,
.kameo-acoes-lista button:focus-visible,
.kameo-chat button:focus-visible,
.kameo-chat input:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.kameo-launcher-avatar {
  width: 88px;
  height: 88px;
  object-fit: cover;
  object-position: 50% 22%;
  transform: translateY(11px) scale(1.08);
}
.kameo-launcher-indicador {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff; border: 2px solid light-dark(#fff, #42306b);
  border-radius: 50%;
  background: var(--roxo);
  opacity: .95;
}
.kameo-overlay {
  position: fixed;
  inset: 0;
  z-index: 88;
  border: 0;
  background: rgb(30 27 46 / .16);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.kameo-painel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 89;
  width: min(420px, calc(100vw - 24px));
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--tinta);
  background: linear-gradient(180deg, #fff 0%, #fbfaff 100%); background: linear-gradient(180deg, light-dark(#fff, #1b152c) 0%, light-dark(#fbfaff, #130c22) 100%);
  border-left: 1px solid var(--borda-forte);
  box-shadow: -18px 0 44px rgb(44 31 84 / .14);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.kameo-aberto .kameo-overlay { opacity: 1; pointer-events: auto; }
.kameo-aberto .kameo-painel { transform: translateX(0); }
.kameo-cabecalho {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--borda);
  background: rgb(255 255 255 / .88); background: light-dark(rgb(255 255 255 / .88), #1b152ce0);
  backdrop-filter: blur(10px);
}
.kameo-cabecalho-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--lavanda);
  border: 1px solid #fff; border: 1px solid light-dark(#fff, #42306b);
  box-shadow: 0 8px 20px rgb(75 54 124 / .14);
}
.kameo-cabecalho-avatar img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  object-position: 50% 20%;
  transform: translate(-10px, 8px);
}
.kameo-cabecalho h2 { margin: 1px 0 0; font-size: 18px; line-height: 1.25; letter-spacing: 0; }
.kameo-cabecalho span,
.kameo-contexto p,
.kameo-mensagem p { color: var(--cinza); font-size: 12.5px; line-height: 1.55; }
.kameo-etiqueta {
  margin: 0;
  color: var(--roxo-escuro);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.kameo-fechar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--cinza);
  background: #fff; background: light-dark(#fff, #1b152c);
  cursor: pointer;
}
.kameo-fechar:hover { color: var(--tinta); background: var(--superficie-secundaria); }
.kameo-corpo {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 18px;
}
.kameo-contexto {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: var(--sombra-painel);
}
.kameo-avatar-grande {
  width: 78px;
  height: 86px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--lavanda);
}
.kameo-avatar-grande img {
  width: 126px;
  height: 126px;
  object-fit: cover;
  object-position: 50% 18%;
  transform: translate(-24px, 10px);
}
.kameo-contexto h3,
.kameo-acoes h3 {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
}
.kameo-contexto p { margin: 0; }
.kameo-acoes-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.kameo-acoes-lista button {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--roxo) 18%, var(--borda));
  border-radius: 999px;
  color: var(--roxo-escuro);
  background: color-mix(in srgb, var(--lavanda) 54%, #fff); background: color-mix(in srgb, var(--lavanda) 54%, light-dark(#fff, #1b152c));
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.kameo-acoes-lista button:hover { background: var(--lavanda); border-color: color-mix(in srgb, var(--roxo) 36%, var(--borda)); }
.kameo-mensagens-lista { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.kameo-mensagem {
  max-width: 88%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 6px 18px rgb(68 48 105 / .045);
}
.kameo-mensagem-user {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--roxo) 20%, var(--borda));
  background: var(--lavanda);
}
.kameo-mensagem span { display: block; margin-bottom: 3px; color: var(--tinta); font-size: 11px; font-weight: 700; }
.kameo-mensagem p { margin: 0; }
.kameo-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda);
  background: #fff; background: light-dark(#fff, #1b152c);
}
.kameo-chat input {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  color: var(--tinta);
  background: var(--superficie-secundaria);
  font: inherit;
  font-size: 13px;
}
.kameo-chat button {
  width: 38px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--grad-primario);
  cursor: pointer;
}

@media (max-width: 820px) {
  .secao :where(.btn-primario, .btn-secundario, button:not(.link-discreto), input[type="submit"]) { min-height: 44px; }
  .tabela-clientes { display: block; overflow-x: auto; scrollbar-gutter: stable; }
  .kameo-launcher {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
  }
  .kameo-painel { width: min(100vw, 440px); border-left: 0; }
  .kameo-cabecalho { padding: 15px; grid-template-columns: 44px minmax(0, 1fr) 36px; }
  .kameo-corpo { padding: 15px; }
  .kameo-contexto { grid-template-columns: 62px minmax(0, 1fr); padding: 12px; }
  .kameo-avatar-grande { width: 62px; height: 72px; }
  .kameo-avatar-grande img { width: 106px; height: 106px; transform: translate(-22px, 9px); }
}

@media (prefers-reduced-motion: reduce) {
  .kameo-launcher,
  .kameo-overlay,
  .kameo-painel { transition: none; }
  .kameo-launcher:hover { transform: none; }
}

/* ---------- Kameo Assistente: experiência imersiva ---------- */
.kameo-assistente {
  --kameo-violeta: #7c3aed; --kameo-violeta: light-dark(#7c3aed, #b39dff);
  --kameo-violeta-profundo: #4c1d95; --kameo-violeta-profundo: light-dark(#4c1d95, #ccc0ff);
  --kameo-lavanda: #f5f1ff; --kameo-lavanda: light-dark(#f5f1ff, #29203b);
  --kameo-lavanda-forte: #ebe3ff; --kameo-lavanda-forte: light-dark(#ebe3ff, #2e2244);
  --kameo-linha: rgb(108 79 163 / .16); --kameo-linha: rgb(108 79 163 / .16);
  --kameo-sombra: -24px 24px 70px rgb(48 31 88 / .22);
}
.kameo-launcher {
  isolation: isolate;
  width: 68px;
  height: 68px;
  border: 1px solid rgb(139 92 246 / .28);
  background: radial-gradient(circle at 48% 38%, #fff 0 38%, #f2edff 72%, #e3d8ff 100%); background: radial-gradient(circle at 48% 38%, light-dark(#fff, #1b152c) 0 38%, light-dark(#f2edff, #2a213c) 72%, light-dark(#e3d8ff, #332152) 100%);
  box-shadow:
    0 18px 40px rgb(75 45 129 / .23),
    0 0 0 7px rgb(237 233 254 / .72),
    0 0 28px rgb(168 85 247 / .22);
  animation: kameo-respirar 3.4s ease-in-out infinite;
}
.kameo-launcher::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(145deg, rgb(255 255 255 / .78), rgb(237 233 254 / .38)); background: linear-gradient(145deg, light-dark(rgb(255 255 255 / .78), #1b152cc7), light-dark(rgb(237 233 254 / .38), #2a233e61));
}
.kameo-launcher:hover {
  transform: translateY(-3px) scale(1.035);
  box-shadow:
    0 22px 46px rgb(75 45 129 / .27),
    0 0 0 8px rgb(237 233 254 / .8),
    0 0 36px rgb(168 85 247 / .26);
}
.kameo-launcher-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  filter: saturate(1.05) contrast(1.02);
}
.kameo-launcher-logo { display: none; }
.kameo-launcher-indicador {
  top: 7px;
  right: 7px;
  width: 11px;
  height: 11px;
  border-width: 3px;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgb(34 197 94 / .15);
}
.kameo-aberto .kameo-launcher {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.86);
}
.kameo-overlay {
  background: rgb(31 24 49 / .24);
  backdrop-filter: blur(2px);
  transition: opacity .3s ease, backdrop-filter .3s ease;
}
.kameo-painel {
  box-sizing: border-box;
  inset: 12px 12px 12px auto;
  width: min(440px, calc(100vw - 40px));
  height: auto;
  max-height: calc(100dvh - 24px);
  overflow: visible;
  border: 1px solid rgb(255 255 255 / .82); border: 1px solid light-dark(rgb(255 255 255 / .82), #42306bd1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgb(255 255 255 / .92) 0%, rgb(249 247 255 / .98) 42%, #f6f2ff 100%); background: linear-gradient(180deg, light-dark(rgb(255 255 255 / .92), #1b152ceb) 0%, light-dark(rgb(249 247 255 / .98), #221b33fa) 42%, light-dark(#f6f2ff, #291f3a) 100%);
  box-shadow:
    var(--kameo-sombra),
    0 0 0 1px rgb(124 58 237 / .08),
    0 0 54px rgb(167 139 250 / .24);
  transform: translateX(calc(100% + 230px));
  transition: transform .42s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.kameo-painel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 4%, rgb(216 180 254 / .24), transparent 31%),
    radial-gradient(circle at 90% 44%, rgb(196 181 253 / .18), transparent 28%); background: radial-gradient(circle at 12% 4%, light-dark(rgb(216 180 254 / .24), #452a5d3d), transparent 31%),
    radial-gradient(circle at 90% 44%, light-dark(rgb(196 181 253 / .18), #3e30652e), transparent 28%);
  pointer-events: none;
}
.kameo-aberto .kameo-painel { transform: translateX(0); }
.kameo-avatar-espiando {
  position: absolute;
  top: 105px;
  left: -170px;
  z-index: 1;
  width: 188px;
  height: 264px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(52px, 18px) rotate(2deg) scale(.94);
  transform-origin: right center;
  transition: opacity .22s ease .12s, transform .48s cubic-bezier(.22, 1, .36, 1) .08s;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
}
.kameo-avatar-espiando::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 47px;
  width: 42px;
  height: 154px;
  border-radius: 50%;
  background: rgb(124 58 237 / .22);
  filter: blur(22px);
  z-index: -1;
}
.kameo-avatar-espiando > span {
  position: absolute;
  right: -12px;
  top: 28px;
  width: 92px;
  height: 210px;
  border-radius: 50%;
  background: rgb(167 139 250 / .28);
  filter: blur(30px);
}
.kameo-avatar-espiando img {
  position: absolute;
  top: 0;
  left: -43px;
  width: 258px;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 18px 18px rgb(48 24 89 / .2)) saturate(1.04);
}
.kameo-aberto .kameo-avatar-espiando {
  opacity: 1;
  transform: translate(0, 0) rotate(0) scale(1);
}
.kameo-cabecalho {
  position: relative;
  z-index: 4;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 78px;
  gap: 11px;
  padding: 14px 15px 14px 17px;
  border-bottom-color: var(--kameo-linha);
  border-radius: 24px 24px 0 0;
  background: rgb(255 255 255 / .72); background: light-dark(rgb(255 255 255 / .72), #1b152cb8);
  backdrop-filter: blur(18px);
}
.kameo-cabecalho-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  border: 2px solid #fff; border: 2px solid light-dark(#fff, #42306b);
  background: linear-gradient(145deg, #f7f2ff, #e5dbff); background: linear-gradient(145deg, light-dark(#f7f2ff, #2a1f39), light-dark(#e5dbff, #32224e));
  box-shadow: 0 8px 22px rgb(93 63 145 / .18);
}
.kameo-cabecalho-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}
.kameo-cabecalho-avatar span {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff; border: 2px solid light-dark(#fff, #42306b);
  border-radius: 50%;
  background: #22c55e;
}
.kameo-identidade { min-width: 0; }
.kameo-nome-status {
  display: flex;
  align-items: center;
  gap: 9px;
}
.kameo-cabecalho h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 760;
}
.kameo-identidade > p {
  margin: 3px 0 0;
  color: var(--cinza);
  font-size: 11.5px;
}
.kameo-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid rgb(34 197 94 / .16);
  border-radius: 999px;
  color: #166534; color: light-dark(#166534, #89d39b);
  background: rgb(240 253 244 / .86); background: light-dark(rgb(240 253 244 / .86), #0b2b19db);
  font-size: 11px;
  font-weight: 700;
}
.kameo-status i,
.kameo-secao-titulo-conversa i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}
.kameo-controles { display: flex; gap: 4px; }
.kameo-controle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #756e86; color: light-dark(#756e86, #b0a9c3);
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.kameo-controle:hover {
  color: var(--tinta);
  border-color: var(--kameo-linha);
  background: rgb(255 255 255 / .82); background: light-dark(rgb(255 255 255 / .82), #1b152cd1);
  transform: translateY(-1px);
}
.kameo-controle:focus-visible,
.kameo-acoes-destaque button:focus-visible,
.kameo-chips button:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.kameo-corpo {
  position: relative;
  z-index: 2;
  gap: 20px;
  padding: 20px 20px 24px;
  scrollbar-color: rgb(139 92 246 / .26) transparent;
}
/* O corpo é uma coluna rolável. Seus cartões não podem encolher para tentar
   caber todos na viewport: isso cortava a descrição e a arte no celular. */
.kameo-corpo > * { flex-shrink: 0; }
.kameo-corpo::-webkit-scrollbar { width: 6px; }
.kameo-corpo::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgb(139 92 246 / .23);
}
.kameo-boas-vindas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  padding: 2px 2px 0;
}
.kameo-boas-vindas-icone {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--kameo-violeta);
  background: var(--kameo-lavanda-forte);
  box-shadow: inset 0 0 0 1px rgb(124 58 237 / .08);
}
.kameo-boas-vindas h3 {
  margin: 0 0 5px;
  color: var(--tinta);
  font-size: 18px;
  line-height: 1.25;
}
.kameo-boas-vindas p {
  margin: 0;
  color: #4e485e; color: light-dark(#4e485e, #c6bfda);
  font-size: 12.5px;
  line-height: 1.5;
}
.kameo-boas-vindas small {
  display: block;
  margin-top: 4px;
  color: var(--cinza);
  font-size: 11.5px;
  line-height: 1.5;
}
.kameo-contexto {
  position: relative;
  display: block;
  padding: 16px 17px 17px;
  overflow: hidden;
  border: 1px solid rgb(124 58 237 / .14);
  border-radius: 16px;
  background: linear-gradient(110deg, rgb(255 255 255 / .88), rgb(245 240 255 / .24)); background: linear-gradient(110deg, light-dark(rgb(255 255 255 / .88), #1b152ce0), light-dark(rgb(245 240 255 / .24), #2a203a3d));
  box-shadow:
    0 12px 30px rgb(75 45 129 / .08),
    inset 0 1px 0 rgb(255 255 255 / .9);
}
.kameo-contexto-logo {
  position: absolute;
  right: 16px;
  top: 43px;
  bottom: 16px;
  width: 90px;
  height: calc(100% - 59px);
  object-fit: contain;
  object-position: center;
  opacity: .9;
  pointer-events: none;
  user-select: none;
}
.kameo-contexto-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.kameo-contexto-topo span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--kameo-violeta);
  font-size: 11px;
  font-weight: 720;
  text-transform: uppercase;
}
.kameo-contexto-topo i {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c4b5fd, #f0abfc); background: linear-gradient(90deg, light-dark(#c4b5fd, #3e3065), light-dark(#f0abfc, #4d2654));
}
.kameo-contexto h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  color: var(--kameo-violeta-profundo);
  font-size: 16px;
}
.kameo-contexto p {
  position: relative;
  z-index: 1;
  max-width: 95%;
  margin: 0;
  color: #625a72; color: light-dark(#625a72, #bcb4cf);
  font-size: 12px;
  line-height: 1.58;
}
.kameo-secao-titulo {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.kameo-secao-titulo h3 {
  margin: 0;
  color: #312b3f; color: light-dark(#312b3f, #d9d2ec);
  font-size: 13px;
}
.kameo-secao-titulo > span {
  color: var(--cinza);
  font-size: 11px;
  white-space: nowrap;
}
.kameo-acoes-destaque {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.kameo-acoes-destaque button {
  position: relative;
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--kameo-linha);
  border-radius: 14px;
  color: var(--tinta);
  background: rgb(255 255 255 / .78); background: light-dark(rgb(255 255 255 / .78), #1b152cc7);
  box-shadow: 0 7px 20px rgb(68 48 105 / .05);
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.kameo-acoes-destaque button:hover {
  transform: translateY(-2px);
  border-color: rgb(124 58 237 / .28);
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 12px 26px rgb(74 46 121 / .1);
}
.kameo-acao-icone {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 9px;
  color: var(--kameo-violeta);
  background: var(--kameo-lavanda);
}
.kameo-acoes-destaque strong {
  display: block;
  padding-right: 15px;
  font-size: 11.5px;
  line-height: 1.25;
}
.kameo-acoes-destaque small {
  display: block;
  margin-top: 3px;
  color: var(--cinza);
  font-size: 11px;
  line-height: 1.3;
}
.kameo-acao-seta {
  position: absolute;
  right: 10px;
  bottom: 11px;
  color: var(--cinza);
}
.kameo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.kameo-chips button {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid rgb(124 58 237 / .13);
  border-radius: 999px;
  color: #655379; color: light-dark(#655379, #c4b0db);
  background: rgb(248 245 255 / .88); background: light-dark(rgb(248 245 255 / .88), #231c34e0);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.kameo-chips button:hover {
  color: var(--kameo-violeta-profundo);
  border-color: rgb(124 58 237 / .26);
  background: #eee7ff; background: light-dark(#eee7ff, #2c223f);
}
.kameo-secao-titulo-conversa > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kameo-mensagens-lista { gap: 11px; padding: 0 1px 2px; }
.kameo-mensagem {
  position: relative;
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 4px 14px 14px 14px;
  background: rgb(255 255 255 / .9); background: light-dark(rgb(255 255 255 / .9), #1b152ce6);
  box-shadow: 0 8px 20px rgb(68 48 105 / .06);
}
.kameo-mensagem-user {
  border-color: rgb(124 58 237 / .14);
  border-radius: 14px 4px 14px 14px;
  background: linear-gradient(135deg, #eee8ff, #f6f2ff); background: linear-gradient(135deg, light-dark(#eee8ff, #2b233e), light-dark(#f6f2ff, #291f3a));
}
.kameo-mensagem span {
  margin-bottom: 4px;
  color: var(--kameo-violeta-profundo);
  font-size: 11px;
  text-transform: uppercase;
}
.kameo-mensagem p {
  color: #5f586d; color: light-dark(#5f586d, #bdb6ce);
  font-size: 11.5px;
  line-height: 1.5;
}
.kameo-chat {
  position: relative;
  z-index: 4;
  display: block;
  padding: 12px 16px max(13px, env(safe-area-inset-bottom));
  border-top-color: var(--kameo-linha);
  border-radius: 0 0 24px 24px;
  background: rgb(255 255 255 / .8); background: light-dark(rgb(255 255 255 / .8), #1b152ccc);
  backdrop-filter: blur(18px);
}
.kameo-chat-campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 7px;
  padding: 4px 4px 4px 12px;
  border: 1px solid rgb(108 79 163 / .2);
  border-radius: 14px;
  background: #fff; background: light-dark(#fff, #1b152c);
  box-shadow: 0 8px 24px rgb(68 48 105 / .07);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kameo-chat-campo:focus-within {
  border-color: rgb(124 58 237 / .42);
  box-shadow: 0 0 0 3px rgb(139 92 246 / .1), 0 8px 24px rgb(68 48 105 / .07);
}
.kameo-chat input {
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}
.kameo-chat input:focus { outline: none; box-shadow: none; }
.kameo-chat button {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(145deg, #8b5cf6, #6d28d9);
  box-shadow: 0 6px 15px rgb(109 40 217 / .23);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kameo-chat button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgb(109 40 217 / .3);
}
.kameo-chat > small {
  display: block;
  margin-top: 6px;
  color: var(--cinza);
  font-size: 11px;
  text-align: center;
}

@keyframes kameo-respirar {
  0%, 100% { box-shadow: 0 18px 40px rgb(75 45 129 / .23), 0 0 0 7px rgb(237 233 254 / .72), 0 0 24px rgb(168 85 247 / .18); }
  50% { box-shadow: 0 20px 44px rgb(75 45 129 / .25), 0 0 0 9px rgb(237 233 254 / .52), 0 0 34px rgb(168 85 247 / .26); }
}

@media (max-width: 720px) {
  .kameo-painel {
    inset: 8px;
    width: auto;
    max-height: calc(100dvh - 16px);
    border-radius: 20px;
  }
  .kameo-cabecalho,
  .kameo-chat { border-radius: 20px 20px 0 0; }
  .kameo-chat { border-radius: 0 0 20px 20px; }
  .kameo-avatar-espiando {
    top: 94px;
    left: -24px;
    width: 88px;
    height: 116px;
    opacity: 0;
  }
  .kameo-avatar-espiando img {
    top: 0;
    left: -13px;
    width: 148px;
  }
  .kameo-boas-vindas { padding-left: 55px; }
  .kameo-corpo { padding: 17px 16px 21px; }
  /* A terceira linha da saudação disputava espaço com o cartão seguinte e,
     por ser vista através do vidro, parecia texto duplicado. No telefone a
     frase principal já explica o papel do assistente. */
  .kameo-boas-vindas small { display: none; }
  .kameo-contexto {
    background: #fff;
    background: light-dark(#fff, #1b152c);
  }
}

@media (max-width: 390px) {
  .kameo-cabecalho { grid-template-columns: 42px minmax(0, 1fr) auto; padding-inline: 12px; }
  .kameo-status { display: none; }
  .kameo-controles { gap: 1px; }
  .kameo-corpo { padding-inline: 13px; }
  .kameo-acoes-destaque { grid-template-columns: 1fr; }
  .kameo-acoes-destaque button {
    min-height: 74px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
  }
  .kameo-acao-icone { margin: 0; }
  .kameo-acao-seta { position: static; }
}

/* No celular estreito, o Kameo espiando vira um retrato compacto. O recorte
   alto usado no desktop invadia a saudação e ainda era cortado pela viewport. */
@media (min-width: 320px) and (max-width: 425px) {
  .kameo-launcher-mascote { display: none; }
  .kameo-launcher-logo { display: block; object-fit: contain; padding: 3px; }
  .kameo-avatar-espiando { display: none; }
  .kameo-boas-vindas { min-height: 0; padding-left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .kameo-launcher { animation: none; }
  .kameo-avatar-espiando,
  .kameo-controle,
  .kameo-acoes-destaque button,
  .kameo-chips button,
  .kameo-chat button { transition: none; }
}

/* ---------- Visão geral: o que vence primeiro + Seu progresso ----------
   Vale para os três perfis. Roxo é navegação; laranja só aparece em urgência
   (prazo vencido ou que vence hoje). Card informativo é branco; card de ação
   (a dica) tem fundo lilás. */
.visao-link-acao {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--roxo-escuro);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.visao-link-acao svg { width: 13px; height: 13px; transition: transform .15s ease; }
/* Dentro do título de um cartão, o link vai para a direita, como o "Ver todos". */
.visao-estagio > .cartao-titulo, .visao-quadro > .cartao-titulo { display: flex; align-items: center; gap: 8px; }
.cartao-titulo > .visao-link-acao { margin-left: auto; }
.visao-link-acao:hover { text-decoration: underline; }
.visao-link-acao:hover svg,
a:hover > * > .visao-link-acao svg { transform: translateX(2px); }

.visao-prazos { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.visao-prazos-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.visao-prazos-cabecalho h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--tinta);
  font-size: 15px;
  font-weight: 600;
}
.visao-prazos-cabecalho h2 svg { width: 17px; height: 17px; color: var(--cinza); }

/* Vazio: a borda pontilhada fica só nesta caixa interna, não no card. */
.visao-prazos-vazio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-block: auto;
  padding: 18px 20px;
  border: 1px dashed var(--borda-forte);
  border-radius: 12px;
  background: #fcfbff; background: light-dark(#fcfbff, #140e24);
}
.visao-prazos-vazio-icone {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--roxo-escuro);
  background: rgb(139 92 246 / .1);
}
.visao-prazos-vazio-icone svg { width: 21px; height: 21px; }
.visao-prazos-vazio-texto { min-width: 0; }
.visao-prazos-vazio-texto b { display: block; color: var(--tinta); font-size: 13.5px; font-weight: 600; }
.visao-prazos-vazio-texto p { margin: 2px 0 0; color: var(--cinza); font-size: 12px; line-height: 1.4; }
.visao-prazos-vazio-cta { min-height: 32px; padding: 6px 13px; font-size: 12px; }

/* Com itens: "Hoje → Campanha X", com tipo e status. */
.visao-prazos-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.visao-prazos-lista li {
  display: grid;
  grid-template-columns: 96px 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: #fff; background: light-dark(#fff, #1b152c);
}
.visao-prazo-quando { color: var(--roxo-escuro); font-size: 12px; font-weight: 600; white-space: nowrap; }
.visao-prazo-seta { color: var(--cinza-fraco); font-size: 12px; }
.visao-prazo-oque a {
  display: block;
  overflow: hidden;
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visao-prazo-oque a:hover { color: var(--roxo-escuro); text-decoration: underline; }
.visao-prazo-oque small { display: block; margin-top: 1px; color: var(--cinza); font-size: 11px; }
.visao-prazo-estado {
  padding: 3px 9px;
  border-radius: 99px;
  color: #6d5bb0; color: light-dark(#6d5bb0, #b2a2fe);
  background: #f3effe; background: light-dark(#f3effe, #2a213c);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.visao-prazos-lista li.urgente { border-color: #fcd9a8; border-color: light-dark(#fcd9a8, #7a5c2e); background: #fffaf2; background: light-dark(#fffaf2, #120c22); }
.visao-prazos-lista li.urgente .visao-prazo-quando { color: #c2410c; color: light-dark(#c2410c, #ff8760); }

.visao-grafico-resumo { display: flex; flex-direction: column; gap: 14px; margin: 0; min-width: 0; }
.visao-grafico-barras {
  min-height: 146px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding-top: 6px;
}
.visao-grafico-barra {
  min-width: 0;
  height: 142px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 5px;
  color: var(--cinza);
  text-align: center;
}
.visao-grafico-barra i {
  width: 100%;
  height: var(--valor);
  min-height: 9px;
  display: block;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 72%, white), var(--cor)); background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 72%, light-dark(white, #1b152c)), var(--cor));
}
.visao-grafico-barra b {
  overflow: hidden;
  color: var(--tinta);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visao-grafico-barra small {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Seu progresso: plano (informativo) em cima, dica (ação) embaixo. */
.visao-plano { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.visao-coluna-titulo {
  margin: 0;
  color: var(--cinza);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.visao-plano > .cartao { margin: 0; }
.visao-plano-cartao { display: grid; gap: 7px; padding: 12px 14px; }
.visao-plano-topo { display: flex; align-items: center; gap: 10px; }
.visao-plano-topo b { color: var(--tinta); font-size: 13px; font-weight: 600; }
.visao-plano-icone {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #2563eb; color: light-dark(#2563eb, #84adfe);
  background: #eaf2ff; background: light-dark(#eaf2ff, #18263f);
}
.visao-plano-icone svg { width: 15px; height: 15px; }
.visao-plano-uso { color: var(--cinza); font-size: 11.5px; }
.visao-plano-uso b { color: var(--tinta); font-weight: 600; }
.visao-plano-trilho { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: #eeebf6; background: light-dark(#eeebf6, #2b223d); }
.visao-plano-trilho i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--roxo), var(--roxo-claro)); }
.visao-plano-trilho.estourou i { background: #c0392f; }
.visao-plano-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--cinza); font-size: 11px; }
.visao-plano-alerta { color: #c0392f; color: light-dark(#c0392f, #fe8778); font-weight: 600; }

.visao-dica {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border-color: #e4d9fd; border-color: light-dark(#e4d9fd, #665a7f);
  color: inherit;
  background: #f6f1ff; background: light-dark(#f6f1ff, #2a1f3a);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.visao-dica:hover { border-color: #cdb8fb; border-color: light-dark(#cdb8fb, #7c68a5); background: #f1e9ff; background: light-dark(#f1e9ff, #2d223c); }
.visao-dica-icone {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--roxo-escuro);
  background: #fff; background: light-dark(#fff, #1b152c);
}
.visao-dica-icone svg { width: 16px; height: 16px; }
.visao-dica-texto { display: grid; gap: 3px; min-width: 0; }
.visao-dica-texto b { color: var(--roxo-escuro); font-size: 12.5px; font-weight: 600; }
.visao-dica-texto small { color: #5f5a76; color: light-dark(#5f5a76, #b9b4d4); font-size: 11.5px; line-height: 1.4; }
.visao-dica-texto .visao-link-acao { margin-top: 2px; }

@media (max-width: 560px) {
  .visao-prazos-vazio { flex-direction: column; text-align: center; }
  .visao-prazos-lista li { grid-template-columns: minmax(0, 1fr) auto; }
  .visao-prazo-quando { grid-column: 1 / -1; }
  .visao-prazo-seta { display: none; }
  .visao-grafico-barras { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 180px; }
  .visao-grafico-barra { height: 82px; }
}

/* =================================================================
   Pontos, níveis e prêmios
   ================================================================= */
.selo-premio {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--cor-selo, var(--cinza)); background: color-mix(in srgb, var(--cor-selo, var(--cinza)) 12%, transparent);
}
.estado-liberado, .estado-entregue, .estado-pode_pedir { --cor-selo: #006300; --cor-selo: light-dark(#006300, #86d97f); }
.estado-estornado, .estado-estorno, .estado-recusado, .estado-prazo_vencido { --cor-selo: #B42318; --cor-selo: light-dark(#B42318, #fe9585); }
.estado-ajuste, .estado-em_separacao, .estado-enviado { --cor-selo: #7C3AED; --cor-selo: light-dark(#7C3AED, #b39dff); }
.estado-solicitado, .estado-aguardando_estoque, .estado-esperando_tempo, .estado-congelado, .estado-pausado { --cor-selo: #B45309; --cor-selo: light-dark(#B45309, #f68f53); }
.historico-de-pontos td.num { text-align: right; white-space: nowrap; }
.aviso-do-ranking { margin: 14px 0 22px; border-left: 3px solid var(--roxo); border-radius: 0 10px 10px 0; padding: 14px 18px; background: var(--fundo); font-size: 13px; line-height: 1.6; }
/* Os formulários dos prêmios (pedir, ajustar, avançar, regras). */
.form-premio {
  display: grid; gap: 12px; margin-top: 14px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.form-premio .linha-campo { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--cinza); }
.form-premio input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]),
.form-premio select {
  font: inherit; font-size: 13.5px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao); padding: 9px 12px; width: 100%;
}
.form-premio .aceite { grid-column: 1 / -1; margin: 6px 0 0; }
.form-premio [type="submit"], .form-premio > div:last-child { grid-column: 1 / -1; justify-self: start; }
/* Pedido de produto: o rádio não é campo de texto (não pode esticar a 100%),
   e tipo de pedido, títulos, observação e botões ocupam a linha inteira. */
.form-premio input[type="radio"] { width: 16px; height: 16px; padding: 0; accent-color: var(--roxo); flex-shrink: 0; }
.form-pedido > fieldset { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.form-pedido > fieldset legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 500; color: var(--cinza); }
.form-pedido .aceite { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.form-pedido .aceite span { min-width: 0; overflow-wrap: anywhere; }
.form-pedido > .cartao-titulo, .form-pedido > .cartao-sub { grid-column: 1 / -1; margin: 0; }
.form-pedido .linha-campo { min-width: 0; }
.form-pedido textarea {
  font: inherit; font-size: 13.5px; color: var(--tinta); background: var(--superficie); width: 100%; box-sizing: border-box;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao); padding: 9px 12px; resize: vertical;
}
.form-pedido > :is(.btn-primario, .btn-secundario) { justify-self: start; text-align: center; }
@media (max-width: 600px) {
  .form-pedido { grid-template-columns: 1fr; }
  .form-pedido > :is(.btn-primario, .btn-secundario) { justify-self: stretch; }
}
.ranking-etapa.congelado { border-style: dashed; }
.ranking-etapa .selo-premio { align-self: flex-start; margin-top: 8px; }
.ranking-etapa .btn-primario { margin-top: 8px; text-align: center; }

/* O que está ligado a um cartão do planejamento (Planejamento). */
.card-ligados { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.card-ligado {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px;
  font-size: 11px; color: var(--cinza); background: var(--fundo); border: 1px solid var(--borda); text-decoration: none;
}
.card-ligado:hover { color: var(--roxo-escuro); border-color: var(--roxo); }
.card-ligado svg { width: 11px; height: 11px; }

img.plataforma-icone-imagem { display: inline-block; object-fit: contain; flex: 0 0 auto; border-radius: 0; background: transparent; vertical-align: middle; }
.plataforma-icone > img.plataforma-icone-imagem { width: 20px; height: 20px; }
.somente-leitor { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Espaço entre os controles de busca e as artes das páginas. */
:is(.perfil-influencer, .perfil-lojista).secao-roteiro .topo,
:is(.perfil-influencer, .perfil-lojista).secao-ranking .topo,
:is(.perfil-influencer, .perfil-lojista).secao-calendario .topo,
:is(.perfil-influencer, .perfil-lojista).secao-lojas .topo { margin-bottom: 20px; }
/* Espaço reservado para a arte completa, sem cobrir o texto do contexto. */
.kameo-contexto { min-height: 170px; }
.kameo-contexto h3,
.kameo-contexto p { padding-right: 102px; max-width: none; }

/* No painel estreito o texto e o Kameo ocupam colunas de verdade. A arte
   absoluta funcionava no desktop, mas no telefone cobria a descrição e o
   fundo translúcido deixava a saudação aparecer por baixo do cartão. */
@media (max-width: 390px) {
  .kameo-contexto {
    min-height: 170px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 14px;
    overflow: hidden;
    background: #fff;
    background: light-dark(#fff, #1b152c);
    isolation: isolate;
  }
  .kameo-contexto-topo { grid-column: 1 / -1; grid-row: 1; }
  .kameo-contexto h3 {
    grid-column: 1; grid-row: 2;
    align-self: end; padding-right: 0; max-width: none;
  }
  .kameo-contexto p {
    grid-column: 1; grid-row: 3;
    align-self: start; padding-right: 0; max-width: none;
  }
  .kameo-contexto-logo {
    position: static;
    grid-column: 2; grid-row: 2 / 4;
    width: 72px; height: 104px;
    object-fit: contain; align-self: center;
  }
}
/* ================= Na entrada, sem menu (pedido dela, 08/10) =================
   Antes da avaliação e da persona, a lateral não existe: o conteúdo ocupa a
   largura toda, mesmo nas telas que reservam 258px para ela. */
body.painel.sem-lateral .principal { margin-left: 0 !important; width: 100% !important; }
.passos-da-entrada { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.passos-da-entrada-lista { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.passos-da-entrada-lista li { padding: 6px 12px; border-radius: 999px; background: #f1edfb; background: light-dark(#f1edfb, #1f1537); color: #6b6290; color: light-dark(#6b6290, #c0bcd2); font-size: 13px; }
.passos-da-entrada-lista li.feito { background: #e7f6ec; background: light-dark(#e7f6ec, #1a3222); color: #136c3a; color: light-dark(#136c3a, #b3dbc4); }
.passos-da-entrada-lista li.agora { background: #7c3aed; }
.passos-da-entrada-lista li.agora a { color: #fff; font-weight: 600; text-decoration: none; }
.passos-da-entrada-lista li.passos-da-entrada-fim { background: transparent; border: 1px dashed #d8cdf1; border: 1px dashed light-dark(#d8cdf1, #412f6a); }
.passos-da-entrada .sair-form button { display: inline-flex; align-items: center; gap: 6px; }

/* Os três marcos precisam caber juntos no telefone. Flex com larguras pelo
   conteúdo fazia o último chip escapar pela direita; a grade reparte o espaço
   real da tela e mantém todos legíveis. */
@media (max-width: 600px) {
  .passos-da-entrada { width: 100%; min-width: 0; gap: 8px; }
  .passos-da-entrada-lista {
    width: 100%; min-width: 0;
    display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, .9fr) minmax(0, 1.15fr); gap: 6px;
  }
  .passos-da-entrada-lista li {
    box-sizing: border-box; min-width: 0; padding: 7px 4px;
    overflow: hidden; font-size: 10.5px; line-height: 1.2; text-align: center;
    white-space: nowrap;
  }
  .passos-da-entrada-lista li > :is(a, span) { display: block; min-width: 0; }
}

/* A lista do que a senha precisa ter (shared/_regras_da_senha), com o ✓
   marcado enquanto a pessoa digita. Verde só no que já está feito: o resto
   fica neutro, e não vermelho, porque a pessoa ainda está digitando. */
.regras-senha {
  list-style: none; margin: 4px 0 14px; padding: 0;
  display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--cinza, #6F6A87); color: var(--cinza, light-dark(#6F6A87, #c2c0ce));
}
.regras-senha li { display: flex; align-items: baseline; gap: 6px; }
.regras-senha .regra-marca { display: inline-block; width: 1em; text-align: center; font-weight: 700; }
.regras-senha li.ok { color: var(--sucesso, #15803D); color: var(--sucesso, light-dark(#15803D, #b3dbc2)); }

/* O Kameo pensando: o texto da resposta ainda não chegou. Os pontos são do CSS,
   para o leitor de tela ouvir só "Pensando" (a lista avisa a resposta nova). */
.kameo-mensagem-pensando p { color: var(--cinza); font-style: italic; }
.kameo-mensagem-pensando p::after {
  content: "..."; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom;
  animation: kameo-pontos 1.2s steps(4, end) infinite;
}
@keyframes kameo-pontos { to { width: 1.2em; } }
@media (prefers-reduced-motion: reduce) {
  .kameo-mensagem-pensando p::after { animation: none; width: 1.2em; }
}

/* Os botões de uma resposta do Kameo: só abrem a tela, nunca gravam nada. */
.kameo-acoes-da-resposta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kameo-acoes-da-resposta a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--roxo); color: var(--roxo-escuro); background: var(--lavanda);
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.kameo-acoes-da-resposta a:hover { background: var(--roxo); color: #fff; }
.kameo-acoes-da-resposta a:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* O resumo do dia no painel do Kameo: uma lista curta, o urgente com marca. */
.kameo-dia { margin: 14px 0; }
.kameo-dia[hidden] { display: none; }
.kameo-dia ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.kameo-dia li {
  padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-left: 3px solid var(--roxo);
}
.kameo-dia li.kameo-dia-urgente { border-left-color: #C0392F; border-left-color: light-dark(#C0392F, #fe8778); }
.kameo-dia li a { color: inherit; text-decoration: none; display: block; }
.kameo-dia li a:hover { color: var(--roxo-escuro); text-decoration: underline; }
.kameo-dia li a:focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; border-radius: 6px; }
.kameo-dia .kameo-dia-vazio { border-left-color: #1E8E5A; border-left-color: light-dark(#1E8E5A, #5fd39a); color: var(--cinza); }

/* O suporte: o formulário dentro do Kameo e a tela Suporte (Meus chamados). */
.kameo-suporte { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda-forte); }
.kameo-suporte[hidden] { display: none; }
.kameo-suporte label { display: grid; gap: 4px; font-size: 12.5px; }
.kameo-suporte small { color: var(--cinza); line-height: 1.45; }
.kameo-suporte textarea { font: inherit; font-size: 13px; color: var(--tinta); background: var(--fundo); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 9px 11px; resize: vertical; width: 100%; box-sizing: border-box; }
.kameo-suporte textarea:focus { outline: 2px solid var(--roxo); outline-offset: -1px; }
.kameo-suporte > div { display: flex; gap: 8px; flex-wrap: wrap; }
.kameo-suporte button { font: inherit; font-size: 12.5px; font-weight: 600; min-height: 34px; padding: 6px 14px; border-radius: 99px; cursor: pointer; border: 1px solid var(--borda-forte); background: transparent; color: var(--tinta); }
.kameo-suporte .kameo-suporte-enviar { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.kameo-suporte button:disabled { opacity: .6; cursor: progress; }
.form-suporte { display: grid; gap: 12px; margin-top: 12px; max-width: 640px; }
.form-suporte .linha-campo { display: grid; gap: 6px; }
.form-suporte textarea { font: inherit; font-size: 14px; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-botao); padding: 10px 12px; width: 100%; box-sizing: border-box; resize: vertical; }
.form-suporte .btn-primario { justify-self: start; }
/* O aviso suave de contato na conversa: aparece só ao enviar, e não bloqueia. */

/* Perfil do editor: "Com o que ele trabalha" fica do tamanho do conteúdo, com a
   arte pequena no canto, e não estica até a altura da tabela de preços. */
.editor-perfil-grade { align-items: start; }
.editor-ferramentas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.editor-ferramentas .cartao-titulo,
.editor-ferramentas .chips { flex: 1 1 100%; }
.editor-ferramentas__arte { width: auto; max-width: 45%; max-height: 120px; margin-left: auto; object-fit: contain; }
.editor-ferramentas__arte.arte-escura { display: none; }
html[data-tema="escuro"] .editor-ferramentas__arte.arte-clara { display: none; }
html[data-tema="escuro"] .editor-ferramentas__arte.arte-escura { display: block; }

/* O que falta para a loja vender melhor (descrição curta, produto sem foto). */
.mlojas-pendencias {
  margin: 14px 0 4px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #F5C77E; border: 1px solid light-dark(#F5C77E, #7a5418);
  background: #FFF8EB; background: light-dark(#FFF8EB, #2a1f0e);
  color: #7A4B00; color: light-dark(#7A4B00, #f6c27a); font-size: 12.5px;
}
.mlojas-pendencias b { display: block; margin-bottom: 4px; }
.mlojas-pendencias ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.mlojas-pendencias a { color: inherit; font-weight: 600; }

/* Abrir disputa (influencer e lojista): o mesmo desenho dos campos do painel da loja. */
.pedido-disputa .form-suporte { max-width: 560px; }
.pedido-disputa .form-suporte .linha-campo > span { font-size: 13px; font-weight: 600; }
.pedido-disputa .form-suporte textarea {
  box-sizing: border-box; width: 100%; min-height: 110px; padding: 12px 14px; resize: vertical;
  border: 1px solid #e3ddef; border: 1px solid light-dark(#e3ddef, #3a2e52); border-radius: 10px;
  color: inherit; background: #fff; background: light-dark(#fff, #1b152c);
  font: inherit; font-size: 14px; line-height: 1.5; box-shadow: none;
}
.pedido-disputa .form-suporte textarea:focus { outline: 3px solid #7c3aed22; border-color: #a98af2; }
.pedido-disputa .form-suporte textarea::placeholder { color: #a8a1b9; color: light-dark(#a8a1b9, #9b94ac); opacity: 1; }
.pedido-disputa .form-suporte .btn-secundario { justify-self: start; min-height: 44px; padding-inline: 24px; }

/* Uma timeline, duas pontas: editor e contratante leem os mesmos fatos. */
.historico-edicao-detalhes { width: 100%; margin-top: 4px; }
.historico-edicao-detalhes > summary { width: fit-content; cursor: pointer; }
.historico-edicao { margin-top: 12px; min-width: 0; max-width: 100%; }
.historico-edicao h4 { margin: 0 0 12px; font-size: 13.5px; font-weight: 750; color: var(--tinta); }
.historico-edicao ol { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.historico-edicao li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; padding: 0 0 14px; }
.historico-edicao li:not(:last-child)::after { content: ""; position: absolute; top: 12px; bottom: 0; left: 5px; width: 1px; background: var(--borda-forte); }
.historico-edicao-ponto { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 3px solid var(--superficie); border-radius: 50%; background: var(--roxo); box-shadow: 0 0 0 1px var(--borda-forte); }
.historico-edicao li > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.historico-edicao li b { color: var(--tinta); font-size: 13px; font-weight: 650; }
.historico-edicao li span:not(.historico-edicao-ponto) { color: var(--cinza); font-size: 12px; }
.historico-edicao li p { margin: 3px 0 0; color: var(--cinza); font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.historico-edicao li .link-discreto { width: fit-content; margin-top: 3px; font-size: 12px; }