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

/* marca: preto #141414, off-white #F0F0F0, cinza #737373. Cores de etapa = funcionais; vermelho = só atraso. */
:root{
  --bg:#ECECE9; --surface:#F8F8F6; --sunk:#E4E4E0; --line:#DCDCD7;
  --ink:#141414; --muted:#737373; --soft:#A3A3A0; --inv:#F0F0F0;
  --r:14px; --r-sm:9px; --gap:8px; --pad:18px;
  --e1:#9C88E8; --e1b:#E7E1FB; --e1t:#4B3A99;
  --e2:#EFB443; --e2b:#FBEBC4; --e2t:#7A5300;
  --e3:#EA8460; --e3b:#FADBCF; --e3t:#8A3415;
  --e4:#4AAE76; --e4b:#D3EDDD; --e4t:#1E6B3C;
  --late:#D2452F; --lateb:#F8DDD8;
}
@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;
  --e1b:#2C2742; --e1t:#C9BCF7; --e2b:#3A3020; --e2t:#F5CF7E; --e3b:#3D2820; --e3t:#F4AE93; --e4b:#1E3327; --e4t:#93D9B0; --late:#F0735C; --lateb:#3D2420;
}}
:root[data-theme="dark"]{
  --bg:#101010; --surface:#1A1A1A; --sunk:#232323; --line:#2C2C2C; --ink:#F0F0F0; --muted:#8C8C8C; --soft:#5C5C5C; --inv:#141414;
  --e1b:#2C2742; --e1t:#C9BCF7; --e2b:#3A3020; --e2t:#F5CF7E; --e3b:#3D2820; --e3t:#F4AE93; --e4b:#1E3327; --e4t:#93D9B0; --late:#F0735C; --lateb:#3D2420;
}
*{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{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
.caps{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:11px;line-height:1.25}
.muted{color:var(--muted)}

.previa{background:var(--ink);color:var(--inv);display:flex;align-items:center;justify-content:center;gap:16px;padding:6px 16px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;position:sticky;top:0;z-index:20}
.previa button{border:1px solid currentColor;border-radius:99px;padding:3px 10px;font-size:10px;font-weight:800;letter-spacing:.12em}
.previa button[aria-pressed="true"]{background:var(--inv);color:var(--ink)}

.app{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
aside.side{position:sticky;top:0;height:100vh;padding:22px 14px;display:flex;flex-direction:column;gap:22px;border-right:1px solid var(--line);overflow:auto}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px}
.brand img{width:34px;height:34px}
.brand .ld{display:none}
:root[data-theme="dark"] .brand .ll{display:none}:root[data-theme="dark"] .brand .ld{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .ll{display:none}:root:not([data-theme="light"]) .brand .ld{display:block}}
.brand b{font-weight:800;font-size:11px;letter-spacing:.12em;line-height:1.3;text-transform:uppercase}
nav{display:flex;flex-direction:column;gap:2px}
nav button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:600;text-align:left}
nav button:hover{background:var(--sunk);color:var(--ink)}
nav button[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,20,20,.06)}
nav button .q{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted)}
nav button .q.late{color:var(--late)}
.papeis{display:flex;flex-direction:column;gap:8px;padding:0 8px;font-size:12px}
.papeis b{display:block;font-size:12px}
.papeis span{color:var(--muted);font-size:11px}
.side-nota{margin-top:auto;font-size:11px;color:var(--muted);padding:0 8px;line-height:1.5}

main{min-width:0;padding:24px 28px 48px;position:relative}
.pagina{max-width:1360px;margin:0 auto;position:relative}

.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s9{grid-column:span 9}.s12{grid-column:span 12}

.topo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.topo h1{margin:0;font-weight:300;font-size:40px;line-height:1;letter-spacing:-.01em}
.topo p{margin:6px 0 0;color:var(--muted);font-size:13px;max-width:640px}
.dia{text-align:right}
.dia b{display:block;font-weight:300;font-size:28px;line-height:1.1}
.dia span{font-size:12px;color:var(--muted)}
.filtros{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.pill{border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--muted);background:transparent}
.pill small{font-weight:400;opacity:.75}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--inv)}
.seg{display:inline-flex;background:var(--sunk);border-radius:99px;padding:3px;position:relative}
.seg button{padding:5px 14px;border-radius:99px;font-size:12px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,20,20,.08)}
.btn{background:var(--ink);color:var(--inv);border-radius:99px;padding:7px 16px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}

