/* Paleta @isabeldigitall.pt em tons brancos (17 Set 2026, pedido dela: o escuro estava
   "demasiado pesado"). O tema antigo, escuro, ficou em git para referencia. */
:root {
  --noite: #0E1136;
  --fundo: #F5F4FA;
  --pink: #E91E8B;
  --pink-texto: #B3125F;
  --roxo: #5E2B97;
  --lilas: #5E2B97;           /* nos textos: o lilas claro nao se le sobre branco */
  --lilas-fundo: #D8C4F0;
  --amarelo: #F5C13D;
  --amarelo-texto: #7A5300;
  --verde: #178A5B;           /* nos textos; os fundos usam a menta clara em rgba */
  --agua: #A8E5E5;
  --vermelho: #E83A4F;
  --vermelho-texto: #B3122A;
  --branco: #FFFFFF;
  --texto: #1B1D3A;
  --suave: #6B6F8F;
  --linha: rgba(94,43,151,.14);
  --painel: #FFFFFF;
  --superficie: rgba(94,43,151,.05);   /* caixas dentro dos paineis */
  --superficie-2: rgba(94,43,151,.09); /* mapa, lupa, cabecalhos */
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}
a { color: var(--lilas); }
h1, h2, h3 { font-weight: 700; margin: 0; }
.escondido { display: none !important; }

header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--linha);
  background: var(--painel); position: sticky; top: 0; z-index: 10;
}
header h1 { font-size: 16px; letter-spacing: .3px; }
header h1 span { color: var(--pink); }
.estado-chips { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.chip {
  font-size: 11px; padding: 4px 10px; border-radius: 99px;
  background: rgba(94,43,151,.08); color: var(--suave); white-space: nowrap;
}
.chip.bom { background: rgba(184,242,216,.45); color: var(--verde); }
.chip.mau { background: rgba(232,58,79,.14); color: var(--vermelho-texto); }

main { max-width: 1280px; margin: 0 auto; padding: 22px; }
.painel {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: 14px; padding: 18px; margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(14,17,54,.05);
}
.painel > h2 { font-size: 14px; margin-bottom: 14px; color: var(--lilas); }

/* Os links de download tem de ser <a> (o browser trata do ficheiro), mas veem-se
   como botoes: por isso as regras valem para os dois. */
button, a.botao {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--pink); color: #fff; transition: filter .15s;
  display: inline-block; text-decoration: none; white-space: nowrap;
}
button:hover:not(:disabled), a.botao:hover { filter: brightness(1.12); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secundario, a.botao.secundario { background: rgba(94,43,151,.09); color: var(--roxo); }
button.perigo { background: rgba(232,58,79,.14); color: var(--vermelho-texto); }
button.pequeno, a.botao.pequeno { padding: 5px 11px; font-size: 12px; }

input, select {
  font-family: inherit; font-size: 13px; padding: 9px 12px;
  border-radius: 9px; border: 1px solid var(--linha);
  background: var(--branco); color: var(--texto);
}
input:focus, select:focus { outline: 2px solid var(--pink); outline-offset: -1px; }
label { display: block; font-size: 12px; color: var(--suave); margin-bottom: 6px; }

.linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cresce { flex: 1; min-width: 0; }

/* navegador de ficheiros */
.explorador { max-height: 320px; overflow-y: auto; border: 1px solid var(--linha); border-radius: 10px; }
.entrada {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  cursor: pointer; border-bottom: 1px solid rgba(94,43,151,.08);
}
.entrada:hover { background: rgba(233,30,139,.09); }
.entrada .tam { margin-left: auto; color: var(--suave); font-size: 11px; }

/* progresso */
.barra { height: 6px; background: rgba(94,43,151,.12); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--roxo), var(--pink)); transition: width .3s; }

/* resumo */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.numero { background: var(--superficie); border-radius: 11px; padding: 13px 15px; }
.numero b { display: block; font-size: 21px; font-weight: 800; color: var(--texto); }
.numero span { font-size: 11px; color: var(--suave); }
.numero.destaque b { color: var(--verde); }

/* linha temporal */
.mapa {
  position: relative; height: 42px; background: var(--superficie-2);
  border-radius: 8px; overflow: hidden; cursor: crosshair; margin-bottom: 14px;
}
.mapa .corte { position: absolute; top: 0; bottom: 0; background: rgba(233,30,139,.75); }
.mapa .corte.inactivo { background: rgba(94,43,151,.22); }
.mapa .corte.pendente { background: rgba(233,30,139,.3); }
.mapa .agulha { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--amarelo); }

