/* Base: fontes, reset, tipografia, foco, botões, formulários, cartões e mensagens. */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-400-normal.b07da7aa3e4f.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-latin-500-normal.02e18aa1a344.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-latin-500-normal.3fbaa6504d46.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-600-normal.5c43ef701a54.woff2") format("woff2");
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

/* Peso zero (:where): o reset não pode vencer a regra da própria classe (.form-dados__erros,
   .form-dados__erros-lista, .menu-lateral__lista perdiam recuo e marcador). */
:where(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* Tipografia */
body {
  min-height: 100vh;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.25;
  color: var(--cor-titulo);
}

.titulo-pagina {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

p + p {
  margin-top: 0.75rem;
}

a {
  color: var(--cor-link);
  text-underline-offset: 0.15em;
}

.icone {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Foco visível em tudo */
:focus-visible {
  outline: var(--foco-largura) solid var(--cor-foco);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Avisos da busca ao digitar (busca_viva.js): o script os põe logo abaixo do filtro. */
.busca-viva__aviso {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-weight: 500;
  background: var(--cor-superficie);
  border: 2px solid var(--cor-marinho);
  border-radius: var(--raio-pequeno);
}

[data-tema="escuro"] .busca-viva__aviso {
  border-color: var(--cor-azul-claro);
}

.busca-viva__aviso[hidden] {
  display: none;
}

.busca-viva__aviso .icone {
  flex: none;
  width: 20px;
  height: 20px;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Campo escondido (o arquivo da "Foto da placa", por exemplo): a regra geral dos campos (largura
   de 100% e altura mínima de 48 px, mais específica que .visualmente-oculto) o deixava do tamanho da
   tela, e ele, absoluto, alargava a página e dava rolagem lateral no celular (3.18.4). */
input.visualmente-oculto:not([type="checkbox"], [type="radio"], [type="hidden"]) {
  width: 1px;
  min-height: 0;
  height: 1px;
  padding: 0;
  border: 0;
}

.pular-para-conteudo {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 16px;
  font-weight: 500;
  color: var(--cor-acao-texto);
  background: var(--cor-acao);
  border-radius: var(--raio-pequeno);
  transform: translateY(-200%);
}

.pular-para-conteudo:focus {
  transform: none;
}

/* Botões */
.botao {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
}

.botao--principal {
  color: var(--cor-acao-texto);
  background: var(--cor-acao);
}

.botao--principal:hover {
  background: var(--cor-acao-hover);
}

.botao--secundario {
  color: var(--cor-link);
  background: transparent;
  border-color: var(--cor-borda-campo);
}

.botao--secundario:hover {
  background: var(--cor-realce);
}

.botao:disabled,
.botao[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Formulários */
label {
  font-weight: 500;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]),
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-pequeno);
}

/* Uma regra só para a borda de erro; os seletores mais específicos vencem a borda fina dos
   campos de texto, do Tipo e das caixas de escolha. */
[aria-invalid="true"],
input[aria-invalid="true"]:not([type="checkbox"],
[type="radio"],
[type="hidden"]),
.lista-escolha__botao[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--cor-mensagem-erro);
}

/* Selo "em breve" */
.selo {
  flex: none;
  padding: 0 8px;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 999px;
}

/* Cartões */
.cartao {
  padding: 24px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.placa-logo {
  padding: 8px 16px;
  background: var(--cor-placa-logo);
  border-radius: var(--raio-pequeno);
}

.placa-logo img {
  width: 160px;
  height: auto;
}

/* Mensagens: ícone, texto, borda e peso (nunca só cor) */
.mensagens {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.mensagem {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-mensagem-info);
  border-left-width: 4px;
  border-radius: var(--raio-pequeno);
  overflow-wrap: anywhere;
}

.mensagem > * {
  min-width: 0;
}

.mensagem--success {
  border-color: var(--cor-mensagem-sucesso);
}

.mensagem--error,
.mensagem--warning {
  font-weight: 500;
  border-color: var(--cor-mensagem-erro);
  border-width: 2px;
  border-left-width: 6px;
}

/* Páginas públicas e de erro */
.publica {
  display: grid;
  place-items: center;
  padding: 16px;
  background: linear-gradient(var(--cor-fundo-conteudo), var(--cor-fundo-conteudo)) var(--cor-fundo);
}

.publica__principal {
  width: 100%;
  max-width: 480px;
}

.cartao--erro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.cartao--erro__titulo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.cartao--erro__titulo .icone {
  width: 28px;
  height: 28px;
}

.codigo-suporte {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }

}

/* Meus dados */
.cartoes-dados {
  display: grid;
  gap: 24px;
  max-width: 560px;
}

.cartao__titulo {
  margin-bottom: 4px;
  font-size: 1.125rem;
}

/* Sem parágrafo de ajuda, o formulário e os dados não colam no título do cartão. */
.cartao__titulo + .form-dados {
  margin-top: 16px;
}

.cartao__titulo + .dados {
  margin-top: 12px;
}

.cartao__ajuda {
  margin-bottom: 16px;
  color: var(--cor-texto-secundario);
}

.form-dados {
  display: grid;
  gap: 16px;
}

.form-dados__campo {
  display: grid;
  gap: 4px;
  /* Campo mais baixo que o vizinho (dica de 1 linha ao lado de uma de 3): as linhas do campo
     ficam coladas no topo em vez de esticar para preencher a altura da célula. */
  align-content: start;
}

.form-dados__erros {
  padding: 12px 16px;
  font-weight: 500;
  list-style: none;
  border: 2px solid var(--cor-mensagem-erro);
  border-left-width: 6px;
  border-radius: var(--raio-pequeno);
}

.form-dados .botao {
  justify-self: start;
}

/* Páginas de listagem e detalhe */
.cabecalho-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cabecalho-pagina .titulo-pagina {
  margin-bottom: 0;
}

.voltar {
  margin-bottom: 8px;
}

.vazio {
  color: var(--cor-texto-secundario);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.filtros .form-dados__campo {
  flex: 1 1 160px;
}

.filtros .filtros__busca {
  flex: 3 1 240px;
}

.cartao--tabela {
  padding: 0;
}

.cartao--tabela .vazio {
  padding: 24px;
}

/* Tabelas: rolam dentro do cartão, nunca a página. O `position: relative` prende o texto
   `.visualmente-oculto` (absoluto) do cabeçalho dentro da rolagem; sem ele esse texto escapava e
   alargava a página, deixando uma faixa em branco à direita. */
.tabela-rolagem {
  position: relative;
  overflow-x: auto;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
}

.tabela th,
.tabela td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--cor-borda);
}

.tabela thead th {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}

.tabela tbody th {
  font-weight: 500;
}

.tabela tbody tr:hover {
  background: var(--cor-realce);
}

.cartao > .tabela-rolagem .tabela th:first-child,
.cartao > .tabela-rolagem .tabela td:first-child {
  padding-left: 0;
}

.cartao--tabela > .tabela-rolagem .tabela th:first-child,
.cartao--tabela > .tabela-rolagem .tabela td:first-child {
  padding-left: 24px;
}

.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 12px 24px;
}

