/* Painel Atendimento ao Cliente - Trocas | Disktrans
   Identidade oficial. Cores/tipografia da marca em variaveis. */
:root{
  --azul:#004C96; --naval:#022064; --azul2:#0A7AC9; --laranja:#F4941D; --carvao:#2C303E;
  --bg:#F5F6F8; --sec:#64748B; --linha:#e6e9ee; --card:#fff;
  --ok:#2E7D5B; --okbg:#e7f2ec; --atn:#F4941D; --atnbg:#fdf1e0; --alerta:#C0392B; --alertabg:#fbeae7;
  --fh:'Barlow','Segoe UI',Arial,Calibri,sans-serif;
  --fb:'Inter','Segoe UI',Arial,Calibri,sans-serif;
  --gap:1rem;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--carvao);font-family:var(--fb);font-size:0.875rem;line-height:1.45}
h1,h2{font-family:var(--fh);margin:0}

/* ===== Login ===== */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--azul);padding:1.5rem}
.login__box{background:var(--card);border-radius:1rem;padding:2rem;width:100%;max-width:22rem;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 10px 40px rgba(2,32,100,.25)}
.login__logo{width:9rem;height:auto;margin-bottom:1rem}
.login__title{font-size:1.05rem;font-weight:800;color:var(--azul)}
.login__sub{font-size:0.78rem;color:var(--sec);margin:.35rem 0 1.4rem}
.login__label{align-self:flex-start;font-size:0.75rem;font-weight:600;color:var(--sec);margin-bottom:.35rem}
.login__input{width:100%;padding:.7rem .85rem;border:1px solid var(--linha);border-radius:.6rem;font-size:.95rem;font-family:var(--fb)}
.login__input:focus{outline:2px solid var(--azul2);border-color:var(--azul2)}
.login__btn{width:100%;margin-top:1rem;padding:.75rem;border:0;border-radius:.6rem;background:var(--laranja);color:#fff;font-weight:700;font-family:var(--fh);font-size:.95rem;cursor:pointer}
.login__btn:hover{background:#dd8413}
.login__erro{color:var(--alerta);font-size:.8rem;margin:.8rem 0 0}

/* ===== App / header ===== */
.app{min-height:100vh}
.brand{background:var(--azul);color:#fff;padding:1rem 2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand__logo{height:2.4rem;width:auto;display:block}
.brand__title{font-size:1.2rem;font-weight:800;letter-spacing:.2px}
.brand__sub{font-size:0.75rem;color:#cfe0f1;margin:.15rem 0 0}
.brand__upd{margin-left:auto;font-size:.72rem;color:#bcd2e8;text-align:right}

.nav{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;background:var(--card);border-bottom:1px solid var(--linha);padding:.7rem 2rem}
.nav__tabs{display:inline-flex}
.nav__tab{border:0;background:transparent;color:var(--sec);font-family:var(--fh);font-weight:700;font-size:.85rem;padding:.5rem .25rem;margin-right:1rem;border-bottom:2px solid transparent;cursor:pointer}
.nav__tab--on{color:var(--azul);border-bottom-color:var(--laranja)}
.nav__pills{margin-left:auto;display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--linha);border-radius:.5rem;padding:3px}
.nav__pill{border:0;background:transparent;color:var(--sec);font-weight:600;font-size:.78rem;padding:.4rem .9rem;border-radius:.4rem;cursor:pointer}
.nav__pill--active{background:var(--laranja);color:#fff}

.main{padding:0 2rem}
.msg-erro{background:var(--alertabg);color:var(--alerta);padding:.8rem;border-radius:.6rem;margin:1rem 0}
.msg-load{color:var(--sec);padding:1.1rem 0}

/* ===== Secoes ===== */
.sec{margin-top:1.4rem}
.sec__label{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem}
.sec__bar{width:4px;height:.95rem;background:var(--laranja);border-radius:2px;flex:0 0 auto}
.sec__title{font-size:.8rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--azul)}
.sec__hint{font-size:.72rem;color:var(--sec)}
.sec__count{color:var(--alerta);font-weight:700}

/* ===== KPI ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--gap)}
.kc{background:var(--card);border:1px solid var(--linha);border-radius:.75rem;padding:1.1rem 1.25rem}
.kc__l{font-size:.7rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--sec);margin:0}
.kc__n{font-family:var(--fh);font-size:2rem;font-weight:800;line-height:1.05;margin:.5rem 0 0}
.kc__s{font-size:.75rem;color:var(--sec);margin:.35rem 0 0}
.kc--al .kc__n{color:var(--alerta)} .kc--ok .kc__n{color:var(--ok)} .kc--at .kc__n{color:var(--atn)} .kc--az .kc__n{color:var(--azul)}

/* ===== Medidores ===== */
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--gap)}
.gc{background:var(--card);border:1px solid var(--linha);border-radius:.75rem;padding:1.1rem;text-align:center}
.gc__t{font-family:var(--fh);font-size:.8rem;font-weight:700;color:var(--azul);margin:0 0 .75rem}
.donut{width:7.5rem;height:7.5rem;border-radius:50%;margin:0 auto;position:relative;display:flex;align-items:center;justify-content:center;background:#eaedf1}
.donut__hole{position:absolute;width:5.5rem;height:5.5rem;border-radius:50%;background:var(--card)}
.donut__v{position:relative;font-family:var(--fh);font-size:1.35rem;font-weight:800}
.gc__cap{font-size:.7rem;color:var(--sec);margin:.65rem 0 0}

/* ===== Insights ===== */
.ins{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:var(--gap)}
.icard{background:var(--card);border:1px solid var(--linha);border-radius:.75rem;padding:1.1rem 1.25rem}
.icard__h{display:flex;align-items:center;gap:.55rem;margin-bottom:.2rem}
.icard__dot{width:.65rem;height:.65rem;border-radius:50%;background:var(--ok);flex:0 0 auto}
.icard__dot--az{background:var(--azul)}
.icard__t{font-family:var(--fh);font-size:.82rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--carvao)}
.icard__st{margin-left:auto;font-size:.7rem;color:var(--sec)}
.icard__subh{font-size:.72rem;color:var(--sec);margin:0 0 .7rem}
.bul{display:flex;gap:.6rem;padding:.5rem 0;font-size:.82rem;line-height:1.5;border-top:1px solid var(--linha)}
.bul:first-child{border-top:0}
.bul__i{flex:0 0 auto;width:.4rem;height:.4rem;border-radius:50%;margin-top:.45rem}
.bul__i--g{background:var(--ok)} .bul__i--r{background:var(--alerta)} .bul__i--a{background:var(--atn)} .bul__i--n{background:var(--azul2)}
.bul strong{color:var(--azul);font-weight:700}
.bul .txt-alerta{color:var(--alerta)}

/* ===== Paineis / graficos ===== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.chartbox{position:relative;height:15.6rem}
.chartbox--wf{height:16.25rem}
.panel{background:var(--card);border:1px solid var(--linha);border-radius:.75rem;padding:1.1rem 1.25rem}
.panel__t{font-family:var(--fh);font-size:.82rem;font-weight:700;color:var(--azul);margin:0 0 .65rem}
.panel__sub{color:var(--sec);font-weight:400;font-size:.7rem;font-family:var(--fb)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:var(--gap);margin-top:.9rem}

.li{display:flex;justify-content:space-between;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--linha);font-size:.82rem}
.li:last-child{border-bottom:0}
.li__a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li__b{white-space:nowrap;font-weight:600}
.badge{display:inline-block;padding:2px .55rem;border-radius:.4rem;font-size:.72rem;font-weight:700}
.badge--r{background:var(--alertabg);color:var(--alerta)} .badge--a{background:var(--atnbg);color:var(--atn)}
.badge--c{background:#eef1f4;color:var(--sec)} .badge--n{background:#e7f0f9;color:var(--azul)}

.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.75rem,1fr));gap:.9rem}
.chip{background:var(--card);border:1px solid var(--linha);border-radius:.75rem;padding:.9rem;text-align:center}
.chip__n{font-family:var(--fh);font-size:1.5rem;font-weight:800;line-height:1;margin:0}
.chip__l{font-size:.7rem;text-transform:uppercase;letter-spacing:.3px;color:var(--sec);margin:.4rem 0 0}
.chip--rd{border-color:#f0d3ce} .chip--rd .chip__n{color:var(--alerta)}
.chip--am .chip__n{color:var(--atn)}

.mx{width:100%;border-collapse:collapse;font-size:.78rem}
.mx__th{color:var(--sec);font-weight:600;text-align:center;padding:.5rem;text-transform:uppercase;font-size:.66rem;letter-spacing:.3px}
.mx__th--l{text-align:left}
.mx td{padding:.5rem;text-align:center;border-top:1px solid var(--linha)}
.mx td.mx__c--l{text-align:left;font-weight:600;color:var(--carvao)}
.scroll{max-height:18.75rem;overflow:auto}

.foot{margin-top:1.6rem;padding:.9rem 2rem;border-top:1px solid var(--linha);display:flex;justify-content:space-between;align-items:center;color:var(--sec);font-size:.7rem;flex-wrap:wrap;gap:.5rem}

/* Grid.js */
.gridjs-wrapper{box-shadow:none;border-color:var(--linha);border-radius:.5rem}
.gridjs-table{font-size:.82rem}
th.gridjs-th{background:#f7f9fb;color:var(--sec);font-weight:600}

@media (max-width:52rem){
  .grid2{grid-template-columns:1fr}
  .brand__upd{width:100%;text-align:left;margin:.4rem 0 0}
  .main,.nav,.brand,.foot{padding-left:1rem;padding-right:1rem}
}