.cortes { display: flex; flex-direction: column; gap: 8px; max-height: 620px; overflow-y: auto; }
.corte-item {
  display: grid; grid-template-columns: 44px 92px 1fr auto; gap: 13px;
  align-items: center; padding: 11px 13px; border-radius: 10px;
  background: var(--superficie); border-left: 3px solid transparent;
}
.corte-item.aprovado { border-left-color: var(--pink); background: rgba(233,30,139,.09); }
.corte-item.fica { border-left-color: var(--verde); opacity: .75; }
.corte-item .estado { font-size: 10px; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 5px; background: rgba(94,43,151,.09); color: var(--suave); }
.corte-item.aprovado .estado { background: rgba(233,30,139,.18); color: var(--pink-texto); }
.corte-item.fica .estado { background: rgba(184,242,216,.45); color: var(--verde); }
.corte-item .decidir button.activo { outline: 2px solid currentColor; }
.corte-item .btn-sai, .corte-na-lista .btn-sai { background: rgba(233,30,139,.14); color: var(--pink-texto); }
.corte-item .btn-fica, .corte-na-lista .btn-fica { background: rgba(184,242,216,.45); color: var(--verde); }
.corte-item .tempo { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--lilas); }
.corte-item .tempo small { display: block; color: var(--suave); font-size: 10px; }
.corte-item .motivo { font-weight: 600; font-size: 12px; }
.corte-item .fala { font-size: 12px; color: var(--suave); margin-top: 3px; line-height: 1.45; }
.corte-item .fala em { color: var(--texto); font-style: normal; background: rgba(233,30,139,.12); padding: 0 3px; border-radius: 3px; }
.corte-item input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--pink); cursor: pointer; }
.etiqueta { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(94,43,151,.09); color: var(--suave); }
.etiqueta.ia { background: rgba(94,43,151,.14); color: var(--roxo); }

