/*
 * O DELTA desta ferramenta sobre o padrão de backoffice da Catalisa (`/kit/backoffice.css`).
 *
 * Botão, campo, cartão, aba, tabela, aviso, indicador e a casca de rail duplo vêm do kit, e as
 * regras abaixo só leem tokens (`var(--…)`): nenhuma cor, fonte ou raio literal. O que mora aqui é o
 * que só um gerador de vídeo tem: cartão de escolha com exemplo, player, linha de etapas, registro
 * ao vivo e a grade da biblioteca.
 */

/* ── a casca ocupa a janela: os rails ficam, só o conteúdo rola ── */
@media (min-width: 861px) {
  .casca { height: 100vh; }
  .principal { overflow-y: auto; }
  .ctxrail { overflow: hidden; }
}
.corpo { max-width: 1320px; width: 100%; }
.corpo .card { margin: 0; }
.sm { height: var(--ctl-sm); padding: 0 13px; font-size: var(--fs-sm); }
button svg, .botao svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone { width: var(--ctl-sm); padding: 0; justify-content: center; }
/* Link com cara de botão secundário (baixar arquivo): o kit só veste <button>. */
.botao { display: inline-flex; align-items: center; gap: 8px; height: var(--ctl-sm); padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 550; text-decoration: none; transition: 0.15s var(--ease); }
.botao:hover { background: var(--sunken); }
.ctxsel { cursor: default; }
.ctxsel:hover { border-color: var(--line); background: var(--surface-2); }
.ctxsel .avatar svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctxsel .logo { height: 15px; width: auto; color: var(--ink); --mark: var(--brand-500); display: block; margin-bottom: 3px; }
.trilho-item .n { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: var(--fs-3xs); font-weight: 600; flex: none; font-variant-numeric: tabular-nums; }
.trilho-item[aria-current="page"] .n { border-color: var(--brand-300); background: var(--surface); }
.trilho-item .n.feito { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-500); }
.trilho-item .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex: none; margin: 0 4px; }
.trilho-item .ponto.done { background: var(--success); }
.trilho-item .ponto.running, .trilho-item .ponto.queued { background: var(--info); }
.trilho-item .ponto.failed { background: var(--danger); }
.trilho-item .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.trilho-item .conta { margin-left: auto; color: var(--ink-3); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.cabeca .acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sub { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }
.secao { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 0; }

/* ── o estado, em uma pílula (irmã da .status-pill do kit, com as cores de cada estado) ── */
.status-pill.done { border-color: var(--success); color: var(--success); }
.status-pill.running, .status-pill.queued { border-color: var(--info); color: var(--info); }
.status-pill.failed { border-color: var(--danger); color: var(--danger); }
.status-pill.running i { animation: pulsa 1.2s var(--ease) infinite; }
@keyframes pulsa { 50% { opacity: 0.25; } }

/* ── a biblioteca ── */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.video { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--sh-sm); transition: 0.15s var(--ease); }
.video:hover { box-shadow: var(--sh); border-color: var(--line-strong); transform: translateY(-1px); }
.video .capa { aspect-ratio: 16 / 9; background: var(--sunken) center / cover no-repeat; display: grid; place-items: center; color: var(--ink-3); font-size: var(--fs-sm); border-bottom: 1px solid var(--line-soft); position: relative; }
.video .capa .fmt { position: absolute; right: 8px; bottom: 8px; background: var(--ink); color: var(--canvas); font-size: var(--fs-3xs); font-weight: 600; padding: 3px 7px; border-radius: var(--r-xs); letter-spacing: 0.02em; }
.video .dados { padding: 12px 14px 14px; display: grid; gap: 6px; }
.video .dados b { font-weight: 600; font-size: var(--fs-sm); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video .linha { gap: 8px; }

/* ── o passo a passo de criação ── */
.novo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.novo > .passo { display: grid; gap: 16px; min-width: 0; }
.resumo { position: sticky; top: 64px; }
.resumo dl { margin: 0; display: grid; gap: 10px; }
.resumo dt { font-size: var(--fs-2xs); color: var(--ink-3); }
.resumo dd { margin: 1px 0 0; font-size: var(--fs-sm); font-weight: 500; overflow-wrap: anywhere; }
.resumo .quadros { display: flex; gap: 8px; align-items: flex-end; margin-top: 4px; }
.resumo .quadro { border: 1.5px solid var(--brand-300); background: var(--brand-50); border-radius: 4px; height: 44px; }
.trilha-passos { display: flex; gap: 6px; align-items: center; font-size: var(--fs-xs); color: var(--ink-3); flex-wrap: wrap; }
.trilha-passos b { color: var(--ink); font-weight: 600; }
.trilha-passos i { width: 22px; height: 1px; background: var(--line-strong); }
.pe-passo { display: flex; gap: 10px; align-items: center; padding-top: 4px; }
.card > .explica { color: var(--ink-2); font-size: var(--fs-sm); margin: -6px 0 14px; max-width: 70ch; }
.campo-dica { color: var(--ink-3); font-size: var(--fs-xs); margin: 5px 0 0; }

/* O cartão de escolha: exemplo visual em cima, nome, o que é e quando usar. Um rádio de verdade por
   baixo, para o teclado funcionar; o estado marcado vem do `:has`, sem JavaScript. */
.escolhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.escolhas.largas { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.escolha { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: 0.15s var(--ease); position: relative; color: var(--ink); font-weight: 400; }
.escolha:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.escolha:has(input:checked) { border-color: var(--brand-400); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-ring); }
.escolha:has(input:focus-visible) { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.marcador { position: absolute; width: 0; height: 0; overflow: hidden; }
.escolha .exemplo.baixo { aspect-ratio: 16 / 5; }
.escolha .exemplo { aspect-ratio: 16 / 9; border-radius: var(--r-xs); overflow: hidden; background: var(--sunken); border: 1px solid var(--line-soft); margin-bottom: 6px; display: grid; place-items: center; color: var(--ink-3); }
.escolha .exemplo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.escolha .exemplo.duplo { grid-template-columns: 1fr 1fr; }
.escolha .exemplo svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.escolha b { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.escolha .oque { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; }
.escolha .quando { font-size: var(--fs-2xs); color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
.escolha .tag { font-size: var(--fs-3xs); padding: 1px 7px; color: var(--brand-500); border-color: var(--brand-200); background: var(--surface); }
/* A vibe se mostra em movimento: três blocos no ritmo de cada uma. */
.ritmo { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ritmo i { width: 22%; aspect-ratio: 1; border-radius: var(--r-xs); background: var(--brand-300); animation: ritmo var(--ms) var(--curva) infinite; }
.ritmo i:nth-child(2) { animation-delay: calc(var(--ms) * 0.15); background: var(--brand-400); }
.ritmo i:nth-child(3) { animation-delay: calc(var(--ms) * 0.3); background: var(--brand-500); }
@keyframes ritmo { 0%, 100% { transform: translateY(18%) scale(0.86); opacity: 0.45; } 50% { transform: translateY(-18%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ritmo i, .status-pill.running i { animation: none; } }
/* Formato: a proporção desenhada, para ninguém precisar decorar "9:16". */
.formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.formato { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--surface); position: relative; color: var(--ink); font-weight: 400; transition: 0.15s var(--ease); }
.formato:has(input:checked) { border-color: var(--brand-400); background: var(--brand-soft); }
.formato .forma { width: 34px; display: grid; place-items: center; flex: none; }
.formato .forma i { display: block; border: 1.5px solid var(--ink-3); border-radius: 3px; }
.formato:has(input:checked) .forma i { border-color: var(--brand-500); background: var(--surface); }
.formato b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.formato span { font-size: var(--fs-2xs); color: var(--ink-3); }
.solta { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 22px; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); cursor: pointer; background: var(--surface); transition: 0.15s var(--ease); }
.solta:hover, .solta.sobre { border-color: var(--brand-400); background: var(--brand-soft); color: var(--ink-2); }
.anexos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.anexos img { height: 54px; border-radius: var(--r-xs); border: 1px solid var(--line); }
details > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
details[open] > summary { margin-bottom: 12px; }

/* ── a página do vídeo ── */
.etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.etapa { padding: 12px 14px 14px; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line-soft); position: relative; display: grid; gap: 4px; align-content: start; transition: 0.15s var(--ease); }
.etapa:last-child { border-right: 0; }
.etapa:hover, .etapa.ativa { background: var(--surface-2); }
.etapa .cab { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; }
.etapa .check-badge { width: 20px; height: 20px; font-size: var(--fs-2xs); }
.etapa.st-done .check-badge { background: var(--success); color: var(--ink-inverted); }
.etapa.st-failed .check-badge { background: var(--danger); color: var(--ink-inverted); }
.etapa.st-pending .check-badge, .etapa.st-skipped .check-badge { background: var(--surface-3); color: var(--ink-3); }
.etapa .barra { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--brand-500); transition: width 0.4s var(--ease); }
.etapa.st-done .barra { background: var(--success); }
.etapa .meta { font-size: var(--fs-2xs); line-height: 1.4; }
.duas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tela { background: var(--sala-bg); border-radius: var(--r); overflow: hidden; display: grid; place-items: center; }
.tela video { display: block; max-width: 100%; max-height: 62vh; }
.progresso { height: 4px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; margin: 6px 0 10px; }
.progresso div { height: 100%; background: var(--brand-500); transition: width 0.3s var(--ease); }
.cenas { margin: 0 calc(var(--pad) * -1) calc(var(--pad) * -1); width: calc(100% + var(--pad) * 2); }
.cenas tr { cursor: pointer; transition: background 0.15s var(--ease); }
.cenas tbody tr:hover { background: var(--surface-2); }
.cenas tr.no-ar { background: var(--brand-soft); }
.cenas td, .cenas th { padding: 9px var(--pad); }
.cenas .t { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); width: 1%; white-space: nowrap; }
.cenas .acao { width: 1%; }
.elo { background: none; border: 0; height: 26px; width: 26px; padding: 0; justify-content: center; color: var(--ink-3); border-radius: var(--r-xs); }
.elo:hover:not([disabled]) { background: var(--surface-3); color: var(--ink); }
.registro { display: grid; gap: 0; max-height: 62vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.reg { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); border-left: 2px solid transparent; }
.reg:last-child { border-bottom: 0; }
.reg .hora { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-3); padding-top: 2px; }
.reg .quem { color: var(--ink-3); font-size: var(--fs-2xs); }
.reg.etapa-reg { background: var(--surface-2); font-weight: 600; }
.reg.warn { border-left-color: var(--warning); }
.reg.error { border-left-color: var(--danger); }
.reg.ok { border-left-color: var(--success); }
.reg.debug { color: var(--ink-3); }
.reg pre, .bloco { font-family: var(--font-mono); font-size: var(--fs-2xs); background: var(--sunken); border: 1px solid var(--line-soft); border-radius: var(--r-xs); padding: 8px 10px; margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; font-weight: 400; color: var(--ink-2); }
.roteiro { display: grid; gap: 10px; }
.cena { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; }
.cena.aberta { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-ring); }
.cena .foto { aspect-ratio: 16 / 9; border-radius: var(--r-xs); background: var(--sunken) center top / cover no-repeat; border: 1px solid var(--line-soft); position: relative; overflow: hidden; display: grid; place-items: center; color: var(--ink-3); font-size: var(--fs-2xs); }
.cena .foto .foco { position: absolute; border: 2px solid var(--accent); border-radius: 3px; }
.cena h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cena .fala { font-size: var(--fs-sm); }
.cena .kv { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--sunken); padding: 1px 6px; border-radius: var(--r-xs); }

