@font-face { font-family: "TT Runs"; src: url("/fontes/TTRuns-Black.ttf") format("truetype"); font-weight: 900; }
@font-face { font-family: "DM Sans"; src: url("/fontes/DMSans.ttf") format("truetype"); font-weight: 100 1000; }
@font-face { font-family: "DM Sans Semi"; src: url("/fontes/DMSans-Semibold.ttf") format("truetype"); font-weight: 600; }

:root {
  --navy: #0E184E; --navy-2: #1B2A6B; --menta: #8DFAB9; --verde: #569870; --verde-claro: #78D497;
  --cinza: #E1E1E1; --fundo: #F3F5FA; --papel: #FFFFFF; --texto: #0E184E; --suave: #55608A;
  --alerta: #C2410C; --erro: #B42318; --ok: #1F7A4D;
  --sombra: 5px 6px 0 var(--navy);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15px/1.5 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--texto); background-color: var(--fundo);
  background-image: linear-gradient(rgba(14,24,78,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(14,24,78,.05) 1px, transparent 1px);
  background-size: 48px 48px; min-height: 100vh;
}
h2, h3 { margin: 0 0 12px; line-height: 1.15; }
h3 { font-size: 17px; }
a { color: var(--navy-2); }
.logo { font-family: "TT Runs", "DM Sans", sans-serif; font-size: 22px; color: var(--menta); letter-spacing: .01em; }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 24px; background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 5; }
.marca { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex-wrap: wrap; }
.sub { color: #C9D2F5; font-size: 13px; }
.abas { display: flex; gap: 6px; }
.aba { font: 600 14px/1 "DM Sans Semi", "DM Sans", sans-serif; color: #C9D2F5; background: transparent; border: 1.5px solid rgba(141,250,185,.35);
  border-radius: 999px; padding: 8px 14px; cursor: pointer; position: relative; }
.aba:hover { color: #fff; border-color: var(--menta); }
.aba.ativa { background: var(--menta); color: var(--navy); border-color: var(--menta); }
.aba[data-sinal="rodando"]::after, .aba[data-sinal="problema"]::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--navy); background: var(--verde-claro); }
.aba[data-sinal="problema"]::after { background: #F97066; }
.sub-vista { color: var(--suave); font-size: 14px; margin: 0 0 16px; }
.acoes-topo { display: flex; gap: 10px; flex-wrap: wrap; }

.btn { font: 600 14px/1 "DM Sans Semi", "DM Sans", sans-serif; border-radius: 999px; cursor: pointer;
  padding: 10px 16px; border: 2px solid var(--navy); background: var(--papel); color: var(--navy);
  box-shadow: 3px 3px 0 var(--navy); transition: transform .08s ease, box-shadow .08s ease; text-decoration: none; display: inline-block; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--navy); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }
