/* LANGRIS Clip — escopo .clip[data-clip] (área de trabalho) e .op-dialog.clip-agendar (diálogo).
 *
 * 25/09/2026 — o Clip veste o palco do protótipo que o dono aprovou em 24/09
 * ("tudo que tá lá já pode subir"): o vídeo escolhido grande, as origens e a
 * faixa "Vídeos recentes" à esquerda, o cartão de cortes à direita a partir de
 * 1100 px, verde-limão como cor de ação e o gradiente do CTA. Tudo por
 * grid-template-areas nos filhos diretos de .clip — sem wrapper novo no DOM,
 * porque a atualização cirúrgica (studio-clip.js) casa filhos diretos por
 * data-clip-no.
 *
 * Especificidade, não ordem: operacao-cobalto.css carrega DEPOIS desta folha
 * e remapeia o Clip com body.produto-operacional[data-op-tema] … (0,3,1).
 * Tudo aqui vai com body.produto-operacional[data-op-tema] .clip[data-clip]
 * (0,4,1) ou … .op-dialog.clip-agendar (0,4,1) e vence por peso. As poucas
 * regras sem prefixo servem fora do Clip (a moldura com estado da biblioteca,
 * a seção da biblioteca, o modal) e não competem com o cobalto.
 *
 * Sem style inline em lugar nenhum (a largura da barra e as proporções entram
 * por CSSOM); sem url() externo; sem @font-face; tipografia mínima 11 px. */

