/* =========================================================
   Social Media v2 (equipe) e aprovação do cliente
   ========================================================= */
.btn--ok{background:var(--state-ok);color:var(--duze-white)}
.so-celular,.so-celular-flex{display:none!important}

/* barra de ferramentas: cliente, mês e vistas */
.sm-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border-radius:var(--radius-pill);padding:6px;box-shadow:var(--shadow-soft)}
.sm-toolbar .spacer{flex:1}
.sm-cli{display:flex;align-items:center;gap:6px;padding-left:12px}
.sm-cli select{min-width:220px;background-color:var(--surface-soft)}
.sm-toolbar .sm-mes{background:var(--surface-soft);padding:2px}
.sm-toolbar .sm-mes .icon-btn{width:36px;height:36px;background:transparent}
.sm-toolbar .seg{background:var(--surface-soft)}

/* faixa da aprovação enviada */
.sm-aprov{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:14px 18px;border-radius:20px;background:var(--duze-black);color:var(--duze-white)}
.sm-aprov.fim{background:var(--state-ok)}
.sm-aprov .grow{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.sm-aprov span{font-size:13px;color:var(--on-dark-muted)}
.sm-aprov.fim span,.sm-aprov.fim .txt-ok,.sm-aprov.fim .txt-late,.sm-aprov.fim .hl{color:var(--duze-white)}
.sm-aprov .txt-ok{color:var(--state-ok-on-dark)}
.sm-aprov .txt-late{color:#ff9d8f}
.sm-aprov .hl{color:var(--duze-orange)}
.sm-aprov .btn--soft{background:var(--duze-gray-dark);color:var(--duze-white)}
.sm-aprov.fim .btn--soft{background:rgba(0,0,0,.2)}

/* área de trabalho: prévia fixa + painel */
.sm-work,.cl-grid{display:grid;grid-template-columns:390px minmax(0,1fr);gap:24px;align-items:start;margin-top:20px}
.sm-phone-col{position:sticky;top:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.sm-phone-col .phone-screen{height:min(720px,calc(100vh - 140px))}
.sm-dica{font-size:12px;color:var(--text-muted);display:flex;gap:6px;align-items:center;text-align:center}
.sm-panel{min-width:0}
.sm-nota{font-size:12px;color:var(--text-muted);margin-top:18px}
.ig-tile.sel{outline:3px solid var(--duze-orange);outline-offset:-3px}
.ig-tile.hl{outline:3px solid var(--duze-orange);outline-offset:-3px;opacity:1}
.ig-dec{position:absolute;right:5px;bottom:5px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--duze-white);box-shadow:0 0 0 2px var(--duze-white)}
.ig-dec svg.lucide{width:13px;height:13px;stroke-width:3}
.ig-dec--aprovado{background:var(--state-ok)}
.ig-dec--reprovado{background:var(--state-late)}
.ig-dec--pendente{background:var(--duze-orange);width:12px;height:12px}

/* lista de posts */
.pcards{display:flex;flex-direction:column;gap:10px}
.pcard{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:20px;background:var(--surface-soft);cursor:pointer;transition:box-shadow .15s}
.pcard:hover{box-shadow:var(--shadow-soft)}
.pc-thumb{display:block;width:64px;height:80px;border-radius:12px;overflow:hidden;flex:none;background:var(--surface-strong)}
.pc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pc-thumb .ph{font-size:8px;padding:6px}
.pc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pc-date{font-size:12px;font-weight:500;color:var(--text-muted);text-transform:capitalize}
.pc-tema{font-weight:600;font-size:16px;line-height:1.25}
.pc-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-muted)}
.pc-meta span{display:inline-flex;gap:4px;align-items:center}
.pc-resp{display:flex;gap:8px;align-items:flex-start;margin-top:4px;padding:8px 10px;border-radius:12px;font-size:13px;font-weight:500;line-height:1.35}
.pc-resp--aprovado{background:var(--state-ok);color:var(--duze-white)}
.pc-resp--reprovado{background:var(--state-late);color:var(--duze-white)}
.pc-resp svg.lucide{margin-top:1px}

/* mídias: alvos */
.mini-alvos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.malvo{display:flex;gap:10px;align-items:center;padding:8px;border-radius:16px;background:var(--surface-soft)}
.malvo .pc-thumb{width:44px;height:55px}
.malvo b{display:block;font-weight:600;font-size:13px}
.malvo small{font-size:12px;color:var(--text-muted)}