video { width: 100%; border-radius: 11px; background: #000; max-height: 420px; }

.aviso {
  padding: 11px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: rgba(245,193,61,.16); color: var(--amarelo-texto); border: 1px solid rgba(245,193,61,.5);
}
.aviso.erro { background: rgba(232,58,79,.1); color: var(--vermelho-texto); border-color: rgba(232,58,79,.35); }

.lista-projetos { display: flex; flex-direction: column; gap: 8px; }
.proj {
  display: flex; align-items: center; gap: 13px; padding: 11px 14px;
  background: var(--superficie); border-radius: 10px; cursor: pointer;
}
.proj:hover { background: rgba(233,30,139,.1); }
.proj .nome { font-weight: 600; }
.proj .meta { font-size: 11px; color: var(--suave); }

/* ---------- ecra inicial: Drive em primeiro, gravacoes por partes ---------- */
.nota { color: var(--suave); font-size: 12px; line-height: 1.5; }
input.pequeno, select.pequeno { padding: 5px 9px; font-size: 12px; }

.drive-caixa {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer;
  border: 1.5px dashed rgba(94,43,151,.35); border-radius: 12px;
  background: var(--superficie); transition: border-color .15s, background .15s;
}
.drive-caixa:hover { border-color: var(--pink); background: rgba(233,30,139,.07); }
.drive-caixa.desligada { cursor: default; opacity: .6; }
.drive-caixa .icone { font-size: 28px; }
.drive-caixa b { display: block; font-size: 14px; }
.drive-caixa span:not(.icone) { display: block; color: var(--suave); font-size: 12px; margin-top: 3px; }
#driveNav { margin-top: 14px; }
.atalhos { display: flex; gap: 6px; flex-wrap: wrap; }
.migalhas { font-size: 12px; color: var(--suave); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.migalhas span { cursor: pointer; }
.migalhas span:hover { color: var(--lilas); }
.migalhas span.actual { color: var(--texto); font-weight: 600; cursor: default; }
.migalhas i { font-style: normal; opacity: .5; }
.escolha-drive {
  display: flex; gap: 14px; align-items: center; padding: 13px 16px; border-radius: 11px;
  background: rgba(184,242,216,.28); border: 1px solid rgba(23,138,91,.35);
}
.escolha-drive b { color: var(--verde); }

.grupos { display: flex; flex-direction: column; gap: 16px; }
.grupo { border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.grupo-cabeca {
  display: flex; align-items: baseline; gap: 12px; padding: 11px 15px;
  background: var(--superficie); font-size: 13px; cursor: pointer; user-select: none;
}
.grupo-cabeca:hover { background: rgba(94,43,151,.13); }
.grupo-cabeca .seta { opacity: .6; font-size: 12px; transition: transform .15s; display: inline-block; }
.grupo-cabeca .resumo-fechado { display: none; margin-left: auto; opacity: .7; }
.grupo.fechado .grupo-cabeca .seta { transform: rotate(-90deg); }
.grupo.fechado .grupo-cabeca .resumo-fechado { display: inline; }
.grupo.fechado .parte,
.grupo.fechado .juntas { display: none; }
.grupo.descartado .grupo-cabeca { opacity: .55; }
.grupo.descartado .grupo-cabeca:hover { opacity: .9; }
.grupo-cabeca .grupo-direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.grupo-cabeca .icone-so { padding: 1px 6px; font-size: 11px; opacity: .5; }
.grupo-cabeca .icone-so:hover { opacity: 1; }
.parte .destinos { display: flex; gap: 4px; }
.parte .destinos .chip { text-decoration: none; }
.parte {
  display: flex; align-items: center; gap: 11px; padding: 10px 15px;
  border-top: 1px solid rgba(94,43,151,.08); cursor: pointer;
}
.parte:hover { background: rgba(233,30,139,.08); }
.parte.descartada { opacity: .45; }
.parte.finalizada { padding: 8px 15px; background: rgba(23,138,91,.05); }
.parte.finalizada .chip.bom { text-decoration: none; }
.parte-nome b .pequeno { margin-left: 8px; font-weight: 500; vertical-align: middle; }
.parte.descartada:hover { opacity: .8; }
.parte-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.parte-nome b { font-size: 13px; }
.parte-nome .nota { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.activo { background: rgba(245,193,61,.3); color: var(--amarelo-texto); }
.barra.mini { width: 90px; height: 5px; }

details.painel > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--lilas); list-style: none; }
details.painel > summary::before { content: '▸ '; opacity: .6; }
details.painel[open] > summary::before { content: '▾ '; }

/* passos de saida: preview obrigatorio antes do final */
.passos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .passos { grid-template-columns: 1fr; } }
.passo { background: var(--superficie); border-radius: 11px; padding: 14px 16px; }
.passo-cabeca { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; flex-wrap: wrap; }
.passo-cabeca b { font-size: 13px; }

/* relogio do video final (modo "Ver so o que fica") */
.controlo-final {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 12px;
  background: var(--superficie); border-radius: 10px;
}
.controlo-final .cf-tempo { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--verde); font-weight: 600; white-space: nowrap; }
.controlo-final .cf-barra { flex: 1; height: 8px; background: rgba(94,43,151,.12); border-radius: 99px; cursor: pointer; overflow: hidden; }
.controlo-final .cf-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--roxo), var(--verde)); }
.controlo-final .chip { background: rgba(184,242,216,.45); color: var(--verde); }
/* no mapa, com o modo ligado, o que sai fica apagado em vez de rosa */
.mapa .corte.juncao { width: 2px; background: var(--noite); opacity: .7; }
.transcricao { margin: 12px 0; border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; background: var(--superficie); }
.transcricao summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--lilas); display: flex; gap: 10px; align-items: center; list-style: none; user-select: none; }
.transcricao summary::-webkit-details-marker { display: none; }
.transcricao summary .seta { display: inline-block; width: 14px; transition: transform .15s; }
.transcricao:not([open]) summary .seta { transform: rotate(-90deg); }
.transcricao:not([open]) { padding-bottom: 10px; }
.transcricao .texto { user-select: text; -webkit-user-select: text; max-height: 260px; overflow-y: auto; margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--texto); padding-right: 6px; }
.transcricao .legenda-cores { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--suave); }
.transcricao .legenda-cores i { font-style: normal; padding: 0 4px; cursor: default; }
.transcricao .pal { cursor: pointer; border-radius: 3px; padding: 0 1px; }
.transcricao .pal:hover { background: rgba(94,43,151,.1); }
.transcricao .pal.sai { text-decoration: line-through; color: rgba(199,21,81,.65); background: rgba(233,30,139,.08); }
.transcricao .pal.fica { color: var(--verde); }
.transcricao .texto.esconder-sai .pal.sai { display: none; }
.transcricao .texto.esconder-sai .pal.sai + .pal:not(.sai)::before,
.transcricao .texto.esconder-sai .seg:has(.pal.sai) + .seg .pal:first-child::before { content: ""; }
.transcricao .texto.esconder-sai .pal.sai:first-child { display: inline-block; width: 3px; height: 1em; vertical-align: middle; background: rgba(233,30,139,.8); border-radius: 2px; text-decoration: none; overflow: hidden; color: transparent; padding: 0; margin: 0 2px; cursor: pointer; }
.transcricao .pal.pendente { border-bottom: 1px dashed rgba(233,30,139,.8); }
.transcricao .pal.actual { background: rgba(245,193,61,.45); color: var(--texto); }
.transcricao .pal.marcado { background: rgba(245,193,61,.18); outline: 1px dashed var(--amarelo); }
.transcricao .tempo-seg { font-size: 10px; color: var(--suave); margin: 0 4px 0 6px; user-select: none; font-variant-numeric: tabular-nums; }
.enviados { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.enviados .chip { text-decoration: none; }
.envio-progresso { margin-top: 6px; max-width: 420px; }
.escolha-exportar { margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--linha); }
.envio { margin: -4px 0 10px 47px; padding: 12px 14px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--linha); }
.envio .explorador .entrada { cursor: pointer; }
.lupa .juncao { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--noite); opacity: .7; cursor: pointer; border-radius: 2px; }
.lupa .juncao:hover { background: var(--pink); opacity: 1; }

