:root {
    --amarelo:#F5C400; --amarelo-e:#D9A800;
    --preto:#0D0D0D; --c-escuro:#1A1A1A; --c-medio:#2C2C2C; --c-card:#232323;
    --borda:#333; --texto:#E8E8E8; --muted:#888;
    --verde:#4CAF82; --vermelho:#E05252; --azul:#4A90D9; --laranja:#E08C30;
    --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--preto);color:var(--texto);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;}

/* SIDEBAR */
#sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;background:var(--c-escuro);border-right:1px solid var(--borda);display:flex;flex-direction:column;z-index:1100;transition:transform .3s;}
.s-logo{padding:28px 24px 20px;border-bottom:1px solid var(--borda);}
.s-logo h1{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:var(--amarelo);}
.s-logo p{font-size:11px;color:var(--muted);margin-top:2px;}
.s-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;}
.s-divider{height:1px;background:var(--borda);margin:8px 0;}
/* Rótulo de grupo do menu. Fica sempre aberto, sem sanfona: no celular um grupo
   que abre e fecha cobra um toque a mais em toda navegação, e o público opera
   com o polegar. Rolar é mais barato que descobrir onde clicar. */
.s-group{padding:12px 14px 5px;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--amarelo);opacity:.85;user-select:none;}
.ni{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;color:var(--muted);transition:all .15s;user-select:none;}
.ni:hover{background:var(--c-medio);color:var(--texto);}
.ni.active{background:var(--amarelo);color:var(--preto);font-weight:700;}
.ni .ic{font-size:18px;width:20px;text-align:center;}
.s-foot{padding:16px;border-top:1px solid var(--borda);font-size:11px;color:var(--muted);}

/* MAIN */
#main{margin-left:240px;min-height:100vh;display:flex;flex-direction:column;}
#topbar{padding:20px 32px;background:var(--c-escuro);border-bottom:1px solid var(--borda);display:flex;align-items:center;justify-content:space-between;}
#topbar h2{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;}
#content{padding:28px 32px;flex:1;}

/* CARDS */
.card{background:var(--c-card);border:1px solid var(--borda);border-radius:var(--radius);padding:20px;box-shadow:0 4px 24px rgba(0,0,0,.5);}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.ct{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}

/* STATS */
.sc{background:var(--c-card);border:1px solid var(--borda);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.sc.am::before{background:var(--amarelo);} .sc.vd::before{background:var(--verde);} .sc.az::before{background:var(--azul);} .sc.vr::before{background:var(--vermelho);}
.sl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.sv{font-family:'Syne',sans-serif;font-size:36px;font-weight:800;margin:4px 0;}
#s-at{font-family:'Syne',sans-serif;font-size:30px;font-weight:800;margin:4px 0;}
.sv.am{color:var(--amarelo);} .sv.vd{color:var(--verde);} .sv.az{color:var(--azul);} .sv.vr{color:var(--vermelho);}

/* BOTÕES */
.btn{padding:9px 18px;border-radius:8px;border:none;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;}
.bp{background:var(--amarelo);color:var(--preto);} .bp:hover{background:var(--amarelo-e);}
.bg{background:transparent;color:var(--muted);border:1px solid var(--borda);} .bg:hover{border-color:var(--muted);color:var(--texto);}
.bv{background:var(--verde);color:#fff;} .bv:hover{background:#3d9e6e;}
.br{background:var(--vermelho);color:#fff;} .br:hover{background:#c44242;}
.bs{padding:5px 11px;font-size:12px;border-radius:6px;}

/* FORM */
.fg{margin-bottom:14px;}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;}
.fg input,.fg select,.fg textarea{width:100%;padding:10px 14px;background:var(--c-medio);border:1px solid var(--borda);border-radius:8px;color:var(--texto);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color .15s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--amarelo);}
.fg textarea{resize:vertical;min-height:70px;}
.fg select option{background:var(--c-escuro);}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}

/* MODAL */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s;}
.mo.open{opacity:1;pointer-events:all;}
.md{background:var(--c-escuro);border:1px solid var(--borda);border-radius:16px;padding:28px;width:560px;max-width:95vw;max-height:90vh;overflow-y:auto;transform:scale(.95);transition:transform .2s;}
.mo.open .md{transform:scale(1);}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.mh h3{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;}
.mc{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;}
.mc:hover{color:var(--texto);}
.mf{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}

/* BADGE */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.bvd{background:rgba(76,175,130,.15);color:var(--verde);}
.bam{background:rgba(245,196,0,.15);color:var(--amarelo);}
.baz{background:rgba(74,144,217,.15);color:var(--azul);}
.bre{background:rgba(224,82,82,.15);color:var(--vermelho);}
.bla{background:rgba(224,140,48,.15);color:var(--laranja);}

