/* =========================================================
   AFAU Digital — Design Tokens
   Paleta extraída da identidade visual oficial (logo AFAU):
   navy profundo + gradiente azul elétrico, sobre branco/cinza.
   ========================================================= */
:root {
  /* Cor */
  --navy-900: #0a1b3d;
  --navy-800: #0f2657;
  --blue-600: #1565d8;
  --blue-500: #2e86ff;
  --blue-400: #4fa9f5;
  --gray-50:  #f4f6f9;
  --gray-100: #e8ecf2;
  --gray-300: #c7cfdb;
  --gray-500: #6b7484;
  --white:    #ffffff;
  --danger:   #d33a3a;
  --success:  #1e9e5a;

  --bg: var(--gray-50);
  --surface: var(--white);
  --text: var(--navy-900);
  --text-muted: var(--gray-500);
  --border: var(--gray-100);
  --accent: var(--blue-500);
  --accent-grad: linear-gradient(135deg, var(--blue-600), var(--blue-400));

  /* Tipografia */
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-data: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Layout */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-1: 0 1px 3px rgba(10, 27, 61, 0.08);
  --shadow-2: 0 8px 24px rgba(10, 27, 61, 0.12);
  --nav-h: 64px;
  --tab-h: 68px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --bg: #0a1220;
  --surface: #101b31;
  --text: #eef2f9;
  --text-muted: #93a0b8;
  --border: #1c2b47;
  --gray-100: #16233d;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  /* Esconde a barra de rolagem visualmente — a rolagem em si continua funcionando normalmente,
     isto só remove o indicador visual (linha/barra) que aparece na lateral da tela. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge legado */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none; /* Chrome, Safari e demais navegadores baseados em WebKit (inclui iOS) */
}
body {
  padding-bottom: calc(var(--tab-h) + var(--safe-bottom));
  min-height: 100vh;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.mono, .data-value { font-family: var(--font-data); }
button { font-family: inherit; }
a { color: var(--blue-600); }
:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* flex-shrink:0 em __nav e __actions: são os dois lados que PRECISAM continuar 100% clicáveis
   (botão voltar + ícones de ação) — nunca podem encolher nem ser cortados. Toda falta de espaço
   em telas estreitas é absorvida só pelo __brand (ver .taxi-badge em taxi.css, com min-width:0 +
   overflow:hidden), nunca pelos dois lados de ação. Isto corrige um bug visual real: com a marca
   (.topbar__brand) permitindo encolher (min-width:0) mas SEM overflow:hidden, e o indicador de
   sincronização tornando .topbar__actions mais largo, a marca podia encolher mais do que o
   conteúdo dela cabia, e a logo/texto vazavam por cima do indicador ao lado (reportado pelo
   usuário com captura de tela). */
.topbar__nav { display: flex; gap: 4px; min-width: 40px; flex-shrink: 0; }
/* Sem regras de caixa aqui de propósito: este elemento sempre carrega junto a classe .taxi-badge
   (ver index.html), que já define display/gap/min-width/overflow/background/padding/borda — eram
   duplicadas aqui antes (e a versão daqui, mais antiga, nunca chegava a valer, pois taxi.css
   carrega depois de style.css). min-width:0 é o único que precisa existir em algum lugar para o
   corte gracioso em telas estreitas funcionar (ver .taxi-badge em taxi.css). */
.topbar__actions { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: none; background: transparent;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { background: var(--gray-100); }

/* Celular estreito (mesmo corte de .taxi-badge__col--taxi em taxi.css): reduz só os ícones DENTRO
   do Topbar — nunca a regra .icon-btn base, que é usada em vários outros lugares do app (busca,
   scanner, itens de lista, linhas de usuário) e não deve encolher ali. Reaproveita o espaço
   liberado para o texto "AFAU Digital" não precisar truncar (ver relato do usuário: com 5 ícones
   de ação + a marca, um iPhone comum (~390px) não tinha espaço nem para o texto compacto). */
@media (max-width: 420px) {
  .topbar { padding-left: 10px; padding-right: 10px; }
  .topbar__nav { min-width: 34px; }
  .topbar__nav .icon-btn, .topbar__actions .icon-btn { width: 34px; height: 34px; }
  .topbar__actions { gap: 4px; }
}

/* ---------- Indicador de sincronização (Topbar) ----------
   Discreto de propósito — só ícone + texto curto, nunca compete visualmente com a logo/marca. O
   Topbar já era justo em telas estreitas mesmo antes desta adição (5 elementos em .topbar__actions
   quando logado); por isso o indicador reduz em 2 estágios conforme a largura, chegando a
   "só o ícone" (mesma largura de um .icon-btn) no celular mais estreito, pra nunca empurrar os
   ícones existentes pra fora da tela. O texto vem de atributos data-full/data-short no span (ver
   refreshSyncIndicator() em app.js) — a troca é só por CSS/media query, sem recálculo em JS. O
   painel completo (com todo o detalhe) continua acessível ao tocar, em qualquer tamanho de tela. */
.sync-indicator {
  display: flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 10px; max-width: 148px;
  border: none; border-radius: 18px; background: var(--gray-100); color: var(--text);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1;
  cursor: pointer; flex-shrink: 0;
}
.sync-indicator:hover { background: var(--border); }
.sync-indicator__icon { font-size: 13px; flex-shrink: 0; }
.sync-indicator__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-indicator__label::before { content: attr(data-full); }
@media (max-width: 480px) {
  .sync-indicator { max-width: 68px; padding: 0 7px; gap: 4px; font-size: 10.5px; }
  .sync-indicator__label::before { content: attr(data-short); }
}
@media (max-width: 420px) {
  /* Só o ícone, do mesmo tamanho dos .icon-btn já reduzidos do Topbar nesta largura (34px) — a
     largura mínima possível sem perder o estado visual (a cor/forma do círculo já indica
     🟢/🟠/🔄/🔴 mesmo sem texto nenhum). Breakpoint alinhado com .topbar__actions .icon-btn e
     .taxi-badge__col--taxi acima/em taxi.css, para os três encolherem juntos no mesmo ponto. */
  .sync-indicator { width: 34px; max-width: 34px; height: 34px; padding: 0; justify-content: center; }
  .sync-indicator__label { display: none; }
}

/* ---------- Painel de sincronização (cabeçalho + linhas de categoria) ----------
   Vive dentro do .modal-card já existente (ver openSyncPanel em app.js) — usa só variáveis de
   cor já definidas acima (--success/--danger/--blue-500/--text-muted/--border), por isso segue os
   dois temas automaticamente sem nenhuma regra [data-theme="dark"] extra aqui. */
.sync-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius-md);
  background: var(--bg); margin-bottom: 14px;
}
.sync-hero__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px; font-weight: 700; color: #fff;
}
.sync-hero--ok .sync-hero__icon { background: var(--success); }
.sync-hero--syncing .sync-hero__icon { background: var(--blue-500); animation: sync-hero-spin 1.1s linear infinite; }
.sync-hero--conflict .sync-hero__icon, .sync-hero--offline .sync-hero__icon, .sync-hero--pending .sync-hero__icon { background: #d8a400; }
.sync-hero--error .sync-hero__icon { background: var(--danger); }
@keyframes sync-hero-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sync-hero__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.sync-hero__subtitle { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.sync-cat-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.sync-cat-row__icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px;
  background: var(--gray-100);
}
.sync-cat-row__icon--ok { background: color-mix(in srgb, var(--success) 16%, transparent); }
.sync-cat-row__icon--pending { background: color-mix(in srgb, #d8a400 18%, transparent); }
.sync-cat-row__label { flex: 1 1 auto; font-size: 13px; color: var(--text); min-width: 0; }
.sync-cat-row__status { flex-shrink: 0; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sync-cat-row__status--ok { color: var(--success); }
.sync-cat-row__status--pending { color: #8a6800; }
[data-theme="dark"] .sync-cat-row__status--pending { color: #f0c65a; }

/* ---------- Circuit divider (assinatura visual da marca) ---------- */
.circuit-divider {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 20px 0 14px;
}
.circuit-divider::before {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--accent-grad);
}
.circuit-divider::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue-400);
  margin-left: -1px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-400) 20%, transparent);
}
.circuit-divider--label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-right: 10px;
  white-space: nowrap;
}

