@import url('../vendor/fonts/fontes.css');
@import url('tokens.css');

/* Correção visual (docs/design/CORRECAO-VISUAL.md, 15/10/2026). Tokens em tokens.css (gerado); aqui só var(--...).
   Estrutura neutra; cor só em ação, status, alerta e dado. Pesos 400/500 no corpo, 600 em título e valor principal.
   Hover só com mouse (bloco no fim); transição só de transform e opacity. */

/* ---------- base e superfícies do navegador ---------- */
* { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* segurar o dedo num controle não seleciona o texto dele (texto comum continua selecionável) */
button, .botao, [role=button], [role=tab], [role=option] { -webkit-user-select: none; user-select: none; }
/* telas de toque (celular e tablet): campo com 16 px, senão o iOS dá zoom ao focar */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: var(--fs-4); }
}
html, body { height: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto); font: var(--peso-normal) var(--fs-3)/var(--entrelinha) var(--fonte);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); /* entalhe do iPhone na horizontal */
}
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--acao); }
a { color: var(--texto); text-decoration-color: var(--linha-forte); text-underline-offset: .2em; text-decoration-thickness: 1px; }
::selection { background: var(--selecao-texto); color: var(--texto); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-1); }
* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: var(--r-3); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
input[type=checkbox], input[type=radio], input[type=range], progress { accent-color: var(--acao); }
.mono { font-family: var(--fonte-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
.fraco { color: var(--texto-3); }
.medio { color: var(--texto-2); }
.erro-txt { color: var(--sev-atencao-texto); }
.sem-margem-topo { margin-top: 0; }
.com-selo { display: inline-flex; align-items: center; gap: var(--e-1); }
.com-selo .fraco { margin-left: var(--e-1); }
.oculto { display: none !important; }
.espaco { flex: 1; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icone { flex: none; display: inline-block; vertical-align: -.18em; stroke-width: 1.75; }
.pular { position: fixed; top: var(--e-2); left: var(--e-2); z-index: var(--z-toast); padding: var(--e-2) var(--e-3); background: var(--acao); color: var(--acao-texto);
  border-radius: var(--r-2); transform: translateY(-200%); }
.pular:focus { transform: none; }
/* metadados em linha: "·" com o mesmo espaço dos dois lados, inquebrável, sem ponto digitado no texto */
.meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; min-width: 0; color: var(--texto-2); }
.meta > * { white-space: nowrap; }
.meta > * + *::before { content: "·"; padding: 0 .45em; color: var(--texto-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- casca ---------- */
.app {
  display: grid; grid-template-columns: 224px minmax(0, 1fr); grid-template-rows: 52px auto minmax(0, 1fr);
  height: 100vh; height: 100dvh;
}
.app.menu-recolhido { grid-template-columns: 60px minmax(0, 1fr); }
.logo-escuro { display: none; }
:root[data-tema="escuro"] .logo-claro { display: none; }
:root[data-tema="escuro"] .logo-escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-claro { display: none; }
  :root:not([data-tema="claro"]) .logo-escuro { display: block; }
}

/* menu lateral neutro: item ativo com fundo sutil e barra fina na cor de ação */
.nav {
  grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; min-height: 0;
  background: var(--superficie); border-right: 1px solid var(--linha); padding: 0 var(--e-2) var(--e-3);
}
.nav .marca { display: flex; align-items: center; gap: var(--e-2); height: 52px; padding: 0 var(--e-2); margin: 0 calc(var(--e-2) * -1) var(--e-2);
  border-bottom: 1px solid var(--linha); color: var(--texto); text-decoration: none; flex: none; }
.nav .marca img { height: 26px; width: auto; display: block; }
.nav .marca-nome { font-weight: var(--peso-forte); font-size: var(--fs-3); }
.nav-itens { display: grid; gap: 1px; }
.nav a[data-rota], .nav-conta button, .nav-recolher {
  position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 34px; padding: 0 var(--e-2); border-radius: var(--r-2);
  color: var(--texto-2); font-weight: var(--peso-medio); font-size: var(--fs-3); text-decoration: none; border: 0; background: none;
  width: 100%; text-align: left; cursor: pointer; white-space: nowrap;
}
.nav a[data-rota] .icone, .nav-conta .icone, .nav-recolher .icone { color: var(--texto-3); }
.nav a[data-rota].ativo { background: var(--acao-fundo); color: var(--texto); }
.nav a[data-rota].ativo::before { content: ""; position: absolute; left: calc(var(--e-2) * -1); top: 7px; bottom: 7px; width: 2px; border-radius: var(--r-1); background: var(--acao); }
.nav a[data-rota].ativo .icone { color: var(--texto); }
.nav .secao { padding: var(--e-4) var(--e-2) var(--e-1); color: var(--texto-3); font-size: var(--fs-1); font-weight: var(--peso-medio);
  letter-spacing: var(--rotulo-espacamento); white-space: nowrap; }
.nav-conta { display: none; }
.nav-pe { margin-top: auto; padding-top: var(--e-4); display: grid; gap: var(--e-2); }
.rodape-nav { display: flex; gap: var(--e-3); padding: 0 var(--e-2); font-size: var(--fs-1); }
.rodape-nav a { color: var(--texto-3); }
.menu-recolhido .nav a[data-rota] span, .menu-recolhido .nav .secao span, .menu-recolhido .nav-recolher span,
.menu-recolhido .nav .marca-nome, .menu-recolhido .rodape-nav { display: none; }
.menu-recolhido .nav .secao { padding: var(--e-2) 0; border-top: 1px solid var(--linha); margin-top: var(--e-2); }
.menu-recolhido .nav a[data-rota], .menu-recolhido .nav-recolher { justify-content: center; padding: 0; }
.menu-recolhido .nav-recolher .icone { transform: rotate(180deg); }
.menu-recolhido .nav .marca { justify-content: center; }

/* topo */
.topo {
  grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: var(--e-3); min-width: 0;
  padding: 0 var(--e-4); background: var(--superficie); border-bottom: 1px solid var(--linha);
}
.topo .marca-celular, .topo .menu-celular { display: none; }
.seletor-cliente { min-width: 220px; max-width: 320px; }
.cliente-nome { color: var(--texto-2); font-weight: var(--peso-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.botao-topo {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); padding: 0 var(--e-2); border: 0;
  border-radius: var(--r-2); background: none; color: var(--texto-2); cursor: pointer; text-decoration: none; font-weight: var(--peso-medio); white-space: nowrap;
}
.botao-topo .icone { color: var(--texto-3); }

/* contador: um só, ponto vermelho só se houver crítico */
.pendencias {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); padding: 0 var(--e-3); white-space: nowrap;
  border: 1px solid var(--linha-forte); border-radius: var(--r-2); background: var(--superficie); color: var(--texto-2); cursor: pointer;
  font-size: var(--fs-2); font-weight: var(--peso-medio);
}
.pendencias.com-pendencia { color: var(--texto); }
.pendencias .pend-num { font-weight: var(--peso-forte); }
.pendencias .pend-num:empty { display: none; }
.ponto-critico { width: 8px; height: 8px; border-radius: 50%; background: var(--sev-critico); box-shadow: 0 0 0 2px var(--superficie); }
.pend-pop { display: grid; }
.pend-cab { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
.pend-lista { list-style: none; margin: 0; padding: var(--e-1) 0; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.pend-item { display: flex; align-items: flex-start; gap: var(--e-3); width: 100%; padding: var(--e-2) var(--e-4); border: 0; background: none; text-align: left; cursor: pointer; }
.pend-item .sev { margin-top: 2px; }
.pend-corpo { display: grid; gap: 2px; min-width: 0; }
.pend-l1 { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.pend-l1 > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend-corpo .meta { font-size: var(--fs-1); }
.pend-vazio { padding: var(--e-3) var(--e-4); margin: 0; }
.pend-todos { display: block; padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linha); font-weight: var(--peso-medio); }

/* sem resposta do servidor */
.conexao {
  display: flex; align-items: center; gap: var(--e-2); min-height: calc(var(--alvo) - 4px); padding: 0 var(--e-3); border-radius: var(--r-2);
  font-size: var(--fs-2); color: var(--texto); min-width: 0; background: var(--superficie-2); border: 1px solid var(--linha-forte);
}
.conexao .icone { color: var(--sev-atencao-texto); }

/* faixa de pânico: compacta, impossível de ignorar, único vermelho de fundo do produto */
.faixa-panico { grid-column: 2; grid-row: 2; z-index: var(--z-panico); background: var(--panico-fundo); color: var(--panico-texto); padding: 0 var(--e-4); }
.panico-linha { display: flex; align-items: center; gap: var(--e-3); min-height: 40px; min-width: 0; }
.panico-rotulo { font-weight: var(--peso-forte); }
.panico-info { min-width: 0; overflow: hidden; }
.faixa-panico .meta, .faixa-panico .meta > * + *::before { color: inherit; }
.panico-tempo { font-variant-numeric: tabular-nums; }
.panico-mais { color: inherit; font-size: var(--fs-2); font-weight: var(--peso-medio); white-space: nowrap; }
.faixa-panico :focus-visible { outline-color: var(--panico-texto); }

.principal { grid-column: 2; grid-row: 3; overflow: auto; position: relative; min-width: 0; min-height: 0; }
.veu-menu { display: none; }

.pagina { padding: var(--e-5) var(--e-6) var(--e-10); max-width: 1400px; }
.pagina.cheia { padding: 0; max-width: none; height: 100%; }
.cabecalho { display: flex; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-4); }
.cabecalho h1 { font-weight: var(--peso-forte); font-size: var(--fs-6); line-height: 1.2; letter-spacing: var(--numero-espacamento); margin: 0; flex: 1; text-wrap: balance; }
.cabecalho .sub { width: 100%; margin: calc(var(--e-1) * -1) 0 0; color: var(--texto-2); }
.cabecalho .linha-acoes input[type=search], .busca-pagina { width: 260px; max-width: 100%; }
.acoes-extra { margin-top: var(--e-6); }
h2 { font-weight: var(--peso-forte); font-size: var(--fs-4); line-height: 1.3; margin: var(--e-6) 0 var(--e-2); text-wrap: balance; }
h3 { font-size: var(--fs-3); font-weight: var(--peso-forte); margin: var(--e-4) 0 var(--e-2); }

/* ---------- primitivos ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--alvo);
  padding: 0 var(--e-3); border-radius: var(--r-2); border: 1px solid var(--linha-forte); background: var(--superficie);
  color: var(--texto); cursor: pointer; font-weight: var(--peso-medio); font-size: var(--fs-3); line-height: 1;
  white-space: nowrap; text-decoration: none; transition: transform var(--dur-1) var(--curva-saida);
}
.botao:active:not(:disabled) { transform: scale(.97); }
.botao.primario { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); }
.botao.perigo { background: var(--sev-critico); border-color: var(--sev-critico); color: var(--sev-critico-tinta); }
.botao.perigo-contorno { color: var(--sev-critico); border-color: color-mix(in oklch, var(--sev-critico) 45%, transparent); }
.botao.discreto { border-color: transparent; background: none; color: var(--texto-2); padding: 0 var(--e-2); }
.botao.pequeno { min-height: calc(var(--alvo) - 4px); padding: 0 var(--e-3); font-size: var(--fs-2); }
.botao.icone-so { padding: 0; width: var(--alvo); }
.botao.primario-invertido { background: var(--panico-texto); border-color: var(--panico-texto); color: var(--panico-fundo); font-weight: var(--peso-forte); }
.botao.secundario-invertido { background: transparent; border-color: color-mix(in oklch, var(--panico-texto) 55%, transparent); color: var(--panico-texto); }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.botao[aria-pressed="true"] { background: var(--acao-fundo); border-color: var(--linha-forte); color: var(--texto); }
.botao[aria-busy="true"] { cursor: progress; color: transparent; position: relative; }
.botao[aria-busy="true"]::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--texto-3);
  border-right-color: transparent; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], input[type=date],
input[type=datetime-local], input[type=time], input[type=tel], select, textarea {
  width: 100%; min-height: var(--alvo); padding: var(--e-1) var(--e-3); border: 1px solid var(--borda-campo); border-radius: var(--r-2);
  background: var(--superficie); color: var(--texto); font-size: var(--fs-3);
}
::placeholder { color: var(--texto-3); opacity: 1; }
textarea { resize: vertical; min-height: 72px; padding-top: var(--e-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible, input:focus, textarea:focus {
  border-color: var(--foco); outline: 2px solid color-mix(in oklch, var(--foco) 35%, transparent); outline-offset: 0;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .combobox[aria-invalid="true"] { border-color: var(--sev-atencao); box-shadow: inset 0 0 0 1px var(--sev-atencao); }
.erro-campo { display: block; font-size: var(--fs-1); color: var(--sev-atencao-texto); margin-top: var(--e-1); }
.erro-campo:empty { display: none; }
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-2); color: var(--texto-3); cursor: not-allowed; }
.campo { display: block; min-width: 0; }
.campo > .combobox { width: 100%; }
.campo > span:first-child { display: block; font-size: var(--fs-1); font-weight: var(--peso-medio); color: var(--texto-2); margin-bottom: var(--e-1); letter-spacing: var(--rotulo-espacamento); }
.campo .ajuda { display: block; font-size: var(--fs-1); color: var(--texto-3); margin-top: var(--e-1); }
.erro-campo { display: block; font-size: var(--fs-1); color: var(--sev-critico); margin: var(--e-1) 0 0; }
.erro-campo:empty { display: none; }
.check { display: inline-flex; align-items: center; gap: var(--e-2); cursor: pointer; min-height: var(--alvo); }
.check input { width: 16px; height: 16px; margin: 0; }
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-4); }
.grade-form .inteira { grid-column: 1 / -1; }
.linha-acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.barra-filtros { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--e-4); }
.barra-filtros .campo { min-width: 150px; }

/* controle segmentado com contagem */
.segmentos { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-2); background: var(--superficie-2); border: 1px solid var(--linha); }
.segmentos button {
  border: 0; background: none; min-height: calc(var(--alvo) - 6px); padding: 0 var(--e-3); cursor: pointer; border-radius: var(--r-1);
  font-size: var(--fs-2); color: var(--texto-2); font-weight: var(--peso-medio); white-space: nowrap;
}
.segmentos button.ativo, .segmentos button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.segmentos button b { font-weight: var(--peso-forte); margin-left: var(--e-1); color: var(--texto); }
.segmentos.cheio { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; width: 100%; }

/* combobox e intervalo de datas (primitivos.js) */
.combobox {
  display: inline-flex; align-items: center; gap: var(--e-2); width: 100%; min-height: var(--alvo); padding: var(--e-1) var(--e-2) var(--e-1) var(--e-3);
  border: 1px solid var(--borda-campo); border-radius: var(--r-2); background: var(--superficie); color: var(--texto); cursor: pointer; text-align: left;
}
.combobox > .icone { color: var(--texto-3); }
.combobox .cb-valor { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.cb-titulo { font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sub { font-size: var(--fs-1); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover {
  position: fixed; z-index: var(--z-modal); background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--r-3);
  box-shadow: var(--sombra-2); overflow: hidden; animation: pop-entra var(--dur-2) var(--curva-saida);
}
.popover.saindo { opacity: 0; transform: scale(.98); transition: opacity var(--dur-1) var(--curva-saida), transform var(--dur-1) var(--curva-saida); }
/* aberto pelo teclado: aparece na hora (ação repetida, sem animação) */
:root[data-modalidade="teclado"] .popover, :root[data-modalidade="teclado"] .modal { animation: none; }
@keyframes pop-entra { from { opacity: 0; transform: scale(.97); } }
.cb-pop input { border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; min-height: 40px; padding: 0 var(--e-3); }
.cb-pop input:focus, .cb-pop input:focus-visible { outline: none; border-color: var(--linha); box-shadow: inset 0 -2px 0 var(--foco); }
.cb-lista { list-style: none; margin: 0; padding: var(--e-1); max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.cb-lista.cb-virtual { position: relative; }
.cb-espaco { list-style: none; pointer-events: none; }
.cb-virtual li[role=option] { box-sizing: border-box; }
.cb-lista li[role=option] { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-radius: var(--r-1); cursor: pointer; line-height: 1.3; }
.cb-lista li[role=option] .cb-titulo, .cb-lista li[role=option] .cb-sub { white-space: normal; }
.cb-lista li.ativo { background: var(--acao-fundo); }
.cb-lista li[aria-selected="true"] .cb-titulo { font-weight: var(--peso-forte); }
.cb-vazio { padding: var(--e-3); color: var(--texto-3); }
.combobox.intervalo { width: auto; min-width: 220px; }
.barra-filtros > .combobox:not(.intervalo) { width: auto; min-width: 220px; max-width: 320px; }
.ir-pop { display: grid; grid-template-columns: 132px 1fr; }
.ir-atalhos { display: grid; align-content: start; gap: 2px; padding: var(--e-2); border-right: 1px solid var(--linha); background: var(--superficie-2); }
.ir-atalho { border: 0; background: none; text-align: left; padding: var(--e-2); border-radius: var(--r-1); cursor: pointer; font-weight: var(--peso-medio); color: var(--texto-2); }
.ir-atalho.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.ir-form { display: grid; gap: var(--e-3); padding: var(--e-3); }

/* skeleton no formato final */
.esqueleto { display: grid; gap: 1px; }
.esq-linha { display: grid; gap: var(--e-2); padding: var(--e-3); border-bottom: 1px solid var(--linha); }
.esq-bloco { display: block; height: 10px; border-radius: var(--r-1); background: var(--superficie-3); animation: esq 1.4s ease-in-out infinite; }
.esq-bloco.curto { width: 45%; height: 12px; }
.esq-bloco.longo { width: 75%; }
.esq-numeros { grid-template-columns: repeat(2, 1fr); gap: var(--e-4); padding: var(--e-4); }
.esq-numeros > div { display: grid; gap: var(--e-2); }
.esq-bloco.rotulo { width: 50%; height: 8px; }
.esq-bloco.numero { width: 70%; height: 20px; }
.esq-area { padding: var(--e-4); }
.esq-bloco.area { height: 96px; }
@keyframes esq { 50% { opacity: .55; } }

/* símbolo de status (tabela única) */
.sim { display: inline-block; flex: none; vertical-align: middle; margin-inline-end: var(--e-2); }
.sim-movimento { width: 14px; height: 14px; background: var(--st-movimento); clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%); }
.sim-ligado { width: 11px; height: 11px; border-radius: 50%; background: var(--st-ligado); }
.sim-desligado { width: 10px; height: 10px; border-radius: var(--r-1); background: var(--st-desligado); }
.sim-sem_sinal, .sim-sem_posicao { width: 11px; height: 11px; border-radius: 50%; border: 1.5px dashed var(--st-semcom); }
.sim.velho { opacity: .5; }

/* selo de severidade: octógono (crítico), losango (atenção), círculo (informativo) */
.sev { display: inline-grid; place-items: center; flex: none; vertical-align: middle; font-weight: var(--peso-forte); font-size: 10px; line-height: 1; min-width: 16px; height: 16px; }
.sev-critico { background: var(--sev-critico); color: var(--sev-critico-tinta); padding: 0 3px;
  clip-path: polygon(4.5px 0, calc(100% - 4.5px) 0, 100% 4.5px, 100% calc(100% - 4.5px), calc(100% - 4.5px) 100%, 4.5px 100%, 0 calc(100% - 4.5px), 0 4.5px); }
.sev-atencao { background: var(--sev-atencao); color: var(--sev-atencao-tinta); min-width: 0; width: 13px; height: 13px; margin: 0 2px; transform: rotate(45deg); border-radius: var(--r-1); }
.sev-atencao > * { transform: rotate(-45deg); }
.sev-info { color: var(--sev-info); border: 1.5px solid currentColor; border-radius: 50%; min-width: 0; width: 15px; height: 15px; font-size: 9px; }

/* placa Mercosul em miniatura */
.placa-br { display: inline-flex; flex-direction: column; flex: none; vertical-align: middle; overflow: hidden; background: var(--mercosul-fundo);
  color: var(--mercosul-tinta); border: 1px solid color-mix(in oklch, var(--mercosul-tinta) 70%, transparent); border-radius: var(--r-1); }
.placa-br::before { content: ""; height: 3px; background: var(--mercosul); }
.placa-br > span { font: var(--peso-medio) 12px/1.35 var(--fonte-mono); letter-spacing: .04em; padding: 0 5px; }

/* formulário: seções, sufixo de unidade, obrigatório */
.secao-form { grid-column: 1 / -1; margin: var(--e-4) 0 0; padding-top: var(--e-4); border-top: 1px solid var(--linha); font-size: var(--fs-3); }
.grade-form > .secao-form:first-child, .m-corpo > div > .grade-form:first-child > .secao-form:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.campo-sufixo { position: relative; display: block; }
.campo-sufixo input { padding-right: calc(var(--e-10) + var(--e-4)); }
.campo-sufixo .sufixo { position: absolute; right: var(--e-3); top: 50%; transform: translateY(-50%); color: var(--texto-3); font-size: var(--fs-2); pointer-events: none; }
.obrigatorio { color: var(--texto-3); }
.ajuda-check { font-size: var(--fs-1); color: var(--texto-3); margin-left: var(--e-6); }
.escolha-multipla { display: grid; gap: var(--e-2); }
.vazio-util { padding: var(--e-8) var(--e-4); text-align: center; color: var(--texto-2); display: grid; justify-items: center; gap: var(--e-3); }
.vazio-util p { margin: 0; max-width: 48ch; }

/* gaveta lateral (formulário longo): rodapé fixo, corpo rola */
.fundo-modal.com-gaveta { justify-content: flex-end; padding: 0; align-items: stretch; overflow: hidden; }
.modal.gaveta { max-width: 560px; height: 100%; border-radius: 0; display: flex; flex-direction: column; border: 0; border-left: 1px solid var(--linha);
  animation: gaveta-entra var(--dur-3) var(--curva-gaveta); }
.modal.gaveta .m-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.m-pe .separado { margin-right: auto; }
@keyframes gaveta-entra { from { transform: translateX(32px); opacity: 0; } }

/* ---------- tabelas ---------- */
.tabela-caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); overflow: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.tabela th { text-align: left; font-weight: var(--peso-medio); color: var(--texto-2); padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--linha-forte);
  background: var(--superficie); position: sticky; top: 0; z-index: 1; white-space: nowrap; font-size: var(--fs-1); letter-spacing: var(--rotulo-espacamento); }
.tabela th .ordenar { all: unset; display: inline-flex; align-items: center; gap: var(--e-1); cursor: pointer; border-radius: var(--r-1); }
.tabela th .ordenar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.tabela th .seta { color: var(--texto-3); display: inline-flex; }
.tabela tbody tr { content-visibility: auto; contain-intrinsic-size: auto 40px; }
.abrir-linha { all: unset; cursor: pointer; display: inline; border-radius: var(--r-1); }
.abrir-linha:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.tabela td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--linha); vertical-align: top; }
/* a coluna do veículo nunca fica mais estreita que ladrilho + placa (no celular a tabela rola de lado) */
.tabela td .identidade { min-width: 150px; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela td.dir, .tabela th.dir { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr.inativo td { color: var(--texto-3); }
.vazio { padding: var(--e-8); text-align: center; color: var(--texto-3); }
.etiqueta { display: inline-block; font-size: var(--fs-1); padding: 1px var(--e-2); border-radius: var(--r-1); background: var(--superficie-2); color: var(--texto-2); white-space: nowrap; }
.etiqueta.ok { color: var(--sucesso); }
.etiqueta.atencao { color: var(--sev-atencao-texto); }
.etiqueta.critico { color: var(--sev-critico); }
.status-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: var(--e-2); vertical-align: 1px; }
.tipo-veiculo { display: inline-flex; align-items: center; gap: var(--e-2); white-space: nowrap; }
.silhueta { display: inline-block; flex: none; vertical-align: middle; color: var(--texto-2); }

/* ---------- páginas de lista (cadastros, alertas, relatórios, administração) ---------- */
.pagina.estreita { max-width: 720px; }
.secao-pagina { margin: var(--e-8) 0 var(--e-3); font-size: var(--fs-4); font-weight: var(--peso-forte); }
.pilha { display: grid; gap: var(--e-4); justify-items: start; }
.form-senha { display: grid; gap: var(--e-4); }
.form-senha .linha-acoes { justify-content: flex-start; }
.linha-acoes .separado { margin-right: auto; }
.acoes-secao { margin-top: var(--e-3); }
.acoes-rel { margin-bottom: var(--e-4); }
.campo.curto { max-width: 200px; }
.extras-rel { display: contents; }
.pop-veiculos { padding: var(--e-3); }
.pop-veiculos .escolha-veiculos { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.corpo-rel { min-width: 0; }
.lista-tipos [aria-current="page"] { background: var(--superficie-2); font-weight: var(--peso-medio); box-shadow: inset 2px 0 0 var(--acao); }
.navegador { max-width: 28ch; }
.detalhes-aud { max-width: 40ch; font-size: var(--fs-1); }
.quebra { overflow-wrap: anywhere; }
.bloco-codigo { white-space: pre-wrap; user-select: text; }
.bloco-horario { display: grid; gap: var(--e-3); margin-top: var(--e-3); }
.linha-config { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.linha-config .nome { font-weight: var(--peso-medio); }
.linha-config .detalhe { grid-column: 1 / -1; color: var(--texto-2); font-size: var(--fs-2); }
.linha-config .ok { color: var(--texto-2); }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-6); }
.duas-colunas.integracoes { grid-template-columns: minmax(0, 1fr); gap: var(--e-8); max-width: 960px; }
.integracoes section h2 { font-size: var(--fs-4); margin: 0 0 var(--e-2); }
.integracoes .secao-pagina { margin-top: var(--e-8); }
/* cercas */
.acoes-cercas { margin: var(--e-3) 0 var(--e-4); }
.acoes-poligono { margin: var(--e-3) 0; align-items: center; }
.acoes-poligono .contagem { margin: 0; flex: 1; }
.acoes-cercas-pe { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--linha); justify-content: flex-end; }
.lista-cercas { list-style: none; margin: 0; padding: 0; }
.lista-cercas li { display: flex; align-items: center; gap: var(--e-2); border-bottom: 1px solid var(--linha); }
.lista-cercas li.inativo .nome { color: var(--texto-3); }
.item-cerca { all: unset; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) 0; cursor: pointer; border-radius: var(--r-1); }
.item-cerca:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.item-cerca .texto { display: grid; gap: var(--e-1); min-width: 0; }
.item-cerca .nome { font-weight: var(--peso-medio); }
.item-cerca .fraco { font-size: var(--fs-1); }
.amostra-cor { flex: none; width: 10px; height: 10px; margin-top: var(--e-1); border-radius: var(--r-1); }