/* ---------- edicao a mao (marcar trechos + lupa com zoom) ---------- */
.edicao { margin: 12px 0 10px; padding: 10px 12px; background: var(--superficie); border-radius: 11px; }
.edicao b { color: var(--lilas); font-weight: 600; }
.lupa {
  position: relative; height: 56px; margin-top: 10px; border-radius: 8px;
  background: var(--superficie-2); overflow: hidden; cursor: crosshair; user-select: none;
}
.lupa .regua { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(94,43,151,.1); }
.lupa .regua span { position: absolute; top: 2px; left: 3px; font-size: 9px; color: var(--suave); white-space: nowrap; }
.lupa .bloco {
  position: absolute; top: 16px; bottom: 6px; background: rgba(233,30,139,.55);
  border-radius: 4px; cursor: pointer; min-width: 3px;
}
.lupa .bloco.inactivo { background: rgba(94,43,151,.2); }
.lupa .bloco.pendente { background: rgba(233,30,139,.3); outline: 1px dashed rgba(233,30,139,.8); }
.lupa .bloco.manual { outline: 1px dashed rgba(14,17,54,.5); }
.lupa .bloco .rotulo { position: absolute; left: 6px; top: 3px; font-size: 10px; color: #fff; white-space: nowrap; overflow: hidden; max-width: calc(100% - 12px); pointer-events: none; }
.lupa .bloco .ponta {
  position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: rgba(14,17,54,.3);
}
.lupa .bloco .ponta:hover, .lupa .bloco .ponta.a-arrastar { background: var(--amarelo); }
.lupa .bloco .ponta.esq { left: 0; border-radius: 4px 0 0 4px; }
.lupa .bloco .ponta.dir { right: 0; border-radius: 0 4px 4px 0; }
.lupa .marca { position: absolute; top: 16px; bottom: 6px; background: rgba(245,193,61,.35); border: 1px dashed var(--amarelo); border-radius: 4px; pointer-events: none; }
.lupa .agulha-lupa { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--amarelo); pointer-events: none; }
.mapa .marca { position: absolute; top: 0; bottom: 0; background: rgba(245,193,61,.5); }
.etiqueta.manual { background: rgba(245,193,61,.35); color: var(--amarelo-texto); }

