/* Identidade visual SUDS */
:root{
  --preto:#141414; --preto-2:#1c1c1c; --preto-3:#262626; --preto-4:#303030;
  --branco:#FDFEFC; --cinza:#E0E1DE; --suave:#9a9b98; --apagado:#5c5d5a;
  --azul:#3A81B0; --azul-escuro:#2f6a91; --azul-glow:rgba(58,129,176,.25);
  --ok:#3fa37a; --warn:#d9a13b; --erro:#c0564f; --evento:#E0A84F;
  --r:4px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Open Sans",system-ui,sans-serif;font-size:14px;line-height:1.5;background:var(--preto);
  color:var(--branco);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;right:-160px;top:-60px;width:560px;height:820px;pointer-events:none;
  background:url(/static/s-curve.svg) no-repeat center/contain;opacity:.035;z-index:0}
#root{position:relative;z-index:1;min-height:100%}
a{color:var(--azul)}
button{font:inherit;cursor:pointer}
.btn{padding:9px 16px;border:0;border-radius:3px;background:var(--azul);color:var(--branco);font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;transition:background .15s;white-space:nowrap}
.btn:hover{background:var(--azul-escuro)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--suave);border:1px solid var(--preto-4)}
.btn.ghost:hover{color:var(--branco);border-color:var(--suave)}
.btn.danger{background:transparent;color:var(--erro);border:1px solid #4a2826}
.btn.danger:hover{background:#2a1716}
.btn.ok{background:var(--ok)} .btn.ok:hover{background:#358a67}
.btn.warn{background:var(--warn);color:var(--preto)}
.btn.sm{padding:5px 10px;font-size:11px}
.iconbtn{background:transparent;border:0;color:var(--suave);padding:6px 8px;border-radius:3px;font-size:16px;line-height:1}
.iconbtn:hover{color:var(--branco);background:var(--preto-3)}
input,select,textarea{font:inherit;font-size:14px;color:var(--branco);background:var(--preto);border:1px solid var(--preto-4);
  border-radius:3px;padding:9px 11px;width:100%;min-width:0}
textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-glow)}
input:disabled,select:disabled,textarea:disabled{opacity:.75}
input[type=color]{padding:2px;height:38px;width:56px}
input[type=checkbox]{width:auto}
label.f{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);margin:0 0 6px}
.field{margin-bottom:14px}
.muted{color:var(--suave)} .small{font-size:12px}
h1{font-weight:800;font-size:26px;line-height:1.1;margin:0;text-transform:uppercase;letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--azul)}
h2{margin:0 0 14px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--azul)}
h3{margin:0 0 10px;font-size:15px;font-weight:700}
.card{background:var(--preto-2);border:1px solid var(--preto-3);border-radius:var(--r);padding:22px 24px;margin-bottom:20px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* topo */
header.top{display:flex;align-items:center;gap:18px;padding:12px 24px;border-bottom:1px solid var(--preto-3);
  background:rgba(20,20,20,.92);backdrop-filter:blur(6px);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:22px}
.brand span{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--suave)}
.client-pick{display:flex;align-items:center;gap:8px;padding-left:18px;border-left:1px solid var(--preto-3)}
.client-pick select{width:auto;min-width:180px;font-weight:700;background:var(--preto-2)}
.client-dot{width:10px;height:10px;border-radius:50%;flex:none}
nav.tabs{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav.tabs button{background:transparent;border:0;color:var(--suave);padding:8px 12px;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-radius:3px}
nav.tabs button:hover{color:var(--branco)}
nav.tabs button.on{color:var(--branco);background:var(--preto-3);box-shadow:inset 0 -2px 0 var(--azul)}
.usermenu{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--preto-2);border:1px solid var(--preto-4);border-radius:var(--r);
  min-width:200px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:30}
.menu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--branco);padding:8px 10px;border-radius:3px}
.menu button:hover{background:var(--preto-3)}
.menu .who{padding:8px 10px;border-bottom:1px solid var(--preto-3);margin-bottom:4px}

