/* ============================================================
   Frotas · Design System Skymark
   Azul institucional #102D55 · Azul tecnológico #1769AA
   Branco gelo #F6F8FC · Verde #13A674 · Amarelo #F4B544 · Vermelho #D94A4A
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Archivo+Black&display=swap');

:root {
  --azul-inst: #102D55;
  --azul-tec: #1769AA;
  --azul-tec-600: #125990;
  --azul-tec-100: #E7F0FA;
  --gelo: #F6F8FC;
  --branco: #ffffff;

  --ok: #13A674;
  --ok-100: #E3F7F0;
  --atencao: #F4B544;
  --atencao-100: #FEF5E3;
  --critico: #D94A4A;
  --critico-100: #FDECEC;

  --texto: #1A2433;
  --texto-2: #55637A;
  --texto-3: #8A96A8;
  --borda: #E2E8F2;
  --borda-2: #EDF1F8;
  --superficie: #ffffff;
  --superficie-2: #F8FAFD;
  --sombra-1: 0 1px 2px rgba(16, 45, 85, .06), 0 1px 3px rgba(16, 45, 85, .04);
  --sombra-2: 0 4px 12px rgba(16, 45, 85, .08), 0 2px 4px rgba(16, 45, 85, .04);
  --sombra-3: 0 12px 32px rgba(16, 45, 85, .12), 0 4px 8px rgba(16, 45, 85, .06);
  --raio: 12px;
  --raio-lg: 18px;
  --raio-sm: 8px;
  --sidebar: 264px;
}

[data-tema="escuro"] {
  --azul-inst: #0B1E3A;
  --azul-tec: #4E9BF0;
  --azul-tec-600: #6FB0F5;
  --azul-tec-100: #16293F;
  --gelo: #0C1420;
  --branco: #131D2C;
  --texto: #E8EEF7;
  --texto-2: #A3B1C6;
  --texto-3: #76859B;
  --borda: #22303F;
  --borda-2: #1B2735;
  --superficie: #131D2C;
  --superficie-2: #0F1826;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 4px 14px rgba(0, 0, 0, .45);
  --sombra-3: 0 14px 36px rgba(0, 0, 0, .55);
  --ok: #2BC48D;
  --ok-100: #12312A;
  --atencao: #F7C464;
  --atencao-100: #33291A;
  --critico: #EE6B6B;
  --critico-100: #3A1E1E;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--gelo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .6rem; }
a { color: var(--azul-tec); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--texto-2); }

/* ---------- Brand ---------- */
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { height: 26px; display: block; }
.marca-produto {
  font-weight: 800; font-size: .95rem; letter-spacing: .14em;
  color: var(--azul-tec); text-transform: uppercase;
}

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--gelo);
}
.login-hero {
  background: linear-gradient(160deg, #102D55 0%, #16457A 55%, #1769AA 100%);
  color: #fff; padding: 56px 52px; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; overflow: hidden;
}
.login-hero::after {
  content: ''; position: absolute; right: -120px; bottom: -140px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%);
}
.login-hero h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: 4px; letter-spacing: -.02em; }
.login-hero .subtitulo { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 700; margin-bottom: 16px; }
.login-hero p { color: rgba(255,255,255,.82); max-width: 42ch; font-size: .98rem; }
.login-hero .pilares { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; position: relative; z-index: 1; }
.login-hero .pilar { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: rgba(255,255,255,.9); }
.login-hero .pilar i { color: #7FC0FF; margin-top: 2px; }
.login-form-area { display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-card { width: 100%; max-width: 400px; }
.login-card h2 { margin-bottom: 4px; }
.login-card .sub { color: var(--texto-2); font-size: .92rem; margin-bottom: 22px; }
.demo-contas { margin-top: 22px; padding: 14px; background: var(--superficie-2); border: 1px dashed var(--borda); border-radius: var(--raio); }
.demo-contas .tit { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); font-weight: 700; margin-bottom: 8px; }
.demo-contas button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: .84rem; color: var(--texto-2);
  font-family: inherit;
}
.demo-contas button:hover { background: var(--azul-tec-100); color: var(--azul-tec); }

/* ---------- Forms ---------- */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: .82rem; font-weight: 600; color: var(--texto-2); margin-bottom: 5px; }
.campo .dica { font-size: .76rem; color: var(--texto-3); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=tel], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); font-family: inherit; font-size: .9rem;
  background: var(--superficie); color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
/*
 * CAMPO TRAVADO (somente leitura).
 *
 * Usado no KM inicial quando o cadastro do veículo está em edição. Precisa
 * parecer diferente de um campo editável: se ficasse igual, o gestor digitaria
 * por cima, salvaria e não entenderia por que o número não mudou.
 */
.campo-travado,
input[readonly] {
  background: var(--superficie-2);
  color: var(--texto-3);
  cursor: not-allowed;
  border-style: dashed;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-tec);
  box-shadow: 0 0 0 3px var(--azul-tec-100);
}
textarea { resize: vertical; min-height: 72px; }
.grade { display: grid; gap: 14px; }
.grade-2 { grid-template-columns: 1fr 1fr; }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--raio-sm); border: 1px solid transparent;
  font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: all .15s; white-space: nowrap; line-height: 1.3;
}
.btn:hover { text-decoration: none; }
.btn-primario { background: var(--azul-tec); color: #fff; box-shadow: var(--sombra-1); }
.btn-primario:hover { background: var(--azul-tec-600); transform: translateY(-1px); box-shadow: var(--sombra-2); }
.btn-inst { background: var(--azul-inst); color: #fff; }
.btn-inst:hover { filter: brightness(1.15); }
.btn-suave { background: var(--superficie); color: var(--texto); border-color: var(--borda); }
.btn-suave:hover { border-color: var(--azul-tec); color: var(--azul-tec); }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.btn-perigo { background: var(--critico-100); color: var(--critico); }
.btn-perigo:hover { background: var(--critico); color: #fff; }
.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover { filter: brightness(1.08); }
.btn-bloco { width: 100%; }
.btn-lg { padding: 13px 22px; font-size: .95rem; }
.btn-sm { padding: 6px 11px; font-size: .79rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------- Shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar); background: var(--superficie); border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 50;
  transition: transform .22s ease;
}
.sidebar-topo { padding: 18px 18px 14px; border-bottom: 1px solid var(--borda-2); }
.sidebar-topo .marca img { height: 24px; }
.sidebar-topo .produto { font-size: 1.02rem; letter-spacing: -.01em; color: var(--texto); font-weight: 800; margin-top: 8px; line-height: 1.1; }
.sidebar-topo .produto-sub { font-size: .6rem; letter-spacing: .12em; color: var(--texto-3); font-weight: 700; text-transform: uppercase; margin-top: 3px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.nav-grupo { margin-bottom: 14px; }
.nav-grupo .rotulo {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-3); font-weight: 700; padding: 6px 10px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 7px; color: var(--texto-2); font-size: .855rem; font-weight: 500;
  transition: all .12s; margin-bottom: 1px;
}
.nav-item:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.nav-item.ativo { background: var(--azul-tec-100); color: var(--azul-tec); font-weight: 650; }
.nav-item i { width: 16px; text-align: center; font-size: .86rem; opacity: .85; }
.nav-item .badge-mini {
  margin-left: auto; background: var(--critico); color: #fff;
  font-size: .68rem; padding: 1px 6px; border-radius: 9px; font-weight: 700;
}
.sidebar-rodape { padding: 12px; border-top: 1px solid var(--borda-2); }
.usuario-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; }
.usuario-chip:hover { background: var(--superficie-2); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--azul-tec);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex: 0 0 auto;
}
.usuario-chip .nome { font-size: .82rem; font-weight: 600; line-height: 1.2; }
.usuario-chip .papel { font-size: .7rem; color: var(--texto-3); }

.conteudo { flex: 1; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }
.topo {
  height: 62px; background: var(--superficie); border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 14px; padding: 0 24px; position: sticky; top: 0; z-index: 40;
}
.topo h1 { font-size: 1.12rem; font-weight: 700; }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.corpo { padding: 24px; flex: 1; max-width: 1500px; width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra-1);
}
.card-lg { border-radius: var(--raio-lg); padding: 22px; }
.card-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.card-titulo h3 { font-size: .95rem; }
.card-titulo .sub { font-size: .78rem; color: var(--texto-3); }

.kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
.kpi {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px; box-shadow: var(--sombra-1); position: relative; overflow: hidden;
}
.kpi .rot { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 700; }
.kpi .val { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 2px; line-height: 1; }
.kpi .det { font-size: .77rem; color: var(--texto-2); }
.kpi .icone {
  position: absolute; right: 14px; top: 14px; width: 32px; height: 32px;
  border-radius: 9px; display: grid; place-items: center; font-size: .9rem;
  background: var(--azul-tec-100); color: var(--azul-tec);
}
.kpi.ok .icone { background: var(--ok-100); color: var(--ok); }
.kpi.atencao .icone { background: var(--atencao-100); color: #B67F14; }
.kpi.critico .icone { background: var(--critico-100); color: var(--critico); }
.kpi.destaque { border-left: 3px solid var(--azul-tec); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda);
  white-space: nowrap;
}
.badge.ok { background: var(--ok-100); color: #0B7A55; border-color: transparent; }
.badge.atencao { background: var(--atencao-100); color: #A06F0C; border-color: transparent; }
.badge.critico { background: var(--critico-100); color: #B03434; border-color: transparent; }
.badge.info { background: var(--azul-tec-100); color: var(--azul-tec); border-color: transparent; }
[data-tema="escuro"] .badge.ok { color: #4FD9AB; }
[data-tema="escuro"] .badge.atencao { color: #F7C464; }
[data-tema="escuro"] .badge.critico { color: #F08A8A; }
[data-tema="escuro"] .badge.info { color: #7FC0FF; }

/* ---------- Tabela ---------- */
.tabela-wrap { overflow-x: auto; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: .855rem; }
thead th {
  text-align: left; padding: 10px 13px; background: var(--superficie-2);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-3); font-weight: 700; border-bottom: 1px solid var(--borda);
  white-space: nowrap; position: sticky; top: 0;
}
tbody td { padding: 10px 13px; border-bottom: 1px solid var(--borda-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.placa {
  font-family: 'SF Mono', ui-monospace, monospace; font-weight: 700;
  background: var(--superficie-2); padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--borda); font-size: .8rem; letter-spacing: .02em;
}

/* ---------- Alertas ---------- */
.aviso {
  display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--raio-sm);
  font-size: .86rem; align-items: flex-start; margin-bottom: 14px;
  border: 1px solid transparent;
}
.aviso i { margin-top: 2px; flex: 0 0 auto; }
.aviso.info { background: var(--azul-tec-100); color: var(--azul-tec); }
.aviso.ok { background: var(--ok-100); color: #0B7A55; }
.aviso.atencao { background: var(--atencao-100); color: #96690B; }
.aviso.critico { background: var(--critico-100); color: #B03434; }
[data-tema="escuro"] .aviso.ok { color: #4FD9AB; }
[data-tema="escuro"] .aviso.atencao { color: #F7C464; }
[data-tema="escuro"] .aviso.critico { color: #F08A8A; }
.aviso strong { font-weight: 700; }

/* ---------- Progresso ---------- */
.barra { height: 7px; background: var(--borda-2); border-radius: 20px; overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 20px; background: var(--azul-tec); transition: width .4s ease; }
.barra.ok > span { background: var(--ok); }
.barra.atencao > span { background: var(--atencao); }
.barra.critico > span { background: var(--critico); }

/* ---------- Meu Veículo (mobile-first) ---------- */
.portal { max-width: 520px; margin: 0 auto; }

/* Card do veículo no estilo "catálogo de locadora":
   imagem do modelo → placa verde copiável → unidade → nome → consumo do mês. */
.vei-card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); overflow: hidden; box-shadow: var(--sombra-2);
}
/* Carro RECORTADO (PNG transparente) — padrão catálogo de locadora.
   Fundo BRANCO PURO, igual ao do cartão, sem moldura, sem gradiente e sem
   halo elíptico. É o que a Localiza faz e é o que faz o carro "flutuar": a
   área da foto deixa de ser um retângulo cinza visível e passa a ser
   indistinguível do cartão. A única sombra é a do próprio veículo, curta e
   rente ao chão, para ele não parecer colado. */
.vei-card-foto {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--superficie);
  padding: 16px 10px 0;
}
.vei-card-foto img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  max-width: 640px;
  filter: drop-shadow(0 10px 14px rgba(10, 22, 40, .12));
}
[data-tema="escuro"] .vei-card-foto img {
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55));
}
.vei-card-selo {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.92); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 20px;
  padding: 3px 10px; font-size: .66rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
[data-tema="escuro"] .vei-card-selo { background: rgba(16,22,34,.85); color: var(--texto); }

.vei-card-corpo { padding: 16px 18px 18px; }

.vei-card-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Placa: pílula verde com ícone + ação de copiar */
.placa-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #E6F6EF; color: #0B7A56;
  border: 1px solid #BCE7D5; border-radius: 8px;
  padding: 4px 6px 4px 9px; font-weight: 800;
  font-family: ui-monospace, monospace; letter-spacing: .07em; font-size: .84rem;
}
.placa-chip i { font-size: .74rem; }
[data-tema="escuro"] .placa-chip { background: #10312A; color: #6EE7B7; border-color: #1D5B48; }
.placa-copiar {
  background: transparent; border: none; cursor: pointer; padding: 2px 4px;
  color: inherit; opacity: .7; border-radius: 4px; line-height: 1;
  display: inline-flex; align-items: center;
}
.placa-copiar:hover { opacity: 1; background: rgba(11,122,86,.12); }
.placa-copiar.copiado { color: var(--ok); opacity: 1; }

/* Chip de localização (unidade/cidade) */
.local-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gelo); color: var(--texto-2);
  border: 1px solid var(--borda); border-radius: 20px;
  padding: 3px 9px; font-size: .7rem; font-weight: 600;
}
.local-chip .rot { color: var(--texto-3); font-weight: 700; text-transform: uppercase; font-size: .6rem; letter-spacing: .05em; }

.vei-card-nome { font-size: 1.24rem; font-weight: 800; letter-spacing: -.02em; margin-top: 12px; color: var(--texto); }
.vei-card-versao { font-size: .78rem; color: var(--texto-3); margin-top: 2px; }

/* Consumo do mês dentro do card */
.vei-consumo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda-2); }
.vei-consumo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.vei-consumo-rot { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.vei-consumo-num { font-size: .84rem; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.vei-consumo-num b { color: var(--texto); font-size: .95rem; }
.vei-consumo-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 11px;
  font-size: .78rem; font-weight: 700; color: var(--azul-tec); text-decoration: none;
}
.vei-consumo-link:hover { text-decoration: underline; }

/*
 * Mês sem leitura de âncora. No lugar do número que não existe, uma frase que
 * explica por que ele não existe. Discreto de propósito: não é erro do
 * motorista nem do sistema — é um mês que ainda não foi medido.
 */
.vei-consumo-sem-leitura {
  font-size: .76rem; line-height: 1.5; color: var(--texto-3);
  background: var(--superficie-2); border-radius: 8px; padding: 9px 11px;
}
.vei-consumo-sem-leitura i { color: var(--azul-tec); margin-right: 4px; }

/*
 * Consumo DESDE A RETIRADA — fica acima do mensal, no mesmo lugar da leitura
 * da locadora. Bloco próprio, com peso visual maior que o mensal porque é a
 * informação que fecha a conta do contrato.
 */
.vei-desde { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda-2); }
.vei-desde-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.vei-desde-rot {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3);
}
.vei-desde-rot i { margin-right: 4px; }
.vei-desde-data { font-size: .72rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.vei-desde-num { font-size: .84rem; color: var(--texto-2); margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.vei-desde-num b { font-size: 1.16rem; font-weight: 800; color: var(--texto); letter-spacing: -.01em; }
.vei-desde-sub { display: block; font-size: .76rem; color: var(--texto-3); margin-top: 1px; }
.vei-desde-pe { margin-top: 8px; font-size: .72rem; line-height: 1.45; color: var(--texto-3); }

/* Prazos do card-resumo: próximo checklist e próxima manutenção */
.vei-prazos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda-2);
}
.vei-prazo {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 12px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--gelo); color: var(--texto); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.vei-prazo:hover { border-color: var(--azul-tec); transform: translateY(-1px); text-decoration: none; }
.vei-prazo-rot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-3);
}
.vei-prazo-rot i { color: var(--azul-tec); font-size: .7rem; }
.vei-prazo-num {
  font-size: 1.06rem; font-weight: 800; color: var(--texto);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.vei-prazo-num.urgente { color: var(--critico); }
.vei-prazo-sub { font-size: .68rem; color: var(--texto-2); line-height: 1.35; }
[data-tema="escuro"] .vei-prazo { background: var(--superficie-2); }
@media (max-width: 380px) {
  .vei-prazos { grid-template-columns: 1fr; }
}

/*
 * CARTÃO DE PRAZO VENCIDO.
 * Enquanto o prazo é futuro o cartão é neutro (--gelo). Quando vence, ele
 * precisa competir com o resto da tela: fundo vermelho claro, borda vermelha
 * e o rótulo em vermelho. Sem isso o condutor lê "Vencido há 1 dia" do mesmo
 * jeito que lia "12 dias" e não reage.
 */
.vei-prazo-vencido {
  background: var(--critico-100);
  border-color: var(--critico);
}
.vei-prazo-vencido:hover { border-color: var(--critico); }
.vei-prazo-vencido .vei-prazo-rot,
.vei-prazo-vencido .vei-prazo-rot i { color: var(--critico); }
.vei-prazo-vencido .vei-prazo-num { color: var(--critico); }
.vei-prazo-vencido .vei-prazo-sub { color: #B03434; font-weight: 600; }
[data-tema="escuro"] .vei-prazo-vencido { background: rgba(217, 74, 74, .16); }
[data-tema="escuro"] .vei-prazo-vencido .vei-prazo-sub { color: #F3A3A3; }

/*
 * ALERTA DE CHECKLIST VENCIDO (painel do condutor).
 * Bloco próprio em vez de reaproveitar .aviso porque este é o único alerta da
 * tela que o próprio condutor resolve sozinho — por isso tem ícone grande,
 * título, texto e um botão de ação. Mede a largura toda e vem antes de todos
 * os outros avisos.
 */
.aviso-checklist-vencido {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--critico-100);
  border: 1px solid var(--critico);
  border-left: 4px solid var(--critico);
  border-radius: var(--raio);
  margin-bottom: 12px;
}
.aviso-checklist-vencido-icone {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--critico);
  color: #fff;
  font-size: 1.02rem;
}
.aviso-checklist-vencido-corpo { flex: 1 1 auto; min-width: 0; }
.aviso-checklist-vencido-titulo {
  font-size: .95rem; font-weight: 800;
  color: #B03434; letter-spacing: -.01em;
  margin-bottom: 4px;
}
.aviso-checklist-vencido-texto {
  margin: 0 0 11px;
  font-size: .82rem; line-height: 1.5;
  color: #8E2F2F;
}
.aviso-checklist-vencido-texto strong { font-weight: 800; color: #B03434; }
.aviso-checklist-vencido-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 700;
  text-decoration: none;
}
.aviso-checklist-vencido-btn:hover { text-decoration: none; }
[data-tema="escuro"] .aviso-checklist-vencido {
  background: rgba(217, 74, 74, .14);
  border-color: rgba(217, 74, 74, .55);
}
[data-tema="escuro"] .aviso-checklist-vencido-titulo { color: #F3A3A3; }
[data-tema="escuro"] .aviso-checklist-vencido-texto { color: #E9BDBD; }
[data-tema="escuro"] .aviso-checklist-vencido-texto strong { color: #F3A3A3; }
@media (max-width: 420px) {
  .aviso-checklist-vencido { padding: 14px; gap: 11px; }
  .aviso-checklist-vencido-icone { width: 32px; height: 32px; font-size: .9rem; }
}

.atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.atalho {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 15px 8px; text-align: center; color: var(--texto); font-size: .76rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: all .15s; box-shadow: var(--sombra-1);
}
.atalho:hover { border-color: var(--azul-tec); color: var(--azul-tec); transform: translateY(-2px); box-shadow: var(--sombra-2); text-decoration: none; }
.atalho i { font-size: 1.15rem; color: var(--azul-tec); }
.atalho.destaque { background: var(--azul-tec); color: #fff; border-color: var(--azul-tec); }
.atalho.destaque i { color: #fff; }

/* ---------- Checklist / câmera ---------- */
.checklist-progresso { position: sticky; top: 62px; z-index: 30; background: var(--superficie); border-bottom: 1px solid var(--borda); padding: 10px 0; margin: -24px -24px 20px; padding-left: 24px; padding-right: 24px; }
.camera-wrap {
  position: relative; background: #0A0F16; border-radius: var(--raio-lg); overflow: hidden;
  aspect-ratio: 4/3; display: block;
}
/* A prévia é o PRÓPRIO quadro gravado (canvas). Não existe `object-fit`: o
   quadro mostrado e a foto saem do mesmo retângulo do sensor, então não há
   como divergirem. Antes o visor usava `cover` num sensor retrato e escondia
   44% da imagem, enquanto a foto gravava o sensor inteiro — o carro aparecia
   no topo e o motorista via na miniatura coisa que nunca enquadrou. */
.camera-canvas { display: block; width: 100%; height: 100%; }
/* A prova de vida (termo.js) ainda usa <video> direto no visor: mantém o
   comportamento antigo dela. O seletor exclui o vídeo oculto da câmera. */
.camera-wrap video:not(.camera-video-oculto) { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-video-oculto {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; left: 0; top: 0;
}
/* Guia de centro: mostra onde fica o meio do quadro gravado. Como a foto é
   exatamente o retângulo mostrado, alinhar o veículo nesta cruz garante que
   ele saia centralizado na evidência. */
.guia-centro { position: absolute; inset: 0; pointer-events: none; }
.guia-centro::before,
.guia-centro::after {
  content: ''; position: absolute; background: rgba(255,255,255,.62);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.guia-centro::before { left: 50%; top: 50%; width: 26px; height: 1px; transform: translate(-50%,-50%); }
.guia-centro::after { left: 50%; top: 50%; width: 1px; height: 26px; transform: translate(-50%,-50%); }
.molde-svg { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.molde-svg svg { width: 86%; height: 86%; opacity: .86; filter: drop-shadow(0 1px 3px rgba(0,0,0,.75)); }
.camera-dica {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  background: rgba(0,0,0,.68); backdrop-filter: blur(8px); color: #fff;
  padding: 7px 14px; border-radius: 30px; font-size: .78rem; font-weight: 600;
  white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
.captura-thumb { position: relative; border-radius: var(--raio-sm); overflow: hidden; border: 2px solid var(--ok); background: #0A0F16; }
/* A foto já vem no formato enquadrado (4:3). Aqui era `cover`, que recortava
   uma SEGUNDA vez — e numa foto retrato isso cortava justamente o carro. */
.captura-thumb img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: contain; }
.captura-thumb .selo {
  position: absolute; top: 6px; left: 6px; background: var(--ok); color: #fff;
  font-size: .66rem; padding: 2px 7px; border-radius: 20px; font-weight: 700;
}
.passo-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: 20px; font-size: .76rem; font-weight: 700;
  background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda);
}

/* ---------- Diretoria ---------- */
.diretoria { position: fixed; inset: 0; background: #0A1628; color: #fff; z-index: 200; display: flex; flex-direction: column; }
.slide { flex: 1; padding: 5vh 6vw; display: flex; flex-direction: column; justify-content: center; }
.slide h2 { font-size: 3.2rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .4rem; }
.slide .sub { color: rgba(255,255,255,.6); font-size: 1.05rem; margin-bottom: 2.4rem; }
.slide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.slide-kpi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px; }
.slide-kpi .r { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); font-weight: 700; }
.slide-kpi .v { font-size: 2.9rem; font-weight: 800; letter-spacing: -.04em; margin-top: 6px; line-height: 1; }
.diretoria-barra {
  display: flex; align-items: center; gap: 14px; padding: 14px 24px;
  background: rgba(0,0,0,.4); border-top: 1px solid rgba(255,255,255,.1);
}
.diretoria-barra .contador { font-size: .85rem; color: rgba(255,255,255,.6); }

/* ---------- Gráficos (SVG, renderizados no servidor) ---------- */
.grafico-barras { display: flex; flex-direction: column; gap: 9px; }
.gb-linha { display: flex; align-items: center; gap: 10px; }
.gb-rotulo {
  width: 128px; flex: 0 0 128px; font-size: .78rem; color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-trilha { flex: 1; height: 100%; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.gb-barra { height: 100%; border-radius: 6px; transition: width .5s ease; min-width: 3px; }
.gb-valor { width: 76px; text-align: right; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.grafico-rosca { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.grafico-rosca svg { flex: 0 0 auto; }
.rosca-legenda { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 140px; }
.rosca-legenda li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .8rem; }
.rosca-legenda .ponto { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.rosca-legenda .rot { flex: 1; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca-legenda strong { font-variant-numeric: tabular-nums; }

.grafico-linha { display: block; overflow: visible; }
.grafico-colunas { display: flex; align-items: flex-end; gap: 8px; padding-top: 18px; }
.gc-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.gc-valor { font-size: .68rem; font-weight: 700; color: var(--texto-2); margin-bottom: 3px; height: 12px; }
.gc-barra-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.gc-barra { width: 74%; max-width: 46px; border-radius: 5px 5px 0 0; min-height: 3px; transition: height .5s ease; }
.gc-rotulo {
  font-size: .66rem; color: var(--texto-3); margin-top: 6px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.grafico-medidor { max-width: 190px; display: block; margin: 0 auto; }

/* ---------- Colunas com linha de referência (Gestão de km) ---------- */
.gc-ref { width: 100%; }
.gc-ref-area {
  position: relative; display: flex; align-items: flex-end; gap: 4px;
  border-bottom: 1px solid var(--borda); padding-bottom: 0;
}
.gc-ref-item {
  flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; position: relative; z-index: 1;
}
.gc-ref-valor {
  font-size: .6rem; font-weight: 700; color: var(--texto-2); line-height: 1;
  margin-bottom: 3px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gc-ref-coluna {
  width: 72%; max-width: 42px; border-radius: 5px 5px 0 0; min-height: 3px;
  transition: height .5s ease;
}
/*
 * MÊS SEM MEDIÇÃO — coluna vazia listrada, não coluna zero.
 *
 * Antes, um mês sem leitura era desenhado como qualquer outro: uma coluna
 * verde no zero, com o número "0" em cima. Na tela isso lê como "o carro não
 * rodou" — e o condutor da UCA-9G23, que saiu de 0 km em julho e marcava 5.317
 * km em novembro, via três meses de zero seguidos. O listrado diz o que o zero
 * não dizia: aqui falta o dado, não faltou o uso.
 */
.gc-ref-sem-dado .gc-ref-valor { color: var(--texto-3); font-weight: 600; }
.gc-ref-coluna-vazia {
  width: 72%; max-width: 42px; min-height: 100%;
  border-radius: 5px; border: 1px dashed var(--borda-2);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    var(--gelo) 4px,
    var(--gelo) 8px
  );
}
/* Linha horizontal da franquia, atravessando todas as colunas */
.gc-ref-linha {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed var(--azul-tec); z-index: 3; pointer-events: none;
}
.gc-ref-rotulo {
  position: absolute; right: 0; top: -9px;
  background: var(--azul-tec); color: #fff; font-size: .58rem; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.gc-ref-rotulos { display: flex; gap: 4px; margin-top: 7px; }
.gc-ref-rot {
  flex: 1; min-width: 0; text-align: center; font-size: .62rem; color: var(--texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-tema="escuro"] .gc-ref-rotulo { color: #0A1628; }

/* ---------- Consumo total (barra usada × contratada) ---------- */
.consumo-total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.consumo-total .usado { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.consumo-total .de { font-size: .86rem; color: var(--texto-3); font-weight: 600; }
.consumo-pct { font-size: .78rem; font-weight: 700; margin-left: auto; }

/* ---------- Imagem do modelo na ficha da gestão ---------- */
/* Carro recortado na ficha da gestão — mesmo tratamento do card de locadora,
   em escala maior. O halo embaixo substitui a moldura cinza: sem ele o PNG
   transparente parece "colado" na página, sem peso. */
/* Ficha do veículo (tela de gestão): mesmo tratamento do cartão — fundo
   branco puro, sem moldura e sem halo. `object-fit: contain` porque aqui a
   largura é maior e a imagem não deve ser esticada. */
.vei-ficha-foto {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--superficie);
  max-width: 680px; padding: 18px 10px 0;
}
.vei-ficha-foto img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 12px 16px rgba(10, 22, 40, .12));
}
[data-tema="escuro"] .vei-ficha-foto img {
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55));
}


/* ---------- Modo Diretoria (apresentação ao vivo) ---------- */
.apresentacao { position: fixed; inset: 0; background: #0A1628; color: #fff; z-index: 200; display: flex; flex-direction: column; }
.ap-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 30px; border-bottom: 1px solid rgba(255,255,255,.08); flex: 0 0 auto;
}
.ap-topo .marca-ap { display: flex; align-items: center; gap: 12px; }
.ap-topo .marca-ap img { height: 22px; filter: brightness(0) invert(1); }
.ap-topo .marca-ap span { font-size: .72rem; letter-spacing: .18em; color: rgba(255,255,255,.45); font-weight: 700; }
.ap-topo .acoes { display: flex; align-items: center; gap: 10px; }

.ap-palco { flex: 1; display: flex; overflow: hidden; position: relative; }
.ap-slide { flex: 1; padding: 3.5vh 5vw; display: flex; flex-direction: column; justify-content: center; animation: apFade .38s ease; }
@keyframes apFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ap-slide .selo-slide {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: #6FB3EA; font-weight: 800; margin-bottom: 10px;
}
.ap-slide h1 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 .5rem; }
.ap-slide .sub { color: rgba(255,255,255,.58); font-size: clamp(.85rem, 1.3vw, 1.05rem); margin-bottom: 2.2rem; max-width: 62ch; }
.ap-slide h3 { font-size: clamp(.95rem, 1.5vw, 1.2rem); margin: 0 0 1rem; color: rgba(255,255,255,.9); }

.ap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.ap-card {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.095);
  border-radius: 16px; padding: 20px 22px;
}
.ap-card .r { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.46); font-weight: 700; }
.ap-card .v { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.04em; margin-top: 8px; line-height: 1; }
.ap-card .d { font-size: .76rem; color: rgba(255,255,255,.5); margin-top: 8px; }
.ap-card.ok .v { color: #4ADE9E; }
.ap-card.atencao .v { color: #F4B544; }
.ap-card.critico .v { color: #FF8A8A; }

.ap-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.ap-tabela { width: 100%; border-collapse: collapse; }
.ap-tabela th {
  text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.42); padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.ap-tabela td { padding: 10px; font-size: .88rem; border-bottom: 1px solid rgba(255,255,255,.055); }
.ap-tabela tr:last-child td { border-bottom: 0; }
.ap-tabela .num { font-variant-numeric: tabular-nums; text-align: right; }
.ap-tabela .destaque { color: #FF8A8A; font-weight: 800; }
.ap-tabela .bom { color: #4ADE9E; font-weight: 700; }

.ap-delta { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.ap-delta.melhorou { background: rgba(74,222,158,.15); color: #4ADE9E; }
.ap-delta.piorou { background: rgba(255,138,138,.15); color: #FF8A8A; }
.ap-delta.igual { background: rgba(255,255,255,.09); color: rgba(255,255,255,.6); }

/* barras dentro dos slides (fundo escuro) */
.ap-slide .gb-trilha { background: rgba(255,255,255,.09); }
.ap-slide .gb-rotulo { color: rgba(255,255,255,.7); }
.ap-slide .gb-valor { color: rgba(255,255,255,.85); }

.ap-rodape {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 30px; border-top: 1px solid rgba(255,255,255,.08); flex: 0 0 auto;
}
.ap-rodape .contador { font-size: .82rem; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.ap-rodape .pontos { display: flex; gap: 6px; }
.ap-rodape .ponto-slide {
  width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.22); transition: all .2s;
}
.ap-rodape .ponto-slide.ativo { background: #6FB3EA; width: 22px; }
.ap-nav { display: flex; gap: 8px; }
.ap-nav button {
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px; padding: 8px 14px; cursor: pointer; font-size: .82rem; font-weight: 600;
}
.ap-nav button:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.ap-nav button:disabled { opacity: .3; cursor: not-allowed; }

/* ---------- Barra de filtros, rodapé e selos do Modo Diretoria ----------
 * A barra vive FORA do .ap-palco de propósito: o palco é `flex:1` e faz
 * scroll interno dos slides. Quando os filtros ficaram dentro dele, a barra
 * consumia altura do slide e o conteúdo era empurrado para fora da tela.
 */
#ap-filtros {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px;
  padding: 12px 30px; border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); flex: 0 0 auto;
}
.ap-filtro { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ap-filtro > span {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.42); font-weight: 700;
}
.ap-filtro select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.07) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff88' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 12px;
  color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 9px;
  padding: 8px 32px 8px 11px; font-family: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; min-width: 148px; max-width: 220px;
}
.ap-filtro select:hover { border-color: rgba(255,255,255,.3); background-color: rgba(255,255,255,.1); }
.ap-filtro select:focus-visible { outline: 2px solid #6FB3EA; outline-offset: 1px; }
/* O texto das opções é desenhado pelo SO: no tema escuro ele herdaria branco
 * sobre branco no menu aberto. Fixar cor de fundo e de texto resolve. */
.ap-filtro select option { background: #0F1F35; color: #fff; }

#ap-filtros .btn { height: 36px; }
#ap-filtros .ap-btn-priv { color: #fff; border-color: rgba(255,255,255,.2); }
#ap-filtros .ap-btn-priv:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Selo de privacidade no topo: precisa ser visto de longe, na TV da sala. */
.ap-selo-priv {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 99px; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(244,181,68,.16); color: #F4B544;
  border: 1px solid rgba(244,181,68,.4);
}

/* Rodapé: o metadado (período/filtros/atualização) ocupa o espaço do contador
 * antigo. Sem largura mínima ele colapsa e o texto quebra letra por letra. */
.ap-rodape .ap-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: .72rem; color: rgba(255,255,255,.45); min-width: 0; flex: 1;
}
.ap-rodape .ap-meta .ap-sep { opacity: .4; }

.ap-slide .ap-nota {
  margin-top: 1.6rem; font-size: .76rem; line-height: 1.5;
  color: rgba(255,255,255,.42); max-width: 78ch;
}

@media (max-width: 860px) {
  .ap-duas { grid-template-columns: 1fr; }
  .ap-slide { padding: 22px; }
  .ap-grid { gap: 10px; }
  .ap-card { padding: 14px; }
  /* Em telas estreitas a barra de filtros precisa rolar sozinha, senão come
   * metade da altura e o slide fica ilegível. */
  #ap-filtros { padding: 10px 16px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .ap-filtro select { min-width: 120px; }
  .ap-rodape { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .ap-rodape .ap-meta { flex-basis: 100%; order: 3; }
}

/* ---------- Utilitários ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.texto-2 { color: var(--texto-2); } .texto-3 { color: var(--texto-3); }
.txt-sm { font-size: .82rem; } .txt-xs { font-size: .74rem; }
.txt-center { text-align: center; }
.forte { font-weight: 700; }
.mono { font-family: 'SF Mono', ui-monospace, monospace; }
.oculto { display: none !important; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }
.pill-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-tab {
  padding: 6px 13px; border-radius: 20px; font-size: .82rem; font-weight: 600;
  background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-2); cursor: pointer;
  font-family: inherit;
}
.pill-tab.ativo { background: var(--azul-inst); color: #fff; border-color: var(--azul-inst); }

/* ---------- Mobile ---------- */
.menu-btn { display: none; background: none; border: none; font-size: 1.15rem; color: var(--texto); cursor: pointer; padding: 6px; }
.sidebar-overlay { display: none; }

/*
 * Botão de voltar do topo. Existe em toda tela (ver `Topo` em src/layout.tsx).
 * Discreto de propósito: é saída, não ação principal — mas com 34px de lado e
 * `:active` visível, para funcionar no dedo tanto quanto no mouse.
 */
.topo-voltar {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: 1px solid var(--borda);
  color: var(--texto-2); font-size: .82rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.topo-voltar:hover { background: var(--gelo); color: var(--texto); border-color: var(--borda-2); }
.topo-voltar:active { transform: translateY(1px); }

@media (max-width: 1024px) {
  .grade-4 { grid-template-columns: repeat(2, 1fr); }
  .grade-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --sidebar: 268px; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--sombra-3); }
  .sidebar.aberta { transform: translateX(0); }
  .sidebar-overlay.aberta { display: block; position: fixed; inset: 0; background: rgba(10,20,35,.5); z-index: 45; }
  .conteudo { margin-left: 0; }
  .corpo { padding: 16px; }
  .topo { padding: 0 14px; height: 56px; }
  .menu-btn { display: block; }
  .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi .val { font-size: 1.5rem; }
  .atalhos { grid-template-columns: repeat(3, 1fr); }
  .checklist-progresso { margin: -16px -16px 16px; padding-left: 16px; padding-right: 16px; top: 56px; }
  h1 { font-size: 1.3rem; }
  .oculto-mobile { display: none !important; }
  .slide h2 { font-size: 1.9rem; }

  /* Alvo de toque no dedo.
   *
   * Medido no navegador a 375x667 (iPhone SE): os botões da barra do topo
   * saíam com 29px de altura — "Sair", "CSV", "Modo Diretoria", a busca.
   * 29px é abaixo do mínimo confortável para o dedo (WCAG 2.5.8 pede 24px,
   * e 44px é o alvo recomendado). No desktop 29px funciona bem com mouse,
   * então o tamanho base fica como está: só as telas de toque crescem.
   *
   * O `min-height` vale para `.btn` e `.btn-sm`; o `.btn-sm` continua menor
   * que o `.btn` normal, mas nenhum dos dois fica abaixo de 40px. */
  .btn, .btn-sm { min-height: 40px; padding: 10px 14px; }
  .btn-sm { font-size: .82rem; }
  .topo .btn, .topo .btn-sm { min-height: 40px; }
}

@media (max-width: 420px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .topo, .diretoria-barra, .no-print { display: none !important; }
  .conteudo { margin-left: 0; }
  .corpo { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Skeleton ---------- */
@keyframes pulsar { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.skeleton { background: var(--borda-2); border-radius: 6px; animation: pulsar 1.4s ease-in-out infinite; }
.spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg) } }

/* ---------- Central de notificações ---------- */
.lista-notif { display: flex; flex-direction: column; gap: 8px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 12px; padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s;
}
.lista-notif .notif-item:hover { border-color: #C7D6E8; box-shadow: var(--sombra-2); }
.notif-item.nao-lida { border-left: 3px solid var(--azul-tec); background: var(--superficie); }
.notif-icone {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: .88rem;
}
.notif-icone.info { background: var(--azul-tec-100); color: var(--azul-tec); }
.notif-icone.ok { background: var(--ok-100); color: var(--ok); }
.notif-icone.atencao { background: var(--atencao-100); color: #B67F14; }
.notif-icone.critico { background: var(--critico-100); color: var(--critico); }
.notif-titulo { font-size: .87rem; font-weight: 650; color: var(--texto); line-height: 1.3; }
.notif-item.nao-lida .notif-titulo { font-weight: 750; }
.notif-msg { font-size: .8rem; color: var(--texto-2); margin-top: 3px; line-height: 1.45; }
.notif-rodape { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.notif-ponto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--azul-tec);
  display: inline-block; flex: 0 0 auto;
}

/* Sino do topo */
.sino {
  position: relative; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: 1px solid transparent; color: var(--texto-2);
  cursor: pointer; font-size: .92rem; text-decoration: none;
}
.sino:hover { background: var(--superficie-2); color: var(--texto); }
.sino .sino-badge {
  position: absolute; top: 1px; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--critico); color: #fff;
  border-radius: 8px; font-size: .62rem; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
  border: 1.5px solid var(--superficie);
}

@media (max-width: 768px) {
  .notif-item { padding: 12px; }
  .notif-icone { width: 30px; height: 30px; font-size: .8rem; }
}

/* ---------- Revisão do checklist (gestor) ---------- */
.revisao-placa {
  font-size: 1.15rem; font-weight: 800; letter-spacing: .02em;
  font-family: 'SF Mono', ui-monospace, monospace;
}

/* Grade de evidências externas */
/*
 * Três ângulos por linha, no máximo. Com 240px o navegador abria QUATRO
 * colunas em tela larga e cada foto ficava com 260px — apertado demais para
 * conferir detalhe de lataria. Com 300px de piso, 1176px de conteúdo dão
 * 3 colunas de ~383px: a mesma foto ocupa quase o dobro da área e continua
 * cabendo tudo sem rolagem horizontal.
 * `min(100%, 300px)` impede que o piso estoure a largura em telas pequenas.
 */
.fotos-grade {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.foto-card { margin: 0; }
.foto-card figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-top: 7px; padding: 0 2px;
}
.foto-btn {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--borda); border-radius: 11px; overflow: hidden;
  background: var(--gelo); cursor: zoom-in; line-height: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.foto-btn:hover { border-color: var(--azul-tec); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.foto-btn img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-btn.mini { width: 84px; border-radius: 8px; }
.foto-btn.mini img { aspect-ratio: 4 / 3; }
.foto-zoom {
  position: absolute; right: 8px; bottom: 8px;
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-size: .74rem;
  background: rgba(10, 20, 35, .72); color: #fff; line-height: 1;
}
.foto-odometro { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
/*
 * Documento NÃO usa `cover`. O CRLV é uma foto retangular (vertical ou
 * horizontal) e o recorte 4/3 cortava justamente as bordas — que é onde ficam
 * placa, chassi e validade, isto é, o que o gestor precisa ler. Aqui a imagem
 * aparece inteira, com `contain`, e a moldura se adapta à altura real.
 */
.foto-documento {
  width: 100%; height: auto; display: block;
  max-height: 420px; object-fit: contain; background: var(--gelo);
}
.foto-vazio {
  display: grid; place-items: center; gap: 6px; aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--borda-2); border-radius: 11px;
  color: var(--texto-3); font-size: .78rem; background: var(--gelo);
}
.foto-vazio i { font-size: 1.4rem; opacity: .55; }
.foto-card.faltando figcaption .forte { color: var(--texto-3); }

/* Odômetro em destaque */
.odometro-leitura { display: flex; align-items: baseline; gap: 8px; }
.odometro-num {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em;
  line-height: 1; font-family: 'SF Mono', ui-monospace, monospace;
}
.odometro-un { font-size: .9rem; color: var(--texto-3); font-weight: 700; }

/* Lista de respostas */
.respostas-lista { display: flex; flex-direction: column; }
.resposta-linha {
  display: flex; gap: 12px; padding: 13px 4px;
  border-bottom: 1px solid var(--borda-2);
}
.resposta-linha:last-child { border-bottom: none; }
.resposta-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; font-size: .74rem; font-weight: 800;
  background: var(--superficie-2); color: var(--texto-2);
}
.resposta-linha.ok .resposta-num { background: var(--ok-100); color: #0B7A55; }
.resposta-linha.atencao .resposta-num { background: var(--atencao-100); color: #A06F0C; }
.resposta-linha.critico .resposta-num { background: var(--critico-100); color: #B03434; }
.resposta-titulo { font-size: .86rem; font-weight: 650; }
.resposta-det {
  font-size: .8rem; color: var(--texto-2); margin-top: 4px;
  line-height: 1.45; font-style: italic;
}
.resposta-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 14, 22, .92);
  display: grid; place-items: center; padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: 100%; }
.lightbox img {
  max-width: min(96vw, 1400px); max-height: 80vh;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.lightbox figcaption { color: #C9D6E3; font-size: .84rem; text-align: center; }
.lightbox-fechar {
  position: absolute; top: 18px; right: 18px;
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 1rem; cursor: pointer;
}
.lightbox-fechar:hover { background: rgba(255, 255, 255, .22); }

/* ---------- Filtros de checklist (gestão) ---------- */
.filtros-grade {
  display: grid;
  gap: 12px 14px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  align-items: end;
}
.filtros-grade .campo { margin-bottom: 0; }
.filtros-grade .campo label { font-size: .76rem; }
.filtros-grade input,
.filtros-grade select { padding: 8px 10px; font-size: .86rem; }
.filtros-grade .btn { padding: 9px 14px; }

@media (max-width: 768px) {
  .filtros-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .filtros-grade { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .fotos-grade { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .odometro-num { font-size: 2rem; }
  .resposta-linha { padding: 11px 2px; }
  .lightbox { padding: 12px; }
}

/* ---------- Manutenção: agendamento de revisão ---------- */
.rev-estado { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--borda-2); }
.rev-q-txt {
  font-size: .95rem;
  font-weight: 700;
  color: var(--fg, var(--texto));
  margin-bottom: 10px;
}
.rev-q .rev-q-txt { margin-bottom: 10px; }
.rev-q-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--azul-tec-100);
  color: var(--azul-tec);
  font-size: .72rem;
  font-weight: 800;
  margin-right: 7px;
}
.rev-q-botoes { display: flex; gap: 9px; flex-wrap: wrap; }
.rev-q-botoes > form { flex: 1 1 auto; }
.rev-q-botoes > .btn { flex: 1 1 auto; }
.rev-form {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--raio);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.rev-form .campo:last-of-type { margin-bottom: 12px; }
.rev-acoes {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 12px;
}
.rev-acoes form { display: inline-flex; }
.rev-link {
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.rev-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda-2);
}
.rev-linha:last-child { border-bottom: 0; }
.rev-nota-fora {
  margin-top: 10px;
  font-size: .78rem; line-height: 1.45;
  color: var(--texto-3); text-align: center;
}
.rev-nota-fora strong { color: var(--texto-2); }

/* ---------- §21: fila de revisão da inspeção visual ---------- */
.achados-lista { display: grid; gap: 14px; }

.achado-card {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  background: var(--superficie);
}
.achado-card:hover { border-color: var(--azul-tec); }

.achado-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.achado-ident { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.achado-ident > i {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--azul-tec-100);
  color: var(--azul-tec);
  font-size: .86rem;
}

/*
 * EVIDÊNCIA DO ACHADO — a foto é o que o gestor julga.
 *
 * Antes: miniatura de 132×98 px com `object-fit: cover`. Resultado medido na
 * tela: a foto virava um recorte central de 98 px de altura e um amassado de
 * 20 cm desaparecia fora do quadro. Confirmar ou descartar sem enxergar o dano
 * não é revisão — é carimbo. Agora a imagem ocupa meia linha, aparece INTEIRA
 * (`contain`, sem recorte) e amplia num clique.
 */
.achado-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 12px;
  align-items: start;
}
.achado-foto {
  display: block;
  position: relative;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie-2);
}
.achado-foto img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  transition: opacity .15s;
}
.achado-foto:hover img { opacity: .92; }
.achado-foto-legenda {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px; font-size: .7rem; color: var(--texto-3);
}
.achado-foto-legenda i { color: var(--azul-tec); }

.achado-acoes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
  display: grid;
  gap: 10px;
}
.achado-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.achado-form .campo { margin-bottom: 0; }
.achado-form .campo label { font-size: .74rem; }
.achado-form input, .achado-form select { padding: 8px 10px; font-size: .84rem; }
.achado-form .btn { padding: 9px 14px; white-space: nowrap; }

@media (max-width: 640px) {
  .achado-corpo { grid-template-columns: 1fr; }
  /* No celular a foto continua INTEIRA — só encolhe o teto. Fixar `height`
     aqui era o que recortava o dano justamente na tela mais usada em campo. */
  .achado-foto img { max-height: 300px; }
  .achado-form { flex-direction: column; align-items: stretch; }
  .achado-form .btn { width: 100%; }
}

/* ---------- Avarias: a evidência da inspeção visual ----------
 *
 * A avaria nascida da inspeção visual carrega uma foto que é a ÚNICA prova do
 * dano. Antes desta regra ela não aparecia em lugar nenhum: a linha da tabela
 * era só texto igual a uma avaria digitada à mão, e a fila de revisão (onde a
 * foto existia) esvazia assim que o gestor confirma. O resultado era decidir
 * triagem, tratamento e encerramento olhando uma frase.
 */
.avaria-thumb {
  display: block;
  width: 46px; height: 36px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  overflow: hidden;
  background: var(--superficie-2);
}
.avaria-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avaria-thumb:hover { border-color: var(--azul-tec); }

.avaria-evidencia {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--gelo);
  padding: 12px 14px;
}
[data-tema="escuro"] .avaria-evidencia { background: var(--superficie-2); }
.avaria-evidencia-rot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-3);
  margin-bottom: 9px;
}
.avaria-evidencia-rot i { color: var(--azul-tec); }
.avaria-evidencia-foto {
  display: block;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie);
}
.avaria-evidencia-foto img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}
.avaria-evidencia-txt {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--borda-2);
}
@media (max-width: 640px) {
  .avaria-evidencia { padding: 10px; }
  .avaria-evidencia-foto img { max-height: 320px; }
}

/* ---------- Assinatura do colaborador ---------- */
.assinatura-area {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 180px;
  border: 1.5px dashed var(--borda);
  border-radius: var(--raio);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  overflow: hidden;
  touch-action: none;
}

.assinatura-area canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.assinatura-dica {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--texto-3);
  font-size: .85rem;
  pointer-events: none;
}

.assinatura-dica i {
  opacity: .6;
}

.assinatura-acoes {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.assinatura-preview {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: #fff;
  padding: .75rem;
  max-width: 420px;
}

.assinatura-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
}

@media (max-width: 640px) {
  .assinatura-area { height: 150px; }
  .assinatura-preview { max-width: 100%; }
}

/* ---------- Escolha do tipo de checklist ----------
   Uma opção por cartão, clicável inteiro: no celular, dentro do carro, alvo
   grande é a diferença entre acertar e errar o tipo do checklist. */
.tipos-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.tipo-opcao {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linha, #E3E8F0);
  border-radius: var(--raio);
  background: var(--superficie, #fff);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.tipo-opcao:hover {
  border-color: var(--azul-tec);
  box-shadow: 0 2px 10px rgba(23, 105, 170, .12);
  transform: translateY(-1px);
}

.tipo-opcao > i {
  color: var(--azul-tec);
  font-size: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.tipo-opcao strong { display: block; margin-bottom: 2px; }
.tipo-opcao span { display: block; line-height: 1.35; }

/* O card de escolha deixou de ser <a href> e virou <button> dentro de um
   <form method="post">: escolher o tipo cria checklist e descarta o rascunho
   anterior, e escrita não pode morar num GET. Estas regras devolvem ao botão a
   aparência que a âncora tinha — sem elas o <button> herdaria a fonte e o
   alinhamento do navegador e a tela sairia diferente. */
.tipo-form { margin: 0; }
button.tipo-opcao {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.tipo-opcao:focus-visible {
  outline: none;
  border-color: var(--azul-tec);
  box-shadow: 0 0 0 3px var(--azul-tec-100);
}

.tipo-opcao.destaque {
  border-color: var(--azul-tec);
  background: var(--azul-tec-100, #E7F0FA);
}

@media (max-width: 640px) {
  .tipos-grade { grid-template-columns: 1fr; }
}

/* ---------- Trilha de inserção obrigatória ----------
   Página inteira, sem menu lateral: enquanto a trilha não termina, o sistema
   não está aberto. O desenho comunica isso — nada de navegação à vista. */
.trilha-pagina {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundo, #F6F8FC);
}

.trilha-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--azul-inst, #102D55);
}

.trilha-marca { height: 26px; width: auto; }

.trilha-sec {
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trilha-corpo {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 18px 40px;
}

.trilha-boas-vindas { position: relative; }

.trilha-selo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--azul-tec-100, #E7F0FA);
  color: var(--azul-tec);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}

.trilha-boas-vindas h1 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.2;
}

.trilha-sub {
  margin: 0 0 16px;
  color: var(--texto-2, #4A5568);
  font-size: 14px;
  line-height: 1.5;
}

.trilha-aviso { margin-bottom: 18px; }

.trilha-progresso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.trilha-barra {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--linha, #E3E8F0);
  overflow: hidden;
}

.trilha-barra > span {
  display: block;
  height: 100%;
  background: var(--ok, #13A674);
  border-radius: 999px;
  transition: width .3s ease;
}

.trilha-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trilha-passos li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linha, #E3E8F0);
  border-radius: var(--raio);
  background: var(--superficie, #fff);
}

.trilha-passos li.feito { border-color: var(--ok, #13A674); }

.trilha-passo-marca {
  flex: 0 0 auto;
  width: 24px;
  display: flex;
  justify-content: center;
  padding-top: 1px;
  color: var(--ok, #13A674);
  font-size: 17px;
}

.trilha-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--azul-tec-100, #E7F0FA);
  color: var(--azul-tec);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trilha-passo-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.trilha-passo-acao { flex: 0 0 auto; align-self: center; }

.trilha-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--linha, #E3E8F0);
  color: var(--texto-3, #718096);
  font-size: 12px;
}

@media (max-width: 640px) {
  .trilha-corpo { padding: 20px 12px 32px; }
  .trilha-boas-vindas h1 { font-size: 20px; }
  .trilha-passos li { flex-wrap: wrap; }
  .trilha-passo-acao { width: 100%; padding-left: 36px; }
}

/* ============================================================
   Conferência do checklist anterior (passagem do veículo)
   ============================================================
   A tela mostra UM item por vez. O padrão visual é o mesmo dos
   outros cards do sistema; o que muda é o "dêpará": a foto do
   condutor anterior fica ao lado do que o novo encontrou.
   ============================================================ */

.conf-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linha, #E3E8F0);
  font-size: 12px;
  color: var(--texto-2, #4A5568);
}

.conf-legenda-item { display: inline-flex; align-items: center; gap: 6px; }

.conf-carregando {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px;
  color: var(--texto-3, #718096);
  font-size: 13px;
}

/* ---- progresso ---- */
.conf-progresso { margin-bottom: 14px; }

.conf-progresso-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.conf-passo { font-size: 13px; font-weight: 700; color: var(--azul-inst, #102D55); }

.conf-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--linha, #E3E8F0);
  overflow: hidden;
}

.conf-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--azul-tec, #1769AA);
  transition: width .25s ease;
}

/* ---- cartão do item ---- */
.conf-item { padding: 22px; }

.conf-item-topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha, #E3E8F0);
}

.conf-item-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--azul-tec-100, #E7F0FA);
  color: var(--azul-tec, #1769AA);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conf-item-topo h3 { margin: 0; font-size: 15px; }

.badge-critico {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: #FDECEC;
  color: var(--critico, #D94A4A);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ---- o que o anterior registrou ---- */
.conf-anterior {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--raio, 12px);
  background: var(--fundo, #F6F8FC);
  border: 1px solid var(--linha, #E3E8F0);
}

.conf-rot {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-3, #718096);
  margin-bottom: 8px;
}

.conf-valor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.conf-alt {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: #E8F7F1;
  color: #0B7A55;
  font-size: 12px;
  font-weight: 700;
}

.conf-alt.irregular { background: #FDECEC; color: var(--critico, #D94A4A); }

.conf-sub { font-size: 12px; color: var(--texto-2, #4A5568); }

.conf-desc {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--texto-2, #4A5568);
  line-height: 1.5;
  white-space: pre-wrap;
}

.conf-fotos-ant {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.conf-foto-ant {
  display: block;
  width: 92px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--linha, #E3E8F0);
  background: #fff;
}

.conf-foto-ant img { width: 100%; height: 100%; object-fit: cover; display: block; }

.conf-sem-foto {
  margin-top: 10px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--texto-3, #718096);
}

/* ---- galeria das fotos do checklist anterior ---- */
.conf-fotos-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.conf-fotos-topo h3 { margin: 0; }

.conf-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.conf-galeria-item {
  margin: 0;
  border: 1px solid var(--linha, #E3E8F0);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.conf-galeria-item a {
  display: block;
  aspect-ratio: 4 / 3;
  background: #F7F9FC;
}

.conf-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.conf-galeria-item figcaption {
  padding: 7px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-2, #4A5568);
  border-top: 1px solid var(--linha, #E3E8F0);
  background: #FCFDFE;
}

/* ---- a pergunta ---- */
.conf-pergunta { margin-top: 20px; }

.conf-pergunta-rot {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto, #1F2933);
  margin-bottom: 10px;
}

.conf-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.conf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  border-radius: var(--raio, 12px);
  border: 1.5px solid var(--linha, #E3E8F0);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-2, #4A5568);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.conf-btn:hover { border-color: var(--azul-tec, #1769AA); }

.conf-btn-sim.ativo {
  border-color: var(--ok, #13A674);
  background: #E8F7F1;
  color: #0B7A55;
}

.conf-btn-nao.ativo {
  border-color: var(--critico, #D94A4A);
  background: #FDECEC;
  color: var(--critico, #D94A4A);
}

/* ---- área de discordância ---- */
.conf-nao {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--linha, #E3E8F0);
}

.conf-preview { margin-top: 4px; }

.conf-preview img {
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  border: 1px solid var(--linha, #E3E8F0);
  display: block;
}

/* ---- rodapé de navegação ---- */
.conf-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.conf-pe .btn { min-width: 132px; }

.conf-pronto { box-shadow: 0 0 0 3px rgba(23, 105, 170, .14); }

/* ---- revisão final ---- */
.conf-lista-div { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.conf-div-linha {
  padding: 12px 14px;
  border-radius: var(--raio, 12px);
  border: 1px solid var(--linha, #E3E8F0);
  background: #FFFDF7;
}

.conf-div-titulo { font-size: 13px; font-weight: 700; margin-bottom: 6px; }

.conf-div-depara {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

.conf-de { color: var(--texto-3, #718096); text-decoration: line-through; }
.conf-para { color: var(--critico, #D94A4A); font-weight: 700; }

.conf-div-motivo {
  margin-top: 6px;
  font-size: 12px;
  color: var(--texto-2, #4A5568);
  line-height: 1.45;
}

.conf-div-foto {
  margin-top: 8px;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--linha, #E3E8F0);
}

@media (max-width: 640px) {
  .conf-item { padding: 16px; }
  .conf-botoes { grid-template-columns: 1fr; }
  .conf-pe { flex-direction: column-reverse; }
  .conf-pe .btn { width: 100%; }
}

/* ============================================================================
   POP-UP DE "PROBLEMA NA FROTA"
   ============================================================================
   Modal que interpela o gestor quando um veículo chega diferente do que o
   checklist anterior relatava. Ver src/lib/popup.ts para a regra de negócio.

   z-index 90: acima do sidebar-overlay (45) e de qualquer conteúdo da página.
   A classe `oculto` já existe e usa !important, então o estado inicial
   (fechado) não depende de JS para não piscar na tela.
   ========================================================================== */

.popup-frota {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 20, 35, .58);
  backdrop-filter: blur(2px);
  animation: popup-surgir .18s ease-out;
}

@keyframes popup-surgir {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.popup-frota-caixa {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--superficie);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-3);
  animation: popup-subir .22s cubic-bezier(.2, .8, .3, 1);
}

@keyframes popup-subir {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Cabeçalho: a faixa vermelha só aparece quando há algo crítico. O tom muda
   porque um alerta crítico não pode ter a mesma cara de um aviso. */
.popup-frota-topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--borda-2);
}

.popup-frota-topo .icone {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  background: var(--atencao-100);
  color: #8a5a00;
}

.popup-frota.critico .popup-frota-topo .icone {
  background: var(--critico-100);
  color: var(--critico);
}

.popup-frota-topo h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.3;
}

.popup-frota-topo p {
  margin: 3px 0 0;
  font-size: .78rem;
  color: var(--texto-2);
  line-height: 1.45;
}

.popup-frota-fechar {
  flex: 0 0 auto;
  margin-left: auto;
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--texto-3);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
}

.popup-frota-fechar:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.popup-frota-corpo {
  padding: 14px 20px 4px;
}

/* Um alerta = uma linha. A borda esquerda carrega a severidade, para o gestor
   distinguir crítico de atenção sem ler o texto. */
.popup-alerta {
  display: flex;
  gap: 10px;
  padding: 10px 0 10px 12px;
  border-left: 3px solid var(--atencao);
  margin-bottom: 10px;
}

.popup-alerta.critico { border-left-color: var(--critico); }

.popup-alerta-txt { min-width: 0; flex: 1; }

.popup-alerta-titulo {
  font-size: .85rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.35;
}

.popup-alerta-msg {
  margin-top: 3px;
  font-size: .78rem;
  color: var(--texto-2);
  line-height: 1.45;
}

.popup-alerta-hora {
  margin-top: 5px;
  font-size: .7rem;
  color: var(--texto-3);
}

.popup-frota-mais {
  padding: 2px 20px 12px;
  font-size: .76rem;
  color: var(--texto-3);
}

.popup-frota-acoes {
  display: flex;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--borda-2);
}

.popup-frota-acoes .btn { flex: 1; justify-content: center; }

@media (max-width: 480px) {
  .popup-frota { padding: 0; align-items: flex-end; }
  .popup-frota-caixa { max-width: none; border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
  .popup-frota-acoes { flex-direction: column-reverse; }
}

/* ---------- Férias: data de volta e cobertura ----------------------------
   Bloco que só existe no checklist de SAÍDA de férias. Duas colunas em tela
   larga, empilhado no celular — o mesmo comportamento do resto do formulário,
   porque no celular o campo de data abre o seletor nativo e precisa de largura
   inteira para não cortar o rótulo. */
.ferias-campos input[type="date"],
.ferias-campos select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  font-size: .88rem;
}

.ferias-campos input[type="date"]:focus,
.ferias-campos select:focus {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
  border-color: var(--primario);
}

/* O seletor nativo de data desenha o ícone com a cor do sistema; no tema
   escuro ele sumia contra o fundo. */
[data-tema="escuro"] .ferias-campos input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

#sky-ferias-recado { min-height: 1em; }

@media (min-width: 640px) {
  .ferias-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .ferias-campos .aviso,
  .ferias-campos .flex,
  #sky-ferias-recado {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Mapa da frota (Leaflet + OpenStreetMap)
   --------------------------------------------------------------------------
   O Leaflet precisa de altura definida no container, senão não desenha nada.
   Os marcadores são divIcon (CSS puro) para não depender das imagens padrão do
   Leaflet, que vêm de CDN e quebram quando o `leaflet.css` é bloqueado.
   ========================================================================== */
.mapa-frota { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.mapa-frota-canvas { width: 100%; background: #eef2f7; z-index: 0; }
.mapa-frota-legenda {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 10px 14px; background: var(--superficie);
  border-top: 1px solid var(--borda); font-size: 12px; color: var(--texto-2);
}
/* --- Marcadores do mapa -----------------------------------------------------
   Dois vocabulários visuais distintos, de propósito:

   BASE CONTRATUAL → bolha circular grande com anel branco, gradiente da marca,
   ícone de galpão e bico embaixo apontando o ponto exato. A aura pulsante atrás
   comunica "referência fixa", algo que existe sempre.

   CHECKLIST → pílula pequena em ciano com o NÚMERO de registros daquele ponto.
   Sem o número, 48 checklists em 48 coordenadas próximas viram uma mancha
   azul ilegível — que era exatamente o defeito reclamado.

   A diferença de tamanho e de forma faz a leitura funcionar mesmo de longe:
   o que é permanente é grande e azul-escuro; o que é evento é pequeno e claro.
   -------------------------------------------------------------------------- */
.pino-wrap { background: none; border: none; }

.pino-base { position: relative; width: 38px; height: 48px; }

/* Aura: pulso lento que sai de trás da bolha. `prefers-reduced-motion` respeitado. */
.pino-base-aura {
  position: absolute; left: 50%; top: 19px; width: 38px; height: 38px;
  margin: -19px 0 0 -19px; border-radius: 50%;
  background: rgba(29, 78, 216, .30);
  animation: pino-pulso 2.6s ease-out infinite;
}
@keyframes pino-pulso {
  0%   { transform: scale(.55); opacity: .55; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pino-base-aura { animation: none; opacity: .18; }
}

.pino-base-bolha {
  position: absolute; left: 50%; top: 0; width: 38px; height: 38px;
  margin-left: -19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #2F6BFF 0%, #1D4ED8 55%, #1633A8 100%);
  border: 2.5px solid #fff;
  box-shadow: 0 6px 14px rgba(10, 22, 40, .32), 0 0 0 1px rgba(10, 22, 40, .06);
  color: #fff; font-size: 15px;
}

/* Bico: triângulo que encosta no ponto geográfico. */
.pino-base-bico {
  position: absolute; left: 50%; top: 33px; width: 0; height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 14px solid #1D4ED8;
  filter: drop-shadow(0 3px 3px rgba(10, 22, 40, .28));
}

/* Checklist: pílula ciano com contagem, pendurada ABAIXO do ponto.
   O contêiner é mais largo que a pílula (40×30) para o bico poder ser
   centralizado independente do número — "1" e "48" têm larguras diferentes e a
   âncora precisa continuar no mesmo pixel. `iconAnchor` no mapa é [20, 0], ou
   seja o topo do contêiner é o ponto geográfico exato. */
.pino-check { position: relative; width: 40px; height: 30px; }

/* Bico apontando PARA CIMA: casa com o bico do pino de base, que aponta para
   baixo. Os dois se encontram no ponto sem sobreposição. */
.pino-check-bico {
  position: absolute; left: 50%; top: 0; width: 0; height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 9px solid #0284C7;
  filter: drop-shadow(0 -1px 1px rgba(2, 132, 199, .25));
}

.pino-check-bolha {
  position: absolute; left: 50%; top: 8px;
  min-width: 30px; height: 22px; padding: 0 7px;
  margin-left: -15px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224, 242, 254, .97);
  border: 2px solid #0284C7;
  color: #075985; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  box-shadow: 0 2px 8px rgba(2, 132, 199, .28);
}
[data-tema="escuro"] .pino-check-bolha {
  background: rgba(7, 89, 133, .92); color: #E0F2FE; border-color: #38BDF8;
}
[data-tema="escuro"] .pino-check-bico { border-bottom-color: #38BDF8; }

/* Popup e tooltip: cartão limpo, sem a cauda padrão do Leaflet. */
.mapa-pop { display: flex; flex-direction: column; gap: 3px; min-width: 130px; }
.mapa-pop strong { font-size: 13px; line-height: 1.25; }
.mapa-pop span { font-size: 11.5px; color: #64748B; line-height: 1.35; }
.mapa-dica {
  background: rgba(10, 22, 40, .92); color: #fff; border: none;
  border-radius: 7px; padding: 5px 9px; font-size: 11.5px; font-weight: 600;
  box-shadow: 0 6px 16px rgba(10, 22, 40, .28);
}
.mapa-dica::before { border-top-color: rgba(10, 22, 40, .92) !important; }

/* Amostras da legenda (versões estáticas, sem animação). */
.legenda-pino-base {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; vertical-align: middle;
  background: linear-gradient(150deg, #2F6BFF 0%, #1D4ED8 60%, #1633A8 100%);
  border: 2px solid #fff; color: #fff; font-size: 9px;
  box-shadow: 0 2px 6px rgba(10, 22, 40, .3);
}
.legenda-pino-check {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  vertical-align: middle;
  background: rgba(14, 165, 233, .18); border: 2px solid #0284C7;
  color: #075985; font-size: 10px; font-weight: 800;
}
[data-tema="escuro"] .legenda-pino-check {
  background: rgba(56, 189, 248, .26); color: #E0F2FE; border-color: #38BDF8;
}

.leaflet-container { font-family: inherit; font-size: 12px; }
.leaflet-popup-content-wrapper {
  border-radius: 12px; box-shadow: 0 10px 28px rgba(10, 22, 40, .18);
  border: 1px solid rgba(10, 22, 40, .06);
}
.leaflet-popup-content { margin: 11px 14px; }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-popup-content strong { color: var(--texto-1); }