/*
  Rastram — peças que a conversão para HTML/CSS/JS puro acrescentou ao painel, fora do
  rastram.css: o `[hidden]` de verdade, a página não encontrada, o login e o autoatendimento
  (.tl-login*, .tl-conta*), o "Adicionar rastreador" do diálogo da frota e a faixa offline.

  Tudo é escrito sobre os tokens do design system Rastram (tokens.css) e sobre os atalhos
  --rs-type-*: nenhum literal de cor ou de tamanho de fonte pode entrar aqui — se faltar um valor,
  ele é acrescentado a tokens.css. Cartões de página são planos (borda, sem sombra); sombra só nas
  sobreposições do mapa.
*/

/*
  O atributo `hidden` tem `display:none` na folha do agente do usuário, e a especificidade de
  qualquer classe do painel (.tl-controles, .tl-cartao…) o vence. `!important` é o mecanismo previsto
  para este caso — é assim que o próprio Bootstrap e o Normalize resolvem.
*/
[hidden] { display: none !important; }

/*
  Conteúdo não encontrado (rota de fallback do roteador) — também é a moldura das telas de
  autenticação sem formulário ("Não foi possível entrar", "Sessão encerrada").

  O texto está em português do Brasil: AGENTS.md exige pt-BR em todo texto apresentado ao usuário,
  e a exigência vale também para a tela que quase ninguém vê.
*/
.tl-nao-encontrado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  max-width: 60ch;
}

.tl-nao-encontrado h1 {
  margin: 0;
  font: var(--rs-type-page-title);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.tl-nao-encontrado p {
  margin: 0;
  font: var(--rs-type-body);
  color: var(--text-secondary);
}

/* Página de login (js/paginas/autenticacao.js). */
.tl-pagina__conteudo--login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding-block: var(--space-24);
}

.tl-login {
  width: min(100%, 960px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.95fr);
  gap: var(--space-16);
  align-items: stretch;
}

/* Cartão plano: borda em vez de sombra, porque está na página e não sobre o mapa. */
.tl-login__cartao {
  padding: var(--space-24);
  background: var(--surface-default);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* Logo em cima, título embaixo: a assinatura horizontal precisa da largura toda para os 160px. */
.tl-login__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  margin-bottom: var(--space-12);
}

/*
  Assinatura horizontal Rastram, arquivo original reduzido (nunca redesenhado): preta no tema claro,
  creme no escuro, alternadas por body[data-tema] porque prefers-color-scheme não acompanha o tema
  escolhido no perfil. 160px de largura, acima do mínimo de 140px do manual; o gap do cabeçalho
  garante a área de proteção.
*/
.tl-login__marca {
  display: block;
  width: 160px;
  margin: 0;
}

.tl-login__logo {
  display: block;
  width: 100%;
  height: auto;
}

.tl-login__logo--escuro { display: none; }
body[data-tema="escuro"] .tl-login__logo--claro { display: none; }
body[data-tema="escuro"] .tl-login__logo--escuro { display: block; }

.tl-login__cartao h1 {
  margin: 0;
  font: var(--rs-type-page-title);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.tl-login__subtitulo {
  margin: 0 0 var(--space-24);
  font: var(--rs-type-body);
  color: var(--text-secondary);
}

.tl-login__formulario {
  display: grid;
  gap: var(--space-16);
}

.tl-login__formulario label {
  display: grid;
  gap: var(--space-8);
  font: var(--rs-type-label);
  color: var(--text-primary);
}

/* Campo do sistema: 44px, borda forte, corpo em 16px (o iOS não aproxima a tela ao focar). O foco é a régua universal. */
.tl-login__formulario input {
  width: 100%;
  min-height: var(--size-touch);
  padding: 0 var(--space-12);
  border-radius: var(--radius-md);
  border: var(--border-width-1) solid var(--border-strong);
  background: var(--surface-default);
  color: var(--text-primary);
  font: var(--rs-type-body);
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.tl-login__formulario input:hover { border-color: var(--border-contrast); }

/* Erro = texto + ícone (fa-circle-exclamation) + campo com aria-invalid; nunca cor sozinha. */
.tl-login__erro {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  margin: 0;
  font: var(--rs-type-label);
  color: var(--functional-danger);
}

.tl-login__erro i { flex: none; margin-top: 2px; font-size: var(--size-icon-md); }

.tl-login__formulario input[aria-invalid="true"] { border: var(--border-width-2) solid var(--functional-danger); }

.tl-login__formulario button {
  justify-self: stretch;
}

/*
  Saídas secundárias da tela de login e das telas de conta ("Esqueci minha senha", "Criar conta").

  São links, e não botões: levam a outra rota, e quem quiser abre em nova aba. Ficam nas duas pontas
  da linha para que "esqueci" e "criar" não se leiam como uma frase só. 44px de alvo, sublinhado que
  engrossa no hover (a cor de link já é a do texto).
*/
.tl-login__links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
  margin-top: var(--space-4);
  font: var(--rs-type-label);
}

.tl-login__links a,
.tl-conta__aviso-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.tl-login__links a:hover,
.tl-conta__aviso-links a:hover {
  color: var(--text-link);
  text-decoration-thickness: 2px;
}

/*
  Autoatendimento (js/paginas/conta.js): cadastro, esqueci minha senha e redefinir senha.

  Reaproveita a moldura do login (.tl-login) e a grade da ficha (.tl-ficha); o que entra aqui é só o
  que essas telas têm e as outras não: o seletor de tipo de pessoa, o agrupamento em fieldset, a
  dica sob o campo, os links dentro de um aviso e o bloco de conclusão.
*/
.tl-conta__formulario {
  display: grid;
  gap: var(--space-24);
}

/* Os campos de conta são pílulas .tl-campo, não os inputs soltos de .tl-login__formulario. */
.tl-conta .tl-ficha .tl-campo i { color: var(--text-secondary); font-size: var(--size-icon-md); }

/*
  Pessoa física / Pessoa jurídica: escolha única (role="radio") como SegmentedControl em bloco —
  a borda fica no contêiner e o escolhido é preenchimento preto/creme. Nada de laranja em escolha de
  formulário; o laranja de .tl-chip é linguagem de filtro.
*/
.tl-conta__tipo {
  display: flex;
  padding: 1px;
  gap: 2px;
  border: var(--border-width-1) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-default);
}