.paginacao__resumo {
  margin-right: auto;
  color: var(--cor-texto-secundario);
}

.paginacao__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

/* Situação: ícone, texto, borda e peso (nunca só cor) */
.situacao {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 2px 10px;
  font-size: 0.875rem;
  white-space: nowrap;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 999px;
}

.situacao .icone {
  width: 16px;
  height: 16px;
}

.situacao--ativo {
  border-color: var(--cor-mensagem-sucesso);
}

.situacao--bloqueado,
.situacao--suspenso {
  font-weight: 500;
  border-width: 2px;
  border-color: var(--cor-mensagem-erro);
}

.situacao--suspenso {
  border-style: dashed;
}

.situacao--excluido {
  color: var(--cor-texto-secundario);
  border-color: var(--cor-borda);
}

.cartoes-detalhe {
  display: grid;
  gap: 24px;
  max-width: 720px;
}

.dados {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
}

.dados__linha {
  display: grid;
  grid-template-columns: minmax(96px, 160px) 1fr;
  gap: 4px 16px;
  align-items: center;
}

.dados dt {
  font-weight: 500;
  color: var(--cor-texto-secundario);
}

.dados dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.acoes {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.acoes__item + .acoes__item {
  padding-top: 16px;
  border-top: 1px solid var(--cor-borda);
}

.acoes .form-dados__campo {
  max-width: 360px;
}

/* Ação destrutiva: borda grossa, peso e texto que nomeia a ação (sem vermelho). */
.botao--destrutivo {
  color: var(--cor-texto);
  background: transparent;
  border: 2px solid var(--cor-mensagem-erro);
}

.botao--destrutivo:hover {
  background: var(--cor-realce);
}

.acoes-formulario {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-dados .acoes-formulario .botao {
  justify-self: auto;
}

.cartao--confirmacao {
  max-width: 560px;
}

.cartao--destrutivo {
  border: 2px solid var(--cor-mensagem-erro);
  border-left-width: 6px;
}

.confirmacao__alvo {
  margin-bottom: 8px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Diálogo de confirmação */
.dialogo {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  color: var(--cor-texto);
  background: linear-gradient(var(--cor-popover-camada), var(--cor-popover-camada)) var(--cor-popover-fundo);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio);
  box-shadow: 0 8px 32px var(--cor-sombra);
}

.dialogo--destrutivo {
  border: 2px solid var(--cor-mensagem-erro);
  border-left-width: 6px;
}

/* Navegador sem <dialog>: o pop-up fechado não aparece solto na página (o "+" também não). */
dialog:not([open]) {
  display: none;
}

.dialogo::backdrop {
  background: var(--cor-dialogo-fundo-externo);
}

.dialogo__corpo {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.dialogo__corpo p + p {
  margin-top: 0;
}

.dialogo__titulo {
  font-size: 1.25rem;
}

.dialogo__descricao {
  color: var(--cor-texto-secundario);
}

.dialogo__erro {
  padding: 8px 12px;
  font-weight: 500;
  border: 2px solid var(--cor-mensagem-erro);
  border-left-width: 6px;
  border-radius: var(--raio-pequeno);
}

.dialogo .acoes-formulario {
  margin-top: 8px;
}

/* Em telas estreitas a tabela vira uma lista de blocos com rótulo em cada célula. */
@media (max-width: 599.98px) {
  .dados__linha {
    grid-template-columns: 1fr;
  }

  .tabela--empilhavel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabela--empilhavel,
  .tabela--empilhavel tbody,
  .tabela--empilhavel tfoot,
  .tabela--empilhavel tr,
  .tabela--empilhavel th,
  .tabela--empilhavel td {
    display: block;
  }

  .tabela--empilhavel tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cor-borda);
  }

  .cartao--tabela > .tabela-rolagem .tabela--empilhavel th,
  .cartao--tabela > .tabela-rolagem .tabela--empilhavel th:first-child,
  .cartao--tabela > .tabela-rolagem .tabela--empilhavel td {
    padding: 4px 0;
    border: 0;
  }

  .tabela--empilhavel td[data-rotulo] {
    display: grid;
    grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  .tabela--empilhavel td[data-rotulo]::before {
    content: attr(data-rotulo);
    min-width: 0;
    overflow-wrap: break-word;
    font-size: 0.875rem;
    color: var(--cor-texto-secundario);
  }

  .tabela--empilhavel .situacao {
    justify-self: start;
  }

}

[type="radio"],
[type="hidden"]) {
  padding-left: 40px;
}

.filtros__ajuda {
  flex-basis: 100%;
  margin-top: -4px;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

/* Formulário de nó */
.campo__ajuda {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

.campo__erro {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.campo__erro .icone {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.form-dados__erros-lista {
  padding-left: 20px;
  margin: 0;
  list-style: disc;
}

.rotulo__opcional {
  font-weight: 400;
  color: var(--cor-texto-secundario);
}

.dados--form {
  margin: 0;
}

/* Aviso fixo: ícone, borda azul média e texto (nunca só cor). */
.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border: 1px solid var(--cor-azul-medio);
  border-left-width: 4px;
  border-radius: var(--raio-pequeno);
  overflow-wrap: anywhere;
}

.aviso > * {
  min-width: 0;
}

.aviso .icone {
  margin-top: 2px;
  color: var(--cor-link);
}

.aviso p {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Aviso que não pode passar batido (senha provisória): borda mais grossa, ícone na cor do texto. */
.aviso--forte {
  border-color: var(--cor-acao);
  border-width: 2px;
  border-left-width: 6px;
}

.aviso--forte .icone {
  color: var(--cor-texto);
}

/* Senha provisória à vista (legível ao ler ou ditar), uma única vez. */
.credencial {
  display: inline-block;
  padding: 4px 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  border: 1px dashed var(--cor-borda-campo);
  border-radius: var(--raio-pequeno);
}

.mensagem-pronta {
  min-height: 11rem;
  resize: vertical;
}

.copiar-estado {
  min-height: 1.5em;
  margin: 0;
  font-weight: 500;
}

/* Tabelas de lançamentos */
.tabela__numero {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabela__texto {
  overflow-wrap: anywhere;
}

.tabela tfoot th,
.tabela tfoot td {
  border-top: 2px solid var(--cor-borda);
  font-weight: 600;
}

.botao--compacto {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.875rem;
}

/* Inativos: texto secundário e ícone "circle-minus" com a palavra (nunca só a cor). */
.linha--inativa {
  color: var(--cor-texto-secundario);
}

.confirmacao__descricao {
  margin-top: 16px;
}
@media (max-width: 599.98px) {
  /* A primeira célula das tabelas de lançamentos é td (não th): mesmo recuo das demais. */
  .cartao--tabela > .tabela-rolagem .tabela--empilhavel td:first-child {
    padding: 4px 0;
  }

}
/* Auditoria: resultado com ícone e texto (nunca só cor); falha em peso maior. */
.filtros .filtros__erros {
  flex-basis: 100%;
  margin: 0;
}

.filtros .filtros__data {
  flex: 0 1 180px;
}

.resultado-evento,
.situacao-registro {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

.resultado-evento .icone,
.situacao-registro .icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cor-mensagem-sucesso);
}

.resultado-evento--falha {
  font-weight: 500;
  white-space: normal;
}

.resultado-evento--falha .icone {
  color: var(--cor-mensagem-erro);
}

.dados .dados__tecnico {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8125rem;
}

.filtros__aviso {
  margin-bottom: 16px;
}

/* Lista da Auditoria: a linha inteira abre o evento (link esticado, sem JavaScript). O link
   segue sendo o único alvo de teclado; o destaque de hover já cobre a linha. */
/* Linha inteira clicável (auditoria; em todas as tabelas e listas com detalhe desde a 3.0.6):
   "link esticado". O ``::after`` do link principal da linha (``.linha-link``) cobre a linha
   ou o cartão, que tem ``position: relative``. Leitor de tela e teclado continuam vendo um só
   link por linha; os outros controles da linha ficam por cima e continuam funcionando. */
.tabela--clicavel tbody tr {
  position: relative;
  cursor: pointer;
}

/* Linha sem link (ex.: sem permissão de editar) não parece clicável. */
.tabela--clicavel tbody tr:not(:has(.linha-link)) {
  cursor: auto;
}

.bloco-clicavel {
  position: relative;
  cursor: pointer;
}

/* Realce por cima do fundo que o cartão já tenha (ex.: aviso não visto). */
.bloco-clicavel:hover,
.bloco-clicavel:focus-within {
  background-image: linear-gradient(var(--cor-realce), var(--cor-realce));
}

.tabela--clicavel tbody tr:focus-within {
  background: var(--cor-realce);
}

.tabela--clicavel tbody tr :is(a, button, input, select, textarea, summary, label):not(.linha-link),
.bloco-clicavel :is(a, button, input, select, textarea, summary, label):not(.linha-link) {
  position: relative;
  z-index: 1;
}

.linha-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.linha-link:focus-visible::after {
  outline: 2px solid var(--cor-link);
  outline-offset: -2px;
}

/* Onde atua: árvore de caixas de marcar no cadastro do usuário. */
.ajuda-campo {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

/* ---------- Dashboard ---------- */
.painel:focus {
  outline: none;
}

.painel__cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
}

.painel__mes {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 500;
}

.painel__cabecalho .titulo-pagina {
  margin-bottom: 0;
}

.painel__aviso {
  margin-bottom: 16px;
}

.indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.indicador {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 20px;
}

.bloco__topo {
  display: flex;
  gap: 4px;
  align-items: center;
}

.bloco {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
}

.bloco__topo .cartao__titulo {
  margin: 0 auto 0 0;
}

.bloco__subtitulo {
  margin: -8px 0 0;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

/* Diálogos do painel. Sem JS, o link #id os mostra no lugar (:target). */
.dialogo--largo {
  width: min(960px, calc(100vw - 32px));
}

.dialogo__cabecalho {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.dialogo__cabecalho .dialogo__titulo {
  margin-right: auto;
}

@media (max-width: 1099.98px) {
  .indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 479.98px) {
  .indicadores {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .bloco {
    padding: 16px;
  }

}

/* Parte de um texto que não quebra por dentro (ex.: "a 09/10/2026" de um período). */
.sem-quebra {
  white-space: nowrap;
}

/* Correção: o lançamento atual em cima e o formulário com a largura toda. */
.pilha {
  display: grid;
  gap: 24px;
  align-items: start;
}

/* ================= Caixa de escolha: seletor de mês e lista de escolha ================= */
/* Mesma caixa fechada para os dois: 48 px, borda do campo, seta que gira ao abrir. */
.seletor-mes,
.lista-escolha {
  position: relative;
  min-width: 0;
}

.lista-escolha__botao {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 12px 0 14px;
  font: inherit;
  color: var(--cor-texto);
  text-align: left;
  cursor: pointer;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-pequeno);
}

.lista-escolha__botao:hover {
  border-color: var(--cor-azul-medio);
}

.lista-escolha__botao[aria-expanded="true"] {
  border-color: var(--cor-azul-medio);
  box-shadow: 0 0 0 3px var(--cor-menu-ativo-fundo);
}

.lista-escolha__botao:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.lista-escolha__botao:disabled:hover {
  border-color: var(--cor-borda-campo);
}

.lista-escolha__texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-escolha__texto.is-vazio {
  font-weight: 400;
  color: var(--cor-texto-secundario);
}

.lista-escolha__botao .lista-escolha__seta {
  width: 18px;
  height: 18px;
  color: var(--cor-texto-secundario);
  transition: transform 0.15s;
}

.lista-escolha__botao[aria-expanded="true"] .lista-escolha__seta {
  transform: rotate(180deg);
}

/* O <select> nativo continua no formulário (valor, required, validação do navegador); com o
   script rodando ele fica invisível por baixo do botão, sem receber clique nem Tab. */
.seletor-mes.is-ativo > select,
.lista-escolha.is-ativo > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
}

.lista-escolha__painel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  color: var(--cor-texto);
  background: linear-gradient(var(--cor-popover-camada), var(--cor-popover-camada))
    var(--cor-popover-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: 0 12px 28px var(--cor-sombra);
}

.lista-escolha__painel--acima {
  top: auto;
  bottom: calc(100% + 6px);
}

[type="radio"],
[type="hidden"]) {
  padding-left: 44px;
  font-variant-numeric: tabular-nums;
}

/* Lista de escolha: o padrão de toda lista suspensa (o <select> nativo por baixo). */
/* Largura do campo; em campo estreito cresce até 320 px para a opção não quebrar em linhas
   (sem passar da tela: o script desloca o painel quando faltaria espaço). */
.lista-escolha__painel {
  display: flex;
  width: max-content;
  min-width: 100%;
  max-width: min(320px, calc(100vw - 32px));
  flex-direction: column;
  max-height: 320px;
  overflow: hidden;
}

.lista-escolha__busca {
  flex: none;
  padding: 8px;
  border-bottom: 1px solid var(--cor-borda);
}

.lista-escolha__busca input {
  min-height: 40px;
  padding: 6px 10px;
}

.lista-escolha__opcoes {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.lista-escolha__opcoes ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.lista-escolha__opcao {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  line-height: 1.3;
  cursor: pointer;
  border-radius: var(--raio-pequeno);
}

.lista-escolha__opcao > span {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  overflow-wrap: anywhere;
}

.lista-escolha__opcao .icone {
  width: 18px;
  height: 18px;
  color: var(--cor-link);
  visibility: hidden;
}

.lista-escolha__opcao.is-ativa {
  background: var(--cor-realce);
}

.lista-escolha__opcao[aria-selected="true"] {
  font-weight: 600;
  background: var(--cor-menu-ativo-fundo);
}

.lista-escolha__opcao[aria-selected="true"] .icone {
  visibility: visible;
}

.lista-escolha__opcao[aria-selected="true"].is-ativa {
  box-shadow: inset 0 0 0 1px var(--cor-azul-medio);
}

.lista-escolha__opcao[aria-disabled="true"] {
  color: var(--cor-texto-secundario);
  cursor: not-allowed;
  opacity: 0.6;
}

.lista-escolha__grupo {
  padding: 10px 12px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cor-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lista-escolha__vazio {
  padding: 12px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

/* Barra de filtros: o botão acompanha a altura dos campos. */
.filtros > .botao {
  min-height: 48px;
}

@media (forced-colors: active) {

  .lista-escolha__opcao[aria-selected="true"] {
    border: 2px solid Highlight;
  }

  .lista-escolha__opcao.is-ativa {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

}

/* A página volta com #campo-mes depois de trocar o mês: abaixo da barra superior fixa. */
#campo-mes {
  scroll-margin-top: calc(var(--barra-altura) + 16px);
}

/* Checklist de força da senha: ícone + texto + peso (nunca só cor) */
.checklist-bloco {
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
}

.checklist__titulo {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 500;
}

.checklist {
  display: grid;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.checklist__item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

.checklist__item .icone {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.checklist__ok {
  display: none;
  color: var(--cor-link);
}

.checklist__item.is-ok {
  font-weight: 500;
  color: var(--cor-texto);
}

.checklist__item.is-ok .checklist__ok {
  display: inline-flex;
}

.checklist__item.is-ok .checklist__falta {
  display: none;
}

.checklist__falta {
  display: inline-flex;
}

/* Celular: o link "Voltar" com alvo de toque de pelo menos 44 px */
@media (max-width: 767.98px) {
  /* alvos de toque */
  .voltar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

}

/* Tipo: rádios em segmento (o rádio nativo fica acessível, só o rótulo aparece). */
.segmento-radio {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.segmento-radio > legend {
  padding: 0;
  margin-bottom: 4px;
  font-weight: 500;
}

.segmento-radio__opcoes {
  /* Uma linha só, em colunas iguais ocupando a largura toda (3.0.6): no celular as opções não
     quebram nem viram uma pílula oval. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-pequeno);
}

.segmento-radio__opcoes--lista {
  /* Quantas opções forem (as empresas cadastradas, 3.18.7): quebra em linhas, sem espremer o texto. */
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

.segmento-radio__opcoes--lista label {
  overflow-wrap: anywhere;
}

.segmento-radio__opcoes input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.segmento-radio__opcoes label {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
}

/* Só a opção não escolhida ganha o realce do mouse: no celular o toque deixa o ":hover" preso e
   o realce apagava o destaque da escolhida (texto branco sobre fundo claro). */
.segmento-radio__opcoes input:not(:disabled):not(:checked) + label:hover {
  background: var(--cor-realce);
}

.segmento-radio__opcoes input:disabled + label {
  cursor: default;
}

/* Escolhida: fundo da cor de ação e texto branco (~6,9:1 nos dois temas) e a marca de
   "escolhido" (o estado não fica só na cor). */
.segmento-radio__opcoes input:checked + label {
  font-weight: 500;
  color: var(--cor-segmento-ativo-texto);
  background: var(--cor-segmento-ativo);
}

/* A marca tem o lugar guardado em todas as opções (só aparece na escolhida): o texto não pula. */
.segmento-radio__marca {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  visibility: hidden;
}

.segmento-radio__opcoes input:checked + label .segmento-radio__marca {
  display: block;
  visibility: visible;
}

/* Celular: colunas estreitas (cerca de 70 px); a marca vai acima do texto para "Geoterra" caber. */
@media (max-width: 599.98px) {
  .segmento-radio__opcoes label {
    flex-direction: column;
    gap: 0;
    padding: 2px 4px;
    line-height: 1.2;
  }

  .segmento-radio__marca {
    width: 14px;
    height: 14px;
  }
}

.segmento-radio__opcoes input:focus-visible + label {
  outline: var(--foco-largura) solid var(--cor-foco);
  outline-offset: 2px;
}

/* Frase curta de "para que serve" sob o título da página. */
.para-que-serve {
  max-width: 72ch;
  margin: 0 0 16px;
  color: var(--cor-texto-secundario);
}

/* Duas colunas de campos que quebram em uma no celular (telefone e e-mail). */
.form-dados__duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  align-items: start;
}

/* E-mails longos quebram em vez de empurrar a tabela no celular. */
.tabela__quebra {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Título de um cartão que contém só uma tabela (históricos de O.S.). */
.cartao--tabela__titulo {
  padding: 24px 24px 8px;
  margin: 0;
}

.estado-vazio {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.estado-vazio > .icone {
  width: 32px;
  height: 32px;
  color: var(--cor-link);
}

/* Inventário: contagem e botão de exportar acima da lista. */
.barra-exportar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}

.barra-exportar__contagem {
  margin: 0;
  font-weight: 500;
}

.barra-exportar__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.barra-exportar__nota {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

.barra-exportar .botao .icone {
  width: 18px;
  height: 18px;
}

.tabela__valor {
  white-space: nowrap;
}

.form-dados__erros-titulo {
  margin: 0 0 4px;
}

/* ================= Fase 3: ordens de serviço ================= */

/* Três famílias de situação, só com tokens da paleta; o estado vai sempre também por ícone e
   texto. Não aprovado: tom mais escuro, cheio. Pendente: tracejado, tom neutro. Liberado: azul. */
.situacao--pendente,
.situacao--aguardando {
  font-weight: 500;
  color: var(--cor-texto);
  background: var(--cor-realce);
  border-width: 2px;
  border-style: dashed;
  border-color: var(--cor-borda-campo);
}

.situacao--nao-aprovado,
.situacao--fora-prazo {
  font-weight: 600;
  color: var(--cor-fundo);
  background: var(--cor-texto);
  border-width: 2px;
  border-color: var(--cor-texto);
}

.situacao--liberado,
.situacao--liberada {
  font-weight: 500;
  color: var(--cor-menu-ativo-texto);
  background: var(--cor-menu-ativo-fundo);
  border-width: 2px;
  border-color: var(--cor-menu-ativo-borda);
}

.quadro-nomes__estado--feito {
  color: var(--cor-menu-ativo-texto);
}

.quadro-nomes__estado--recusado {
  font-weight: 600;
}

.quadro-nomes__estado--pendente {
  font-style: italic;
}

.linha-tempo {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linha-tempo li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
}

.linha-tempo .icone {
  width: 20px;
  height: 20px;
  color: var(--cor-link);
}

.linha-tempo small {
  display: block;
  overflow-wrap: anywhere;
  color: var(--cor-texto-secundario);
}

/* Aviso de O.S. final: ícone, borda azul média e texto (nunca só cor). */
.aviso-fechado {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: var(--cor-superficie);
  border: 2px solid var(--cor-azul-medio);
  border-left-width: 6px;
  border-radius: var(--raio-pequeno);
}

.aviso-fechado > div {
  flex: 1 1 320px;
}

.aviso-fechado p {
  margin: 0;
}

.aviso-fechado p + p {
  margin-top: 4px;
  color: var(--cor-texto-secundario);
}

.aviso-fechado > .icone {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--cor-link);
}

.tabela__sub {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--cor-texto-secundario);
}

/* Cabeçalho da O.S. / saída: situação e tipo logo abaixo do título */
.cabecalho-registro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: -4px 0 16px;
}

.cabecalho-registro__tipo {
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

.cartoes-detalhe .aviso-fechado {
  margin-bottom: 0;
}

/* Linha do tempo da O.S. (ordem cronológica) */
.linha-tempo--os {
  gap: 0;
  margin-top: 12px;
}

.linha-tempo--os li {
  padding: 12px 0;
  border-top: 1px solid var(--cor-borda);
}

.linha-tempo--os li:first-child {
  padding-top: 4px;
  border-top: 0;
}

.linha-tempo__texto {
  overflow-wrap: anywhere;
}

.linha-tempo__comentario {
  margin: 4px 0 0;
  padding-left: 12px;
  overflow-wrap: anywhere;
  border-left: 3px solid var(--cor-borda-campo);
}

.form-comentario {
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--cor-borda);
}

.form-dados textarea {
  min-height: 96px;
  resize: vertical;
}

/* Ações lado a lado no cartão Ações (Aprovar + Cancelar) */
.acoes__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.acoes__linha form {
  margin: 0;
}

/* Valor fixo num formulário (Situação Em Rascunho) */
.campo-fixo {
  display: grid;
  gap: 4px;
  align-content: start;
  justify-items: start;
}

.campo-fixo__rotulo {
  font-weight: 500;
}

/* Botões de ação na linha da tabela (Detalhes, Imprimir, Aprovar) */
.acoes-tabela {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.acoes-tabela form {
  margin: 0;
}

.tabela .botao--compacto {
  min-height: 44px;
}

.texto-cortado {
  max-width: 32ch;
}

/* Várias situações lado a lado (situação calculada + Inativo) */
.situacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}

/* Cartões do Painel: links que filtram a tabela (servidor, GET). */
.painel-cartoes {
  display: grid;
  /* auto-fit: os cartões se esticam e ocupam a linha inteira. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 12px;
  padding: 0;
  margin: 0 0 8px;
  list-style: none;
}

/* Mesma altura na fileira: o item da grade estica e o cartão ocupa o item todo. */
.painel-cartoes > li {
  display: flex;
}

.painel-cartao {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-height: 112px;
  /* O rodapé reserva sempre a linha do "Filtrando": escolher um cartão não muda o tamanho. */
  padding: 12px 14px 30px;
  color: var(--cor-texto);
  text-decoration: none;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.painel-cartao:hover {
  background: var(--cor-realce);
}

.painel-cartao__topo {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--cor-texto-secundario);
  /* Espaço para duas linhas: o número fica na mesma altura em todos os cartões. */
  min-height: 2.5em;
}

.painel-cartao__topo .icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cor-link);
}

.painel-cartao__valor {
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

/* Cartão escolhido: borda grossa, fundo e a palavra "Filtrando" (nunca só cor). A borda extra é
   uma sombra interna, para o cartão escolhido ter exatamente o tamanho dos outros. */
.painel-cartao[aria-current] {
  background: var(--cor-menu-ativo-fundo);
  border-color: var(--cor-acao);
  box-shadow: inset 0 0 0 1px var(--cor-acao);
}

.painel-cartao__filtro {
  position: absolute;
  bottom: 10px;
  left: 14px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
}

.painel-cartao__filtro .icone {
  width: 14px;
  height: 14px;
}

/* Seletor de filial do Painel: o mesmo espaço (24 px) que separa os blocos do painel. */
.agenda-barra.painel-filial {
  margin-bottom: 24px;
}

.painel-nota {
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

.secao-painel {
  margin-bottom: 32px;
}

.secao-painel__topo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.secao-painel__topo h2 {
  margin: 0;
}

.secao-painel__sub {
  margin: 2px 0 0;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

.subtitulo-pagina {
  margin: -8px 0 16px;
  color: var(--cor-texto-secundario);
}

/* Equipamento da O.S.: o escolhido num campo só de leitura e o link da página de busca. Com
   busca_equipamento.js, o campo vira caixa de busca e as sugestões usam o painel da lista de
   escolha, na largura do campo. */
.busca-equipamento__caixa {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.busca-equipamento__caixa > input {
  flex: 1 1 auto;
  min-width: 0;
}

.busca-equipamento__caixa > input[readonly] {
  font-weight: 500;
  background: var(--cor-fundo-conteudo);
}

.busca-equipamento__caixa > .botao {
  flex: none;
  min-height: 48px;
}

.busca-equipamento__escolher {
  margin: 4px 0 0;
}

.busca-equipamento__escolher .icone {
  width: 18px;
  height: 18px;
}

.busca-equipamento__estado {
  min-height: 0;
}

.lista-escolha__painel.busca-equipamento__painel {
  right: 0;
  width: auto;
  max-width: none;
}

/* Portaria de veículos: placa (letras grossas com contorno, como a placa de verdade: forma, não
   cor) e o campo de digitar a placa, grande para o celular. */
.placa {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border: 2px solid currentColor;
  border-radius: 6px;
}

.campo-placa input {
  min-height: 56px;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ================= Portaria de veículos: passagens (etapa 3) ================= */
/* Celular primeiro: o agente usa o telefone com uma mão. Alvos de toque com 48 px ou mais,
   ação principal embaixo, estado sempre com ícone e texto (nunca só cor). */

/* No celular o cartão perde respiro para sobrar largura ao lado do trilho do menu. */
@media (max-width: 599.98px) {
  .portaria .cartao {
    padding: 16px;
  }

  .portaria .cartao--tabela {
    padding: 0;
  }
}

.placa--grande {
  padding: 2px 12px;
  font-size: 1.5rem;
}

/* Entrada a pé (3.0.4): no lugar da placa, "A pé" com o ícone, sem o contorno de placa (forma
   diferente, não cor). */
.a-pe {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-weight: 600;
  white-space: nowrap;
}

.a-pe .icone {
  width: 18px;
  height: 18px;
}

.a-pe--grande {
  font-size: 1.25rem;
}

.a-pe--grande .icone {
  width: 24px;
  height: 24px;
}

/* "Sem veículo" / "Com veículo": sempre duas colunas, também no computador. */
.escolha-grande--duas .escolha-grande__opcoes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Os dois botões grandes do topo da Movimentação */
.portaria-atalhos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.botao--grande {
  flex-direction: column;
  gap: 6px;
  min-height: 88px;
  padding: 12px 8px;
  font-size: 1.0625rem;
  line-height: 1.25;
  text-align: center;
}

.botao--grande .icone {
  width: 28px;
  height: 28px;
}

@media (min-width: 768px) {
  .portaria-atalhos {
    max-width: 640px;
  }

  .botao--grande {
    flex-direction: row;
    min-height: 64px;
    font-size: 1.125rem;
  }
}

.botao--largo {
  width: 100%;
  min-height: 48px;
}

/* Contadores (sem link): no pátio, entradas e saídas de hoje */
.contadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0 0 24px;
  list-style: none;
}

.contadores--quatro {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .contadores {
    max-width: 640px;
  }

  .contadores--quatro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
  }
}

.contador {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
  padding: 10px 12px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
}

.contador__rotulo {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--cor-texto-secundario);
}

.contador__rotulo .icone {
  flex: none;
  width: 16px;
  height: 16px;
}

.contador__valor {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.contador__valor small {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Seções da Movimentação */
.secao-portaria {
  margin-bottom: 32px;
}

.secao-portaria__topo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.secao-portaria__topo h2 {
  margin: 0;
}

.busca-patio {
  display: grid;
  gap: 4px;
  max-width: 480px;
  margin-bottom: 12px;
}

/* Cartões de passagem (no pátio): um por veículo */
.lista-patio {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .lista-patio {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
  }
}

.lista-patio li[hidden] {
  display: none;
}

.lista-patio > li {
  display: grid;
}

.passagem-cartao {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  color: inherit;
  text-decoration: none;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.passagem-cartao__topo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

/* Placa e, ao lado, o modelo do veículo (3.0.6). */
.passagem-cartao__placa {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.passagem-cartao__modelo {
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.passagem-cartao__linha {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.passagem-cartao__linha .icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cor-texto-secundario);
}

.passagem-cartao__tempo {
  color: var(--cor-texto-secundario);
}

.passagem-cartao .botao {
  width: 100%;
  min-height: 48px;
  margin-top: auto;
}

/* Na escolha da saída o cartão inteiro é o alvo do toque. */
a.passagem-cartao {
  position: relative;
  min-height: 48px;
  padding-right: 44px;
}

a.passagem-cartao:hover {
  background: var(--cor-realce);
  border-color: var(--cor-borda-campo);
}

.passagem-cartao__seta {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 24px;
  color: var(--cor-link);
  transform: translateY(-50%);
}

.passagem-cartao--escolhida {
  border: 3px solid var(--cor-acao);
}

/* Movimentos de hoje: lista compacta (hora, movimento, placa, pessoa) */
.lista-movimentos {
  padding: 0;
  margin: 0;
  list-style: none;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.movimento {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cor-borda);
}

.lista-movimentos li:last-child .movimento {
  border-bottom: 0;
}

.movimento__hora {
  grid-row: span 2;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.movimento__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  min-width: 0;
}

.movimento__pessoa {
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
  overflow-wrap: anywhere;
}

.movimento__tipo {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-weight: 500;
}

.movimento__tipo .icone {
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .movimento {
    grid-template-columns: 56px 190px 110px minmax(0, 1fr) auto;
  }

  .movimento__hora {
    grid-row: auto;
  }

  .movimento__linha {
    display: contents;
  }
}

/* Estado vazio num cartão tracejado */
.vazio-portaria {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 16px;
  background: var(--cor-superficie);
  border: 1px dashed var(--cor-borda-campo);
  border-radius: var(--raio);
}

.vazio-portaria > .icone {
  width: 28px;
  height: 28px;
  color: var(--cor-link);
}

.vazio-portaria p {
  margin: 0;
}

.vazio-portaria .botao {
  margin-top: 6px;
}

/* Formulário de celular: uma coluna, campos grandes */
.form-portaria {
  display: grid;
  gap: 20px;
  max-width: 560px;
}

.form-portaria .form-dados__campo {
  display: grid;
  gap: 4px;
}

.passo {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.passo > legend {
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--cor-titulo);
}

/* Resultado da placa: da frota (borda cheia) ou fora da frota (tracejada). */
.chip-placa {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 12px;
  margin: 0;
  font-weight: 500;
  border: 2px solid var(--cor-azul-medio);
  border-radius: var(--raio-pequeno);
}

.chip-placa .icone {
  flex: none;
  margin-top: 2px;
  color: var(--cor-link);
}

.chip-placa--fora {
  font-weight: 400;
  border: 1px dashed var(--cor-borda-campo);
}

.chip-placa[hidden] {
  display: none;
}

/* Categoria: quatro botões grandes (rádio) com ícone; o escolhido tem borda grossa,
   fundo, letra forte e o ícone de marcado. */
.escolha-grande {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.escolha-grande > legend {
  padding: 0;
  margin-bottom: 4px;
  font-weight: 500;
}

.escolha-grande__opcoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 600px) {
  .escolha-grande__opcoes {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }
}

.escolha-grande__opcoes input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.escolha-grande__opcoes label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 8px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-pequeno);
}

.escolha-grande__opcoes label:hover {
  background: var(--cor-realce);
}

.escolha-grande__opcoes input:checked + label {
  font-weight: 600;
  background: var(--cor-menu-ativo-fundo);
  border: 3px solid var(--cor-acao);
}

.escolha-grande__opcoes input:focus-visible + label {
  outline: var(--foco-largura) solid var(--cor-foco);
  outline-offset: 2px;
}

.escolha-grande__marca {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  width: 18px;
  height: 18px;
}

.escolha-grande__opcoes input:checked + label .escolha-grande__marca {
  display: block;
}

.escolha-grande[aria-describedby] .escolha-grande__opcoes label {
  border: 2px solid var(--cor-mensagem-erro);
}

.campo-opcional[hidden] {
  display: none;
}

/* Leitor de código pela câmera (o visor é a imagem da câmera na tela real) */
.leitor {
  display: grid;
  gap: 8px;
}

.leitor[hidden] {
  display: none;
}

.leitor__visor {
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
  color: var(--cor-branco);
  background: var(--cor-marinho);
  border-radius: var(--raio);
}

.leitor__mira {
  width: 75%;
  height: 45%;
  border: 3px dashed var(--cor-azul-claro);
  border-radius: var(--raio-pequeno);
}

.leitor__linha {
  position: absolute;
  top: 50%;
  right: 18%;
  left: 18%;
  border-top: 2px solid var(--cor-azul-claro);
}

.leitor__texto {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-weight: 500;
}

/* Ação principal presa embaixo no celular (alcance do polegar) */
.barra-acao-fixa {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  padding: 12px 0 16px;
  margin-top: 4px;
  background: linear-gradient(var(--cor-fundo-conteudo), var(--cor-fundo-conteudo)) var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
}

.barra-acao-fixa .botao {
  width: 100%;
  min-height: 56px;
  font-size: 1.0625rem;
}

.barra-acao-fixa .botao--secundario {
  min-height: 48px;
  font-size: 1rem;
}

.barra-acao-fixa__nota {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--cor-texto-secundario);
}

@media (min-width: 768px) {
  .barra-acao-fixa {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 16px;
  }

  .barra-acao-fixa .botao {
    width: auto;
  }

  .barra-acao-fixa__nota {
    flex-basis: 100%;
  }
}

/* Resumo da passagem (confirmação, saída e detalhe) */
.resumo-passagem__topo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

/* Botões lado a lado numa linha de tabela (Notificações, pedidos de troca da Frota). */
.acoes-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acoes-empilhadas {
  display: grid;
  gap: 8px;
  max-width: 560px;
}

.acoes-empilhadas .botao {
  width: 100%;
  min-height: 52px;
}

.acoes-empilhadas form {
  display: grid;
}

@media (min-width: 768px) {
  .acoes-empilhadas {
    display: flex;
    flex-wrap: wrap;
  }

  .acoes-empilhadas .botao {
    width: auto;
  }
}

.portaria .aviso,
.portaria .mensagens {
  max-width: 720px;
  margin-bottom: 16px;
}

/* Aviso gerado (no detalhe da passagem): tipo, quando e se já foi visto. */
.aviso-portaria__titulo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 500;
  color: var(--cor-texto);
}

.aviso-portaria__quando,
.aviso-portaria__visto {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cor-texto-secundario);
}

.aviso-portaria__visto {
  display: flex;
  gap: 4px;
  align-items: center;
}

.aviso-portaria__visto .icone {
  flex: none;
  width: 16px;
  height: 16px;
}

.selo-forte {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.selo-forte .icone {
  width: 14px;
  height: 14px;
}

/* O vídeo da câmera ocupa o visor; a mira e a linha ficam por cima. */
.leitor__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--raio);
}

.leitor__mira,
.leitor__linha {
  z-index: 1;
}

.leitor__mira {
  position: relative;
}

/* Anúncio "Código lido" da entrada: a região viva fica sempre na página (vazia, sem ocupar
   espaço) para o leitor de tela anunciar quando a mensagem aparece. */
.portaria .mensagens--leitor {
  margin-bottom: 0;
}

.mensagens--leitor > .mensagem {
  margin-bottom: 16px;
}

/* Avisos da portaria (lista e bloco da movimentação) */
.lista-avisos {
  display: grid;
  gap: 8px;
  max-width: 820px;
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}

.aviso-portaria {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 12px 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.aviso-portaria > .icone {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--cor-link);
}

.aviso-portaria__corpo {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.aviso-portaria__resumo {
  margin: 0;
}

.aviso-portaria__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: 4px;
}

.aviso-portaria__acoes form {
  display: contents;
}

.aviso-portaria__excluida {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--cor-texto-secundario);
}

.aviso-portaria__excluida .icone {
  width: 16px;
  height: 16px;
}

/* Não visto: borda esquerda grossa, título forte e o selo "Não visto". */
.aviso-portaria--nao-visto {
  border-left: 6px solid var(--cor-acao);
}

.aviso-portaria--nao-visto .aviso-portaria__titulo {
  font-weight: 700;
}

/* Abas de filtro (Avisos) */
.abas {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cor-borda);
}

.abas__lista {
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.abas__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  color: var(--cor-link);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.abas__link:hover {
  background: var(--cor-realce);
}

.abas__link[aria-current] {
  font-weight: 500;
  color: var(--cor-texto);
  border-bottom-color: var(--cor-acao);
}

/* Relatório: filtros e barra com exportar e imprimir */
.filtros--relatorio .form-dados__campo {
  flex: 1 1 150px;
}

.barra-relatorio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 12px;
}

.barra-relatorio__contagem {
  margin: 0 auto 0 0;
  color: var(--cor-texto-secundario);
}

/* Nº da frota (3.1.0): selo de borda tracejada, na frota e na saída de material */
.numero-frota {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 2px dashed currentColor;
  border-radius: 6px;
}

.campo-numero-frota input {
  max-width: 12em;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Quem aprova o quê: caixas de marcar os centros, agrupadas por empresa ---------- */
.grupo-marcar {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.grupo-marcar legend {
  padding: 0;
  margin-bottom: 4px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.marcar {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
  cursor: pointer;
  border: 2px solid var(--cor-borda-campo);
  border-radius: var(--raio-pequeno);
}

.marcar span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.marcar input {
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--cor-acao);
}

.marcar:has(input:checked) {
  background: var(--cor-menu-ativo-fundo);
  border-color: var(--cor-acao);
}

.marcar:has(input:focus-visible) {
  outline: var(--foco-largura) solid var(--cor-foco);
  outline-offset: 2px;
}

.lista-pares-curta {
  display: grid;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lista-pares-curta strong {
  font-weight: 600;
}

.lista-pares-detalhe {
  margin-top: 6px;
}

.lista-pares-detalhe > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--cor-link);
  cursor: pointer;
}

.lista-pares-detalhe > summary:focus-visible {
  outline: var(--foco-largura) solid var(--cor-foco);
  outline-offset: 2px;
}

.lista-pares {
  display: grid;
  gap: 2px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Quadro Emitente / Solicitante / Aprovador / Validação Portaria: ícone e texto lado a lado. */
.quadro-nomes__estado {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.quadro-nomes__estado .icone {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Leitura de placa por foto (3.11): as opções de empresa e de modelo lado a lado quando cabem. */
.placa-admin__opcoes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Botão "Foto da placa" (3.11): o bloco ocupa a largura do campo da placa, com respiro embaixo. */
.placa-foto {
  display: grid;
  gap: 8px;
  margin-block: 8px 12px;
}

/* Foto da placa: aviso de carregamento (3.18.3). Camada fixa sobre a tela, criada por placa_foto.js
   enquanto a foto é reduzida, enviada e lida; só cores de tokens.css. */
.carregando-placa {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--cor-dialogo-fundo-externo);
}

.carregando-placa[hidden] {
  display: none;
}

.carregando-placa__cartao {
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  justify-items: center;
  width: 100%;
  max-width: 320px;
  padding: 28px 20px;
  color: var(--cor-texto);
  text-align: center;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio);
  box-shadow: 0 8px 24px var(--cor-sombra);
}

.carregando-placa__giro {
  width: 48px;
  height: 48px;
  border: 5px solid var(--cor-borda-campo);
  border-top-color: var(--cor-foco);
  border-radius: 50%;
  animation: carregando-placa-giro 0.9s linear infinite;
}

/* Sem movimento (prefers-reduced-motion): três pontos parados no lugar do giro. */
.carregando-placa__pontos {
  display: none;
  gap: 8px;
}

.carregando-placa__pontos span {
  width: 12px;
  height: 12px;
  background: var(--cor-foco);
  border-radius: 50%;
}

.carregando-placa__texto {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

@keyframes carregando-placa-giro {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carregando-placa__giro {
    display: none;
    animation: none;
  }

  .carregando-placa__pontos {
    display: flex;
  }
}
/* fim carregando-placa */

/* Lista de Pessoas: "Setores em que atua" por filial (uma linha por filial; acima de 5 abre o resumo). */
.setores-curto {
  display: grid;
  gap: 2px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.setores-curto strong {
  font-weight: 600;
}

.setores-curto-detalhe > summary {
  font-weight: 500;
  color: var(--cor-link);
  cursor: pointer;
}

.setores-curto-detalhe[open] > summary {
  margin-bottom: 4px;
}

/* Tabela com muitas colunas (Inventário, 3.20.3): espaçamento menor e números longos quebram, para
   caber sem cortar a coluna Situação quando o menu lateral está aberto. */
.tabela--compacta th,
.tabela--compacta td {
  padding: 10px 8px;
}

/* Só na faixa em que a tabela NÃO é empilhada (a partir de 600 px): empilhada, esta regra (mais
   específica que a da tabela empilhada) deixava o nome 16 px à direita dos rótulos (3.21.0). */
@media (min-width: 600px) {
  .cartao--tabela > .tabela-rolagem .tabela--compacta th:first-child,
  .cartao--tabela > .tabela-rolagem .tabela--compacta td:first-child {
    padding-left: 16px;
  }
}

.tabela--compacta td[data-rotulo="Série"],
.tabela--compacta td[data-rotulo="Patrimônio"] {
  overflow-wrap: anywhere;
}

.tabela--compacta td[data-rotulo="Valor (R$)"],
.tabela--compacta td[data-rotulo="Situação"] {
  white-space: nowrap;
}

/* Os botões de exportar não ficam colados no aviso de cima (Inventário, 3.20.3). */
.aviso + .barra-exportar {
  margin-top: 16px;
}

/* Campo de escolha com sugestões (0.2.1, static/js/sugestao.js): a caixa de texto com a lista de
   sugestões embaixo, na largura do campo. O <select> continua no formulário, escondido. */
.sugestao {
  position: relative;
  min-width: 0;
}

.sugestao__entrada {
  text-overflow: ellipsis;
}

.sugestao__painel {
  width: 100%;
  max-width: none;
}

.sugestao__painel .lista-escolha__opcao {
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 12px;
}

.sugestao__painel .lista-escolha__opcao > span {
  flex: none;
  padding: 2px 0;
}

.sugestao__detalhe {
  font-size: 0.8125rem;
  color: var(--cor-texto-secundario);
  overflow-wrap: anywhere;
}

/* A busca sem JavaScript: o termo e o botão "Buscar" na mesma linha (44 px ou mais). */
.busca-sem-js {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.busca-sem-js__rotulo {
  font-weight: 400;
  color: var(--cor-texto-secundario);
}

.busca-sem-js__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.busca-sem-js__linha .botao {
  min-height: 48px;
}