/* TOAST */
#tc{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{padding:12px 18px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.4);animation:sIn .3s ease;min-width:220px;}
.toast.success{background:var(--verde);color:#fff;} .toast.error{background:var(--vermelho);color:#fff;} .toast.info{background:var(--c-medio);color:var(--texto);border:1px solid var(--borda);}
@keyframes sIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* EMPTY */
.empty{text-align:center;padding:48px 20px;color:var(--muted);}
.empty .ei{font-size:40px;margin-bottom:12px;}

/* TABLE */
.tw{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;padding:10px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--borda);font-weight:600;white-space:nowrap;}
td{padding:10px 14px;border-bottom:1px solid #1e1e1e;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,.02);}

/* TABELA DE ROTA */
.rtw{overflow-x:auto;}
.rt{width:100%;border-collapse:collapse;font-size:14px;}
.rt thead th{background:var(--c-medio);color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.6px;padding:10px 14px;border-bottom:2px solid var(--borda);white-space:nowrap;}
.rt tbody tr{transition:background .1s;}
.rt tbody tr:hover td{background:rgba(255,255,255,.025);}
.rt td{padding:10px 14px;border-bottom:1px solid #1e1e1e;vertical-align:middle;}
.rt tr:last-child td{border-bottom:none;}

.rt tr.stripe-a td{background:rgba(255,255,255,.012);}
.rt tr.l-emb{border-left:3px solid var(--verde);}
.rt tr.l-des{border-left:3px solid var(--azul);}

.td-h{width:30px;text-align:center;color:var(--muted);cursor:grab;font-size:16px;user-select:none;padding:10px 6px;}
.td-h:hover{color:var(--amarelo);}
.td-h:active{cursor:grabbing;}
.rt tr.dragging{opacity:.35;}
.rt tr.drag-over td{border-top:2px solid var(--amarelo);background:rgba(245,196,0,.06)!important;}

.td-n{width:34px;text-align:center;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--muted);}
.td-al{min-width:160px;}
.al-nome{font-weight:600;font-size:14px;}
.al-sub{font-size:11px;color:var(--muted);margin-top:2px;display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.td-lo{color:var(--muted);font-size:13px;min-width:160px;max-width:240px;}
.td-si{text-align:center;white-space:nowrap;}
.bsit{padding:6px 16px;border-radius:20px;border:none;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s;min-width:126px;text-align:center;}
.bsit.emb{background:rgba(76,175,130,.18);color:var(--verde);border:1px solid rgba(76,175,130,.35);}
.bsit.emb:hover{background:rgba(76,175,130,.32);}
.bsit.des{background:rgba(74,144,217,.18);color:var(--azul);border:1px solid rgba(74,144,217,.35);}
.bsit.des:hover{background:rgba(74,144,217,.32);}
.td-oc{text-align:center;width:80px;}
.on{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;display:inline-block;min-width:36px;text-align:center;}
.td-rm{width:36px;text-align:center;}
.btn-rm{background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;padding:4px;border-radius:4px;transition:color .15s;}
.btn-rm:hover{color:var(--vermelho);}

/* Barra hero */
.hero{display:flex;align-items:center;gap:20px;padding:16px 20px;background:var(--c-medio);border-radius:10px;margin-bottom:18px;flex-wrap:wrap;}
.hero-num{font-family:'Syne',sans-serif;font-size:52px;font-weight:800;color:var(--amarelo);line-height:1;}
.hero-bar{flex:1;min-width:120px;}
.hb-track{height:8px;border-radius:4px;background:var(--borda);overflow:hidden;margin-bottom:4px;}
.hb-fill{height:100%;border-radius:4px;background:var(--verde);transition:width .4s;}
.hb-fill.q{background:var(--amarelo);} .hb-fill.l{background:var(--vermelho);}
.hero-stats{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);}

/* Período tags */
.pt{display:inline-flex;align-items:center;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700;text-transform:uppercase;}
.pt-m{background:rgba(245,196,0,.15);color:var(--amarelo);}
.pt-t{background:rgba(224,140,48,.15);color:var(--laranja);}
.pt-i{background:rgba(74,144,217,.15);color:var(--azul);}

/* Save indicator */
.si{font-size:12px;display:none;align-items:center;gap:5px;}
.si.v{display:flex;color:var(--amarelo);}

/* Misc */
.st{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;margin-bottom:6px;}
.ss{color:var(--muted);font-size:14px;margin-bottom:24px;}
.page{display:none;animation:fIn .2s ease;}
.page.active{display:block;}
@keyframes fIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.stop-row td{background:rgba(245,196,0,.05)!important;border-top:1px dashed rgba(245,196,0,.25);border-bottom:1px dashed rgba(245,196,0,.25);}
.stop-label{font-size:11px;color:var(--amarelo);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}

.aluno-opt{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--c-medio);border-radius:8px;margin-bottom:6px;}
.aluno-res{padding:10px 12px;background:var(--c-medio);border-radius:8px;cursor:pointer;border:1px solid transparent;transition:border-color .15s;}
.aluno-res:hover{border-color:var(--amarelo);}
.aluno-opt-info{flex:1;min-width:0;}
.aluno-opt-nome{font-weight:600;font-size:13px;}
.aluno-opt-sub{font-size:11px;color:var(--muted);}