/* ---------- Views / Screens ---------- */
main { display: block; }
.view { display: none; padding: 16px; max-width: 720px; margin: 0 auto; touch-action: pan-y; }
.view.is-active { display: block; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }

/* ---------- Brand banner (Home) ---------- */
.brand-banner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 16px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: var(--shadow-1);
}
.brand-banner__logo {
  width: min(420px, 88%);
  height: auto;
  display: inline-block;
}

/* ---------- Home ---------- */
.hero {
  background: linear-gradient(135deg, #16295c 0%, #1f3f7f 45%, #2e5fb0 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 22px 24px;
  position: relative;
  overflow: hidden;
}
.hero h1 { font-size: 26px; margin-top: 6px; line-height: 1.15; }
.hero p { color: #b9c4dd; font-size: 14px; margin: 10px 0 0; max-width: 34ch; }

/* Card "Consultar Autorização" (Home, 16/08/2026) — fundo em gradiente sutil misturando azul
   sobre --surface via color-mix, para se adaptar sozinho ao tema escuro sem precisar de um bloco
   de override [data-theme="dark"] separado (mesmo truque já usado nos status-pill de taxi.css). */
.auth-consult-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-500) 8%, var(--surface)) 0%, color-mix(in srgb, var(--blue-500) 20%, var(--surface)) 100%);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 10px;
  box-shadow: var(--shadow-1);
}
.auth-consult-card__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text); margin-bottom: 14px;
}
.auth-consult-card__primary {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent-grad); color: var(--white); border: none;
  border-radius: var(--radius-md); padding: 15px; font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue-600) 35%, transparent);
}
.auth-consult-card__row { display: flex; gap: 10px; margin-top: 10px; }
.auth-consult-card__secondary {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface); color: var(--blue-600); border: none;
  border-radius: var(--radius-sm); padding: 12px; font-size: 13.5px; font-weight: 700;
  box-shadow: var(--shadow-1);
}
.auth-consult-card__cpf-field { margin-top: 10px; }

