/* Tema: troque a paleta SO aqui (variaveis). Paleta oficial Atendeflex (logo B): #663CD6 #5768ED #9476EB #211891 #161129 */
:root{--bg:#f5f3fc;--surface:#fff;--text:#2B3038;--muted:#6b6f7e;--line:#e6e2f3;
--side-bg:#161129;--side-text:#cfc8ee;--side-on-bg:#9476eb30;--side-on-text:#fff;
--primary:#663CD6;--primary-text:#fff;--accent:#5768ED;--lavender:#9476EB;--deep:#211891;--in:#ece6fb;--out:#dcdffb;--note:#fff1cc;--radius:10px}
*{box-sizing:border-box}body{font-family:system-ui,Segoe UI,sans-serif;margin:0;background:var(--bg);color:var(--text);display:block}
aside{background:var(--side-bg);color:var(--side-text);position:fixed;inset:0 auto 0 0;width:220px;padding:16px 10px;display:none;flex-direction:column}
body.auth aside{display:flex}body.auth #content{margin-left:220px}
.brand{font-weight:800;font-size:20px;color:var(--primary);padding:4px 8px 16px}aside .brand{color:#fff}
#nav{display:flex;flex-direction:column;gap:2px}#nav button{background:none;border:0;color:var(--side-text);text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;font:inherit;display:flex;gap:10px}
#nav button span{width:18px;text-align:center;color:var(--lavender)}#nav button.on{background:var(--side-on-bg);color:var(--side-on-text)}#nav button.out{margin-top:auto}
main{padding:20px;max-width:1100px;margin:auto}h2{margin:0 0 14px}
input,select,textarea{padding:9px;margin:3px;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text)}
button{padding:9px 14px;margin:3px;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}
button.pri{background:var(--primary);color:var(--primary-text);border-color:var(--primary)}
.card,.panel,.kpi{background:var(--surface);border-radius:var(--radius);padding:12px 14px;margin:6px 0;box-shadow:0 1px 2px #0001}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:12px}
.kpi small{color:var(--muted);display:block}.kpi b{font-size:30px;color:var(--deep)}.kpi em{display:block;color:var(--muted);font-size:12px;font-style:normal}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:12px}.panel h4{margin:0 0 10px}
.bars{display:flex;gap:10px;align-items:flex-end;height:170px}.bar{flex:1;text-align:center}.col{height:140px;display:flex;align-items:flex-end;gap:3px;justify-content:center}
.col i{display:block;width:40%;min-height:2px;background:var(--primary);border-radius:4px 4px 0 0}.col i.o,.leg i.o{background:var(--accent)}
.leg i{display:inline-block;width:10px;height:10px;background:var(--primary);border-radius:3px;margin:0 4px 0 12px}.bar small,.mut{color:var(--muted)}
.row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.msg{max-width:75%;padding:7px 11px;border-radius:12px;margin:5px 0;background:var(--in)}.msg.out{background:var(--out);margin-left:auto}.msg.note{background:var(--note)}
.cols{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.cols h4{margin:6px 0;text-transform:capitalize}
.login{max-width:340px;margin:12vh auto;background:var(--surface);padding:28px;border-radius:14px;box-shadow:0 4px 20px #0002}.login input,.login button{width:100%;margin:6px 0}
@media(max-width:800px){aside{position:static;width:auto;flex-direction:row;overflow:auto;padding:6px}body.auth #content{margin-left:0}.brand{display:none}#nav{flex-direction:row}#nav button.out{margin:0}.grid2,.cols{grid-template-columns:1fr}}
.panel h4+.row~h4{margin-top:18px}
textarea{width:calc(100% - 6px)}
.brandrow{display:flex;align-items:center;gap:8px;padding-bottom:12px}.brandrow img{border-radius:10px}.brandrow .brand{padding:0}
.login .lg{text-align:center}.login .lg img{border-radius:16px}.login .lg h2{margin:6px 0 0}
.gbtn{display:block;text-align:center;border:1px solid var(--muted,#999);border-radius:8px;padding:10px;margin-top:8px;text-decoration:none;color:inherit}