/* ---------- componentes de domínio (REFERENCIA-FLEETBASE 3.4 a 3.7) ---------- */
.identidade { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; vertical-align: middle; }
.id-ladrilho { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-2);
  background: var(--superficie-2); color: var(--texto-2); }
.id-status { position: absolute; left: -3px; top: -3px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--superficie); }
.id-status .sim { margin: 0; transform-origin: center; }
.id-texto { display: grid; gap: calc(var(--e-1) / 2); min-width: 0; }
.id-l1 { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; }
.id-apelido { font-weight: var(--peso-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-l2 { font-size: var(--fs-1); color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selo-status { display: inline-flex; align-items: center; gap: var(--e-1); border-radius: var(--r-1); color: var(--texto); white-space: nowrap; font-weight: var(--peso-medio); }
.selo-status .sim { margin: 0; }
.selo-p { font-size: var(--fs-0); padding: 0 var(--e-1); }
.selo-m { font-size: var(--fs-1); padding: calc(var(--e-1) / 2) var(--e-2); }
.selo-g { font-size: var(--fs-2); padding: var(--e-1) var(--e-3); }
.st-tinta-movimento { background: color-mix(in oklch, var(--st-movimento) 12%, var(--superficie)); }
.st-tinta-ligado { background: color-mix(in oklch, var(--st-ligado) 14%, var(--superficie)); }
.st-tinta-desligado, .st-tinta-atrasado, .st-tinta-sem_sinal { background: var(--superficie-2); }
.cartao-resumo { position: fixed; left: 0; top: 0; z-index: var(--z-toast); }
.barra-filtros .botao-colunas, .acoes-rel .lugar-colunas { margin-left: auto; }
.link-placa { display: inline-flex; border-radius: var(--r-1); text-decoration: none; color: inherit; }
.link-placa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.grupo-passo { display: inline-flex; gap: calc(var(--e-1) / 2); }
.cb-icone { display: inline-flex; flex: none; }
.cb-icone[hidden] { display: none; }
.cb-textos { display: grid; min-width: 0; }
.pop-colunas { display: grid; gap: var(--e-2); padding: var(--e-3); }
.pop-colunas b { font-weight: var(--peso-forte); font-size: var(--fs-2); }

/* ---------- fotos dos veículos (FOTOS-VEICULOS.md) ---------- */
.foto-veic { position: relative; display: block; overflow: hidden; background-size: cover; background-position: center; border-radius: inherit; } /* valor-livre: herda o raio de quem contém (ladrilho, cartão, campo) */
.foto-veic picture, .foto-veic img { display: block; width: 100%; height: 100%; }
.foto-veic img { object-fit: cover; opacity: 0; transition: opacity 200ms var(--curva-saida), transform 150ms var(--curva-saida); }
.foto-veic.carregada img { opacity: 1; }
.foto-veic.sem-fade img { transition-property: transform; }
.ladrilho-foto { position: relative; flex: none; display: inline-grid; place-items: center; border-radius: var(--r-1); background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linha); color: var(--texto-2); }
.ladrilho-foto .foto-veic { position: absolute; inset: 0; }
.ladrilho-foto .foto-veic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--linha); pointer-events: none; } /* valor-livre: borda segue o raio do ladrilho */
.ladrilho-p { width: 40px; height: 30px; }
.ladrilho-m { width: 64px; height: 48px; }
.ladrilho-silhueta { display: inline-flex; }
.ladrilho-foto .id-status { left: -4px; top: -4px; z-index: 1; }
.cartao-foto { width: 100%; height: auto; border-radius: var(--r-1); margin-bottom: var(--e-3); background-color: var(--flutua-linha); }
.insp-foto { flex: none; max-width: 320px; height: auto; margin: var(--e-3) var(--e-4) 0; width: calc(100% - 2 * var(--e-4)); border-radius: var(--r-2); }
.insp-foto::after, .comp-foto .foto-veic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--linha); pointer-events: none; } /* valor-livre: borda segue o raio */
@media (max-width: 600px) { .insp-foto { width: 144px; } } /* no celular o mapa continua visível acima do painel */
.comp-foto { flex: none; width: 64px; height: 48px; border-radius: var(--r-1); }
.comp-foto[hidden] { display: none; }
.comp-foto .foto-veic { width: 100%; height: 100%; }
.secao-foto { margin-bottom: var(--e-4); }
.secao-foto .secao-form { margin-top: 0; padding-top: 0; border-top: 0; }
.escolha-veiculos .check .ladrilho-foto { margin-right: var(--e-1); }
/* prévia ao lado do menu */
.previa-veic { position: fixed; z-index: calc(var(--z-modal) + 10); width: 296px; pointer-events: none; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-2); padding: var(--e-2);
  transition: opacity 180ms var(--curva-saida), transform 180ms var(--curva-saida); }
