/* ───────────────────────────────────────────────────────────────
   Réplicas estáticas de componentes do app IZI (modal da peça, calendário,
   lentes, produção, modelos). Ilustração fiel — NÃO-clicáveis.
   Tema escuro neutro-azulado do IZI, escopado sob .aj-demo.
   Substituem prints: nítidas em qualquer tela e atualizam com o design.
   ─────────────────────────────────────────────────────────────── */
.aj-demo{
  --s:#15171a; --s2:#22262c; --s3:#1b1e22;
  --os:#e9ecf0; --osv:#c2c7cf; --osd:#8a909a;
  --ln:#2a2f38; --lnv:#3a414c; --pri:#9fb2c9;
  --gold:#f4b81e; --violet:#b14dff; --ok:#5cba80;
  pointer-events:none; user-select:none;
  background:var(--s); color:var(--os);
  font-family:'Roboto Flex','Roboto',system-ui,sans-serif; font-size:13px; line-height:1.42;
  padding:18px 20px;
}
.aj-demo *{ box-sizing:border-box; }

/* ── Toggle de lente (Conteúdo / Mídia / Tarefas) ── */
.ajd-lens{ display:inline-flex; background:var(--s2); border:1px solid var(--lnv); border-radius:999px; padding:3px; gap:2px; }
.ajd-seg{ padding:6px 16px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--osd); }
.ajd-seg.on{ background:var(--s3); color:var(--os); box-shadow:0 1px 2px rgba(0,0,0,.3); }

