/* ═══════════════════════════════════════════════════════════════
   TEMA VAZ — painel na identidade da logo: escudo amarelo, leão
   preto, cromado, fundo de fibra de carbono.

   Só REDEFINE as variáveis do estilo.css. Nenhuma regra de layout é
   tocada: o tema não pode ser capaz de quebrar tela nenhuma, e
   voltar atrás é apagar um <link>.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --fundo:       #08080a;
  --fundo-2:     #0e0e11;
  --superficie:  #16161b;
  --superficie-2:#1d1d24;
  --borda:       #2a2a33;
  --borda-viva:  #3d3d4a;
  --texto:       #f4f5f7;
  --suave:       #9aa0aa;

  /* O amarelo do escudo é a cor de ação. O dourado escuro entra em
     hover e borda, como o contorno cromado da logo. */
  --marca:       #ffd400;
  --marca-esc:   #c9a227;
  --sky:         #d7dce3;   /* cromado, no lugar do azul */
  --roxo:        #b9a25a;   /* dourado fosco, no lugar do roxo */
  --perigo:      #ff5a5a;
  --alerta:      #ffb020;
  --sombra:      0 10px 34px rgba(0,0,0,.55);
}

/* Fibra de carbono: duas listras diagonais finas, bem discretas. Textura
   pesada atrás de texto cansa a vista — aqui ela só quebra o preto chapado. */
body {
  background:
    radial-gradient(900px 520px at 85% -12%, rgba(255, 212, 0, .07), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.30) 0 2px, transparent 2px 4px),
    var(--fundo);
  background-attachment: fixed;
}

/* Botão principal: amarelo do escudo com texto PRETO. Amarelo com texto
   branco não tem contraste — some no sol do celular, que é onde o osval
   mais usa o painel.
   ⚠️ SÓ os botões de AÇÃO. A primeira versão pegava `button` inteiro e
   pintou os KPIs e os atalhos de amarelo chapado: quatro blocos gritando
   ao mesmo tempo, sem hierarquia nenhuma. Se tudo é destaque, nada é. */
