/* Portal de backlogs Amplasoft — tema escuro, acento por projeto.
   Reaproveita o modelo visual de checklist do Arthur (reference.html). */
:root{
  --bg:#14181d; --panel:#1b2127; --panel-2:#222a32; --row:#1b2127; --row-hover:#232c35;
  --border:#2b343e; --border-soft:#232b34;
  --ink:#e9ecf0; --ink-dim:#97a2ad; --ink-faint:#6c7682;
  --accent:#e8824a; --accent-solid:#cc6633; --accent-weak:#3a2318;
  --ok:#36d39a; --ok-weak:#10271f;
  --warn:#f0b429; --warn-weak:#2c2410;
  --mut:#8aa0bd; --mut-weak:#1b2430;
  --shadow:0 1px 0 rgba(255,255,255,.02), 0 18px 40px -24px rgba(0,0,0,.7);
  color-scheme:dark;
  --maxw:1040px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--accent-solid) 10%, transparent), transparent 60%);
  transition:background-image .4s ease;
}
h1,h2,h3,.disp{font-family:"Archivo",system-ui,sans-serif;}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}
.hidden{display:none !important}

/* top bar */
header.top{position:sticky; top:0; z-index:20; background:rgba(20,24,29,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--border-soft)}
.top .wrap{display:flex; align-items:center; gap:14px; height:58px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Archivo"; font-weight:800; letter-spacing:.14em; font-size:15px; cursor:pointer; background:none; border:none; color:var(--ink); padding:0}
.brand .mk{width:26px; height:26px; border-radius:7px; background:linear-gradient(145deg,var(--accent),var(--accent-solid)); display:grid; place-items:center; color:#1a1109; font-weight:900; font-size:15px; font-family:"Archivo"}
.brand small{color:var(--ink-dim); font-weight:600; letter-spacing:.02em; font-family:"Hanken Grotesk"; text-transform:none; font-size:12.5px}
.top .sp{flex:1}
.toplink{color:var(--ink-dim); font-weight:600; font-size:13px; display:inline-flex; gap:7px; align-items:center; background:none; border:none; cursor:pointer}
.toplink:hover{color:var(--ink)}
.toplink svg{width:15px;height:15px}

/* login */
.login-shell{min-height:calc(100vh - 58px); display:grid; place-items:center; padding:24px}
.login-card{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:28px 26px; box-shadow:var(--shadow)}
.login-card h1{font-size:22px; margin:0 0 4px}
.login-card p.sub{margin:0 0 20px; color:var(--ink-dim); font-size:13.5px}
.field{margin-bottom:14px}
.field label{display:block; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-bottom:6px}
.field input{width:100%; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:11px 13px; color:var(--ink); font-size:15px; font-family:inherit}
.field input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent-solid)}
.btn-primary{width:100%; background:linear-gradient(145deg,var(--accent),var(--accent-solid)); color:#1a1109; border:none; border-radius:10px; padding:12px; font-weight:800; font-size:15px; font-family:"Archivo"; cursor:pointer; margin-top:6px}
.btn-primary:disabled{opacity:.6; cursor:default}
.msg{margin-top:14px; font-size:13px; min-height:18px}
.msg.err{color:#f98a8a} .msg.ok{color:var(--ok)}

button{font-family:inherit; cursor:pointer}

/* home: grupos e cards de projeto */
.home-hero{padding:30px 0 10px}
.eyebrow{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700}
.home-hero h1{margin:.3em 0 .15em; font-size:clamp(26px,5vw,38px); font-weight:900; letter-spacing:-.01em}
.home-hero p{margin:0; color:var(--ink-dim); max-width:60ch}
.grupo{margin:26px 0}
.grupo-h{display:flex; align-items:center; gap:10px; font-family:"Archivo"; font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px}
.grupo-h::after{content:""; flex:1; height:1px; background:var(--border-soft)}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.pcard{text-align:left; background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--c,#cc6633); border-radius:14px; padding:16px 18px; cursor:pointer; transition:background .12s, transform .12s, border-color .12s; display:flex; flex-direction:column; gap:8px; min-height:120px}
.pcard:hover{background:var(--panel-2); transform:translateY(-2px)}
.pcard .pt{font-family:"Archivo"; font-weight:800; font-size:16px; line-height:1.25}
.pcard .pd{color:var(--ink-dim); font-size:12.5px; line-height:1.45; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.pcard .pmeta{display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--ink-faint); font-weight:600}
.pcard .dot{width:9px; height:9px; border-radius:3px; background:var(--c,#cc6633)}
.pcard .pprog{font-variant-numeric:tabular-nums}

/* intro do backlog */
.hero{padding:26px 0 6px}
.hero h1{margin:.3em 0 .15em; font-size:clamp(24px,5vw,36px); font-weight:900; letter-spacing:-.01em; text-wrap:balance}
.hero p.lead{margin:0; color:var(--ink-dim); max-width:66ch; font-size:15.5px}

/* controls */
.controls{position:sticky; top:58px; z-index:15; background:var(--bg); padding:18px 0 10px; margin-top:12px}
.barwrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.progress{flex:1; min-width:200px}
.progress .meta{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-dim); margin-bottom:6px}
.progress .meta b{color:var(--ink); font-variant-numeric:tabular-nums}
.track{height:8px; background:var(--panel-2); border-radius:99px; overflow:hidden}
.track > span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent-solid),var(--accent)); border-radius:99px; transition:width .35s ease}
.btn{background:var(--panel); color:var(--ink); border:1px solid var(--border); border-radius:9px; padding:9px 14px; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:8px}
.btn:hover{background:var(--panel-2); border-color:#3a4551}
.btn svg{width:15px;height:15px}
.filters{display:none; gap:18px; flex-wrap:wrap; margin-top:14px; padding:14px; background:var(--panel); border:1px solid var(--border); border-radius:12px}
.filters.open{display:flex}
.fgroup{display:flex; flex-direction:column; gap:8px}
.fgroup .lab{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{border:1px solid var(--border); background:transparent; color:var(--ink-dim); border-radius:99px; padding:5px 12px; font-size:12.5px; font-weight:600}
.chip[aria-pressed="true"]{background:var(--accent-weak); border-color:var(--accent-solid); color:var(--accent)}

/* sections */
section.phase{margin:30px 0}
.phase-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:6px}
.badge{flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-family:"Archivo"; font-weight:900; font-size:18px; background:var(--panel-2); color:var(--ink); border:1px solid var(--border)}
.phase.done .badge{background:var(--ok-weak); color:var(--ok); border-color:#1d4b3b}
.phase.now .badge{background:linear-gradient(145deg,var(--accent),var(--accent-solid)); color:#1a1109; border:none}
.badge svg{width:20px;height:20px}
.phase-head .ttl{flex:1; min-width:0}
.phase-head h2{margin:0; font-size:21px; font-weight:800; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tag-now{font-family:"Hanken Grotesk"; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; background:var(--accent); color:#1a1109; padding:3px 8px; border-radius:6px; font-weight:800}
.tag-done{font-family:"Hanken Grotesk"; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; background:var(--ok-weak); color:var(--ok); padding:3px 8px; border-radius:6px; font-weight:800; border:1px solid #1d4b3b}
.phase-head p{margin:3px 0 0; color:var(--ink-dim); font-size:13.5px; max-width:70ch}
.phase-prog{flex:none; text-align:right; min-width:120px}
.phase-prog .num{font-family:"Archivo"; font-weight:800; font-size:15px; font-variant-numeric:tabular-nums}
.phase-prog .mini{height:5px; width:120px; background:var(--panel-2); border-radius:99px; overflow:hidden; margin-top:5px; margin-left:auto}
.phase-prog .mini>span{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .3s}
.phase.done .phase-prog .mini>span{background:var(--ok)}

/* table */
.tbl{margin-top:12px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--panel)}
.thead{display:grid; grid-template-columns:116px 1fr 120px minmax(0,1.5fr); gap:14px; padding:11px 16px; background:var(--panel-2); border-bottom:1px solid var(--border); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.row{display:grid; grid-template-columns:116px 1fr 120px minmax(0,1.5fr); gap:14px; padding:14px 16px; border-bottom:1px solid var(--border-soft); align-items:start; transition:background .12s}
.row:last-child{border-bottom:none}
.row:hover{background:var(--row-hover)}
.row.ignored{opacity:.46}
.row.ignored .name{text-decoration:line-through}
.c-ready{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.cbx{display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none}
.cbx input{position:absolute; opacity:0; width:0;height:0}
.box{width:22px;height:22px;border-radius:7px;border:2px solid #3a4551;background:transparent;display:grid;place-items:center;transition:all .15s}
.box svg{width:13px;height:13px;opacity:0;transform:scale(.6);transition:all .15s;color:#10140f}
.cbx input:checked + .box{background:var(--ok);border-color:var(--ok)}
.cbx input:checked + .box svg{opacity:1;transform:scale(1)}
.cbx input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}
.ign{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-faint);cursor:pointer}
.ign input{position:absolute;opacity:0;width:0;height:0}
.tog{width:30px;height:17px;border-radius:99px;background:var(--panel-2);border:1px solid var(--border);position:relative;transition:.15s;flex:none}
.tog::after{content:"";position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;background:var(--ink-faint);transition:.15s}
.ign input:checked + .tog{background:var(--warn-weak);border-color:var(--warn)}
.ign input:checked + .tog::after{left:14px;background:var(--warn)}
.name{font-weight:700;font-family:"Archivo";font-size:14.5px;line-height:1.3}
.code{color:var(--ink-faint);font-weight:600;font-size:11.5px;font-family:"Hanken Grotesk"}
.lvl{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:7px;white-space:nowrap}
.lvl::before{content:"";width:6px;height:6px;border-radius:50%}
.lvl.m{background:var(--ok-weak);color:var(--ok)} .lvl.m::before{background:var(--ok)}
.lvl.s{background:var(--warn-weak);color:var(--warn)} .lvl.s::before{background:var(--warn)}
.lvl.c{background:var(--mut-weak);color:var(--mut)} .lvl.c::before{background:var(--mut)}
.det{color:var(--ink-dim);font-size:13px;line-height:1.5}
.det .flag{color:var(--accent);font-weight:600}
.det code{background:var(--panel-2); padding:1px 5px; border-radius:5px; font-size:12px}

.saving{position:fixed; bottom:16px; right:16px; background:var(--panel-2); border:1px solid var(--border); color:var(--ink-dim); font-size:12px; padding:7px 12px; border-radius:9px; opacity:0; transition:opacity .2s; pointer-events:none}
.saving.show{opacity:1}

footer.ft{margin:40px 0 50px; padding-top:22px; border-top:1px solid var(--border-soft); text-align:center; color:var(--ink-faint); font-size:13px}
footer.ft a{color:var(--accent);font-weight:700}
.legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;font-size:12px;color:var(--ink-dim)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}

@media (max-width:760px){
  .thead{display:none}
  .row{grid-template-columns:1fr; gap:10px; padding:16px}
  .c-ready{flex-direction:row; align-items:center; justify-content:space-between}
  .phase-head{flex-wrap:wrap}
  .phase-prog{min-width:0; text-align:left; order:3; width:100%}
  .phase-prog .mini{margin-left:0}
  .row .lvl{justify-self:start}
  .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}