/* Marketing OS — tema base (desktop). Mobile fica em app-mobile.css */
:root {
  --fundo: #0d1117; --painel: #161b22; --borda: #30363d;
  --texto: #e6edf3; --texto2: #8b949e;
  --acao: #2ea8ff; --ok: #3fb950; --alerta: #d29922; --erro: #f85149;
  --roxo: #a371f7;
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.5 system-ui, sans-serif; }
a { color: var(--acao); text-decoration: none; }

/* Abas de navegação */
header.topo { display: flex; align-items: center; gap: 18px; padding: 12px 22px; background: var(--painel); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 50; }
header.topo .logo { font-weight: 800; letter-spacing: .5px; }
header.topo .logo span { color: var(--acao); }
nav.abas { display: flex; gap: 4px; flex: 1; }
nav.abas a { padding: 8px 14px; border-radius: 8px; color: var(--texto2); font-weight: 600; }
nav.abas a.ativa { background: #1f2733; color: var(--texto); box-shadow: inset 0 -2px 0 var(--acao); }
nav.abas a:hover { color: var(--texto); }

main { max-width: 1200px; margin: 0 auto; padding: 22px; }
h1.titulo-rota { font-size: 22px; margin-bottom: 4px; }
p.subtitulo { color: var(--texto2); margin-bottom: 18px; }

/* Cards de contagem (reagem aos filtros) */
.contadores { display: flex; gap: 12px; margin: 14px 0 18px; flex-wrap: wrap; }
.contadores .card-num { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 18px; min-width: 120px; }
.contadores .card-num b { display: block; font-size: 24px; }
.contadores .card-num span { color: var(--texto2); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

/* Filtros padrão */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin-bottom: 18px; }
.filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto2); }
.filtros input, .filtros select, .modal input, .modal textarea, .modal select { background: #0b0f14; border: 1px solid var(--borda); color: var(--texto); border-radius: 8px; padding: 8px 10px; font: inherit; }
.filtros button { align-self: end; }

/* Grade de cards */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.card { background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; cursor: pointer; transition: transform .12s, border-color .12s; }
.card:hover { transform: translateY(-2px); border-color: var(--acao); }
.card h3 { font-size: 15px; margin-bottom: 6px; }
.card .meta { color: var(--texto2); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #1f2733; }
.badge.novo, .badge.rascunho { color: var(--acao); }
.badge.em_criacao, .badge.planejando, .badge.sintetizando, .badge.renderizando, .badge.na_fila { color: var(--alerta); }
.badge.pronto, .badge.concluido, .badge.registrada, .badge.gerado, .badge.agendada, .badge.roteiro_pronto { color: var(--ok); }
.badge.erro { color: var(--erro); }

/* Botões */
button, .btn { background: #21262d; color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { border-color: var(--texto2); }
.btn-primario { background: var(--acao); border-color: var(--acao); color: #04121f; }
.btn-perigo { background: transparent; border-color: var(--erro); color: var(--erro); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #04120a; }

/* Modais (padrão obrigatório: confirmação em excluir E salvar) */
.veu { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: var(--painel); border: 1px solid var(--borda); border-radius: 14px; padding: 22px; width: min(760px, 100%); max-height: 90vh; overflow: auto; }
.modal.pequeno { width: min(430px, 100%); }
.modal h2 { font-size: 18px; margin-bottom: 14px; }
.modal .campos { display: flex; flex-direction: column; gap: 12px; }
.modal .campos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto2); }
.modal .acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Player / prévia da criação */
.previa { display: flex; gap: 18px; flex-wrap: wrap; }
.previa video { background: #000; border-radius: 10px; border: 1px solid var(--borda); }
.previa .v916 { width: 232px; height: 412px; }
.previa .v169 { width: 412px; height: 232px; }
.chat { display: flex; flex-direction: column; gap: 8px; background: #0b0f14; border: 1px solid var(--borda); border-radius: 10px; padding: 12px; max-height: 300px; overflow: auto; }
.chat .msg { padding: 8px 12px; border-radius: 10px; max-width: 85%; }
.chat .msg.eu { background: #1c3a5e; align-self: flex-end; }
.chat .msg.os { background: #21262d; align-self: flex-start; }
.linha-chat { display: flex; gap: 8px; margin-top: 8px; }
.linha-chat input { flex: 1; }
.log { font: 12px/1.6 ui-monospace, monospace; color: var(--texto2); background: #0b0f14; border-radius: 8px; padding: 10px; max-height: 180px; overflow: auto; white-space: pre-wrap; }
.cena { border: 1px solid var(--borda); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.cena textarea { width: 100%; margin-top: 6px; }
.aviso { background: #1c2733; border: 1px solid var(--alerta); border-radius: 10px; padding: 10px 14px; color: var(--alerta); margin-bottom: 14px; font-size: 13px; }
.vazio { color: var(--texto2); padding: 40px; text-align: center; grid-column: 1/-1; }