/* Creative Studio — Approval UI (mobile-first) */
:root {
  --bg: #ffffff;
  --card: #f7f7f8;
  --border: #e4e4e7;
  --text: #111111;
  --muted: #71717a;
  --green: #16a34a;
  --red: #dc2626;
  --ink: #111111;      /* preto de ação — botões primários */
  --ink-hover: #2a2a2a;
  --accent: #2563eb;   /* ÚNICO acento discreto — foco, links, ativo, loader */
  /* aliases legados: colapsam o dourado no ink e o azul-de-ação no acento */
  --gold: #111111;
  --blue: #2563eb;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ── Login ── */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 32px;
}

.login-card h1 {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  margin-bottom: 8px;
}

.muted { color: var(--muted); font-size: 14px; margin-bottom: 24px; }

.login-card label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}

.login-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  outline: none;
}

.login-card input:focus { border-color: var(--accent); }

.error {
  background: rgba(239,68,68,0.15);
  color: var(--red);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}

/* ── Buttons (P&B + acento discreto; Inter, sem uppercase gritado) ── */
.btn-primary, .btn-generate {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  margin-top: 8px;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease, transform .05s ease;
}
.btn-primary:hover, .btn-generate:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn-primary:active, .btn-generate:active { transform: translateY(1px); }

.btn-approve, .btn-reject {
  flex: 1;
  padding: 15px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
.btn-approve { background: var(--green); }
.btn-reject { background: var(--red); }
.btn-approve:hover, .btn-reject:hover { filter: brightness(0.94); }
.btn-approve:active, .btn-reject:active { transform: translateY(1px); }

.btn-secondary {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.btn-secondary:hover { border-color: var(--ink); background: var(--card); }

/* Estados globais de botão */
button:disabled, .btn-primary:disabled, .btn-generate:disabled, .btn-secondary:disabled,
.btn-approve:disabled, .btn-reject:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Layout ── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
}

.topbar a { color: var(--text); text-decoration: none; }
.topbar .title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; }

.page { padding: 20px; max-width: 680px; margin: 0 auto; }
/* Desktop: aproveita a tela em listas, calendário, admin e home (o editor tem seu próprio 1060) */
@media (min-width: 900px) { .page { max-width: 960px; } }

.section-title {
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 24px 0 12px;
}

/* ── Cards list ── */
.item-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  text-decoration: none;
  color: var(--text);
  align-items: center;
}

.item-card img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #eee;
}

