*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:#f4f5f7;color:#1c2128;
  -webkit-tap-highlight-color:transparent}
.hidden{display:none !important}
.brand{font-family:'Archivo';font-weight:900;font-size:24px;letter-spacing:.5px}
.brand span{color:#f4b400}
.brand.sm{font-size:18px}
.muted{color:#6b7280}.small{font-size:13px}
.form-err{color:#c0392b;font-size:13px;min-height:18px;margin-top:8px}
label{display:block;font-size:13px;font-weight:600;color:#374151;margin:14px 0 7px}
input{width:100%;padding:14px;border-radius:12px;border:1.5px solid #e2e5ea;background:#fff;
  font-size:15px;font-family:inherit;outline:none;color:#1c2128}
input:focus{border-color:#f4b400}

/* ---- buttons ---- */
.btn-yellow{all:unset;cursor:pointer;display:block;text-align:center;width:100%;padding:16px;border-radius:13px;
  background:#f4b400;color:#3a2c00;font-weight:800;font-size:15px;box-sizing:border-box}
.btn-yellow.big{display:flex;align-items:center;justify-content:center;gap:9px;font-size:16px;
  box-shadow:0 6px 16px rgba(244,180,0,.3);margin-bottom:8px}
.btn-green{all:unset;cursor:pointer;text-align:center;flex:1.3;padding:14px;border-radius:12px;background:#16a34a;color:#fff;font-weight:700;font-size:14px}
.btn-dark{all:unset;cursor:pointer;display:block;text-align:center;width:100%;padding:15px;border-radius:12px;background:#1c2128;color:#fff;font-weight:700;font-size:14px;box-sizing:border-box;margin-top:12px}
.btn-light{all:unset;cursor:pointer;text-align:center;flex:1;padding:14px;border-radius:12px;background:#eef0f3;color:#374151;font-weight:700;font-size:14px}
.icon-btn{all:unset;cursor:pointer;padding:8px;border-radius:10px}

/* ---- login ---- */
.login{position:fixed;inset:0;background:#fff;display:flex;flex-direction:column;padding:42px 26px 28px;z-index:50}
.login-top{text-align:center;margin-top:24px}
.login-sub{font-size:13px;color:#6b7280;margin-top:5px}
.login-form{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:420px;width:100%;margin:0 auto}
.login-note{font-size:12px;color:#9aa1ab;margin-top:14px;text-align:center;line-height:1.5}

/* ---- app shell ---- */
.app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:#f4f5f7}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;
  background:#fff;border-bottom:1px solid #e8eaed;position:sticky;top:0;z-index:20}
.content{flex:1;padding:16px 18px 90px;overflow-y:auto}

/* ---- cards ---- */
.card{background:#fff;border:1px solid #e8eaed;border-radius:16px;padding:16px;margin-bottom:14px}
.card.center{text-align:center;padding:24px 16px}
.form-title{font-weight:700;font-size:18px;margin-bottom:4px}
.hint{font-size:12px;color:#9aa1ab;margin-top:8px}
.form-actions{display:flex;gap:9px;margin-top:18px}
.sec-label{font-size:11px;font-weight:700;color:#9aa1ab;letter-spacing:.5px;margin:18px 0 10px}
.file-drop{display:flex;align-items:center;justify-content:center;padding:16px;border-radius:12px;
  border:1.5px dashed #d4b483;background:#fffaf0;color:#7a5a00;font-size:13px;font-weight:600;cursor:pointer;margin-top:7px}

/* ---- viagem ativa ---- */
.ativa{background:#fff;border:1.5px solid #16a34a;border-radius:16px;padding:16px;margin-bottom:14px;
  box-shadow:0 4px 16px rgba(22,163,74,.12)}
.ativa-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tag-green{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#16a34a;letter-spacing:.3px}
.tag-green .d{width:7px;height:7px;border-radius:50%;background:#16a34a}
.rota{font-size:16px;font-weight:700}
.ativa-stats{display:flex;gap:22px;margin-top:13px}
.ativa-stats .lbl{font-size:10.5px;color:#9aa1ab}
.ativa-stats .val{font-family:'Archivo';font-weight:800;font-size:18px;margin-top:1px}
.ativa-stats .val.red{color:#c0392b}
.ativa-actions{display:flex;gap:9px;margin-top:15px}
.motlive{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:12px;font-weight:600;color:#16a34a}
.motmap{height:170px;border-radius:12px;margin-top:8px;overflow:hidden;background:#e8eaed;border:1px solid #e2e5ea}

/* ---- listas ---- */
.item{background:#fff;border:1px solid #e8eaed;border-radius:12px;padding:13px 14px;margin-bottom:9px}
.item-top{display:flex;justify-content:space-between;align-items:center}
.item-top b{font-size:13px}.item-sub{font-size:12px;color:#6b7280;margin-top:3px}
.frete{font-weight:700;color:#16a34a;font-size:13px}
.empty{padding:22px;text-align:center;color:#9aa1ab;font-size:13px}

/* ---- chips ---- */
.chips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.chip{all:unset;cursor:pointer;text-align:center;padding:11px 6px;border-radius:11px;font-size:12.5px;font-weight:600;
  background:#f4f5f7;color:#374151;border:1.5px solid #e2e5ea}
.chip.active{background:#fff8e6;color:#7a5a00;border-color:#f4b400}

/* ---- despesas ---- */
.totalbar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#fff;
  border:1px solid #e8eaed;border-radius:12px;margin-bottom:10px;font-size:13px}
.totalbar b{color:#c0392b;font-size:15px}
.desp-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e8eaed;border-radius:11px;padding:11px 13px;margin-bottom:8px}
.desp-ic{width:34px;height:34px;border-radius:9px;background:#eef0f3;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.desp-item .v{margin-left:auto;font-weight:700;font-size:13.5px}

/* ---- ganhos ---- */
.bignum{font-family:'Archivo';font-weight:900;font-size:36px;margin:2px 0 16px}
.card-dark{padding:18px;border-radius:16px;background:linear-gradient(140deg,#1c2128,#2a3340);color:#fff}
.cd-head{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#cdd3db}
.pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:11px;background:rgba(244,180,0,.2);color:#f4b400}
.cd-num{font-family:'Archivo';font-weight:900;font-size:32px;margin-top:6px;color:#f4b400}
.cd-foot{font-size:11.5px;color:#9aa1ab;margin-top:4px}
.note-box{margin-top:16px;padding:13px 15px;border-radius:13px;background:#fff;border:1px solid #e8eaed;
  font-size:12px;color:#6b7280;line-height:1.5}

/* ---- entrega: card na lista + overlay ---- */
.ent-item{background:#fff;border:1px solid #e8eaed;border-radius:12px;padding:13px 14px;margin-bottom:9px}
.ent-item .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ent-item .dest{font-weight:600;font-size:13.5px}
.ent-item .sub{font-size:11.5px;color:#9aa1ab;margin-top:2px}
.badge-pend{font-size:10px;font-weight:700;padding:3px 9px;border-radius:12px;background:#fff8e6;color:#b8860b}
.badge-ok{font-size:10px;font-weight:700;padding:3px 9px;border-radius:12px;background:#eafaf0;color:#16a34a}
.btn-entregar{all:unset;cursor:pointer;display:block;text-align:center;margin-top:10px;padding:11px;border-radius:11px;background:#16a34a;color:#fff;font-weight:700;font-size:13px}
.ent-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.ent-card{width:100%;max-width:520px;background:#fff;border-radius:18px 18px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));animation:rumoUp .25s ease}
@keyframes rumoUp{from{transform:translateY(100%)}to{transform:none}}

/* ---- ocorrências ---- */
.btn-report{all:unset;cursor:pointer;display:block;text-align:center;width:100%;box-sizing:border-box;margin-top:6px;padding:13px;border-radius:12px;background:#fff;border:1.5px solid #f0c27a;color:#a85d00;font-weight:700;font-size:14px}
.oco-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e8eaed;border-radius:11px;padding:11px 13px;margin:9px 0}
.oco-item .info{flex:1}
.oco-item .tp{font-weight:600;font-size:13px}
.oco-item .sub{font-size:11.5px;color:#9aa1ab;margin-top:2px}
.oco-sev{font-size:10px;font-weight:700;padding:3px 9px;border-radius:12px}
.oco-sev.alta{background:#fdeaea;color:#c0392b}.oco-sev.media{background:#fff8e6;color:#b8860b}.oco-sev.baixa{background:#eef0f3;color:#6b7280}
.oco-st{font-size:11px;color:#9aa1ab}

/* ---- bottom nav ---- */
.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;
  display:flex;border-top:1px solid #e8eaed;background:#fff;padding:8px 4px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.nav{all:unset;cursor:pointer;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;color:#9aa1ab;font-weight:600}
.nav svg{width:22px;height:22px}
.nav.active{color:#1c2128}

/* ===== Menu lateral (drawer) ===== */
.drawer{position:fixed;inset:0;z-index:60}
.drawer.hidden{display:none}
.drawer-back{position:absolute;inset:0;background:rgba(0,0,0,.42)}
.drawer-panel{position:absolute;top:0;left:0;bottom:0;width:80%;max-width:300px;background:#fff;box-shadow:8px 0 30px rgba(0,0,0,.25);display:flex;flex-direction:column;padding:20px 16px;animation:slideL .22s ease}
@keyframes slideL{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.drawer-user{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #eef0f3}
.drawer-ava{width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,#ffe08a,#f4b400);display:flex;align-items:center;justify-content:center;font-weight:800;color:#3a2c00;font-size:16px}
.drawer-nome{font-weight:700;font-size:15px;color:#1c2128}
.drawer-placa{font-size:12px;color:#9aa1ab}
.drawer-menu{display:flex;flex-direction:column;gap:2px;margin-top:12px;flex:1}
.drawer-menu button,.drawer-sair{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;padding:13px 10px;border-radius:10px;font-size:14.5px;color:#1c2128}
.drawer-menu button:active{background:#f4f5f7}
.drawer-sair{color:#c0392b;font-weight:600}

/* ===== Telas (overlay tipo login) ===== */
.screen{position:fixed;inset:0;z-index:55;background:#f4f5f7;color:#1c2128;display:flex;flex-direction:column}
.screen.hidden{display:none}
.screen-head{display:flex;align-items:center;gap:12px;padding:16px 16px 13px;background:#fff;border-bottom:1px solid #e8eaed}
.screen-head .bk{all:unset;cursor:pointer;display:flex}
.screen-head .ttl{font-weight:700;font-size:17px}
.screen-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.doc-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e8eaed;border-radius:12px;padding:14px}
.doc-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;background:rgba(63,114,214,.12)}
.doc-nome{font-size:13.5px;font-weight:600}
.doc-sub{font-size:11.5px;color:#9aa1ab}
.card-info{background:#fff;border:1px solid #e8eaed;border-radius:14px;padding:16px}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0f1f4;font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv span{color:#9aa1ab}.kv b{color:#1c2128}
.sup-card{background:#fff;border:1px solid #e8eaed;border-radius:14px;padding:20px;text-align:center}
.btn-apitar{all:unset;cursor:pointer;display:block;text-align:center;box-sizing:border-box;width:100%;margin-top:14px;padding:15px;border-radius:13px;background:#f4b400;color:#3a2c00;font-weight:800;font-size:15px}

/* ===== Desempenho ===== */
.perf-period{display:flex;gap:4px;margin:12px 0 16px;padding:4px;background:#eef0f3;border-radius:11px}
.perf-period button{all:unset;cursor:pointer;flex:1;text-align:center;padding:9px;border-radius:8px;font-size:12.5px;font-weight:600;color:#6b7280}
.perf-period button.active{background:#fff;color:#1c2128;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:6px}
.perf-stat{background:#fff;border:1px solid #e8eaed;border-radius:13px;padding:14px}
.perf-stat .l{font-size:11px;color:#9aa1ab}
.perf-stat .v{font-family:'Archivo';font-weight:800;font-size:20px;margin-top:2px;color:#1c2128}
.perf-note{margin-top:16px;padding:13px 14px;border-radius:12px;background:#fffaf0;border:1px solid #f4d99a;font-size:12px;color:#7a5a00;line-height:1.5}
.menu-btn{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;width:34px;height:34px}