.previa-veic[hidden] { display: none; }
.previa-veic.entrando { opacity: 0; transform: scale(.96); transition: none; }
.previa-veic.sem-animacao { transition: none; }
.previa-veic.trocando .foto-veic img { opacity: 0; transition: none; }
.previa-veic .foto-veic img { transition-duration: 120ms; }
.previa-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-2); }
.previa-sem-foto { display: grid; place-items: center; align-content: center; gap: var(--e-2); background: var(--superficie-2); }
.previa-texto { display: grid; gap: var(--e-1); padding: var(--e-2) var(--e-1) var(--e-1); }
.previa-l1, .previa-l2 { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.previa-l1 .apelido { font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa-l2 { font-size: var(--fs-1); justify-content: space-between; }
/* campo de envio */
.campo-foto { display: grid; gap: var(--e-3); }
.zona-foto { all: unset; box-sizing: border-box; display: grid; place-items: center; align-content: center; gap: var(--e-2); width: 100%; aspect-ratio: 4 / 3; max-width: 320px;
  border: 1px dashed var(--linha-forte); border-radius: var(--r-3); background: var(--superficie-2); color: var(--texto-2); cursor: pointer; text-align: center; }
.zona-foto:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.zona-foto .convite { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--texto); font-weight: var(--peso-medio); }
.silhueta-convite { color: var(--texto-3); display: inline-flex; }
.campo-foto.arrastando .zona-foto, .campo-foto.arrastando .foto-campo { border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in oklch, var(--foco) 25%, transparent); }
.foto-campo { width: 100%; max-width: 320px; height: auto; border-radius: var(--r-3); box-shadow: inset 0 0 0 1px var(--linha); }
.foto-campo.revelando img { filter: blur(8px); transform: scale(1.02); transition: none; }
.foto-campo img { transition: opacity 200ms var(--curva-saida), filter 400ms var(--curva-saida), transform 400ms var(--curva-saida); }
.foto-veic.saindo { opacity: 0; transition: opacity 150ms var(--curva-saida); }
.campo-foto[data-concluido="sim"] .foto-campo::before { content: ""; position: absolute; right: var(--e-2); top: var(--e-2); z-index: 1; width: 24px; height: 24px; border-radius: 50%;
  background: var(--st-movimento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; } /* valor-livre: ícone do check embutido */
.dica-foto { margin: 0; font-size: var(--fs-1); color: var(--texto-2); }
.msg-foto { margin: 0; font-size: var(--fs-2); color: var(--texto-2); }
.msg-foto:empty { display: none; }
.campo-foto[data-estado="erro"] .msg-foto { color: var(--sev-atencao-texto); }
.enviando-foto { display: grid; gap: var(--e-2); max-width: 320px; }
.progresso-foto { display: block; height: 3px; border-radius: var(--r-1); background: var(--superficie-2); overflow: hidden; }
.progresso-foto > span { display: block; height: 100%; background: var(--acao); transform: scaleX(0); transform-origin: left; transition: transform 200ms linear; }
.campo-foto[data-estado="processando"] .progresso-foto > span { animation: processando 1.2s ease-in-out infinite alternate; }
@keyframes processando { from { opacity: 1; } to { opacity: .35; } }
/* recorte 4:3 */
.recorte { display: grid; gap: var(--e-3); max-width: 420px; }
.recorte-palco { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--r-3); overflow: hidden; background: var(--superficie-2); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.recorte-palco:active { cursor: grabbing; }
.recorte-palco:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.recorte-tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.recorte-moldura { position: absolute; left: 50%; top: 50%; width: var(--mw, 84%); aspect-ratio: 4 / 3; transform: translate(-50%, -50%); border-radius: var(--r-2);
  box-shadow: 0 0 0 9999px rgb(0 0 0 / .45), inset 0 0 0 2px rgb(255 255 255 / .9); pointer-events: none; } /* valor-livre: véu escuro e borda da moldura de recorte */
.recorte-controles { display: flex; align-items: center; gap: var(--e-2); color: var(--texto-2); }
.recorte-zoom { flex: 1; accent-color: var(--acao); }

/* ---------- utilitários de célula ---------- */
.bloco { display: block; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sem-quebra { flex-wrap: nowrap; white-space: nowrap; }
.celula-veic { display: inline-flex; flex-direction: column; align-items: flex-start; gap: calc(var(--e-1) / 2); }
.alerta-tipo { font-weight: var(--peso-medio); }
.descricao { display: block; max-width: 44ch; color: var(--texto-2); }
.aberto { font-weight: var(--peso-medio); }
.contagem { margin: 0 0 var(--e-2); font-size: var(--fs-1); color: var(--texto-3); }
.link-discreto { color: var(--texto-2); font-size: var(--fs-2); text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
.unid { font-size: var(--fs-3); font-weight: var(--peso-normal); color: var(--texto-2); }

/* ---------- visão geral ---------- */
.grade-visao { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e-4); }
.bloco-visao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); padding: var(--e-4) var(--e-5) var(--e-5); min-width: 0; }
.bloco-cab { display: flex; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-4); }
.bloco-cab h2 { margin: 0; flex: 1; font-size: var(--fs-3); font-weight: var(--peso-forte); }
.composicao { display: flex; gap: calc(var(--e-1) / 2); height: 12px; border-radius: var(--r-1); overflow: hidden; margin-bottom: var(--e-3); background: var(--superficie-2); }
.faixa-st { flex-basis: 0; min-width: 3px; }
.st-movimento { background: var(--st-movimento); }
.st-ligado { background: var(--st-ligado); }
.st-desligado { background: var(--st-desligado); }
.st-atrasado { background: repeating-linear-gradient(135deg, var(--st-semcom) 0 3px, transparent 3px 6px); }
.st-sem_sinal { background: var(--st-semcom); opacity: .55; }
.lista-status, .lista-sev { list-style: none; margin: 0; padding: 0; }
.lista-status a, .lista-sev a { display: grid; grid-template-columns: 20px 1fr auto 48px; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-2); margin: 0 calc(var(--e-2) * -1); border-radius: var(--r-2); color: inherit; text-decoration: none; min-height: 40px; }
.lista-sev a { grid-template-columns: 20px 1fr auto; }
.lista-status li + li, .lista-sev li + li { border-top: 1px solid var(--linha); }
.lista-status .valor, .lista-sev .valor { font-weight: var(--peso-forte); font-size: var(--fs-4); }
.lista-status .pct { color: var(--texto-3); font-size: var(--fs-1); text-align: right; }
.lista-status a:focus-visible, .lista-sev a:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.km-hoje { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.km-hoje .r { color: var(--texto-2); font-size: var(--fs-2); }
.km-hoje .valor-grande { font-size: var(--fs-6); }
.barras .item { display: grid; grid-template-columns: minmax(0, 170px) 1fr 64px; align-items: center; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--linha); font-size: var(--fs-2); }
.barras .item:last-child { border-bottom: 0; }
.barras .trilho { height: 8px; background: var(--superficie-2); border-radius: var(--r-1); overflow: hidden; }
.barras .cheio { height: 100%; background: var(--dado); transform-origin: left; }
.barras .cheio.st-sem_sinal { background: var(--st-semcom); opacity: 1; }
.vazio-util.compacto { padding: var(--e-4) 0; }