.btn.primario { background: var(--menta); }
.btn.discreto { box-shadow: none; border-width: 1.5px; padding: 7px 12px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: default; }
.topo .btn { border-color: var(--menta); box-shadow: 3px 3px 0 #04092A; }
.topo .btn.primario { color: var(--navy); }

.principal { max-width: 1320px; margin: 0 auto; padding: 22px 20px 60px; }
.grade { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr); gap: 22px; align-items: start; }
.coluna { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (max-width: 960px) { .grade { grid-template-columns: 1fr; } }

.cartao { background: var(--papel); border: 2px solid var(--navy); border-radius: 18px; box-shadow: var(--sombra); padding: 20px 22px; min-width: 0; }
.faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.numero { background: var(--papel); border: 2px solid var(--navy); border-radius: 16px; box-shadow: 3px 3px 0 var(--navy); padding: 14px 16px; }
.numero b { display: block; font-family: "TT Runs", sans-serif; font-size: 30px; line-height: 1.1; }
.numero span { color: var(--suave); font-size: 13px; }
.numero.ruim b { color: var(--erro); }
.numero.estado b { font-size: 19px; padding-top: 6px; }
.explica, .meta { color: var(--suave); font-size: 13.5px; margin: 0 0 12px; }
.aviso { background: #FFF4E5; border: 1.5px solid #F2B679; border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.aviso.erro { background: #FDECEC; border-color: #F1A7A1; }
.aviso.ok { background: #EAF9F0; border-color: #9FD9B4; }

label.campo { display: block; font: 600 12px/1 "DM Sans Semi", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin: 12px 0 6px; }
input[type=text], input[type=url], input[type=password], input[type=number], select {
  width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid rgba(14,24,78,.3); border-radius: 10px; background: #fff; color: var(--texto); }
.soltar { border: 2px dashed rgba(14,24,78,.35); border-radius: 14px; padding: 18px; text-align: center; color: var(--suave); cursor: pointer; }
.soltar.cima { border-color: var(--verde); background: #F2FBF6; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.linha.entre { justify-content: space-between; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: 10px 0; border-top: 1px solid rgba(14,24,78,.1); }
.lista li:first-child { border-top: 0; }
.lista .nome { font-weight: 700; word-break: break-word; }
.lista .detalhe { color: var(--suave); font-size: 13px; word-break: break-word; }
.chip { display: inline-block; font: 600 11px/1 "DM Sans Semi", sans-serif; padding: 4px 8px; border-radius: 999px; background: var(--cinza); color: var(--navy); margin-right: 4px; }
.chip.novo { background: var(--menta); }
.chip.versao { background: #FFF1C9; }
.chip.erro { background: #FDECEC; color: var(--erro); }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font: 600 11px/1 "DM Sans Semi", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding: 8px 6px; }
.tabela td { padding: 9px 6px; border-top: 1px solid rgba(14,24,78,.1); vertical-align: top; }
.tabela .miniatura.video { width: 128px; }
.tabela .miniatura { width: 74px; border: 1px solid rgba(14,24,78,.2); border-radius: 6px; cursor: zoom-in; display: block; }
.tabela .titulo-pdf { font-weight: 700; word-break: break-word; }
.tabela .avisos { color: var(--alerta); font-size: 12.5px; }
.rolagem { max-height: 520px; overflow: auto; }
.busca { margin-bottom: 10px; }

.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passos li { counter-increment: passo; padding: 6px 0 6px 34px; position: relative; color: var(--suave); font-size: 14px; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(14,24,78,.3); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.passos li.feito { color: var(--ok); }
.passos li.feito::before { content: "✓"; background: var(--menta); border-color: var(--verde); color: var(--navy); }
.passos li.atual { color: var(--navy); font-weight: 700; }
.passos li.atual::before { background: var(--navy); border-color: var(--navy); color: #fff; }
.passos .pct { color: var(--verde); }
.barra { height: 10px; border-radius: 999px; background: var(--cinza); overflow: hidden; margin-top: 10px; }
.barra i { display: block; height: 100%; background: var(--verde-claro); transition: width .6s ease; }
.lista.como li { font-size: 14px; }
textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid rgba(14,24,78,.3); border-radius: 10px; background: #fff;
  color: var(--texto); resize: vertical; }
.agora-grade { display: grid; grid-template-columns: minmax(170px, 220px) 1fr; gap: 16px; align-items: start; }
.agora-grade .folha { width: 100%; border: 1px solid rgba(14,24,78,.2); border-radius: 8px; cursor: zoom-in; background: #fff; }
@media (max-width: 640px) { .agora-grade, .revisao-grade { grid-template-columns: 1fr; } }
.registro.curto { max-height: 230px; margin-top: 14px; }
.revisao { border-top: 1px solid rgba(14,24,78,.12); padding-top: 14px; margin-top: 14px; }
.revisao:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.revisao-grade { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 18px; align-items: start; }
.player { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 12px; border: 2px solid var(--navy); }
.md { white-space: pre-wrap; font-size: 13px; line-height: 1.5; color: var(--suave); max-height: 280px; overflow: auto;
  background: var(--fundo); border-radius: 10px; padding: 10px 12px; margin-top: 6px; }
details summary { cursor: pointer; font-weight: 600; margin-top: 8px; }

.registro { font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; background: #0B1238; color: #DCE3FF; border-radius: 12px; padding: 12px 14px; max-height: 360px; overflow: auto; white-space: pre-wrap; }
.registro .ver { color: #FFB27A; }

.modal { position: fixed; inset: 0; background: rgba(6,10,30,.82); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 30px; }
.modal[hidden] { display: none; }
.modal img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; }
.modal .fechar { position: absolute; top: 14px; right: 18px; font-size: 32px; color: #fff; background: none; border: 0; cursor: pointer; }

body.entrar { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login { width: 100%; max-width: 380px; }
.login .logo { color: var(--navy); }
.login .btn { margin-top: 16px; width: 100%; }
.erro-login { color: var(--erro); font-size: 14px; margin: 8px 0 0; }

/* ─── aba Reels: quadro por etapas, gaveta do reel e assistente (06/10) ─── */
.aba[data-sinal="revisar"]::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--navy); background: #FFD166; }
.btn.grande { padding: 14px 22px; font-size: 16px; }
.btn.icone { box-shadow: none; border-width: 1.5px; padding: 6px 9px; font-size: 13px; min-width: 32px; }

.como-funciona { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 22px; }
.como-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; flex: 1; min-width: 0; }
.como-passos li { display: flex; gap: 10px; align-items: flex-start; }
.como-passos .num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--menta);
  display: flex; align-items: center; justify-content: center; font: 900 16px/1 "TT Runs", sans-serif; }
.como-passos strong { display: block; font-size: 15px; }
.como-passos span { color: var(--suave); font-size: 13px; line-height: 1.4; }
@media (max-width: 900px) { .como-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.quadro-reels { display: grid; grid-template-columns: repeat(var(--colunas, 5), minmax(220px, 1fr)); gap: 14px; overflow-x: auto;
  padding-bottom: 8px; margin-bottom: 22px; align-items: start; }
.coluna-reel { background: rgba(255,255,255,.65); border: 2px solid var(--navy); border-radius: 18px; padding: 12px; min-height: 180px; }
.coluna-reel header { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 "DM Sans Semi", sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin: 2px 4px 12px; }
.coluna-reel header b { background: var(--navy); color: #fff; border-radius: 999px; padding: 4px 9px; font-size: 12px; letter-spacing: 0; }
.coluna-reel.editando header b { background: var(--verde); }
.coluna-reel.revisar header b { background: #E9A400; }
.coluna-reel.aprovado header b { background: var(--ok); }
.coluna-reel.problema { border-color: var(--erro); }
.coluna-reel.problema header, .coluna-reel.problema header b { color: var(--erro); }
.coluna-reel.problema header b { background: #FDECEC; }
.coluna-reel .vazio { color: var(--suave); font-size: 13px; margin: 6px 4px; }
.cartoes { display: flex; flex-direction: column; gap: 10px; }
.cartao-reel { display: grid; grid-template-columns: 64px 1fr; gap: 10px; text-align: left; font: inherit; color: inherit; width: 100%;
  background: var(--papel); border: 1.5px solid rgba(14,24,78,.35); border-radius: 14px; padding: 8px; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease; }
.cartao-reel:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--navy); }
.cartao-reel.aberto { border: 2px solid var(--navy); box-shadow: 3px 3px 0 var(--menta); }
.cartao-reel .capa { width: 64px; height: 96px; object-fit: cover; border-radius: 9px; background: var(--navy); }
.cartao-reel .capa.vazia { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.cartao-reel .titulo { font-weight: 700; font-size: 14px; line-height: 1.3; word-break: break-word; }
.cartao-reel .meta { color: var(--suave); font-size: 12px; margin-top: 3px; }
.cartao-reel .status { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.cartao-reel .status.destaque { color: #8A5A00; }
.cartao-reel .status.ok { color: var(--ok); }
.cartao-reel .status.ruim { color: var(--erro); font-weight: 500; }
.barra.fina { height: 6px; margin-top: 5px; }

.registro-reels summary { font-weight: 700; cursor: pointer; }
.registro-reels .registro { margin-top: 12px; }

.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--fundo); border-left: 2px solid var(--navy);
  box-shadow: -8px 0 0 rgba(14,24,78,.12); z-index: 15; display: flex; flex-direction: column; }
.gaveta[hidden] { display: none; }
.gaveta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px; background: var(--navy); color: #fff; }
.gaveta-topo h3 { margin: 2px 0 0; font-size: 19px; }
.gaveta-topo .kicker { color: var(--menta); font: 600 11px/1 "DM Sans Semi", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.gaveta-topo .fechar { background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.gaveta-corpo { padding: 18px 22px 40px; overflow-y: auto; flex: 1; }
.gaveta .bloco { background: var(--papel); border: 2px solid var(--navy); border-radius: 16px; padding: 16px 18px; margin-top: 16px; }
.gaveta .bloco h4 { margin: 0 0 8px; font-size: 16px; }
.gaveta .player { max-width: 280px; }
.citacao { border-left: 3px solid var(--menta); padding: 4px 10px; color: var(--navy); font-style: italic; }

.fluxo { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; counter-reset: etapa; }
.fluxo li { flex: 1; position: relative; text-align: center; font-size: 12px; color: var(--suave); padding-top: 30px; counter-increment: etapa; }
.fluxo li::before { content: counter(etapa); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(14,24,78,.3); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 1; }
.fluxo li::after { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: rgba(14,24,78,.15); }
.fluxo li:first-child::after { display: none; }
.fluxo li.feito { color: var(--ok); }
.fluxo li.feito::before { content: "✓"; background: var(--menta); border-color: var(--verde); color: var(--navy); }
.fluxo li.feito::after, .fluxo li.atual::after { background: var(--verde); }
.fluxo li.atual { color: var(--navy); font-weight: 700; }
.fluxo li.atual::before { background: var(--navy); border-color: var(--navy); color: #fff; }
.fluxo.pequeno { margin: 16px 22px 0; }

.brutos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.brutos li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(14,24,78,.15); border-radius: 12px; padding: 6px 8px; }
.brutos img, .brutos .mini { width: 72px; height: 44px; object-fit: cover; border-radius: 7px; background: var(--navy); flex: none; }
.mini.vazia { display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; }
.brutos .info, .brutos li > div:nth-child(2) { flex: 1; min-width: 0; }
.brutos .nome { font-weight: 600; font-size: 13.5px; word-break: break-all; }
.brutos .meta { color: var(--suave); font-size: 12px; }
.brutos-reel summary { font-weight: 700; cursor: pointer; margin-top: 18px; }
.papel { display: flex; gap: 4px; flex: none; }
.pilula { font: 600 12px/1 "DM Sans Semi", sans-serif; border: 1.5px solid rgba(14,24,78,.35); background: #fff; color: var(--suave);
  border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.pilula.ativa { background: var(--navy); border-color: var(--navy); color: var(--menta); }
.ordem { display: flex; gap: 4px; flex: none; }

.assistente { position: fixed; inset: 0; background: rgba(6,10,30,.6); z-index: 25; display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto; }
.assistente[hidden] { display: none; }
.assistente-caixa { width: min(880px, 100%); background: var(--fundo); border: 2px solid var(--navy); border-radius: 20px; box-shadow: var(--sombra); overflow: hidden; }
.assistente-corpo { padding: 18px 22px 22px; }
.abas-fonte { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.aba-fonte { font: 600 13.5px/1 "DM Sans Semi", sans-serif; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); border-radius: 999px;
  padding: 9px 14px; cursor: pointer; }
.aba-fonte.ativa { background: var(--navy); color: var(--menta); }
.soltar.grande { padding: 40px 18px; font-size: 15px; background: #fff; }
.grade-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 420px; overflow-y: auto; padding: 2px; }
.video-tile { position: relative; text-align: left; font: inherit; color: inherit; background: #fff; border: 1.5px solid rgba(14,24,78,.25); border-radius: 12px;
  padding: 6px; cursor: pointer; }
.video-tile img, .video-tile .mini { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 8px; background: var(--navy); display: block; }
.video-tile .nome { font-weight: 600; font-size: 12.5px; margin-top: 6px; word-break: break-all; }
.video-tile .meta { color: var(--suave); font-size: 11.5px; }
.video-tile .usado { color: #8A5A00; font-size: 11px; margin-top: 3px; }
.video-tile .marca { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(14,24,78,.45);
  color: var(--navy); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.video-tile.marcado { border: 2.5px solid var(--verde); box-shadow: 3px 3px 0 var(--navy); }
.video-tile.marcado .marca { background: var(--menta); }
.escolhidos { margin-top: 18px; background: var(--papel); border: 2px solid var(--navy); border-radius: 16px; padding: 14px 16px; }
.escolhidos h4 { margin: 0 0 4px; }
.estilos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.estilo { text-align: left; font: inherit; color: inherit; background: #fff; border: 1.5px solid rgba(14,24,78,.3); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.estilo strong { display: block; font-size: 15px; }
.estilo span { color: var(--suave); font-size: 13px; }
.estilo.ativo { border: 2.5px solid var(--navy); box-shadow: 3px 3px 0 var(--menta); }
.conferir { display: grid; gap: 8px; background: var(--papel); border: 2px solid var(--navy); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.conferir div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(14,24,78,.08); padding-bottom: 6px; }
.conferir div:last-child { border-bottom: 0; padding-bottom: 0; }
.conferir span { color: var(--suave); }
@media (max-width: 640px) {
  .estilos { grid-template-columns: 1fr; }
  .brutos li { flex-wrap: wrap; }
  .gaveta-corpo, .assistente-corpo { padding: 14px 16px 30px; }
}

/* ajuste rápido na gaveta do reel (06/10) */
.ajuste-rapido { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(14,24,78,.12); }
.ajuste-rapido .exemplos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ajuste-rapido .exemplos .pilula { font-size: 11.5px; padding: 5px 9px; }
.ajuste-rapido details { margin-top: 12px; }
.ajuste-rapido details summary { font-weight: 600; font-size: 13px; color: var(--suave); }

/* revisão da fala nas aulas */
.revisor { margin-top: 6px; }
.revisor summary { font-size: 13px; color: var(--navy); margin-top: 4px; }
.revisor ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.revisor li { margin-bottom: 8px; }
.revisor .fala { color: var(--suave); font-style: italic; margin-top: 2px; word-break: break-word; }
.revisor .linha { margin-top: 4px; }