/* Genesy — sistema visual.
   Dois públicos, um só vocabulário visual: o afiliado no celular e a equipe no
   monitor. O que muda é a densidade, não a linguagem.

   As cores vêm do Manual de uso da marca Genesy, que manda reproduzi-las
   fielmente em qualquer manifestação visual. A escala 50–900 é a do manual,
   copiada sem arredondar. */

/* Exo 2 é a família padrão da marca, e é VARIÁVEL: um arquivo por subconjunto
   cobre de 100 a 900 sem degrau. Sai mais leve que os cinco arquivos estáticos
   da Inter que estavam aqui (72KB contra 121KB) e ainda dá todos os pesos.
   Fica hospedada aqui e não na CDN do Google: a CSP deste sistema é
   `font-src 'self'`, e além disso carregar fonte de fora conta visita de
   criador para um terceiro. */
@font-face {
  font-family:'Exo 2'; src:url('/fonts/exo2-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Exo 2'; src:url('/fonts/exo2-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* ── a escala do manual, ao pé da letra ─────────────────────── */
  --g-50:#F4EFF7;  --g-100:#E8DEEF; --g-200:#D0BBDF; --g-300:#B998CF;
  --g-400:#A176BE; --g-500:#8953AE; --g-600:#6E428C; --g-700:#533269;
  --g-800:#372147; --g-900:#1C1124;
  --g-ciano:#B4F1FF;              /* cor secundária, Pantone 317 C */

  /* ── papéis na interface ────────────────────────────────────── */
  /* O roxo é da IDENTIDADE — vai no logo, na ação, no acento. O texto corrido
     usa cinzas puxados para o mesmo matiz: pintar parágrafo inteiro de 600
     deixaria a tela roxa demais para ler o dia todo. */
  --tinta:#1C1124;                /* = 900, o mais escuro da escala */
  --tinta-2:#43364e;
  --tinta-3:#756981;              /* o mais claro que ainda passa 4.5:1 nas
                                     DUAS superfícies (papel e fundo tingido) */
  --linha:#E8DEEF;                /* = 100 */
  --fundo:#F4EFF7;                /* = 50 */
  --papel:#ffffff;
  --marca:#8953AE;                /* = 500, a cor institucional */
  --acao:#8953AE;
  --acao-forte:#6E428C;           /* = 600, para o hover não depender de opacidade */

  /* O gradiente roxo→ciano é a assinatura que atravessa o manual inteiro. */
  --gradiente:linear-gradient(90deg, var(--g-500) 0%, var(--g-400) 45%, var(--g-ciano) 100%);

  /* Status continua semântico, não decorativo: verde é aprovado em qualquer
     marca do mundo, e trocar isso por roxo custaria leitura para ganhar
     coerência de paleta. Só foram afinados para conviver com o roxo. */
  --ok:#0f7a4a;      --ok-bg:#e7f7ef;
  --nao:#b4231f;     --nao-bg:#fdeceb;
  --espera:#8a5a00;  --espera-bg:#fdf3e2;
  --info:#6E428C;    --info-bg:#E8DEEF;   /* = 100, e não 50: em 50 o selo
                                             sumia sobre o próprio fundo */
  /* A familia vira token: trocar a tipografia da marca era edicao literal em
     tres lugares diferentes do arquivo. */
  --fonte:'Exo 2',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fonte-mono:ui-monospace,'Cascadia Code',Consolas,monospace;
  --raio:14px;
  --sombra:0 1px 2px rgba(28,17,36,.06), 0 8px 24px -12px rgba(28,17,36,.20);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--fonte);
  background:var(--fundo); color:var(--tinta);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--marca)}
a:hover{color:var(--acao-forte)}
/* Dentro de superficie escura (cupom, balao da equipe) o roxo sumiria: ali o
   link herda o branco do contexto. */
.cupom-card a,.balao.equipe a,.toast a{color:inherit}

/* ── peças ────────────────────────────────────────────────────── */
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:10px;
  padding:12px 18px;font-weight:600;font-size:15px;
  background:var(--acao);color:#fff;cursor:pointer;
  transition:transform .06s ease, background-color .15s ease;
}
.btn.ok{background:var(--ok)}
.btn.nao{background:var(--nao)}
.btn.fantasma{background:transparent;color:var(--tinta);border-color:var(--linha)}
.btn.largo{width:100%}
.btn.pequeno{padding:8px 12px;font-size:14px;border-radius:8px}

/* Escurece em vez de desbotar: sobre um roxo saturado, baixar a opacidade
   mistura o botão com o fundo e o resultado fica lavado, não pressionado. */