.grid-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.action-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease;
}
.action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.action-card--primary {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--accent-grad);
  color: var(--white);
  border: none;
}
.action-card--primary .action-card__title { color: var(--white); }
.action-card__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--gray-100);
  color: var(--blue-600);
}
.action-card--primary .action-card__icon { background: rgba(255,255,255,.18); color: var(--white); }
.action-card__title { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.action-card__desc { font-size: 12px; color: var(--text-muted); }
.action-card--primary .action-card__desc { color: rgba(255,255,255,.85); }

/* ---------- Cards / Sections ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-1);
}
.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
/* :not([type="checkbox"]):not([type="radio"]) — sem isso, qualquer checkbox/radio aninhado
   dentro de um .field (ex.: "Táxi não possui autorização", "CONFERÊNCIA DA VISTORIA") herdava
   width:100%/padding:12px 14px pensados para campo de texto, e o navegador desenhava o controle
   nativo enorme e desalinhado do texto do label ao lado (bug real encontrado 15/08/2026). */
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 15px;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-500) 12%, transparent);
}

/* Campo desabilitado (ficha somente leitura, ou campo travado depois do 1º salvamento): sem esta
   regra, o navegador (mais perceptível no Safari) aplica sua própria opacidade reduzida ao texto,
   ignorando o "color" normal do CSS — o valor salvo ficava parecendo cinza-claro/apagado, difícil
   de ler. Aplica a mesma cor "muted" já usada em texto secundário no resto do app (nem tão escuro
   quanto um campo editável, nem ilegível), de propósito, para ainda sinalizar "não editável".
   Vale para inputs/textareas/selects estilizados via classe (.field input) OU via estilo inline
   (dataFieldInputStyle em app.js, usado nos campos compactos de placa/RENAVAM/TAF/vistoria etc). */