/* enviar para aprovação */
.env-lista{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto}
.env-item{display:flex;gap:12px;align-items:center;padding:8px 10px;border-radius:16px;background:var(--surface-soft);cursor:pointer}
.env-item input{width:20px;height:20px;accent-color:var(--duze-orange);flex:none}
.env-item .pc-thumb{width:40px;height:50px}
.env-item .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.env-item b{font-weight:600;font-size:14px}
.env-item small{font-size:12px;color:var(--text-muted)}
.link-box{display:flex;gap:8px}
.link-box .field{flex:1;font-size:13px}

/* ---------- página do cliente ---------- */
.publica{min-height:100vh;background:var(--bg)}
.cl-wrap{max-width:1240px;margin:0 auto;padding:20px max(16px,env(safe-area-inset-right,0px)) 60px max(16px,env(safe-area-inset-left,0px))}
.cl-top{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500}
.cl-logo{height:22px;width:auto}
.cl-line{width:40px;height:2px;background:var(--accent)}
.cl-top .spacer{flex:1}
.cl-voltar{font-size:13px}
.cl-intro{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;margin:28px 0 0}
.cl-intro>div:first-child{flex:1;min-width:280px}
.cl-intro h1{margin:4px 0 8px}
.cl-intro p.muted{max-width:640px}
.cl-prog{background:var(--surface);border-radius:20px;padding:16px 20px;min-width:220px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-soft)}
.cl-prog .num{font-size:36px;font-weight:600}
.cl-prog .num span{font-size:18px;color:var(--text-muted)}
.cl-prog>span{font-size:13px;color:var(--text-muted)}
.cl-post{padding:20px}
.cl-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;font-size:14px}
.cl-body{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;align-items:start}
.cl-info{display:flex;flex-direction:column;min-width:0}
.cl-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}
.cl-meta>span:last-child{text-transform:capitalize}
.cl-tema{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1.05;margin-top:10px;letter-spacing:0}
.cl-legenda{white-space:pre-wrap;font-size:14px;line-height:1.55;background:var(--surface-soft);border-radius:16px;padding:14px 16px;margin-top:6px;max-height:340px;overflow:auto}
.cl-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.cl-big{flex:1;min-height:52px;font-size:15px}
.cl-ajuste{margin-top:16px}
.cl-ajuste .cl-btns{justify-content:flex-end}
.cl-dec{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:16px;color:var(--duze-white)}
.cl-dec>div{flex:1;display:flex;flex-direction:column;gap:2px;font-size:14px}
.cl-dec span{opacity:.92}
.cl-dec .link-btn{color:var(--duze-white)}
.cl-dec--aprovado{background:var(--state-ok)}
.cl-dec--reprovado{background:var(--state-late)}
.cl-fila{display:flex;gap:8px;overflow-x:auto;margin-top:20px;padding:4px 2px 6px}
.cl-q{position:relative;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:var(--text);flex:none}
.cl-q .pc-thumb{width:52px;height:65px}
.cl-q.on .pc-thumb{box-shadow:0 0 0 3px var(--duze-orange)}
.cl-q small{font-size:11px;font-weight:500}
.cl-q .ig-dec{right:-4px;top:-4px;bottom:auto}
.cl-concluir{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:14px 16px;border-radius:20px;background:var(--state-ok);color:var(--duze-white)}
.cl-concluir .grow{flex:1;min-width:200px;display:flex;flex-direction:column}
.cl-concluir .btn--primary{background:var(--duze-white);color:var(--duze-black)}
.cl-fim{max-width:640px;margin:80px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}

@media (max-width:1180px){
  .cl-body{grid-template-columns:minmax(0,1fr)}
  .cl-media{max-width:360px;width:100%;margin:0 auto}
}
@media (max-width:1024px){
  .sm-work,.cl-grid{grid-template-columns:minmax(0,1fr)}
  .sm-phone-col{display:none;position:static}
  .sm-work.ver-perfil .sm-phone-col,.cl-grid.ver-perfil .sm-phone-col{display:flex}
  .sm-work.ver-perfil .sm-panel,.cl-grid.ver-perfil .cl-post{display:none}
  .so-celular{display:inline-flex!important}
  .so-celular-flex{display:inline-flex!important;margin-top:18px}
  .sm-phone-col .phone-screen{height:640px}
}
@media (max-width:860px){
  .sm-toolbar{border-radius:24px}
  .sm-cli{padding-left:6px;width:100%}
  .sm-cli select{min-width:0;flex:1}
  .sm-toolbar .seg{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .sm-toolbar .seg a{white-space:nowrap;flex:none}
  .pc-thumb{width:56px;height:70px}
  .cl-tema{font-size:28px}
  .cl-voltar{display:none}
  .cl-post{padding:16px}
}