.btn:hover{background:var(--acao-forte)}
.btn.ok:hover{background:#0c6a40}
.btn.nao:hover{background:#9a1e1a}
.btn.fantasma:hover{background:var(--g-50);border-color:var(--g-200)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--acao)}
.btn.ok:disabled:hover{background:var(--ok)}
.btn.nao:disabled:hover{background:var(--nao)}
.btn.fantasma:disabled:hover{background:transparent;border-color:var(--linha)}

/* Foco visível para quem navega por teclado — a fila é revisada no teclado. */
.btn:focus-visible,.lateral button:focus-visible,.nav-af button:focus-visible,
.fab:focus-visible,.chat-af .icone:focus-visible,
.capa-btn:focus-visible{outline:2px solid var(--g-500);outline-offset:2px}

.campo{
  width:100%;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;
  background:var(--papel);font-size:16px; /* 16px evita o zoom automático do iOS */
}
.campo:focus{outline:2px solid var(--g-500);outline-offset:-1px;border-color:var(--g-400)}
textarea.campo{min-height:96px;resize:vertical;line-height:1.5}
label.rotulo{display:block;font-size:13px;font-weight:600;color:var(--tinta-2);margin:0 0 6px}

.selo{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;
}
.selo.aprovado{background:var(--ok-bg);color:var(--ok)}
.selo.reprovado{background:var(--nao-bg);color:var(--nao)}
.selo.ajustes{background:var(--espera-bg);color:var(--espera)}
.selo.enviado,.selo.em_analise{background:var(--info-bg);color:var(--info)}

.aviso{padding:12px 14px;border-radius:10px;font-size:14.5px;margin:0 0 14px}
.aviso.erro{background:var(--nao-bg);color:var(--nao)}
.aviso.bom{background:var(--ok-bg);color:var(--ok)}

.vazio{text-align:center;padding:56px 24px;color:var(--tinta-3)}
.vazio h3{margin:0 0 6px;font-size:17px;color:var(--tinta-2)}
.vazio p{margin:0;font-size:14.5px}

/* ── toast ────────────────────────────────────────────────────── */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:9999;display:grid;gap:8px;width:min(420px,calc(100vw - 32px))}
.toast{padding:12px 16px;border-radius:10px;background:var(--tinta);color:#fff;font-size:14.5px;box-shadow:var(--sombra);animation:sobe .18s ease}
.toast.erro{background:var(--nao)}
.toast.bom{background:var(--ok)}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── entrada (login / convite) ────────────────────────────────── */
.entrada{min-height:100dvh;display:grid;place-items:center;padding:24px}
.entrada .caixa{width:min(420px,100%);padding:32px;background:var(--papel);border:1px solid var(--linha);
  border-radius:18px;box-shadow:var(--sombra);position:relative;overflow:hidden}
/* A faixa roxo→ciano é a assinatura que percorre o manual inteiro, no pé de
   toda página. Aqui ela entra uma vez só, na primeira tela — repetida em cada
   cartão viraria enfeite, e o manual pede espaço em volta da marca, não menos. */
.entrada .caixa::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradiente)}
.entrada img.logo{height:34px;margin:0 0 22px}
.entrada h1{margin:0 0 4px;font-size:22px;letter-spacing:-.02em}
.entrada p.sub{margin:0 0 22px;color:var(--tinta-3);font-size:14.5px}
.entrada .campo{margin-bottom:12px}

/* ══════════════════════════════════════════════════════════════
   AFILIADO — celular primeiro
   ══════════════════════════════════════════════════════════════ */
/* A folga de baixo precisa limpar o menu fixo E o botão flutuante, que fica
   acima dele — senão a última linha de cada tela nasce coberta.
   A lateral subiu de 16 para 20: com 16, o cartão encostava na moldura do
   aparelho e a tela parecia apertada mesmo com o conteúdo já enxuto. */
.app-af{max-width:620px;margin:0 auto;
  padding:0 20px calc(150px + env(safe-area-inset-bottom))}

.topo-af{
  position:sticky;top:0;z-index:20;background:rgba(244,239,247,.86);backdrop-filter:blur(8px);
  margin:0 -20px;border-bottom:1px solid var(--linha);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  /* `viewport-fit=cover` no HTML faz a página ir até a borda do aparelho, e no
     app instalado (standalone) isso inclui a faixa do relógio e da bateria.
     Sem a área segura, o logotipo fica POR BAIXO do status bar do sistema — que
     é a área de não interferência sendo violada por um elemento que nem é do
     site. Fora do standalone o env() vale 0 e nada muda. */
  padding:calc(15px + env(safe-area-inset-top)) 20px 15px;
}
.topo-af img{height:24px}
.topo-af .quem{font-size:13.5px;color:var(--tinta-3)}

/* o cupom é o que o afiliado mais abre o app pra ver */
.cupom-card{margin:14px 0 20px;padding:15px 16px;border-radius:var(--raio);background:var(--marca);color:#fff;
  position:relative;overflow:hidden}
/* O logotipo em negativo, discreto, no cartao que o afiliado abre o app para
   ver. Fica atras do conteudo (o texto continua legivel) e usa a versao branca
   prevista no manual, nao o logo colorido rebaixado por opacidade. */
/* O logotipo em NEGATIVO, sem véu. A versão anterior usava opacity para virar
   marca d'água, e o manual lista "utilizar contornos ou transparências" entre
   os usos incorretos — véu sobre a marca é exatamente isso. Branco cheio sobre
   o roxo é a versão negativa que o próprio manual prevê, então em vez de
   suavizar o logo eu diminuí ele e dei espaço. */
.cupom-card::after{content:'';position:absolute;right:18px;top:17px;width:74px;height:14px;
  background:url('/genesy-logo-branco.png') right top/contain no-repeat;pointer-events:none}