input:disabled, textarea:disabled, select:disabled {
  opacity: 1;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}

/* Botão de câmera colado ao campo de Placa, na Consulta manual */
.input-with-action { display: flex; gap: 8px; }
.input-with-action input { flex: 1; min-width: 0; }
.input-with-action .icon-btn {
  flex-shrink: 0;
  background: var(--accent-grad);
  color: var(--white);
  border: none;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn--block { width: 100%; }
.btn--primary { background: var(--accent-grad); color: var(--white); }
.btn--ghost { background: var(--gray-100); color: var(--text); }
.btn--outline { background: transparent; color: var(--blue-600); border: 1.5px solid var(--blue-500); }
/* Botões de atalho da Central Administrativa — fundo em degradê azul (mesmas cores de
   --accent-grad, que não variam por tema), com texto branco no lugar do outline azul-sobre-cinza
   original: o cinza claro (--gray-100) virava um azul-marinho escuro no tema escuro, deixando o
   texto/borda azuis com contraste ruim (pedido do responsável do projeto, 18/08/2026). */
.central-admin-btn { background: var(--accent-grad); color: var(--white); border-color: transparent; }
.btn--danger { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
/* UX2 — tamanho COMPACTO reutilizável (antes existia só dentro de `.pat-doc-linha`, era no-op em
   qualquer outro lugar). Para grupos de ação contextuais dentro de um card, sem ocupar faixa. */
.btn--sm { padding: 8px 14px; font-size: 12.5px; font-weight: 600; gap: 6px; }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
/* UX2 — rodapé de ações DENTRO de um card, no mesmo contexto do conteúdo que edita. Alinhado à
   direita no desktop/tablet; quebra e ocupa a largura no mobile mais estreito (área de toque). */
.pat-card-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pat-card-actions .btn { flex: 0 1 auto; }
.pat-card-actions__hint { width: 100%; text-align: right; font-size: 11px; margin: 8px 2px 0; }
@media (max-width: 400px) {
  .pat-card-actions { justify-content: stretch; }
  .pat-card-actions .btn { flex: 1 1 auto; min-width: 44%; }
  .pat-card-actions__hint { text-align: left; }
}

/* ---------- Scanner ---------- */
.scanner-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  aspect-ratio: 3/4;
  max-height: 62vh;
}
#qr-reader { width: 100%; height: 100%; }
#qr-reader video { object-fit: cover; width: 100% !important; height: 100% !important; }
.scanner-frame__mask {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0 18%, transparent 18% 82%, rgba(0,0,0,.55) 82% 100%);
}
.scanner-frame__corner-box {
  position: absolute; inset: 15% 10%;
  border: 2.5px solid var(--blue-400);
  border-radius: 18px;
  pointer-events: none;
}
.scanner-frame__hint {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 12px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.scanner-controls {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 14px;
}
.scanner-controls .icon-btn {
  width: 52px; height: 52px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.scanner-controls .icon-btn[aria-pressed="true"] { background: var(--accent-grad); color: #fff; }

/* Variante retangular da moldura, usada na leitura de placa por OCR
   (a placa é bem mais larga que alta — diferente do QR, que é quadrado) */
.scanner-frame--plate { aspect-ratio: 4/3; max-height: 46vh; }
#plate-video { width: 100%; height: 100%; object-fit: cover; }
.scanner-frame__mask--plate {
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0 32%, transparent 32% 68%, rgba(0,0,0,.55) 68% 100%);
}
.scanner-frame__corner-box--plate { inset: 32% 8%; border-radius: 10px; }

.zoom-row { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.zoom-btn {
  min-width: 48px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--blue-500);
  background: transparent;
  color: var(--blue-600);
  font-weight: 600;
  font-size: 13px;
}
.zoom-btn--active { background: var(--accent-grad); color: var(--white); border-color: transparent; }

.suggestion-chip {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--blue-500);
  background: transparent;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 600;
}

/* ---------- Result ---------- */
.result-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 14px;
}
.result-alert--danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.result-alert--ok { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }

.data-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.data-row:last-child { border-bottom: none; }
.data-row__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.data-value { font-size: 16px; font-weight: 600; margin-top: 2px; word-break: break-all; }
.copy-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px; border: none;
  background: var(--gray-100); color: var(--blue-600);
  display: grid; place-items: center; cursor: pointer;
}
.copy-btn.is-copied { background: var(--success); color: #fff; }

/* ---------- Lists (histórico / favoritos) ---------- */
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
.list-item__badge {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--gray-100); color: var(--blue-600);
  flex-shrink: 0;
}
.list-item__main { flex: 1; min-width: 0; }
.list-item__plate { font-family: var(--font-data); font-weight: 700; font-size: 14px; }
.list-item__meta { font-size: 11px; color: var(--text-muted); }
.list-item__actions { display: flex; gap: 4px; }
.list-item__actions .icon-btn { width: 34px; height: 34px; }

.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.search-bar input { border: none; background: transparent; flex: 1; font-size: 14px; color: var(--text); outline: none; }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state__icon { font-size: 32px; margin-bottom: 8px; }
.empty-state__title { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.empty-state__desc { font-size: 13px; }

/* ---------- Stats ---------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; }
.stat-card__value { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.stat-card__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
/* Variante clicável — cards de atalho (Home + painel da Central de Dados) que levam a uma lista.
   Precisa "parecer botão" nos dois temas: uma seta "›" sempre visível na cor de acento
   (--accent = #2e86ff, forte também no escuro) + borda de acento + realce no hover. */
.stat-card--link { cursor: pointer; position: relative; padding-right: 26px; transition: background .15s, border-color .15s, transform .06s; }
.stat-card--link::after {
  content: "›"; position: absolute; top: 9px; right: 12px;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1;
  color: var(--accent);
}
.stat-card--link { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.stat-card--link:hover, .stat-card--link:active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent);
}
.stat-card--link:active { transform: scale(.985); }

/* ---------- Settings ---------- */
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row__label { font-size: 14px; font-weight: 600; }
.settings-row__desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.segmented {
  display: inline-flex; background: var(--gray-100); border-radius: 10px; padding: 3px;
}
.segmented button {
  border: none; background: transparent; padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer;
}
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

/* ---------- Bottom tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--tab-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.tabbar__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: none; background: transparent; color: var(--text-muted);
  font-size: 9.5px; font-weight: 600;
  padding: 0 2px;
  cursor: pointer;
}
.tabbar__item svg { width: 20px; height: 20px; }
.tabbar__item[aria-current="true"] { color: var(--blue-600); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-bottom) + 14px);
  transform: translateX(-50%) translateY(10px);
  background: var(--navy-900); color: #fff;
  padding: 10px 16px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
  max-width: 90vw;
  text-align: center;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }

/* =========================================================
   Módulo Ocorrências
   ========================================================= */

/* ---------- Filtros da lista de ocorrências ---------- */
.filter-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 14px;
}
.filter-row select,
.filter-row input[type="date"] {
  flex: 1 1 130px;
  min-width: 110px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  padding: 8px 10px;
}