/* CIDADE AUTOCOMPLETE */
.cidade-wrap { position:relative; }
.cidade-dropdown { position:absolute; top:100%; left:0; right:0; background:var(--c-medio);
    border:1px solid var(--amarelo); border-top:none; border-radius:0 0 8px 8px;
    max-height:210px; overflow-y:auto; z-index:500; display:none; }
.cidade-opt { padding:10px 14px; cursor:pointer; font-size:13px;
    border-bottom:1px solid var(--borda); transition:background .1s; }
.cidade-opt:last-child { border-bottom:none; }
.cidade-opt:hover, .cidade-opt.ativo { background:rgba(245,196,0,.12); color:var(--amarelo); }
.cidade-loading { padding:10px 14px; font-size:12px; color:var(--muted); }
.drop-cadastrar-bairro { padding:9px 14px; font-size:12px; font-weight:600; color:var(--azul); cursor:pointer; border-top:1px solid var(--borda); transition:background .1s; }
.drop-cadastrar-bairro:hover { background:rgba(74,144,217,.08); }

/* MOBILE */
#mbt{display:none;}
.so{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1099;}
.so.open{display:block;}
@media(max-width:900px){
    #sidebar{transform:translateX(-100%);} #sidebar.open{transform:translateX(0);}
    #main{margin-left:0;} #content{padding:16px;} #topbar{padding:10px 16px;align-items:center;}
    .g2,.g3,.g4{grid-template-columns:1fr;} .fr,.fr3{grid-template-columns:1fr;}
    #mbt{display:flex;align-items:center;background:none;border:none;color:var(--texto);font-size:22px;cursor:pointer;}
    .td-lo{display:none;} .hero-bar{min-width:80px;}
}
/* Oculta botões de zoom em touch — pinça substitui */
@media (pointer: coarse) { .maplibregl-ctrl-zoom-in, .maplibregl-ctrl-zoom-out { display: none !important; } }

/* Chips dos meses do custo fixo. Doze alvos numa linha só: no celular eles
   quebram em duas, e cada um tem 34px de largura — abaixo disso o polegar erra. */
.mcf-meses{display:flex;flex-wrap:wrap;gap:5px;}
.mcf-mes{min-width:34px;padding:7px 0;border-radius:7px;border:1px solid var(--borda);
         background:var(--c-medio);color:var(--muted);font-family:'DM Sans',sans-serif;
         font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:all .12s;}
.mcf-mes:hover{border-color:var(--muted);color:var(--texto);}
.mcf-mes.on{background:var(--amarelo);border-color:var(--amarelo);color:var(--preto);}
/* A prévia do ano no custo fixo. Fundo próprio porque ela é conclusão, não campo:
   quem bate o olho no formulário tem de ver o total sem procurar. */
.mcf-previa:empty{display:none;}
.mcf-previa{margin-bottom:14px;padding:10px 13px;border-radius:8px;font-size:13px;line-height:1.55;
            background:rgba(90,140,220,.10);border:1px solid rgba(90,140,220,.26);color:var(--texto);}
.mcf-previa b{font-weight:700;}
.mcf-previa .fraco{color:var(--muted);font-size:12px;display:block;margin-top:3px;}
/* A segunda linha da prévia: quantos pagamentos correm de fato até o fim da
   vigência. Separada por um filete porque é outra pergunta — a de cima compara
   este custo com outros pelo ano, esta diz o que sai deste contrato. */
.mcf-previa .previa-fim{display:block;margin-top:8px;padding-top:8px;
            border-top:1px solid rgba(90,140,220,.26);}

/* ── Ocorrência: relato original + histórico ─────────────────────────────────
   O relato original é o que o motorista sentiu, e não se reescreve: ele aparece
   como texto fixo, com a cara de campo desabilitado, para que ninguém procure
   onde editar. Abaixo dele o caso ANDA — cada ida à oficina vira uma linha, e é
   a sequência que responde "isso já foi visto antes?" quando o barulho volta. */
.oc-orig{padding:10px 14px;border-radius:8px;background:var(--c-escuro);border:1px solid var(--borda);
         color:var(--muted);font-size:14px;line-height:1.5;}
.oc-orig b{color:var(--texto);font-weight:600;}
.oc-orig .fraco{display:block;margin-top:4px;font-size:12px;}
.oc-hist{max-height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.oc-hist .vazio{color:var(--muted);font-size:13px;font-style:italic;}
/* Barra à esquerda no lugar de caixa fechada: a linha do tempo se lê de cima
   para baixo e a barra dá a coluna que amarra as datas. */
.oc-item{border-left:2px solid var(--borda);padding:2px 0 2px 11px;}
.oc-item.conclui{border-left-color:var(--verde);}
.oc-item .oc-quando{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.oc-item .oc-texto{font-size:13.5px;line-height:1.55;color:var(--texto);white-space:pre-wrap;}