/* Mesa — tema escuro neutro. Fonte do sistema, escala de 4 px, foco sempre visível. */

:root {
  color-scheme: dark;
  --bg: #0e0f11;
  --bg-2: #121417;
  --superficie: #16181c;
  --superficie-2: #1b1e23;
  --superficie-3: #22262c;
  --linha: #2a2f36;
  --linha-forte: #3a4049;
  --texto: #e7eaee;
  --texto-2: #a9b1bc;
  --texto-3: #7f8893;
  --acento: #6ea8fe;
  --acento-forte: #8db9ff;
  --acento-fundo: rgba(110, 168, 254, 0.14);
  --corte: #e5484d;
  --corte-forte: #f2555a;
  --sugerida: #f5a524;
  --nota: #9b7bf2;
  --ok: #3dd68c;
  --erro: #ff6369;
  --andamento: #6ea8fe;
  --alterado: #5eb1ff;
  --onda: #566273;
  --onda-tocada: #8795a8;
  --raio: 8px;
  --raio-p: 6px;
  --sombra: 0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --foco: 0 0 0 2px var(--bg), 0 0 0 4px var(--acento);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 14px/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
  min-width: 1024px;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-forte); }
code, kbd { font-family: var(--mono); font-size: 0.92em; }
kbd {
  display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--linha-forte); border-bottom-width: 2px; background: var(--superficie-2);
  color: var(--texto-2); font-size: 11px; line-height: 18px; text-align: center;
}
:focus { outline: none; }
:focus-visible { box-shadow: var(--foco); border-radius: var(--raio-p); }
.mudo { color: var(--texto-3); }
[hidden] { display: none !important; }

.pular {
  position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px;
  background: var(--superficie-3); border-radius: var(--raio-p); color: var(--texto);
}
.pular:focus { top: 12px; }

/* ---------------------------------------------------------- botões e campos */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--raio-p); border: 1px solid transparent;
  font-weight: 560; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s, opacity .12s;
}
.botao:disabled { opacity: .45; cursor: not-allowed; }
.botao-primario { background: var(--acento); color: #0b1424; }
.botao-primario:hover:not(:disabled) { background: var(--acento-forte); }
.botao-secundario { background: var(--superficie-3); border-color: var(--linha-forte); color: var(--texto); }
.botao-secundario:hover:not(:disabled) { background: #2a2f36; }
.botao-fantasma { background: transparent; color: var(--texto-2); }
.botao-fantasma:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
.botao-perigo { background: var(--corte); color: #fff; }
.botao-perigo:hover:not(:disabled) { background: var(--corte-forte); }
.botao-corte { background: rgba(229, 72, 77, 0.16); border-color: rgba(229, 72, 77, 0.55); color: #ffc9cb; }
.botao-corte:hover:not(:disabled) { background: rgba(229, 72, 77, 0.26); }
.botao-pequeno { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.botao-largo { width: 100%; }
.botao kbd { margin-left: auto; }
.botao-largo kbd { margin-left: 8px; }

.botao-icone {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--raio-p);
  border: 0; background: transparent; color: var(--texto-2); cursor: pointer;
}
.botao-icone:hover:not(:disabled) { background: var(--superficie-3); color: var(--texto); }
.botao-icone:disabled { opacity: .35; cursor: not-allowed; }
.botao-icone-pequeno { width: 28px; height: 28px; }
.botao-redondo {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--texto); color: #0e0f11;
  transition: transform .1s, background-color .12s;
}
.botao-redondo:hover { background: #fff; }
.botao-redondo:active { transform: scale(.96); }
.icone { flex: none; }

.campo {
  height: 36px; padding: 0 12px; border-radius: var(--raio-p); border: 1px solid var(--linha-forte);
  background: var(--bg-2); color: var(--texto); transition: border-color .12s, box-shadow .12s;
}
.campo::placeholder { color: var(--texto-3); }
.campo:hover { border-color: #4a515b; }
.campo:focus-visible { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); border-radius: var(--raio-p); }
.campo-pequeno { height: 30px; padding: 0 8px; font-size: 12.5px; }
select.campo { padding-right: 6px; }
.rotulo { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 560; color: var(--texto-2); }
.rotulo-inline { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }

/* ---------------------------------------------------------- carregando */

.tela-carregando, .editor-carregando {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60vh; color: var(--texto-2);
}
.giro {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linha-forte);
  border-top-color: var(--acento); animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro, .ponto-pulsa { animation: none !important; } }

/* ---------------------------------------------------------- login */

.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(110, 168, 254, 0.08), transparent 60%),
    var(--bg);
}
.login-sobreposta { position: fixed; inset: 0; z-index: 50; background: rgba(8, 9, 11, 0.86); backdrop-filter: blur(6px); }
.login-cartao {
  width: 360px; padding: 32px 32px 28px; border-radius: 14px; background: var(--superficie);
  border: 1px solid var(--linha); box-shadow: var(--sombra);
}
.login-marca { margin-bottom: 16px; }
.login-titulo { font-size: 24px; font-weight: 680; letter-spacing: -0.02em; }
.login-sub { margin: 4px 0 24px; color: var(--texto-2); font-size: 13.5px; }
.campo-grupo { position: relative; display: flex; }
.campo-grupo .campo { flex: 1; height: 42px; padding-right: 84px; font-size: 15px; }
.campo-acessorio {
  position: absolute; right: 6px; top: 6px; height: 30px; padding: 0 10px; border-radius: 5px;
  border: 0; background: transparent; color: var(--texto-3); font-size: 12.5px; cursor: pointer;
}
.campo-acessorio:hover { color: var(--texto); background: var(--superficie-3); }
.login-erro { min-height: 22px; margin: 8px 0 12px; color: var(--erro); font-size: 13px; }
.login .botao-largo { height: 42px; font-size: 14.5px; }

.marca-simbolo {
  display: inline-block; width: 22px; height: 22px; border-radius: 6px; position: relative;
  background: linear-gradient(135deg, #2c3340, #1d2129); border: 1px solid var(--linha-forte);
}
.marca-simbolo::before, .marca-simbolo::after {
  content: ""; position: absolute; left: 4px; right: 4px; height: 3px; border-radius: 2px;
}
.marca-simbolo::before { top: 6px; background: var(--acento); right: 9px; }
.marca-simbolo::after { top: 12px; background: var(--corte); left: 9px; }
.marca-grande { width: 40px; height: 40px; border-radius: 10px; }
.marca-grande::before { top: 11px; left: 8px; right: 16px; height: 5px; border-radius: 3px; }
.marca-grande::after { top: 21px; left: 16px; right: 8px; height: 5px; border-radius: 3px; }

/* ---------------------------------------------------------- casca */

.casca { min-height: 100vh; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px;
  height: 52px; padding: 0 24px; background: rgba(14, 15, 17, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 680; letter-spacing: -0.01em; font-size: 15px; }
.marca:hover { color: #fff; }
.topo-nav { flex: 1; min-width: 0; }
.trilha { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--texto-2); font-size: 13.5px; }
.trilha-sep { color: var(--linha-forte); }
.trilha-link { color: var(--texto-2); }
.trilha-link:hover { color: var(--texto); }
.trilha-item { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha-id { color: var(--texto-3); }
.conteudo { flex: 1; display: flex; flex-direction: column; }

/* ---------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px;
  font-size: 12px; font-weight: 560; white-space: nowrap; border: 1px solid transparent;
}
.etiqueta-ok { color: #8ef0bd; background: rgba(61, 214, 140, 0.12); border-color: rgba(61, 214, 140, 0.25); }
.etiqueta-erro { color: #ffa9ac; background: rgba(255, 99, 105, 0.12); border-color: rgba(255, 99, 105, 0.3); }
.etiqueta-andamento { color: #b5d2ff; background: rgba(110, 168, 254, 0.12); border-color: rgba(110, 168, 254, 0.28); }
.etiqueta-mudo { color: var(--texto-2); background: var(--superficie-3); border-color: var(--linha-forte); }
.etiqueta-corte { color: #ffc9cb; background: rgba(229, 72, 77, 0.18); border-color: rgba(229, 72, 77, 0.45); }
.etiqueta-sugerida { color: #ffd99a; background: rgba(245, 165, 36, 0.12); border-color: rgba(245, 165, 36, 0.4); border-style: dashed; }
.etiqueta-alterado { color: #bfe0ff; background: rgba(94, 177, 255, 0.12); border-color: rgba(94, 177, 255, 0.35); }
.etiqueta { max-width: 100%; }
.etiqueta-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ponto-pulsa { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .3; } }

/* ---------------------------------------------------------- lista */

.lista { width: 100%; max-width: 1240px; margin: 0 auto; padding: 32px 32px 48px; }
.lista-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.titulo-pagina { font-size: 22px; font-weight: 680; letter-spacing: -0.02em; }
.lista-contagem { display: block; margin-top: 2px; color: var(--texto-3); font-size: 13px; }
.abrir-id { display: flex; align-items: center; gap: 8px; }
.campo-id { width: 220px; font-family: var(--mono); font-size: 13px; }
.lista-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.lista-barra-dir { display: flex; gap: 8px; align-items: center; }
.campo-busca { width: 260px; }

.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px;
  border: 1px solid var(--linha); background: transparent; color: var(--texto-2); font-size: 13px; cursor: pointer;
}
.filtro:hover { border-color: var(--linha-forte); color: var(--texto); }
.filtro[aria-pressed="true"] { background: var(--superficie-3); border-color: var(--linha-forte); color: var(--texto); }
.filtro-n { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.filtros-compactos .filtro { height: 26px; padding: 0 10px; font-size: 12.5px; }

.tabela { border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; background: var(--superficie); }
.tabela-cabeca, .trabalho {
  display: grid; grid-template-columns: 132px 128px minmax(0, 1fr) 64px 132px 72px;
  align-items: center; gap: 16px; padding: 0 20px;
}
.tabela-cabeca {
  height: 38px; color: var(--texto-3); font-size: 12px; font-weight: 560; text-transform: uppercase;
  letter-spacing: .04em; background: var(--bg-2); border-bottom: 1px solid var(--linha);
}
.trabalho { min-height: 60px; border-bottom: 1px solid var(--linha); color: var(--texto); }
.trabalho:last-child { border-bottom: 0; }
.trabalho-abrivel { cursor: pointer; transition: background-color .1s; }
.trabalho-abrivel:hover { background: var(--superficie-2); color: var(--texto); }
.trabalho-abrivel:hover .col-acao { color: var(--acento); }
.trabalho-abrivel:focus-visible { box-shadow: inset 0 0 0 2px var(--acento); border-radius: 0; }
div.trabalho { color: var(--texto-2); }
.col-estado { display: flex; min-width: 0; }
.col-rotulo { display: flex; flex-direction: column; min-width: 0; }
.trabalho-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
.trabalho-id { color: var(--texto-3); font-size: 12px; }
.col-versao, .col-quando { color: var(--texto-2); font-variant-numeric: tabular-nums; font-size: 13px; }
.col-acao { color: var(--texto-3); font-size: 13px; text-align: right; }
.servico { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.servico::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--texto-3); }
.servico-decupador::before { background: var(--corte); }
.servico-legendador::before { background: var(--sugerida); }
.servico-dinamizador::before { background: var(--nota); }

.carregando { padding: 8px 20px; }
.linha-esqueleto {
  height: 44px; margin: 8px 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--superficie-2) 0%, var(--superficie-3) 50%, var(--superficie-2) 100%);
  background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite;
}
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.vazio {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 64px 24px; border: 1px dashed var(--linha-forte); border-radius: 12px; background: var(--bg-2);
}
.vazio-pagina { margin: 64px auto; width: min(560px, 100% - 48px); }
.vazio-icone {
  width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; position: relative;
  background: var(--superficie-3); border: 1px solid var(--linha-forte);
}
.vazio-icone::before, .vazio-icone::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 4px; border-radius: 2px; background: var(--linha-forte);
}
.vazio-icone::before { top: 14px; right: 18px; }
.vazio-icone::after { top: 24px; left: 18px; }
.vazio-erro .vazio-icone::after { background: var(--erro); }
.vazio-titulo { font-size: 16px; font-weight: 620; }
.vazio-texto { max-width: 460px; color: var(--texto-2); }
.vazio .botao { margin-top: 12px; }

/* ---------------------------------------------------------- editor */

.editor { display: flex; flex-direction: column; gap: 14px; padding: 18px 24px 0; flex: 1; }
.editor-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.editor-titulos { min-width: 0; }
.editor-titulo { font-size: 19px; font-weight: 660; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 2px; color: var(--texto-3); font-size: 13px; }
.editor-meta > span + span::before, .editor-meta > button::before { content: none; }
.editor-versao { color: var(--texto-2); font-weight: 600; }
.id-copiar {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; margin-left: -6px; height: 24px;
  border: 0; border-radius: 5px; background: transparent; color: var(--texto-3); cursor: pointer;
}
.id-copiar:hover { background: var(--superficie-2); color: var(--texto-2); }
.editor-cabeca-acoes { display: flex; align-items: center; gap: 10px; flex: none; }

