/* Motoristas — folha do TERCEIRO dashboard.
 *
 * ⚠️ POR QUE ARQUIVO SEPARADO, e nao mais regras no dash.css:
 *   1. `dash.css` ja passa de mil linhas com as telas do AQBR e do AqTotal, e
 *      nome de classe CSS e espaco GLOBAL entre os tres. Um `.card` aqui
 *      repintaria a tela de Vendas sem erro nenhum no console.
 *   2. Um erro de sintaxe num arquivo separado nao derruba o CSS dos outros
 *      dois — o navegador descarta so a regra quebrada deste arquivo.
 *
 * TODA classe daqui comeca com `mot-`. O `admin/checar_site.mjs` confere
 * colisao de identificador JavaScript; para CSS a disciplina e o prefixo.
 *
 * ⚠️ AS CORES SAEM DAS VARIAVEIS DO TEMA (`--tinta`, `--superficie`, ...), e
 * nao de hex escrito aqui. O site tem tema claro e escuro, e um `#fff` cravado
 * vira uma tarja branca no modo escuro. As unicas cores fixas sao as das
 * BARRAS, que vem do DADO (`app.motorista_cor`) e sao as mesmas do Power BI.
 *
 * ⚠️ Os nomes conferidos contra estilo.css/dash.css: `--superficie` (fundo de
 * cartao), `--linha` (borda), `--tinta` / `--tinta-3` (texto e texto fraco),
 * `--trilho` (fundo de barra), `--acento`. Inventar `--papel` ou
 * `--tinta-fraca` nao da erro: a regra e ignorada em silencio e o elemento sai
 * transparente.
 */

/* ------------------------------------------------------------- secoes */
/* ⚠️ SEM ABAS. As seis paginas rolam numa pagina so, uma embaixo da outra —
   o padrao das telas do AQBR, e nao o de abas do AqTotal.
   A barra de abas existiu e foi removida em 21/08/2026: os botoes herdavam o
   estilo global de `button` (fundo azul, largura cheia) e saiam como seis
   tarjas empilhadas no topo. Um `.mot-aba { background: none }` nao vencia a
   especificidade, e o conserto certo era nao ter abas. */
.mot-secao + .mot-secao {
  /* A linha separa as secoes sem precisar de moldura: com seis blocos numa
     rolagem so, o olho precisa de onde uma acaba e a outra comeca. */
  border-top: 1px solid var(--linha);
  margin-top: 8px;
}

/* Subtitulo dentro de uma secao (a grade dentro de Rotas, o detalhe dentro de
   Eventos). Menor que o `<h3>` da secao de proposito: a hierarquia e o que
   permite varrer a pagina longa sem se perder. */
.mot-sub {
  margin: 22px 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}

/* --------------------------------------------------------------- cartoes */
.mot-kpis {
  display: grid;
  /* ⚠️ `auto-fit` com minimo de 150px, e nao 8 colunas fixas como no DAX.
     O relatorio tem largura de papel; a tela nao. Com 8 colunas cravadas os
     cartoes ficariam ilegiveis num notebook. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.mot-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 9px 11px;
}

.mot-kl { font-size: 11px; font-weight: 600; color: var(--tinta-3); }
.mot-kv { font-size: 21px; font-weight: 700; line-height: 1.15; }
.mot-ks { font-size: 10px; color: var(--tinta-3); }

.mot-nota {
  display: block;
  font-size: 12px;
  color: var(--tinta-3);
  margin-top: 8px;
}

/* A declaracao de QUAL motorista a secao filtrou.
   ⚠️ Precisa saltar aos olhos: ela existe porque este projeto tem DOIS
   motoristas por dia (o planejado na rota e o que dirigiu), e sem ela "Rotas
   mostra 166 e Eventos mostra outro numero para o mesmo nome" vira suspeita de
   defeito. Com a cor fraca de `.mot-nota` ninguem leria — e a nota so aparece
   quando ha filtro ativo, entao ocupar espaco nao e problema.
   A borda do lado esquerdo e o unico enfeite: barata, e distingue a nota do
   texto de apoio que ja existe logo abaixo dela. */
.mot-filtrado {
  color: var(--tinta-2);
  background: var(--trilho);
  border-left: 3px solid var(--acento);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin: 0 0 12px;
}

.mot-alerta {
  display: inline-block;
  margin: 8px 0;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--trilho);
  color: var(--tinta);
  cursor: pointer;
}

/* ----------------------------------------------------------- grade dia-a-dia */
.mot-grade { margin-top: 4px; }

.mot-veic { margin-top: 14px; }
.mot-veic h4 {
  margin: 0 0 2px 2px;
  font-size: 15px;
  font-weight: 600;
}