/* ---------- monitoramento (tela-piloto) ---------- */
/* o mapa é a tela; lista e inspetor flutuam por cima (REFERENCIA-FLEETBASE 3.1); gaveta com abas embaixo (3.2) */
.monitor { display: flex; flex-direction: column; height: 100%; --larg-lista: 320px; --larg-insp: 360px; --alt-gaveta: 0px; --ocupa-esq: 0px; --ocupa-dir: 0px; }
.palco { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.palco > .area-mapa { position: absolute; inset: 0; }
.painel-flutuante { position: absolute; top: var(--e-3); bottom: var(--e-3); z-index: var(--z-painel); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-2); overflow: hidden; }
.lista-frota { left: var(--e-3); width: var(--larg-lista); display: flex; flex-direction: column; min-height: 0; }
.sem-lista .lista-frota { display: none; }
.barra-lista { display: none; position: absolute; top: var(--e-3); left: var(--e-3); z-index: var(--z-painel); align-items: center; gap: var(--e-2);
  min-height: 36px; padding: 0 var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-2); background: var(--superficie);
  box-shadow: var(--sombra-1); font: var(--peso-medio) var(--fs-2) var(--fonte); color: var(--texto); cursor: pointer; }
.barra-lista b { font-weight: var(--peso-forte); color: var(--texto-2); }
.sem-lista .barra-lista { display: inline-flex; }
.redim { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; touch-action: none; }
.redim::after { content: ""; position: absolute; top: 50%; left: 3px; width: 2px; height: 32px; transform: translateY(-50%); border-radius: var(--r-1); background: var(--linha-forte); opacity: 0; }
.redim:focus-visible::after, .redimensionando .redim::after { opacity: 1; }
.redim:focus-visible { outline: none; }
.redim-lista { right: -4px; }
.redim-insp { left: -4px; }
.redimensionando, .redimensionando * { user-select: none; }
.lista-cab { display: grid; gap: var(--e-2); padding: var(--e-3); border-bottom: 1px solid var(--linha); }
.busca-linha { display: flex; gap: var(--e-2); align-items: center; }
.campo-busca { position: relative; flex: 1; min-width: 0; }
.campo-busca > .icone { position: absolute; left: var(--e-2); top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.campo-busca input { padding-left: 30px; padding-right: 30px; }
.campo-busca kbd { position: absolute; right: var(--e-2); top: 50%; transform: translateY(-50%); font: var(--peso-medio) var(--fs-0) var(--fonte-mono);
  color: var(--texto-3); border: 1px solid var(--linha-forte); border-radius: var(--r-1); padding: 0 4px; }
/* lista estreita (260 px no mínimo): os filtros viram 2 × 2 em vez de cortar "Sem atualizar" */
.lista-frota { container-type: inline-size; }
@container (max-width: 380px) { .segmentos.filtros-frota { grid-template-columns: 1fr 1fr; grid-auto-flow: row; } }
.filtros-frota button { display: inline-flex; gap: var(--e-1); justify-content: center; padding: 0 var(--e-1); font-size: var(--fs-1); }
.filtros-frota button b { margin: 0; font-size: var(--fs-1); }
.alternar-alerta { justify-self: start; }
.alternar-alerta .sev { margin-right: 2px; }
.itens { position: relative; overflow-y: auto; flex: 1; overscroll-behavior: contain; --altura-veic: 58px; }
:root[data-densidade="compacta"] .itens { --altura-veic: 48px; }
.itens-trilho { position: relative; }
.veic {
  position: absolute; left: 0; right: 0; height: var(--altura-veic); display: grid; align-content: center; gap: 2px; padding: 0 var(--e-3);
  border: 0; border-bottom: 1px solid var(--linha); background: var(--superficie); text-align: left; cursor: pointer; color: inherit; width: 100%;
}
.veic.sel { background: var(--acao-fundo); }
.veic.sel::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: var(--r-1); background: var(--acao); }
.veic:focus-visible { outline-offset: -2px; }
.veic .l1, .veic .l2 { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.veic .l1 .sim { margin: 0; }
.veic .apelido { color: var(--texto); font-weight: var(--peso-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.veic .vel { font-weight: var(--peso-forte); white-space: nowrap; }
.veic .vel small { font-weight: var(--peso-normal); color: var(--texto-3); font-size: var(--fs-1); }
.veic .l2 { font-size: var(--fs-1); color: var(--texto-2); padding-left: 22px; }
.veic .l2 .meta { flex: 1; overflow: hidden; flex-wrap: nowrap; }
.veic .l2 .meta > :last-child { overflow: hidden; text-overflow: ellipsis; }
.veic .tipo { color: var(--texto-3); display: inline-flex; flex: none; }
.veic.com-ladrilho { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-3); }
.veic.com-ladrilho > .ladrilho-foto { grid-row: 1 / span 2; align-self: center; }
.veic.com-ladrilho .tipo { display: none; }
.veic.velho .l1 > :not(.sev):not(.icone-cmd) { opacity: .6; }
.icone-cmd { color: var(--texto-2); display: inline-flex; }
.area-mapa { position: relative; min-height: 0; min-width: 0; }
.area-mapa .mapa { position: absolute; inset: 0; }
.controles-mapa { position: absolute; top: var(--e-3); left: var(--e-3); z-index: var(--z-mapa-ctrl); display: flex; gap: var(--e-2); flex-wrap: wrap; }
.controles-mapa .botao, .exibicao-mapa > .botao, .botao-legenda { box-shadow: var(--sombra-1); }
/* controles do mapa e legenda andam junto com os painéis: nada fica por baixo deles */
.monitor .maplibregl-ctrl-bottom-left { left: var(--ocupa-esq); }
.monitor .maplibregl-ctrl-bottom-right { right: var(--ocupa-dir); }
.monitor .legenda-mapa { left: calc(var(--ocupa-esq) + var(--e-3)); }

/* barra de ferramentas do mapa (3.10): botões redondos de 32 px, dica escura ao lado */
.ferramentas { position: absolute; top: var(--e-3); left: calc(var(--ocupa-esq) + var(--e-3)); z-index: var(--z-mapa-ctrl); display: grid; gap: var(--e-2); }
.sem-lista .ferramentas { top: calc(var(--e-3) + 44px); }
.grupo-ferramentas { display: grid; gap: calc(var(--e-1) / 2); padding: calc(var(--e-1) / 2); background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--r-3); box-shadow: var(--sombra-1); }
.ferramenta { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--texto-2); cursor: pointer; }
.ferramenta:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.ferramenta::after { content: attr(data-dica); position: absolute; left: calc(100% + var(--e-2)); top: 50%; transform: translate(-4px, -50%); opacity: 0; pointer-events: none;
  white-space: nowrap; background: var(--flutua-fundo); color: var(--flutua-texto); font: var(--peso-medio) var(--fs-1) var(--fonte); padding: var(--e-1) var(--e-2);
  border-radius: var(--r-2); box-shadow: var(--sombra-2); transition: opacity var(--dur-1) var(--curva-saida), transform var(--dur-1) var(--curva-saida); }