.tl-conta__tipo .tl-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--size-touch);
  justify-content: center;
  gap: var(--space-8);
  padding: 0 var(--space-16);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--text-primary);
  font: var(--rs-type-button);
}

.tl-conta__tipo .tl-chip:hover { background: var(--state-hover); }

.tl-conta__tipo .tl-chip[aria-checked="true"],
.tl-conta__tipo .tl-chip[aria-checked="true"]:hover {
  background: var(--state-selected-fill);
  color: var(--state-selected-on);
  border-color: transparent;
}

/* Fieldset sem a moldura do navegador: a legenda é rótulo de formulário, em caixa normal (caixa alta só em sobretítulo). */
.tl-ficha__grupo {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.tl-ficha__grupo > legend {
  padding: 0;
  margin-bottom: var(--space-8);
  font: var(--rs-type-label);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-primary);
}

/* Dica sob o campo (política de senha, onde achar o IMEI). Mais discreta que o erro, nunca vermelha. */
.tl-ficha__dica {
  margin: 0;
  font: var(--rs-type-supporting);
  color: var(--text-secondary);
}

/* Links dentro de um aviso ("Entrar" · "Esqueci minha senha"): quebram para a linha de baixo, alinhados ao texto (ícone 20px + gap 12px). */
.tl-conta .tl-aviso { flex-wrap: wrap; }

.tl-conta__aviso-links {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding-left: calc(var(--size-icon-lg) + var(--space-12));
}

/*
  Estado final: conta criada, e-mail enviado, senha redefinida, link inválido. Aviso de sucesso
  por padrão (borda --functional-success, ícone verde) e de falha na variante --crit (borda 2px).
*/
.tl-conta__mensagem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  border: var(--border-width-1) solid var(--functional-success);
  background: var(--surface-default);
}

.tl-conta__mensagem > i { font-size: var(--size-icon-lg); color: var(--functional-success); }
/* O padding absorve o pixel a mais da borda de 2px para o bloco não crescer. */
.tl-conta__mensagem--crit {
  border: var(--border-width-2) solid var(--functional-danger);
  padding: calc(var(--space-12) - 1px) calc(var(--space-16) - 1px);
}
.tl-conta__mensagem--crit > i { color: var(--functional-danger); }

.tl-conta__mensagem > p {
  margin: 0;
  font: var(--rs-type-body);
  color: var(--text-primary);
}

.tl-conta__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* A ficha vira uma coluna abaixo de 480px na própria .tl-ficha (rastram.css); nada a repetir aqui. */

/* "Adicionar rastreador" no topo do bloco de filtros do diálogo da frota (secundário: a decisão do diálogo é escolher o veículo). */
.tl-busca__adicionar {
  width: 100%;
  justify-content: center;
  margin-bottom: var(--space-12);
}

/* Resumo lateral: área secundária da página (--bg-subtle), sem gradiente e sem sombra. */
.tl-login__resumo {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-subtle);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.tl-login__resumo h2 {
  margin: 0 0 var(--space-12);
  font: var(--rs-type-section-title);
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.tl-login__resumo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-12);
}

.tl-login__resumo li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--text-primary);
  font: var(--rs-type-body);
}

/* Telha do ícone na cor do texto, como todo ícone do sistema. */
.tl-login__resumo i {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-default);
  color: var(--text-primary);
  border: var(--border-width-1) solid var(--border-default);
  font-size: var(--size-icon-md);
}

@media (max-width: 719.98px) {
  .tl-login {
    grid-template-columns: 1fr;
  }

  .tl-login__cartao,
  .tl-login__resumo {
    padding: var(--space-16);
  }
}

/*
  Aviso de modo offline / degradado do tempo real, ancorado acima do menu inferior.

  Reaproveita .tl-aviso inteiro (ícone, tipografia); o que esta regra acrescenta é a ancoragem no
  palco e a cara de "sem comunicação": fundo --status-offline-bg com borda tracejada, por cima do
  tom --warn que criarAviso() ainda escreve. Fica ACIMA de .tl-menu-inferior (560) e abaixo de
  .tl-scrim (1000): é informação de fundo. --tl-altura-menu vem de .tl-palco (rastram.css).
*/
.tl-offline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tl-altura-menu) + var(--space-16) + env(safe-area-inset-bottom, 0px));
  z-index: 550;
  max-width: min(92vw, 480px);
  background: var(--status-offline-bg);
  color: var(--status-offline-fg);
  border: var(--border-width-1) dashed var(--status-offline-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}

/* O tom --warn de .tl-aviso pinta ícone e texto; aqui os dois seguem a cor da faixa. */
.tl-offline > i,
.tl-offline > .tl-aviso__texto { color: inherit; }

/* =============================================================================
   Alertas da frota (0035): o sino com badge nos controles do mapa, os selos de gravidade e de
   situação no painel, o chip do cartão do veículo e o formulário de observação.

   O painel reaproveita o vocabulário de .tl-auditoria (filtros, total, paginação): é a mesma
   forma — filtros em cima, tabela responsiva, faixa de paginação — e duplicá-la só faria as duas
   telas divergirem.
   ============================================================================= */

.tl-controle--alertas { position: relative; }
.tl-controle__badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: var(--border-width-1) solid var(--map-overlay-bg);
  background: var(--surface-inverse); color: var(--text-inverse);
  font: var(--rs-type-label); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums;
}
/* A cor do badge é a maior gravidade ativa; o número é o que informa, a cor só acompanha. */
.tl-controle__badge--moderada { background: var(--status-nogps-bg); color: var(--status-nogps-fg); }
.tl-controle__badge--alta,
.tl-controle__badge--critica { background: var(--status-alarm-bg); color: var(--status-alarm-fg); }

/* Gravidade: quatro FORMAS, como os selos de situação — a cor nunca está sozinha. */
.tl-selo--sev-baixa { background: var(--surface-default); color: var(--text-secondary); border-color: var(--border-default); }
.tl-selo--sev-moderada { background: var(--status-nogps-bg); color: var(--status-nogps-fg); border-color: transparent; }
.tl-selo--sev-alta { background: var(--status-alarm-bg); color: var(--status-alarm-fg); border-color: transparent; }
.tl-selo--sev-critica {
  background: var(--surface-inverse); color: var(--text-inverse);
  border: var(--border-width-2) solid var(--functional-danger); padding-inline: 7px;
}
.tl-selo--status-aberto { background: var(--surface-default); color: var(--text-primary); border-color: var(--border-contrast); }
.tl-selo--status-aberto i { color: var(--functional-danger); }
.tl-selo--status-reconhecido { background: var(--status-pending-bg); color: var(--status-pending-fg); border: var(--border-width-2) dashed var(--status-pending-border); padding-inline: 7px; }
.tl-selo--status-resolvido { background: var(--surface-default); color: var(--text-secondary); border-color: var(--border-default); }
.tl-selo--status-resolvido i { color: var(--status-confirmed); }
.tl-selo--status-descartado { background: var(--surface-default); color: var(--text-secondary); border-color: var(--border-default); }

.tl-alertas__quando { display: flex; flex-direction: column; gap: 2px; }
.tl-alertas__quando small { font: var(--rs-type-supporting); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tl-alertas__titulo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.tl-alertas__titulo strong { font: var(--rs-type-label); color: var(--text-primary); }
.tl-alertas__titulo small { font: var(--rs-type-supporting); color: var(--text-secondary); }
.tl-alertas__titulo:hover strong { text-decoration: underline; }
.tl-alertas__veiculo-nome { display: flex; flex-direction: column; gap: 2px; }
.tl-alertas__veiculo-nome small { font: var(--rs-type-supporting); color: var(--text-secondary); }
.tl-alertas__situacao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.tl-alertas__ocorrencias { font: var(--rs-type-label); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tl-alertas__observacao { flex-basis: 100%; font: var(--rs-type-supporting); color: var(--text-secondary); }
.tl-alertas__acoes { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.tl-alertas__veiculo[aria-pressed="true"] { align-self: flex-end; }
.tl-alertas__qualquer-data { margin: var(--space-8); }
.tl-alertas__observacao-form { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); }
.tl-alertas__observacao-form p { margin: 0; font: var(--rs-type-body); color: var(--text-secondary); }

/* Chip no cartão: abre a lista já filtrada pelo veículo. Mesma forma do selo de gravidade. */
.tl-cartao__alertas {
  display: inline-flex; align-items: center; gap: var(--space-4);
  min-height: 28px; padding: 0 var(--space-8); border-radius: var(--radius-sm);
  border: var(--border-width-1) solid transparent; cursor: pointer; font: var(--rs-type-label);
}
.tl-cartao__alertas i { font-size: var(--size-icon-sm); color: inherit; }
.tl-cartao__alertas:hover { filter: brightness(.95); }