/* ── como funciona ── */
.guia { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.guia .step p { margin: 2px 0 0; }
.glossario { display: grid; gap: 0; margin: 0; }
.glossario div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.glossario div:last-child { border-bottom: 0; }
.glossario dt { font-weight: 600; font-size: var(--fs-sm); }
.glossario dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* ── avisos que somem ── */
#toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 50; max-width: min(380px, calc(100vw - 36px)); }
.toast { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand-400); border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: var(--sh-lg); padding: 11px 14px; cursor: pointer; display: grid; gap: 2px; font-size: var(--fs-sm); }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warning); }

@media (max-width: 1100px) { .novo, .duas { grid-template-columns: minmax(0, 1fr); } .resumo { position: static; } }
@media (max-width: 560px) { .cena { grid-template-columns: 1fr; } .glossario div { grid-template-columns: 1fr; gap: 2px; } .topo .rotulo { display: none; } }

.cena .foto video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── no celular: uma coluna que cabe na tela, sem rolagem lateral ── */
@media (max-width: 860px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .icrail, .ctxrail, .principal { min-width: 0; }
  .ctxrail .trilho-pe { display: none; }
  .ctxsel { display: none; }
  .crs { padding-top: 8px; }
  .cabeca { flex-wrap: wrap; }
  .cabeca .acoes { justify-content: flex-start; }
  .cabeca h1 { font-size: var(--fs-2xl); }
  .etapas { grid-template-columns: 1fr 1fr; }
  .etapa { border-bottom: 1px solid var(--line-soft); }
  .trilha-passos { display: none; }
  .escolhas, .escolhas.largas { grid-template-columns: 1fr 1fr; }
  .videos { grid-template-columns: 1fr; }
  .topo { padding: 8px 14px; }
}

