/* Frente "Vídeo e influenciadoras" (ver CONTRATO.md). Só as variáveis --fb-* e as classes da base; prefixo .vd- */

.vd-grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vd-lista { display: grid; gap: 12px; margin-bottom: 16px; }

/* Rosto: foto ou desenho, com a etiqueta "foto a gerar" */
.vd-foto { position: relative; aspect-ratio: 1; border-radius: var(--fb-canto-m); overflow: hidden; background: var(--fb-nevoa); }
.vd-foto svg, .vd-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vd-a-gerar { position: absolute; left: 8px; bottom: 8px; background: var(--fb-branco); border: 1px solid var(--fb-linha); }
.vd-foto-p { width: 72px; height: 72px; flex: none; }
.vd-foto-p .vd-a-gerar { display: none; }

.vd-inf { display: grid; gap: 12px; align-content: start; }
.vd-inf[hidden] { display: none; }
.vd-inf h3, .vd-clone h3 { margin: 0; font-size: var(--fb-texto-h3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vd-inf p { margin: 4px 0; }
.vd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

.vd-ficha summary { cursor: pointer; font-weight: 700; font-size: var(--fb-texto-menor); color: var(--fb-framboesa); }
.vd-ficha dl { margin: 8px 0 0; font-size: var(--fb-texto-menor); }
.vd-ficha dt { font-weight: 700; margin-top: 8px; }
.vd-ficha dd { margin: 2px 0 0; color: var(--fb-grafite); }
.vd-ficha ul { margin: 4px 0 0; padding-left: 18px; }

/* Filtro por nicho */
.vd-filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vd-pilula {
  font: inherit; font-size: var(--fb-texto-menor); font-weight: 600; cursor: pointer;
  padding: 6px 12px; border-radius: var(--fb-canto-pilula); border: 1px solid var(--fb-linha);
  background: var(--fb-branco); color: var(--fb-grafite);
}
.vd-pilula[aria-pressed="true"] { background: var(--fb-tinta); border-color: var(--fb-tinta); color: var(--fb-branco); }

.vd-clone { display: flex; gap: 16px; align-items: center; }
.vd-clone p { margin: 4px 0 8px; }
.vd-regras { padding-left: 20px; color: var(--fb-grafite); }

/* Clone: passos, fotos, declaração */
.vd-passos { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; counter-reset: passo; flex-wrap: wrap; }
.vd-passos li {
  counter-increment: passo; font-size: var(--fb-texto-menor); font-weight: 600; color: var(--fb-cinza);
  padding: 4px 12px; border-radius: var(--fb-canto-pilula); background: var(--fb-nevoa);
}
.vd-passos li::before { content: counter(passo) ". "; }
.vd-passos li[aria-current="step"] { background: var(--fb-tinta); color: var(--fb-branco); }
.vd-passos li.feito { color: var(--fb-sucesso); }
.vd-dicas { margin: 0 0 12px; padding-left: 20px; }
#vd-fotos { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.vd-previas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.vd-previas img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--fb-canto-p); border: 1px solid var(--fb-linha); }
.vd-declaracao {
  background: var(--fb-nevoa); border-radius: var(--fb-canto-p); padding: 12px 16px; margin-bottom: 12px;
  font-size: var(--fb-texto-menor); color: var(--fb-tinta);
}
.vd-caixa { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; margin-bottom: 8px; cursor: pointer; }
.vd-caixa input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.vd-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-em-breve { margin-top: 16px; opacity: .7; }
.vd-em-breve h3 { margin: 0 0 4px; font-size: var(--fb-texto-corpo); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vd-em-breve p { margin: 0; }

/* Vídeo da peça: escolha da influenciadora */
.vd-escolhas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vd-escolha {
  position: relative; display: flex; gap: 12px; align-items: center; padding: 8px; cursor: pointer;
  border: 1px solid var(--fb-linha); border-radius: var(--fb-canto-m); background: var(--fb-branco);
}
.vd-escolha:has(input:checked) { border-color: var(--fb-tinta); box-shadow: inset 0 0 0 1px var(--fb-tinta); }
.vd-escolha input { position: absolute; opacity: 0; pointer-events: none; }
.vd-escolha:has(input:focus-visible) { box-shadow: var(--fb-foco); }
.vd-escolha > span { display: grid; gap: 2px; min-width: 0; }
.vd-escolha .fb-etiqueta { justify-self: start; }
.vd-nichos { font-size: var(--fb-texto-legenda); }

.vd-formatos { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-pilula-radio {
  display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 600; font-size: var(--fb-texto-menor);
  padding: 8px 14px; border-radius: var(--fb-canto-pilula); border: 1px solid var(--fb-linha);
}
.vd-pilula-radio:has(input:checked) { border-color: var(--fb-tinta); background: var(--fb-nevoa); }
#vd-form-video h2:first-child { margin-top: 0; }
#vd-form-video .fb-campo textarea { resize: vertical; }
#vd-avisos .fb-aviso { margin-bottom: 12px; }

/* Lista de vídeos */
.vd-videos { display: grid; gap: 16px; }
.vd-video { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 20px; align-items: start; }
.vd-player { background: var(--fb-tinta); border-radius: var(--fb-canto-m); overflow: hidden; }
.vd-player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.vd-f916 { aspect-ratio: 9 / 16; }
.vd-f45 { aspect-ratio: 4 / 5; }
.vd-video-texto { display: grid; gap: 8px; align-content: start; justify-items: start; }
.vd-video-texto p { margin: 0; }
.vd-titulo { font-weight: 700; margin: 0; }
.vd-aviso-ia { font-size: var(--fb-texto-menor); }
.vd-video-linha p { margin: 4px 0; }
.vd-gerando { display: flex; gap: 10px; align-items: center; color: var(--fb-grafite); }
.vd-roda {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 3px solid var(--fb-linha); border-top-color: var(--fb-tinta); animation: vd-gira 0.9s linear infinite;
}
@keyframes vd-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vd-roda { animation: none; } }

@media (max-width: 600px) {
  .vd-video { grid-template-columns: 1fr; }
  .vd-player { max-width: 100%; }
  .vd-f916 { max-height: 70vh; aspect-ratio: auto; height: 70vh; }
  .vd-grade, .vd-escolhas { grid-template-columns: 1fr; }
  .vd-inf > .vd-foto { aspect-ratio: 4 / 3; }
}

/* Looks e cenários (frente "Looks e cenários", 03/11/2026; public/js/video-looks.js). Prefixo .lk- */
.lk-grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 16px; }
.lk-look { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.lk-look[data-situacao="para_aprovar"] { border-color: var(--fb-tinta); }
.lk-texto h3 { margin: 0; font-size: var(--fb-texto-h3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lk-texto p { margin: 4px 0; }
.lk-situacao { font-weight: 600; }
.lk-mini { aspect-ratio: 9 / 16; border-radius: var(--fb-canto-m); overflow: hidden; background: var(--fb-nevoa); }
.lk-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lk-mini-p { width: 56px; flex: none; }
.lk-sem-foto { display: grid; place-items: center; text-align: center; padding: 8px; font-size: var(--fb-texto-legenda); color: var(--fb-cinza); }
.lk-variar { display: grid; place-items: center; font-size: 26px; color: var(--fb-grafite); border: 1px dashed var(--fb-linha); background: var(--fb-branco); }
.lk-desc { list-style: none; padding: 0; margin: 6px 0; font-size: var(--fb-texto-menor); color: var(--fb-grafite); display: grid; gap: 2px; }
.lk-comparar { margin-top: 8px; }
.lk-par { display: flex; gap: 8px; }
.lk-par .lk-mini-p { width: 96px; }
.lk-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lk-criar h3 { margin: 0 0 4px; font-size: var(--fb-texto-h3); }
.lk-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.lk-empresa { margin-top: 12px; }
.lk-sugestoes:not(:empty) { margin-top: 16px; }
.lk-sug-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lk-sug { border: 1px solid var(--fb-linha); border-radius: var(--fb-canto-m); padding: 12px; display: grid; gap: 4px; align-content: start; justify-items: start; }
.lk-sug p { margin: 0; }

/* Passo "Look e cenário" na tela de vídeo */
.lk-opcoes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lk-opcao {
  display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 8px;
  border: 1px solid var(--fb-linha); border-radius: var(--fb-canto-m); background: var(--fb-branco);
}
.lk-opcao:has(input:checked) { border-color: var(--fb-tinta); box-shadow: inset 0 0 0 1px var(--fb-tinta); }
.lk-opcao > span { display: grid; gap: 2px; min-width: 0; }
.lk-opcao .fb-apoio { font-size: var(--fb-texto-legenda); margin: 0; }

@media (max-width: 600px) {
  .lk-grade, .lk-opcoes { grid-template-columns: 1fr; }
  .lk-look { grid-template-columns: 96px minmax(0, 1fr); }
  .lk-par .lk-mini-p { width: 80px; }
}
/* Achado pela frente Looks em 03/11/2026: o nome longo das vozes esticava o campo e dava rolagem lateral em 375 px. */
#vd-form-video .fb-campo select { min-width: 0; width: 100%; }