@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --azul:        #1A3F6F;
  --azul-mid:    #2456A0;
  --azul-dark:   #0E2A50;
  --azul-light:  #E8F0FB;
  --azul-pale:   #F4F8FD;
  --verde:       #1A6B42;
  --verde-mid:   #22914F;
  --verde-light: #E6F4ED;
  --vermelho:    #CC2222;
  --verm-light:  #FDF0EF;
  --amarelo:     #D97706;
  --amar-light:  #FEF3C7;
  --c1: #F4F7FC;
  --c2: #E8EEF6;
  --c3: #C8D4E8;
  --c4: #8A9BB0;
  --c5: #5A6B80;
  --c6: #2D3748;
  --preto:  #0E1C2E;
  --branco: #FFFFFF;
  --sombra: 0 2px 8px rgba(14,28,46,.08);
  --sombra-lg: 0 8px 28px rgba(14,28,46,.12);
  --r: 8px;
  --rl: 12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--c1);color:var(--c6);font-family:'Poppins',sans-serif;font-size:14px;}
::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-thumb{background:var(--c3);border-radius:4px;}
a{color:var(--azul-mid);text-decoration:none;}

/* LAYOUT */
.wrapper{display:flex;height:100vh;overflow:hidden;}

/* SIDEBAR */
.sidebar{width:248px;flex-shrink:0;background:var(--azul-dark);display:flex;flex-direction:column;height:100vh;position:fixed;left:0;top:0;z-index:100;transition:transform .28s ease;overflow:hidden;}
.sb-head{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-brasao{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px;}
.sb-title{font-size:13px;font-weight:700;color:#fff;line-height:1.2;}
.sb-sub{font-size:9px;color:rgba(255,255,255,.35);margin-top:2px;letter-spacing:.5px;}
.sb-sec{padding:12px 10px 2px;}
.sb-sec-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,.25);padding:0 8px;margin-bottom:2px;}
.ni{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;color:rgba(255,255,255,.55);transition:all .15s;margin-bottom:1px;border:none;background:none;width:100%;text-align:left;}
.ni:hover{background:rgba(255,255,255,.08);color:#fff;}
.ni.on{background:rgba(255,255,255,.13);color:#fff;}
.ni-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.ni-badge{margin-left:auto;background:var(--vermelho);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;}
.ni-badge.am{background:var(--amarelo);}
.sb-foot{margin-top:auto;padding:12px 10px;border-top:1px solid rgba(255,255,255,.08);}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;}
.u-av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff;flex-shrink:0;}
.u-name{font-size:12px;font-weight:600;color:#fff;line-height:1.2;}
.u-role{font-size:9px;color:rgba(255,255,255,.35);}

/* MAIN */
.main{margin-left:248px;flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{background:var(--branco);border-bottom:1px solid var(--c2);padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:var(--sombra);}
.tb-left{display:flex;align-items:center;gap:10px;}
.mbtn{display:none;background:none;border:none;cursor:pointer;font-size:20px;color:var(--c5);padding:4px;}
.bc{font-size:13px;color:var(--c5);display:flex;align-items:center;gap:5px;}
.bc strong{color:var(--c6);font-weight:600;}
.tb-right{display:flex;align-items:center;gap:8px;}
.tb-pill{background:var(--azul-light);color:var(--azul);font-size:11px;font-weight:600;padding:4px 11px;border-radius:20px;display:flex;align-items:center;gap:4px;}
.tb-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--verde);}
.content{flex:1;overflow-y:auto;padding:24px;}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99;}
.sb-overlay.on{display:block;}