/* ── edição de textos e aparência ── */
.editor label { margin: 8px 0 3px; font-size: var(--fs-xs); }
.editor input, .editor textarea { font-size: var(--fs-sm); }
.cores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cor { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.cor input[type='color'] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: none; flex: none; cursor: pointer; }
.cor b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.cor span span { font-size: var(--fs-2xs); color: var(--ink-3); }
#look fieldset { margin-bottom: 18px; }

.escopo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.escopo .dia { background: var(--surface); }

.atualizar { margin: 0; border-radius: 0; position: sticky; top: 0; z-index: 9; }

.serie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); padding: 10px 14px; margin-bottom: 0; }
.serie svg { width: 13px; height: 13px; stroke: var(--ink-3); fill: none; stroke-width: 2; }
.serie .meta { flex-basis: 100%; font-size: var(--fs-2xs); }
#revisao { display: grid; gap: 12px; }
#revisao:empty { display: none; }

/* ── página de um item da biblioteca ── */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.galeria figure { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.galeria img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.galeria figcaption { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px; }
.galeria figcaption .sm { height: 30px; padding: 0 10px; font-size: var(--fs-xs); }

/* Tela de entrada (só existe quando o sistema está na internet). */
.entrar { min-height: 100dvh; display: grid; place-items: center; padding: 20px; background: var(--surface-2); }
.entrar .card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; }
.entrar-logo { height: 28px; align-self: flex-start; }
.entrar button { align-self: stretch; justify-content: center; margin-top: 6px; }