.faixa-aviso {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--raio);
  font-size: 13.5px; line-height: 1.45;
}
.faixa-aviso .icone, .faixa-aviso .giro { flex: none; margin-top: 1px; }
.faixa-aviso .giro { width: 16px; height: 16px; }
.faixa-aviso-erro { background: rgba(255, 99, 105, 0.1); border: 1px solid rgba(255, 99, 105, 0.35); color: #ffd3d5; }
.faixa-aviso-andamento { background: rgba(110, 168, 254, 0.1); border: 1px solid rgba(110, 168, 254, 0.3); color: #d6e6ff; }

.editor-grade { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 380px); gap: 16px; align-items: stretch; }

.palco { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; background: #000; }
.palco-quadro { position: relative; height: clamp(176px, calc(100vh - 592px), 480px); background: #000; }
.palco-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.palco-aviso {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px; text-align: center; color: var(--texto-2); background: var(--bg-2);
}
.palco-aviso strong { color: var(--texto); font-size: 15px; }
.palco-aviso span { max-width: 420px; }
.palco-selo {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 24px;
  padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 560; color: #ffd3d5;
  background: rgba(20, 8, 9, 0.72); border: 1px solid rgba(229, 72, 77, 0.5);
}
.transporte {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--superficie); border-top: 1px solid var(--linha);
}
.transporte-grupo { display: flex; align-items: center; gap: 6px; }
.tempo { margin-left: 10px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.tempo-atual { color: var(--texto); }
.tempo-total { color: var(--texto-3); }

.alternador {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 6px; border-radius: 15px;
  border: 1px solid var(--linha); background: transparent; color: var(--texto-2); font-size: 13px; cursor: pointer;
}
.alternador:hover { border-color: var(--linha-forte); color: var(--texto); }
.alternador-trilho { width: 30px; height: 18px; border-radius: 9px; background: var(--superficie-3); position: relative; transition: background-color .15s; border: 1px solid var(--linha-forte); }
.alternador-bola { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--texto-3); transition: transform .15s, background-color .15s; }
.alternador[aria-pressed="true"] { color: var(--texto); }
.alternador[aria-pressed="true"] .alternador-trilho { background: rgba(229, 72, 77, 0.35); border-color: rgba(229, 72, 77, 0.6); }
.alternador[aria-pressed="true"] .alternador-bola { transform: translateX(12px); background: #fff; }

/* painel */
/* contain: size — o painel não empurra a grade: a altura é a do palco e o conteúdo rola */
.painel { display: flex; flex-direction: column; min-height: 0; contain: size; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); overflow: hidden; }
.abas { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--linha); background: var(--bg-2); }
.aba {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border: 0; background: transparent; color: var(--texto-3); font-size: 13px; font-weight: 560; cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { color: var(--texto); }
.aba[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 1px; background: var(--acento); }
.aba-n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--superficie-3); color: var(--texto-2); font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; }
.aba-n-destaque { background: var(--alterado); color: #061423; font-weight: 680; }
.painel-corpo { flex: 1; min-height: 0; overflow: auto; padding: 16px; overscroll-behavior: contain; }
.painel-corpo:focus-visible { box-shadow: inset 0 0 0 2px var(--acento); border-radius: 0; }

.painel-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 32px 12px; }
.painel-vazio-ilustra { display: flex; gap: 4px; margin-bottom: 12px; }
.painel-vazio-ilustra span { width: 28px; height: 18px; border-radius: 4px; }
.painel-vazio-ilustra span:nth-child(1) { background: var(--corte); opacity: .85; }
.painel-vazio-ilustra span:nth-child(2) { border: 1.5px dashed var(--sugerida); background: rgba(245, 165, 36, 0.14); width: 40px; }
.painel-vazio-ilustra span:nth-child(3) { background: var(--nota); opacity: .85; width: 18px; }
.painel-vazio-titulo { font-weight: 620; }
.painel-vazio-texto { color: var(--texto-2); font-size: 13px; max-width: 280px; }

.item-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item-cor { width: 10px; height: 10px; border-radius: 3px; }
.item-titulo { font-size: 16px; font-weight: 640; margin-right: 2px; }
.item-posicao { margin: 2px 0 14px; color: var(--texto-3); font-size: 12.5px; font-family: var(--mono); }
.item-acao-principal { display: grid; gap: 8px; margin-bottom: 16px; }
.item-ouvir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.item-ouvir .botao { height: 32px; padding: 0 8px; font-size: 12.5px; gap: 6px; }
.item-acao-principal .botao { height: 40px; }
.dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 14px; }
.dado dt { color: var(--texto-3); font-size: 12px; }
.dado dd { margin: 0; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.dado-antes { color: var(--texto-3); font-size: 12px; font-family: var(--fonte); }
.confianca { display: inline-flex; align-items: center; gap: 8px; }
.confianca-barra { width: 54px; height: 6px; border-radius: 3px; background: var(--superficie-3); overflow: hidden; }
.confianca-barra span { display: block; height: 100%; background: var(--texto-2); }
.item-observacao { padding: 8px 10px; margin-bottom: 14px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--linha); color: var(--texto-2); font-size: 13px; }
.subtitulo { font-size: 12px; font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.item-trecho { margin-bottom: 14px; }
.trecho { padding: 10px 12px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--linha); font-size: 14px; line-height: 1.6; }
.trecho-contexto { color: var(--texto-3); }
del.trecho-dentro { color: #ffb4b7; text-decoration: line-through; text-decoration-color: rgba(229, 72, 77, 0.8); background: rgba(229, 72, 77, 0.14); border-radius: 3px; padding: 0 2px; }
mark.trecho-dentro { color: #ffe2b0; background: rgba(245, 165, 36, 0.16); border-radius: 3px; padding: 0 2px; }
.trecho-pausa { display: inline-block; padding: 0 6px; border-radius: 4px; border: 1px dashed var(--linha-forte); color: var(--texto-2); font-size: 12px; }
.trecho-pausa-cortada { border-color: rgba(229, 72, 77, 0.6); color: #ffb4b7; }
.item-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.item-botoes .botao { height: 32px; padding: 0 10px; font-size: 12.5px; }
.item-nav { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--linha); }

.itens-resumo { color: var(--texto-2); font-size: 13px; margin-bottom: 10px; }
.itens .filtros { margin-bottom: 10px; }
.itens-lista, .mudancas-lista, .resumo-lista { list-style: none; margin: 0; padding: 0; }
.item-linha {
  display: grid; grid-template-columns: 14px 1fr auto 64px 8px; align-items: center; gap: 10px; width: 100%;
  height: 34px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--texto); cursor: pointer; text-align: left;
}
.item-linha:hover { background: var(--superficie-2); }
.item-linha-sel { background: var(--superficie-3); box-shadow: inset 2px 0 0 var(--acento); }
.item-amostra { width: 12px; height: 12px; border-radius: 3px; }
.item-amostra-cheia { background: var(--c); }
.item-amostra-vazada { border: 1.5px dashed var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.item-linha-nome { font-size: 13px; }
.item-linha-tempo, .item-linha-dur { font-family: var(--mono); font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; text-align: right; }
.item-linha-alt { width: 7px; height: 7px; border-radius: 50%; background: var(--alterado); }
.item-linha-alt.vazio-alt { background: transparent; }

.mudanca { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--linha); }
.mudanca:last-child { border-bottom: 0; }
.mudanca-ir { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 6px; }
.mudanca-ir:hover { background: var(--superficie-2); }
.mudanca-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 560; }
.mudanca-desc { color: var(--texto-2); font-size: 12.5px; padding-left: 20px; }

/* linha do tempo */
.editor-linha-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: -6px; }
.legenda { display: flex; align-items: center; gap: 6px 16px; min-width: 0; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.zoom { display: flex; align-items: center; gap: 2px; flex: none; }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-dica { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; padding-left: 8px; border-left: 1px solid var(--linha); }
.amostra { width: 18px; height: 10px; border-radius: 2px; }
.amostra-corte { background: var(--corte); }
.amostra-sugerida { border: 1.5px dashed var(--sugerida); background: rgba(245, 165, 36, 0.16); }
.amostra-nota { background: var(--nota); }
.amostra-alterado { width: 8px; height: 8px; border-radius: 50%; background: var(--alterado); }

.editor-linha { border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.linha { display: grid; grid-template-columns: 92px minmax(0, 1fr); user-select: none; -webkit-user-select: none; }
.linha-rotulos { border-right: 1px solid var(--linha); background: var(--superficie); }
.linha-rotulo {
  display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--texto-3);
  font-size: 11.5px; font-weight: 560; letter-spacing: .01em; border-bottom: 0;
}
.linha-rotulo-cor { width: 6px; height: 6px; border-radius: 2px; }
.linha-pista { position: relative; min-width: 0; }
.linha-pista canvas { display: block; }
.linha-geral { cursor: pointer; border-bottom: 1px solid var(--linha); }
.linha-regua { cursor: text; }
.linha-onda { background: #101215; }
.linha-faixas { touch-action: none; }
.linha-sobre { position: absolute; left: 0; pointer-events: none; }
.linha-dica {
  position: absolute; z-index: 5; pointer-events: none; padding: 5px 9px; border-radius: 6px; white-space: nowrap;
  background: #2b3038; border: 1px solid var(--linha-forte); color: var(--texto); font-size: 12px; box-shadow: var(--sombra);
}

/* rodapé do editor */
.editor-rodape {
  position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 2px -24px 0; padding: 12px 24px; background: rgba(18, 20, 23, 0.94); backdrop-filter: blur(8px);
  border-top: 1px solid var(--linha);
}
.rodape-info { display: flex; align-items: center; gap: 18px; min-width: 0; font-size: 13.5px; color: var(--texto-2); }
.rodape-mudancas { font-weight: 600; color: var(--texto-3); }
.rodape-mudancas.tem-mudancas { color: var(--alterado); }
.rodape-mudancas.tem-mudancas::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--alterado); vertical-align: 1px; }
.rodape-duracao strong { color: var(--texto); font-family: var(--mono); font-weight: 600; }
.rodape-acoes { display: flex; align-items: center; gap: 6px; }
.rodape-acoes .botao-primario { margin-left: 6px; }

.editor-travado .linha-faixas { cursor: progress !important; }

/* ---------------------------------------------------------- editores de legenda e dinamização */