.ferramenta:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.monitor:not(.sem-lista) .ferramentas [aria-label="Procurar veículo"] { display: none; }
.pop-camadas { display: grid; gap: var(--e-2); padding: var(--e-3); }
.pop-camadas > b, .opcoes-exibicao b { font-weight: var(--peso-forte); font-size: var(--fs-2); }
.pop-camadas .camada { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-2); }
.pop-camadas .qtd { color: var(--texto-3); font-size: var(--fs-1); }
.opcoes-exibicao { display: grid; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--linha); }

/* busca flutuante (lista minimizada) */
.busca-flutuante { position: absolute; top: var(--e-3); left: calc(var(--e-3) * 2 + 110px); width: 340px; z-index: var(--z-painel); display: none; }
.busca-flutuante.aberta { display: block; }
.busca-flutuante .campo-busca input { box-shadow: var(--sombra-1); }
.resultados-busca { list-style: none; margin: var(--e-1) 0 0; padding: var(--e-1); background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--r-3); box-shadow: var(--sombra-2); }
.resultados-busca button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2); border-radius: var(--r-2); cursor: pointer; }
.resultados-busca button:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.resultados-busca .apelido { font-weight: var(--peso-medio); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultados-busca .vazio { padding: var(--e-2); color: var(--texto-2); }

/* cartão do veículo no hover (3.4) e tudo que flutua sobre o mapa: escuro nos dois temas (3.3) */
.cartao-veic { position: absolute; left: 0; top: 0; z-index: calc(var(--z-painel) + 2); width: 280px; pointer-events: none;
  background: var(--flutua-fundo); color: var(--flutua-texto); border: 1px solid var(--flutua-linha); border-radius: var(--r-2); box-shadow: var(--sombra-2); padding: var(--e-3); }
.cartao-veic[hidden] { display: none; }
.cartao-cab { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); min-width: 0; }
.cartao-cab .apelido { font-weight: var(--peso-forte); font-size: var(--fs-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cartao-cab .status { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--fs-1); color: var(--flutua-texto-2); white-space: nowrap; }
.cartao-cab .sim { margin: 0; }
.cartao-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2) var(--e-3); padding-top: var(--e-2); border-top: 1px solid var(--flutua-linha); }
.cartao-grade .r { display: block; font-size: var(--fs-0); color: var(--flutua-texto-2); letter-spacing: var(--rotulo-espacamento); }
.cartao-grade .v { display: block; font-size: var(--fs-1); font-weight: var(--peso-medio); overflow-wrap: anywhere; }

/* gaveta inferior com abas */
.gaveta-monitor { flex: none; display: flex; flex-direction: column; background: var(--superficie); border-top: 1px solid var(--linha); position: relative; }
.alca-gaveta { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); width: 56px; height: 20px; z-index: 2; border: 1px solid var(--linha);
  border-radius: var(--r-2); background: var(--superficie); cursor: row-resize; display: grid; place-items: center; touch-action: none; box-shadow: var(--sombra-1); }
.alca-gaveta span { width: 24px; height: 3px; border-radius: var(--r-1); background: var(--linha-forte); }
.alca-gaveta:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.abas-gaveta { padding: 0 var(--e-4); border-bottom: 1px solid var(--linha); align-items: center; }
.abas-gaveta .espaco { flex: 1; }
.abas-gaveta .botao-colunas { min-height: 28px; }
.corpo-gaveta { height: var(--alt-gaveta); overflow: auto; overscroll-behavior: contain; }
.monitor[data-gaveta="fechada"] .corpo-gaveta { height: 0; overflow: hidden; }
.monitor[data-gaveta="fechada"] .abas-gaveta { border-bottom: 0; }
.corpo-gaveta .tabela-caixa { border: 0; border-radius: 0; }
.tabela tbody tr.sel td { background: var(--acao-fundo); }