main.page{padding:22px 24px 60px;max-width:1600px;margin:0 auto}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.monthnav{display:flex;align-items:center;gap:4px}
.monthnav h1{min-width:250px;text-align:center}
.seg{display:inline-flex;border:1px solid var(--preto-4);border-radius:3px;overflow:hidden}
.seg button{background:transparent;border:0;color:var(--suave);padding:7px 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.seg button.on{background:var(--azul);color:var(--branco)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--suave)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* calendario */
.calwrap{display:grid;grid-template-columns:1fr 270px;gap:16px;align-items:start}
.calwrap.nobacklog{grid-template-columns:1fr}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--preto-3);border-radius:var(--r);overflow:hidden;background:var(--preto-3);gap:1px}
.cal .dow{background:var(--preto-2);padding:8px 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.day{background:var(--preto);min-height:132px;padding:6px 6px 8px;display:flex;flex-direction:column;gap:4px;position:relative;transition:background .12s}
.day.out{background:#101010}
.day.out .dnum{opacity:.35}
.day.today .dnum{background:var(--azul);color:var(--branco)}
.day.over{background:#16222c;outline:2px dashed var(--azul);outline-offset:-3px}
.day.hasevent{background:linear-gradient(180deg,rgba(224,168,79,.10),transparent 60px),var(--preto)}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:4px}
.dnum{font-weight:700;font-size:12px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:var(--cinza)}
.dadd{opacity:0;background:transparent;border:0;color:var(--suave);font-size:18px;line-height:1;padding:0 4px;border-radius:3px}
.day:hover .dadd{opacity:1}
.dadd:hover{color:var(--branco);background:var(--preto-3)}
.evt{font-size:11px;font-weight:700;padding:3px 6px;border-radius:3px;cursor:pointer;line-height:1.25;
  border-left:3px solid var(--evento);background:rgba(224,168,79,.14);color:#f1d19b}
.evt:hover{filter:brightness(1.2)}

.pc{background:var(--preto-2);border:1px solid var(--preto-3);border-left:3px solid var(--azul);border-radius:3px;padding:5px 7px;
  cursor:pointer;font-size:12px;line-height:1.3;user-select:none;transition:border-color .12s,transform .12s}
.pc[draggable=true]{cursor:grab}
.pc:hover{border-color:var(--preto-4);transform:translateY(-1px)}
.pc.dragging{opacity:.4}
.pc .l1{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.pc .l1 .time{color:var(--branco)}
.pc .t{font-weight:600;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pc .l3{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:10px;color:var(--suave)}
.plat{display:inline-grid;place-items:center;min-width:18px;height:15px;padding:0 3px;border-radius:2px;font-size:9px;font-weight:800;color:#fff}
.ap{display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border-radius:2px;font-size:9px;font-weight:800;letter-spacing:.05em;background:var(--preto-3);color:var(--suave)}
.ap.approved{background:rgba(63,163,122,.18);color:#6fd0a6}
.ap.changes{background:rgba(217,161,59,.18);color:#f0c46e}
.ap.pending{background:var(--preto-3);color:var(--apagado)}
.st{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:2px;background:var(--preto-3);color:var(--suave)}
.st.publicado{background:rgba(58,129,176,.25);color:#9cc7e4}
.st.pronto,.st.agendado{background:rgba(63,163,122,.18);color:#6fd0a6}
.st.producao{background:rgba(217,161,59,.16);color:#f0c46e}
.more{font-size:11px;color:var(--suave);padding:2px 4px;cursor:pointer}

.backlog{background:var(--preto-2);border:1px solid var(--preto-3);border-radius:var(--r);padding:14px;position:sticky;top:76px;
  max-height:calc(100vh - 100px);overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:200px}
.backlog.over{outline:2px dashed var(--azul);outline-offset:-3px}
.backlog h2{margin-bottom:4px}
.backlog .hint{font-size:12px;color:var(--apagado);margin-bottom:6px}
.pc .pdate{color:var(--azul);font-weight:700}

/* lista */
table.list{width:100%;border-collapse:collapse;background:var(--preto-2);border:1px solid var(--preto-3);border-radius:var(--r);overflow:hidden}
table.list th,table.list td{text-align:left;padding:10px;border-bottom:1px solid var(--preto-3);vertical-align:middle;font-size:13px}
table.list th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--suave);background:var(--preto);cursor:pointer;white-space:nowrap}
table.list tr.r{cursor:pointer}
table.list tr.r:hover td{background:var(--preto-3)}
table.list td.title{font-weight:600;max-width:320px}
.tablewrap{overflow-x:auto}
.thumbs{display:flex;gap:4px}
.thumbs img{width:34px;height:34px;object-fit:cover;border-radius:2px;border:1px solid var(--preto-4)}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:50;display:flex;justify-content:center;align-items:flex-start;
  padding:32px 16px;overflow:auto}
.modal{background:var(--preto-2);border:1px solid var(--preto-4);border-radius:6px;width:100%;max-width:1080px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal.sm{max-width:520px}
.mhead{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--preto-3);position:sticky;top:-32px;background:var(--preto-2);z-index:2;border-radius:6px 6px 0 0}
.mhead h3{margin:0;flex:1;font-size:16px}
.mbody{padding:20px 22px}
.mfoot{display:flex;gap:10px;align-items:center;padding:14px 22px;border-top:1px solid var(--preto-3);position:sticky;bottom:-32px;background:var(--preto-2);border-radius:0 0 6px 6px}
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px}
.section{border-top:1px solid var(--preto-3);padding-top:16px;margin-top:6px}
.approvals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.apbox{border:1px solid var(--preto-4);border-radius:var(--r);padding:12px}
.apbox .who{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.apbox .state{font-weight:700;margin:4px 0 2px}
.apbox .state.approved{color:#6fd0a6} .apbox .state.changes{color:#f0c46e} .apbox .state.pending{color:var(--suave)}
.apbox .btns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.comments{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto;margin-bottom:10px}
.cm{background:var(--preto);border:1px solid var(--preto-3);border-radius:3px;padding:8px 10px;font-size:13px}
.cm .meta{font-size:11px;color:var(--suave);margin-bottom:2px}
.cm.client{border-left:3px solid var(--warn)} .cm.agency{border-left:3px solid var(--azul)}
.arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-bottom:10px}
.art{position:relative;aspect-ratio:1;background:var(--preto);border:1px solid var(--preto-4);border-radius:3px;overflow:hidden}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art a.file{display:grid;place-items:center;height:100%;font-size:12px;color:var(--suave)}
.art .x{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.7);border:0;color:#fff;border-radius:2px;font-size:12px;padding:1px 6px}
.badge{display:inline-block;padding:2px 8px;border-radius:2px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--preto-3);color:var(--suave)}
.badge.blue{background:var(--azul);color:#fff}
.badge.amber{background:rgba(217,161,59,.2);color:#f0c46e}

/* quill */
.rte{border:1px solid var(--preto-4);border-radius:3px;background:var(--branco);color:var(--preto)}
.rte .ql-toolbar.ql-snow{border:0;border-bottom:1px solid var(--cinza);background:#f3f4f1;border-radius:3px 3px 0 0;font-family:"Open Sans",sans-serif}
.rte .ql-container.ql-snow{border:0;font-family:"Open Sans",sans-serif;font-size:16px}
.rte .ql-editor{min-height:170px}
.rte.readonly .ql-toolbar{display:none}
.ql-snow .ql-picker.ql-font{width:128px}
.ql-snow .ql-picker.ql-size{width:72px}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:attr(data-value)!important}
.ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before,.ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before{content:'Open Sans'!important}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:attr(data-value)!important}
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before,.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before{content:'16px'!important}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Montserrat"]{font-family:Montserrat}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Playfair Display"]{font-family:"Playfair Display"}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Bebas Neue"]{font-family:"Bebas Neue"}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Poppins"]{font-family:Poppins}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Roboto Mono"]{font-family:"Roboto Mono"}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .box{width:100%;max-width:380px}
.login img{height:34px;margin-bottom:26px}

/* configuracoes */
.settings{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}
.snav{display:flex;flex-direction:column;gap:2px;position:sticky;top:80px}
.snav button{text-align:left;background:transparent;border:0;color:var(--suave);padding:9px 12px;border-radius:3px;font-weight:600}
.snav button.on{background:var(--preto-3);color:var(--branco);box-shadow:inset 3px 0 0 var(--azul)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--preto-3);border:1px solid var(--preto-4);border-radius:3px;padding:5px 6px 5px 10px;font-size:13px}
.tag button{background:transparent;border:0;color:var(--suave);padding:0 4px}
.tag button:hover{color:var(--erro)}
.tag .mv{font-size:10px}
code.blk{display:block;background:var(--preto);border:1px solid var(--preto-4);padding:10px 12px;border-radius:3px;word-break:break-all;font-size:12px;color:#9cc7e4}
table.simple{width:100%;border-collapse:collapse}
table.simple th,table.simple td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--preto-3);font-size:13px}
table.simple th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--suave)}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--azul);color:#fff;padding:11px 18px;border-radius:3px;
  font-weight:600;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:90vw}