/* ---------- Cartão de ocorrência ---------- */
.occ-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.occ-card:active { transform: scale(.99); }
.occ-card__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.occ-card__protocol {
  font-family: var(--font-data); font-size: 11px; color: var(--text-muted);
}
.occ-card__plate {
  font-family: var(--font-data); font-weight: 700; font-size: 17px; margin: 2px 0 4px;
}
.occ-card__meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; }
.occ-card__notes {
  font-size: 12.5px; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 8px;
}
.occ-card__footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Badges de situação / prioridade ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 100px;
  background: var(--gray-100); color: var(--text);
  white-space: nowrap;
}
.badge--priority-alta { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.badge--priority-media { background: color-mix(in srgb, #d8a400 16%, transparent); color: #8a6800; }
[data-theme="dark"] .badge--priority-media { color: #f0c65a; }
.badge--priority-baixa { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.badge--attachments { background: var(--gray-100); color: var(--text-muted); }

/* ---------- Modal ----------
   Removido em 10/08/2026 (auditoria de estabilidade): esta seção tinha uma implementação de
   modal antiga (padrão "bottom sheet", classes .modal-sheet/.modal-sheet__handle/@keyframes
   sheet-in) que não é mais usada em nenhum lugar do app (confirmado: zero ocorrências de
   "modal-sheet" em src/) — foi substituída pelo padrão .modal-overlay/.modal-card, hoje definido
   em taxi.css. A regra .modal-overlay que existia aqui (fundo mais claro, z-index 200,
   alinhamento no rodapé) também já não tinha efeito nenhum na tela: como taxi.css é carregado
   DEPOIS deste arquivo (ver <link> em index.html) e declara .modal-overlay de novo com os mesmos
   seletores, a versão de taxi.css (fundo mais escuro, z-index 999, centralizado) sempre vencia a
   cascata — um risco de manutenção (editar esta regra aqui não teria efeito algum, e inverter a
   ordem dos <link> quebraria todo o sistema de modais do app). A definição real e em uso continua
   em taxi.css — nada mudou visualmente, esta remoção só elimina a duplicata que não fazia nada. */

/* ---------- Formulário de ocorrência ---------- */
.form-group { margin-bottom: 16px; }
.form-group__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin-bottom: 8px; display: block;
}
.form-readonly-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 16px;
}
.form-readonly-grid .data-row__label { font-size: 10px; }
.form-readonly-grid .data-value { font-size: 13px; word-break: break-word; }
.form-readonly-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

textarea.form-textarea {
  width: 100%; min-height: 90px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: 14px; padding: 10px 12px;
}

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option {
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 100px; padding: 8px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; user-select: none;
}
.chip-option[aria-pressed="true"] { border-color: var(--blue-500); background: color-mix(in srgb, var(--blue-500) 12%, transparent); color: var(--blue-600); }
.chip-option--priority-alta[aria-pressed="true"] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.chip-option--priority-media[aria-pressed="true"] { border-color: #d8a400; background: color-mix(in srgb, #d8a400 16%, transparent); color: #8a6800; }
.chip-option--priority-baixa[aria-pressed="true"] { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }

/* ---------- Anexos / galeria de fotos ---------- */
.attach-row { display: flex; gap: 10px; margin-bottom: 12px; }
.attach-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px dashed var(--gray-300); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-muted);
  padding: 14px 8px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.attach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px;
}
.attach-thumb { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; background: var(--gray-100); }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-thumb__remove {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 100px;
  background: rgba(10,27,61,.65); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer;
}

/* ---------- Histórico de alterações ---------- */
.history-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.history-item:last-child { border-bottom: none; }
.history-item__meta { color: var(--text-muted); font-size: 10.5px; margin-bottom: 2px; }

/* ---------- Protocolo (chip destacado) ---------- */
.protocol-chip {
  display: inline-block; font-family: var(--font-data); font-size: 12px; font-weight: 700;
  background: var(--gray-100); color: var(--text); padding: 6px 12px; border-radius: var(--radius-sm);
  letter-spacing: .02em;
}

/* ---------- Painel de usuários (Administrador) ----------
   Correção de causa raiz do botão de excluir "sumindo" no iPhone: o
   layout antigo era um flex row único onde o <select> de perfil (texto
   longo, ex. "Administrador") e o nome/e-mail (sem truncar) podiam
   competir por espaço com os botões de ação — como os botões não
   tinham flex-shrink:0, o flexbox podia espremê-los até quase 0px de
   largura em telas estreitas ou quando o nome/e-mail era comprido.
   Agora: CSS Grid com a coluna de ações em tamanho fixo (nunca
   encolhe), texto truncado com "...", e em telas muito estreitas as
   ações quebram para uma segunda linha — nunca somem. */
.user-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.user-row:last-child { border-bottom: none; }
.user-row__info { min-width: 0; } /* permite ao texto truncar em vez de empurrar as ações */
.user-row__name {
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-row__status { flex-shrink: 0; font-size: 13px; }
.user-row__meta {
  font-size: 11px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-row__actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  grid-column: 2;
}
.user-row__actions .icon-btn {
  flex-shrink: 0; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.user-row select {
  flex-shrink: 0;
  width: 88px;
  font-size: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); padding: 4px 4px;
}
@media (max-width: 420px) {
  .user-row { grid-template-columns: 1fr; }
  .user-row__actions { grid-column: 1; justify-content: flex-start; flex-wrap: wrap; }
  .user-row select { width: auto; flex: 1 1 88px; }
}

/* ---------- Perfil "Consulta" (somente leitura) ---------- */
.chip-group--readonly .chip-option { pointer-events: none; opacity: .85; }

/* Removido em 10/08/2026 (auditoria de estabilidade): .camera-capture-overlay/-bar/-shutter era
   CSS morto — confirmado zero ocorrências em src/ (a captura de foto hoje usa <input type="file"
   accept="image/*" capture="environment">, nunca getUserMedia/<video> para fotos da Ficha — o
   único uso real de getUserMedia no projeto é o leitor de QR Code, que tem sua própria UI). */
.user-row__inactive-tag { font-weight: 400; font-size: 11px; color: var(--danger); }

/* ---------- Card "Meu perfil" (Ajustes) — cabeçalho estilo WhatsApp: avatar grande centralizado
   + link "Editar/Remover foto" abaixo, em vez do avatar pequeno alinhado à esquerda de antes. ---------- */
.profile-header {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0 16px;
}
.profile-header__name { font-weight: 700; font-size: 16px; text-align: center; }
.profile-header__links { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.profile-header__link {
  background: none; border: none; color: var(--blue-600); font-size: 13.5px; font-weight: 600;
  cursor: pointer; padding: 4px 2px; -webkit-tap-highlight-color: transparent;
}
.profile-header__link--danger { color: var(--danger); }

/* ---------- Alerta: veículo já fiscalizado por outro auditor ---------- */
.cross-alert {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 4px;
}
.cross-alert__title {
  font-size: 13px; font-weight: 700; color: var(--danger);
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.cross-alert__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 6px; cursor: pointer;
}
.cross-alert__item:last-child { margin-bottom: 0; }
.cross-alert__item-main { min-width: 0; }
.cross-alert__protocol { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); }
.cross-alert__meta { font-size: 12px; }
.cross-alert__meta b { font-weight: 700; }

/* ---------- BAFis (Boletim de Auditoria Fiscal) ---------- */
/* Data inicial/final lado a lado no desktop, mas quebrando para uma coluna em telas estreitas
   (mobile) — evita o texto do input[type=date] (ex.: "8 de ago. de 2026") sendo cortado. */
.bafis-date-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bafis-date-row .field { flex: 1 1 150px; min-width: 0; margin-bottom: 0; }
/* Fundo var(--bg) — o mesmo usado em todo campo de texto do app (ver ".field input, .field
   select" acima) — é o que dá contraste contra o CARD branco em que este campo fica. Um fundo
   var(--surface) (branco) aqui ficava idêntico ao do card ao redor, fazendo os dois campos lado a
   lado parecerem "grudados"/sobrepostos um no outro. */
.bafis-date-row .date-input-wrap { position: relative; }
.bafis-date-row .date-input-wrap input[type="date"] {
  width: 100%; font-size: 13px; padding: 10px 8px; background: var(--bg);
}
.bafis-date-row .date-input-hint {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-data); font-size: 13px; color: var(--text-muted);
  pointer-events: none; /* clique passa direto para o input por baixo */
}
/* Chrome/Safari/Firefox desktop (diferente do Safari no iPhone) já desenham seu PRÓPRIO texto de
   formato ("dd/mm/aaaa"/"mm/dd/yyyy", cinza) dentro do input[type=date] vazio — sobrepondo o nosso
   ".date-input-hint" e duplicando/embaralhando o texto visualmente. #f-*.is-empty (classe
   alternada via JS em renderBafisFiltros, a cada 'change' e no carregamento inicial) torna
   transparente esse texto nativo enquanto vazio, deixando nosso hint como a ÚNICA indicação
   visível em qualquer motor — e sem mexer no texto real assim que uma data é escolhida (a classe
   sai do input no 'change', então o valor preenchido volta a aparecer normalmente).
   A regra `color: transparent` direto no input (sem prefixo) é a que cobre Firefox — que não tem
   um equivalente aos pseudo-elementos ::-webkit-datetime-edit-* e por isso ainda mostrava o texto
   nativo por cima do nosso hint mesmo com as regras abaixo (bug real reportado, 24/09/2026). As
   regras ::-webkit-datetime-edit-* continuam aqui como reforço só para Chrome/Safari (caso algum
   dia dependam de algo além de `color` para desenhar esses segmentos). */
.bafis-date-row .date-input-wrap input[type="date"].is-empty {
  color: transparent;
}
.bafis-date-row .date-input-wrap input[type="date"].is-empty::-webkit-datetime-edit-text,
.bafis-date-row .date-input-wrap input[type="date"].is-empty::-webkit-datetime-edit-month-field,
.bafis-date-row .date-input-wrap input[type="date"].is-empty::-webkit-datetime-edit-day-field,
.bafis-date-row .date-input-wrap input[type="date"].is-empty::-webkit-datetime-edit-year-field {
  color: transparent;
}
@media (max-width: 480px) {
  /* Empilha os dois campos de data numa coluna só (em vez de deixá-los tentar caber lado a lado
     e ficarem espremidos/quase colados em telas de celular) — flex-direction:column garante a
     pilha de forma explícita, com o "gap" do container funcionando como espaço vertical entre
     os dois, sem depender de wrap+basis calculando certo em toda largura de aparelho. */
  .bafis-date-row { flex-direction: column; gap: 16px; }
  .bafis-date-row .field { flex-basis: auto; width: 100%; }
}

.bafis-table-wrap { overflow-x: auto; }
.bafis-table-wrap table th { font-weight: 700; }
.bafis-table-wrap table td { font-weight: 400; }
/* Observações: em vez de deixar a tabela toda rolar de lado por causa de um texto longo, a
   célula fica truncada com reticências e clicável — o texto completo abre num modal (padrão
   .modal-overlay/.modal-card do app). */
.bafis-obs-cell {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* S3-B — controles de toque e texto longo em telas estreitas. S3-C1-B (13/09/2026) — os
   formulários saíram de dentro de `.s3-diligencias` para folhas inferiores (`.sheet-overlay`,
   fora desta raiz — ver PatDiligenciasController.js/taxi.css ".s3-editor"), então as regras de
   input/select/textarea/fieldset escopadas aqui deixaram de ter elemento a estilizar; removidas
   junto com `.s3-grid`/`.s3-acao` (o grid de 4 campos comprimidos e o `<details>` que este
   redesenho elimina). O que continua vivo (cards/botões dentro da lista) permanece. */
.s3-diligencias { min-width: 0; overflow-wrap: anywhere; }
.s3-diligencias .btn-row { display:flex; flex-wrap:wrap; gap:8px; }
.s3-diligencias .btn, .s3-qa { min-height:44px; padding:10px; }
.s3-qa { display:flex; align-items:center; gap:8px; }
.s3-editor { margin-top:16px; }