/* inspetor do veículo: painel flutuante à direita */
.inspetor { right: var(--e-3); width: var(--larg-insp); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.monitor:not(.com-inspetor) .inspetor { display: none; }
.insp-cab { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
.insp-titulo { flex: 1; min-width: 0; display: grid; gap: var(--e-1); }
.insp-linha { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.insp-linha .apelido { font-weight: var(--peso-forte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-linha .tipo { margin-left: auto; color: var(--texto-3); display: inline-flex; }
.insp-titulo .meta { font-size: var(--fs-2); }
.insp-cliente { font-size: var(--fs-2); color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-titulo .meta .sim { margin-inline-end: var(--e-1); }
.insp-panico { display: grid; gap: var(--e-2); margin: var(--e-3) var(--e-4) 0; padding: var(--e-3); border-radius: var(--r-2);
  background: color-mix(in oklch, var(--sev-critico) 10%, var(--superficie)); border: 1px solid color-mix(in oklch, var(--sev-critico) 40%, transparent); }
.insp-panico strong { color: var(--sev-critico); font-weight: var(--peso-forte); display: flex; align-items: center; gap: var(--e-2); }
.insp-corpo { overflow-y: auto; padding: 0 var(--e-4) var(--e-4); flex: 1; display: flex; flex-direction: column; }
.insp-principal { display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--e-5); align-items: end; padding: var(--e-4) 0 var(--e-3); border-bottom: 1px solid var(--linha); }
.rotulo-dado { display: block; font-size: var(--fs-1); color: var(--texto-2); letter-spacing: var(--rotulo-espacamento); font-weight: var(--peso-medio); }
.valor-grande { font-size: var(--fs-7); font-weight: var(--peso-forte); letter-spacing: var(--numero-espacamento); line-height: 1.05; }
.valor-grande small, .valor-medio small { font-size: var(--fs-2); font-weight: var(--peso-normal); color: var(--texto-2); }
.valor-medio { font-size: var(--fs-4); font-weight: var(--peso-medio); line-height: 1.3; }
.valor-medio.alerta-velho { color: var(--sev-atencao-texto); }
.insp-principal.velho .valor-grande { color: var(--texto-3); }
.aviso-velho { margin: var(--e-3) 0 0; font-size: var(--fs-2); color: var(--sev-atencao-texto); }
.fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-4); margin-top: var(--e-1); }
.fato { padding: var(--e-2) 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.fato .r { font-size: var(--fs-1); color: var(--texto-2); letter-spacing: var(--rotulo-espacamento); }
.fato .v { overflow-wrap: anywhere; }
.fato.inteiro { grid-column: 1 / -1; }
.coordenadas { display: flex; align-items: center; gap: var(--e-1) var(--e-2); flex-wrap: wrap; }
.acoes-veiculo { margin-top: var(--e-4); }
.bloco-comandos { margin-top: auto; padding-top: var(--e-4); display: grid; gap: var(--e-2); }
.bloco-comandos .cab-cmd { display: flex; align-items: center; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--linha); }
.bloco-comandos .cab-cmd strong { flex: 1; font-weight: var(--peso-forte); font-size: var(--fs-2); }
.selo-comando { display: flex; align-items: center; gap: var(--e-2); font-size: var(--fs-2); color: var(--texto); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-2); background: var(--superficie-2); }
.selo-comando .icone { color: var(--texto-2); }
.abas { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--linha); padding: 0 var(--e-3); }
.abas button { border: 0; background: none; padding: var(--e-2) var(--e-2); min-height: var(--alvo); cursor: pointer; color: var(--texto-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: var(--peso-medio); font-size: var(--fs-2); }
.abas button.ativo { color: var(--texto); border-bottom-color: var(--acao); }
.abas .qtd { color: var(--texto-3); font-weight: var(--peso-normal); margin-left: var(--e-1); }
.abas button.ativo .qtd { color: var(--texto-2); }

/* elementos do mapa vetorial (mapa_vetorial.js) */
.exibicao-mapa { position: absolute; top: var(--e-3); right: var(--e-3); z-index: var(--z-mapa-ctrl); }
.pop-exibicao { position: absolute; right: 0; top: calc(100% + var(--e-1)); width: 260px; background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: var(--r-3); box-shadow: var(--sombra-2); padding: var(--e-3); display: grid; gap: var(--e-1); font-size: var(--fs-2);
  transform-origin: top right; transition: opacity var(--dur-2) var(--curva-saida), transform var(--dur-2) var(--curva-saida); }
.pop-exibicao[hidden] { display: grid; opacity: 0; transform: scale(.97); pointer-events: none; visibility: hidden; }
.pop-exibicao b { margin-top: var(--e-1); font-weight: var(--peso-forte); }
.legenda-mapa { position: absolute; left: var(--e-3); bottom: var(--e-8); z-index: var(--z-mapa-ctrl); background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: var(--r-3); padding: var(--e-2) var(--e-3); font-size: var(--fs-1); box-shadow: var(--sombra-1); display: grid; gap: var(--e-1); }
.legenda-mapa .item { display: flex; align-items: center; gap: var(--e-2); }
.legenda-mapa .sim { margin: 0; }
.grupo-mk { border: 0; padding: 0; background: none; cursor: pointer; font: var(--peso-forte) var(--fs-2) var(--fonte); font-variant-numeric: tabular-nums; }
.grupo-mk svg { display: block; filter: drop-shadow(var(--sombra-1)); }
.lugar-mk { border: 0; padding: 0; background: none; cursor: pointer; display: grid; justify-items: center; font-family: var(--fonte); }
.lugar-mk .pino { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 var(--e-1); border-radius: 50% 50% 50% var(--r-1);
  transform: rotate(-45deg); background: var(--superficie); border: 1.5px solid var(--texto-2); box-shadow: var(--sombra-1); }
.lugar-mk .pino b { transform: rotate(45deg); font-size: var(--fs-1); font-weight: var(--peso-forte); color: var(--texto); }
.lugar-mk small { margin-top: var(--e-1); background: var(--mapa-rotulo-fundo); color: var(--texto-2); font-size: var(--fs-1); padding: 0 var(--e-1); border-radius: var(--r-1); white-space: nowrap; }
.anel-critico { width: 30px; height: 30px; border-radius: 50%; pointer-events: none; border: 2.5px solid var(--sev-critico); position: relative; }
.anel-critico::after { content: ""; position: absolute; inset: -2.5px; border-radius: 50%; border: 2px solid var(--sev-critico); animation: pulso 1.6s var(--curva-saida) infinite; will-change: transform, opacity; }
/* só transform e opacity (GPU): o anel cresce de 30 para ~54 px e some */
@keyframes pulso { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .anel-critico::after { animation: none; border: 0; } .anel-critico { border-width: 4px; } }
.maplibregl-ctrl-attrib { font: var(--fs-0) var(--fonte); }
.maplibregl-ctrl-attrib.maplibregl-compact { background: color-mix(in oklch, var(--superficie) 80%, transparent); color: var(--texto-3); }
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { opacity: .7; }
.maplibregl-ctrl-group { border-radius: var(--r-2); box-shadow: var(--sombra-1); }
/* mapa do Google: troca de tipo, trânsito, logo e créditos (termos do Google: logo visível, sem nada por cima) */
.ctrl-tipo-mapa { display: flex; gap: calc(var(--e-1) / 2); padding: calc(var(--e-1) / 2); background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: var(--r-2); box-shadow: var(--sombra-1); }
.ctrl-tipo-mapa button { border: 0; background: none; color: var(--texto-2); font: var(--peso-medio) var(--fs-1) var(--fonte); padding: var(--e-1) var(--e-2);
  min-height: 28px; border-radius: var(--r-1); cursor: pointer; }
.ctrl-tipo-mapa button[aria-pressed="true"] { background: var(--acao); color: var(--acao-texto); }
.ctrl-tipo-mapa .transito { margin-left: var(--e-1); box-shadow: inset 1px 0 0 var(--linha); border-radius: 0 var(--r-1) var(--r-1) 0; }
.ctrl-tipo-mapa button:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.esri-credito { font: var(--peso-medio) var(--fs-0) var(--fonte); color: var(--texto-2); background: color-mix(in oklch, var(--superficie) 85%, transparent);
  padding: 0 var(--e-1); border-radius: var(--r-1); }
.esri-credito[hidden] { display: none; }
.base-satelite .legenda-mapa { bottom: calc(var(--e-10) + var(--e-5)); }
/* escala do mapa: o padrão do MapLibre é 10 px, abaixo do mínimo de leitura (11 px) */
/* o MapLibre fixa um cinza escuro na escala, que some no tema escuro */
.maplibregl-ctrl.maplibregl-ctrl-scale { font-size: var(--fs-0); color: var(--texto-2); border-color: var(--texto-3); background: color-mix(in oklch, var(--superficie) 70%, transparent); }
.base-satelite .maplibregl-ctrl-scale { background: color-mix(in oklch, var(--superficie) 85%, transparent); }
/* celular: o crédito do satélite ocupa a largura toda embaixo e cobriria a escala */
@media (max-width: 600px) { .base-satelite .maplibregl-ctrl-bottom-left .maplibregl-ctrl-scale { margin-bottom: var(--e-8); } }
.logo-google { pointer-events: none; line-height: 0; }
.logo-google img { height: 18px; width: auto; }
.atrib-google { font: var(--fs-0) var(--fonte); color: #3C4043; background: rgba(255, 255, 255, .8); padding: 0 var(--e-1); } /* valor-livre: cores do crédito do Google */
.com-google .maplibregl-ctrl-attrib:not(.atrib-google):empty { display: none; }
.com-google .legenda-mapa { bottom: calc(var(--e-10) + var(--e-6)); }
.maplibregl-popup-content { font: var(--fs-2) var(--fonte); color: var(--flutua-texto); background: var(--flutua-fundo); border-radius: var(--r-2); box-shadow: var(--sombra-2); padding: var(--e-2) var(--e-3); }
.maplibregl-popup-tip { display: none; }

/* ---------- histórico (tela-piloto) ---------- */
.historico { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.filtros-hist { display: flex; gap: var(--e-2); align-items: center; padding: var(--e-2) var(--e-4); border-bottom: 1px solid var(--linha); background: var(--superficie); min-width: 0; }
.filtros-hist .veiculo-hist { width: 300px; flex: none; }
.filtros-hist .estado-carga { font-size: var(--fs-2); color: var(--texto-2); }
.historico .meio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.historico .area-mapa { min-height: 300px; }
.botao-legenda { position: absolute; top: var(--e-3); right: var(--e-3); z-index: var(--z-mapa-ctrl); }
.vazio-hist { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; background: color-mix(in oklch, var(--fundo) 82%, transparent);
  color: var(--texto-2); text-align: center; padding: var(--e-6); }
.vazio-hist[hidden] { display: none; }
.painel-hist { border-left: 1px solid var(--linha); background: var(--superficie); display: flex; flex-direction: column; min-height: 0; }
.resumo-hist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4) var(--e-4); padding: var(--e-4); border-bottom: 1px solid var(--linha); }
.resumo-hist .valor-grande { font-size: var(--fs-6); }
.lista-segmentos { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.seg { display: grid; gap: 2px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linha); background: none; color: inherit;
  padding: var(--item-py) var(--e-4); cursor: pointer; position: relative; }
.seg .seg-l1 { display: flex; align-items: center; gap: var(--e-2); }
.seg .seg-hora { font-weight: var(--peso-forte); }
.seg .meta { font-size: var(--fs-2); }
.seg.sel, .seg.sob-cursor { background: var(--acao-fundo); }
.seg.sel::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: var(--r-1); background: var(--acao); }
.seg.curta { color: var(--texto-2); }
.grupo-curtas { padding: var(--e-2) var(--e-4); font-size: var(--fs-2); color: var(--texto-2); border-bottom: 1px solid var(--linha); }
.marca-parada { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: var(--r-1);
  background: var(--superficie); color: var(--texto); border: 1px solid var(--texto-2); font: var(--peso-forte) 10px/1 var(--fonte); }
.legenda-hist { display: grid; gap: var(--e-2); padding: var(--e-3); font-size: var(--fs-2); }
.legenda-hist .item { display: flex; align-items: center; gap: var(--e-2); }
.amostra-rota { display: inline-block; width: 20px; height: 4px; border-radius: var(--r-1); background: var(--dado); }
.amostra-rota.acima { background: var(--sev-atencao); }
.amostra-inicio { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--texto); background: var(--superficie); }

/* linha do tempo única (tempo da esquerda para a direita) */
.linha-tempo-caixa { border-top: 1px solid var(--linha); background: var(--superficie); min-width: 0; }
.lt-cab { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-4); min-width: 0; }
.lt-leitura { font-size: var(--fs-2); color: var(--texto-2); min-width: 0; }
.lt-leitura .meta > :first-child { color: var(--texto); font-weight: var(--peso-medio); }
.lt { position: relative; height: 172px; padding: 0 var(--e-4) var(--e-2); outline-offset: -2px; cursor: crosshair; user-select: none; touch-action: pan-y; }
.lt.com-rpm { height: 204px; }
.lt svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lt-dica { position: absolute; top: 0; z-index: 3; pointer-events: none; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--r-2);
  box-shadow: var(--sombra-1); padding: var(--e-1) var(--e-2); font-size: var(--fs-1); white-space: nowrap; display: grid; gap: 1px; }
.lt-dica[hidden] { display: none; }
.lt-dica strong { font-weight: var(--peso-forte); }
.lt-eixo { font: var(--fs-0) var(--fonte); fill: var(--texto-3); }
.lt-rotulo { font: var(--peso-medio) var(--fs-0) var(--fonte); fill: var(--texto-2); }

/* ---------- relatórios ---------- */
.relatorios { display: grid; grid-template-columns: 250px 1fr; gap: var(--e-5); align-items: start; }
.lista-tipos { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); overflow: hidden; }
.lista-tipos button, .lista-tipos a { display: block; color: inherit; text-decoration: none; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linha); background: none; padding: var(--e-2) var(--e-3); cursor: pointer; }
.lista-tipos button:last-child, .lista-tipos a:last-child { border-bottom: 0; }
.lista-tipos a:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.escolha-veiculos { max-height: 220px; overflow-y: auto; border: 1px solid var(--linha-forte); border-radius: var(--r-2); padding: var(--e-2) var(--e-3);
  background: var(--superficie); display: grid; gap: var(--e-1); }