.cupom-card > *{position:relative}
.cupom-card .rot{font-size:11.5px;opacity:.9;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cupom-card .cod{font-size:29px;font-weight:800;letter-spacing:-.02em;margin:2px 0 12px;font-variant-ligatures:none}
.cupom-card .acoes{display:flex;gap:8px}
/* Escala 700 e nao um véu branco: sobre o roxo do cartão, clarear o fundo do
   botão derrubava o texto branco para 4,06:1 — e engrossar o véu piorava, em
   vez de melhorar. Escurecer resolve e continua dentro da paleta. */
.cupom-card .btn{background:var(--g-700);border-color:rgba(255,255,255,.28);color:#fff;flex:1}
.cupom-card .btn:hover{background:var(--g-800)}
/* Anel de foco BRANCO aqui: o roxo padrão desaparece sobre a superfície roxa. */
.cupom-card .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── MENU INFERIOR ─────────────────────────────────────────────
   Antes a navegação eram três abas no meio da página, que sumiam ao rolar —
   quem estava no fim da lista não sabia mais onde estava nem como sair dali.
   No celular a barra fica embaixo, onde o polegar alcança sem trocar a mão de
   posição, e ícone com rótulo diz o que é antes do toque, não depois. */
.nav-af{position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-top:1px solid var(--linha);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.nav-af button{position:relative;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 4px 6px;border-radius:12px;color:var(--tinta-3);
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
  transition:color .15s ease, background-color .15s ease}
.nav-af button svg{width:23px;height:23px;stroke-width:1.7}
.nav-af button.ativa{color:var(--marca);background:var(--g-50)}
.nav-af button:hover:not(.ativa){color:var(--tinta-2)}
.nav-af .pip{position:absolute;top:3px;left:50%;margin-left:5px;
  min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--nao);color:#fff;font-size:10.5px;font-weight:700;
  line-height:17px;text-align:center}

/* A ação principal não divide espaço com a navegação: quem abre o app para
   enviar um vídeo não deve caçar o botão numa lista de abas. */
.fab{position:fixed;right:16px;z-index:31;
  bottom:calc(78px + env(safe-area-inset-bottom));
  height:52px;padding:0 20px;border:0;border-radius:99px;
  background:var(--acao);color:#fff;font-weight:600;font-size:15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 4px 16px -4px rgba(137,83,174,.55), 0 2px 6px rgba(28,17,36,.16);
  transition:background-color .15s ease, transform .06s ease}
.fab:hover{background:var(--acao-forte)}
.fab:active{transform:translateY(1px)}
.fab svg{width:19px;height:19px;stroke-width:2.2}

.video-card{margin:0 0 14px;overflow:hidden}
.video-card .capa{width:100%;aspect-ratio:16/9;background:var(--g-900);display:block;object-fit:contain}
/* O arquivo que a retenção removeu ocupa o mesmo espaço do player e diz por
   quê — em vez de um player que não toca e não explica. */
/* Sem o aspect-ratio de vídeo: duas linhas de texto não precisam de 330px de
   retângulo preto, e quem tem vários vídeos antigos rolaria isso vezes N. */
.video-card .arquivo-saiu{aspect-ratio:auto;min-height:96px;
  display:grid;place-items:center;text-align:center;padding:20px 16px}
.video-card .arquivo-saiu p{margin:0;color:#e7e7ea;font-size:14px;line-height:1.5}
.video-card .arquivo-saiu span{color:#a0a0aa;font-size:12.5px}
.video-card .corpo{padding:16px}
.video-card .linha1{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.video-card h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.video-card .meta{font-size:13px;color:var(--tinta-3);margin:0 0 2px}

/* A consideração aparece ABERTA no card, nunca atrás de um clique: é a coisa
   mais importante da tela quando um vídeo é reprovado. */
.consideracao{margin:12px 0 0;padding:14px;border-radius:10px;background:var(--nao-bg);border:1px solid rgba(180,35,31,.16)}
.consideracao.ajustes{background:var(--espera-bg);border-color:rgba(138,90,0,.18)}
.consideracao h4{margin:0 0 8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--nao)}
.consideracao.ajustes h4{color:var(--espera)}
.consideracao ul{margin:0 0 10px;padding-left:18px}
.consideracao li{margin:5px 0;font-size:14.5px}
.consideracao .texto{font-size:14.5px;white-space:pre-wrap}

.barra-envio{height:8px;background:var(--g-200);border-radius:99px;overflow:hidden;margin:12px 0 6px}
/* Gradiente que TERMINA no roxo, não no ciano: contra o trilho claro a ponta
   ciano ficava invisível e a barra parecia parar antes do fim. */
.barra-envio i{display:block;height:100%;width:0;transition:width .15s ease;
  background:linear-gradient(90deg,var(--g-400) 0%,var(--g-600) 100%)}

.ganhos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}
.ganho{padding:16px;text-align:left}
.ganho .rot{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-3)}
.ganho .val{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
.ganho.liberado .val{color:var(--ok)}

/* ── OS TRÊS ESTADOS DO VÍDEO ──────────────────────────────────
   Antes era uma lista só, em ordem de envio, e o selo de status era um
   detalhe dentro do cartão. A pergunta que a criadora faz ao abrir o app é
   "o que falta?" e "o que passou?" — então a lista responde isso na
   estrutura, e não em cada linha. Amarelo espera, verde passou, vermelho
   pede trabalho. */
.grupo{margin:0 0 24px}
.grupo > .cabeca{display:flex;align-items:center;gap:8px;margin:0 0 11px;padding:0 3px}
.grupo > .cabeca .bolinha{width:9px;height:9px;border-radius:99px;flex-shrink:0}
.grupo > .cabeca h3{margin:0;font-size:13.5px;font-weight:700;letter-spacing:.01em}
.grupo > .cabeca .qtd{font-size:12.5px;color:var(--tinta-3);font-weight:600}
.grupo.espera  > .cabeca .bolinha{background:#E8A317}
.grupo.espera  > .cabeca h3{color:#7a4e00}
.grupo.bom     > .cabeca .bolinha{background:var(--ok)}
.grupo.bom     > .cabeca h3{color:var(--ok)}
.grupo.ruim    > .cabeca .bolinha{background:var(--nao)}
.grupo.ruim    > .cabeca h3{color:var(--nao)}
/* A faixa colorida na lateral do cartão carrega o estado sem precisar de mais
   uma etiqueta escrita — é o mesmo dado, custando zero palavra. */
.grupo .video-card{border-left:3px solid transparent}
.grupo.espera .video-card{border-left-color:#E8A317}
.grupo.bom    .video-card{border-left-color:var(--ok)}
.grupo.ruim   .video-card{border-left-color:var(--nao)}


/* ══════════════════════════════════════════════════════════════
   EQUIPE — monitor, densidade alta
   ══════════════════════════════════════════════════════════════ */
.app-eq{display:grid;grid-template-columns:230px 1fr;min-height:100dvh}

.lateral{background:var(--papel);border-right:1px solid var(--linha);padding:20px 14px;display:flex;flex-direction:column;gap:4px}
/* align-self é obrigatório aqui: a lateral é flex-column e o align-items:stretch
   padrão espicharia a imagem para a largura toda, deformando o logo. */
.lateral img{height:26px;width:auto;align-self:flex-start;margin:0 0 22px 8px}
.lateral button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;background:transparent;
  border-radius:9px;font-size:14.5px;font-weight:500;color:var(--tinta-2);cursor:pointer;text-align:left;width:100%}
.lateral button:hover{background:var(--g-100)}
.lateral button.ativa{background:var(--g-700);color:#fff;font-weight:600}
.lateral .contador{margin-left:auto;font-size:12px;font-weight:700;background:var(--nao);color:#fff;padding:1px 7px;border-radius:99px}
.lateral button.ativa .contador{background:rgba(255,255,255,.22)}
.lateral .rodape{margin-top:auto;font-size:12.5px;color:var(--tinta-3);padding:10px 12px}

.conteudo{padding:26px 30px;overflow-x:hidden}
.conteudo h1{margin:0 0 4px;font-size:23px;letter-spacing:-.02em}
.conteudo .sub{margin:0 0 22px;color:var(--tinta-3);font-size:14.5px}

/* cockpit de revisão: player grande à esquerda, decisão à direita */
.cockpit{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:20px;align-items:start}
.cockpit video{width:100%;background:#000;border-radius:var(--raio);display:block;max-height:66vh}
.painel-dec{padding:18px;position:sticky;top:26px}
.painel-dec h2{margin:0 0 2px;font-size:17px}
.painel-dec .quem{font-size:13.5px;color:var(--tinta-3);margin:0 0 14px}

.fatos{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.fato{padding:6px 10px;border-radius:8px;background:var(--fundo);font-size:12.5px;font-weight:600;color:var(--tinta-2)}
.fato.alerta{background:var(--nao-bg);color:var(--nao)}

.motivos{display:grid;gap:6px;max-height:280px;overflow-y:auto;margin:0 0 12px;padding:2px}
.motivo{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid var(--linha);
  border-radius:9px;cursor:pointer;font-size:14px;background:var(--papel)}
.motivo:hover{border-color:var(--tinta-3)}
.motivo.marcado{border-color:var(--nao);background:var(--nao-bg)}
.motivo kbd{font-size:11px;font-weight:700;background:var(--fundo);border:1px solid var(--linha);
  border-radius:5px;padding:1px 5px;min-width:19px;text-align:center;flex-shrink:0;font-family:inherit}
.motivo.marcado kbd{background:#fff;border-color:rgba(180,35,31,.3)}

.historico{margin:14px 0 0;padding:14px;border-radius:10px;background:var(--fundo);font-size:13.5px}
.historico h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-3)}
.historico .item{padding:8px 0;border-top:1px solid var(--linha)}
.historico .item:first-of-type{border-top:0}

.tabela{width:100%;border-collapse:collapse;font-size:14px;background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.tabela th{text-align:left;padding:11px 14px;background:var(--fundo);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:var(--tinta-3);border-bottom:1px solid var(--linha)}
.tabela td{padding:12px 14px;border-bottom:1px solid var(--linha)}
.tabela tr:last-child td{border-bottom:0}
.tabela tr:hover td{background:var(--fundo)}

.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0 0 24px}
.numero{padding:18px}
.numero .rot{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-3)}
.numero .val{font-size:28px;font-weight:700;letter-spacing:-.03em;margin-top:4px}
.numero.alerta .val{color:var(--nao)}

.atalhos{font-size:12.5px;color:var(--tinta-3);margin:14px 0 0;line-height:1.9}
.atalhos kbd{font-family:inherit;font-size:11.5px;font-weight:700;background:var(--fundo);
  border:1px solid var(--linha);border-radius:5px;padding:2px 6px;margin:0 2px}

/* ── modal ────────────────────────────────────────────────────── */
/* O véu do modal era o preto da marca antiga escrito em decimal — é o tipo de
   sobra que ninguém vê sozinha e que só aparece lado a lado. Agora é o 900 da
   escala, e o escurecimento puxa para o roxo em vez de para o azul. */
.fundo-modal{position:fixed;inset:0;background:rgba(28,17,36,.46);display:grid;place-items:center;padding:20px;z-index:100}
.modal{width:min(540px,100%);max-height:88vh;overflow-y:auto;background:var(--papel);border-radius:16px;padding:24px;box-shadow:var(--sombra)}
.modal h2{margin:0 0 4px;font-size:19px;letter-spacing:-.02em}
.modal .sub{margin:0 0 18px;color:var(--tinta-3);font-size:14px}
.modal .rodape{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}

@media (max-width:900px){
  .app-eq{grid-template-columns:1fr}
  .lateral{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--linha);padding:10px}
  .lateral img,.lateral .rodape{display:none}
  .lateral button{width:auto;white-space:nowrap}
  .cockpit{grid-template-columns:1fr}
  .painel-dec{position:static}
  .conteudo{padding:18px 16px}
}

/* ── CAMPANHAS (briefing) ─────────────────────────────────────── */

.campanha{margin:0 0 14px}
/* Sem opacity no cartão inteiro: ela derrubava todo o texto junto para perto
   de 3:1, inclusive o que a pessoa ainda precisa ler. O sinal de "lotada" vem
   do fundo e da borda; o texto continua legível. */
.campanha.lotada{background:var(--g-50);border-color:var(--g-200)}
.campanha.lotada .btn{opacity:.55;pointer-events:none}
.campanha .recompensa{margin:10px 0 0;padding:9px 12px;border-radius:9px;
  background:var(--ok-bg);color:var(--ok);font-size:14px;font-weight:600}

.brief{margin:12px 0 0;padding:14px;border-radius:10px;background:var(--fundo)}
.brief h4{margin:0 0 6px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--tinta-3)}
.brief h4.nao{color:var(--nao);margin-top:12px}
.brief ul{margin:0;padding-left:18px}
.brief li{margin:4px 0;font-size:14.5px}

/* Kit da marca: o que pode e o que não pode ser dito */
.kit h4{margin:16px 0 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-3)}
.kit h4:first-child{margin-top:0}
.kit h4.ok{color:var(--ok)} .kit h4.nao{color:var(--nao)}
.kit ul{margin:0;padding-left:18px} .kit li{margin:5px 0;font-size:14.5px}

/* Perguntas e pré-checagem do envio */
.linha-check{display:flex;gap:9px;align-items:flex-start;font-size:14px;margin:8px 0;cursor:pointer;line-height:1.45}
.linha-check input{margin-top:3px;flex-shrink:0;width:17px;height:17px}
.pergunta{margin:16px 0 0;padding:12px 14px;border:1px solid var(--linha);border-radius:10px}
/* Lembrete, não formulário. Eram três caixas obrigatórias: a pessoa marcava as
   três no automático para liberar o botão, e o gesto deixava de significar
   qualquer coisa — só somava trabalho no caminho de quem já ia fazer certo. */
.prechecagem{margin:14px 0 0;padding:13px 15px;border-radius:11px;background:var(--espera-bg);
  border:1px solid rgba(138,90,0,.18)}
.prechecagem h4{margin:0 0 7px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--espera)}
.prechecagem ul{margin:0;padding-left:17px}
.prechecagem li{margin:4px 0;font-size:14px;line-height:1.45;color:var(--tinta-2)}

/* ── CONVOCAR (painel) ─────────────────────────────────────────
   Lista de PESSOAS com caixa de marcar, não relatório de quem pegou: a
   decisão que se toma aqui é "quem faz esta campanha". */
.convocar{max-height:46vh;overflow-y:auto;margin:10px -4px 0;padding:0 4px;
  display:flex;flex-direction:column;gap:4px}
.convocar label{display:flex;align-items:center;gap:11px;padding:9px 11px;
  border:1px solid var(--linha);border-radius:10px;cursor:pointer;background:var(--papel)}
.convocar label:hover{border-color:var(--g-400);background:var(--g-50)}
.convocar label.entregue{background:var(--ok-bg);border-color:rgba(15,122,74,.2);cursor:default}
.convocar input{width:18px;height:18px;flex-shrink:0;accent-color:var(--marca)}
.convocar .quem{flex:1;min-width:0;display:flex;flex-direction:column}
.convocar .nome{font-weight:600;font-size:14.5px}
.convocar .meta{font-size:12.5px;color:var(--tinta-3)}

/* Referências, do lado de quem sobe. */
.refs-adm{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;margin:6px 0 0}
.ref-adm{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;
  border:1px solid var(--linha);background:var(--g-900)}
.ref-adm img,.ref-adm video{width:100%;height:100%;object-fit:cover;display:block}
.ref-adm .tirar{position:absolute;top:5px;right:5px;width:24px;height:24px;border:0;
  border-radius:99px;background:rgba(28,17,36,.72);color:#fff;cursor:pointer;
  font-size:13px;line-height:1;display:grid;place-items:center}
.ref-adm .tirar:hover{background:var(--nao)}

/* três colunas para os selects de classificação e do formulário de campanha */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:640px){ .tres{grid-template-columns:1fr} }
.modal.largo{width:min(680px,100%)}
.classificar{margin:16px 0 0;padding:12px 14px;border:1px solid var(--linha);border-radius:10px}
.classificar h4{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--tinta-3)}
.classificar h4 .meta{text-transform:none;letter-spacing:0;font-weight:500}
.classificar .campo{font-size:14px;padding:9px 10px}
.historico .item.nao{color:var(--nao)}

/* ── PAINEL: filtros, candidatas, recados, conversas ───────────── */
.barra-filtros{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap;align-items:center}
.barra-filtros .campo{max-width:300px}
.barra-filtros select.campo{max-width:190px}

/* candidata que pediu para ser retomada hoje não pode passar batida */
.tabela tr.cobrar td{background:#fffaf0}
.tabela tr.cobrar:hover td{background:#fff5e6}

.recados-bloco{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--linha)}
.recados-bloco h3{margin:0 0 2px;font-size:15px}
#recados{max-height:220px;overflow-y:auto;margin:12px 0}
.recado{padding:10px 12px;border-radius:10px;background:var(--fundo);margin:0 0 8px}
.recado .cab{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin:0 0 3px}
.recado .txt{font-size:14.5px;white-space:pre-wrap}
.mencao{color:var(--info);font-weight:600}
.linha-recado{display:flex;gap:8px}
.linha-recado .campo{flex:1}

/* conversa com o afiliado: lista à esquerda, balões à direita */
.conversas{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:16px;align-items:start}
.lista-conv{display:grid;gap:6px;max-height:70vh;overflow-y:auto}
.item-conv{text-align:left;padding:12px 14px;border:1px solid var(--linha);border-radius:11px;
  background:var(--papel);cursor:pointer;width:100%}
.item-conv:hover{border-color:var(--tinta-3)}
.item-conv.ativa{border-color:var(--g-500);background:var(--g-50)}
.item-conv .linha1{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14.5px}
.item-conv .previa{font-size:13px;color:var(--tinta-3);margin:3px 0 2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-conv .meta{font-size:12px}
.pip{display:inline-block;min-width:18px;padding:0 6px;border-radius:99px;background:var(--nao);
  color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}

.painel-conv{display:flex;flex-direction:column;height:70vh;overflow:hidden;padding:0}
.cab-conv{padding:14px 18px;border-bottom:1px solid var(--linha);display:flex;
  justify-content:space-between;align-items:baseline;gap:10px}
.balaos{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.balao{max-width:78%;padding:10px 13px;border-radius:13px;font-size:14.5px}
.balao .txt{white-space:pre-wrap}
.balao .quando{font-size:11.5px;opacity:.62;margin-top:4px}
.balao .sobre{font-size:11.5px;opacity:.72;margin-bottom:4px;font-weight:600}
.balao.afiliado{align-self:flex-start;background:var(--fundo);border:1px solid var(--linha)}
.balao.equipe{align-self:flex-end;background:var(--g-600);color:#fff}
.painel-conv .linha-recado{padding:12px 14px;border-top:1px solid var(--linha)}

@media (max-width:900px){
  .conversas{grid-template-columns:1fr}
  .lista-conv{max-height:none}
  .painel-conv{height:60vh}
}

/* ── VÍDEOS EM LISTA ───────────────────────────────────────────
   Um cartão com player por vídeo fazia a tela carregar dezenas de MB e
   obrigava a rolar um quilômetro para achar um. A linha diz o bastante para
   reconhecer; o cartão inteiro abre ao tocar. */
.lista-videos{display:flex;flex-direction:column;gap:8px}
.linha-video{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 13px;border:1px solid var(--linha);border-radius:12px;
  background:var(--papel);cursor:pointer;box-shadow:var(--sombra)}
.linha-video:hover{border-color:var(--g-300);background:var(--g-50)}
.linha-video .mini{flex-shrink:0;width:58px;height:42px;border-radius:8px;overflow:hidden;
  background:var(--g-900);display:grid;place-items:center}
.linha-video .mini img{width:100%;height:100%;object-fit:cover;display:block}
.linha-video .mini .sem{color:#fff;font-size:15px;opacity:.75}
.linha-video .texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.linha-video .nome{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-video .sub{font-size:12.5px;color:var(--tinta-3)}
.linha-video .aviso-linha{flex-shrink:0;font-size:11.5px;font-weight:700;
  padding:3px 8px;border-radius:99px;background:var(--nao-bg);color:var(--nao)}
.linha-video .seta{flex-shrink:0;color:var(--tinta-3);font-size:20px;line-height:1}
/* A faixa colorida da lateral sai da linha: o cabeçalho do grupo já diz o
   estado, e repetir em cada linha só polui. */
.grupo .lista-videos .linha-video{border-left-width:1px;border-left-color:var(--linha)}
.grupo.espera .linha-video:hover{border-color:#E8A317}
.grupo.bom    .linha-video:hover{border-color:var(--ok)}
.grupo.ruim   .linha-video:hover{border-color:var(--nao)}
/* Dentro do modal o cartão não precisa de moldura nem sombra: o modal já é a
   moldura. */
.detalhe-video .cartao{border:0;box-shadow:none;margin:0}
.detalhe-video .video-card .corpo{padding:14px 0 0}

/* Ações da campanha, com espaço de respiro entre elas. */
.acoes-camp{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}

/* ── REFERÊNCIAS DO BRIEFING ───────────────────────────────────
   Vêm antes do texto: descrever enquadramento em palavras é o caminho mais
   curto para receber outra coisa. */
.refs{margin:2px 0 16px}
.refs h4{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--tinta-3)}
.refs .tira{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.refs .ref{flex:0 0 auto;width:84px;height:84px;padding:0;border-radius:11px;
  border:1px solid var(--linha);overflow:hidden;cursor:pointer;background:var(--g-50);
  scroll-snap-align:start;display:grid;place-items:center}
.refs .ref:hover{border-color:var(--g-400)}
.refs .ref img{width:100%;height:100%;object-fit:cover;display:block}
.refs .ref.video{background:var(--g-900);color:#fff;gap:3px}
.refs .ref.video .tocar{font-size:20px;opacity:.9}
.refs .ref.video .rot{font-size:10.5px;opacity:.72}

/* ── A AUTORIZAÇÃO ─────────────────────────────────────────────
   Lugar próprio, e não mais um item de lista: é a única coisa do formulário
   que impede o envio. */
.licenca{margin:14px 0 0;padding:14px;border-radius:11px;
  background:var(--g-50);border:1px solid var(--g-200)}
.licenca .linha-check{margin:0}
.licenca .ler-inteiro{margin:9px 0 0;padding:0;border:0;background:transparent;
  color:var(--marca);font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.licenca .ler-inteiro:hover{color:var(--acao-forte)}

/* ══ CHAT DO AFILIADO ══════════════════════════════════════════
   Classes próprias, e não as do painel: o painel conversa com uma lista de
   pessoas e cabe num monitor; aqui é uma conversa só, num celular, e o que
   importa é poder responder rápido e dizer DE QUAL VÍDEO se está falando.

   Ocupa a tela inteira abaixo do topo, em vez de virar um cartão de 62vh com
   espaço morto embaixo. */
.chat-af{position:fixed;left:0;right:0;z-index:10;
  top:0;bottom:0;display:flex;flex-direction:column;background:var(--papel)}
.chat-af .cabeca{flex-shrink:0;display:flex;align-items:center;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid var(--linha);background:var(--papel)}
.chat-af .cabeca h2{margin:0;font-size:16px;font-weight:700}
.chat-af .cabeca .sub{margin:1px 0 0;font-size:12.5px;color:var(--tinta-3)}
.chat-af .voltar{border:0;background:transparent;cursor:pointer;padding:6px;margin-left:-6px;
  border-radius:9px;color:var(--tinta-2);display:flex}
.chat-af .voltar:hover{background:var(--g-50)}
.chat-af .voltar svg{width:22px;height:22px;stroke-width:2}

.chat-af .fluxo{flex:1;overflow-y:auto;padding:18px 16px;
  display:flex;flex-direction:column;gap:3px;background:var(--g-50)}

/* Nomes pelo que a pessoa VÊ, não pela tabela: `.minha` é a bolha dela.
   O par antigo (.equipe/.afiliado) dizia o contrário do que parecia — a
   mensagem DELA levava a classe "equipe" — e trocar de lado por engano é o
   tipo de erro que ninguém percebe até um print chegar errado. */
.chat-af .msg{max-width:80%;padding:9px 13px;font-size:14.5px;line-height:1.45;
  border-radius:17px;position:relative}
.chat-af .msg.minha{align-self:flex-end;background:var(--g-600);color:#fff;
  border-bottom-right-radius:6px}
.chat-af .msg.dela{align-self:flex-start;background:var(--papel);color:var(--tinta);
  border:1px solid var(--linha);border-bottom-left-radius:6px}
/* Sequência da mesma pessoa vira um bloco só: sem repetir o "canto" da bolha
   a cada linha, a conversa respira. */
.chat-af .msg.seguida{border-radius:17px}
.chat-af .msg.minha.seguida{border-bottom-right-radius:6px}
.chat-af .msg.dela.seguida{border-bottom-left-radius:6px}
.chat-af .msg + .msg{margin-top:3px}
.chat-af .msg.troca{margin-top:14px}
.chat-af .msg .txt{white-space:pre-wrap;word-break:break-word}
.chat-af .msg .quando{font-size:11px;margin-top:3px;opacity:.62}
.chat-af .msg.minha .quando{text-align:right}
/* A referência ao vídeo vai DENTRO da bolha, no topo: fora dela viraria mais
   uma linha solta na conversa. */
.chat-af .msg .sobre{display:flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;margin:0 0 5px;padding:3px 7px;border-radius:7px;
  background:rgba(255,255,255,.2)}
.chat-af .msg.dela .sobre{background:var(--g-50);color:var(--g-700)}
.chat-af .msg .sobre svg{width:13px;height:13px;stroke-width:2;flex-shrink:0}

.chat-af .escrever{flex-shrink:0;border-top:1px solid var(--linha);background:var(--papel);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.chat-af .linha{display:flex;align-items:flex-end;gap:7px}
.chat-af .linha textarea{flex:1;min-width:0;resize:none;height:40px;min-height:40px;max-height:120px;
  padding:9px 14px;border:1px solid var(--linha);border-radius:20px;
  background:var(--g-50);font-size:16px;line-height:1.35;font-family:inherit}
.chat-af .linha textarea:focus{outline:2px solid var(--g-400);outline-offset:-1px;background:var(--papel)}
.chat-af .icone{flex-shrink:0;width:40px;height:40px;border:0;border-radius:99px;cursor:pointer;
  display:grid;place-items:center;background:var(--g-100);color:var(--g-700)}
.chat-af .icone:hover{background:var(--g-200)}
.chat-af .icone svg{width:21px;height:21px;stroke-width:1.9}
.chat-af .icone.enviar{background:var(--acao);color:#fff}
.chat-af .icone.enviar:hover{background:var(--acao-forte)}
.chat-af .icone.enviar:disabled{background:var(--g-200);color:var(--g-400);cursor:not-allowed}

/* Emojis: um punhado, escolhido a dedo para esta conversa — não um teclado
   completo. Quem usa isto responde "combinado" e "valeu", não escreve romance. */
.chat-af .emojis{display:none;grid-template-columns:repeat(8,1fr);gap:2px;
  padding:10px 2px 4px;border-top:1px solid var(--linha);margin:10px -12px 0}
.chat-af .emojis.aberto{display:grid}
.chat-af .emojis button{border:0;background:transparent;cursor:pointer;
  font-size:22px;line-height:1;padding:7px 0;border-radius:9px}
.chat-af .emojis button:hover{background:var(--g-100)}

/* O vídeo escolhido fica à vista enquanto ela escreve, com um jeito óbvio de
   tirar — sem isso dá para mandar sobre o vídeo errado sem perceber. */
.chat-af .anexo{display:flex;align-items:center;gap:8px;margin:0 0 9px;
  padding:8px 10px;border-radius:10px;background:var(--g-50);border:1px solid var(--g-200);
  font-size:13px;font-weight:600;color:var(--g-700)}
.chat-af .anexo svg{width:15px;height:15px;stroke-width:2;flex-shrink:0}
.chat-af .anexo .titulo{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-af .anexo .tirar{border:0;background:transparent;cursor:pointer;color:var(--g-600);
  padding:2px;border-radius:6px;display:flex;flex-shrink:0}
.chat-af .anexo .tirar:hover{background:var(--g-200)}

/* Escolher o vídeo: os mesmos três grupos da aba de vídeos, para a criadora
   não precisar aprender duas organizações do mesmo conteúdo. */
.escolher-video{max-height:64vh;overflow-y:auto;margin:4px -4px 0;padding:0 4px}
.escolher-video .grupo{margin:0 0 16px}
.escolher-video .item{display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 11px;margin:0 0 6px;border:1px solid var(--linha);border-radius:11px;
  background:var(--papel);cursor:pointer;text-align:left;font-size:14px}
.escolher-video .item:hover{border-color:var(--g-400);background:var(--g-50)}
.escolher-video .item .bolinha{width:8px;height:8px;border-radius:99px;flex-shrink:0}
.escolher-video .item .nome{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.escolher-video .item .quando{font-size:12px;color:var(--tinta-3);flex-shrink:0}

/* ── BIBLIOTECA EM GRADE ───────────────────────────────────────── */
/* Quem entra aqui está procurando um vídeo para virar anúncio, e ninguém
   reconhece vídeo pelo título digitado às pressas — reconhece pela imagem. */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.item-video{overflow:hidden;display:flex;flex-direction:column}
.capa-btn{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;
  background:var(--g-900);cursor:pointer;overflow:hidden}
.capa-btn img{width:100%;height:100%;object-fit:cover;display:block}
/* Vídeo antigo (enviado antes da miniatura existir) não tem capa: em vez do
   ícone de imagem quebrada, fica o fundo escuro com o botão de play. */
.capa-btn img.sem-capa{opacity:0}
.capa-btn .tempo{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.78);color:#fff;
  font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:5px}
.capa-btn .tocar{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  font-size:30px;opacity:.85;text-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none}
.capa-btn:hover .tocar{opacity:1}
.item-video .corpo{padding:12px 13px;display:flex;flex-direction:column;gap:2px;flex:1}
.item-video .linha1{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.item-video h3{margin:0;font-size:14.5px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-video .meta{font-size:12.5px;color:var(--tinta-3);margin:0}
.acoes-item{display:flex;gap:6px;margin-top:auto;padding-top:10px}
.acoes-item .btn{flex:1}

/* <a> usado como botão precisa de alinhamento e nada de sublinhado */
a.btn{text-decoration:none}

/* Player que falhou: explica em vez de ficar preto */
.player-falhou{background:var(--nao-bg);border:1px solid rgba(180,35,31,.2);border-radius:var(--raio);
  padding:20px;color:var(--nao);font-size:14.5px}
.player-falhou strong{display:block;font-size:15.5px;margin:0 0 6px}
.player-falhou p{margin:0 0 10px;color:var(--tinta-2)}
.player-falhou .btn{background:var(--nao)}

/* ── SEGUNDO FATOR ─────────────────────────────────────────────── */
/* Campo de código: grande e espaçado, porque a pessoa está digitando seis
   dígitos que mudam a cada 30 segundos, muitas vezes com pressa. */
.campo.codigo{font-size:26px;letter-spacing:.32em;text-align:center;font-weight:600;padding:14px}
.campo.chave-totp{font-family:var(--fonte-mono);
  font-size:15px;letter-spacing:.06em;background:var(--fundo)}

/* Códigos de reserva: monoespaçado e grande, porque vão ser copiados à mão
   de uma tela para um papel, no pior dia. */
.reservas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:16px 0}
.reservas code{font-family:var(--fonte-mono);font-size:16px;
  font-weight:600;letter-spacing:.05em;background:var(--fundo);border:1px solid var(--linha);
  border-radius:8px;padding:10px;text-align:center;user-select:all}

/* A autorização de uso, na tela de revisão. Fica como tarja e não como item
   solto nos "fatos" porque a resposta muda o que se pode fazer com o vídeo:
   com registro ele pode virar anúncio, sem registro não pode. */
.lic{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:13.5px;
  background:var(--fundo);border:1px solid var(--linha)}
.lic strong{font-weight:700}
.lic .meta{color:var(--tinta-3)}
.lic button{margin-left:auto}
.lic.tem{background:var(--ok-bg);border-color:rgba(15,122,74,.2)}
.lic.tem strong{color:var(--ok)}
.lic.sem{background:var(--espera-bg);border-color:rgba(138,90,0,.2)}
.lic.sem strong{color:var(--espera)}

/* O comprovante em si: pares rótulo/valor, e o texto aceito em bloco separado
   — é ele que vale se alguém contestar, então não pode ficar parecendo mais um
   campo do formulário. */
.prova{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:4px 0 18px;font-size:14px}
.prova dt{color:var(--tinta-3)}
.prova dd{margin:0;font-weight:600;word-break:break-word}
.texto-lic{margin:0;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.55;
  background:var(--fundo);border:1px solid var(--linha)}