*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px}
.app{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}

/* sidebar (marca): fundo cinza claro como no site rmccargo.com.br */
aside{background:var(--rmc-cinza);color:var(--ink);padding:18px 14px;display:flex;flex-direction:column;gap:4px;border-right:1px solid #e3e3e3}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:4px 6px 18px}
.logo-chip{width:100%;display:flex;justify-content:center;padding:4px 0}
.logo-chip img{height:52px}
.logo .t{font-weight:800;font-size:15px;letter-spacing:-.2px;line-height:1.1;color:var(--rmc-ink)}
.logo .t small{display:block;font-weight:700;font-size:10.5px;color:var(--rmc-red);letter-spacing:1.2px;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:#5b5b60;text-decoration:none;font-weight:600;font-size:13px}
.nav a.on{background:#fff;color:var(--rmc-red);border-left:3px solid var(--rmc-red);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.nav a:hover:not(.on){background:rgba(255,255,255,.6);color:var(--rmc-ink)}
.side-foot{margin-top:auto;padding:10px;border-top:1px solid #e0e0e0;font-size:12px;color:#5b5b60}
.side-foot b{color:var(--rmc-ink)}
.role{display:inline-block;margin-top:6px;background:var(--rmc-gold);color:var(--rmc-ink);font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.3px}
#sair{color:#5b5b60 !important}

/* topo mobile + menu */
.mtop{display:none;position:sticky;top:0;z-index:15;background:var(--rmc-cinza);border-bottom:1px solid #e3e3e3;padding:10px 14px;align-items:center;gap:12px}
.mtop img{height:30px}
.mtop .ham{margin-left:auto;border:1px solid #d9d9d9;background:#fff;border-radius:8px;padding:6px 10px;font-size:16px;cursor:pointer}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:18}
body.menu-aberto .scrim{display:block}

/* main */
main{padding:20px 26px 60px;max-width:1360px;min-width:0}
.crumb{font-size:12.5px;color:var(--faint);margin-bottom:10px}
.crumb b{color:var(--ink)}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.top h1{font-size:19px;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:9px}
.pill{font-size:11px;font-weight:700;background:#eef0f2;color:var(--mut);padding:3px 10px;border-radius:999px}
.pill.demo{background:var(--amber-bg);color:var(--amber)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clock{font-family:var(--mono);font-size:12px;color:var(--green);display:flex;align-items:center;gap:6px}
.clock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.clock.old{color:var(--amber)} .clock.old::before{background:var(--amber)}
.btn{border:1px solid var(--accent);color:var(--accent);background:#fff;border-radius:8px;padding:7px 14px;font-weight:700;font-size:12.5px;cursor:pointer}
.btn:hover{background:var(--accent-bg)} .btn:disabled{opacity:.5;cursor:wait}
.btn.sm{padding:6px 12px;font-size:11.5px}
.datebox{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-family:var(--mono);font-size:12.5px;background:#fff}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer}
.kpi.sel{outline:2px solid var(--ink)}
.kpi .n{font-size:24px;font-weight:800;letter-spacing:-.5px}
.kpi .l{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);margin-top:4px}
.kpi .s{font-size:11px;color:var(--mut);margin-top:2px}
.kpi.k-risco{border-color:#f3d9a4;background:linear-gradient(180deg,#fffdf7,#fff)}
.kpi.k-risco .n{color:var(--amber)} .kpi.k-atras .n{color:var(--red)} .kpi.k-exc .n{color:var(--violet)}
.kpi.k-ok .n{color:var(--green)} .kpi.k-transito .n{color:var(--blue)}

/* radar */
.radar{background:var(--card);border:1px solid #f3d9a4;border-radius:14px;padding:16px 18px;margin-bottom:20px}
.radar h2{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.radar h2 .ia{background:var(--amber-bg);color:var(--amber);font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:6px}
.radar .sub{font-size:12px;color:var(--mut);margin-bottom:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rcard{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fffdf9}
.rcard.late{border-left-color:var(--red);background:#fffafa}
.rcard.exc{border-left-color:var(--violet);background:#fcfbff}
.rcard .rh{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rcard .min{font-family:var(--mono);font-weight:700;font-size:13.5px;cursor:pointer}
.rcard .cli{font-weight:700;font-size:13px}
.rcard .rt{font-family:var(--mono);font-size:12px;color:var(--mut);overflow-wrap:anywhere}
.ia-tag{margin-top:7px;font-size:12px;background:#f3eefc;color:#5a3fc4;border-left:3px solid var(--violet);padding:6px 9px;border-radius:6px}
.ia-tag.soft{background:#f4f5f7;color:var(--mut);border-left-color:var(--line)}
.rcard .why{margin-top:7px;font-size:12.5px;color:var(--ink);line-height:1.45}
.rcard .sug{margin-top:6px;font-size:12px;color:var(--mut)}
.rcard .sug b{color:var(--green)}
.rcard .act{margin-top:9px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.src{font-size:10px;color:var(--faint);font-family:var(--mono);margin-left:6px}
select.trat,input.trat{border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:12px;background:#fff;color:var(--ink)}
input.trat{min-width:220px}
.done-tag{background:var(--green-bg);color:var(--green);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.more{font-size:12px;color:var(--mut);text-align:center;padding:6px}

/* filters + table */
.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px}
.search{flex:1;min-width:230px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.search input{border:none;outline:none;font-size:13px;width:100%;background:none;color:var(--ink)}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--mut);font-size:12px;font-weight:700;cursor:pointer}
.chip.on{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.chip.on.warn{border-color:var(--amber);color:var(--amber);background:var(--amber-bg)}
.chip.on.bad{border-color:var(--red);color:var(--red);background:var(--red-bg)}
.chip.on.exc{border-color:var(--violet);color:var(--violet);background:var(--violet-bg)}
.chip.on.tr{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.chip.cart.on{border-color:var(--rmc-gold);color:#8a6a2a;background:#faf4e6}
.sel{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;background:#fff;color:var(--ink)}

.tablewrap{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
table{width:100%;border-collapse:collapse}
th{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--faint);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:#fbfcfb}
td{padding:11px 14px;border-bottom:1px solid #f0f2f1;font-size:13px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfc;cursor:pointer}
td.min{font-family:var(--mono);font-weight:700}
td .cli{font-weight:700;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td .un{font-size:11px;color:var(--faint)}
td.rt{font-family:var(--mono);font-size:12px;color:var(--mut);white-space:nowrap}
td.pv{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
td.pv.bad{color:var(--red);font-weight:700} td.pv.warn{color:var(--amber);font-weight:700}
td.pv small{display:block;color:var(--faint);font-weight:400;font-size:10.5px}
.st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%}
.st.OK{background:var(--green-bg);color:var(--green)} .st.OK::before{background:var(--green)}
.st.TRANSITO{background:var(--blue-bg);color:var(--blue)} .st.TRANSITO::before{background:var(--blue)}
.st.RISCO{background:var(--amber-bg);color:var(--amber)} .st.RISCO::before{background:var(--amber)}
.st.ATRASADA{background:var(--red-bg);color:var(--red)} .st.ATRASADA::before{background:var(--red)}
.st.EXCECAO{background:var(--violet-bg);color:var(--violet)} .st.EXCECAO::before{background:var(--violet)}
.st.oc{background:#f1f2f4;color:var(--mut);font-size:10.5px;padding:2px 8px} .st.oc::before{display:none}
.st.oc.crit{background:var(--violet-bg);color:var(--violet)}
.flag{font-size:10.5px;color:var(--amber);font-weight:700}
.legs{display:flex;gap:4px;align-items:center}
.leg{width:26px;height:7px;border-radius:4px;background:#e8ecea}
.leg.done{background:var(--green)} .leg.late{background:var(--red)} .leg.cur{background:var(--amber)}
.leg-lbl{font-size:9.5px;color:var(--faint);margin-top:3px;display:flex;gap:4px}
.leg-lbl span{width:26px;text-align:center}
.count{font-size:12px;color:var(--mut);padding:10px 14px;display:flex;gap:12px;align-items:center}
.footer-note{margin-top:14px;font-size:11.5px;color:var(--faint);text-align:center;font-family:var(--mono)}
.empty{color:var(--mut);font-size:13px;padding:8px}

/* drawer de detalhe */
.drawer{position:fixed;top:0;right:0;width:540px;max-width:100vw;height:100vh;background:#fff;border-left:1px solid var(--line);box-shadow:-8px 0 30px rgba(0,0,0,.08);transform:translateX(100%);transition:transform .2s;overflow:auto;padding:20px 22px;z-index:20}
.drawer.open{transform:none}
.drawer h3{font-size:16px;font-weight:800;display:flex;gap:10px;align-items:center}
.drawer .x{margin-left:auto;cursor:pointer;color:var(--mut);font-size:18px}
.drawer .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:14px 0;font-size:12.5px}
.drawer .grid b{display:block;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.8px}
.drawer h4{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);margin:16px 0 8px}
.tl{font-size:12px;border-left:2px solid var(--line);padding-left:12px;display:flex;flex-direction:column;gap:7px}
.tl div{position:relative}
.tl div::before{content:"";position:absolute;left:-16.5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--faint)}
.tl div.awb::before{background:var(--blue)} .tl div.critica::before{background:var(--violet)}
.tl .d{font-family:var(--mono);color:var(--mut);margin-right:6px}
.perna{display:grid;grid-template-columns:90px 1fr 1fr;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--line)}
.perna b{color:var(--mut);font-weight:700}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:9px;font-size:12.5px;z-index:30;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .mtop{display:flex}
  aside{position:fixed;top:0;left:0;height:100vh;width:260px;max-width:85vw;z-index:19;transform:translateX(-100%);transition:transform .2s;box-shadow:8px 0 30px rgba(0,0,0,.15)}
  body.menu-aberto aside{transform:none}
  main{padding:14px 12px 60px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top h1{font-size:16px}
  .drawer{width:100vw}
  .toolbar .search{min-width:100%}
  table{display:block;overflow-x:auto;white-space:nowrap}
}

/* admin / relatórios */
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tab{padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--mut);font-weight:700;font-size:12.5px;cursor:pointer}
.tab.on{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.panel h2{font-size:14px;font-weight:800}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel .tablewrap{border-radius:10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
.form-grid label small{font-weight:400;text-transform:none;letter-spacing:0}
.form-grid input,.form-grid select{font-size:13px;padding:8px 10px}
.form-grid label:nth-last-child(-n+2){grid-column:span 1}
.ufs{display:flex;flex-wrap:wrap;gap:5px}
.ufs .chip{padding:4px 8px;font-size:11px}
.clientes{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:3px;text-transform:none;letter-spacing:0;font-weight:400;font-size:12.5px;color:var(--ink)}
.cli-item{display:flex;gap:8px;align-items:center;cursor:pointer}
.act{margin-top:14px;display:flex;gap:8px;align-items:center}
.param{display:grid;grid-template-columns:320px 1fr;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.param label{display:flex;flex-direction:column;font-size:12.5px}
.param small{color:var(--mut);font-size:11px}
tr.crit td{background:#fcfbff}
.kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bar{display:grid;grid-template-columns:220px 1fr 40px;gap:10px;align-items:center;font-size:12.5px;padding:5px 0}
.track{height:10px;background:#eef0f2;border-radius:5px;overflow:hidden}
.fill{height:100%;background:var(--rmc-gold)}
@media(max-width:900px){.form-grid,.duas{grid-template-columns:1fr}.param{grid-template-columns:1fr}}
.regra{font-size:12px;padding:5px 0;border-bottom:1px dashed var(--line);line-height:1.5}
.regra.off,tr.off td{opacity:.5}
.regra .src a,.regra a{margin-left:6px}
textarea.trat{width:100%;font-family:var(--sans);resize:vertical}

.alerta-trat{display:inline-block;margin-left:8px;background:var(--red-bg);color:var(--red);font-weight:700;font-size:11px;padding:2px 8px;border-radius:999px}

.det{background:#fbfbfc;font-size:12px;white-space:pre-wrap;font-family:var(--mono)}
.det-erro{color:var(--red);padding:3px 0}
.det-info{color:var(--mut);padding:3px 0}
.tl.trat div::before{background:var(--green)}
.tl.trat .src{display:block;margin-top:2px}