.item-card .info { flex: 1; min-width: 0; }
.item-card .info h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.item-card .info p { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.status-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
/* Neutro (rascunho / gerando / texto pronto) */
.status-badge.pending,
.status-badge.rascunho, .status-badge.gerando_texto, .status-badge.gerando_imagens,
.status-badge.texto_pronto, .status-badge.generating, .status-badge.rendering {
  background: #ececee; color: #52525b;
}
/* Em andamento / revisão / aguardando (acento discreto) */
.status-badge.em_revisao, .status-badge.fechado, .status-badge.aguardando_admin {
  background: rgba(37,99,235,0.12); color: var(--accent);
}
/* Aprovado / publicado */
.status-badge.approved, .status-badge.aprovado, .status-badge.publicado {
  background: rgba(22,163,74,0.14); color: var(--green);
}
/* Rejeitado / falhou */
.status-badge.rejected, .status-badge.rejeitado, .status-badge.failed, .status-badge.falhou {
  background: rgba(220,38,38,0.12); color: var(--red);
}

/* ── Detail page ── */
.detail-image {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 16px;
  display: block;
}

.detail-meta {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.detail-meta strong { color: var(--text); font-weight: 500; }

.feedback-box {
  width: 100%;
  min-height: 80px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  resize: vertical;
  outline: none;
  margin-bottom: 16px;
}

.feedback-box:focus { border-color: var(--accent); }

.action-bar {
  display: flex;
  gap: 12px;
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

/* ── Form ── */
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}
.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  outline: none;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus { border-color: var(--accent); }

/* ── Dashboard stats ── */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat {
  text-align: center;
  padding: 20px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.stat .number {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.stat .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 14px;
}

.empty a { color: var(--gold); }

/* ── Responsive tweaks ── */
@media (max-width: 480px) {
  .page { padding: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Carousel Studio ── */
.subnav { display:flex; gap:6px; padding:10px 16px; border-bottom:1px solid var(--border); overflow-x:auto; }
.subnav a { color:var(--text); text-decoration:none; padding:6px 12px; border-radius:6px; font-size:14px; white-space:nowrap; }
.subnav a.on { background:var(--card); font-weight:600; }
.help-tip { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:14px; line-height:1.6; margin-bottom:16px; color:var(--text); }
.chip { display:inline-block; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:8px 14px; margin:4px 4px 0 0; cursor:pointer; font-size:13px; }
.chip:hover { border-color:var(--blue); }
label { display:block; font-size:13px; color:var(--muted); margin:8px 0 4px; }
input, textarea, select { background:#fff; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px; font-family:inherit; font-size:14px; }
input:focus, textarea:focus, select:focus { border-color:var(--blue); outline:none; }
textarea { resize:vertical; width:100%; }
.error { background:#fdecea; border:1px solid #f3c2bf; color:#b42318; border-radius:8px; padding:10px; font-size:14px; }
.warn { background:#fdf6e3; border:1px solid #ead9a3; color:#8a6d1a; border-radius:8px; padding:10px; font-size:14px; margin-top:6px; }
.ok { color:var(--green); font-size:14px; padding:6px 0; }
.progressbar { align-items:center; gap:10px; margin:14px 0; }
.progressbar > div { flex:1; height:8px; background:#e7e7ea; border-radius:4px; overflow:hidden; }
.progressbar span { font-size:13px; color:var(--muted); }
.loading { text-align:center; padding:48px 20px; }
.loading .spinner-lg { width:46px; height:46px; border:4px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 18px; }
.loading .ld-stage { font-size:15px; font-weight:600; margin-bottom:14px; color:var(--text); }
.ld-track { height:10px; background:#ececed; border-radius:999px; overflow:hidden; max-width:380px; margin:0 auto; }
.ld-fill { height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .4s ease; }
.ld-fill.indet { animation:indet 1.15s ease-in-out infinite; }
@keyframes indet { 0%{ margin-left:-40% } 100%{ margin-left:100% } }
.ld-pct { font-size:13px; color:var(--muted); margin-top:10px; font-variant-numeric:tabular-nums; }
.slide-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:14px; }
.slide-card { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.slide-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#eee; }
.sc-body { padding:10px; }
.sc-actions { display:flex; gap:6px; margin-top:8px; }
.sc-actions .btn-secondary { flex:1; padding:8px; font-size:12px; }
.cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:18px; }
.cal-head a { color:var(--text); text-decoration:none; padding:4px 12px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-wd { text-align:center; font-size:12px; color:var(--muted); padding:4px 0; }
.cal-cell { min-height:74px; background:var(--card); border:1px solid var(--border); border-radius:6px; padding:4px; }
.cal-cell.empty { background:transparent; border:none; }
.cal-cell.today { outline:2px solid var(--blue); outline-offset:-1px; }
.cal-d { font-size:12px; color:var(--muted); }
.cal-ev { display:flex; align-items:center; gap:4px; font-size:11px; color:#fff; background:#3b5b9a; border-radius:4px; padding:2px 4px; margin-top:3px; text-decoration:none; overflow:hidden; }
.cal-ev span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-thumb { width:16px; height:16px; border-radius:3px; object-fit:cover; flex:0 0 auto; }
.cal-ev.aprovado { background:#1f8a4c; } .cal-ev.publicado { background:#6b7280; } .cal-ev.aguardando_admin { background:#b88a2a; } .cal-ev.rejeitado { background:#c0392b; }
.cal-month { margin-bottom:22px; }
.cal-mtitle { text-transform:capitalize; font-size:16px; margin:4px 0 8px; }
.cal-com { display:block; font-size:10px; line-height:1.2; color:#7a5a00; background:#fff3cf; border:1px solid #ead9a3; border-radius:4px; padding:1px 4px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tutorial ol { line-height:1.9; padding-left:20px; } .tutorial li { margin-bottom:6px; }

/* ── Menu inicial ── */
.home-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:8px; }
.home-card { display:block; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s, box-shadow .15s; }
.home-card:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.home-card h3 { margin:10px 0 6px; font-size:20px; }
.home-card p { color:var(--muted); font-size:14px; line-height:1.5; margin:0; }
.home-ico { font-size:40px; line-height:1; }
.home-card.disabled { opacity:.5; cursor:default; pointer-events:none; }
.filters { display:flex; gap:6px; flex-wrap:wrap; }
.chip { color:var(--text); text-decoration:none; }
.chip.on { border-color:var(--blue); background:#e7effd; color:var(--blue); font-weight:600; }
#slides.review { display:block; }

/* Desktop: preview à esquerda (sticky) + controles à direita, para ver a edição em tempo real */
@media (min-width:920px){
  .page-carousel{ max-width:1060px; }
  #slides.review{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
  #slides.review .rev-left{ position:sticky; top:16px; }
  #slides.review .rev-right{ min-width:0; }
  /* blocos de ação (fora do grid) num tamanho confortável, centralizados */
  .page-carousel #savebar, .page-carousel #capbox, .page-carousel #review,
  .page-carousel #adminbox, .page-carousel #archivebar, .page-carousel #msg,
  .page-carousel #genbox, .page-carousel #hint, .page-carousel #valid{ max-width:680px; margin-left:auto; margin-right:auto; }
}
.frame-wrap { position:relative; width:100%; max-width:600px; aspect-ratio:1/1; margin:6px auto 4px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#f0f0f0; }
.frame-wrap iframe { position:absolute; top:0; left:0; width:1080px; height:1080px; border:0; transform-origin:top left; }
.edit-box { margin-top:14px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.edit-box textarea { width:100%; }
.fld { display:flex; gap:6px; align-items:stretch; }
.fld textarea { flex:1; }
/* Salvar de campo = secundário sutil (hierarquia: os CTAs pretos dominam) */
.btn-fieldsave { flex:0 0 auto; padding:8px 14px; border:1px solid var(--border); background:#fff; color:var(--text); border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color .15s ease, background .15s ease; }
.btn-fieldsave:hover { border-color:var(--ink); background:var(--card); }
.viewer { position:relative; width:100%; max-width:600px; margin:6px auto 4px; }
.viewer img { width:100%; aspect-ratio:1/1; object-fit:contain; background:#f0f0f0; border-radius:14px; border:1px solid var(--border); display:block; }
.navbtn { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.94); border:1px solid var(--border); color:var(--text); font-size:24px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18); z-index:2; }
#prev.navbtn { left:8px; }
#next.navbtn { right:8px; }
.navbtn:active { transform:translateY(-50%) scale(.92); }
.navbtn:hover { border-color:var(--blue); background:#fff; }
.vcounter { text-align:center; color:var(--muted); font-size:13px; margin-bottom:10px; }
.vthumbs { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.vthumbs button { width:10px; height:10px; padding:0; border-radius:50%; border:none; background:#cfcfd4; cursor:pointer; }
.vthumbs button.on { background:var(--blue); transform:scale(1.25); }
.vthumbs button.locked { background:var(--ink); box-shadow:0 0 0 2px var(--ink); }
.lockbtn.on { border-color:var(--ink); background:var(--ink); color:#fff; }
.cta-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.cta-banner strong { font-size:15px; }
.cta-banner .muted { font-size:13px; }
.cta-banner .btn-primary { width:auto; flex:0 0 auto; margin:0; padding:14px 20px; }
.rev-actions { display:flex; gap:10px; margin-top:12px; }
.btn-action { flex:1; padding:13px 14px; border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; border:1px solid var(--border); text-align:center; }
.btn-action.apply { background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-action.apply:hover { background:var(--ink-hover); border-color:var(--ink-hover); }
.btn-action.ghost { background:#fff; color:var(--text); }
.btn-action.ghost:hover { border-color:#aaa; }
#slidefb, #general { width:100%; }

/* Task 12: Template picker thumbnails */
.tmpl-grid{display:flex;flex-direction:column;gap:4px}
.tmpl-row{display:flex;flex-wrap:wrap;gap:6px}
.tmpl{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;padding:4px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer}
.tmpl.on{border-color:#111;box-shadow:0 0 0 1px #111}
.tmpl.needs{opacity:.55}
.tmpl em{font-size:9px;font-style:normal;color:#555;text-align:center;line-height:1.1}
.tmpl span{display:block;width:46px;height:46px;border-radius:4px;background:#ececec;position:relative;overflow:hidden}
.tmpl .tn-8::before,.tmpl .tn-8::after{content:"";position:absolute;top:6px;bottom:6px;width:40%;background:#bbb}
.tmpl .tn-8::before{left:6px}.tmpl .tn-8::after{right:6px}
.tmpl .tn-9{background:#888}
.tmpl .tn-15::before{content:"7";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#777}

/* Task 4: Toggles de cor por campo (título/corpo) */
.cc-row{display:flex;align-items:center;gap:6px;margin:4px 0 10px}
.cc-lbl{font-size:11px;color:#888}
.ccbtn{padding:3px 8px;font-size:11px;border:1px solid var(--border);border-radius:5px;background:#fff;cursor:pointer;color:#333}
.ccbtn.on{border-color:#111;background:#111;color:#fff}

/* Task 4: Sliders de tamanho de título e corpo */
.sc-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.sc-lbl{font-size:12px;width:44px;color:#555}
.sc-row input[type=range]{flex:1}
.sc-val{font-size:12px;width:42px;text-align:right;color:#777}

/* Stepper — indicador de fluxo/próximo passo */
.stepper{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:10px 0 4px}
.stepper .step{display:flex;align-items:center;gap:6px;opacity:.42}
.stepper .step .step-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);flex-shrink:0}
.stepper .step .step-t{font-size:12px;font-weight:600;color:var(--muted)}
.stepper .step.done{opacity:1}
.stepper .step.done .step-dot{border-color:var(--green);background:var(--green);color:#fff}
.stepper .step.done .step-t{color:var(--text)}
.stepper .step.now{opacity:1}
.stepper .step.now .step-dot{border-color:var(--gold);color:var(--gold)}
.stepper .step.now .step-t{color:var(--text)}
.stepper .step-sep{flex:1 1 12px;min-width:10px;height:2px;background:var(--border);border-radius:2px}
.stepper .step-arch{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--red);background:rgba(220,38,38,.12);padding:3px 8px;border-radius:999px;margin-left:6px}
#nexthint{font-size:13px;color:var(--muted);margin:2px 0 12px}
@media (max-width:520px){.stepper .step .step-t{display:none}.stepper .step.now .step-t{display:inline}}

/* Painel "já agendados" no passo de agendamento */
.upcoming{margin-bottom:10px}
.upcoming .up-title{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.upcoming .up-empty{font-size:12px;color:var(--muted);margin-bottom:4px}
.upcoming .up-row{display:flex;gap:8px;align-items:baseline;font-size:12px;padding:3px 8px;border:1px solid var(--border);border-radius:6px;margin-bottom:4px;background:var(--card)}
.upcoming .up-when{font-weight:700;color:var(--text);flex:0 0 auto;font-variant-numeric:tabular-nums}
.upcoming .up-theme{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}