.bloco{background:var(--surface);border-radius:var(--r);padding:var(--pad);min-width:0;position:relative}
.bloco>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;min-height:20px}
.bloco>header .caps{color:var(--muted)}
.bloco>header button.lk{font-size:12px;font-weight:600;color:var(--muted)}
.bloco>header button.lk:hover{color:var(--ink)}
.bloco.escuro{background:var(--ink);color:var(--inv)}
.bloco.escuro>header .caps{color:var(--soft)}

.kpi .num{font-weight:300;font-size:44px;line-height:1;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px}
.kpi .num small{font-size:20px;color:var(--soft)}
.kpi .rod{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.selo{display:inline-block;border-radius:6px;padding:2px 7px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--sunk);color:var(--ink);white-space:nowrap}
.selo.ok{background:var(--e4b);color:var(--e4t)}.selo.alerta{background:var(--lateb);color:var(--late)}.selo.atencao{background:var(--e2b);color:var(--e2t)}
.barra{height:4px;border-radius:2px;background:var(--sunk);overflow:hidden;margin-top:12px}
.barra i{display:block;height:100%;background:var(--ink)}
.checks{display:flex;gap:10px;flex-wrap:wrap}
.checks span{font-size:11px;font-weight:700}
.checks span.nao{color:var(--soft)}
.aneis{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.anel{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.2;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-align:center;width:56px}
.anel svg{display:block}
.anel b{font-weight:600;font-size:12px;color:var(--ink);letter-spacing:0}

/* etiquetas das redes */
.tags{display:flex;gap:4px;flex-wrap:wrap}
.tag{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--muted);background:var(--surface)}
.tipo{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* pilha de atrasados */
.pilha{position:relative;height:380px;margin-top:4px}
.carta{position:absolute;inset:0 0 auto 0;height:350px;background:var(--surface);color:var(--ink);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
.carta.c1{transform:translateY(12px) scale(.95);opacity:.55}
.carta.c2{transform:translateY(24px) scale(.9);opacity:.3}
.carta.sai{transform:translateX(-110%) rotate(-6deg);opacity:0}
.carta .th{height:160px;border-radius:8px;background:var(--sunk) center/cover no-repeat;flex:none}
.carta h3{margin:0;font-size:15px;font-weight:700;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.carta .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pilha-pe{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--soft)}
.pilha-pe .acoes{display:flex;gap:6px}
.pilha-pe button{border:1px solid #3a3a3a;border-radius:99px;padding:5px 12px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--inv)}
.pilha-pe button.prim{background:var(--inv);color:var(--ink);border-color:var(--inv)}

.tempo{position:relative;padding-top:4px}
.tempo .tr{display:flex;gap:2px;height:6px}
.tempo .tr i{border-radius:3px;background:var(--sunk)}
.tempo .tr i.feito{background:var(--soft)}
.tempo .tr i.agora{background:var(--late)}
.tempo .tr i.agora.nofim{background:var(--ink)}
.tempo .hoje{position:absolute;top:0;width:2px;height:14px;background:var(--late);border-radius:1px;transform:translateX(-1px)}
.tempo .lb{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:6px;font-weight:600;gap:6px}
.tempo .lb b{color:var(--late);font-weight:800}

.tarefas{display:flex;flex-direction:column}
.tarefa{display:grid;grid-template-columns:64px minmax(0,1fr) auto 18px;gap:12px;align-items:center;padding:8px 4px;border-top:1px solid var(--line);text-align:left;width:100%}
.tarefa:first-child{border-top:0}
.tarefa:hover{background:var(--bg);border-radius:8px}
.tarefa .mini{width:64px;height:64px;border-radius:8px;background:var(--sunk) center/cover}
.tarefa b{display:block;font-weight:600;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tarefa small{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted);margin-top:2px}
.tarefa .quando{font-size:11px;font-weight:700;text-align:right;white-space:nowrap}
.tarefa .quando small{display:block;font-weight:600}
.tarefa .seta{color:var(--soft)}
.etq{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.etq:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cor,var(--soft))}
.vazio{padding:20px 4px;color:var(--muted);font-size:13px;margin:0}
.vazio b{color:var(--ink)}

/* mini calendário */
.cal-mini table{width:100%;border-collapse:collapse;table-layout:fixed}
.cal-mini th{font-size:10px;font-weight:800;color:var(--soft);padding:4px 0}
.cal-mini td{text-align:center;padding:2px 0}
.cal-mini td button{width:32px;height:38px;border-radius:9px;font-size:12px;font-weight:600;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cal-mini td button:hover{background:var(--sunk)}
.cal-mini td.fora button{color:var(--soft)}
.cal-mini td.hoje button{background:var(--ink);color:var(--inv)}
.cal-mini td.sel button{outline:1.5px solid var(--ink)}
.cal-mini .pts{display:flex;gap:2px;height:4px}
.cal-mini .pts i{width:4px;height:4px;border-radius:50%;background:var(--cor)}
.dia-lista{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.dia-lista button{display:flex;gap:8px;align-items:center;text-align:left;font-size:12px;min-width:0}
.dia-lista button>span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dia-lista .mini{flex:none;width:40px;height:40px;border-radius:6px;background:var(--sunk) center/cover}

/* plano da semana: os slots combinados com a equipe; vazio = tracejado */
.plano{display:grid;grid-template-columns:84px repeat(4,minmax(0,1fr));gap:var(--gap)}
.plano .rot{font-size:11px;font-weight:700;color:var(--muted);display:flex;align-items:center}
.plano .cab{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding-bottom:2px}
.plano .cab span{display:block;color:var(--muted);font-size:11px;letter-spacing:0;text-transform:none;font-weight:600}
.slot{border-radius:10px;min-height:178px;background:var(--bg);padding:8px;display:flex;flex-direction:column;gap:6px;text-align:left;min-width:0}
.slot.livre{background:transparent;border:1.5px dashed var(--line);align-items:center;justify-content:center;color:var(--soft);font-size:11px;font-weight:700;text-align:center}
.slot.livre.falta{border-color:var(--late);color:var(--late)}
.slot .ft{height:112px;border-radius:6px;background:var(--sunk) center/cover;flex:none}
.slot b{font-size:11px;font-weight:600;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.slot .linha{display:flex;justify-content:space-between;align-items:center;gap:4px;flex-wrap:wrap}
.rolar{overflow-x:auto;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.rolar .plano{min-width:620px}

.ativ{display:flex;flex-direction:column;gap:10px}
.ativ div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center}
.ativ .mini{width:64px;height:64px;border-radius:8px;background:var(--sunk) center/cover}
.ativ b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ativ small{font-size:11px;color:var(--muted)}

/* segmentos do portfólio */
.segs{display:flex;flex-direction:column;gap:6px}
.segs div{display:grid;grid-template-columns:150px minmax(0,1fr) 28px;gap:10px;align-items:center;font-size:12px}
.segs div i{display:block;height:8px;border-radius:4px;background:var(--ink)}
.segs div.zero{color:var(--soft)}
.segs div.zero i{background:transparent;border:1px dashed var(--line);width:100% !important}
.segs div b{font-weight:700;text-align:right}

/* MÊS — grade */
.mes-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap)}
.mes-grade .dsem{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;padding:0 4px}
.mdia{background:var(--surface);border-radius:10px;min-height:150px;padding:8px;display:flex;flex-direction:column;gap:5px;min-width:0;border:1px solid var(--line)}
.mdia.fora{background:transparent;opacity:.5}
.mdia .n{font-size:12px;font-weight:700}
.mdia.hoje .n span{background:var(--ink);color:var(--inv);border-radius:6px;padding:0 6px}
.tile{display:block;border-radius:7px;overflow:hidden;background:var(--sunk);text-align:left;position:relative;width:100%}
.tile i{display:block;height:76px;background:var(--sunk) center/cover;position:relative}
.tile .tags{position:absolute;left:4px;bottom:4px;right:4px}
.tile .tag{background:rgba(20,20,20,.78);color:#F0F0F0;border-color:transparent}
.tile span.leg2{display:block;padding:3px 6px 4px;background:var(--cb);color:var(--ct)}
.tile span.leg2 em{display:block;font-style:normal;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.tile span.leg2 strong{display:block;font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.late{box-shadow:0 0 0 1.5px var(--late)}
.tile[draggable]{cursor:grab}.tile.arrastando{opacity:.35}
.mdia.alvo{outline:2px dashed var(--ink);outline-offset:-2px;background:var(--bg)}
.mais{font-size:10px;font-weight:700;color:var(--muted);padding-left:4px}

/* MÊS — linha do tempo */
.tl{position:relative;overflow-x:auto}
.tl-in{min-width:900px;position:relative}
.tl-dias{display:grid;margin-left:120px;font-size:10px;font-weight:700;color:var(--soft);text-align:center}
.tl-dias span.fds{color:var(--line)}
.tl-rede{display:grid;grid-template-columns:120px minmax(0,1fr);border-top:1px solid var(--line);padding:8px 0}
.tl-rede>b{font-size:11px;font-weight:800;letter-spacing:.1em;padding-top:6px}
.tl-rede>b small{display:block;font-weight:600;color:var(--muted);letter-spacing:0;font-size:11px}
.tl-faixas{position:relative}
.tl-bar{position:absolute;height:30px;min-width:32px;border-radius:5px;display:flex;overflow:hidden;font-size:10px;font-weight:700;align-items:center;cursor:pointer}
.tl-bar i{height:100%;flex:none}
.tl-bar em{position:absolute;left:0;top:0;width:30px;height:30px;background:var(--sunk) center/cover;z-index:1}
.tl-bar span{position:absolute;left:36px;right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.tl-bar.late{outline:1.5px solid var(--late)}
.tl-hoje{position:absolute;top:0;bottom:0;width:2px;background:var(--late);z-index:2;pointer-events:none}
.tl-hoje:before{content:"hoje";position:absolute;top:-16px;left:-12px;font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--late);text-transform:uppercase}
.leg{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:8px}

/* FICHA */
.veu{position:fixed;inset:0;background:rgba(20,20,20,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
.ficha{position:fixed;top:0;right:0;bottom:0;width:min(540px,100vw);background:var(--surface);z-index:31;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
body.aberta .veu{opacity:1;pointer-events:auto} body.aberta .ficha{transform:none}
.ficha .img{height:300px;background:var(--sunk) center/cover;position:relative;flex:none}
.ficha .img button{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--surface);font-size:14px}
.ficha .img .tags{position:absolute;left:14px;bottom:14px}
.ficha .img .tag{background:rgba(20,20,20,.78);color:#F0F0F0;border-color:transparent;font-size:10px;padding:2px 7px}
.ficha .sc{overflow:auto;padding:20px 22px 28px;display:flex;flex-direction:column;gap:18px}
.ficha .sc>div{position:relative}
.ficha h2{margin:0;font-weight:300;font-size:26px;line-height:1.05}
.ficha .code{font-size:11px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;margin-top:6px;word-break:break-all}
.props{display:grid;grid-template-columns:24px 110px minmax(0,1fr);align-items:center;font-size:13px}
.props>*{padding:7px 0;border-top:1px solid var(--line)}
.props>:nth-child(-n+3){border-top:0}
.props svg{color:var(--soft)}
.props .k{color:var(--muted);font-size:12px}
.props .v{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etapas4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.etapas4 div{font-size:10px;font-weight:700;color:var(--muted)}
.etapas4 div i{display:block;height:6px;border-radius:3px;background:var(--sunk);margin-bottom:6px}
.etapas4 div.feito i{background:var(--soft)}
.etapas4 div.agora i{background:var(--cor)}
.etapas4 div.agora{color:var(--ink)}
.etapas4 div b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.etapas4 div small{display:block;font-weight:600}
.pacote{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px}
.pacote>*{border-radius:8px;overflow:hidden;background:var(--bg);text-align:left;min-width:0}
.pacote i{display:block;height:64px;background:var(--sunk) center/cover}
.pacote span{display:block;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 6px}
.pacote .falta{border:1.5px dashed var(--line);background:transparent;color:var(--soft);display:flex;flex-direction:column;justify-content:center;min-height:86px}
.pacote .falta span{text-align:center}
.cams{display:flex;flex-direction:column;gap:6px}
.cams div{background:var(--bg);border-radius:8px;padding:8px 10px;font-size:11px}
.cams div b{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cams code{font-size:11px;word-break:break-all}
.ckl label{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);cursor:pointer}
.ckl label:first-child{border-top:0}
.ckl label span{font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ckl label small{margin-left:auto;font-size:10px;font-weight:700;color:var(--soft)}
.ckl input{width:16px;height:16px;accent-color:var(--ink)}
.pauta{width:100%;min-height:84px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--bg);font-size:13px;line-height:1.5;resize:vertical;margin-top:6px}
.props select{font-weight:600;font-size:13px;border:1px solid var(--line);border-radius:7px;padding:3px 8px;background:var(--bg);max-width:100%}
.fluxo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bg);border-radius:10px;padding:10px 12px;font-size:12px}
.fluxo .btn{padding:7px 14px}
.fluxo .aviso{color:var(--late);font-weight:600}
.sub{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:4px 0 2px}
.quem{font-size:11px;color:var(--muted);font-weight:600}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--inv);border-radius:99px;padding:8px 16px;font-size:12px;font-weight:700;opacity:0;transition:.2s;z-index:40;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}

/* NOTAS DE DIAGRAMAÇÃO */
.grade-sobre{display:none;position:absolute;inset:0;pointer-events:none;z-index:5;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.grade-sobre i{background:rgba(210,69,47,.07);border-left:1px solid rgba(210,69,47,.25);border-right:1px solid rgba(210,69,47,.25)}
body.notas .grade-sobre{display:grid}
.n-badge{display:none;position:absolute;top:-8px;right:-8px;z-index:6;width:22px;height:22px;border-radius:50%;background:var(--late);color:#fff;font-size:11px;font-weight:800;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--bg)}
body.notas .n-badge{display:flex}
.legenda{display:none;position:fixed;left:16px;bottom:16px;width:340px;max-height:60vh;overflow:auto;background:var(--ink);color:var(--inv);border-radius:var(--r);padding:16px;z-index:25;font-size:12px;line-height:1.5}
body.notas .legenda{display:block}
.legenda h4{margin:0 0 10px}
.legenda ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.legenda li b{display:block}
.legenda li span{color:var(--soft)}

/* faixa enxuta: plano + segmentos numa linha só, o cronograma fica com a tela */
.faixa{display:flex;flex-direction:column;gap:10px;padding:12px var(--pad)}
.faixa .lin{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.faixa .lin>.caps{color:var(--muted);width:92px;flex:none}
.mt{display:inline-flex;flex-direction:column;gap:3px;padding:5px 9px;border-radius:8px;background:var(--bg);min-width:84px}
.mt b{font-size:13px;font-weight:700;line-height:1}
.mt b small{font-weight:400;color:var(--soft)}
.mt span{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.1}
.mt i{display:block;height:3px;border-radius:2px;background:var(--sunk);overflow:hidden}
.mt i em{display:block;height:100%;background:var(--ink)}
.mt.ok i em{background:var(--e4)}.mt.falta b{color:var(--late)}.mt.falta i{background:var(--lateb)}
.sg{font-size:11px;font-weight:600;padding:4px 9px;border-radius:99px;background:var(--bg);white-space:nowrap}
.sg b{font-weight:800;margin-left:4px}
.sg.zero{background:transparent;border:1px dashed var(--line);color:var(--soft)}
.bloco>header .filtros{margin:0}
.tile .tags{flex-wrap:nowrap;overflow:hidden}

/* ETAPAS: kanban com miniatura grande */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:start}
.col{background:var(--surface);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.col>header{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 4px}
.col>header .etq{font-size:11px}
.col>header span.n{font-size:12px;font-weight:700;color:var(--muted)}
.kc{background:var(--bg);border-radius:10px;overflow:hidden;text-align:left;display:block;width:100%}
.kc.late{box-shadow:0 0 0 1.5px var(--late)}
.kc i.ft{display:block;height:130px;background:var(--sunk) center/cover;position:relative}
.kc i.ft .tags{position:absolute;left:6px;bottom:6px;right:6px;flex-wrap:nowrap;overflow:hidden}
.kc i.ft .tag{background:rgba(20,20,20,.78);color:#F0F0F0;border-color:transparent}
.kc .tx{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px}
.kc .tx b{font-size:12px;font-weight:600;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kc .tx .rod2{display:flex;justify-content:space-between;gap:6px;font-size:10px;font-weight:700;color:var(--muted)}
.kc .tx .rod2 .late{color:var(--late)}
.col .mais2{font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding:6px}

/* BANCO e NO ESTÚDIO: grade de miniaturas */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--gap)}
.gc{background:var(--surface);border-radius:12px;overflow:hidden;text-align:left;display:flex;flex-direction:column;min-width:0}
.gc i.ft{display:block;aspect-ratio:4/5;background:var(--sunk) center/cover;position:relative}
.gc i.ft .tags,.gc i.ft .flag{position:absolute;left:8px;bottom:8px;right:8px}
.gc i.ft .tag{background:rgba(20,20,20,.78);color:#F0F0F0;border-color:transparent}
.gc i.ft .flag{bottom:auto;top:8px;right:auto}
.gc .tx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.gc .tx b{font-size:13px;font-weight:600;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gc .tx small{font-size:11px;color:var(--muted)}
.gc .acoes2{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.gc .acoes2 button{border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.gc .acoes2 button.prim{background:var(--ink);color:var(--inv);border-color:var(--ink)}
.gc.encerrado i.ft{filter:saturate(.85)}
.secao{display:flex;align-items:baseline;justify-content:space-between;margin:18px 2px 10px}
.secao h2{margin:0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.secao span{font-size:12px;color:var(--muted)}
.pre{border:1.5px dashed var(--line);border-radius:var(--r);padding:18px;color:var(--muted);font-size:13px}
.pre b{color:var(--ink)}
.mdia .n em{display:none;font-style:normal;font-weight:600;color:var(--muted);margin-left:6px}
/* responsivo: até 1180 os blocos viram metades (dense preenche os buracos); até 1024 o menu vai para o topo; até 640 tudo em uma coluna */
@media (max-width:1180px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}.g12{grid-auto-flow:row dense}.s3,.s4,.s5{grid-column:span 6}.s6,.s7,.s8,.s9{grid-column:span 12}
  .tarefas .tarefa{grid-template-columns:56px minmax(0,1fr) 14px;row-gap:0}.tarefas .tarefa .mini{width:56px;height:56px;grid-row:1/3}.tarefas .tarefa .quando{grid-column:2;grid-row:2;text-align:left;font-size:11px}.tarefas .tarefa .quando small{display:inline;margin-left:6px}.tarefas .tarefa .seta{grid-column:3;grid-row:1/3}}
@media (max-width:1024px){.app{grid-template-columns:1fr}.previa .txt{display:none}
  aside.side{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;gap:16px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line);background:var(--bg);z-index:15;overflow-x:auto}
  .brand b,.side-nota{display:none}.brand{padding:0}.brand img{width:30px;height:30px}
  nav{flex-direction:row;gap:4px}nav button{padding:7px 12px;white-space:nowrap}
  main{padding:20px 16px 40px}}
@media (max-width:640px){.g12>*{grid-column:span 12 !important}
  .kanban{grid-template-columns:1fr}.galeria{grid-template-columns:repeat(2,minmax(0,1fr))}.faixa .lin>.caps{width:100%}
  .topo h1{font-size:32px}.dia b{font-size:22px}
  .kpi .num{font-size:36px}
  .pilha{height:350px}.carta{height:320px}.carta .th{height:140px}
  .filtros{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px}.pill{white-space:nowrap}
  /* grade do mês vira agenda: só os dias com post, um embaixo do outro */
  .mes-grade{grid-template-columns:1fr}.mes-grade .dsem,.mdia.vazio,.mdia.fora{display:none}
  .mdia{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.mdia .n{grid-column:1/-1}.mdia .n em{display:inline}
  .segs div{grid-template-columns:110px minmax(0,1fr) 24px}
  .props{grid-template-columns:22px 90px minmax(0,1fr)}
  .pacote{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Quadro real: lateral, login, diálogos e edição (vindos da v3) ---------- */
.notice{background:var(--surface);border-radius:var(--r);padding:16px 20px;margin-bottom:var(--gap);color:var(--muted)}
.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)}
.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.sm{padding:6px 12px;font-size:10px}
.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}
.aviso{display:block;font-size:12px;color:var(--muted)}
.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)}
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)}
#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}
dialog.plan{border:0;border-radius:20px;background:var(--surface);color:var(--ink);padding:0;width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 40px);box-shadow:0 30px 80px rgba(0,0,0,.25)}
dialog.plan::backdrop{background:rgba(20,20,20,.35)}
.plan form{display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.plan .hd{display:flex;align-items:center;gap:12px;padding:20px 24px 8px}
.plan .hd h2{margin:0}
.plan .cp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:var(--gap);padding:12px 24px;overflow:auto;flex:1}
.plan textarea{width:100%;min-height:220px;background:var(--sunk);border:0;border-radius:12px;padding:12px;font:500 12px/1.6 ui-monospace,Menlo,monospace;outline:none;resize:vertical}
.plan .dica{font-size:12px;color:var(--muted);margin:8px 0 0}
.plan .sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.plan table{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:12px}
.plan th{text-align:left;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 6px}
.plan td{background:var(--sunk);padding:6px;vertical-align:middle}
.plan td:first-child{border-radius:9px 0 0 9px}.plan td:last-child{border-radius:0 9px 9px 0}
.plan td select,.plan td input{background:var(--surface);border:0;border-radius:6px;padding:5px 6px;font-size:12px;width:100%;min-width:92px}
.plan td input[type=date]{min-width:128px}
.plan td b{display:block;font-size:12px;text-transform:uppercase}
.plan td small{display:block;font:500 10px/1.3 ui-monospace,Menlo,monospace;color:var(--muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
.plan .ft{display:flex;gap:10px;align-items:center;padding:14px 24px 20px;border-top:1px solid var(--line)}
.plan .ft .muted{font-size:12px}
[hidden]{display:none !important}
.side-pe{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.side-pe .ferr{display:flex;gap:12px;flex-wrap:wrap;padding:0 8px}
.lnk[aria-pressed="true"]{color:var(--ink)}
.notice{margin-bottom:var(--gap)}
.fmais{border-top:1px solid var(--line);padding-top:12px}
.fmais summary{cursor:pointer;list-style:none}.fmais summary::-webkit-details-marker{display:none}
.fmais summary::after{content:' ›'}.fmais[open] summary::after{content:' ⌄'}
.edit2{display:grid;grid-template-columns:90px minmax(0,1fr);gap:6px 10px;align-items:center;font-size:12px;margin-top:10px}
.edit2 span{color:var(--muted)}
.edit2 input,.edit2 select,.props input{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:7px;padding:4px 8px;background:var(--bg);width:100%;min-width:0}
.props input[type=date]{width:auto;font-weight:600}
.fbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;align-items:center}
.fbtns label{cursor:pointer}
.ficha .rodape{font-size:11px;color:var(--muted);margin:0}
@media (max-width:1024px){.side-pe{margin:0 0 0 auto;flex-direction:row;align-items:center}.side-pe .ferr,.eu .tx{display:none}.eu{padding:2px;box-shadow:none;background:none;margin:0}}
@media (max-width:820px){.plan .cp{grid-template-columns:1fr}.mbody{grid-template-columns:1fr}}

/* X no card do mês (aparece no hover; no celular fica sempre visível) */
.tdel{position:absolute;top:4px;right:4px;z-index:2;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:rgba(20,20,20,.78);color:#F0F0F0;font-size:10px;font-weight:800;line-height:20px;text-align:center;letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity .15s;cursor:pointer}
.tile:hover .tdel,.tile:focus-visible .tdel,.tdel.conf{opacity:1}
.tdel.conf{background:var(--late)}
@media (hover:none){.tdel{opacity:.85}}
/* botão de tema */
.temaBtn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--sunk);color:var(--ink);font:600 12px "Open Sans",sans-serif;text-align:left}
.temaBtn .ico{font-size:14px;width:16px;text-align:center}
@media (max-width:1024px){.temaBtn{padding:6px 8px}.temaBtn .tt{display:none}}
/* login: logo + LET'S MAKE IT REAL (Open Sans + Tenez Bold Italic ~8% maior) */
.gate img{width:72px;height:72px}
.slogan{margin:6px 0 2px;text-align:center;text-transform:uppercase;line-height:1;color:var(--ink)}
.slogan .s{display:block;font:400 26px/1.05 "Open Sans",sans-serif;letter-spacing:.02em}
.slogan .t{display:block;font:italic 700 28px/1.05 "Tenez","Open Sans",sans-serif}
/* login: um logo só; no escuro vira o negativo */
.gate .glogo{width:88px;height:88px;align-self:center}
:root[data-theme="dark"] .gate .glogo{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gate .glogo{filter:invert(1)}}
.slogan .s{font-size:30px}.slogan .t{font-size:32.5px;margin-top:2px}