: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; }
dialog.modal { border: 1px solid var(--borda); border-radius: 10px; padding: 18px; width: min(720px, 94vw); max-height: 90vh; overflow: auto; background: var(--card); color: inherit; }
dialog.modal::backdrop { background: rgba(0, 0, 0, .45); }
dialog.modal h2 { margin: 0 0 12px; font-size: 17px; }
.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); }
}
dialog.modal.largo { width: min(960px, 96vw); }
.form-grid h3.secao { grid-column: 1 / -1; margin: 10px 0 0; padding-bottom: 4px; font-size: 14px; border-bottom: 1px solid var(--borda); }
.form-grid h3.secao:first-child { margin-top: 0; }

/* ---- visual: cores, icones e destaques ---- */
header { background: linear-gradient(90deg, #0f1b36, #1e3a78); box-shadow: 0 2px 8px #0004; }
header .marca { font-size: 17px; letter-spacing: .3px; }
#vivo { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #ffffff1f; white-space: nowrap; }
#vivo.vivo-ok { color: #8cf0ac; } #vivo.vivo-erro { color: #ffb4ae; background: #d03a2f55; }
header #quem { margin-left: 10px; }
h1.titulo { font-size: 22px; padding-left: 12px; border-left: 5px solid var(--azul); }
aside { background: linear-gradient(180deg, #16254a, #101b38); }
aside nav a::before, aside summary::before { display: inline-block; width: 26px; }
aside nav a[href="/dashboard"]::before { content: "📊"; } aside nav a[href="/"]::before { content: "🗺️"; } aside nav a[href="/veiculos"]::before { content: "🚘"; } aside nav a[href="/mosaico"]::before { content: "🧩"; }
aside details:nth-of-type(1) > summary::before { content: "🗂️"; } aside details:nth-of-type(2) > summary::before { content: "📈"; }
aside details a::before { content: "•"; width: 14px; opacity: .6; }
aside nav a:hover, aside summary:hover { padding-left: 22px; transition: padding .12s; }
.kpi { position: relative; border-radius: 12px; box-shadow: 0 2px 6px #1f293712; transition: transform .12s, box-shadow .12s; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 14px #1f293722; }
.kpi .kpi-ico { position: absolute; top: 10px; right: 12px; font-size: 26px; font-style: normal; opacity: .85; }
.kpi.tot { border-top-color: var(--marinho); }
.kpi.mov b { color: var(--verde); } .kpi.par b { color: var(--azul); } .kpi.off b { color: var(--verm); } .kpi.sem b { color: var(--cinza); }
.cx { border-radius: 12px; border-top: 3px solid var(--azul); }
.cx h2 { font-size: 17px; }
button, .botao { transition: filter .12s, transform .06s; } button:hover:not(:disabled), .botao:hover { filter: brightness(1.1); } button:active:not(:disabled) { transform: translateY(1px); }
a.botao.sec { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
th { background: #dfe8f7; color: #1b2a4e; }
tbody tr:nth-child(even) td { background: #f8fafd; }
/* contadores clicaveis (mapa e listagem) */
.contadores { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #fff; color: var(--texto); border: 1px solid var(--borda); border-radius: 16px; padding: 4px 10px; font-size: 13px; }
.chip.mov { border-color: var(--verde); } .chip.par { border-color: var(--azul); } .chip.off { border-color: var(--verm); } .chip.sem { border-color: var(--cinza); }
.chip.sel { color: #fff; background: var(--marinho); } .chip.mov.sel { background: var(--verde); } .chip.par.sel { background: var(--azul); } .chip.off.sel { background: var(--verm); } .chip.sem.sel { background: var(--cinza); }
.contadores.grande { margin-bottom: 12px; gap: 12px; }
.contadores.grande .chip { display: flex; flex-direction: column; align-items: flex-start; min-width: 140px; border-radius: 12px; border-width: 1px; border-top-width: 5px; padding: 10px 14px; box-shadow: 0 2px 6px #1f293712; position: relative; }
.contadores.grande .chip b { font-size: 28px; line-height: 1.1; } .contadores.grande .chip small { color: inherit; opacity: .8; font-size: 13px; }
.contadores.grande .chip .chip-ico { position: absolute; top: 10px; right: 12px; font-size: 20px; }
/* icones dos veiculos */
.ico-tipo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; background: var(--cinza); flex: none; box-shadow: 0 1px 3px #0003; }
.ico-tipo.mov { background: #c8f0d6; box-shadow: 0 0 0 2px var(--verde); } .ico-tipo.par { background: #cfe2fb; box-shadow: 0 0 0 2px var(--azul); }
.ico-tipo.off { background: #f8d4d0; box-shadow: 0 0 0 2px var(--verm); } .ico-tipo.sem { background: #e3e6ea; box-shadow: 0 0 0 2px var(--cinza); }
.selo { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff; background: var(--cinza); }
.selo.mov { background: var(--verde); } .selo.par { background: var(--azul); } .selo.off { background: var(--verm); }
.sub-linha { display: block; color: var(--suave); font-size: 11px; }
table.larga td, table.larga th { padding: 8px 10px; }
.st.mov { color: var(--verde); font-weight: 600; } .st.par { color: var(--azul); font-weight: 600; } .st.off { color: var(--verm); font-weight: 600; }
/* marcador no mapa: descricao e placa em cima, icone do tipo embaixo */
.pinw { display: flex; flex-direction: column; align-items: center; width: 130px; }
.pin-rot { background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: 1px 6px 2px; text-align: center; line-height: 1.15; box-shadow: 0 1px 4px #0004; max-width: 130px; margin-bottom: 2px; }
.pin-rot b { display: block; font-size: 12px; color: #14213d; letter-spacing: .5px; } .pin-rot span { display: block; font-size: 10px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; }
.pin { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px #0006; background: var(--cinza); }
.pin i { font-style: normal; font-size: 18px; line-height: 1; }
.pin.mov { background: var(--verde); } .pin.par { background: var(--azul); } .pin.off { background: var(--verm); } .pin.sem { background: var(--cinza); }
.pin.mov { animation: pulsa 1.8s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 #1a9b4a99, 0 2px 6px #0006; } 70% { box-shadow: 0 0 0 12px #1a9b4a00, 0 2px 6px #0006; } 100% { box-shadow: 0 0 0 0 #1a9b4a00, 0 2px 6px #0006; } }
@media (prefers-reduced-motion: reduce) { .pin.mov { animation: none; } }
/* popup do veiculo */
.leaflet-popup-content { margin: 0; width: 290px !important; }
.leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 10px; }
.pop-tit { display: flex; gap: 8px; align-items: center; padding: 9px 12px; color: #fff; background: var(--cinza); font-size: 15px; }
.pop-tit.mov { background: var(--verde); } .pop-tit.par { background: var(--azul); } .pop-tit.off { background: var(--verm); }
.pop-ico { font-size: 20px; }
.pop-corpo { padding: 8px 12px; max-height: 260px; overflow-y: auto; }
.pop-lin { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--borda); font-size: 12.5px; }
.pop-lin span { color: var(--suave); } .pop-lin b { text-align: right; font-weight: 600; }
.pop-ac { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 10px; background: #f4f7fc; }
/* lista lateral do mapa */
.lateral-dir { width: 340px; }
.lateral-dir .contadores { justify-content: space-between; }
.cli-grupo { background: linear-gradient(90deg, #dfe8f7, #eef3fb); color: #1b2a4e; }
.item-veic { align-items: center; transition: background .1s; } .item-veic .tx { min-width: 0; } .item-veic:hover { background: #eaf2ff; }
.item-veic .ico-tipo { width: 32px; height: 32px; font-size: 16px; }

/* assistente "Subir equipamento" */
.etapas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0 14px; }
.etapa { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #eef1f6; color: #5b6578; font-weight: 600; }
.etapa .etapa-n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #cfd6e4; color: #fff; align-items: center; justify-content: center; font-size: 13px; }
.etapa.atual { background: #fff4d6; color: #8a5a00; } .etapa.atual .etapa-n { background: #f0a800; }
.etapa.feito { background: #dff5e6; color: #14663a; } .etapa.feito .etapa-n { background: #1f9d55; }
.lista-passos { padding-left: 20px; line-height: 1.6; }
.sms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; padding: 10px 12px; border: 1px solid #d5dcea; border-radius: 10px; background: #f7f9fd; }
.sms b { flex-basis: 100%; }
.sms code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 6px 8px; background: #fff; border-radius: 6px; border: 1px solid #e1e6f0; user-select: all; }

/* marca GeoNext */
header .marca { display: flex; align-items: center; }
.marca-logo { display: block; height: 34px; width: auto; }
body.login .caixa h1 { margin: 0 0 14px; }
body.login .caixa .marca-logo, .adm-marca .marca-logo { height: 64px; background: #0f1b36; padding: 10px 18px; border-radius: 10px; margin: 0 auto; box-sizing: content-box; }
/* tela de login GeoNext */
body.gn-login { display: block; min-height: 100vh; padding: 0; background: radial-gradient(1200px 600px at 20% -10%, #25396f 0%, transparent 60%), radial-gradient(900px 500px at 100% 110%, #ff7a0033 0%, transparent 55%), linear-gradient(160deg, #0b1330 0%, #14213d 60%, #0f1b36 100%); }
.gn-wrap { margin: 0; width: 100%; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 24px 16px; }
.gn-topo { width: min(400px, 100%); background: #0b1330; border-radius: 16px 16px 0 0; padding: 26px 20px 22px; text-align: center; border-bottom: 3px solid #ff7a00; box-shadow: 0 -1px 0 #ffffff14 inset; }
.gn-topo .marca-logo { height: 74px; margin: 0 auto; background: none; padding: 0; border-radius: 0; box-sizing: border-box; }
.gn-card.form.caixa { width: min(400px, 100%); max-width: 400px; padding: 0; border: 0; border-radius: 0 0 16px 16px; background: #fff; box-shadow: 0 24px 60px #0007; gap: 0; }
.gn-corpo { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.gn-corpo h1 { margin: 0; font-size: 22px; color: #0f1b36; }
.gn-sub { margin: -6px 0 4px; color: #64708a; font-size: 14px; }
.gn-corpo label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #3b4660; }
.gn-corpo input { font-size: 16px; padding: 12px 14px; border: 1px solid #cfd6e4; border-radius: 10px; background: #f7f9fc; width: 100%; box-sizing: border-box; }
.gn-corpo input:focus { outline: 2px solid #ff7a00; outline-offset: 0; border-color: #ff7a00; background: #fff; }
.gn-senha { position: relative; display: block; }
.gn-senha input { padding-right: 46px; }
.gn-olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: #64708a; border-radius: 8px; cursor: pointer; padding: 0; }
.gn-olho:hover, .gn-olho.ligado { color: #ff7a00; }
.gn-corpo button[type=submit] { background: #ff7a00; color: #fff; border: 0; padding: 13px; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 4px; }
.gn-corpo button[type=submit]:hover { background: #e86d00; }
.gn-esqueci { align-self: center; color: #1e5fc4; font-size: 14px; text-decoration: none; }
.gn-esqueci:hover { text-decoration: underline; }
.gn-corpo p { margin: 0; line-height: 1.5; color: #3b4660; font-size: 14px; }
.gn-corpo .erro { background: #fdecec; color: #a12121; padding: 10px 12px; border-radius: 8px; border: 1px solid #f3c2c2; }
.gn-rodape { color: #9fb0d6; font-size: 12px; margin: 18px 0 0; }