.toast.err{background:var(--erro)}
.empty{padding:40px;text-align:center;color:var(--suave)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:1100px){.calwrap{grid-template-columns:1fr}.backlog{position:static;max-height:none}.cols{grid-template-columns:1fr}}
@media (max-width:760px){
  header.top{padding:10px 16px;gap:10px}.client-pick{border:0;padding:0;width:100%}.client-pick select{flex:1}
  nav.tabs{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}
  main.page{padding:16px 16px 60px}.monthnav h1{min-width:0;font-size:20px}
  .cal{grid-template-columns:1fr}.cal .dow{display:none}.day{min-height:0}.day.out,.day.noitems{display:none}
  .grid2,.grid3,.approvals,.settings{grid-template-columns:1fr}.snav{position:static;flex-direction:row;overflow-x:auto}
  .overlay{padding:0}.modal{border-radius:0;min-height:100%}.mhead,.mfoot{top:0;bottom:0}
}

/* semanas com densidade */
.cal{grid-template-columns:30px repeat(7,minmax(0,1fr))}
.cal .dow.wk{padding:0}
.wkbtn{background:var(--preto-2);border:0;color:var(--apagado);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:6px;padding:10px 0;font-size:10px;font-weight:800;letter-spacing:.06em}
.wkbtn:hover{color:var(--branco);background:var(--preto-3)}
.wkbtn .ic{font-size:14px}
.wkbtn .lab{writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase}
.wkbtn.expanded{color:var(--azul)}
.day.d-compact{min-height:92px}
.pc.compact{padding:3px 6px;display:flex;align-items:center;gap:5px}
.pc.compact .t{margin:0;-webkit-line-clamp:1;font-size:11px;flex:1}
.pc.expanded{padding:8px 9px}
.pc.expanded .t{-webkit-line-clamp:unset;font-size:13px}
.pc .meta{display:grid;gap:3px;margin-top:6px;font-size:11px;color:var(--cinza)}
.pc .meta b{color:var(--suave);font-weight:700;font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.pc .copyprev{margin-top:6px;padding:6px 7px;background:var(--preto);border-radius:2px;font-size:11px;color:var(--cinza);
  white-space:pre-line;max-height:9.5em;overflow:hidden}
.pc .artprev{margin-top:6px;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;display:block}
.adot{width:8px;height:8px;border-radius:50%;background:var(--preto-4);flex:none}
.adot.approved{background:var(--ok)} .adot.changes{background:var(--warn)}
@media (max-width:760px){.cal{grid-template-columns:1fr}.wkbtn{display:none}}
@media (max-width:1180px){.brand span{display:none}nav.tabs button{padding:8px 8px;font-size:11px}.client-pick select{min-width:140px}}
.ap,.st{white-space:nowrap}
.pc .l3{flex-wrap:wrap}
.pc .l1 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:760px){.grid4{grid-template-columns:1fr 1fr}}