:root {
  --ok: #10B981;
  --atencao: #F59E0B;
  --critico: #EF4444;
  --verde-escuro: #166534;
  --accent: #2563EB;
}

* { box-sizing: border-box; }

.chartDica { color: #6B7280; font-size: 12px; margin: -6px 0 12px; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(160deg, #171233 0%, #0D0F18 45%, #05060A 100%);
  color: #F5F6FA;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 28px;
}
.topbar h1 { font-size: 20px; margin: 0 0 0 -40px; }
.topbarTitulo { display: flex; align-items: center; gap: 0px; position: relative; left: -50px; }
/* Fundo branco removido de verdade (scripts/removerFundoLogo.js, alfa real
   agora) — sem hack de blend, drop-shadow abraça a silhueta do ícone.
   position:relative;top desce o ícone um pouco (align-items:center do pai
   já centraliza, isso é só um nudge fino pedido pelo usuário). */
.logoTrackLand { height: 75px; width: auto; object-fit: contain; filter: drop-shadow(0px 0px 6px rgba(0,229,255,.4)); position: relative; top: 12px; }
.clienteLabel { font-size: 13px; color: #9CA3AF; display: flex; align-items: center; gap: 8px; }

/* Assinatura do dev — canto inferior direito. Era baixo contraste
   (rgba(255,255,255,.18)) de propósito pra não distrair; pedido do usuário
   pra ficar branco puro e bem visível no fundo escuro. */
.assinaturaDev {
  position: fixed; right: 10px; bottom: 6px; font-size: 10px; color: #FFFFFF; opacity: 1;
  pointer-events: none; user-select: none; letter-spacing: .02em;
  background: #000000; padding: 3px 8px; border-radius: 4px;
}
.clienteLabel select { max-width: 320px; text-overflow: ellipsis; }
select {
  background: rgba(255,255,255,.06);
  color: #F5F6FA;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
}
/* Lista aberta do <select> ignora o `color` do elemento pai (renderização
   nativa do SO) — sem isso o texto some num fundo branco. */
select option { background: #13151E; color: #F5F6FA; }
select option:hover, select option:checked, select option:focus { background: #2563EB; color: #fff; }

.tabs { display: flex; gap: 6px; padding: 0 28px; flex-wrap: wrap; }
.tabBtn {
  background: transparent;
  color: #9CA3AF;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px 8px 0 0;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}
.tabBtn.active { color: #F5F6FA; background: rgba(37,99,235,.18); border-color: rgba(96,165,250,.4); }

main { padding: 20px 28px 40px; }
.tab { display: none; }
.tab.active { display: flex; flex-direction: column; gap: 28px; } /* espaço uniforme entre as seções verticais de cada aba */
.filtrosAtivos:empty { display: none; } /* sem filtro ativo = div vazia, não deve gerar gap sozinha */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }

/* Barra "Total de Veículos" da aba Distribuição — dinâmica (filtrado/total) +
   mini-métricas geográficas, preenche o espaço vazio à direita do total sozinho. */
.resumoDistribuicao {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  background: rgba(255,255,255,.04); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 16px 20px;
}
.resumoDistribuicaoPrincipal .num { font-size: 26px; font-weight: 700; }
.resumoDistribuicaoPrincipal .label { font-size: 13px; color: #9CA3AF; margin-top: 2px; }
.resumoDistribuicaoMini { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #9CA3AF; }
.resumoDistribuicaoMini b { color: #F5F6FA; font-weight: 600; }

/* KPIs flat com divisores (aba Dashboard) — sem caixa/fundo, só linha vertical sutil entre indicadores. */
.kpis { display: flex; flex-wrap: wrap; justify-content: center; }
.kpis .kpiItem {
  flex: 1 1 0;
  padding: 4px 20px;
  border-right: 1px solid #ffffff15;
  text-align: center;
}
.kpis .kpiItem:first-child { padding-left: 20px; }
.kpis .kpiItem:last-child { border-right: none; }
.kpiItem .label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9CA3AF; margin: 0 0 6px; }
.kpiItem .label .kpiSub { text-transform: none; letter-spacing: normal; color: #60A5FA; } /* "(N selecionados)" quando filtro do Dashboard tá ativo */
.kpiItem .num { font-size: 26px; font-weight: 700; }
.card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 18px;
}
.card .num { font-size: 30px; font-weight: 700; }
.card .label { font-size: 13px; color: #9CA3AF; margin-top: 4px; }

/* Chip "Total" em Veículos (reset do filtro de KPI). */
.chipStatusVeiculo { cursor: pointer; transition: opacity .15s, filter .15s, border-color .15s, background .15s; }
.chipStatusVeiculo.inativo { opacity: .4; filter: grayscale(60%) brightness(.75); }
.chipStatusVeiculo.inativo:hover { opacity: .7; filter: grayscale(30%) brightness(.9); }
.chipStatusVeiculo.ativo { opacity: 1; border-width: 2px; }
.chipStatusVeiculo.total.ativo { border-color: rgba(255,255,255,.4); }

/* Cards de Tipo de Serviço/Status de Ação (aba Veículos): filtro global —
   clique seleciona, cor de cada card vem de KPI_DEFINICOES via --kpiCor.
   Dimming forte no inativo (opacity+grayscale+brightness) — antes só opacity
   .55 ficava sutil demais, usuário não enxergava diferença de "deselecionado". */
.kpiCard { cursor: pointer; transition: opacity .15s, filter .15s, border-color .15s, background .15s; border: 2px solid transparent; }
.kpiCard.inativo { opacity: .4; filter: grayscale(60%) brightness(.75); }
.kpiCard.inativo:hover { opacity: .7; filter: grayscale(30%) brightness(.9); }
.kpiCard.ativo { opacity: 1; border-color: var(--kpiCor); background: color-mix(in srgb, var(--kpiCor) 16%, transparent); }
.kpiCardTopo { display: flex; align-items: center; gap: 6px; }
.kpiCardTopo .label { margin: 0; }
.kpiPercent { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
.kpiBarraTrilho { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); margin-top: 8px; overflow: hidden; }
.kpiBarraFill { height: 100%; border-radius: 2px; background: var(--kpiCor); }
.chipStatusVeiculo.neutro.ativo { background: rgba(107,114,128,.16); border-color: #6B7280; }

.tableCard {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
}
/* Bloco do topo (título/busca/contador/Colunas▾) fica FORA da área de scroll -
   não precisa de sticky, é só o header fixo do card. */
.tableCard > .tableHeaderFixo {
  background: #13151E;
  padding: 14px 16px 10px;
  display: flex; flex-direction: column; gap: 8px;
  border-radius: 14px 14px 0 0;
}
.tableHeaderFixo .chartHeader { margin: 0; }
.tableHeaderFixo .tableTitle { margin: 0; padding: 0; }
.tableHeaderFixo .donutLegenda { margin: 0; padding: 0; }

/* Só isso aqui rola - <thead> gruda no topo DESSE container (top:0 simples,
   sem precisar medir altura de nada em JS: o header já ficou de fora). */
.table-container {
  overflow-y: auto;
  overflow-x: auto; /* tabela larga (muitas colunas) rola só dentro do card no celular, não empurra a página inteira */
  max-height: 70vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.table-container::-webkit-scrollbar { width: 8px; height: 8px; }
.table-container::-webkit-scrollbar-track { background: transparent; }
.table-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
.table-container::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  position: sticky; top: 0; z-index: 10;
  background-color: #13151E; /* solido - sem isso a linha de baixo aparece por tras ao rolar */
  text-align: left;
  padding: 10px 12px;
  color: #9CA3AF;
  font-weight: 600;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: #F5F6FA; }
th.colSelectorTh { text-align: right; padding: 6px 12px; }
th.colSelectorTh .colSelector { display: inline-block; }
td { padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.06); }
/* Cabecalho segue o alinhamento da coluna: numerico a direita, igual a celula.
   Sem isso o rotulo ficava a esquerda e o numero a direita da MESMA coluna, que
   e o que se le como cabecalho desalinhado. */
th.num { text-align: right; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th, td { vertical-align: middle; }
/* Tabela com <colgroup> (ver renderTable): largura da coluna nao muda a cada
   filtro. min-width 100% pra ocupar o card quando sobra espaco, e a soma das
   larguras maior que o card cai no overflow-x do .table-container. */
table.larguraFixa { table-layout: fixed; width: auto; min-width: 100%; }
table.larguraFixa th, table.larguraFixa td { overflow-wrap: anywhere; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; }

/* Feed de alertas (Dashboard) — substitui a tabela "Relatório Detalhado":
   1 linha por veículo bateria 0% + Atrasado/Sem comunicação, foco em ação. */
.alertList {
  display: flex; flex-direction: column; gap: 3px; max-height: 70vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.alertList::-webkit-scrollbar { width: 6px; }
.alertList::-webkit-scrollbar-track { background: transparent; }
.alertList::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.alertList::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); }
.alertRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 6px;
  padding: 5px 12px;
}
.alertRow .alertRowPlaca { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.alertRow .alertRowRodape { color: var(--critico); font-size: 12px; font-weight: 600; }
.alertRow .badge { padding: 1px 8px; font-size: 11px; }
.badge.ok { background: rgba(16,185,129,.16); color: var(--ok); }
.badge.ok .dot { background: var(--ok); }
.badge.atencao { background: rgba(245,158,11,.16); color: var(--atencao); }
.badge.atencao .dot { background: var(--atencao); }
.badge.critico { background: rgba(239,68,68,.16); color: var(--critico); }
.badge.critico .dot { background: var(--critico); }
.badge.neutro { background: rgba(255,255,255,.08); color: #9CA3AF; }
.badge.neutro .dot { background: #9CA3AF; }
.badge.verdeEscuro { background: rgba(22,101,52,.20); color: var(--verde-escuro); }
.badge.verdeEscuro .dot { background: var(--verde-escuro); }

/* Card "Ignição de Veículos no Mês Atual" (aba Veículos): donut à esquerda,
   abas + lista clicável à direita. */
.ignicaoMesGrid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.ignicaoMesPainel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ignicaoMesTabs { display: flex; gap: 8px; flex-wrap: wrap; }
#buscaIgnicaoMes { width: 100%; }
.ignicaoMesLista {
  display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; /* Firefox */
}
.ignicaoMesLista::-webkit-scrollbar { width: 6px; }
.ignicaoMesLista::-webkit-scrollbar-track { background: transparent; }
.ignicaoMesLista::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.ignicaoMesLista::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); }
.ignicaoMesRow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.03); font-size: 12px;
  cursor: default;
}
.ignicaoMesRow .ignicaoMesEsq { color: #9CA3AF; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ignicaoMesRow .placa { font-weight: 700; color: #F5F6FA; }
.ignicaoMesRow .info { color: #9CA3AF; flex-shrink: 0; }
.ignicaoMesRow .info.parado { color: #F87171; } /* vermelho suave — tempo parado na aba "Não deram ignição" */
@media (max-width: 560px) { .ignicaoMesGrid { grid-template-columns: 1fr; } }

/* Mapa da aba Distribuição: mapa + painel lateral "Top 5 polos da frota". */
.filtroDistribuicaoBar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mapaDistribuicaoLayout { display: flex; gap: 16px; align-items: flex-start; }
.mapaDistribuicaoMapa { position: relative; flex: 1; min-width: 0; }
.painelPolos { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.painelPolos h4 { margin: 0 0 2px; font-size: 12px; color: #9CA3AF; font-weight: 600; }
.painelPolosLista {
  display: flex; flex-direction: column; gap: 4px; max-height: 550px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.painelPolosLista::-webkit-scrollbar { width: 6px; }
.painelPolosLista::-webkit-scrollbar-track { background: transparent; }
.painelPolosLista::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.painelPolosLista::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); }
.polosRow {
  display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 6px 8px;
  border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.polosRow:hover { background: rgba(255,255,255,.09); }
.polosRow.ativo { background: rgba(16,185,129,.14); border-color: var(--ok); }
.polosRow .polosCidade { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polosRow .polosValor { color: #9CA3AF; flex-shrink: 0; }
@media (max-width: 720px) {
  /* align-items:flex-start (regra base) controla altura no desktop
     (flex-direction:row) mas vira largura em column — sem stretch aqui,
     o container do mapa encolhia pro conteúdo (~0px de largura), mapa
     ficava impossível de desenhar (bug real: mapa em branco no celular). */
  .mapaDistribuicaoLayout { flex-direction: column; align-items: stretch; }
  /* flex-direction:row aqui fazia título+lista ficarem lado a lado, a lista
     (sem width própria num contexto row) encolhia pro conteúdo — ficava
     espremida numa coluna estreita com scrollbar, feio no celular. Column é
     o que já era esperado: título em cima, lista ocupando 100% embaixo. */
  .painelPolos { width: 100%; flex-direction: column; }
  .painelPolosLista { max-height: 320px; }
}

.empty { padding: 24px; color: #9CA3AF; text-align: center; }
.refInfo { font-size: 12px; color: #9CA3AF; margin: 0 0 10px; }
a { color: #60A5FA; }

.donutRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.donutCard h3, .chartTitle, .tableTitle {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #9CA3AF; text-align: center;
}
.tableTitle { text-align: left; padding: 14px 16px 0; }
.donutWrap { position: relative; height: 200px; }
.donutLegenda { margin: 10px 0 0; font-size: 11px; color: #9CA3AF; text-align: center; }
/* Legenda de gráfico (rosca/pizza) como grid flexível: sem isso o último item
   caía sozinho numa linha desalinhada ("Não rodou no período: 3") e, na quebra,
   o marcador colorido se descolava do próprio rótulo. Cada item é um
   inline-flex fechado, então dot e texto nunca se separam. */
.donutCard .donutLegenda, #legendaDistribuicao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.donutCard .donutLegenda { justify-content: center; }
#legendaDistribuicao { justify-content: flex-start; }
.legendItemEstatico { display: inline-flex; align-items: center; gap: 5px; }
.legendDot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); flex: 0 0 auto; }
/* Fora de um container flex (ex.: o nome da cidade no painel de polos) o dot
   ainda precisa do espaçamento e do alinhamento antigos. */
.legendItemEstatico > .legendDot, .legendItem > .legendDot { margin-right: 0; }
.polosCidade .legendDot { display: inline-block; margin-right: 4px; vertical-align: middle; }
.legendItem {
  background: none; border: none; padding: 0; margin: 0; font: inherit; color: #9CA3AF;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; opacity: .4; filter: grayscale(60%) brightness(.8);
  transition: opacity .15s, filter .15s, color .15s;
}
.legendItem.ativo, .legendItem.semFiltro { opacity: 1; filter: none; color: #F5F6FA; }
.legendItem:hover { opacity: .7; filter: grayscale(30%) brightness(.9); }
.legendItem.ativo:hover, .legendItem.semFiltro:hover { opacity: 1; filter: none; }
.filtrosAtivos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 14px; }
.filtroChip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(37,99,235,.18); border: 1px solid rgba(96,165,250,.4);
  color: #DBEAFE; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12px;
}
.filtroChip button { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; opacity: .8; }
.filtroChip button:hover { opacity: 1; }
#limparFiltrosComunicacao { background: none; border: none; color: #60A5FA; cursor: pointer; font-size: 12px; text-decoration: underline; }

/* Pino numerado no mapa de Distribuição — ponto com mais de 5 veículos vira
   1 pino com contagem em vez de N pontinhos empilhados (mesmo padrão visual
   do roteirizador_track, "heat-num-pin"). */
.popupLinha { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
.popupLista { max-height: 220px; overflow-y: auto; margin-top: 6px; border-top: 1px solid rgba(0,0,0,.1); padding-top: 4px; }
.heatNumPin {
  width: 34px; height: 34px; border-radius: 999px; background: var(--accent);
  border: 3px solid #F5F6FA; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.45); color: #fff; font-weight: 800; font-size: 13px;
}
.barWrap { position: relative; height: 220px; }
.chartHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chartHeader .chartTitle { margin: 0; text-align: left; }

.pillBtn {
  background: rgba(255,255,255,.05);
  color: #9CA3AF;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  cursor: pointer;
  max-width: 100%; /* alguns campos de busca têm width fixo inline (ex: 260px) — no celular isso estourava a largura da tela */
  transition: opacity .15s, filter .15s, border-color .15s, background .15s;
}
.pillBtn.active { color: #F5F6FA; background: rgba(37,99,235,.22); border-color: rgba(96,165,250,.45); }

/* Abas "Deram/Não Deram Ignição" (card Ignição do Mês): cor própria (verde/
   vermelho, igual o emoji do botão) quando ativa, dim forte quando inativa —
   o .pillBtn.active genérico (azul) não deixava claro qual das 2 tava
   selecionada, ficavam parecidas demais. */
#tabIgnicaoMesSim.active { border-color: #10B981; background: rgba(16,185,129,.2); }
#tabIgnicaoMesNao.active { border-color: #EF4444; background: rgba(239,68,68,.2); }
#tabIgnicaoMesSim:not(.active), #tabIgnicaoMesNao:not(.active) { opacity: .4; filter: grayscale(60%) brightness(.75); }
#tabIgnicaoMesSim:not(.active):hover, #tabIgnicaoMesNao:not(.active):hover { opacity: .7; filter: grayscale(30%) brightness(.9); }

.colSelector { position: relative; }
.colSelector summary { list-style: none; }
.colSelector summary::-webkit-details-marker { display: none; }
.colSelectorPanel {
  /* z-index 20 (não 5): `th` da tabela é sticky com z-index:10 — painel
     abaixo disso ficava parcialmente atrás do cabeçalho, clique caía no
     <th> em vez do botão (bug real achado em teste, 2026-08-12). */
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #13151E;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 200px;
  display: grid;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.colSelectorPanel label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #F5F6FA; cursor: pointer; }

/* Dropdown "Baixar" (Frota) fica logo depois de "Colunas" numa fileira
   estreita — o painel de 200px com right:0 (padrão genérico acima)
   ancorava no próprio botão gatilho (~90px) e estourava pra fora da tela
   à esquerda (x negativo, bug real achado em teste). left:0 resolve porque
   sobra espaço à direita nesse ponto do layout. */
#downloadVeiculos .colSelectorPanel { right: auto; left: 0; }
#downloadVeiculos .colSelectorPanel button { text-align: left; }

.mapaCalorEl { height: 600px; border-radius: 10px; overflow: hidden; }

/* ===== Celular ===== */
body { overflow-x: hidden; } /* rede de segurança — nada aqui deve gerar scroll horizontal na página toda */
@media (max-width: 640px) {
  .topbar { padding: 14px 16px; gap: 8px; }
  /* Os -50px/-40px são um ajuste fino só pro layout desktop (posição da logo
     em relação ao título) — no celular sobravam pra fora da tela à esquerda. */
  .topbarTitulo { position: static; left: 0; }
  .topbar h1 { margin-left: 0; font-size: 16px; }
  .logoTrackLand { height: 48px; top: 0; }
  .clienteLabel { font-size: 11px; }
  .tabs { padding: 0 12px; gap: 4px; }
  .tabBtn { flex: 1 1 auto; padding: 8px 6px; font-size: 12px; text-align: center; }
  main { padding: 14px 12px 28px; gap: 18px; }
  .mapaCalorEl { height: 360px; }
  .kpis .kpiItem { border-right: none; border-bottom: 1px solid #ffffff15; flex: 1 1 45%; padding: 8px 10px; }
  .kpis .kpiItem:last-child { border-bottom: none; }
  .table-container { max-height: 60vh; }
}

/* Aba Alarmes: veículo com excesso acima de 100 km/h no mês. Só realce de
   linha; a cor vem do mesmo token --critico do resto do site. */
tbody tr.linhaCritica td:first-child { box-shadow: inset 3px 0 0 var(--critico); }
tbody tr.linhaCritica { background: rgba(239,68,68,.06); }

/* Mini legenda ao lado do titulo da tabela: quantos veiculos estao na tela.
   Ganha cor de destaque quando o numero exibido nao e a frota inteira. */
.contadorTabela {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: #9CA3AF; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10); border-radius: 999px; padding: 3px 10px;
}
.contadorTabela.filtrado {
  color: #93C5FD; background: rgba(37,99,235,.18); border-color: rgba(96,165,250,.4);
}