/* Mentor Pilot · Estúdio de conteúdo */

/* ---- etapas (geração → aprovação → agendado → publicado) ---- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.step-n { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #fff; flex: none; }
.step b { font-family: var(--font-display); font-size: 22px; }
.step small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- quadro por etapa ---- */
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 12px; min-width: 1000px; }
.board-col { background: var(--soft); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.board-col h3 { display: flex; justify-content: space-between; align-items: center; font-size: 16px; padding: 2px 4px; }
.post-card { background: #fff; border: 2px solid #fff; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%; }
.post-card.on { border-color: var(--accent); }
.post-thumb { height: 170px; border-radius: 10px; background: #F4F2EE; display: grid; place-items: center; overflow: hidden; }
.post-thumb .cover { height: 100%; width: auto; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.post-title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.plat { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: 10px; font-weight: 800; color: #fff; }
.plat.ig { background: #BE185D; } .plat.fb { background: #1D4ED8; } .plat.tt { background: #111827; } .plat.yt { background: #DC2626; }
.empty-col { border: 2px dashed #D6D2C9; border-radius: 12px; padding: 18px 12px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---- capa gerada (prévia da imagem) ---- */
.cover {
  position: relative; overflow: hidden; border-radius: 12px;
  background: var(--bg); color: var(--ink-c);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 7%; aspect-ratio: 9 / 16;
}
.cover.photo { background-size: cover; background-position: center; color: #fff; }
.cover-shape { position: absolute; border-radius: 999px; pointer-events: none; }
.cover-shape.s1 { width: 85%; aspect-ratio: 1; right: -30%; top: -12%; background: var(--a); opacity: .9; }
.cover-shape.s2 { width: 55%; aspect-ratio: 1; left: -20%; bottom: 12%; background: var(--b); opacity: .55; }
.cover-art { position: absolute; right: 8%; top: 16%; width: 42%; color: var(--ink-c); }
.cover-top, .cover-title, .cover-foot { position: relative; z-index: 1; }
.cover-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cover-type { background: rgba(255,255,255,.92); color: #17181C; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; }
.cover-live { background: #DC2626; color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 800; }
.cover-title { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-size: 15px; text-wrap: balance; }
.cover-foot { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; }
.cover-avatar { width: 20px; height: 20px; border-radius: 999px; background: #fff; color: #17181C; display: grid; place-items: center; font-size: 8px; font-weight: 800; }
.cover.lg .cover-title { font-size: clamp(24px, 3vw, 34px); }
.cover.lg .cover-foot { font-size: 13px; }
.cover.lg .cover-avatar { width: 30px; height: 30px; font-size: 11px; }
.cover.lg .cover-type, .cover.lg .cover-live { font-size: 13px; padding: 4px 11px; }
.cover.busy::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  background-size: 250% 100%; animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---- painel de detalhe ---- */
.detail { background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 20px; display: flex; flex-wrap: wrap; gap: 24px; }
.detail-preview { flex: none; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.phone { width: 280px; border-radius: 34px; background: #0C0D0F; padding: 10px; }
.phone .cover { border-radius: 24px; }
.frame-square { width: 340px; max-width: 100%; }
.frame-wide { width: 460px; max-width: 100%; }
.detail-body { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.detail-section { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid #EFECE6; }
.prompt { background: #F5F3FF; color: #4C1D95; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.scene { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px; font-size: 14px; display: flex; gap: 10px; }
.scene.on { border-color: var(--accent); background: #FFF7ED; }
.scene b { color: var(--accent-dark); min-width: 18px; }
.metric { background: var(--ok-soft); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.metric .num { font-size: 24px; color: #14532D; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---- gerador com IA e live ---- */
.panel { background: #fff; border: 2px solid var(--accent); border-radius: 18px; padding: 20px; display: flex; flex-wrap: wrap; gap: 22px; }
.panel.live { border-color: #DC2626; }
.gen-busy { display: flex; align-items: center; gap: 12px; background: #F5F3FF; color: #4C1D95; border-radius: 12px; padding: 14px; font-weight: 600; }
.spinner { width: 22px; height: 22px; border-radius: 999px; border: 3px solid #DDD6FE; border-top-color: #7C3AED; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- calendário ---- */
.cal { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 6px; min-width: 720px; }
.cal-dow { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 6px; }
.cal-day { min-height: 104px; background: #FAF9F7; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-day.out { background: transparent; }
.cal-day.today { background: var(--accent-soft); outline: 2px solid var(--accent); }
.cal-num { font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-item { text-align: left; border: 0; border-radius: 7px; padding: 5px 7px; font-size: 12px; font-weight: 600; color: #fff; line-height: 1.25; min-height: 30px; }

/* ---- sala de transmissão (modal) ---- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(12, 13, 15, .82); display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.studio { width: min(1100px, 100%); max-height: 100%; overflow: auto; background: #12131A; color: #fff; border-radius: 22px; padding: 20px; display: flex; flex-wrap: wrap; gap: 18px; }
.studio-cam { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cam { position: relative; aspect-ratio: 16 / 9; background: #23252B; border-radius: 16px; overflow: hidden; display: grid; place-items: center; color: #A8ABB5; text-align: center; padding: 16px; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam .onair { position: absolute; left: 14px; top: 14px; background: #DC2626; color: #fff; border-radius: 6px; padding: 4px 10px; font-weight: 800; font-size: 13px; z-index: 1; }
.studio-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.studio-box { background: #1E2029; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }