@font-face{font-family:"Open Sans";src:url(/fonts/OpenSans-Light.otf);font-weight:300;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/fonts/OpenSans-Regular.otf);font-weight:400;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/fonts/OpenSans-Semibold.otf);font-weight:600;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/fonts/OpenSans-Bold.otf);font-weight:700;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/fonts/OpenSans-ExtraBold.otf);font-weight:800;font-display:swap}

/* marca: preto #141414, off-white #F0F0F0, cinza #737373. As 4 cores de etapa são funcionais (desligáveis em "Etapas em cor"). */
:root{
  --bg:#ECECE9; --surface:#F8F8F6; --sunk:#E4E4E0; --line:#DCDCD7;
  --ink:#141414; --muted:#737373; --soft:#A3A3A0; --inv:#F0F0F0;
  --r:14px; --r-sm:9px; --gap:8px; --shadow:0 1px 2px rgba(20,20,20,.04),0 6px 20px rgba(20,20,20,.05);
  --e1:#9C88E8; --e1b:#E7E1FB; --e1t:#4B3A99;
  --e2:#EFB443; --e2b:#FBEBC4; --e2t:#7A5300;
  --e3:#EA8460; --e3b:#FADBCF; --e3t:#8A3415;
  --e4:#4AAE76; --e4b:#D3EDDD; --e4t:#1E6B3C;
  --e0:#A3A3A0; --e0b:#E4E4E0; --e0t:#737373;
  --late:#D2452F;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101010; --surface:#1A1A1A; --sunk:#232323; --line:#2C2C2C;
  --ink:#F0F0F0; --muted:#8C8C8C; --soft:#5C5C5C; --inv:#141414; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  --e1b:#2C2742; --e1t:#C9BCF7; --e2b:#3A3020; --e2t:#F5CF7E; --e3b:#3D2820; --e3t:#F4AE93; --e4b:#1E3327; --e4t:#93D9B0;
  --e0:#5C5C5C; --e0b:#232323; --e0t:#8C8C8C; --late:#F0735C;
}}
:root[data-theme="dark"]{
  --bg:#101010; --surface:#1A1A1A; --sunk:#232323; --line:#2C2C2C;
  --ink:#F0F0F0; --muted:#8C8C8C; --soft:#5C5C5C; --inv:#141414; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  --e1b:#2C2742; --e1t:#C9BCF7; --e2b:#3A3020; --e2t:#F5CF7E; --e3b:#3D2820; --e3t:#F4AE93; --e4b:#1E3327; --e4t:#93D9B0;
  --e0:#5C5C5C; --e0b:#232323; --e0t:#8C8C8C; --late:#F0735C;
}
body.pb{--e1:var(--soft); --e2:#B5B5B0; --e3:var(--muted); --e4:var(--ink); --e1b:var(--sunk); --e2b:var(--sunk); --e3b:var(--sunk); --e4b:var(--ink); --e1t:var(--muted); --e2t:var(--ink); --e3t:var(--ink); --e4t:var(--inv)}
/* logo: preto no claro, branco no escuro */
.ld{display:none}
:root[data-theme="dark"] .ll{display:none} :root[data-theme="dark"] .ld{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ll{display:none}:root:not([data-theme="light"]) .ld{display:block}}

*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:400 14px/1.5 "Open Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}
.caps{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.muted{color:var(--muted)}
.late{color:var(--late);font-weight:700}
.notice{background:var(--surface);border-radius:var(--r);padding:16px 20px;margin-bottom:var(--gap);color:var(--muted)}

/* estrutura */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
aside.side{position:sticky;top:0;height:100vh;padding:22px 16px 16px;display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--line);overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px}
.brand img{width:34px;height:34px}
.brand b{font-weight:800;font-size:11px;letter-spacing:.12em;line-height:1.3;text-transform:uppercase}
nav.menu{display:flex;flex-direction:column;gap:2px}
nav.menu button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:600;text-align:left}
nav.menu button svg{flex:none}
nav.menu button:hover{background:var(--sunk);color:var(--ink)}
nav.menu button[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
nav.menu .n{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted)}
.side h4{margin:0 0 8px;padding:0 12px;color:var(--soft)}
.pessoas{display:flex;flex-direction:column;gap:2px}
.pessoas button{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:10px;color:var(--muted);font-weight:600;text-align:left}
.pessoas button:hover{background:var(--sunk)}
.pessoas button[aria-pressed="true"]{color:var(--ink);background:var(--sunk)}
.side .pe{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.tog{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;color:var(--muted);font-size:13px;font-weight:600;width:100%}
.tog:hover{background:var(--sunk)}
.tog i{margin-left:auto;width:30px;height:18px;border-radius:999px;background:var(--line);position:relative;flex:none}
.tog i::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--surface);transition:transform .2s}
.tog[aria-pressed="true"] i{background:var(--ink)}
.tog[aria-pressed="true"] i::after{transform:translateX(12px)}
.ferr{display:flex;gap:14px;padding:8px 12px;flex-wrap:wrap}
.lnk{font-size:12px;font-weight:700;color:var(--muted);text-decoration:none}
.lnk:hover{color:var(--ink)}
.eu{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow);text-align:left;margin-top:6px}
.eu .tx{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.eu b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.net{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.net i{width:6px;height:6px;border-radius:50%;background:var(--e4)}
.net.off i{background:var(--late)}

.av{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--inv);display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.03em;flex:none}
.av.xs{width:20px;height:20px;font-size:8px}
.av.all,.av.nin{background:var(--sunk);color:var(--muted)}

main{min-width:0;padding:26px 36px 80px}
.topo{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.topo h1{margin:0;font-weight:800;font-size:26px;letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.topo .sub{color:var(--muted);font-weight:300;font-size:15px;width:100%;margin-top:-4px}
.topo .sp{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav{display:flex;gap:2px;align-items:center}
.icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:18px}
.icon:hover{background:var(--sunk);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--inv);border-radius:999px;padding:9px 18px;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.sm{padding:6px 12px;font-size:10px}
.btn.escuro{background:rgba(20,20,20,.6);color:#F0F0F0}
.btn.perigo{background:var(--late);color:#F0F0F0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--inv);box-shadow:none}
.busca{background:var(--surface);border:0;border-radius:999px;padding:8px 14px;width:200px;outline:none;box-shadow:inset 0 0 0 1px var(--line)}
.busca:focus{box-shadow:inset 0 0 0 2px var(--ink)}

.box{background:var(--surface);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.box>h3{margin:0 0 16px;display:flex;align-items:center;gap:10px}
.box>h3 .muted{font-weight:600;letter-spacing:0;text-transform:none;font-size:12px;margin-left:auto}

/* etapas */
.et{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;background:var(--b);color:var(--t)}
.et::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.e0{--c:var(--e0);--b:var(--e0b);--t:var(--e0t)}
.e1{--c:var(--e1);--b:var(--e1b);--t:var(--e1t)} .e2{--c:var(--e2);--b:var(--e2b);--t:var(--e2t)}
.e3{--c:var(--e3);--b:var(--e3b);--t:var(--e3t)} .e4{--c:var(--e4);--b:var(--e4b);--t:var(--e4t)}
body.pb .et.e1::before{background:none;box-shadow:inset 0 0 0 1.5px var(--soft)}
body.pb .et.e4::before{background:var(--inv)}
.et.atr{box-shadow:inset 0 0 0 1.5px var(--late)}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;width:100%;max-width:120px}
.passos i{height:4px;border-radius:999px;background:var(--line)}
.passos i.on{background:var(--c)}

.th{background:var(--sunk) center/cover no-repeat;display:grid;place-items:center;color:var(--soft);font-weight:800;font-size:9px;letter-spacing:.06em;flex:none;overflow:hidden}
.rede{display:inline-grid;place-items:center;min-width:24px;height:18px;padding:0 5px;border-radius:5px;font-size:9px;font-weight:800;letter-spacing:.06em;background:var(--sunk);color:var(--ink);flex:none}

/* HOJE */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.stat{background:var(--surface);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.stat b{font-weight:800;font-size:30px;line-height:1}
.stat .caps{color:var(--muted);font-size:10px}
.stat small{color:var(--muted);font-size:12px}
.stat.alerta b{color:var(--late)}
.hoje{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:var(--gap);align-items:start}
.coluna{display:flex;flex-direction:column;gap:var(--gap)}
.grupo{margin-bottom:22px}
.grupo:last-child{margin-bottom:0}
.grupo>.caps{display:block;margin:0 0 6px;color:var(--muted);font-size:10px}
.grupo>.caps.late{color:var(--late)}
.tarefa{display:grid;grid-template-columns:52px minmax(0,1fr) 180px;gap:14px;align-items:center;padding:10px;margin:0 -10px;border-radius:12px;text-align:left;width:calc(100% + 20px)}
.tarefa:hover{background:var(--sunk)}
.tarefa .th{width:52px;height:52px;border-radius:10px}
.tarefa .tt{font-weight:700;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tarefa .ln{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:4px;flex-wrap:wrap}
.tarefa .pz{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right}
.tarefa .pz small{font-size:12px;color:var(--muted)}
.mais{font-size:12px;color:var(--muted);text-align:center;padding:8px;width:100%}
.mais:hover{color:var(--ink)}
.vazio{color:var(--muted);font-size:13px;margin:0}
.sd{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sd:first-child{border-top:0;padding-top:0}
.sd .d{display:flex;flex-direction:column;line-height:1.15;align-items:flex-start}
.sd .d b{font-size:18px;font-weight:800;padding:0 2px}
.sd .d span{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.sd.hj .d b{color:var(--inv);background:var(--ink);border-radius:7px;padding:0 6px}
.sd ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sd li button{display:flex;gap:8px;align-items:center;width:100%;text-align:left;font-size:13px;padding:3px 0}
.sd li .tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd li.meu .tt{font-weight:700}
.sd .vz{font-size:12px;color:var(--soft);padding-top:6px}
.redes{display:flex;flex-direction:column;gap:12px}
.redes .r{display:grid;grid-template-columns:76px minmax(0,1fr) 24px;gap:10px;align-items:center;font-size:12px;text-align:right}
.redes .r .caps{text-align:left;font-size:10px}
.bar{height:8px;border-radius:999px;background:var(--sunk);display:flex;overflow:hidden}
.bar i{display:block;height:100%;background:var(--c)}
.legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--muted)}
.legenda span{display:flex;gap:6px;align-items:center}
.legenda span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
/* mix do mês */
.mix{display:flex;flex-direction:column;gap:8px}
.mix .bar{height:10px;position:relative;overflow:visible}
.mix .bar i:first-child{border-radius:999px 0 0 999px}
.mix .bar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.5}
.mix .leg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:12px;color:var(--muted)}
.mix .leg b{display:block;color:var(--ink);font-size:14px}
.mix .leg b.off{color:var(--late)}
.mes-f{display:flex;flex-direction:column;gap:12px}

/* CRONOGRAMA */
.gantt{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow-x:auto}
.gin{min-width:1100px}
.gr{display:grid;grid-template-columns:270px minmax(0,1fr)}
.gr .gl{padding:8px 16px;display:flex;gap:10px;align-items:center;min-width:0;border-right:1px solid var(--line);position:sticky;left:0;background:var(--surface);z-index:2}
.gr .gt{position:relative;min-height:46px;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:var(--dw) 100%}
.gcab{border-bottom:1px solid var(--line)}
.gcab .gt{display:grid;grid-template-columns:repeat(var(--nd),minmax(0,1fr));background:none}
.gcab .gt span{text-align:center;font-size:10px;font-weight:700;color:var(--muted);padding:10px 0 8px;line-height:1.3}
.gcab .gt span.fds{color:var(--soft)}
.gcab .gt span.hj b{background:var(--ink);color:var(--inv);border-radius:6px;padding:1px 4px}
.gcab .gl{color:var(--muted)}
.gseg{border-top:1px solid var(--line)}
.gseg .gl,.gseg .gt{background-color:var(--sunk)}
.gseg .gt{min-height:40px}
.gseg .gl b{font-weight:800;font-size:11px;letter-spacing:.12em}
.ritmo{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink)}
.gtask{cursor:pointer}
.gtask:hover .gl,.gtask:hover .gt{background-color:color-mix(in srgb,var(--sunk) 50%,var(--surface))}
.gtask .gl .th{width:30px;height:30px;border-radius:7px}
.gtask .gl .tx{min-width:0;flex:1}
.gtask .gl .tt{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.gtask .gl small{font-size:11px;color:var(--muted)}
.seg{position:absolute;top:14px;height:18px;background:var(--c);opacity:.3;border-radius:5px}
.seg.feito{opacity:.6}
.seg.agora{opacity:1;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--c)}
.seg.agora.atr{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--late)}
body.pb .seg.e1{background:none;box-shadow:inset 0 0 0 1.5px var(--muted);opacity:1}
body.pb .seg.e3{background:repeating-linear-gradient(45deg,var(--muted) 0 3px,transparent 3px 6px)}
.pub{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--e4);box-shadow:0 0 0 3px var(--surface);z-index:1}
.pub.pend{background:var(--surface);box-shadow:0 0 0 3px var(--surface),inset 0 0 0 2.5px var(--e4)}
.hjl{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--late);opacity:.6;z-index:1;pointer-events:none}

/* CALENDÁRIO */
.dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dias .wd{padding:0 4px 4px;color:var(--muted);font-size:10px}
.dia{background:var(--surface);border-radius:12px;min-height:120px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.dia.fora{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.dia .n{font-weight:700;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.dia.fora .n{color:var(--soft)}
.dia.hoje .n b{background:var(--ink);color:var(--inv);border-radius:6px;padding:1px 6px}
.dia .sdn{display:none}
.dia .add{opacity:0;width:22px;height:22px;border-radius:50%;color:var(--muted);font-size:15px;line-height:1}
.dia:hover .add{opacity:1}
.dia .add:hover{background:var(--sunk);color:var(--ink)}
.mini{display:flex;gap:8px;align-items:center;text-align:left;width:calc(100% + 8px);padding:5px 5px 5px 8px;margin:0 -4px;border-radius:8px;background:var(--b);position:relative;cursor:pointer}
.mini::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.mini .th{width:30px;height:36px;border-radius:6px}
.mini .tx{min-width:0;display:flex;flex-direction:column;gap:1px;flex:1}
.mini .tt{font-weight:700;font-size:12px;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini .meta{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t);display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.mini.outro{opacity:.35}
body.pb .mini{background:var(--sunk)} body.pb .mini .meta{color:var(--muted)}
.mesbaixo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--gap);margin-top:var(--gap)}

/* ETAPAS */
.cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);align-items:start}
.col{background:color-mix(in srgb,var(--b) 60%,transparent);border-radius:16px;padding:10px;min-height:120px}
body.pb .col{background:var(--sunk)}
.col h2{margin:0 0 2px;display:flex;align-items:center;gap:10px}
.col h2 .num{width:22px;height:22px;border-radius:50%;background:var(--c);color:#141414;display:grid;place-items:center;font-size:11px;font-weight:800}
body.pb .col h2 .num{color:var(--inv);background:var(--ink)}
.col h2 .c{margin-left:auto;color:var(--muted);font-weight:700;letter-spacing:0}
.col p{margin:0 0 12px 32px;font-size:12px;color:var(--muted)}
.lista{display:flex;flex-direction:column;gap:6px}
.card{background:var(--surface);border-radius:12px;overflow:hidden;text-align:left;width:100%;box-shadow:var(--shadow);display:flex;flex-direction:column;cursor:pointer}
.card .th{aspect-ratio:16/9;width:100%}
.card .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.card .tt{font-weight:700;font-size:14px;line-height:1.3}
.card .ft{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.card .ft .sp{margin-left:auto;width:70px}
.banco{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap)}
.dragging{opacity:.4}
.over{outline:2px dashed var(--ink);outline-offset:-2px}

/* EDITOR */
.veu{position:fixed;inset:0;background:rgba(20,20,20,.32);opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}
.painel{position:fixed;top:12px;right:12px;bottom:12px;width:min(540px,calc(100vw - 24px));background:var(--surface);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.25);transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s;z-index:21;display:flex;flex-direction:column;overflow:hidden;margin:0}
body.edit .veu{opacity:1;pointer-events:auto}
body.edit .painel{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.painel .img{aspect-ratio:16/9;max-height:34vh;background:var(--sunk) center/cover;position:relative;flex:none;display:grid;place-items:center;color:var(--soft);font-weight:800;letter-spacing:.12em;font-size:11px}
.painel .img .fechar{position:absolute;right:14px;top:14px;background:rgba(20,20,20,.55);color:#F0F0F0}
.painel .imgbtns{position:absolute;left:16px;bottom:16px;display:flex;gap:6px}
.painel .sc{overflow-y:auto;padding:22px 26px 26px;display:flex;flex-direction:column;gap:18px;flex:1}
.painel .titulo{font:800 19px/1.25 "Open Sans",sans-serif;border:0;background:none;width:100%;padding:0;outline:none;text-transform:uppercase;letter-spacing:.02em}
.code{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted);margin-top:6px;word-break:break-all;display:flex;gap:10px;align-items:baseline}
.code .lnk{font-size:10px;letter-spacing:0;text-transform:none}
.aviso{display:block;font-size:12px;color:var(--muted)}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stepper button{display:flex;flex-direction:column;gap:6px;text-align:left;padding:10px;border-radius:10px;background:var(--sunk)}
.stepper button .k{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.stepper button small{font-size:11px;color:var(--muted)}
.stepper button i{height:4px;border-radius:999px;background:var(--line)}
.stepper button.feito i{background:var(--c);opacity:.6}
.stepper button.feito .k{color:var(--ink)}
.stepper button[aria-pressed="true"]{background:var(--b)}
.stepper button[aria-pressed="true"] i{background:var(--c)}
.stepper button[aria-pressed="true"] .k,.stepper button[aria-pressed="true"] small{color:var(--t)}
.stepper.parado{opacity:.45}
.prox{background:var(--sunk);border-radius:12px;padding:12px 14px;font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.f input,.f select,.f textarea,.path input{background:var(--sunk);border:0;border-radius:var(--r-sm);padding:10px 12px;outline:none;width:100%;min-width:0}
.f textarea{min-height:84px;resize:vertical;line-height:1.5;font-weight:300}
.f input:focus,.f select:focus,.f textarea:focus,.path input:focus{box-shadow:0 0 0 2px var(--ink)}
.path{display:flex;gap:8px;align-items:center}
.switch{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;text-align:left}
.switch i{width:34px;height:20px;border-radius:999px;background:var(--line);position:relative;flex:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:transform .2s}
.switch[aria-pressed="true"] i{background:var(--ink)}
.switch[aria-pressed="true"] i::after{transform:translateX(14px)}
.switch .muted{font-weight:400;font-size:12px}
details{border-top:1px solid var(--line);padding-top:16px}
summary{cursor:pointer;list-style:none;display:flex;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-size:18px;color:var(--muted)}
details[open] summary::after{content:"–"}
details .in{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.pfpick{display:flex;flex-direction:column;gap:6px;background:var(--bg);border-radius:12px;padding:12px}
.pfres{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto}
.pfres button{display:flex;justify-content:space-between;gap:10px;text-align:left;padding:8px 10px;border-radius:8px;font-size:12px}
.pfres button:hover{background:var(--sunk)}
.pfres .k{font-weight:700}
.check{display:flex;flex-direction:column;gap:4px}
.check>div{display:flex;gap:10px;align-items:center;font-size:13px}
.check>div span{flex:1}
.check>div button{color:var(--muted);font-size:16px;width:24px}
.check input{accent-color:var(--ink);width:16px;height:16px}
.painel .rod{display:flex;gap:8px;padding:14px 26px;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.painel .rod .sp{flex:1}
.rodmsg{padding:0 26px 12px;font-size:12px;color:var(--muted)}
.rodmsg:empty{display:none}

/* diálogos */
dialog{border:0;border-radius:20px;background:var(--surface);color:var(--ink);padding:0;width:min(760px,calc(100vw - 32px));box-shadow:0 30px 80px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(20,20,20,.35)}
#whoDlg{width:min(400px,calc(100vw - 32px))}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 4px}
.mhead h2{margin:0}
.mbody{padding:16px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:10px 12px;max-height:60vh;overflow-y:auto}
.mbody.um{grid-template-columns:1fr}
.mnota{margin:0 24px 12px;font-size:12px}
.mfoot{display:flex;gap:12px;align-items:center;padding:14px 24px 20px;border-top:1px solid var(--line)}

/* entrada */
#gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:40;padding:16px}
.gate{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);padding:32px;width:min(360px,100%);display:flex;flex-direction:column;gap:14px;align-items:stretch}
.gate img{width:48px;height:48px;align-self:center}
.gate h1{text-align:center;margin:0 0 6px;font-size:12px}
#loginBox{display:flex;flex-direction:column;gap:12px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--inv);padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50;max-width:calc(100vw - 32px)}
.toast.on{opacity:1}

@media (max-width:1180px){.hoje{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{grid-template-columns:repeat(2,minmax(0,1fr))}.mesbaixo{grid-template-columns:1fr}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  aside.side{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;z-index:10;padding:6px 8px calc(6px + env(safe-area-inset-bottom));flex-direction:row;background:var(--surface);border:0;border-top:1px solid var(--line);overflow:visible}
  aside.side .brand,aside.side .quem,aside.side .pe{display:none}
  nav.menu{flex-direction:row;width:100%;justify-content:space-around}
  nav.menu button{flex-direction:column;gap:2px;font-size:10px;padding:6px 8px}
  nav.menu .n{display:none}
  main{padding:18px 16px 100px}
  .busca{width:100%}
  .tarefa{grid-template-columns:44px minmax(0,1fr)}.tarefa .th{width:44px;height:44px}.tarefa .pz{grid-column:2;align-items:flex-start;text-align:left}
  .dias{grid-template-columns:1fr}.dias .wd,.dia.fora,.dia.livre{display:none}.dia{min-height:0}.dia .sdn{display:inline}.dia .add{opacity:1}
  .cols{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}
  .mbody{grid-template-columns:1fr}
  .painel{top:auto;left:0;right:0;bottom:0;width:100%;height:94vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
}