.escolha-exportar {
  margin-top: 10px; padding: 11px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: rgba(184,242,216,.28); border: 1px solid rgba(23,138,91,.35);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.corte-item button.aprovar { background: rgba(184,242,216,.45); color: var(--verde); }
.corte-item.aprovado button.aprovar { background: rgba(94,43,151,.09); color: var(--lilas); }

.nota a { color: var(--lilas); }

/* juntar partes num ficheiro (17 Set 2026) */
.juntar-painel { padding: 12px 15px; border-top: 1px solid var(--linha); background: rgba(184,242,216,.22); }
.juntar-lista { display: flex; flex-direction: column; gap: 6px; }
.juntar-parte { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; margin: 0; color: var(--texto); }
.juntar-parte input { width: 16px; height: 16px; accent-color: var(--pink); margin: 0; }
.juntas { border-top: 1px solid var(--linha); background: var(--superficie); }
.junta { display: flex; align-items: center; gap: 10px; padding: 9px 15px; }
.junta .chip { text-decoration: none; }

/* pontos onde a gravacao se divide em aulas (17 Set 2026) */
.mapa .divisao, .lupa .divisao { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--roxo); opacity: .9; pointer-events: none; border-radius: 2px; }
.lupa .divisao.clicavel { pointer-events: auto; cursor: pointer; }
.lupa .divisao .rotulo-aula { position: absolute; top: 1px; left: 4px; font-size: 9px; color: var(--roxo); font-weight: 700; white-space: nowrap; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.85); border: 1px solid var(--roxo); }
.lupa .divisao.clicavel:hover { background: var(--vermelho); }
.lupa .divisao.clicavel:hover .rotulo-aula { color: #fff; background: var(--vermelho); border-color: var(--vermelho); }

/* silencios detectados que nao sao cortes: cinzento, por baixo dos blocos (17 Set 2026) */
.lupa .silencio { position: absolute; top: 40px; bottom: 2px; background: rgba(27,29,58,.28); border-radius: 2px; cursor: pointer; }
.lupa .silencio:hover { background: rgba(233,30,139,.45); }
.mapa .silencio { position: absolute; top: 30px; bottom: 0; background: rgba(27,29,58,.25); pointer-events: none; }

/* paineis minimizaveis no ecra da parte (18 Set 2026) */
.painel.minimizavel > .painel-cabeca { cursor: pointer; user-select: none; }
.painel.minimizavel .seta-painel { display: inline-block; margin-right: 8px; opacity: .6; font-size: 12px; transition: transform .15s; }
.painel.minimizavel.fechado .seta-painel { transform: rotate(-90deg); }
.painel.minimizavel.fechado > :not(.painel-cabeca) { display: none !important; }
.painel.minimizavel.fechado > .painel-cabeca { margin-bottom: 0 !important; }
.painel.minimizavel.fechado > h2.painel-cabeca { margin-bottom: 0; }
.painel.minimizavel > .painel-cabeca:hover h2, .painel.minimizavel > h2.painel-cabeca:hover { color: var(--pink); }

/* Capitulos na lista de gravacoes: ideia + duracao de cada um (14 Out 2026) */
.capitulos-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.capitulos-lista li { display: flex; gap: 10px; font-size: 12px; line-height: 1.35; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.capitulos-lista li:hover { background: var(--superficie); }
.capitulos-lista .cap-tempo { flex: none; width: 92px; color: var(--suave); font-variant-numeric: tabular-nums; }
.capitulos-lista b { color: var(--roxo, #5E2B97); font-weight: 600; }
.capitulos-lista .cap-ideia { color: var(--suave); }
.capitulos-lista .cap-texto { flex: 1; min-width: 0; }
.capitulos-lista .cap-accoes { flex: none; display: flex; gap: 4px; align-items: center; opacity: .35; transition: opacity .15s; }
.capitulos-lista li:hover .cap-accoes, .capitulos-lista .cap-accoes:has([data-sim]), .capitulos-lista .cap-accoes:has(.chip) { opacity: 1; }
.capitulos-lista .cap-accoes .nota { font-size: 12px; max-width: 320px; }
.capitulos-lista li.cap-eliminado .cap-texto, .capitulos-lista li.cap-eliminado .cap-tempo { text-decoration: line-through; opacity: .5; }
.aviso-lista { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--texto); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 50; max-width: 90vw; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.aviso-lista.erro { background: var(--vermelho-texto); }
/* Bloco do hub por parte + capitulos editaveis na lista (14 Out 2026) */
.bloco-hub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--superficie); cursor: default; }
.bloco-hub label { font-size: 12px; font-weight: 600; color: var(--roxo); }
.bloco-hub input.cresce { flex: 1; min-width: 260px; font-size: 13px; }
.bloco-hub .bloco-accoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bloco-hub .bloco-accoes .nota { font-size: 12px; max-width: 420px; }
.capitulos-lista li { cursor: default; }
.capitulos-lista .cap-tempo { cursor: pointer; }
.capitulos-lista .cap-tempo:hover { color: var(--pink-texto); text-decoration: underline; }
.capitulos-lista [contenteditable] { outline: none; border-radius: 4px; padding: 0 2px; cursor: text; }
.capitulos-lista [contenteditable]:hover { background: rgba(94,43,151,.08); }
.capitulos-lista [contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px var(--lilas-fundo); }
.capitulos-lista .cap-ideia:empty::before { content: attr(data-vazio); opacity: .5; }
.capitulos-lista .cap-ideia { display: block; }
.capitulos-lista .cap-num { font-weight: 700; color: var(--pink-texto); }
.ver-capitulo { position: fixed; inset: 0; background: rgba(14,17,54,.6); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ver-caixa { background: #fff; border-radius: 14px; padding: 14px; width: min(960px, 100%); display: flex; flex-direction: column; gap: 10px; }
.ver-caixa video { width: 100%; max-height: 70vh; background: #000; border-radius: 10px; cursor: pointer; }
.ver-barra { display: flex; align-items: center; gap: 10px; }
.ver-barra input[type=range] { flex: 1; accent-color: #5E2B97; }
.ver-tempo { font-variant-numeric: tabular-nums; font-size: 13px; color: #1B1D3A; white-space: nowrap; }

.dica-hub { color: #5E2B97; font-weight: 600; }
.cortes-na-lista-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; padding: 8px 12px; border-radius: 10px; background: #FFF6DB; }
.capitulos-lista li.corte-na-lista { list-style: none; margin-left: 24px; padding: 8px 10px; border-left: 3px solid #E0A800; border-radius: 8px; background: #FFF9E8; align-items: center; }
.corte-na-lista .cap-tempo { color: #8A6200; font-weight: 600; }
.corte-na-lista .motivo { display: block; font-weight: 600; font-size: 13px; }
.corte-na-lista .fala { display: block; font-size: 12px; color: var(--suave, #666); }
.corte-na-lista .fala em { background: rgba(224,168,0,.18); font-style: normal; border-radius: 3px; }
.corte-na-lista.a-sair { opacity: .35; pointer-events: none; }
.cap-sel { display: flex; align-items: flex-start; padding-top: 2px; width: 18px; flex: none; }
.cap-sel input { accent-color: #5E2B97; width: 16px; height: 16px; cursor: pointer; }
.capitulos-lista li.cap-marcado { background: rgba(94,43,151,.08); }
.juntar-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; padding: 8px 12px; border-radius: 10px; background: rgba(94,43,151,.08); }


/* ---------- o que veio da skill /edite (14 Nov 2026) ---------- */
.etiqueta.vicio { background: rgba(245,193,61,.22); color: var(--amarelo-texto); }
label.opcao { margin: 0; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--texto); }
label.opcao input { accent-color: var(--pink); }
.reel { margin-bottom: 8px; }
.reel .corte-item { grid-template-columns: 22px 78px 1fr auto; }
.titulo-reel { width: 100%; font-weight: 700; font-size: 13px; padding: 7px 9px; }
.chips-reel { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.chips-reel:empty { display: none; }
.reel-extra {
  margin: 6px 0 4px 22px; padding: 13px 15px; border-radius: 10px;
  background: var(--painel); border: 1px solid var(--linha);
}
.palavras-reel { line-height: 2.1; font-size: 14px; }
.pal-reel {
  display: inline-block; min-width: 14px; padding: 1px 6px; border-radius: 6px;
  background: var(--superficie-2); outline: none; cursor: text;
}
.pal-reel:focus { background: rgba(245,193,61,.3); box-shadow: 0 0 0 2px var(--amarelo); }
.pal-reel:empty { background: rgba(232,58,79,.14); }
.pal-reel:empty::before { content: "sem palavra"; color: var(--suave); font-size: 11px; }
.capas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.capas.em-pe { grid-template-columns: repeat(3, minmax(0, 190px)); }
.capas figure { margin: 0; }
.capas img { width: 100%; display: block; border-radius: 9px; border: 1px solid var(--linha); background: #000; }
.capas figcaption { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 6px; }
.retencao .queda { padding: 9px 12px; border-radius: 9px; background: var(--superficie); margin-bottom: 7px; font-size: 12.5px; border-left: 3px solid var(--amarelo); }
.retencao .queda .fala { color: var(--suave); margin: 3px 0; }
.retencao .queda .conserto { color: var(--texto); }
@media (max-width: 900px) {
  .capas, .capas.em-pe { grid-template-columns: 1fr 1fr; }
  .reel .corte-item { grid-template-columns: 22px 1fr; }
}