/* Tokens ------------------------------------------------------------------ */
body.produto-operacional[data-op-tema] :is(.clip[data-clip], .op-dialog.clip-agendar) {
  --video-verde: #b7ff48;
  --video-verde-ink: #0c1403;
  --video-verde-suave: rgba(183, 255, 72, .16);
  --video-magenta: #f153e9;
  --video-violeta: #8c67ff;
  --video-ambar: #ffad55;
  --video-erro: #ff626b;
  /* Tinta sobre o vermelho claro do escuro: o branco dá 2,9:1, esta dá 6,9:1. */
  --video-erro-ink: #160204;
  --video-palco: #090909;
  --video-linha: rgba(255, 255, 255, .1);
  /* O gradiente do CTA vai com as cores claras nos dois temas: o texto
     escuro por cima precisa delas para contrastar. */
  --video-cta: linear-gradient(100deg, #b7ff48, #ffe25c 38%, #f15ed4 72%, #8c67ff);
  --video-sombra: 0 30px 85px rgba(0, 0, 0, .45);
  /* O vocabulário antigo do Clip aponta para o novo: o JS não muda de classe. */
  --clip-laranja: var(--video-verde);
  --clip-laranja-suave: var(--video-verde-suave);
  --clip-ok: var(--video-verde);
  --clip-erro: var(--video-erro);
  --clip-erro-tinta: var(--video-erro-ink);
  --clip-ativo: var(--video-ambar);
  --clip-fundo-midia: var(--video-palco);
  /* Tom de apoio: --muted do tema (o cobalto o define), com o --exp-muted de reserva. */
  --clip-apoio: var(--muted, var(--exp-muted, #aaa));
  --clip-linha: var(--line, var(--exp-line, #333));
  --clip-tinta: var(--ink, var(--exp-ink, #eee));
  --clip-painel: var(--panel, var(--exp-surface, #0b0b0d));
  --clip-superficie: var(--surface, #0a0a0b);
}
body.produto-operacional[data-op-tema="claro"] :is(.clip[data-clip], .op-dialog.clip-agendar) {
  --video-verde: #486f00;
  --video-verde-ink: #ffffff;
  --video-verde-suave: rgba(72, 111, 0, .14);
  --video-ambar: #8a5c0b;
  --video-erro: #b3261e;
  --video-erro-ink: #ffffff;
  --video-palco: #0b0b0b;
  --video-linha: rgba(0, 0, 0, .12);
  --video-sombra: 0 18px 50px rgba(0, 0, 0, .1);
  /* Magenta mais escuro no claro: é cor de texto (rótulo da fila), precisa contrastar com o branco. */
  --video-magenta: #b0179f;
  --clip-apoio: oklch(.46 0 0);
}

/* A área: grid por áreas nomeadas ------------------------------------------ */
body.produto-operacional[data-op-tema] .clip[data-clip] {
  display: grid; gap: 18px; margin-bottom: 24px; color: var(--clip-tinta);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cab" "palco" "fonte" "escolhas" "fila";
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__cab { grid-area: cab; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco { grid-area: palco; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fonte { grid-area: fonte; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__escolhas { grid-area: escolhas; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fila { grid-area: fila; }
/* Duas colunas só com o cartão de cortes na tela (há vídeo escolhido): o
   palco e a faixa à esquerda, as escolhas fixas à direita. Sem escolhas, uma
   coluna — a faixa não precisa de metade da tela para si. */
@media (min-width: 1100px) {
  body.produto-operacional[data-op-tema] .clip[data-clip]:has(.clip__escolhas) {
    grid-template-columns: minmax(0, 1.44fr) minmax(340px, .68fr);
    grid-template-areas: "cab cab" "palco escolhas" "fonte escolhas" "fila fila";
    align-items: start;
  }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__escolhas { position: sticky; top: 16px; }
}
@media (min-width: 1440px) {
  body.produto-operacional[data-op-tema] .clip[data-clip]:has(.clip__escolhas) { grid-template-columns: minmax(0, 1.5fr) 400px; }
}

.clip .op-icone, .clip-agendar .op-icone { flex: none; }
.clip__glifo { display: inline-block; min-width: 1em; font-size: 13px; font-weight: 600; line-height: 1; text-align: center; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__rotulo {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--clip-apoio); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

/* Cabeçalho: o passo e o título; as origens desceram para a faixa ------------ */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__passo {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--clip-linha); border-radius: 50%;
  font-size: 12px; font-weight: 700; color: var(--video-verde);
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__marca h2 {
  margin: 0; font-family: var(--sans, 'Instrument Sans', sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--clip-tinta);
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__marca small { display: block; color: var(--clip-apoio); font-size: 12px; }
/* 26/09/2026 (acabamento): no cartão de cortes o título fecha com um fio, como o
   `.cut-card__head` do protótipo (cortador-automatico/clip.css). */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__escolhas > .clip__marca { padding-bottom: 18px; border-bottom: 1px solid var(--clip-linha); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__ib {
  display: inline-grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--clip-linha); border-radius: 10px; background: transparent; color: var(--clip-apoio);
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__ib:hover { background: var(--surface-soft, #222); color: var(--clip-tinta); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__ib:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 2px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__ib:disabled { opacity: .4; cursor: default; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__ib--ok { color: var(--video-verde); }

/* Palco: o vídeo escolhido, grande ------------------------------------------ */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco { display: grid; gap: 12px; min-width: 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-video {
  position: relative; overflow: hidden; border: 1px solid var(--video-linha); border-radius: 24px;
  background: var(--video-palco); box-shadow: var(--video-sombra);
}
/* É vídeo real, não capa: `contain` sobre o palco preto, nunca cortado.
   26/09/2026 (rebranding, largura): com a casca a 2560 px o teto fixo de 560 px
   virava uma caixa preta larga (em 2268 px, o vídeo 16:9 ocupava 996 dos 1792 px
   do palco). O teto passa a acompanhar a altura da janela: 560 px até 900 px de
   altura (igual a antes em 1512x900 e 1440x900), 740 em 1920x1080 e 863 em
   2268x1203, sempre dentro da dobra. Geometria: vale nos dois temas. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-midia { display: block; aspect-ratio: 16 / 9; max-height: max(560px, calc(100svh - 340px)); width: 100%; background: var(--video-palco); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-midia video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* A frase de estado da moldura não pode ficar entre a pessoa e os controles nativos. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-midia .clip-midia__estado { padding: 6px 8px; font-size: 11px; pointer-events: none; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-pilula {
  position: absolute; left: 18px; top: 16px; display: inline-flex; gap: 10px; align-items: center; padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(7, 7, 7, .65); color: #e6e3e9;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; backdrop-filter: blur(9px);
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-pilula b { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-meta > div { display: grid; gap: 3px; min-width: 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-meta strong { font-size: clamp(18px, 2vw, 26px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-meta small { display: block; color: var(--clip-apoio); font-size: 12px; font-variant-numeric: tabular-nums; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-trocar { flex: none; border-radius: 999px; }

/* Origens: enviar / importar do Drive ----------------------------------------- */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fonte { display: grid; gap: 10px; min-width: 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origem {
  display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 14px; border: 1px solid var(--clip-linha); border-radius: 15px;
  background: var(--clip-superficie); color: inherit; text-align: left; cursor: pointer; font: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origem > i {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--video-linha); border-radius: 10px; font-style: normal;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origem > span { display: grid; gap: 3px; min-width: 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origem strong { display: block; font-size: 13px; font-weight: 600; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origem small { display: block; color: var(--clip-apoio); font-size: 11px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origem--principal { border-color: var(--video-verde-suave); background: linear-gradient(120deg, var(--video-verde-suave), transparent 55%); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origem--principal > i { color: var(--video-verde); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origem:hover { border-color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origem:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 2px; }

/* Faixa: "Vídeos recentes · Ver todos →" e os cartões horizontais ------------ */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fonte-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fonte-cab h3 { margin: 0; font-size: 14px; font-weight: 650; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fonte-cab .op-link { padding: 4px 0; border: 0; background: transparent; color: var(--clip-apoio); font-size: 12px; cursor: pointer; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fonte-cab .op-link:hover { color: var(--clip-tinta); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fonte-cab .op-link:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 2px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__faixa { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__video {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 2px;
  flex: none; width: auto; min-width: 210px; max-width: 260px; padding: 6px 12px 6px 6px;
  border: 1px solid var(--clip-linha); border-radius: 13px; background: var(--clip-superficie); color: inherit;
  font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start;
  transition: border-color .15s ease, background-color .15s ease;
}
/* A miniatura ocupa as duas linhas; a duração e a data ficam ao lado. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__mini {
  grid-row: 1 / 3; width: 72px; aspect-ratio: 72 / 61; border: 1px solid var(--video-linha); border-radius: 9px; background: var(--video-palco);
  transition: border-color .15s ease;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__mini video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Na miniatura de 72 px a frase de estado ("A prévia não carregou (HTTP 404).")
   não cabe numa tarja: ela vira o próprio quadro, centrada, sem vazar. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__mini .clip-midia__estado { inset: 0; display: grid; place-items: center; padding: 4px; overflow: hidden; line-height: 1.2; font-size: 11px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__mini[data-clip-midia-estado="pronta"] .clip-midia__estado { inset: auto; display: block; width: 1px; height: 1px; padding: 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__video:hover { border-color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__video.ativo,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__video[aria-pressed="true"] { border-color: var(--video-verde); background: linear-gradient(120deg, var(--video-verde-suave), var(--clip-superficie) 62%); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__video:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 2px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__mini--mais { display: grid; place-items: center; border-style: dashed; color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__marca-ok {
  position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--video-verde); color: var(--video-verde-ink);
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__dur { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--clip-tinta); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__video small { color: var(--clip-apoio); font-size: 11px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__vazio {
  display: grid; justify-items: center; gap: 14px; padding: 56px 20px; border: 1px dashed var(--clip-linha);
  border-radius: 14px; color: var(--clip-apoio); text-align: center;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__vazio strong { color: var(--clip-tinta); font-size: 22px; letter-spacing: -.03em; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__vazio p { margin: 0 0 8px; max-width: 34ch; font-size: 14px; line-height: 1.6; text-wrap: balance; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__vazio > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__vazio--erro { border-style: solid; border-color: var(--video-erro); }
/* Os botões do estado vazio seguem o CTA do Clip, não o azul do casco. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__vazio .op-primary { border: 0; border-radius: 999px; background: var(--video-cta); color: #090909; font-weight: 600; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__vazio .op-primary:hover:not(:disabled) { background: var(--video-cta); filter: saturate(1.1); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__vazio .op-outline { border-radius: 999px; }

/* Escolhas: o cartão de cortes ------------------------------------------------ */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__escolhas {
  display: grid; gap: 18px; min-width: 0; padding: 22px; border: 1px solid var(--clip-linha); border-radius: 24px;
  background: radial-gradient(circle at 100% 0, rgba(140, 103, 255, .08), transparent 33%), var(--clip-painel);
  box-shadow: var(--video-sombra);
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__linha { display: flex; flex-wrap: wrap; gap: 18px 36px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__grupo { display: grid; gap: 8px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__opcoes { min-width: 0; padding: 14px 0; border-block: 1px solid var(--clip-linha); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__opcoes > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; cursor: pointer; list-style: none; font-size: 13px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__opcoes > summary::-webkit-details-marker { display: none; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__opcoes > summary::after { content: '+'; color: var(--clip-apoio); font-size: 20px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__opcoes[open] > summary::after { content: '−'; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__opcoes > summary b { font-weight: 500; color: var(--clip-apoio); overflow-wrap: anywhere; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__opcoes > summary small { margin-left: auto; color: var(--video-verde); font-size: 12px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__opcoes[open] > summary { margin-bottom: 16px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__opcoes > summary:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 5px; border-radius: 4px; }

/* O acervo continua no casco (fora de .clip); o polling atualiza só a seção interna. */
.op-clip-biblioteca { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line, var(--exp-line, #333)); color: var(--ink, var(--exp-ink, #eee)); }
.op-clip-biblioteca > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 6px 0 20px; cursor: pointer; list-style: none; }
.op-clip-biblioteca > summary::-webkit-details-marker { display: none; }
.op-clip-biblioteca > summary::after { content: '+'; margin-left: auto; font-size: 22px; color: var(--muted, var(--exp-muted, #aaa)); }
.op-clip-biblioteca[open] > summary::after { content: '−'; }
.op-clip-biblioteca > summary > span { font-size: 14px; font-weight: 600; }
.op-clip-biblioteca > summary > small { font-size: 12px; color: var(--muted, var(--exp-muted, #aaa)); }
.op-clip-biblioteca > summary:focus-visible { outline: 2px solid var(--accent, #b7ff48); outline-offset: 5px; border-radius: 4px; }

body.produto-operacional[data-op-tema] .clip[data-clip] .clip__stepper { display: inline-flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid var(--clip-linha); border-radius: 999px; background: var(--clip-superficie); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__stepper .clip__ib { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface-soft, #222); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__stepper .clip__ib:hover { color: var(--clip-tinta); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__num { min-width: 36px; color: var(--clip-tinta); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__toggle {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 6px; border: 1px solid var(--clip-linha);
  border-radius: 999px; background: transparent; color: var(--clip-apoio); font: inherit; font-size: 13px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__toggle > i { position: relative; display: block; width: 36px; height: 20px; border-radius: 999px; background: var(--surface-soft, #222); transition: background-color .15s ease; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__toggle > i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--clip-apoio); transition: transform .15s ease, background-color .15s ease; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__toggle[aria-checked="true"] { color: var(--clip-tinta); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__toggle[aria-checked="true"] > i { background: var(--video-verde); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__toggle[aria-checked="true"] > i::after { transform: translateX(16px); background: var(--video-verde-ink); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__toggle:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 2px; }

body.produto-operacional[data-op-tema] .clip[data-clip] .clip__formatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato {
  display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 12px 8px 10px; border: 1px solid var(--clip-linha);
  border-radius: 12px; background: transparent; color: var(--clip-apoio); font: inherit; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato:hover { border-color: var(--clip-apoio); color: var(--clip-tinta); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 2px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato.ativo,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato[aria-pressed="true"] { border-color: var(--video-verde); background: var(--video-verde-suave); color: var(--clip-tinta); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato strong { font-size: 13px; font-weight: 600; }
/* A proporção e as redes por escrito; quebra em duas linhas quando preciso. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato small { color: var(--clip-apoio); font-size: 11px; line-height: 1.35; text-align: center; text-wrap: balance; font-variant-numeric: tabular-nums; }
/* O desenho da proporção: uma moldura na razão do formato, por classe — e a
   razão exata em data-prop, aplicada por CSSOM em montar() para um formato
   novo do servidor não cair no quadrado da base. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato__quadro { display: grid; place-items: center; width: 100%; height: 44px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato__quadro i {
  display: block; box-sizing: border-box; height: 44px; max-width: 100%; aspect-ratio: 1 / 1;
  border: 1.5px solid currentColor; border-radius: 5px; background: linear-gradient(160deg, rgba(255, 255, 255, .08), transparent);
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato__quadro--9x16 i { aspect-ratio: 9 / 16; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato__quadro--4x5 i { aspect-ratio: 4 / 5; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato__quadro--1x1 i { aspect-ratio: 1 / 1; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato__quadro--16x9 i { height: 34px; aspect-ratio: 16 / 9; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato__quadro--2x3 i { aspect-ratio: 2 / 3; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato__quadro--3x4 i { aspect-ratio: 3 / 4; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato.ativo .clip-formato__quadro i,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato[aria-pressed="true"] .clip-formato__quadro i { border-color: var(--video-verde); background: linear-gradient(160deg, var(--video-verde-suave), transparent); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato__redes { display: inline-flex; gap: 4px; color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato.ativo .clip-formato__redes,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato[aria-pressed="true"] .clip-formato__redes { color: var(--video-verde); }
/* Único formato marcado: não dá para desmarcar, e o cursor diz isso. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato.travado,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-formato[aria-disabled="true"] { cursor: default; }

body.produto-operacional[data-op-tema] .clip[data-clip] .clip__prever { display: grid; gap: 14px; padding-top: 14px; border-top: 1px solid var(--clip-linha); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__tempo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__tempo > .op-icone,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__tempo > .clip__glifo { grid-row: 1 / 3; color: var(--video-verde); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__tempo span { color: var(--clip-tinta); font-size: 14px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__tempo b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__tempo small { font-size: 12px; }
/* O CTA do protótipo: gradiente, pílula, texto escuro. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__gerar {
  display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 10px; width: 100%; min-height: 54px; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--video-cta); color: #090909; font-weight: 600;
  box-shadow: 0 0 35px rgba(230, 89, 211, .15); transition: transform .2s ease, filter .2s ease;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__gerar:hover:not(:disabled) { transform: translateY(-1px); filter: saturate(1.1); background: var(--video-cta); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__gerar:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 3px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__gerar:disabled { filter: grayscale(.3); transform: none; cursor: wait; opacity: .8; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__nota { margin: 10px 0 0; color: var(--clip-apoio); font-size: 11px; text-align: center; }

/* Fila: trabalhos do Clip ---------------------------------------------------- */
/* 26/09/2026 (acabamento): a fila abre depois de um fio, como a `.result-area`
   do protótipo, e o rótulo "Trabalhos" leva o magenta do "TRABALHO ATUAL". */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fila { display: grid; gap: 12px; min-width: 0; margin-top: 22px; padding-top: 26px; border-top: 1px solid var(--clip-linha); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__fila > .clip__rotulo { color: var(--video-magenta); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job { display: grid; gap: 12px; min-width: 0; padding: 14px 16px; border: 1px solid var(--clip-linha); border-radius: 19px; background: var(--clip-painel); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__estado { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-soft, #222); color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job--processando .clip-job__estado,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job--agendado .clip-job__estado { color: var(--video-ambar); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job--processando .clip-job__estado .op-icone { animation: clip-girar 1.1s linear infinite; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job--concluido .clip-job__estado { color: var(--video-verde); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job--falhou .clip-job__estado,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job--indeterminado .clip-job__estado { color: var(--video-erro); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__quem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__quem strong { color: var(--clip-tinta); font-size: 14px; font-weight: 600; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__quando { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--clip-apoio); font-size: 12px; font-variant-numeric: tabular-nums; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__eta { display: inline-flex; align-items: center; gap: 6px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__pc { color: var(--video-verde); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__barra { display: grid; gap: 6px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__barra > i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft, #222); }
/* A largura entra por CSSOM em montar() (style.width), nunca por style="…" no HTML. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__barra > i > b { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--video-verde); transition: width .4s ease; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__etapa { color: var(--clip-apoio); font-size: 12px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__falha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--video-erro); font-size: 13px; }
/* Quem carrega o vermelho é a frase; o código é apoio para o suporte e fica no tom neutro. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__falha code { padding: 2px 6px; border-radius: 6px; background: var(--surface-soft, #222); color: var(--clip-apoio); font-size: 12px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__acao { margin: 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__chip {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--video-linha); border-radius: 999px;
  background: var(--surface-soft, #222); color: var(--clip-tinta); font-style: normal; font-size: 11px; font-weight: 600;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__chip--leg { padding: 0 6px; }
/* O motor que executou é FATO do trabalho, não destino: tom de apoio. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__chip--motor { color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__arquivos { color: var(--clip-apoio); font-size: 12px; font-variant-numeric: tabular-nums; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__barra--sem { padding: 2px 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__nota { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--clip-apoio); font-size: 12px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__nota--troca { color: var(--video-erro); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 12px; border-top: 1px solid var(--clip-linha); color: var(--clip-apoio); font-size: 12px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__saldo { margin-right: auto; font-variant-numeric: tabular-nums; }
/* 26/09/2026 (acabamento): "Agendar selecionados" segue o botão de agenda do protótipo
   (pílula verde-tingida), não o azul do casco — o Clip é verde/magenta. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__rodape .op-primary {
  border: 1px solid rgba(183, 255, 72, .28); border-radius: 999px; background: var(--video-verde-suave); color: var(--video-verde); font-weight: 600;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__rodape .op-primary:hover:not(:disabled) { background: var(--video-verde); color: var(--video-verde-ink); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__rodape .op-primary:disabled { opacity: .45; cursor: default; }

/* Motor de corte ------------------------------------------------------------- */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip__grupo--motor { gap: 8px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor {
  display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--clip-linha); border-radius: 14px;
  background: transparent; color: var(--clip-apoio); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor:hover { border-color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 2px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor strong { color: var(--clip-tinta); font-size: 13px; font-weight: 600; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor small { font-size: 12px; line-height: 1.45; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor em { font-style: normal; font-size: 11px; line-height: 1.45; opacity: .85; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor__selo { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor.ativo,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor[aria-pressed="true"] { border-color: var(--video-verde); background: var(--video-verde-suave); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor.ativo .clip-motor__selo,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor[aria-pressed="true"] .clip-motor__selo { color: var(--video-verde); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor--unico { cursor: default; }
/* Indisponível NÃO é um botão morto: ele responde dizendo por quê. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor--fora { border-style: dashed; cursor: not-allowed; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor--fora strong { color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motor--fora .clip-motor__selo { color: var(--video-erro); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motores__sem,
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motores__recusa { margin: 0; font-size: 12px; line-height: 1.45; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motores__sem { color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motores__recusa { color: var(--video-erro); font-weight: 600; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-motores__recusa[hidden] { display: none; }

/* Miniaturas: carregando, pronta, falha (também fora do Clip: biblioteca e diálogo) */
/* Retângulo preto não é prévia pronta. Enquanto o quadro não decodifica, a
   moldura diz que está carregando; se não vier, diz que falhou — com o
   código HTTP quando a consulta à mesma rota privada o devolve. */
.clip-midia { position: relative; display: block; overflow: hidden; }
.clip-midia video { display: block; width: 100%; height: 100%; }
.clip-midia__estado {
  position: absolute; inset: auto 0 0 0; padding: 4px 6px; background: rgba(0, 0, 0, .62); color: #fff;
  font-style: normal; font-size: 11px; line-height: 1.3; text-align: center;
}
body.produto-operacional[data-op-tema="claro"] .clip-midia__estado { background: rgba(0, 0, 0, .72); }
.clip-midia[data-clip-midia-estado="pronta"] .clip-midia__estado { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A tinta acompanha o fundo: fora do Clip os dois caem no par de reserva (#b3261e + branco). */
.clip-midia[data-clip-midia-estado="falha"] .clip-midia__estado { background: var(--clip-erro, #b3261e); color: var(--clip-erro-tinta, #fff); }
.clip-midia[data-clip-midia-estado="falha"] video { opacity: .25; }
/* No cartão do corte a moldura já tem a proporção da saída. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__midia { width: 100%; height: 100%; }
/* A mesma moldura serve a biblioteca logo abaixo: a aparência aprovada continua a dela. */
.op-library-preview.clip-midia { display: grid; place-items: center; }

/* Prévia dos cortes ----------------------------------------------------------- */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-cortes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
/* Três faixas declaradas: mídia, informação, ações. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; gap: 8px; min-width: 0; padding: 10px;
  border: 1px solid var(--clip-linha); border-radius: 19px; background: var(--clip-superficie);
}
/* Indisponível apaga a MÍDIA, não o cartão. */
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte--indisponivel .clip-corte__video { opacity: .55; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte--indisponivel .clip__chips { filter: grayscale(1); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__sel {
  position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-grid; place-items: center; box-sizing: border-box; width: 26px; height: 26px;
  border: 1px solid rgba(255, 255, 255, .65); border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
body.produto-operacional[data-op-tema="claro"] .clip[data-clip] .clip-corte__sel { border-color: rgba(0, 0, 0, .45); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__sel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__sel input:disabled { cursor: default; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__sel > span:not(.op-vh) { opacity: 0; transition: opacity .15s ease; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__sel:has(input:checked) { border-color: transparent; background: var(--video-verde); color: var(--video-verde-ink); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__sel:has(input:checked) > span:not(.op-vh) { opacity: 1; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__sel:has(input:focus-visible) { outline: 2px solid var(--video-verde); outline-offset: 2px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__video { display: grid; place-items: center; aspect-ratio: 9 / 16; max-height: 320px; overflow: hidden; border-radius: 12px; background: var(--video-palco); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__video--9x16 { aspect-ratio: 9 / 16; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__video--4x5 { aspect-ratio: 4 / 5; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__video--1x1 { aspect-ratio: 1 / 1; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__video--16x9 { aspect-ratio: 16 / 9; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__video--2x3 { aspect-ratio: 2 / 3; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__video--3x4 { aspect-ratio: 3 / 4; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__video video { width: 100%; height: 100%; object-fit: contain; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__sem { color: var(--clip-apoio); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__info { display: grid; align-content: start; gap: 6px; min-width: 0; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__tempo { display: inline-flex; align-items: center; gap: 6px; color: var(--clip-apoio); font-size: 12px; font-variant-numeric: tabular-nums; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__tempo b { color: var(--clip-tinta); font-weight: 600; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__arquivos { color: var(--clip-apoio); font-size: 11px; font-variant-numeric: tabular-nums; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__info small { display: -webkit-box; overflow: hidden; color: var(--clip-apoio); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__classificacao { display:grid; gap:4px; padding:8px 9px; border:1px solid color-mix(in srgb,var(--lg-violeta) 26%,var(--clip-linha)); border-radius:9px; background:color-mix(in srgb,var(--lg-violeta) 7%,transparent); }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__classificacao > span { display:flex; flex-wrap:wrap; gap:5px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__classificacao > span b { padding:3px 6px; border-radius:99px; background:color-mix(in srgb,var(--lg-violeta) 12%,transparent); color:var(--lg-violeta-texto); font-size:11px; font-weight:700; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__classificacao > strong { color:var(--clip-tinta); font-size:12px; font-weight:650; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__classificacao > small { -webkit-line-clamp:2; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__editar { margin-right: auto; padding: 7px 12px; border-radius: 999px; font-size: 12px; }
body.produto-operacional[data-op-tema] .clip[data-clip] .clip-corte__agendado { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; color: var(--video-verde); font-size: 11px; font-weight: 600; }

/* Diálogo: agendar em lote ---------------------------------------------------- */
.produto-operacional .modal__caixa--clip { width: min(1120px, calc(100vw - 32px)); max-width: 1120px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar h2 { display: flex; align-items: center; gap: 8px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .op-kicker { color: var(--video-verde); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 22px; align-items: start; margin-top: 14px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__form { display: grid; gap: 12px; min-width: 0; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__contas { display: flex; flex-wrap: wrap; gap: 8px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-conta {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--clip-linha);
  border-radius: 999px; background: transparent; color: var(--clip-apoio); font: inherit; font-size: 13px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-conta:hover { color: var(--clip-tinta); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-conta:focus-visible { outline: 2px solid var(--video-verde); outline-offset: 2px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-conta.ativo,
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-conta[aria-pressed="true"] { background: var(--video-verde-suave); border-color: var(--video-verde); color: var(--clip-tinta); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-conta[aria-pressed="true"] .pv-avatar { box-shadow: 0 0 0 2px var(--video-verde); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__aviso { display: inline-flex; align-items: center; gap: 6px; color: var(--clip-apoio); font-size: 12px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__cortes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__corte { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--clip-linha); border-radius: 12px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__mini { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; background: var(--video-palco); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__mini--9x16 { aspect-ratio: 9 / 16; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__mini--4x5 { aspect-ratio: 4 / 5; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__mini--1x1 { aspect-ratio: 1 / 1; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__mini--16x9 { aspect-ratio: 16 / 9; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__mini--2x3 { aspect-ratio: 2 / 3; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__mini--3x4 { aspect-ratio: 3 / 4; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__mini video { width: 100%; height: 100%; object-fit: contain; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__mini b { position: absolute; left: 4px; top: 4px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; }
/* `minmax(0, 1fr)`: a trilha `auto` tinha piso no min-content dos controles. */
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__quando,
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__legenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; color: var(--clip-apoio); font-size: 12px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__quando > span,
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__legenda > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__legenda > span b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
/* O estouro é dito por escrito no contador; a cor só reforça. */
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__legenda > span b.estourou { color: var(--video-erro); font-weight: 600; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__legenda[hidden] { display: none; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__nota { display: flex; align-items: center; gap: 6px; margin-top: -4px; color: var(--clip-apoio); font-size: 11px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__nota[hidden] { display: none; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar input[type="datetime-local"],
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar textarea {
  box-sizing: border-box; width: 100%; padding: 9px 11px; border: 1px solid var(--clip-linha); border-radius: 8px;
  background: var(--surface-soft, #222); color: var(--clip-tinta); font: inherit; font-size: 14px;
}
/* Piso e teto em MÚLTIPLOS de linha: o corte cai entre linhas, nunca no meio de uma. */
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar textarea { min-height: calc(4 * 1.5em + 20px); max-height: calc(12 * 1.5em + 20px); line-height: 1.5; resize: vertical; field-sizing: content; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar textarea[aria-invalid="true"],
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar input[aria-invalid="true"] { border-color: var(--video-erro); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__previa {
  position: sticky; top: 0; display: grid; justify-items: center; gap: 10px; max-height: 72vh; padding: 14px; overflow: auto;
  border: 1px solid var(--clip-linha); border-radius: 14px; background: var(--surface-soft, #222);
}
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__previa > * { width: 100%; max-width: 340px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__previa-vazia { display: grid; place-items: center; gap: 8px; min-height: 200px; color: var(--clip-apoio); font-size: 13px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__previa-simples { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--clip-linha); border-radius: 12px; background: var(--clip-painel); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__previa-simples p { margin: 0; white-space: pre-wrap; font-size: 13px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__resultado { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__resultado li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__resultado li.ok { color: var(--video-verde); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__resultado li.erro { color: var(--video-erro); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__resultado[hidden] { display: none; }
/* Confirmar com o mesmo CTA do cartão de cortes. */
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .op-dialog__acoes .op-primary { border: 0; border-radius: 999px; background: var(--video-cta); color: #090909; font-weight: 600; }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .op-dialog__acoes .op-primary:hover:not(:disabled) { background: var(--video-cta); filter: saturate(1.1); }
body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .op-dialog__acoes .op-outline { border-radius: 999px; }

/* Responsivo --------------------------------------------------------------- */
@media (max-width: 1099px) {
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__escolhas { position: static; }
}
@media (max-width: 900px) {
  body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__grade { grid-template-columns: 1fr; }
  body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__previa { position: static; max-height: none; }
}
@media (max-width: 640px) {
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__origens { grid-template-columns: 1fr; }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-video { border-radius: 16px; }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-midia { aspect-ratio: 4 / 3; max-height: none; }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-meta { flex-direction: column; align-items: flex-start; }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__palco-pilula { left: 12px; top: 10px; font-size: 11px; }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__video { min-width: 200px; }
}
@media (max-width: 600px) {
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__cab { align-items: flex-start; }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip__escolhas { padding: 16px; border-radius: 18px; }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip-cortes { grid-template-columns: 1fr 1fr; }
  body.produto-operacional[data-op-tema] .clip[data-clip] .clip-job__quando { margin-left: 0; flex-basis: 100%; }
  body.produto-operacional[data-op-tema] .op-dialog.clip-agendar .clip-agendar__corte { grid-template-columns: 56px minmax(0, 1fr); }
}

/* Movimento reduzido: preferência do sistema ou body.sem-movimento -------- */
@keyframes clip-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .clip *, .clip-agendar * { transition: none !important; animation: none !important; }
}
body.sem-movimento .clip *, body.sem-movimento .clip-agendar * { transition: none !important; animation: none !important; }

/* Pele Pulso — Vídeo (rebranding de 26/09/2026): Langris Clip, Agendar cortes,
 * Criar vídeo e a moldura do Editor vestem a paleta do Início (--lg-*, em
 * operacao-unificada.css). Só no escuro: o claro do Vídeo continua com os tons
 * próprios. Só a pele: a composição dos protótipos aprovados (palco, passos
 * numerados, pílulas, alternadores e o CTA em degradê) fica como está. Esta folha
 * carrega antes de operacao-unificada e de operacao-cobalto, então cada regra vence
 * por peso, qualificada pelo contêiner da tela. */

/* Paleta: o que a fundação ainda não apontou (âmbar, erro, o tingido do Criar
   vídeo) e o vocabulário neutro do Clip, que ainda lia o cinza do cobalto. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-video, .clip[data-clip], .op-dialog.clip-agendar) {
  --video-ambar: var(--lg-ambar);
  --video-erro: var(--lg-erro);
  --cv-acento-suave: color-mix(in srgb, var(--lg-rosa) 10%, transparent);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.clip[data-clip], .op-dialog.clip-agendar) {
  --clip-linha: var(--lg-linha);
  /* --clip-painel só entra em `background` (cartão de cortes, trabalhos, prévia simples): o degradê vale ali. */
  --clip-painel: var(--lg-coluna);
  --clip-superficie: var(--lg-cartao);
  --clip-apoio: var(--lg-apoio);
  --clip-tinta: var(--lg-tinta);
}

/* Clip: o rótulo sobre o vídeo vira o vidro do Início. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] .clip__palco-pilula {
  border-color: var(--lg-linha-forte);
  background: var(--lg-vidro);
  color: var(--lg-tinta-2);
  backdrop-filter: blur(12px);
}
/* Vazio com convite: tracejado do Início e o filme num selo tingido de rosa (o papel do Clip). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] .clip__vazio {
  border-color: var(--lg-linha-vazia);
  background: var(--lg-vazio-fundo);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] .clip__vazio > .op-icone:first-child {
  box-sizing: content-box;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--lg-rosa) 33%, transparent);
  border-radius: var(--lg-raio-botao);
  background: color-mix(in srgb, var(--lg-rosa) 7%, transparent);
  color: var(--lg-rosa);
}
/* Leitura que falhou: o par de erro do Início, com o alerta no mesmo selo. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] .clip__vazio--erro {
  border-style: solid;
  border-color: color-mix(in srgb, var(--lg-erro) 33%, transparent);
  background: color-mix(in srgb, var(--lg-erro) 7%, transparent);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] .clip__vazio--erro > .op-icone:first-child {
  border-color: color-mix(in srgb, var(--lg-erro) 33%, transparent);
  background: color-mix(in srgb, var(--lg-erro) 7%, transparent);
  color: var(--lg-erro);
}
/* Fila: o cinza chapado dos selos, trilhos e etiquetas vira o realce translúcido;
   o progresso usa o degradê do Início. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] :is(.clip-job__estado, .clip-job__barra > i, .clip__chip, .clip-job__falha code) {
  background: var(--lg-realce-2);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] .clip__chip { border-color: var(--lg-linha-selo); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] .clip-job__barra > i > b { background: var(--lg-progresso); }
/* "Agendar selecionados": a pílula tingida de limão, com o contorno a 33%. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] .clip-job__rodape .op-primary {
  border-color: color-mix(in srgb, var(--lg-limao) 33%, transparent);
}
/* Os botões próprios do Clip são .op-primary, mas seguem o protótipo (degradê ou pílula
   tingida, sem brilho): o brilho limão do principal da casca não vale aqui. O CTA
   "Gerar cortes" já declara o brilho dele e fica como está. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .clip[data-clip] :is(.clip__vazio, .clip-job__rodape) .op-primary,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog.clip-agendar .op-dialog__acoes .op-primary {
  box-shadow: none;
}

/* Agendar cortes: os atalhos viram pílula, como o resto do Clip; os campos seguem
   a receita do Início com o contorno de campo do escuro (#777, 4,2:1). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog.clip-agendar .clip-agendar__atalhos .op-outline {
  border-radius: var(--lg-raio-pilula);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog.clip-agendar :is(input[type="datetime-local"], textarea) {
  border-color: var(--line-strong);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-campo);
  color: var(--lg-tinta);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog.clip-agendar :is(input, textarea)[aria-invalid="true"] {
  border-color: var(--video-erro);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog.clip-agendar .clip-agendar__previa {
  border-color: var(--lg-linha);
  background: var(--lg-cartao);
}

/* Cabeçalho do Vídeo: o título de 72 px do protótipo fica; só a tinta e o subtítulo do Início. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video .op-head h1 { color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video .op-head > div > p { color: var(--lg-subtitulo); }

/* Criar vídeo: as duas colunas viram seções do Início (um contorno por nível) e os
   rótulos de "Quem aparece?" e da revisão ganham o ponto limão. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video :is(.cv-brief, .cv-lado) {
  border-color: var(--lg-linha);
  border-radius: var(--lg-raio-secao);
  background: var(--lg-coluna);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video .cv-revisao { border-top-color: var(--lg-linha); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video :is(.cv-quem, .cv-revisao) .cv-kicker::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--lg-limao);
  box-shadow: 0 0 10px var(--lg-limao);
  vertical-align: .1em;
}
/* Itens dentro da seção: cartão do Início, sem o contorno cinza que pesava mais que o
   da coluna. As escolhas marcadas continuam com o rosa (regras-base, não alcançadas aqui). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video :is(.cv-pilulas, .cv-presencas) [role="radio"]:not([aria-checked="true"]) {
  border-color: var(--lg-linha);
  background: var(--lg-cartao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video .cv-pilulas [role="radio"]:not([aria-checked="true"]):hover { border-color: var(--lg-linha-forte); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video .cv-item:not(:has(input:checked)) {
  border-color: var(--lg-linha);
  background: var(--lg-cartao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video .cv-roteiro { background: var(--lg-cartao); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video .cv-vazio { border-color: var(--lg-linha-vazia); }
@media (max-width: 640px) {
  body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-video :is(.cv-brief, .cv-lado) { border-radius: var(--lg-raio-cartao); }
}

/* Moldura do Editor: ocupa a tela inteira sobre o fundo do Início; o estado vira um
   cartão de seção e o giro fica limão. "Tentar de novo" e "Entrar de novo" são
   .op-primary e pegam o principal da casca. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main--editor .op-editor-embutido { background: var(--lg-fundo); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-editor-embutido .op-editor-estado { background: var(--lg-fundo); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-editor-embutido .op-editor-cartao {
  padding: 28px 32px;
  border: 1px solid var(--lg-linha);
  border-radius: var(--lg-raio-secao);
  background: var(--lg-coluna);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-editor-embutido .op-editor-cartao strong {
  color: var(--lg-tinta);
  font-size: var(--lg-titulo-secao);
  font-weight: var(--lg-titulo-peso);
  letter-spacing: -.01em;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-editor-embutido .op-editor-cartao p { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-editor-embutido .op-editor-giro {
  border-color: var(--lg-linha-forte);
  border-top-color: var(--lg-limao);
}
@media (max-width: 700px) {
  body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-editor-embutido .op-editor-cartao { padding: 22px 18px; }
}
/* Fim Pele Pulso */