.mot-linha { display: flex; align-items: stretch; gap: 8px; }

/* Largura fixa do rotulo: e o que alinha as quatro faixas de um veiculo
   entre si E com o eixo de datas embaixo. Sem isso cada faixa comeca num
   ponto diferente e a leitura vertical (mesmo dia, metricas diferentes)
   deixa de existir — que e justamente para o que a grade serve. */
.mot-rot {
  width: 80px;
  flex: none;
  font-size: 13px;
  color: var(--tinta-3);
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

.mot-cels { flex: 1; display: flex; align-items: stretch; gap: 1px; min-width: 0; }

.mot-cel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* ⚠️ 54px, e nao 48. A altura tem de caber ROTULO + BARRA: a barra vai a 34px
     (o teto que `motGrade` calcula), e o rotulo cresceu de 11px para 13px.
     Com 48px o texto e a barra brigavam pelo mesmo pixel e o numero era
     cortado por cima nos dias de valor alto. */
  height: 54px;
}

.mot-vlr {
  /* 13px: os 11px vieram do DAX, que e tamanho de relatorio impresso. Na tela,
     com o numero acima de uma barra fina, 11px so se le de perto. */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 2px;
  /* ⚠️ `--tinta-2`, e nao `--tinta-3`: o rotulo do valor E o dado, e estava com
     a mesma cor fraca das legendas de apoio. Subir so o tamanho deixaria o
     numero grande e apagado. */
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
}

.mot-bar { display: block; width: 71%; border-radius: 1px; }

/* O traco que separa as semanas. Vem do DAX, e ganha muito com pouco: sem ele
   um mes e uma fileira indistinta de 30 barras. */
.mot-sem { margin-left: 6px; border-left: 1px solid var(--tinta); padding-left: 6px; }

.mot-dia {
  flex: 1;
  min-width: 0;
  text-align: center;
  /* 11px: os 9px do DAX ficavam ilegiveis — e a data e o que ancora a leitura
     da grade inteira. */
  font-size: 11px;
  font-weight: 700;
  padding-top: 2px;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
}

/* -------------------------------------------------------------- legenda */
.mot-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 5px 0 7px 2px;
  font-size: 13px;
  color: var(--tinta-3);
}

.mot-leg span { display: inline-flex; align-items: center; gap: 4px; }

.mot-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* -------------------------------------------------------------- ranking */
.mot-rank { margin-top: 10px; }

.mot-rk { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }

.mot-rk-pos {
  width: 22px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-3);
  flex: none;
}

.mot-rk-corpo { flex: 1; min-width: 0; }

.mot-rk-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.mot-rk-nome {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mot-rk-val { font-size: 15px; font-weight: 700; white-space: nowrap; }
.mot-rk-val small { font-size: 10px; font-weight: 400; color: var(--tinta-3); }

.mot-rk-sub {
  font-size: 11px;
  color: var(--tinta-3);
  margin: 1px 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mot-rk-trilho {
  height: 7px;
  background: var(--trilho);
  border-radius: 4px;
  overflow: hidden;
}

.mot-rk-trilho i { display: block; height: 7px; background: var(--acento); border-radius: 4px; }

/* --------------------------------------------------------------- filtros */
.mot-flocais { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mot-flocais input[type="search"] { min-width: 260px; }
.mot-conta { font-size: 12px; color: var(--tinta-3); margin-left: auto; }

/* ⚠️ `width: auto` OBRIGATORIO. O `estilo.css` define `button { width: 100% }`
   para os botoes de formulario do login, e isso vale para TODO botao do site
   que nao seja corrigido — o `.filtros-locais` do dash.css estiliza `input` e
   `select`, e esquece `button`.
   Foi o que fez o "Exportar .xlsx" virar uma tarja azul de ponta a ponta, e
   e a MESMA causa da barra de abas que foi removida em 21/08/2026. */
.mot-flocais button {
  width: auto;
  padding: 5px 12px;
  font-size: 12.5px;
  border-radius: 6px;
}

/* ----------------------------------------------------------------- mapa */
.mot-mapa { min-height: 520px; }

/* --------------------------------------------------------------- estreito */
@media (max-width: 720px) {
  /* Numa tela estreita a grade dia-a-dia nao cabe: 30 colunas dariam menos de
     um pixel cada. Ela rola na horizontal em vez de espremer — espremida ela
     nao mente, mas tambem nao informa. */
  .mot-grade { overflow-x: auto; }
  .mot-veic { min-width: 640px; }
  .mot-rot { width: 68px; font-size: 12px; }
  .mot-conta { margin-left: 0; }
}