/* NOTIF PANEL */
.notif-panel{position:fixed;top:0;right:0;width:300px;height:100vh;background:var(--branco);border-left:1px solid var(--c2);z-index:200;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s ease;box-shadow:var(--sombra-lg);}
.notif-panel.on{transform:translateX(0);}
.np-head{padding:14px 16px;border-bottom:1px solid var(--c2);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.np-title{font-size:13px;font-weight:700;color:var(--c6);}
.np-list{flex:1;overflow-y:auto;padding:10px;}
.np-item{padding:10px 12px;border-radius:var(--r);margin-bottom:6px;border:1px solid var(--c2);}
.np-item.unread{background:var(--azul-pale);border-color:var(--azul-light);}
.np-foot{padding:10px 16px;border-top:1px solid var(--c2);}

/* PAGE */
.pg{display:none;}.pg.on{display:block;}
.ph{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.pt{font-size:19px;font-weight:700;color:var(--c6);margin-bottom:2px;}
.ps{font-size:13px;color:var(--c5);}
.pa{display:flex;gap:8px;flex-wrap:wrap;}

/* STATS */
.srow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.sc{background:var(--branco);border:1px solid var(--c2);border-radius:var(--rl);padding:16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sombra);}
.sc-ico{width:40px;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.sc-val{font-size:22px;font-weight:700;line-height:1;}
.sc-lbl{font-size:10px;color:var(--c5);margin-top:2px;font-weight:500;}
.sc-delta{font-size:10px;font-weight:600;margin-top:2px;}
.du{color:var(--verde);}.dd{color:var(--vermelho);}

/* CARD */
.card{background:var(--branco);border:1px solid var(--c2);border-radius:var(--rl);box-shadow:var(--sombra);overflow:hidden;}
.ch{padding:12px 16px;border-bottom:1px solid var(--c2);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.ct{font-size:13px;font-weight:700;color:var(--c6);}
.cb{padding:16px;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}

/* TABLE */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;}
thead th{padding:9px 14px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--c5);border-bottom:1px solid var(--c2);background:var(--c1);white-space:nowrap;}
tbody td{padding:11px 14px;font-size:13px;border-bottom:1px solid var(--c2);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--azul-pale);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--r);border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;transition:all .15s;text-decoration:none;white-space:nowrap;line-height:1;}
.bp{background:var(--azul);color:#fff;box-shadow:0 2px 6px rgba(26,63,111,.2);}
.bp:hover{background:var(--azul-mid);}
.bg2{background:var(--verde);color:#fff;}
.bg2:hover{background:var(--verde-mid);}
.bd{background:var(--vermelho);color:#fff;}
.bd:hover{background:#9b1818;}
.bo{background:var(--branco);border:1px solid var(--c3);color:var(--c6);}
.bo:hover{border-color:var(--azul);color:var(--azul);}
.bgh{background:transparent;color:var(--azul);}
.bgh:hover{background:var(--azul-light);}
.bs{padding:4px 10px;font-size:11px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* BADGE */
.bx{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;}
.bx::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0;}
.bx-az{background:var(--azul-light);color:var(--azul);}
.bx-gr{background:var(--verde-light);color:var(--verde);}
.bx-re{background:var(--verm-light);color:var(--vermelho);}
.bx-am{background:var(--amar-light);color:var(--amarelo);}
.bx-gy{background:var(--c2);color:var(--c5);}

/* FREQ SEMÁFORO */
.freq-ok   .bx-freq{background:var(--verde-light);color:var(--verde);}
.freq-warn .bx-freq{background:var(--amar-light);color:var(--amarelo);}
.freq-risk .bx-freq{background:var(--verm-light);color:var(--vermelho);}
.fbar{height:5px;background:var(--c2);border-radius:3px;overflow:hidden;margin-top:4px;}
.ffill{height:100%;border-radius:3px;transition:width .5s;}

/* AVATAR */
.av{border-radius:50%;background:var(--azul-light);color:var(--azul);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.av-s{width:28px;height:28px;font-size:10px;}
.av-m{width:36px;height:36px;font-size:13px;}
.av-l{width:50px;height:50px;font-size:17px;}

/* ALERTA */
.alerta{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:var(--r);margin-bottom:9px;}
.alerta:last-child{margin-bottom:0;}
.alerta.rk{background:var(--verm-light);border-left:3px solid var(--vermelho);}
.alerta.wn{background:var(--amar-light);border-left:3px solid var(--amarelo);}
.alerta.ok{background:var(--verde-light);border-left:3px solid var(--verde);}
.al-ic{font-size:16px;flex-shrink:0;}
.al-ti{font-weight:700;font-size:13px;color:var(--c6);margin-bottom:2px;}
.al-bd{font-size:11px;color:var(--c5);line-height:1.5;}

/* FORM */
.fg{margin-bottom:12px;}
.fl{display:block;font-size:11px;font-weight:600;color:var(--c6);margin-bottom:4px;}
.req{color:var(--vermelho);margin-left:2px;}
.fc{width:100%;padding:8px 11px;border:1.5px solid var(--c3);border-radius:var(--r);font-size:13px;font-family:'DM Sans',sans-serif;color:var(--c6);background:var(--branco);outline:none;transition:border-color .2s,box-shadow .2s;}
.fc:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(26,63,111,.1);}
.fc::placeholder{color:var(--c4);}
select.fc{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%238A9BB0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.fh{font-size:10px;color:var(--c4);margin-top:3px;}

/* MODAL */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:500;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px);}
.mo.on{display:flex;}
.md{background:var(--branco);border-radius:var(--rl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--sombra-lg);}
.mh{padding:16px 20px 12px;border-bottom:1px solid var(--c2);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--branco);z-index:1;}
.mt{font-size:15px;font-weight:700;color:var(--c6);}
.mx{background:none;border:none;cursor:pointer;color:var(--c4);font-size:18px;line-height:1;}
.mx:hover{color:var(--c6);}
.mb3{padding:16px 20px;}
.mf{padding:11px 20px;border-top:1px solid var(--c2);display:flex;justify-content:flex-end;gap:8px;}

/* CHAMADA TOGGLE */
.tg-wrap{display:flex;border-radius:20px;overflow:hidden;border:1.5px solid var(--c3);flex-shrink:0;}
.tg-btn{padding:4px 13px;font-size:11px;font-weight:700;cursor:pointer;border:none;background:var(--branco);font-family:'DM Sans',sans-serif;transition:all .15s;color:var(--c4);}
.tg-btn.p.on{background:var(--verde);color:#fff;}
.tg-btn.f.on{background:var(--vermelho);color:#fff;}
.tg-wrap.mp{border-color:var(--verde);}
.tg-wrap.mf{border-color:var(--vermelho);}

/* EMPTY */
.empty{text-align:center;padding:40px 20px;color:var(--c4);}
.empty-icon{font-size:36px;margin-bottom:10px;display:block;opacity:.5;}

/* RESPONSIVE */
@media(max-width:1024px){
  .srow{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.on{transform:translateX(0);box-shadow:var(--sombra-lg);}
  .main{margin-left:0;}
  .mbtn{display:flex;}
  .topbar{padding:0 14px;}
  .content{padding:14px;}
  .srow{grid-template-columns:1fr 1fr;gap:8px;}
  .g2,.g3{grid-template-columns:1fr;}
  .ph{flex-direction:column;}
  .fr2,.fr3{grid-template-columns:1fr;}
  .mo{align-items:flex-end;padding:0;}
  .md{border-radius:var(--rl) var(--rl) 0 0;max-height:92vh;max-width:100%;}
  .tb-pill{display:none;}
  .notif-panel{width:100%;}
}
@media(max-width:480px){
  .srow{grid-template-columns:1fr 1fr;gap:6px;}
  .sc{padding:12px;}
  .sc-val{font-size:18px;}
  .sc-ico{width:34px;height:34px;font-size:16px;}
}