.resumo-rel { display: flex; gap: var(--e-8); flex-wrap: wrap; margin: var(--e-3) 0 var(--e-4); padding: var(--e-3) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.resumo-rel div .v { font-size: var(--fs-6); font-weight: var(--peso-forte); letter-spacing: var(--numero-espacamento); }
.resumo-rel div .r { color: var(--texto-2); font-size: var(--fs-1); }
.aviso { padding: var(--e-2) var(--e-3); border: 1px solid var(--linha-forte); border-radius: var(--r-2); background: var(--superficie-2); margin: var(--e-2) 0; color: var(--texto); }

/* ---------- cercas ---------- */
.editor-cercas { display: grid; grid-template-columns: 320px 1fr; height: 100%; }
.editor-cercas .lado { border-right: 1px solid var(--linha); background: var(--superficie); overflow-y: auto; padding: var(--e-4); }
.editor-cercas .mapa-caixa { position: relative; }
.editor-cercas .mapa { position: absolute; inset: 0; }
.dica-mapa { position: absolute; bottom: var(--e-4); left: 50%; transform: translateX(-50%); z-index: var(--z-mapa-ctrl); background: var(--texto); color: var(--superficie);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-2); box-shadow: var(--sombra-1); font-size: var(--fs-2); }

/* ---------- modal, aviso rápido ---------- */
.fundo-modal { position: fixed; inset: 0; background: var(--veu); z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh var(--e-4); overflow-y: auto; overscroll-behavior: contain; }
.modal { background: var(--superficie); border-radius: var(--r-3); box-shadow: var(--sombra-2); width: 100%; max-width: 560px; border: 1px solid var(--linha);
  animation: pop-entra var(--dur-3) var(--curva-saida); }
.modal.larga { max-width: 820px; }
.modal .m-cab { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: var(--e-3); }
.modal .m-cab h2 { margin: 0; flex: 1; font-size: var(--fs-4); }
.modal .m-corpo { padding: var(--e-4); }
.modal .m-pe { padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; gap: var(--e-2); flex-wrap: wrap; }
.fechar { display: inline-grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--texto-2); min-width: var(--alvo); min-height: var(--alvo); border-radius: var(--r-2); }
.toasts { position: fixed; bottom: var(--e-4); right: var(--e-4); z-index: var(--z-toast); display: grid; gap: var(--e-2); }
.toast { background: var(--texto); color: var(--fundo); padding: var(--e-3) var(--e-4); border-radius: var(--r-2); box-shadow: var(--sombra-2);
  max-width: 380px; display: flex; gap: var(--e-2); align-items: flex-start; animation: toast-entra var(--dur-3) var(--curva-saida); }
.toast .toast-msg { flex: 1; }
.toast .fechar { color: inherit; margin: calc(var(--e-1) * -1) calc(var(--e-2) * -1) 0 0; }
.toast.saindo { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-1) var(--curva-saida), transform var(--dur-1) var(--curva-saida); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } }
.toast.critico { background: var(--panico-fundo); color: var(--panico-texto); }
.caixa-chave { font-family: var(--fonte-mono); word-break: break-all; padding: var(--e-3); background: var(--superficie-2); border: 1px dashed var(--linha-forte);
  border-radius: var(--r-2); user-select: all; }

/* ---------- entrada ---------- */
.entrada { display: grid; grid-template-columns: minmax(0, 3fr) minmax(400px, 2fr); min-height: 100dvh; background: var(--login-noite-prof); }
.entrada.saindo { opacity: 0; transition: opacity var(--dur-2) var(--curva-saida); }
/* arte: a marca aparece forte só aqui (LOGIN.md, exceção ao REDESIGN) */
.entrada-arte { position: relative; overflow: hidden; background: var(--login-noite-prof); isolation: isolate; }
.arte-base { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 25%, var(--login-azul) 0%, var(--login-noite) 52%, var(--login-noite-prof) 100%); }
.arte-foto { position: absolute; right: 0; bottom: 0; width: max(100%, calc(58dvh * var(--prop, 1.9))); aspect-ratio: var(--prop, 1.9); }
.arte-zoom { position: absolute; inset: 0; background-size: cover; transform-origin: 72% 64%; animation: arte-zoom 60s ease-in-out infinite alternate; }
@keyframes arte-zoom { from { transform: scale(1); } to { transform: scale(1.04); } }
.arte-zoom picture, .arte-zoom picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.arte-zoom picture img { opacity: 0; transition: opacity 500ms var(--curva-saida); }
.arte-foto.nitida picture img { opacity: 1; }
/* direção A: varredura que revela o contorno (só transform e opacity) */
.arte-varredura { position: absolute; inset: 0; overflow: hidden; transform: translateX(-100%); }
.arte-contorno { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateX(100%); opacity: .9; mix-blend-mode: screen; }
.linha-varredura { position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--login-ciano); box-shadow: 0 0 18px 4px rgb(60 195 218 / .55); } /* valor-livre: brilho do ciano da marca (só na arte) */
.varrendo .arte-varredura, .varrendo .arte-contorno { transform: none; transition: transform 1600ms cubic-bezier(.65, 0, .35, 1); }
.varrendo .arte-contorno { opacity: .42; transition: transform 1600ms cubic-bezier(.65, 0, .35, 1), opacity 1200ms ease 1900ms; }
.varrendo .linha-varredura { opacity: 0; transition: opacity 400ms ease 1600ms; }
.varrida .arte-varredura, .varrida .arte-contorno { transform: none; }
.varrida .arte-contorno { opacity: .42; }
.varrida .linha-varredura { display: none; }
.arte-pausada *, .arte-pausada { animation-play-state: paused !important; }
.arte-rede { position: absolute; inset: 0; width: 100%; height: 100%; }
.arte-logo { position: absolute; left: 8%; top: 9%; width: clamp(150px, 16vw, 250px); height: auto; animation: arte-logo 400ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes arte-logo { from { opacity: 0; transform: translateY(8px); } }

/* painel: sólido no azul-noite; os componentes herdam as cores da marca pelas variáveis */
.entrada-painel { --fundo: var(--login-noite-prof); --superficie: var(--login-campo); --superficie-2: var(--login-noite); --texto: var(--login-texto);
  --texto-2: var(--login-texto-2); --texto-3: var(--login-texto-2); --borda-campo: var(--login-borda); --linha: color-mix(in oklch, var(--login-texto) 12%, transparent);
  --linha-forte: var(--login-borda); --foco: var(--login-ciano); --acao: var(--login-ciano); --acao-texto: var(--login-noite-prof);
  --sev-atencao-texto: var(--login-erro); --acao-fundo: var(--login-noite);
  display: flex; flex-direction: column; background: var(--login-noite-prof); color: var(--login-texto);
  padding: var(--e-10) var(--e-8) var(--e-5); border-left: 1px solid var(--linha); color-scheme: dark; }
.entrada-conteudo { width: 100%; max-width: 380px; margin: auto; }
.entrada-painel.largo .entrada-conteudo { max-width: 560px; }
.entrada-conteudo h1 { font-size: var(--fs-6); font-weight: var(--peso-forte); letter-spacing: var(--numero-espacamento); margin: 0 0 var(--e-6); text-wrap: balance; }
.form-entrada { display: grid; gap: var(--e-5); }
.campo-entrada label { display: block; font-size: var(--fs-2); font-weight: var(--peso-medio); color: var(--login-texto-2); margin-bottom: var(--e-2); }
.entrada-painel input[type=text], .entrada-painel input[type=password], .entrada-painel input[type=email] {
  width: 100%; min-height: var(--alvo); background: var(--login-campo); border: 1px solid var(--login-borda); color: var(--login-texto); }
.entrada-painel input:focus-visible { outline: 2px solid var(--login-ciano); outline-offset: 2px; border-color: var(--login-ciano); }
.campo-senha { position: relative; }
.campo-senha input { padding-right: calc(var(--alvo) + var(--e-1)); }
.mostrar-senha { position: absolute; right: 0; top: 0; width: var(--alvo); height: 100%; display: grid; place-items: center;
  border: 0; border-radius: var(--r-2); background: none; color: var(--login-texto-2); cursor: pointer; }
.mostrar-senha:focus-visible { outline: 2px solid var(--login-ciano); outline-offset: -4px; }
.aviso-caps { display: block; margin-top: var(--e-2); font-size: var(--fs-1); color: var(--login-erro); }
.aviso-caps[hidden] { display: none; }
.aviso-entrada { margin: 0 0 var(--e-5); padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: color-mix(in oklch, var(--login-erro) 12%, var(--login-noite-prof));
  border: 1px solid color-mix(in oklch, var(--login-erro) 45%, transparent); color: var(--login-texto); font-size: var(--fs-2); }
.aviso-entrada[hidden] { display: none; }
.aviso-entrada:focus-visible { outline: 2px solid var(--login-ciano); outline-offset: 2px; }
.botao-entrar { width: 100%; min-height: calc(var(--alvo) + var(--e-1)); position: relative; font-size: var(--fs-4); margin-top: var(--e-1); }
.botao-entrar:focus-visible { outline: 2px solid var(--login-texto); outline-offset: 2px; }
.botao-entrar .carregando { display: none; position: absolute; inset: 0; width: 18px; height: 18px; margin: auto; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: girar 700ms linear infinite; }
.botao-entrar.ocupado .rotulo { opacity: 0; }
.botao-entrar.ocupado .carregando { display: block; }
@keyframes girar { to { transform: rotate(1turn); } }
.form-entrada.tremer { animation: tremer 300ms cubic-bezier(.36, .07, .19, .97); }
@keyframes tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.link-entrada { justify-self: start; color: var(--login-texto-2); font-size: var(--fs-2); text-decoration: underline; text-underline-offset: 3px; }
.link-entrada:focus-visible { outline: 2px solid var(--login-ciano); outline-offset: 2px; border-radius: var(--r-1); }
.entrada-painel .rodape { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); justify-content: center; font-size: var(--fs-1); color: var(--login-texto-2); padding-top: var(--e-6); }
.entrada-painel .rodape a { color: var(--login-texto-2); text-decoration: underline; text-underline-offset: 3px; }
.entrada-painel .rodape .credito { width: 100%; text-align: center; opacity: .85; }
@media (min-width: 1920px) { .entrada { grid-template-columns: minmax(0, 1fr) 560px; } }
@media (max-width: 1023px) {
  .entrada { grid-template-columns: 1fr; grid-template-rows: 32dvh auto; }
  .arte-logo { left: var(--e-5); top: 50%; width: clamp(96px, 26vw, 140px); translate: 0 -50%; }
  .arte-foto { width: 80%; }
  .entrada-painel { border-left: 0; border-top: 1px solid var(--linha); padding: var(--e-6) var(--e-4) max(var(--e-5), env(safe-area-inset-bottom)); }
  .entrada-conteudo { margin: 0 auto; }
  .entrada-conteudo h1 { font-size: var(--fs-5); margin-bottom: var(--e-5); }
  .entrada-painel input[type=text], .entrada-painel input[type=password], .entrada-painel input[type=email] { font-size: var(--fs-4); }
}
@media (hover: hover) and (pointer: fine) {
  .mostrar-senha:hover { color: var(--login-texto); background: var(--login-noite); }
  .link-entrada:hover, .entrada-painel .rodape a:hover { color: var(--login-texto); }
}
@media (prefers-reduced-motion: reduce) {
  .ladrilho-foto img, .foto-campo img { transform: none !important; filter: none !important; }
  .previa-veic { transition: opacity 120ms linear; }
  .arte-zoom, .arte-logo, .form-entrada.tremer { animation: none; }
}
.texto-termos { max-height: 280px; overflow-y: auto; padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-2); background: var(--superficie-2); font-size: var(--fs-2); color: var(--texto-2); }