.botao-largo,
.botao-primario,
button[type="submit"] {
  background: linear-gradient(180deg, #ffd400, #e0b400);
  color: #101010;
  font-weight: 700;
  border: 1px solid #a8830d;
}
.botao-largo:hover, .botao-primario:hover { filter: brightness(1.07); }

/* KPI e atalho são superfície, não ação: fundo escuro, número em amarelo.
   O amarelo aqui marca o NÚMERO, que é o que a pessoa vem ler. */
.kpi, .atalho {
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto);
}
.kpi:hover, .atalho:hover { border-color: var(--marca-esc); background: var(--superficie-2); }
.kpi b { color: var(--marca); }
.kpi.destaque { border-color: var(--marca-esc); }
.kpi.destaque b { color: #fff; }

.selo.ligado, .selo-estoque.no-site { color: #101010; background: var(--marca); }

/* A marca no topo da barra lateral */
.marca-vaz {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 4px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--borda);
}
.marca-vaz .escudo {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 900; color: #101010;
  background: linear-gradient(160deg, #ffe24d, #e0b400 60%, #b98f0a);
  border: 1px solid #d7dce3;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(255, 212, 0, .25);
}
.marca-vaz b { font-size: 15px; letter-spacing: .02em; line-height: 1.1; }
.marca-vaz small { display: block; font-size: 10px; color: var(--suave); letter-spacing: .14em; }

/* ── menu em grupos ──────────────────────────────────────────────
   O painel passou de 11 telas soltas para telas POR NEGÓCIO. Cada
   grupo é um <details>: abre um, os outros continuam onde estavam.
   Mantive cada `.menu-item[data-secao]` exatamente como era — a
   navegação do JS não sabe que virou grupo, e por isso nada quebrou. */
.grupo-menu { margin-bottom: 2px; }
.grupo-menu > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; cursor: pointer; list-style: none;
  border-radius: var(--r-p); color: var(--suave);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.grupo-menu > summary::-webkit-details-marker { display: none; }
.grupo-menu > summary:hover { background: var(--superficie); color: var(--texto); }
.grupo-menu > summary .seta { margin-left: auto; transition: transform .18s; font-size: 10px; }
.grupo-menu[open] > summary { color: var(--marca); }
.grupo-menu[open] > summary .seta { transform: rotate(90deg); }
.grupo-menu .menu-item { padding-left: 30px; font-size: 13px; }
/* Fio vertical ligando os itens ao grupo — deixa claro o que pertence a quê */
.grupo-itens { position: relative; }
.grupo-itens::before {
  content: ''; position: absolute; left: 17px; top: 2px; bottom: 2px;
  width: 1px; background: var(--borda);
}

/* Aviso de "ainda não ligado" nas abas novas: precisa parecer pendência,
   não erro. */
.pendente-caixa {
  border: 1px dashed var(--borda-viva); border-radius: var(--r);
  padding: 18px; background: var(--superficie);
}
.pendente-caixa h3 { margin: 0 0 8px; font-size: 15px; color: var(--marca); }
.pendente-caixa ol { margin: 10px 0 0; padding-left: 20px; }
.pendente-caixa li { margin-bottom: 7px; }

/* ── cartões respirando ──────────────────────────────────────────
   As colunas eram de 210px e o título batia no selo de status: "Fenda da
   Matrix" saía uma palavra por linha, e o cartão ficava três vezes mais
   alto que o vizinho. Largura maior + o selo saindo da mesma linha do
   título resolve os dois. */
.grade.auto { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

.video-topo, .esteira-topo, .rede-topo {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icone info" "selo selo";
  gap: 10px 11px;
  align-items: start;
}
.video-topo > .esteira-icone, .esteira-topo > .esteira-icone, .rede-topo > .rede-icone { grid-area: icone; }
.video-topo > .rede-info, .esteira-topo > div:not(.esteira-icone), .rede-topo > .rede-info {
  grid-area: info; min-width: 0;
}
.video-topo > .selo, .esteira-topo > .selo, .rede-topo > .selo {
  grid-area: selo; justify-self: start; margin-top: 2px;
}
/* Título com espaço pra respirar; descrição em duas linhas, com reticências,
   pra todos os cartões da fileira ficarem da mesma altura. */
.video-topo .rede-info b, .rede-topo .rede-info b { display: block; line-height: 1.25; }
.video-topo .rede-info small, .rede-topo .rede-info small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.video-card, .cartao.rede { display: flex; flex-direction: column; }
.video-corpo { flex: 1; }
.video-rodape { margin-top: auto; padding-top: 12px; }

/* ── esteira: o placar e o histórico ─────────────────────────────
   O card antes só dizia o nome da última pasta. Quem abre esta tela quer
   saber uma coisa: tem episódio pronto esperando eu publicar? Por isso o
   número da fila é o único destacado. */
.placar-esteira {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 9px 11px;
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 10px;
  font-size: .76rem; color: var(--suave);
}
.placar-esteira b { display: block; font-size: 1.05rem; color: var(--texto); line-height: 1.1; }
.placar-esteira .destaque-fila b { color: var(--marca); }
/* mesmo destaque, fora do placar — usado no cartão compacto do Monitor */
.destaque-fila { color: var(--marca); font-weight: 600; font-size: .78rem; }

/* ── versão compacta dos cartões de esteira, dentro do Monitor em tempo
   real: uma linha por esteira, sem histórico nem botão — a ação mora só
   em Esteiras de vídeo, pra não ter dois lugares disparando a mesma coisa. */
.video-card.compacto { gap: 4px; padding: 10px 12px; }
.video-card.compacto .video-corpo { flex: none; margin-top: 2px; }

.hist-esteira { margin-top: 8px; }
.hist-esteira > summary {
  cursor: pointer; font-size: .76rem; color: var(--suave);
  padding: 5px 0; list-style: none;
}
.hist-esteira > summary::-webkit-details-marker { display: none; }
.hist-esteira > summary::before { content: '▸ '; }
.hist-esteira[open] > summary::before { content: '▾ '; }
.hist-esteira > summary:hover { color: var(--texto); }

.lista-ep { list-style: none; margin: 4px 0 0; padding: 0; }
.lista-ep .ep {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 8px; border-left: 2px solid var(--borda); margin-bottom: 3px;
  font-size: .76rem; background: var(--fundo-2); border-radius: 0 6px 6px 0;
}
.lista-ep .ep span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-ep .ep small { color: var(--suave); white-space: nowrap; font-size: .7rem; }
/* verde = publicado · amarelo = pronto e parado · apagado = sem vídeo ainda */
.lista-ep .ep.ok { border-left-color: #2ecc71; }
.lista-ep .ep.espera { border-left-color: var(--marca); }
.lista-ep .ep.espera small { color: var(--marca); }
.lista-ep .ep.vazio { opacity: .55; }

/* ── esteiras: resumo e explicação ───────────────────────────────
   O resumo fica ACIMA dos cartões porque a pergunta "tem episódio parado?"
   não pode depender de rolar a tela e somar de cabeça. */
.resumo-esteiras {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r);
}
.resumo-bloco {
  min-width: 82px; padding: 8px 12px;
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 10px;
  text-align: center;
}
.resumo-bloco b { display: block; font-size: 1.5rem; line-height: 1.05; color: var(--texto); }
.resumo-bloco span { font-size: .68rem; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
/* Só o número que pede ação fica amarelo. Se tudo brilha, nada chama. */
.resumo-bloco.pede-acao { border-color: var(--marca-esc); background: rgba(255, 212, 0, .07); }
.resumo-bloco.pede-acao b { color: var(--marca); }
.resumo-texto { flex: 1; min-width: 210px; font-size: .8rem; line-height: 1.6; }
.resumo-texto .ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.resumo-texto .ponto.vivo { background: #2ecc71; }
.resumo-texto .ponto.morto { background: var(--perigo); }
.aviso-inline { color: var(--alerta); }

.explica-esteiras {
  margin-bottom: 16px; border: 1px solid var(--borda); border-radius: var(--r);
  background: var(--fundo-2);
}
.explica-esteiras > summary {
  cursor: pointer; padding: 11px 16px; list-style: none;
  font-size: .84rem; font-weight: 600; color: var(--suave);
}
.explica-esteiras > summary::-webkit-details-marker { display: none; }
.explica-esteiras > summary::before { content: '❔ '; }
.explica-esteiras > summary:hover { color: var(--texto); }
.explica-corpo { padding: 0 16px 16px; font-size: .84rem; line-height: 1.65; }
.explica-corpo p { margin: 0 0 10px; }
.passos-esteira { margin: 0 0 12px; padding-left: 20px; }
.passos-esteira li { margin-bottom: 5px; }
.ponto-leg {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin: 0 3px 0 6px; vertical-align: baseline;
}
.ponto-leg.ok { background: #2ecc71; }
.ponto-leg.espera { background: var(--marca); }
.ponto-leg.vazio { background: var(--borda-viva); }

/* ── atalho de cadastro por foto ─────────────────────────────────
   Fica no TOPO do formulário porque é o caminho principal, não um extra:
   mandar o print do anúncio poupa 14 campos digitados à mão. */
.atalho-foto {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,212,0,.10), rgba(255,212,0,.03));
  border: 1px solid var(--marca-esc); border-radius: var(--r);
}
.atalho-foto > div { flex: 1; min-width: 220px; }
.atalho-foto b { display: block; font-size: .92rem; margin-bottom: 2px; }
.atalho-foto small { display: block; color: var(--suave); font-size: .78rem; line-height: 1.45; }
.atalho-foto .dica:empty { display: none; }