/* ── Mini-calendário (grade de mês) ── */
.ajd-cal{ margin-top:14px; }
.ajd-calhead{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.ajd-dow{ font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--osd); text-align:center; }
.ajd-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.ajd-cell{ background:var(--s3); border:1px solid var(--ln); border-radius:9px; min-height:62px; padding:6px 6px 5px; position:relative; }
.ajd-cell.dim{ opacity:.42; }
.ajd-cell.today{ border-color:var(--pri); }
.ajd-dnum{ font-size:11px; color:var(--osv); font-weight:600; }
.ajd-cell.today .ajd-dnum{ background:var(--pri); color:#11141a; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.ajd-chip{ display:block; font-size:9.5px; font-weight:600; color:#11141a; border-radius:5px; padding:2px 5px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ajd-chip.soft{ color:var(--os); }
/* cores de exemplo (projeto / rede) */
.c-proj-a{ background:#6ea8ff; } .c-proj-b{ background:#f0a35e; } .c-proj-c{ background:#7fd6a0; color:#11141a; }
.c-yt{ background:#ff4d4d; color:#fff; } .c-ig{ background:#e1568f; color:#fff; }
.c-tt{ background:#3a414c; color:var(--os); } .c-th{ background:#3a414c; color:var(--os); } .c-fb{ background:#4a78d6; color:#fff; }
.ajd-taskrow{ display:flex; align-items:center; gap:5px; margin-top:4px; }
.ajd-tkdot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.ajd-tklabel{ font-size:9px; color:var(--osv); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Modal da peça (rail + conteúdo) ── */
.ajd-modal{ display:flex; padding:0; }
.ajd-rail{ flex-shrink:0; width:52px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 0; border-right:1px solid var(--ln); }
.ajd-railbtn{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--osd); position:relative; }
.ajd-railbtn.on{ color:var(--osv); }
.ajd-railbtn.sel{ background:var(--s2); color:var(--os); }
.ajd-railbtn svg{ width:19px; height:19px; }
.ajd-railbadge{ position:absolute; top:0; right:0; min-width:15px; height:15px; border-radius:999px; background:var(--pri); color:#11141a; font-size:9px; font-weight:700; line-height:15px; text-align:center; padding:0 3px; }
.ajd-rdot{ width:20px; height:20px; border-radius:6px; }
.ajd-rdot.off{ opacity:.32; }
.ajd-content{ flex:1; min-width:0; padding:15px 18px; }
.ajd-crumb{ display:inline-flex; align-items:center; gap:6px; background:rgba(159,178,201,.14); color:var(--osv); border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:600; margin-bottom:12px; }
.ajd-cdot{ width:7px; height:7px; border-radius:50%; }
.ajd-statusbar{ display:flex; align-items:center; gap:8px; background:var(--s2); border-radius:10px; padding:9px 12px; font-size:12px; color:var(--osv); margin-bottom:4px; }
.ajd-sdot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }
.ajd-flabel{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--osd); margin:13px 0 5px; }
.ajd-finput{ border:1px solid var(--lnv); border-radius:10px; padding:10px 12px; color:var(--osd); font-size:12.5px; background:var(--s3); }
.ajd-ftext{ min-height:40px; }
.ajd-media{ display:inline-flex; align-items:center; gap:7px; border:1px dashed var(--lnv); border-radius:9px; padding:8px 13px; color:var(--osv); font-size:12.5px; font-weight:500; }
.ajd-medialink{ display:block; margin-top:6px; color:var(--pri); font-size:12px; font-weight:600; }
.ajd-saida{ display:flex; align-items:center; gap:9px; border:1px solid var(--lnv); border-radius:12px; padding:10px 12px; margin-top:7px; }
.ajd-saida-name{ flex:1; font-size:12.5px; color:var(--os); display:flex; align-items:center; gap:8px; }
.ajd-saida-when{ font-size:12px; color:var(--osd); }
.ajd-st{ font-size:10px; font-weight:700; border-radius:999px; padding:3px 8px; border:1px solid var(--lnv); color:var(--osd); }
.ajd-st.on-art{ color:var(--pri); border-color:rgba(159,178,201,.5); background:rgba(159,178,201,.12); }
.ajd-st.on-live{ color:var(--ok); border-color:rgba(92,186,128,.5); background:rgba(92,186,128,.14); }
.ajd-chev{ color:var(--osd); }
.ajd-addsaida{ display:inline-block; margin-top:10px; border:1px dashed var(--lnv); border-radius:10px; padding:7px 13px; color:var(--osv); font-size:12.5px; font-weight:600; }

/* stepper Briefing → Legenda → Arte → Publicado */
.ajd-stepper{ display:flex; align-items:center; gap:0; margin:4px 0 6px; }
.ajd-stp{ display:flex; align-items:center; gap:7px; flex:1; }
.ajd-stpdot{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--lnv); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ajd-stp.done .ajd-stpdot{ background:var(--pri); border-color:var(--pri); color:#11141a; }
.ajd-stp.now .ajd-stpdot{ border-color:var(--pri); }
.ajd-stplab{ font-size:10.5px; color:var(--osd); white-space:nowrap; }
.ajd-stp.done .ajd-stplab, .ajd-stp.now .ajd-stplab{ color:var(--osv); }
.ajd-stpline{ height:1.5px; background:var(--ln); flex:1; min-width:8px; }
.ajd-stpline.done{ background:var(--pri); }

/* ── Produção (lista de tarefas) ── */
.ajd-head{ display:flex; align-items:center; gap:9px; margin-bottom:3px; }
.ajd-title{ font-size:16px; font-weight:600; color:var(--os); }
.ajd-sub{ font-size:12.5px; color:var(--osd); margin:0 0 14px; }
.ajd-rows{ display:flex; flex-direction:column; gap:6px; }
.ajd-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ajd-in{ background:var(--s3); border:1px solid var(--lnv); border-radius:9px; padding:8px 9px; color:var(--os); font-size:12.5px; white-space:nowrap; }
.ajd-desc{ flex:1; min-width:130px; }
.ajd-resp{ color:var(--osv); }
.ajd-pill{ border:1px solid var(--lnv); border-radius:999px; padding:6px 12px; font-size:11.5px; font-weight:700; background:var(--s2); color:var(--osd); }
.ajd-pill.st-todo{ }
.ajd-pill.st-doing{ background:rgba(244,184,30,.16); color:#e9b94a; border-color:rgba(244,184,30,.4); }
.ajd-pill.st-done{ background:rgba(92,186,128,.16); color:var(--ok); border-color:rgba(92,186,128,.4); }
.ajd-add{ display:inline-block; margin-top:10px; border:1px dashed var(--lnv); border-radius:10px; padding:7px 13px; color:var(--osv); font-size:12.5px; font-weight:600; }
.ajd-sep{ height:1px; background:var(--ln); margin:16px 0 12px; }
.ajd-tplh{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--osd); margin-bottom:9px; }
.ajd-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.ajd-chip2{ display:inline-flex; align-items:center; gap:6px; background:var(--s2); border:1px solid var(--lnv); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--os); }

/* ── Cards de modelo (hub) ── */
.ajd-cards{ display:flex; flex-direction:column; gap:8px; }
.ajd-card{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--lnv); border-radius:12px; padding:12px 14px; }
.ajd-card-name{ font-size:14px; font-weight:600; color:var(--os); margin-bottom:6px; }
.ajd-badges{ display:flex; flex-wrap:wrap; gap:5px; }
.ajd-badge{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--s2); color:var(--osv); }
.ajd-badge.bg-c{ background:rgba(110,168,255,.20); color:#a9c8ff; }
.ajd-badge.bg-m{ background:rgba(159,178,201,.20); color:var(--osv); }
.ajd-badge.bg-t{ background:rgba(92,186,128,.20); color:#9fe0b8; }

/* ── Lista / drawer (equipes, redes) ── */
.ajd-member{ display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--ln); }
.ajd-member:last-child{ border-bottom:0; }
.ajd-av{ width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#11141a; }
.ajd-mname{ flex:1; font-size:13px; color:var(--os); }
.ajd-mmail{ font-size:11px; color:var(--osd); }
.ajd-role{ font-size:11px; font-weight:700; border-radius:999px; padding:4px 10px; border:1px solid var(--lnv); color:var(--osv); }
.ajd-role.owner{ color:var(--gold); border-color:rgba(244,184,30,.4); background:rgba(244,184,30,.1); }
.ajd-invite{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:var(--pri); color:#11141a; border-radius:9px; padding:8px 13px; font-size:12.5px; font-weight:700; }

/* rodapé do modal (Salvar como modelo / Excluir) */
.ajd-foot{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.ajd-btn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--ln); border-radius:9px; padding:8px 13px; font-size:12px; font-weight:600; color:var(--osv); }
.ajd-btn-del{ color:#e07a70; border-color:#54322e; }
.ajd-btn-fill{ background:var(--pri); color:#11141a; border:none; }