/* ---------- impressão (relatórios) ---------- */
@media print {
  .topo, .nav, .lista-tipos, .barra-filtros, .nao-imprime, .toasts { display: none !important; }
  .app { display: block; height: auto; }
  .principal { overflow: visible; }
  body { background: white; color: black; } /* valor-livre: impressão */
  .relatorios { display: block; }
  .tabela-caixa { border: 0; overflow: visible; }
  .tabela th { position: static; }
}

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .app, .app.menu-recolhido { grid-template-columns: minmax(0, 1fr); }
  .topo, .faixa-panico, .principal { grid-column: 1; }
  .topo { padding: 0 var(--e-2); gap: var(--e-2); }
  .topo .marca-celular { display: flex; align-items: center; flex: none; }
  .topo .marca-celular img { height: 22px; width: auto; display: block; }
  .topo .menu-celular { display: inline-flex; }
  .so-largo { display: none !important; }
  .seletor-cliente { min-width: 0; max-width: none; flex: 1 1 auto; }
  .cliente-nome { flex: 1 1 auto; }
  .pendencias { padding: 0 var(--e-2); }
  .pendencias .pend-txt { display: none; }
  .pendencias:not(.com-pendencia) .pend-txt { display: inline; }
  .conexao span { display: none; }
  .faixa-panico { padding: 0 var(--e-3); }
  .panico-info .meta > :first-child { display: none; }
  .panico-linha { gap: var(--e-2); }
  .panico-linha .botao { padding: 0 var(--e-2); }
  .panico-info .meta > :nth-child(2)::before { content: none; }
  .nav {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); z-index: var(--z-nav); transform: translateX(-100%); visibility: hidden;
    transition: transform var(--dur-2) var(--curva-saida), visibility 0s linear var(--dur-2);
  }
  .nav.aberta { transform: none; visibility: visible; box-shadow: var(--sombra-2); transition: transform var(--dur-3) var(--curva-gaveta), visibility 0s; }
  .nav a[data-rota], .nav-conta button { min-height: var(--alvo); }
  .nav-recolher { display: none; }
  .nav-conta { display: grid; gap: 1px; margin-top: var(--e-3); padding-top: var(--e-2); border-top: 1px solid var(--linha); }
  .veu-menu { display: block; position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: var(--veu); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--curva-saida); }
  .veu-menu.aberto { opacity: 1; pointer-events: auto; }
  input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], input[type=date],
  input[type=datetime-local], input[type=time], input[type=tel], select, textarea { font-size: var(--fs-4); }
  .pagina { padding: var(--e-4) var(--e-4) var(--e-8); }
  .relatorios, .duas-colunas, .editor-cercas, .grade-visao { grid-template-columns: 1fr; }
  .editor-cercas { height: auto; grid-template-rows: auto 60vh; }
  .editor-cercas .lado { border-right: 0; border-bottom: 1px solid var(--linha); overflow: visible; }
  .barra-filtros > .combobox:not(.intervalo) { max-width: none; flex: 1 1 100%; }
  .grade-form { grid-template-columns: 1fr; }
  .modal.gaveta { max-width: none; }
  .barras .item { grid-template-columns: minmax(0, 120px) 1fr 56px; }

  /* monitoramento: mapa em tela cheia, lista e inspetor em folhas que sobem de baixo */
  .monitor { --ocupa-esq: 0px !important; --ocupa-dir: 0px !important; }
  .gaveta-monitor, .barra-lista, .busca-flutuante, .cartao-veic, .redim { display: none !important; }
  .sem-lista .lista-frota { display: flex; }
  .painel-flutuante { top: auto; border: 0; }
  .lista-frota { width: auto; }
  .inspetor { width: auto; right: 0; }
  .sem-lista .ferramentas { top: var(--e-3); }
  .area-mapa { grid-column: 1; grid-row: 1; }
  .lista-frota { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 88%; z-index: var(--z-painel); border-right: 0; visibility: visible;
    border-radius: var(--r-3) var(--r-3) 0 0; box-shadow: var(--sombra-2); transform: translateY(var(--folha-y, 45%));
    transition: transform var(--dur-3) var(--curva-gaveta); padding-bottom: env(safe-area-inset-bottom); }
  .sem-lista .lista-frota { visibility: visible; }
  .lista-frota[data-folha="fechada"] { --folha-y: calc(100% - 112px); }
  .lista-frota[data-folha="meio"] { --folha-y: 45%; }
  .lista-frota[data-folha="cheia"] { --folha-y: 0%; }
  .botao-recolher-lista, .botao-abrir-lista { display: none !important; }
  .alca-folha { display: block; width: 100%; height: 24px; border: 0; background: none; cursor: grab; touch-action: none; flex: none; }
  .alca-folha span { display: block; width: 36px; height: 4px; border-radius: var(--r-1); background: var(--linha-forte); margin: 0 auto; }
  .inspetor { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80%; z-index: calc(var(--z-painel) + 1); border-left: 0;
    border-radius: var(--r-3) var(--r-3) 0 0; box-shadow: var(--sombra-2); animation: folha-entra var(--dur-3) var(--curva-gaveta); padding-bottom: env(safe-area-inset-bottom); }
  .monitor:not(.com-inspetor) .inspetor { display: none; }
  @keyframes folha-entra { from { transform: translateY(24px); opacity: 0; } }
  .legenda-mapa { display: none; }
  .valor-grande { font-size: var(--fs-6); }

  /* histórico: a página rola; filtros numa linha, mapa, linha do tempo, painel */
  .historico { height: auto; display: flex; flex-direction: column; }
  .historico .meio { display: contents; }
  .filtros-hist { order: 1; }
  .historico .area-mapa { order: 2; }
  .historico .linha-tempo-caixa { order: 3; }
  .painel-hist { order: 4; }
  .filtros-hist { flex-wrap: wrap; padding: var(--e-2) var(--e-3); }
  .filtros-hist .veiculo-hist { width: 100%; }
  .filtros-hist .intervalo { flex: 1; }
  .historico .meio { grid-template-columns: minmax(0, 1fr); }
  .historico .area-mapa { height: 42vh; }
  .painel-hist { border-left: 0; border-top: 1px solid var(--linha); }
  .lista-segmentos { max-height: 50vh; }
  .lt { padding: 0 var(--e-2) var(--e-2); }
  .lt-cab { flex-wrap: wrap; padding: var(--e-2) var(--e-3); }
  .lt-leitura { width: 100%; order: 3; }
}
/* ---------- larguras intermediárias (901 a 1279 px): menu só com ícones, lista e inspetor mais estreitos ---------- */
@media (min-width: 901px) and (max-width: 1279px) {
  .app, .app.menu-recolhido { grid-template-columns: 60px minmax(0, 1fr); }
  .nav a[data-rota] span, .nav .secao span, .nav-recolher, .nav .marca-nome, .rodape-nav { display: none; }
  .nav .secao { padding: var(--e-2) 0; border-top: 1px solid var(--linha); margin-top: var(--e-2); }
  .nav a[data-rota] { justify-content: center; padding: 0; }
  .nav .marca { justify-content: center; }

  .historico .meio { grid-template-columns: minmax(0, 1fr) 300px; }
  .filtros-hist .veiculo-hist { width: 260px; }
}
@media (min-width: 901px) { .alca-folha { display: none; } }
.botao-abrir-lista { display: none; }
.sem-lista .botao-abrir-lista { display: inline-flex; }

/* ---------- hover só com mouse (REDESIGN 5.6) ---------- */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: currentColor; }
  .nav a[data-rota]:hover, .nav-conta button:hover, .nav-recolher:hover { background: var(--superficie-2); color: var(--texto); }
  .nav a[data-rota].ativo:hover { background: var(--acao-fundo); }
  .botao-topo:hover { background: var(--superficie-2); color: var(--texto); }
  .pendencias:hover { border-color: var(--borda-campo); }
  .pend-item:hover { background: var(--superficie-2); }
  .botao:hover { background: var(--superficie-2); }
  .botao.primario:hover { background: var(--acao-forte); border-color: var(--acao-forte); }
  .botao.perigo:hover { background: color-mix(in oklch, var(--sev-critico) 88%, black); }
  .botao.perigo-contorno:hover { background: color-mix(in oklch, var(--sev-critico) 8%, var(--superficie)); }
  .botao.discreto:hover { background: var(--superficie-2); color: var(--texto); }
  .botao.primario-invertido:hover { background: color-mix(in oklch, var(--panico-texto) 90%, var(--panico-fundo)); }
  .botao.secundario-invertido:hover { background: color-mix(in oklch, var(--panico-texto) 14%, transparent); }
  .segmentos button:hover:not(.ativo) { color: var(--texto); }
  .combobox:hover { border-color: var(--texto-3); }
  .cb-lista li[role=option]:hover { background: var(--superficie-2); }
  .ir-atalho:hover:not(.ativo) { background: var(--superficie); color: var(--texto); }
  .tabela tbody tr.clicavel:hover td { background: var(--superficie-2); }
  .item-cerca:hover .nome { text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
  [role=option]:hover .ladrilho-foto img, [role=option].ativo .ladrilho-foto img, .clicavel:hover .ladrilho-foto img { transform: scale(1.06); }
  .lista-status a:hover, .lista-sev a:hover { background: var(--superficie-2); }
  .link-discreto:hover { color: var(--texto); }
  .tabela th .ordenar:hover { color: var(--texto); }
  .veic:hover:not(.sel) { background: var(--superficie-2); }
  .seg:hover:not(.sel) { background: var(--superficie-2); }
  .ferramenta:hover { background: var(--superficie-2); color: var(--texto); }
  .ferramenta:hover::after { opacity: 1; transform: translate(0, -50%); }
  .barra-lista:hover { background: var(--superficie-2); }
  .resultados-busca button:hover { background: var(--superficie-2); }
  .alca-gaveta:hover span, .redim:hover::after { opacity: 1; background: var(--texto-3); }
  .ctrl-tipo-mapa button:hover:not([aria-pressed="true"]) { color: var(--texto); background: var(--superficie-2); }
  .lista-tipos a:hover:not([aria-current]) { background: var(--superficie-2); }
  .fechar:hover { background: var(--superficie-2); color: var(--texto); }
  .abas button:hover:not(.ativo) { color: var(--texto); }
}