:root { --fundo: #eef1f6; --card: #fff; --texto: #1f2937; --suave: #5f6b7a; --azul: #1e6fd9; --marinho: #14213d; --lateral: #1b2a4e; --lateral2: #26396b; --verde: #1a9b4a; --verm: #d03a2f; --cinza: #8a94a3; --borda: #d9dee6; --pbar: 52px; --larg: 236px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); }
a { color: var(--azul); }
header { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; height: var(--pbar); display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--marinho); color: #fff; }
header .marca small { font-weight: 400; opacity: .7; }
header #quem { margin-left: auto; font-size: 14px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header form { margin: 0; }
header button { background: transparent; border: 1px solid #fff5; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
header #menubtn { border: 0; font-size: 22px; padding: 4px 8px; line-height: 1; }
.corpo { display: flex; padding-top: var(--pbar); min-height: 100%; }
aside { position: fixed; top: var(--pbar); bottom: 0; left: 0; width: var(--larg); background: var(--lateral); overflow-y: auto; z-index: 1100; }
aside nav { display: flex; flex-direction: column; padding: 8px 0; }
aside nav a, aside summary { display: block; padding: 11px 18px; color: #dbe4f7; text-decoration: none; cursor: pointer; font-size: 15px; list-style: none; }
aside summary::-webkit-details-marker { display: none; }
aside summary::after { content: "\25B8"; float: right; opacity: .7; }
aside details[open] > summary::after { content: "\25BE"; }
aside nav a:hover, aside summary:hover { background: var(--lateral2); color: #fff; }
aside details[open] { background: #172547; }
aside details a { padding-left: 34px; font-size: 14px; background: var(--lateral2); border-bottom: 1px solid #1b2a4e; }
aside nav a.ativo { background: var(--azul); color: #fff; font-weight: 600; }
main { margin-left: var(--larg); padding: 16px 18px 28px; width: calc(100% - var(--larg)); min-width: 0; }
body.menu-fechado aside { display: none; }
body.menu-fechado main { margin-left: 0; width: 100%; }
h1.titulo { margin: 0 0 12px; font-size: 21px; font-weight: 600; }
.aviso { color: var(--suave); margin: 8px 0; }
.erro { color: var(--verm); }
.ok { color: var(--verde); }
.barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.barra .espaco { margin-left: auto; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; color: var(--texto); min-width: 0; }
button, .botao { font: inherit; padding: 8px 16px; border: 0; border-radius: 6px; background: var(--azul); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
button.sec { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
button.perigo { background: var(--verm); }
button.peq { padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
.cx { background: var(--card); border: 1px solid var(--borda); border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.cx h2 { margin: 0 0 10px; font-size: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--borda); border-radius: 8px; padding: 14px; border-top: 5px solid var(--cinza); }
.kpi b { display: block; font-size: 30px; line-height: 1.1; }
.kpi span { color: var(--suave); font-size: 13px; }
.kpi.mov { border-top-color: var(--verde); } .kpi.par { border-top-color: var(--azul); } .kpi.off { border-top-color: var(--verm); } .kpi.sem { border-top-color: var(--cinza); }
.tabela-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--borda); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--borda); font-size: 14px; white-space: nowrap; }
th { background: #e8edf5; font-weight: 600; position: sticky; top: 0; }
td.num, th.num { text-align: right; }
tr.clic { cursor: pointer; } tr.clic:hover td { background: #f4f7fc; }
tr.sub td { background: #f7f9fc; white-space: normal; }
.detalhe { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 18px; }
.detalhe div span { display: block; font-size: 12px; color: var(--suave); }
.bola { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--cinza); vertical-align: -1px; margin-right: 6px; }
.bola.mov, .pino.mov { background: var(--verde); } .bola.par, .pino.par { background: var(--azul); } .bola.off, .pino.off { background: var(--verm); } .bola.sem, .pino.sem { background: var(--cinza); }
.pag { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; }
.mapa { height: 460px; border-radius: 8px; border: 1px solid var(--borda); margin: 10px 0; }
.mapawrap { display: flex; height: calc(100vh - var(--pbar) - 32px); min-height: 380px; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: #fff; }
.mapawrap .mapa { flex: 1; height: auto; margin: 0; border: 0; border-radius: 0; min-width: 0; }
.lateral-dir { width: 320px; display: flex; flex-direction: column; border-left: 1px solid var(--borda); background: #fff; }
.lateral-dir .topo { padding: 10px; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 8px; }
.lateral-dir .topo .linha { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--suave); }
.lateral-dir .topo select { flex: 1; }
.lista-cli { overflow-y: auto; flex: 1; }
.cli-grupo { background: #e8edf5; padding: 7px 12px; font-weight: 600; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.item-veic { padding: 8px 12px; border-bottom: 1px solid var(--borda); display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 13px; }
.item-veic:hover { background: #f4f7fc; }
.item-veic b { font-size: 14px; } .item-veic small { display: block; color: var(--suave); }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.mini { background: var(--card); border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.mini h3 { margin: 0; padding: 8px 12px; font-size: 14px; background: #e8edf5; display: flex; justify-content: space-between; gap: 8px; }
.mini .mapa { height: 220px; margin: 0; border: 0; border-radius: 0; }
.mini p { margin: 0; padding: 6px 12px; font-size: 13px; color: var(--suave); }
body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.caixa { background: var(--card); padding: 24px; border-radius: 10px; border: 1px solid var(--borda); width: 100%; }
.caixa h1 { margin: 0 0 4px; font-size: 22px; } .caixa small { color: var(--suave); font-weight: 400; }
.pino { background: var(--cinza); border: 2px solid #fff; border-radius: 50%; width: 18px; height: 18px; box-shadow: 0 0 3px #0008; }
.rotulo { background: #fff; border: 1px solid var(--borda); border-radius: 4px; padding: 1px 5px; font-size: 12px; font-weight: 600; box-shadow: none; }
@media (max-width: 860px) {
  aside { display: none; } body.menu-aberto aside { display: block; box-shadow: 4px 0 12px #0006; }
  main { margin-left: 0; width: 100%; padding: 12px 16px 24px; }
  header #quem { display: none; } header form { margin-left: auto; }
  .mapawrap { flex-direction: column; height: auto; } .mapawrap .mapa { height: 380px; flex: none; } .lateral-dir { width: 100%; max-height: 340px; border-left: 0; border-top: 1px solid var(--borda); }
}