.etiqueta-fala { color: #b9f3ec; background: rgba(47, 180, 166, 0.14); border-color: rgba(47, 180, 166, 0.4); }
.etiqueta-impacto { color: #ffd2a8; background: rgba(232, 150, 74, 0.14); border-color: rgba(232, 150, 74, 0.45); }
.amostra-fala { background: #2fb4a6; }
.amostra-impacto { background: #e8964a; }
.amostra-oculto { border: 1.5px dashed #7b8492; background: rgba(123, 132, 146, 0.14); }
.amostra-destaque { width: 12px; height: 12px; border-radius: 3px; background: #f5c542; box-shadow: inset 0 0 0 1px #fff3c4; }
.amostra[style*="--c"] { background: var(--c); }
.amostra-vazada[style*="--c"] { background: color-mix(in srgb, var(--c) 16%, transparent); border: 1.5px dashed var(--c); }

/* "Agora": a legenda editada no instante do vídeo */
.legenda-agora {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 40px;
  padding: 6px 12px; background: #0b0c0e; border-top: 1px solid var(--linha); font-size: 14px;
}
.agora-rotulo { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.agora-texto { min-width: 0; color: #f6f7f9; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agora-meta { font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.legenda-agora-oculta .agora-texto { color: var(--texto-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); font-weight: 500; }
mark.destaque { background: transparent; color: #f5c542; font-weight: 750; }
mark.destaque-mudo { color: #c7b06a; text-decoration: underline dotted rgba(245, 197, 66, 0.6); text-underline-offset: 3px; font-weight: 650; }

.secao { margin-bottom: 16px; }
.secao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.secao-cabeca .subtitulo { margin-bottom: 0; }
.secao-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.secao-dupla .campo, .secao-dupla select.campo { width: 100%; }
.rotulo-campo { display: grid; gap: 4px; font-size: 12px; color: var(--texto-3); }
.rotulo-campo .campo { width: 100%; }
.dica-campo { margin-top: 6px; color: var(--texto-3); font-size: 12.5px; line-height: 1.45; }
.dica-campo q { color: var(--texto-2); }
.dica-alerta { color: #e6c98a; }
.campo-erro { margin-top: 6px; color: #ffb4b7; font-size: 12.5px; }
textarea.campo { display: block; width: 100%; height: auto; min-height: 58px; padding: 8px 10px; line-height: 1.45; resize: vertical; font-size: 14px; }
textarea.campo[aria-invalid="true"] { border-color: var(--erro); }

.previa-caixa {
  position: relative; display: grid; place-items: center; min-height: 64px; padding: 12px 14px; border-radius: 8px;
  background: radial-gradient(120% 140% at 50% 0%, #2a3038 0%, #121417 70%); border: 1px solid var(--linha); text-align: center;
}
.previa-legenda { font-size: 17px; font-weight: 700; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.previa-caixa-oculta .previa-legenda { color: var(--texto-3); text-decoration: line-through; text-shadow: none; font-weight: 550; }
.previa-selo {
  position: absolute; right: 8px; top: 8px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; line-height: 20px;
  color: var(--texto-2); background: var(--superficie-3); border: 1px solid var(--linha-forte);
}

.alternador-ok[aria-pressed="true"] .alternador-trilho { background: rgba(61, 214, 140, 0.32); border-color: rgba(61, 214, 140, 0.6); }
.alternador:disabled { opacity: .45; cursor: not-allowed; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--linha-forte); background: var(--superficie-2);
  color: var(--texto); font-size: 13.5px; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s;
}
.chip:hover:not(:disabled) { border-color: #59616c; background: var(--superficie-3); }
.chip[aria-pressed="true"] { background: #f5c542; border-color: #f5c542; color: #241c02; font-weight: 650; }
.chip[aria-pressed="true"]:hover:not(:disabled) { background: #ffd35c; }
.chip:disabled { cursor: not-allowed; opacity: .55; }
.chip-oculta { border-style: dashed; color: var(--texto-3); background: transparent; text-decoration: line-through; }

.cartao-global { margin-bottom: 14px; padding: 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--linha); }
.cartao-global .subtitulo { margin-bottom: 8px; }
.blocos-busca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.blocos-busca .filtros { margin-bottom: 0; flex-wrap: nowrap; }
.blocos-busca .campo { width: 120px; min-width: 0; }
.bloco-linha { grid-template-columns: 14px minmax(0, 1fr) auto 8px; }
.bloco-linha .item-linha-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riscado { text-decoration: line-through; color: var(--texto-3); }
.rodape-problema { color: #ffb4b7; }
.itens-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.itens-cabeca .itens-resumo { margin-bottom: 0; }

.ilustra-legenda span:nth-child(1) { background: #2fb4a6; opacity: .85; }
.ilustra-legenda span:nth-child(2) { background: #e8964a; border: 0; width: 40px; }
.ilustra-legenda span:nth-child(3) { background: transparent; border: 1.5px dashed #7b8492; width: 22px; }
.ilustra-dinamizacao span:nth-child(1) { background: rgba(47, 180, 166, 0.3); border: 1.5px solid #2fb4a6; }
.ilustra-dinamizacao span:nth-child(2) { background: rgba(245, 165, 36, 0.3); border: 1.5px solid #f5a524; width: 40px; }
.ilustra-dinamizacao span:nth-child(3) { background: rgba(240, 98, 146, 0.3); border: 1.5px solid #f06292; width: 18px; }

/* efeitos da dinamização */
.efeitos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.efeito {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
  border-radius: 7px; border: 1px solid var(--linha-forte); background: var(--superficie-2); color: var(--texto-2);
  font-size: 13px; cursor: pointer; text-align: left;
}
.efeito:hover:not(:disabled) { color: var(--texto); border-color: #59616c; }
.efeito-sel { color: var(--texto); background: color-mix(in srgb, var(--c) 16%, var(--superficie-2)); border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.efeito:disabled { opacity: .5; cursor: not-allowed; }
.efeito-cor { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.efeito-nome { font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.efeito-padrao { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); }

.campo-deslizante { margin-bottom: 12px; }
.deslizante-cabeca { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
.deslizante-cabeca .rotulo { margin-bottom: 0; }
.deslizante-valor { font-family: var(--mono); font-size: 13px; color: var(--texto); font-variant-numeric: tabular-nums; }
input.deslizante { width: 100%; margin: 6px 0 0; accent-color: var(--acento); height: 20px; cursor: pointer; }
input.deslizante:disabled { cursor: not-allowed; opacity: .5; }
input.deslizante:focus-visible { box-shadow: none; outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 10px; }
.campo-tempo { font-family: var(--mono); }
/* a dinamização tem uma faixa só: sobra altura para o vídeo */
/* telas estreitas: abas e painel mais compactos */
@media (max-width: 1180px) {
  .aba { padding: 0 9px; gap: 5px; }
  .painel-corpo { padding: 14px 12px; }
}
.editor-dinamizador .palco-quadro { height: clamp(200px, calc(100vh - 536px), 520px); }

/* diálogos */
.dialogo {
  width: 440px; max-width: calc(100vw - 48px); padding: 0; border-radius: 12px; border: 1px solid var(--linha-forte);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra);
}
.dialogo-largo { width: 560px; }
.dialogo::backdrop { background: rgba(5, 6, 8, 0.66); backdrop-filter: blur(2px); }
.dialogo-titulo { padding: 20px 22px 0; font-size: 17px; font-weight: 660; }
.dialogo-corpo { padding: 12px 22px 4px; color: var(--texto-2); }
.dialogo-corpo p + p { margin-top: 8px; }
.dialogo-alerta { color: #e6c98a; }
.dialogo-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 18px 22px 20px; }

.resumo-numeros { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; color: var(--texto); }
.resumo-numeros strong { display: inline-block; min-width: 26px; font-variant-numeric: tabular-nums; }
.resumo-duracao { margin-bottom: 12px; color: var(--texto); }
.resumo-duracao strong { font-family: var(--mono); }
.resumo-detalhes { margin-bottom: 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--bg-2); }
.resumo-detalhes summary { padding: 8px 12px; cursor: pointer; color: var(--texto-2); font-size: 13px; }
.resumo-lista { max-height: 220px; overflow: auto; padding: 0 12px 10px; font-size: 13px; }
.resumo-lista li { padding: 3px 0; }
.resumo-quando { font-family: var(--mono); color: var(--texto-3); font-size: 12px; }
.nota-aviso {
  display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(245, 165, 36, 0.1); border: 1px solid rgba(245, 165, 36, 0.35); color: #ffe2b0; font-size: 13px;
}
.resumo-rodape { font-size: 12.5px; }

.atalhos { display: grid; gap: 8px; margin: 0; }
.atalhos-grupos .subtitulo { margin: 16px 0 8px; }
.atalho { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; }
.atalho-mouse { color: var(--texto); font-size: 13px; font-weight: 560; }
.atalho dt { display: flex; gap: 4px; flex-wrap: wrap; }
.atalho dd { margin: 0; color: var(--texto-2); font-size: 13px; }

/* avisos */
.avisos { position: fixed; right: 20px; bottom: 84px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.aviso {
  display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 10px 10px 10px 14px; border-radius: 8px;
  background: #23272e; border: 1px solid var(--linha-forte); box-shadow: var(--sombra); font-size: 13.5px;
  animation: entrar .18s ease-out;
}
.aviso-ok { border-left: 3px solid var(--ok); }
.aviso-erro { border-left: 3px solid var(--erro); }
.aviso-info { border-left: 3px solid var(--acento); }
.aviso-fechar { width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: var(--texto-3); cursor: pointer; font-size: 16px; line-height: 1; }
.aviso-fechar:hover { background: var(--superficie-3); color: var(--texto); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

.sem-js { padding: 24px; }

/* ---------------------------------------------------------- produção guiada: casca */

.topo-abas { display: flex; align-items: center; gap: 2px; padding-left: 12px; border-left: 1px solid var(--linha); }
.topo-aba {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--raio-p);
  color: var(--texto-2); font-size: 13.5px; font-weight: 560;
}
.topo-aba:hover { color: var(--texto); background: var(--superficie-2); }
.topo-aba[aria-current="page"] { color: var(--texto); background: var(--superficie-3); }

.marcar { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; cursor: pointer; }
.marcar input, .recurso-usar, .ajuste-caixa input { width: 16px; height: 16px; margin: 0; accent-color: var(--acento); cursor: pointer; }
.marcar-pequeno { font-size: 12.5px; gap: 6px; }
.marcar input:focus-visible, .recurso-usar:focus-visible, .ajuste-caixa input:focus-visible { box-shadow: var(--foco); border-radius: 3px; }

/* ---------------------------------------------------------- lista de projetos */

.projetos-lista { list-style: none; margin: 0; padding: 0; }
.projetos-cabeca, .projeto-linha {
  display: grid; grid-template-columns: 148px minmax(0, 1fr) 64px 132px minmax(0, 220px) 112px;
  align-items: center; gap: 16px; padding: 0 20px;
}
.projeto-linha { min-height: 64px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--linha); color: var(--texto); transition: background-color .1s; }
.projetos-lista li:last-child .projeto-linha { border-bottom: 0; }
.projeto-linha:hover { background: var(--superficie-2); color: var(--texto); }
.projeto-linha:focus-visible { box-shadow: inset 0 0 0 2px var(--acento); border-radius: 0; }
.projeto-sub { display: flex; flex-wrap: wrap; gap: 0 4px; color: var(--texto-3); font-size: 12.5px; }
.col-formato { color: var(--texto-2); font-family: var(--mono); font-size: 12.5px; }
.col-pecas { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.mini-barra { display: block; width: 100%; max-width: 110px; height: 4px; border-radius: 2px; background: var(--superficie-3); overflow: hidden; }
.mini-barra-cheia { display: block; height: 100%; width: 0; background: var(--ok); }
.col-atencao { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.atencao { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atencao-parada { color: #ffd99a; }
.atencao-falha { color: #ffb4b7; }
.atencao-motivo { color: var(--texto-2); }

.projeto-provisorio { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; }

/* ---------------------------------------------------------- novo projeto */

.novo-projeto { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 56px; }
.np-cabeca { margin-bottom: 20px; }
.np-sub { margin-top: 4px; max-width: 720px; color: var(--texto-2); }
.np-form { display: flex; flex-direction: column; gap: 16px; }
.np-campos { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.np-campos:disabled { opacity: .62; }
.np-secao {
  margin: 0; padding: 18px 20px 20px; min-width: 0; border: 1px solid var(--linha); border-radius: 12px;
  background: var(--superficie);
}
.np-legenda { display: flex; align-items: center; gap: 10px; padding: 0 6px; margin-left: -6px; font-size: 15px; font-weight: 640; }
.np-legenda-sub { color: var(--texto-3); font-weight: 450; font-size: 13px; }
.np-numero {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--acento-fundo); color: var(--acento-forte); font-size: 12px; font-weight: 700;
}
.np-explica { margin: 2px 0 12px; color: var(--texto-3); font-size: 13px; }
.np-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.np-grade-dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.np-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.np-campo { display: flex; flex-direction: column; min-width: 0; }
/* tipo de vídeo (v2): cartões-rádio numa grade que se ajusta à largura (1 coluna no celular) */
.np-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.np-tipo {
  position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: 10px; background: var(--bg-2); cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.np-tipo:hover { border-color: var(--linha-forte); }
.np-tipo-radio { flex: none; margin: 3px 0 0; accent-color: var(--acento); }
.np-tipo-radio:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 50%; }
.np-tipo:has(.np-tipo-radio:checked), .np-tipo-escolhido { border-color: var(--acento); background: var(--acento-fundo); }
.np-tipo-textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.np-tipo-rotulo { color: var(--texto); font-size: 14px; font-weight: 600; }
.np-tipo-desc { color: var(--texto-2); font-size: 12.5px; line-height: 1.45; }
.np-rotulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.np-rotulo-linha .rotulo { margin-bottom: 6px; }
.np-gerenciar { font-size: 12.5px; color: var(--acento-forte); white-space: nowrap; }
.np-gerenciar:hover { color: var(--texto); }
.np-sem-tipos { max-width: 720px; }
.np-campo[hidden] { display: none; }
.np-campo .campo, .np-campo select.campo { width: 100%; }
.np-painel { margin-top: 14px; }
.np-soltar { padding: 14px; border: 1px dashed var(--linha-forte); border-radius: 10px; background: var(--bg-2); transition: border-color .12s, background-color .12s; }
.np-soltar-ativo { border-color: var(--acento); background: var(--acento-fundo); }
.campo-arquivo { width: 100%; color: var(--texto-2); font-size: 13px; }
.campo-arquivo::file-selector-button {
  height: 32px; margin-right: 10px; padding: 0 12px; border-radius: var(--raio-p); border: 1px solid var(--linha-forte);
  background: var(--superficie-3); color: var(--texto); font: inherit; font-weight: 560; cursor: pointer;
}
.campo-arquivo:focus-visible { box-shadow: var(--foco); }
.campo-arquivo[aria-invalid="true"]::file-selector-button { border-color: var(--erro); }
.np-arquivo-info { display: flex; align-items: center; gap: 4px; min-height: 0; margin-top: 6px; font-size: 13px; }
.np-arquivo-info:empty { display: none; }
.np-arquivo-nome { color: var(--texto); font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo[aria-invalid="true"], select.campo[aria-invalid="true"] { border-color: var(--erro); }

.segmentado { display: inline-flex; padding: 3px; gap: 3px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--linha); }
.segmento { position: relative; display: inline-flex; }
.segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmento span {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 7px;
  color: var(--texto-2); font-size: 13.5px; font-weight: 560; cursor: pointer;
}
.segmento input:checked + span { background: var(--superficie-3); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.segmento input:focus-visible + span { box-shadow: var(--foco); }

/* recursos */
.recursos { width: 100%; border-collapse: collapse; }
.recursos th {
  padding: 0 12px 8px; text-align: left; color: var(--texto-3); font-size: 12px; font-weight: 560;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--linha);
}
.recursos td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--linha); }
.recursos tr:last-child td { border-bottom: 0; }
.recursos .col-seguir { width: 170px; }
.recursos[aria-invalid="true"] { outline: 1px solid rgba(255, 99, 105, 0.5); outline-offset: 4px; border-radius: 6px; }
.recurso-cel { width: 38%; }
.recurso-cab { display: flex; align-items: flex-start; gap: 12px; }
.recurso-usar { margin-top: 3px; flex: none; }
.recurso-textos { min-width: 0; }
.recurso-nome { display: block; font-weight: 600; cursor: pointer; }
.recurso-desc { color: var(--texto-3); font-size: 12.5px; line-height: 1.4; }
.recurso-aviso { font-size: 12.5px; line-height: 1.4; margin-top: 4px; max-width: 46ch; }
.recurso-desligado .recurso-nome { color: var(--texto-2); }
.recurso-desligado .recurso-desc, .recurso-desligado .recurso-ajustes { opacity: .5; }
.recurso-ajustes { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; }
.ajuste { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ajuste-caixa { flex-direction: row; align-items: center; gap: 8px; }
.ajuste-rotulo { font-size: 12px; color: var(--texto-3); }
/* opções com rótulo e descrição (onda 2B): o "?" ao lado do rótulo, a descrição da escolhida embaixo */
.ajuste-cab { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.opcao-dica, .ajuste-dica-opcao { display: block; max-width: 280px; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--texto-3); }
.opcao-dica[hidden], .ajuste-dica-opcao[hidden] { display: none; }
.ajuste-dica-opcao:not(:empty) { margin-bottom: 2px; color: var(--texto-2); }
.opcoes-ajuda { position: static; display: inline-flex; }
.opcoes-ajuda-lugar:empty { display: none; }
.opcoes-ajuda-botao {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; list-style: none;
  border: 1px solid var(--linha-forte); color: var(--texto-2); font-size: 11px; font-weight: 700; cursor: pointer; user-select: none;
}
.opcoes-ajuda-botao::-webkit-details-marker { display: none; }
.opcoes-ajuda-botao:hover, .opcoes-ajuda[open] > .opcoes-ajuda-botao { border-color: var(--acento); color: var(--acento-forte); }
.opcoes-ajuda-botao:focus-visible { outline: none; box-shadow: var(--foco); }
.opcoes-ajuda-painel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(340px, 80vw); max-height: 320px; overflow: auto;
  padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--superficie-2); box-shadow: var(--sombra);
}
.opcoes-ajuda-lista { margin: 0; display: grid; gap: 2px; }
.opcoes-ajuda-lista dt { color: var(--texto); font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.opcoes-ajuda-lista dt:first-child { margin-top: 0; }
.opcoes-ajuda-lista dd { margin: 0; color: var(--texto-2); font-size: 12px; line-height: 1.45; }
.ajuste .campo-pequeno { min-width: 132px; }
.campo-numero { width: 96px; min-width: 0 !important; font-variant-numeric: tabular-nums; }
.ajuste-lista { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; min-height: 30px; }
.ajuste .campo-erro { max-width: 260px; margin-top: 0; }

.interruptor { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding-top: 2px; }
.interruptor-caixa { position: absolute; z-index: 1; left: 0; top: 2px; opacity: 0; width: 34px; height: 20px; margin: 0; cursor: pointer; }
.interruptor-trilho {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--superficie-3);
  border: 1px solid var(--linha-forte); transition: background-color .12s, border-color .12s;
}
.interruptor-trilho::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--texto-2); transition: transform .12s, background-color .12s;
}
.interruptor-caixa:checked + .interruptor-trilho { background: rgba(61, 214, 140, 0.3); border-color: rgba(61, 214, 140, 0.65); }
.interruptor-caixa:checked + .interruptor-trilho::after { transform: translateX(14px); background: #c9f7df; }
.interruptor-caixa:focus-visible + .interruptor-trilho { box-shadow: var(--foco); }
.interruptor-caixa:disabled, .interruptor-caixa:disabled + .interruptor-trilho { cursor: not-allowed; opacity: .4; }
/* etapa desligada: trilho neutro, tracejado (nem "segue" nem "para"). Só na linha desligada: o
   formulário travado durante o envio também desabilita o interruptor, e o ligado segue ligado */
.recurso-desligado .interruptor-caixa:disabled + .interruptor-trilho { background: transparent; border-style: dashed; }
.recurso-desligado .interruptor-caixa:disabled + .interruptor-trilho::after { background: var(--texto-3); transform: none; }
.interruptor-texto { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.interruptor-para .interruptor-texto { color: #ffd99a; }
@media (prefers-reduced-motion: reduce) { .interruptor-trilho, .interruptor-trilho::after { transition: none; } }

/* rodapé, envio e erros */
/* o rodapé fica preso embaixo: o foco por teclado (e o scrollIntoView) não para atrás dele */
:root:has(.novo-projeto) { scroll-padding-bottom: 96px; scroll-padding-top: 64px; }
.np-rodape {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 12px; padding: 14px 20px;
  border: 1px solid var(--linha); border-radius: 12px; background: rgba(22, 24, 28, 0.94); backdrop-filter: blur(6px);
}
.np-rodape-acoes { display: flex; align-items: center; gap: 16px; }
.np-resumo-recursos { flex: 1; min-width: 0; color: var(--texto-2); font-size: 13px; text-align: right; }
.np-comecar { min-width: 140px; height: 40px; font-size: 14.5px; }
.np-envio { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(110, 168, 254, 0.3); background: rgba(110, 168, 254, 0.08); }
.np-envio-cab { display: flex; align-items: center; gap: 12px; }
.np-envio-texto { flex: 1; color: var(--texto-2); font-size: 13px; font-variant-numeric: tabular-nums; }
/* envio em partes: o progresso de cada arquivo, embaixo dele */
.np-envio-arquivo { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie); }
.np-envio-arquivo[hidden] { display: none; }
.np-envio-arquivo .np-envio-cab { gap: 10px; min-height: 30px; }
.np-envio-acoes { display: inline-flex; gap: 6px; flex: none; }
.np-envio-arquivo[data-estado="pronto"] .barra-cheia { background: var(--ok); }
.np-envio-arquivo[data-estado="pronto"] .np-envio-texto { color: #9be9c2; }
.np-envio-arquivo[data-estado="falhou"] { border-color: rgba(255, 99, 105, 0.45); }
.np-envio-arquivo[data-estado="falhou"] .np-envio-texto { color: #ffb4b7; }
.np-envio-arquivo[data-estado="falhou"] .barra-cheia, .np-envio-arquivo[data-estado="cancelado"] .barra-cheia { background: var(--texto-3); }
.np-envio-pendente { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(245, 165, 36, 0.4); background: rgba(245, 165, 36, 0.08); color: #ffd99a; font-size: 13px; }
.np-envio-pendente span { flex: 1; min-width: 0; }
.barra { height: 8px; border-radius: 4px; background: var(--superficie-3); overflow: hidden; }
.barra-cheia { height: 100%; width: 0; border-radius: 4px; background: var(--acento); transition: width .2s linear; }
@media (prefers-reduced-motion: reduce) { .barra-cheia { transition: none; } }
.np-erros { padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(255, 99, 105, 0.4); background: rgba(255, 99, 105, 0.08); }
.np-erros:focus-visible { box-shadow: var(--foco); }
.np-erros-titulo { font-size: 14px; font-weight: 640; color: #ffd3d5; margin-bottom: 6px; }
.np-erros-lista { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.np-erro-link strong { color: #ffd3d5; font-weight: 600; }
.np-erro-link {
  padding: 0; border: 0; background: none; color: #ffb4b7; font-size: 13px; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(255, 180, 183, 0.4); text-underline-offset: 3px;
}
.np-erro-link:hover { color: #fff; }
.np-mensagem[hidden] { display: none; }
.np-dialogo-rotulo { margin-top: 14px; }

/* só para leitor de tela */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- tela do projeto */

.projeto { width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px 32px 56px; }
.projeto-corpo { display: flex; flex-direction: column; gap: 18px; }
.projeto-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.projeto-titulos { min-width: 0; }
.projeto-titulo { font-size: 21px; font-weight: 680; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projeto-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; color: var(--texto-3); font-size: 13px; }
.projeto-acoes { display: flex; align-items: center; gap: 10px; flex: none; }
.botao-arquivar { color: #ffb4b7; }
.botao-arquivar:hover:not(:disabled) { color: #ffd3d5; background: rgba(255, 99, 105, 0.1); }
.ao-vivo { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; color: var(--texto-2); border: 1px solid var(--linha); white-space: nowrap; }
.ao-vivo[data-estado="aberto"] { color: #8ef0bd; border-color: rgba(61, 214, 140, 0.35); }
.ao-vivo[data-estado="caido"], .ao-vivo[data-estado="sem-sessao"] { color: #ffd99a; border-color: rgba(245, 165, 36, 0.4); }
.faixa-arquivado { background: var(--superficie-2); border: 1px solid var(--linha-forte); color: var(--texto-2); }
.projeto-arquivado .grade, .projeto-arquivado .etapas-projeto { opacity: .85; }

.projeto-secao { padding: 16px 18px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
.secao-cabeca { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.secao-titulo { font-size: 15px; font-weight: 640; }
.secao-contagem { color: var(--texto-3); font-size: 13px; }
.projeto-secao > .secao-titulo { margin-bottom: 10px; }

/* estados (célula, faixa de etapas, selo) */
.celula-pronta { --estado: var(--ok); }
.celula-rodando { --estado: var(--andamento); }
.celula-parada { --estado: var(--sugerida); }
.celula-falhou { --estado: var(--erro); }
.celula-pendente { --estado: var(--texto-3); }
.celula-pulada { --estado: var(--linha-forte); }

.secao-etapas { padding: 10px 12px; }
.etapas-projeto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etapa-projeto {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--linha); border-left: 3px solid var(--estado);
}
.etapa-icone { font-size: 15px; width: 18px; text-align: center; color: var(--estado); }
.etapa-textos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.etapa-nome { font-weight: 600; }
.etapa-estado { color: var(--texto-2); font-size: 13px; }
.etapa-detalhe { color: var(--texto-3); font-size: 12.5px; }
.etapa-erro { color: #ffb4b7; font-size: 12.5px; }
.etapa-acoes { display: flex; gap: 6px; }

/* cortes */
.cortes { padding: 16px 18px 18px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
.cortes-parada { border: 1px dashed rgba(245, 165, 36, 0.6); background: linear-gradient(0deg, var(--superficie), var(--superficie)), rgba(245, 165, 36, 0.05); }
.cortes-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cortes-titulo { font-size: 15.5px; font-weight: 660; }
.cortes-parada .cortes-titulo { color: #ffe2b0; }
.cortes-explica { margin-top: 2px; color: var(--texto-2); font-size: 13px; }
.cortes-corpo { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.cortes-avisos { margin: 0; padding-left: 18px; color: #ffe2b0; font-size: 13px; }
.cortes-avisos:empty { display: none; }
.cortes-campos { margin: 0; padding: 0; border: 0; min-width: 0; }
.cortes-campos:disabled { opacity: .7; }
.cortes-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 16px; align-items: start; }
.cortes-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg-2); max-height: 560px; overflow: auto; }
.corte {
  display: grid; grid-template-columns: 24px 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--linha);
}
.corte:last-child { border-bottom: 0; }
.corte-sel { background: var(--acento-fundo); box-shadow: inset 3px 0 0 var(--acento); }
.corte-desmarcado .corte-textos, .corte-desmarcado .corte-trecho { opacity: .55; }
.corte-marca { display: inline-flex; align-items: center; justify-content: center; }
.corte-marca input { width: 16px; height: 16px; margin: 0; accent-color: var(--acento); cursor: pointer; }
.corte-marca input:focus-visible { box-shadow: var(--foco); border-radius: 3px; }
.corte-mais { color: var(--acento-forte); font-weight: 700; }
.corte-n {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--superficie-3); color: var(--texto-2); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.corte-novo .corte-n { background: var(--acento-fundo); color: var(--acento-forte); font-size: 11px; }
.corte-textos { display: flex; flex-direction: column; min-width: 0; }
.corte-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corte-motivo { color: var(--texto-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corte-trecho { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.corte-tempo { font-family: var(--mono); font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.corte-trecho .etiqueta { height: 18px; font-size: 11px; padding: 0 6px; }
.corte-botoes { display: flex; gap: 2px; }
.cortes-vazio { padding: 16px; color: var(--texto-3); font-size: 13px; }
.cortes-lista-acoes { margin-top: 10px; }
.corte-palco { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg-2); position: sticky; top: 12px; }
.corte-video-quadro { aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.corte-video { width: 100%; height: 100%; display: block; object-fit: contain; }
.corte-palco-vazio { color: var(--texto-3); font-size: 13px; }
.corte-editor { display: flex; flex-direction: column; gap: 8px; }
.corte-editor-cabeca { display: flex; flex-direction: column; gap: 2px; }
.corte-editor-titulo { font-size: 14px; font-weight: 640; }
.corte-duracao { font-family: var(--mono); font-size: 12px; color: var(--texto-3); }
.corte-titulo-novo { display: flex; flex-direction: column; }
.corte-titulo-novo .campo { width: 100%; }
.onda { display: flex; flex-direction: column; gap: 4px; }
.onda-caixa { position: relative; height: 96px; border-radius: 6px; overflow: hidden; border: 1px solid var(--linha); cursor: crosshair; touch-action: none; user-select: none; }
.onda-corte { display: block; width: 100%; height: 96px; }
.alca { position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px; cursor: ew-resize; display: flex; justify-content: center; }
.alca-pega { width: 6px; margin-top: 30px; height: 36px; border-radius: 3px; background: var(--acento); box-shadow: 0 0 0 2px var(--bg-2); }
.alca:focus-visible { box-shadow: none; }
.alca:focus-visible .alca-pega { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--acento-forte); background: var(--acento-forte); }
.alca-fora .alca-pega { opacity: .5; }
.onda-estado { min-height: 0; color: var(--texto-3); font-size: 12px; }
.onda-estado:empty { display: none; }
.onda-dica { color: var(--texto-3); font-size: 12px; }
.corte-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.corte-campo { display: flex; flex-direction: column; }
.corte-campo .campo { width: 110px; }
.corte-campos-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.campo-erro { color: #ffb4b7; font-size: 12.5px; min-height: 0; }
.campo-erro:empty { display: none; }
.campo-tempo[aria-invalid="true"] { border-color: var(--erro); }
.cortes-rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.cortes-mensagem { color: #ffb4b7; font-size: 13.5px; }
.cortes-mensagem:empty { display: none; }
.cortes-rodape-acoes { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cortes-resumo { color: var(--texto-3); font-size: 13px; }
.cortes-seguir { min-width: 180px; height: 40px; font-size: 14.5px; }

/* falhas */
.falhas { border-color: rgba(255, 99, 105, 0.35); background: rgba(255, 99, 105, 0.05); }
.falhas .secao-titulo { color: #ffd3d5; }
.falhas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.falha { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(255, 99, 105, 0.15); }
.falha:first-child { border-top: 0; }
.falha-onde { color: var(--texto); font-size: 13.5px; }
.falha-motivo { color: #ffc9cb; font-size: 13.5px; }
.falha-acoes { display: flex; gap: 6px; }
.falha-mais summary { cursor: pointer; color: var(--texto-2); font-size: 13px; padding: 4px 0; }

/* grade peças × etapas */
.pecas-vazio { color: var(--texto-3); font-size: 13.5px; }
.grade-moldura { overflow-x: auto; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg-2); }
.grade { --colunas: 7; min-width: calc(240px + var(--colunas) * 86px); }
.grade-cabeca, .grade-linha { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(var(--colunas), minmax(86px, 1fr)); align-items: stretch; }
.grade-cabeca { height: 36px; align-items: center; border-bottom: 1px solid var(--linha); color: var(--texto-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.grade-peca-cab { padding: 0 14px; }
.grade-col { padding: 0 6px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-rolagem-limitada { max-height: 528px; overflow-y: auto; overscroll-behavior: contain; }
.grade-linha { height: 44px; border-bottom: 1px solid var(--linha); }
.grade-linhas > .grade-linha:last-child { border-bottom: 0; }
.grade-peca { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 14px; }
.grade-peca-nome { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-peca-sub { color: var(--texto-3); font-size: 11.5px; font-family: var(--mono); }
.grade-celula { display: flex; padding: 4px; }
.celula {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; color: var(--texto-2);
  font-size: 12px; border: 1px solid transparent;
}
.celula:hover { background: var(--superficie-3); color: var(--texto); }
.celula:focus-visible { box-shadow: inset 0 0 0 2px var(--acento); border-radius: 6px; }
.celula-icone { font-size: 14px; }
.celula.celula-pendente .celula-icone { color: var(--texto-3); font-size: 18px; line-height: 1; }
.celula.celula-pulada .celula-icone { color: var(--linha-forte); }
.celula.celula-parada { background: rgba(245, 165, 36, 0.1); border-color: rgba(245, 165, 36, 0.35); color: #ffd99a; }
.celula.celula-falhou { background: rgba(255, 99, 105, 0.1); border-color: rgba(255, 99, 105, 0.4); color: #ffb4b7; }
.celula.celula-rodando .celula-icone { animation: pulsar 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .celula.celula-rodando .celula-icone { animation: none; } }
.celula-texto { font-weight: 560; }
.celula-parada .celula-texto { text-decoration: underline; text-underline-offset: 3px; }
.grade-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; color: var(--texto-2); font-size: 12.5px; }
.legenda-item { display: inline-flex; align-items: center; gap: 5px; }
.legenda-icone { color: var(--estado); }

/* prontos */
.prontos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pronto { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 12px; padding: 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg-2); }
.pronto-capa { grid-row: 1 / span 2; width: 72px; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: var(--superficie-3); display: grid; place-items: center; }
.pronto-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pronto-capa-icone { color: var(--texto-3); font-size: 20px; }
.pronto-textos { display: flex; flex-direction: column; min-width: 0; }
.pronto-nome { font-size: 14px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pronto-estado { color: var(--texto-2); font-size: 12.5px; }
.pronto-trecho { color: var(--texto-3); font-size: 12px; font-family: var(--mono); }
.pronto-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-self: end; }
a.botao[aria-disabled="true"] { opacity: .6; }

/* diálogos do projeto */
.dialogo-video-largo { width: min(860px, calc(100vw - 48px)); }
.dialogo-video { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; display: block; }
.dialogo-capa { width: min(900px, calc(100vw - 48px)); }
.capa-textos { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; max-height: 70vh; overflow: auto; color: var(--texto); }
.capa-lado { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.capa-grande { width: 100%; border-radius: 8px; border: 1px solid var(--linha); background: var(--superficie-3); aspect-ratio: 9 / 16; object-fit: cover; }
.textos-lado { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rede { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linha); }
.rede-nome { font-size: 14px; font-weight: 640; }
.texto-bloco { display: flex; flex-direction: column; gap: 4px; }
.texto-bloco-cabeca { display: flex; align-items: center; justify-content: space-between; }
.texto-rotulo { color: var(--texto-3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.texto-pre { white-space: pre-wrap; padding: 8px 10px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--linha); font-size: 13.5px; }

/* etapa da peça: a moldura da produção (cabeçalho, ações, avisos) + o editor existente */
.etapa-tela { width: 100%; margin: 0 auto; padding: 14px 24px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.etapa-moldura { display: flex; flex-direction: column; gap: 10px; }
.etapa-faixas { display: flex; flex-direction: column; gap: 8px; }
.etapa-faixas:empty { display: none; }
.etapa-faixas .faixa-aviso { align-items: center; margin: 0; }
.etapa-faixas .faixa-aviso > span:not(.giro) { flex: 1; min-width: 0; }
.etapa-faixas .faixa-aviso .botao, .etapa-faixas .faixa-aviso > .mudo { flex: none; }
.etapa-faixas .faixa-aviso { padding: 7px 12px; }
.etapa-faixas .etapa-avisos { margin: 0; }
.etapa-pendencias { margin: 2px 0 0; color: var(--texto-3); font-size: 12.5px; }
.etapa-cabeca .editor-titulo { font-size: 17px; }
.etapa-cabeca .ao-vivo { font-size: 12px; }
.faixa-aviso-ok { background: rgba(61, 214, 140, 0.1); border: 1px solid rgba(61, 214, 140, 0.3); color: #c9f5de; }
.faixa-aviso-alterado { background: rgba(94, 177, 255, 0.1); border: 1px solid rgba(94, 177, 255, 0.35); color: #d6ebff; }
.etapa-editor, .etapa-editor-caixa { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.etapa-editor .editor { padding: 10px 0 0; gap: 10px; border-top: 1px solid var(--linha); }
.etapa-editor .editor-titulo { font-size: 15px; }
/* a moldura fica em cima do editor: o vídeo encolhe a altura dela (medida em --moldura-h) para a
   linha do tempo inteira caber na tela, sem rolar */
.etapa-tela { --moldura-h: 120px; }
.etapa-editor .palco-quadro { height: clamp(140px, calc(100vh - 596px - var(--moldura-h)), 480px); }
.etapa-editor .editor-legendador .palco-quadro { height: clamp(140px, calc(100vh - 606px - var(--moldura-h)), 480px); }
.etapa-editor .editor-dinamizador .palco-quadro { height: clamp(140px, calc(100vh - 530px - var(--moldura-h)), 520px); }
.etapa-editor .vazio-pagina { min-height: 30vh; }
.etapa-generico { width: 100%; max-width: 1240px; display: flex; flex-direction: column; gap: 14px; }
.editor-leitura .linha-faixas { cursor: default; }
.rodape-leitura { color: var(--texto-3); font-size: 13px; }
.resumo-pendencias { margin-top: 12px; }
.resumo-pendencias p { margin: 0; }
.resumo-pendencias ol { margin: 6px 0 0; padding-left: 20px; }
.etapa-selo { display: inline-flex; align-items: center; color: var(--estado); font-weight: 600; }
.etapa-avisos { margin: 0; padding-left: 18px; color: #ffe2b0; font-size: 13px; }
.etapa-video { width: 100%; max-height: 60vh; background: #000; border-radius: 10px; }
/* cortes: lista por janela (altura fixa por linha, igual a ALT_CORTE em cortes.js) */
.corte { height: 58px; overflow: hidden; }
.cortes-espaco { list-style: none; padding: 0; border: 0; }
.cortes-cabeca-acoes { display: flex; gap: 8px; flex: none; }
.sugerir-ajustes { margin-top: 12px; }
/* cortes: nenhuma sugestão passou no filtro (por quê) e os trechos que o filtro tirou */
.cortes-sem-sugestao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 10px;
  background: rgba(245, 165, 36, 0.1); border: 1px solid rgba(245, 165, 36, 0.35); color: #ffe2b0; font-size: 13.5px;
}
.cortes-sem-sugestao[hidden] { display: none; }
.cortes-sem-sugestao-texto { flex: 1 1 360px; margin: 0; line-height: 1.45; }
.cortes-tirados { margin-top: 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg-2); }
.cortes-tirados[hidden] { display: none; }
.cortes-tirados-resumo { padding: 10px 12px; cursor: pointer; color: var(--texto); font-size: 13.5px; font-weight: 600; }
.cortes-tirados-resumo:focus-visible { box-shadow: var(--foco); border-radius: 8px; }
.cortes-tirados-nota { margin: 0; padding: 0 12px 8px; color: var(--texto-3); font-size: 12.5px; }
.cortes-tirados-lista { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; border-top: 1px solid var(--linha); }
.tirado {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--linha);
}
.tirado:last-child { border-bottom: 0; }
.tirado-sel { background: var(--acento-fundo); box-shadow: inset 3px 0 0 var(--acento); }
.tirado-textos { display: flex; flex-direction: column; min-width: 0; }
.tirado-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tirado-sem-titulo { color: var(--texto-2); font-weight: 500; font-style: italic; }
.tirado-motivo { color: var(--texto-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tirado-trecho { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tirado-trecho .etiqueta { height: 18px; font-size: 11px; padding: 0 6px; }
.etiqueta-tirado { color: #ffd99a; background: rgba(245, 165, 36, 0.1); border-color: rgba(245, 165, 36, 0.35); }
.tirado-botoes { display: flex; gap: 4px; }
@media (max-width: 760px) {
  .tirado { grid-template-columns: minmax(0, 1fr); }
  .tirado-trecho { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

/* ---------- telas novas das etapas (Preparar, Tratar o som, Enquadrar, Publicar) ---------- */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.etapa-tela-nova { width: 100%; max-width: 1240px; padding-bottom: 28px; }
.tela-etapa { display: flex; flex-direction: column; gap: 14px; }
.tela-bloco { padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tela-bloco-cabeca { display: flex; flex-direction: column; gap: 2px; }
.tela-bloco-titulo { font-size: 15px; font-weight: 640; }
.tela-bloco-sub { font-size: 12.5px; }
.tela-video { width: 100%; max-height: 52vh; background: #000; border-radius: 8px; display: block; }
.tela-vazio:empty { display: none; }
.tela-vazio .faixa-aviso { margin: 0; }
.faixa-aviso-parada { background: rgba(245, 165, 36, 0.1); border: 1px solid rgba(245, 165, 36, 0.35); color: #ffe2b0; }
.refazer-ajustes { margin: 0; padding-left: 18px; color: var(--texto-2); }

/* ajustes */
.ajustes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 18px; }
.ajustes-grade .ajuste .campo-pequeno { width: 100%; }
.ajuste-dica { margin: 0; font-size: 11.5px; color: var(--texto-3); }
.ajuste-dica:empty { display: none; }
.ajuste-dica-extra { color: #ffe2b0; }
.ajuste-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ajuste-linha .campo { flex: 1; min-width: 0; }
.ajuste-deslizante { flex: 1; min-width: 0; accent-color: var(--acento); }
.ajuste-valor { min-width: 54px; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--texto-2); }
.ajustes-rodape { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--linha); padding-top: 10px; }
.ajustes-resumo { flex: 1; min-width: 240px; font-size: 13px; color: var(--texto-2); }
.ajustes-resumo-erro { color: #ffb4b7; }
.ajustes-botoes { display: flex; gap: 8px; }

/* som: antes × depois */
.ab-palco { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ab-lado { margin: 0; display: flex; flex-direction: column; gap: 6px; border: 2px solid transparent; border-radius: 10px; padding: 4px; opacity: 0.7; transition: opacity 0.15s, border-color 0.15s; }
.ab-lado.ab-ativo { border-color: var(--acento); opacity: 1; }
.ab-video { width: 100%; max-height: 34vh; background: #000; border-radius: 6px; display: block; }
.ab-legenda { font-size: 12.5px; color: var(--texto-2); }
.ab-controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ab-tocar { min-width: 96px; }
.ab-barra { flex: 1; min-width: 200px; accent-color: var(--acento); }
.ab-tempo { font-family: var(--mono); font-size: 12.5px; color: var(--texto-2); }
.ab-opcoes { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--linha-forte); border-radius: 8px; }
.ab-opcoes-rotulo { font-size: 12px; color: var(--texto-3); padding: 0 4px; }
.ab-opcao { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.ab-opcao input { accent-color: var(--acento); margin: 0; }
.ab-opcao:has(input:checked) { background: var(--acento-fundo); color: var(--acento-forte); }
.ab-opcao:has(input:focus-visible) { box-shadow: var(--foco); }
.medidas { width: 100%; border-collapse: collapse; font-size: 13px; }
.medidas caption { text-align: left; font-size: 12px; padding-bottom: 6px; }
.medidas th, .medidas td { padding: 6px 10px; border-bottom: 1px solid var(--linha); text-align: right; font-variant-numeric: tabular-nums; }
.medidas th[scope="row"], .medidas thead th:first-child { text-align: left; font-weight: 500; }
.medidas thead th { color: var(--texto-3); font-weight: 600; font-size: 12px; }
.medida-dif { color: var(--texto-3); }
.som-plano { font-size: 12.5px; color: var(--texto-2); }

/* enquadrar */
.tela-enquadrar { --enq-alt: 56vh; }
.tela-enquadrar-tempo { --enq-alt: 36vh; }   /* só com a linha do tempo embaixo */
.enq-palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.enq-lado { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.enq-quadro-resultado { max-height: var(--enq-alt); max-width: 100%; margin: 0 auto; background: #000; border-radius: 8px; overflow: hidden; display: flex; }
.enq-quadro-resultado video { width: 100%; height: 100%; object-fit: contain; }
.enq-quadro-origem { position: relative; background: #000; border-radius: 8px; overflow: hidden; line-height: 0; width: min(100%, calc(var(--enq-alt) * var(--proporcao, 1.7778))); }
.enq-video-origem { width: 100%; display: block; }
/* a moldura acompanha o tempo quadro a quadro: só o tamanho anima (trocar o preenchimento) */
.enq-recorte { position: absolute; border: 2px solid var(--sugerida); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); border-radius: 2px; pointer-events: none; transition: width 0.12s, height 0.12s; }
.enq-recorte[data-movel="1"] { pointer-events: auto; cursor: grab; touch-action: none; }
.enq-recorte[data-movel="1"]:active { cursor: grabbing; }
.enq-recorte:focus-visible { outline: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--bg), 0 0 0 4px var(--acento); }
.enq-recorte[data-modo="desfocado"], .enq-recorte[data-modo="barras"] { box-shadow: none; border-style: dashed; }
.enq-legenda, .enq-recorte-texto { font-size: 12.5px; color: var(--texto-2); }
.enq-lado .enq-legenda, .enq-lado .enq-recorte-texto { margin: 0; }
.enq-tempo { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); }
.enq-tempo-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.enq-tocar { min-width: 86px; justify-content: center; }
.enq-relogio { font-family: var(--mono); font-size: 12px; color: var(--texto-2); min-width: 118px; }
.enq-trans { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.enq-trans-rotulo { font-size: 12.5px; color: var(--texto-2); }
.enq-trans-faixa { width: 120px; }
.enq-trecho { min-height: 32px; display: flex; align-items: center; }
.enq-trecho-campos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.enq-trecho-titulo { font-size: 13px; }
.enq-trecho-grupo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); }
.enq-trecho-grupo .ajuste-deslizante { width: 140px; }
.enq-campo-tempo { width: 78px; font-family: var(--mono); }
.enq-campo-tempo[aria-invalid="true"] { border-color: var(--erro); }
.enq-remover { margin-left: auto; }
.enq-trecho-vazio, .enq-modo, .enq-tempo-dicas { margin: 0; font-size: 12.5px; }
.enq-modo { color: var(--texto-2); }
.enq-tempo-dicas { font-size: 12px; }
.enq-tempo-erro { margin: 0; }
.enq-tempo-erro:empty { display: none; }
.linha-posicoes { display: flex; flex-direction: column; gap: 4px; }
.lp-area { position: relative; border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; user-select: none; touch-action: pan-y; }
.lp-area:focus-visible { box-shadow: var(--foco); }
.lp-caixa { position: relative; cursor: pointer; }
.lp-canvas { display: block; width: 100%; height: 60px; }
.lp-cursor { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--texto); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6); pointer-events: none; }
.lp-selecao { position: absolute; top: 14px; height: 46px; border: 2px solid var(--acento-forte); border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); pointer-events: none; }
.lp-alca { top: 14px; bottom: auto; height: 46px; }
.lp-alca .alca-pega { margin-top: 7px; height: 32px; }
.lp-dica { margin: 0; font-size: 12px; color: var(--texto-3); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.lp-teclado summary { cursor: pointer; color: var(--texto-2); }

/* preparar */
.preparo-video { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.preparo-video video { width: 100%; max-height: 52vh; background: #000; border-radius: 8px; }
.preparo-video figcaption { display: flex; align-items: center; gap: 12px; }
.preparo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.preparo-item { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--superficie-2); }
.preparo-icone { width: 16px; text-align: center; font-weight: 700; }
.preparo-sim .preparo-icone { color: var(--ok); }
.preparo-nao .preparo-icone { color: var(--texto-3); }
.preparo-alerta { background: rgba(245, 165, 36, 0.1); }
.preparo-alerta .preparo-icone { color: var(--sugerida); }
.preparo-textos { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.preparo-texto { color: var(--texto-2); }

/* publicar */
.publicar-modo { display: flex; gap: 12px; align-items: baseline; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--linha-forte); background: var(--superficie-2); margin: 0; }
.publicar-modo-titulo { flex: none; letter-spacing: 0.06em; font-size: 13px; }
.publicar-modo-ensaio { border-color: rgba(245, 165, 36, 0.55); background: rgba(245, 165, 36, 0.12); color: #ffe2b0; }
.publicar-modo-ensaio .publicar-modo-titulo { color: var(--sugerida); }
.publicar-modo-real { border-color: rgba(255, 99, 105, 0.55); background: rgba(255, 99, 105, 0.12); color: #ffd3d5; }
.publicar-modo-real .publicar-modo-titulo { color: var(--erro); }
.publicar-corpo { display: flex; flex-direction: column; gap: 10px; }
.publicar-corpo .faixa-aviso { margin: 0; }
.publicar-sub { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.publicar-redes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.publicar-fora { color: var(--texto-2); }
.publicar-fora-titulo { font-size: 12.5px; color: var(--texto-3); }
.publicar-detalhes { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.publicar-detalhes dt { color: var(--texto-3); }
.publicar-detalhes dd { margin: 0; overflow-wrap: anywhere; }
.publicar-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.publicar-tabela th, .publicar-tabela td { padding: 6px 10px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.publicar-tabela thead th { color: var(--texto-3); font-size: 12px; }
.publicar-detalhe { display: flex; flex-direction: column; gap: 2px; }
.rede-ok { color: var(--ok); }
.rede-ensaio { color: var(--sugerida); }
.rede-erro { color: #ffb4b7; }
.rede-andamento { color: var(--andamento); }
.publicar-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
.publicar-confirmar { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
@media (max-width: 1180px) {
  .publicar-lado, .enq-palco { grid-template-columns: 1fr; }
}
.ajustes-grade .ajuste:has(.ajuste-linha-deslizante) { grid-column: span 2; }
.ajustes-grade .ajuste:has(input[type="datetime-local"]) { grid-column: span 2; }

/* ---------- telas Montar e Embalar ---------- */
.grupo-opcoes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.grupo-opcoes-legenda { width: 100%; padding: 0; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.mont-opcao-linha { display: inline-flex; align-items: center; gap: 6px; }
.mont-opcao-linha[hidden] { display: none; }
.mont-opcao { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--linha-forte); border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.mont-opcao input { accent-color: var(--acento); margin: 0; }
.mont-opcao:has(input:checked) { background: var(--acento-fundo); border-color: var(--acento); color: var(--acento-forte); }
.mont-opcao:has(input:focus-visible) { box-shadow: var(--foco); }
.mont-opcao:has(input:disabled) { opacity: 0.55; cursor: default; }
.mont-opcao-extra { display: inline-flex; gap: 6px; }
.mont-opcao-extra .campo { width: auto; min-width: 140px; }
.mont-desligado { opacity: 0.5; }
.ajuste-conta { font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.conta-excede { color: #ffb4b7; font-weight: 600; }
.ajuste-coluna { display: flex; flex-direction: column; gap: 4px; }
.ajuste-texto-longo { height: auto; min-height: 64px; padding: 6px 8px; resize: vertical; line-height: 1.45; }
.ajustes-grade .ajuste:has(.ajuste-texto-longo) { grid-column: 1 / -1; }
.ajuste-largo { grid-column: span 2; }
.mont-sub { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.mont-avisos { margin: 0; padding-left: 18px; font-size: 12.5px; color: #ffe2b0; }
.mont-avisos:empty { display: none; }

/* montar: prévia + plano */
.mont-previa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.mont-previa[hidden] { display: none; }
.mont-previa-video video { width: 100%; max-height: 56vh; background: #000; border-radius: 8px; display: block; }
.mont-previa-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mont-resumo { margin: 0; font-size: 13px; color: var(--texto); font-variant-numeric: tabular-nums; }
.mont-plano { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.mont-plano dt { color: var(--texto-3); }
.mont-plano dd { margin: 0; overflow-wrap: anywhere; }
.mont-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }

/* montar: gancho */
.gancho-palco { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 14px; align-items: center; }
.gancho-video { width: 100%; max-height: 34vh; background: #000; border-radius: 8px; display: block; }
.gancho-linha { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gancho-trilho { position: relative; height: 46px; border-radius: 8px; background: var(--superficie-3); border: 1px solid var(--linha-forte); cursor: crosshair; touch-action: none; overflow: hidden; }
.gancho-regua { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.07) calc(10% - 1px) 10%); }
.gancho-selecao { position: absolute; top: 0; bottom: 0; background: rgba(245, 165, 36, 0.28); border-left: 3px solid var(--sugerida); border-right: 3px solid var(--sugerida); cursor: ew-resize; }
.gancho-selecao[hidden] { display: none; }
.gancho-cabeca { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--texto); pointer-events: none; }
.gancho-tempos { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--texto-2); }
.gancho-detalhes { display: flex; flex-direction: column; gap: 8px; }
.gancho-campos { display: grid; grid-template-columns: max-content minmax(0, 240px); gap: 6px 12px; align-items: center; }
.gancho-campos .campo-numero { width: 110px; flex: none; }
.gancho-info { margin: 0; font-size: 12.5px; color: var(--texto-2); }
.gancho-info-erro { color: #ffb4b7; }
.mont-sem-video .gancho-palco { display: none; }

/* montar: tarja, final, música */
.tarja-falta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.biblioteca-tabela th, .biblioteca-tabela td { text-align: left; vertical-align: middle; }
.biblioteca-licenca { color: var(--texto-2); font-size: 12px; }
.biblioteca-acoes { white-space: nowrap; display: flex; gap: 6px; justify-content: flex-end; }
.mont-amostra { width: 100%; height: 36px; }
.mont-amostra-legenda { margin: 0; font-size: 12px; }
.mont-amostra-legenda:empty { display: none; }
.volume-linha { max-width: 420px; }

/* embalar: capas + quadro */
.capas-palco { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.capas-palco[hidden] { display: none; }
.capa-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.capa-fig-9x16 { flex: 0 1 220px; }
.capa-fig-16x9 { flex: 1 1 420px; max-width: 620px; }
.capa-moldura { background: #000; border-radius: 8px; overflow: hidden; line-height: 0; border: 1px solid var(--linha); }
.capa-fig-9x16 .capa-moldura { aspect-ratio: 9 / 16; }
.capa-fig-16x9 .capa-moldura { aspect-ratio: 16 / 9; }
.capa-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa-img:not([src]) { visibility: hidden; }
.capa-legenda { font-size: 12.5px; color: var(--texto-2); }
.quadro-palco { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.quadro-previa { background: #000; border-radius: 8px; overflow: hidden; line-height: 0; }
.quadro-video { width: 100%; max-height: 46vh; display: block; object-fit: contain; }
.quadro-controles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.quadro-controles .campo-numero { width: 90px; flex: none; }
.quadro-barra { flex: 1; min-width: 0; accent-color: var(--acento); }
.quadro-atual { margin: 0; font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.quadro-controles > .botao { align-self: flex-start; }
.capa-titulo-erro { color: #ffb4b7; }
.capa-botoes { justify-content: flex-end; margin-top: 4px; }
.capa-status { display: flex; flex-direction: column; gap: 6px; }
.capa-status:empty { display: none; }
.capa-status .faixa-aviso { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* embalar: textos */
.textos-redes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.rede-textos { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--linha); min-width: 0; }
.rede-textos .rede-nome { margin: 0; font-size: 14px; }
.texto-campo { display: flex; flex-direction: column; gap: 4px; }
.texto-rede { height: auto; padding: 6px 8px; font-size: 13px; line-height: 1.45; resize: vertical; background: var(--bg-2); }
.texto-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.emb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.emb-chip { padding: 1px 8px; border-radius: 999px; background: var(--superficie-3); font-size: 12px; color: var(--texto-2); }
.emb-capitulos { margin: 0; padding-left: 18px; font-size: 12.5px; }
.aviso-fe { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1180px) {
  .mont-lado { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mont-previa, .gancho-palco, .quadro-palco { grid-template-columns: 1fr; }
}
/* embalar: textos editáveis (Ruling AO) */
.emb-capitulos { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 4px; }
.emb-capitulos li { display: flex; align-items: center; gap: 8px; }
.emb-capitulos code { font-size: 12px; color: var(--texto-2); min-width: 46px; }
.emb-capitulos .campo { flex: 1; min-width: 0; }
.texto-erro { color: #ffb4b7; }
.texto-rede[aria-invalid="true"] { border-color: var(--erro); }
.rede-nome .etiqueta { margin-left: 8px; vertical-align: middle; }
.tela-embalar .ajustes-rodape .ajustes-resumo { min-width: 200px; }

/* linha do tempo com blocos (Inserir e Animações) */
.lb { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lb-trilho { position: relative; min-height: 44px; border-radius: 8px; background: var(--superficie-3); border: 1px solid var(--linha-forte); cursor: crosshair; touch-action: none; overflow: hidden; }
.lb-regua { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.07) calc(10% - 1px) 10%); pointer-events: none; }
.lb-fantasmas { position: absolute; left: 0; right: 0; top: 2px; height: 8px; pointer-events: none; }
.lb-fantasma { position: absolute; top: 0; height: 6px; border-radius: 3px; border: 1px dashed var(--sugerida); background: rgba(245, 165, 36, 0.18); }
.lb-blocos { position: absolute; inset: 0; }
.lb-bloco { position: absolute; height: 24px; min-width: 6px; border-radius: 5px; background: rgba(110, 168, 254, 0.35); border: 1px solid var(--acento); cursor: grab; display: flex; align-items: center; overflow: hidden; }
.lb-bloco::before, .lb-bloco::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.lb-bloco::before { left: 0; border-left: 3px solid var(--acento-forte); }
.lb-bloco::after { right: 0; border-right: 3px solid var(--acento-forte); }
.lb-bloco:focus-visible { box-shadow: var(--foco); z-index: 2; }
.lb-bloco-texto { padding: 0 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.lb-bloco.ins-bloco-sem { background: rgba(110, 168, 254, 0.12); border-style: dashed; }
.lb-bloco.ani-bloco { background: rgba(155, 123, 242, 0.32); border-color: var(--nota); }
.lb-bloco.ani-bloco::before { border-left-color: transparent; cursor: grab; }
.lb-bloco.ani-bloco::after { border-right-color: #c4b1ff; }
.lb-bloco.lb-bloco-erro { background: rgba(255, 99, 105, 0.25); border-color: var(--erro); }
.lb-cabeca { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--texto); pointer-events: none; z-index: 3; }
.lb-tempos { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--texto-2); }
.lb-sem-duracao .lb-trilho { opacity: 0.6; }
.lb-ajuda { margin: 0; font-size: 12px; }

/* Inserir */
.ins-qual { gap: 6px 16px; }
.ins-palco { display: flex; justify-content: center; }
.ins-video { width: auto; max-width: 100%; max-height: 46vh; background: #000; border-radius: 8px; display: block; }
.ins-info { margin: 0; font-size: 12.5px; color: var(--texto-2); }
.ins-info:empty { display: none; }
.ins-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 14px; align-items: start; }
.ins-sugestoes, .ins-lista, .ani-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ins-sugestao { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--superficie-2); border: 1px solid var(--linha); border-left: 3px solid var(--sugerida); }
.ins-sugestao-aceita { border-left-color: var(--ok); }
.ins-sugestao-dispensada { opacity: 0.6; border-left-color: var(--linha-forte); }
.ins-sugestao-texto { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ins-prompt-sug { margin: 2px 0 0; font-size: 12px; }
.ins-sugestao-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ins-vazio { margin: 0; font-size: 12.5px; }
.ins-vazio:empty { display: none; }
.ins-cartao { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--linha); min-width: 0; }
.ins-cartao-erro { border-color: rgba(255, 99, 105, 0.55); }
.ins-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ins-titulo { font-size: 14px; font-weight: 640; }
.ins-cabeca-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.ins-motivo { margin: 0; font-size: 12.5px; }
.ins-motivo:empty { display: none; }
.ins-tempos { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.ins-tempos .campo-numero { width: 96px; flex: none; }
.ins-imagem { display: flex; flex-direction: column; gap: 8px; }
.ins-escolhida-linha { display: flex; align-items: center; gap: 10px; font-size: 13px; min-width: 0; }
.ins-escolhida-linha > span { min-width: 0; overflow-wrap: anywhere; }
.ins-mini { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha-forte); flex: none; }
.ins-midia { font-size: 12px; color: var(--texto-2); }
.ins-sem-imagem { margin: 0; font-size: 12.5px; color: #ffe2b0; }
.ins-fonte-ia, .ins-fonte-url, .ins-fonte-arq { display: flex; flex-direction: column; gap: 6px; }
.ins-fonte-dica { margin: 0; }
.ins-fonte-dica:empty { display: none; }
/* cartão animado (motion graphic do animador como corte de cena) */
.ins-fonte-cartao { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--linha-forte); }
.ins-fonte-cartao[hidden], .ins-fonte-video[hidden] { display: none; }
.ins-fonte-video { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--linha-forte); }
.ins-video-custo { margin: 0; font-size: 13px; font-weight: 600; }
.ins-video-custo:empty, .ins-video-gastos:empty { display: none; }
.ins-video-gastos { margin: 0; }
.ins-fonte-video .ani-linha-campos { grid-template-columns: minmax(300px, 2fr) minmax(130px, 1fr); }
.ins-fonte-video .ani-linha-campos select { width: 100%; }
.ins-cartao-campos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ins-fundos { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.ins-fundo-opcao { display: flex; flex-direction: column; gap: 2px; }
.ins-fundo-opcao .mont-opcao { align-self: flex-start; }
.ins-fundo-desc { margin: 0 0 0 4px; }
.ins-cartao-problema, .ins-video-problema { margin: 0; }
.ins-cartao-problema:empty, .ins-video-problema:empty { display: none; }
.ins-cartao-previa-caixa:empty, .ins-cartao-andamento:empty { display: none; }
.ins-cartao-previa-img { max-width: 100%; max-height: 260px; width: auto; align-self: flex-start; border-radius: 8px;
  border: 1px solid var(--linha-forte); background: repeating-conic-gradient(#20242e 0% 25%, #151821 0% 50%) 0 0 / 16px 16px; }
.ins-clipe-caixa[hidden] { display: none; }
.ins-clipe { max-width: 100%; max-height: 260px; width: auto; align-self: flex-start; border-radius: 8px; border: 1px solid var(--linha-forte); background: #000; }
.ins-clipe-avisos:empty { display: none; }
.ins-sub-titulo { margin: 10px 0 0; font-size: 13.5px; font-weight: 640; }
.ins-sugestao-cartao:not(.ins-sugestao-aceita):not(.ins-sugestao-dispensada) { border-left-color: var(--acento); }
.ins-prompt { min-height: 52px; }
.ins-geracao:empty { display: none; }
.ins-gerando { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.ins-relogio { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ins-gerada { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ins-gerada-img { max-width: 100%; max-height: 240px; width: auto; align-self: flex-start; border-radius: 8px; border: 1px solid var(--linha-forte); background: #000; }
.ins-gerada-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.ins-como { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ins-janela { display: contents; }
.ins-borda { width: 44px; padding: 2px; flex: none; }
.ins-erro { margin: 0; color: #ffb4b7; font-size: 12.5px; }
.ins-erro:empty, .ins-aviso-host:empty { display: none; }
.ins-aviso-host { margin: 0; font-size: 12.5px; }
@media (max-width: 1280px) {
  .ins-lado { grid-template-columns: 1fr; }
}

/* Animações */
.ani-palco-caixa { display: flex; justify-content: center; }
.ani-palco { position: relative; height: 46vh; max-width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 8px; overflow: hidden; }
.ani-palco .ani-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-height: none; border-radius: 0; }
.ani-sobre { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ani-legenda-previa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); }
.ani-legenda-previa:empty { display: none; }
.ani-adicionar .campo { flex: 0 1 240px; }
.ani-origem { margin: 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.5; overflow-wrap: anywhere; }
.ani-origem .etiqueta { height: 20px; font-size: 11.5px; padding: 0 7px; vertical-align: 1px; }
/* Legendar: "Legenda e animações" — os rótulos das opções são frases: colunas mais largas */
.leg-animacoes .ajustes-grade { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.leg-animacoes-caixa { border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie-2, transparent); }
.leg-animacoes-resumo { cursor: pointer; padding: 3px 12px; font-size: 12.5px; line-height: 1.35; font-weight: 560; }
.leg-animacoes-valores { font-weight: 400; }
.leg-animacoes-caixa > .leg-animacoes { border: 0; border-top: 1px solid var(--linha); border-radius: 0 0 8px 8px; margin: 0; }
.ani-linha-campos { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(170px, 1.2fr) minmax(110px, 0.8fr) minmax(130px, 1fr); gap: 8px 14px; }
.ani-linha-campos .campo-numero { width: 124px; flex: none; }
.ani-campos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ani-campo-largo { grid-column: 1 / -1; }
.ani-do-projeto { margin-left: 6px; height: 18px; font-size: 11px; padding: 0 6px; }
.ani-previa-status:empty { display: none; }
.ani-previa-status .faixa-aviso { margin: 0; display: flex; gap: 8px; align-items: center; }

/* Animações esperando a escolha (produtor v2: nada para animar) */
.ani-espera { padding: 14px 16px; border: 1px solid rgba(245, 165, 36, 0.45); border-radius: 12px; background: rgba(245, 165, 36, 0.08); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ani-espera-texto { margin: 0; font-size: 14.5px; line-height: 1.5; color: #ffe2b0; font-weight: 560; overflow-wrap: anywhere; }
.ani-espera-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ani-espera-titulo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 14px; align-items: end; }
.ani-espera-titulo .ani-espera-nota, .ani-espera-titulo .ajuste-linha { grid-column: 1 / -1; margin: 0; }

/* ---------------------------------------------------------- marcas (tela Marcas) */

.marcas-sub { color: var(--texto-3); font-size: 13px; }
.marcas-grade {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.marcas-grade.carregando { padding: 0; }
.marcas-grade > li { display: flex; min-width: 0; }
.marca-esqueleto {
  height: 300px; border-radius: 10px;
  background: linear-gradient(90deg, var(--superficie-2) 0%, var(--superficie-3) 50%, var(--superficie-2) 100%);
  background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite;
}
.marca-cartao {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie);
  transition: border-color .12s, box-shadow .2s;
}
.marca-cartao:hover { border-color: var(--linha-forte); }
.marca-cartao:focus-visible { box-shadow: var(--foco); border-radius: 10px; }
.marca-nova-criada { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
.marca-vitrine {
  position: relative; height: 132px; display: flex; align-items: center; justify-content: center;
  padding: 20px 24px; background: var(--superficie-3); border-bottom: 1px solid var(--linha);
}
.marca-vitrine-vazia {
  background: repeating-linear-gradient(135deg, var(--superficie-2) 0 10px, var(--superficie-3) 10px 20px);
}
.marca-logo { max-width: 78%; max-height: 72px; object-fit: contain; }
.marca-monograma {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%;
  color: var(--texto-2); font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marca-monograma-traco { width: 36px; height: 3px; border-radius: 2px; background: var(--texto-3); }
.marca-vitrine-vazia .marca-monograma { font-size: 15px; font-family: var(--mono); font-weight: 500; }
.marca-corpo { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 4px; min-width: 0; }
.marca-cabeca { display: flex; align-items: center; gap: 8px; min-width: 0; }
.marca-cartao-nome { min-width: 0; font-size: 15.5px; font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-cabeca .etiqueta { flex: none; }
.marca-id { margin-top: -6px; color: var(--texto-3); font-size: 12px; overflow-wrap: anywhere; }
.marca-paleta { display: flex; gap: 6px; min-height: 22px; align-items: center; }
.marca-cor {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.marca-cor-esqueleto { background: var(--superficie-3); border-color: var(--linha); }
.marca-cor-sem { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--linha-forte) 4px 5px); }
.marca-paleta-falha { color: var(--texto-3); font-size: 12.5px; }
.marca-resumo { color: var(--texto-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.marca-nota { color: var(--texto-3); font-size: 12.5px; line-height: 1.45; }
.marca-erro { color: #ffb4b7; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.marca-avisos { margin: 0; padding-left: 16px; color: #e6c98a; font-size: 12px; line-height: 1.45; }
.marca-acoes { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; }

.marca-nova .dialogo-corpo { display: flex; flex-direction: column; gap: 14px; }
.marca-nova-campo .campo { width: 100%; }
.campo-mono { font-family: var(--mono); font-size: 13px; }
.marca-nova-mensagem { padding: 10px 12px; border-radius: var(--raio-p); background: rgba(255, 99, 105, 0.1); border: 1px solid rgba(255, 99, 105, 0.3); color: #ffc9cb; font-size: 13px; }

/* ---------------------------------------------------------- editor do kit da marca */

/* as fontes que o montador, o animador e o embalador trazem (vendor/fontes, OFL): a prévia usa
   os mesmos nomes de família que o kit (ex.: "Fraunces ExtraBold") */
@font-face { font-family: "Fraunces ExtraBold"; src: url("vendor/fontes/Fraunces-ExtraBold.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces SemiBold"; src: url("vendor/fontes/Fraunces-SemiBold.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk ExtraBold"; src: url("vendor/fontes/HankenGrotesk-ExtraBold.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk SemiBold"; src: url("vendor/fontes/HankenGrotesk-SemiBold.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

.marca-editor { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 64px; }
.marca-editor-carregando { display: flex; align-items: center; gap: 10px; color: var(--texto-2); padding: 48px 0; }
.kit-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.kit-cabeca-titulo { display: flex; align-items: center; gap: 10px; }
.kit-cabeca .marca-id { margin-top: 2px; display: block; }
.kit-reservada {
  margin-bottom: 16px; padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--linha-forte);
  background: var(--superficie-2); color: var(--texto-2); font-size: 13.5px;
}
.kit-reservada strong { color: var(--texto); }
.kit-avisos { margin: 0 0 16px; padding: 10px 14px 10px 30px; border-radius: var(--raio); background: rgba(245, 165, 36, 0.08); border: 1px solid rgba(245, 165, 36, 0.3); color: #e6c98a; font-size: 13px; }
.kit-modelos { margin-bottom: 20px; }
.kit-modelos:empty { display: none; }
.kit-modelos-titulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin-bottom: 6px; }
.kit-modelos-lista { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kit-modelos-lista li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; max-width: 520px; padding: 8px 12px;
  border-radius: var(--raio-p); background: var(--superficie); border: 1px solid var(--linha); font-size: 13px;
}
.kit-modelos-lista code { color: var(--texto-3); font-size: 11.5px; }
.kit-modelo-descricao { flex-basis: 100%; color: var(--texto-2); font-size: 12.5px; }

.kit-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: start; }
.kit-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
.kit-nav-item { padding: 7px 10px; border-radius: var(--raio-p); color: var(--texto-2); font-size: 13.5px; }
.kit-nav-item:hover { background: var(--superficie-2); color: var(--texto); }
.kit-nav-suja::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--sugerida); vertical-align: middle; }
.kit-secoes { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.kit-secao { border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); scroll-margin-top: 76px; }
.kit-secao-suja { border-color: rgba(245, 165, 36, 0.45); }
.kit-secao-cabeca { padding: 16px 20px 0; }
.kit-secao-titulo { font-size: 16px; font-weight: 650; }
.kit-secao-titulo:focus { outline: none; }
.kit-secao-descricao { margin-top: 4px; color: var(--texto-3); font-size: 13px; max-width: 720px; }
.kit-secao-corpo { display: flex; gap: 24px; padding: 16px 20px; align-items: flex-start; }
.kit-campos { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
.kit-campos:disabled .campo, .kit-campos:disabled .kit-faixa { opacity: .75; cursor: default; }
.kit-secao-erro { margin: 0 20px 12px; color: #ffb4b7; font-size: 13px; }
.kit-secao-rodape {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px;
  border-top: 1px solid var(--linha); background: var(--bg-2); border-radius: 0 0 10px 10px;
}
.kit-secao-estado { margin-right: auto; color: var(--texto-3); font-size: 12.5px; }
.kit-secao-suja .kit-secao-estado { color: #ffd99a; }
.kit-conflito {
  margin: 0 20px 14px; padding: 12px 14px; border-radius: var(--raio-p); font-size: 13px;
  background: rgba(245, 165, 36, 0.08); border: 1px solid rgba(245, 165, 36, 0.45); color: var(--texto-2);
}
.kit-conflito-titulo { color: #ffd99a; font-weight: 600; margin-bottom: 4px; }
.kit-conflito-lista { margin: 8px 0; padding-left: 18px; }
.kit-conflito-lista code { color: var(--texto); }
.kit-conflito-acoes { display: flex; justify-content: flex-end; gap: 8px; }

.kit-identidade, .kit-textos, .kit-hashtags { display: flex; flex-direction: column; gap: 16px; }
.kit-campo .campo, .kit-fonte .campo { width: 100%; }
.kit-grupo-titulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin-bottom: 8px; padding: 0; }
.kit-cores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kit-cor-par { display: flex; gap: 6px; }
.kit-cor-seletor { flex: none; width: 36px; height: 36px; padding: 2px; border-radius: var(--raio-p); border: 1px solid var(--linha-forte); background: var(--bg-2); cursor: pointer; }
.kit-cor-texto { width: 100%; min-width: 0; text-transform: uppercase; }
.kit-fontes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kit-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 10px; }
.kit-logo-vitrine { height: 96px; display: flex; align-items: center; justify-content: center; border-radius: var(--raio-p); border: 1px solid var(--linha); margin-bottom: 8px; }
.kit-logo-claro { background: #f4f4f2; }
.kit-logo-escuro { background: #14161a; }
.kit-logo-img { max-width: 80%; max-height: 64px; object-fit: contain; }
.kit-logo-vazio { color: #8a8f98; font-size: 12.5px; }
.kit-logo-estado { margin-top: 6px; font-size: 12.5px; color: var(--texto-2); }
.kit-logo-estado:empty { display: none; }
.kit-logo-recusa { color: #ffb4b7; }
.kit-logo-progresso { width: 100%; height: 6px; margin-top: 6px; }
.kit-rotulo-linha { display: flex; justify-content: space-between; align-items: baseline; }
.kit-conta { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.kit-conta-passou { color: #ffb4b7; }
.kit-voz { width: 100%; min-height: 260px; padding: 10px 12px; height: auto; line-height: 1.55; resize: vertical; font-family: var(--mono); font-size: 13px; }

.kit-previa { flex: none; width: 300px; position: sticky; top: 80px; display: flex; flex-direction: column; gap: 10px; }
.kit-previa-rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }
.kit-previa-quadro {
  height: 120px; display: flex; align-items: flex-end; padding: 12px; border-radius: var(--raio-p); overflow: hidden;
  background: linear-gradient(160deg, #5b6470 0%, #2f343b 55%, #1d2024 100%);
}
.kit-tarja-caixa { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 3px; }
.kit-tarja-pregador { font-size: 16px; line-height: 1.2; }
.kit-tarja-titulo { font-size: 13px; line-height: 1.2; }
.kit-previa-cartao {
  min-height: 170px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  padding: 20px; border-radius: var(--raio-p); text-align: center; border: 1px solid var(--linha);
}
.kit-cartao-logo { max-width: 50%; max-height: 32px; object-fit: contain; }
.kit-cartao-convite { font-size: 20px; line-height: 1.2; }
.kit-cartao-canal { font-size: 12.5px; }

.kit-posicoes { display: flex; flex-direction: column; gap: 16px; }
.kit-orientacao { margin: 0; padding: 0; border: 0; }
.kit-orientacao-corpo { display: flex; gap: 24px; align-items: flex-start; }
.kit-orientacao-campos { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.kit-faixa-linha { display: flex; align-items: center; gap: 10px; }
.kit-faixa { flex: 1; accent-color: var(--acento); }
.kit-faixa-valor { width: 40px; text-align: right; color: var(--texto-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kit-quadro {
  flex: none; position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--linha-forte);
  background: linear-gradient(160deg, #5b6470 0%, #2f343b 55%, #1d2024 100%);
}
.kit-zona { position: absolute; background: repeating-linear-gradient(135deg, rgba(255, 99, 105, 0.22) 0 5px, transparent 5px 10px); }
.kit-zona-baixo { left: 0; right: 0; bottom: 0; }
.kit-zona-direita { top: 0; bottom: 0; right: 0; }
.kit-quadro-tarja { position: absolute; padding: 0.25em 0.5em; border-radius: 2px; white-space: nowrap; line-height: 1.25; }
.kit-quadro-selo { position: absolute; display: flex; align-items: center; justify-content: center; }
.kit-quadro-selo img { width: 100%; height: auto; display: block; }
.kit-quadro-selo-vazio { aspect-ratio: 4 / 1; border: 1px dashed rgba(255, 255, 255, 0.7); border-radius: 3px; color: #fff; }
.kit-pos-acoes { display: flex; justify-content: flex-start; }

/* seletor de arquivo em português (comum.js: seletorDeArquivo): o input fica oculto e o foco
   dele aparece no botão visual */
.seletor-arquivo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.seletor-arquivo .campo-arquivo:focus-visible + .botao-arquivo { box-shadow: var(--foco); }
.seletor-arquivo .campo-arquivo[aria-invalid="true"] + .botao-arquivo { border-color: var(--erro); }
.arquivo-nome { min-width: 0; color: var(--texto-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------- músicas da marca */

.kit-musicas-corpo { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 20px; }
.kit-musicas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.kit-musicas-vazia { padding: 16px; color: var(--texto-3); font-size: 13px; }
.kit-musica { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--linha); background: var(--bg-2); }
.kit-musica:last-child { border-bottom: 0; }
.kit-musica-ouvir { flex: none; width: 76px; }
.kit-musica-info { flex: 1; min-width: 0; }
.kit-musica-linha1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kit-musica-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-musica-artista { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-musica-duracao { margin-left: auto; color: var(--texto-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kit-musica-linha2 { margin-top: 2px; color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-musica-acoes { flex: none; display: flex; gap: 4px; }
.kit-musica-form { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.kit-musica-form-campos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kit-musica-form-campos .campo { width: 100%; }
.kit-musica-form-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.kit-musica-registros { list-style: none; margin: 0; padding: 0; color: var(--texto-2); font-size: 13px; }
.kit-musica-registros:empty { display: none; }
.kit-musica-nova { padding: 16px; border: 1px dashed var(--linha-forte); border-radius: var(--raio); background: var(--bg-2); }
.kit-musica-nova-titulo { font-size: 14px; font-weight: 640; margin-bottom: 12px; }
.kit-musica-nova-campos { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; }
.kit-musica-nova-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.kit-musica-nova-grade .campo { width: 100%; }
.kit-musica-nova-acoes { display: flex; justify-content: flex-end; margin-top: 14px; }
.kit-musica-envio { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.kit-musica-progresso { width: 100%; height: 6px; }
.kit-musica-envio-estado { color: var(--texto-2); font-size: 13px; }
.kit-musica-envio-estado:empty { display: none; }
.kit-musica-envio-acoes { display: flex; gap: 8px; }
.kit-musica-envio-acoes:empty { display: none; }

/* exemplos de cada preenchimento do Enquadrar (onda 2B, Task 3): miniaturas que também escolhem */
.exemplos { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; min-width: 0; }
.exemplos-lista { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.exemplo {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; padding: 6px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--texto-2);
  font: inherit; font-size: 11.5px; line-height: 1.3; text-align: center; cursor: pointer;
}
.exemplo:hover:not(:disabled) { border-color: var(--linha-forte); background: var(--superficie-2); }
.exemplo:focus-visible { outline: none; box-shadow: var(--foco); }
.exemplo[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-fundo); color: var(--texto); }
.exemplo:disabled { opacity: 0.55; cursor: default; }
.exemplo-quadro { display: block; width: 72px; max-width: 100%; overflow: hidden; border-radius: 4px; background: #000; }
.exemplos[data-formato="16x9"] .exemplo-quadro { width: 92px; }
.exemplos[data-formato="9x16"] .exemplo-quadro { width: 48px; }
.ajustes-grade .ajuste:has(.exemplos) { grid-column: span 2; }
.ajustes-grade .ajuste:has(.exemplos) .opcao-dica, .ajustes-grade .ajuste:has(.exemplos) .ajuste-dica-opcao { max-width: 420px; }
.exemplo-imagem, .exemplo-ilustracao { display: block; width: 100%; height: 100%; object-fit: cover; }
.exemplo-nome { overflow-wrap: anywhere; }
.exemplo-selo {
  position: absolute; top: 3px; right: 3px; padding: 1px 5px; border-radius: 999px; background: var(--ok); color: #05130c;
  font-size: 10px; font-weight: 600; line-height: 1.4;
}
.exemplos-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.exemplos-nota { margin: 0; font-size: 11.5px; }
.exemplos-nota:empty { display: none; }
.ilu-ceu { fill: #3b5f8a; }
.ilu-chao { fill: #2f4a35; }
.ilu-sol { fill: #f5c542; }
.ilu-cabeca { fill: #e2b995; }
.ilu-corpo { fill: #c9d1da; }
.ilu-barras { fill: #000; }
.ilu-borda { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.6; }
.ilu-fundo { opacity: 0.8; }

/* cortes: linha do tempo do vídeo inteiro (linha-cortes.js). As cores das faixas são lidas pelo
   canvas (--lc-<estado>) e repetidas na legenda. */
:root {
  --lc-sugerido: #f5a524;
  --lc-aprovado: #3dd68c;
  --lc-nao_aprovado: #5b636e;
  --lc-tirado: #c2474c;
  --lc-novo: #a68bf5;
  --lc-grupo: #e7eaee;
}
.linha-cortes { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg-2); min-width: 0; }
.lc-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.lc-titulo { font-size: 13.5px; font-weight: 640; }
.lc-tempo { font-family: var(--mono); font-size: 12px; color: var(--texto-3); }
.lc-estado { color: #ffe2b0; font-size: 12.5px; }
.lc-estado:empty { display: none; }
.lc-barra-direita { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.lc-criar { display: flex; align-items: center; gap: 6px; }
.lc-criar-rotulo { color: var(--texto-2); font-size: 12.5px; white-space: nowrap; }
.lc-campo { width: 86px; font-family: var(--mono); }
.lc-campo[aria-invalid="true"] { border-color: var(--erro); }
.lc-zoom { display: flex; align-items: center; gap: 2px; }
.lc-zoom-botao { min-width: 30px; justify-content: center; font-size: 15px; font-weight: 700; }
.lc-erro:empty { display: none; }
.lc-area { position: relative; border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; user-select: none; touch-action: pan-y; }
.lc-area:focus-visible { box-shadow: var(--foco); }
.lc-miniaturas { position: relative; height: 36px; background: #000; overflow: hidden; cursor: grab; border-bottom: 1px solid var(--linha); }
.lc-miniaturas:active { cursor: grabbing; }
.lc-miniaturas-vazia { background: repeating-linear-gradient(90deg, #15171b 0 70px, #101215 70px 140px); }
.lc-mini { position: absolute; top: 0; height: 36px; background-repeat: no-repeat; border-right: 1px solid rgba(0, 0, 0, 0.6); pointer-events: none; }
.lc-caixa { position: relative; cursor: crosshair; }
.lc-canvas { display: block; width: 100%; height: 0; }
.lc-cursor { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--texto); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6); pointer-events: none; }
.lc-alca { top: 16px; bottom: auto; height: 56px; }
.lc-alca .alca-pega { margin-top: 12px; height: 32px; }
.lc-alca-borda .alca-pega { background: var(--acento-forte); box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3px var(--acento-forte); }
.lc-rodape { display: flex; align-items: flex-start; gap: 6px 16px; flex-wrap: wrap; }
.lc-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--texto-2); }
.lc-legenda-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lc-amostra { width: 14px; height: 9px; border-radius: 2px; display: inline-block; }
.lc-cor-sugerido { background: var(--lc-sugerido); }
.lc-cor-aprovado { background: var(--lc-aprovado); }
.lc-cor-nao_aprovado { background: var(--lc-nao_aprovado); }
.lc-cor-tirado { background: var(--lc-tirado); }
.lc-cor-novo { background: var(--lc-novo); }
.lc-amostra-grupo { height: 2px; background: var(--lc-grupo); border-radius: 0; }
.lc-dica { flex: 1 1 420px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--texto-3); font-size: 11.5px; line-height: 1.4; }
.lc-teclado summary { cursor: pointer; color: var(--texto-2); }
.lc-teclado summary:focus-visible { box-shadow: var(--foco); border-radius: 4px; }
.lc-teclado[open] { flex-basis: 100%; }
.etiqueta-grupo { color: #ffd99a; background: rgba(245, 165, 36, 0.1); border-color: rgba(245, 165, 36, 0.35); }
.cortes-nota { color: #ffe2b0; font-size: 13px; }
.cortes-nota:empty { display: none; }
.lc-alca:focus-visible .alca-pega { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--acento-forte); background: var(--acento-forte); }

/* Prévias sem render (onda 3B): "Ver como fica" no Decupar e "Prévia" no Zoom */
.palco-como-fica .tempo-atual { color: #ffd3d5; }
.tempo-origem { color: var(--texto-3); font-family: var(--fonte); font-size: 11.5px; margin-left: 2px; }
.palco-como-fica .tempo::before { content: "resultado "; color: var(--texto-3); font-family: var(--fonte); font-size: 11.5px; }
.zoom-caixa { position: absolute; inset: 0; }
.zoom-caixa-ativa { inset: auto; overflow: hidden; background: #000; }
.zoom-caixa-ativa .palco-video { will-change: transform; }
.palco-selo-previa { color: #c9f4ee; border-color: rgba(47, 180, 166, 0.6); background: rgba(6, 22, 20, 0.74); }
.alternador-previa[aria-pressed="true"] .alternador-trilho { background: rgba(47, 180, 166, 0.35); border-color: rgba(47, 180, 166, 0.65); }
.palco-selo-previa { height: auto; padding: 4px 10px; border-radius: 10px; align-items: flex-start; }
.palco-selo-previa .icone { margin-top: 2px; }
.selo-linhas { display: flex; flex-direction: column; gap: 1px; }
.selo-nota { font-weight: 450; font-size: 11.5px; color: #a8ddd6; }

/* espera da nova tentativa automática: âmbar, não é falha */
.faixa-aviso-espera { background: rgba(245, 165, 36, 0.12); border: 1px solid rgba(245, 165, 36, 0.4); color: #ffe2b0; flex-wrap: wrap; }
.etapa-faixas .faixa-aviso-espera { align-items: flex-start; }
.etapa-tentativas { flex-basis: 100%; font-size: 13px; }
.etapa-tentativas summary { cursor: pointer; }
.etapa-tentativas ul { margin: 6px 0 0; padding-left: 18px; }
.etapa-espera .etapa-espera-contagem { font-weight: 650; }
.etapa-detalhe.etapa-espera { color: #ffd592; }