/* taxi.css — extensões de estilo específicas do módulo Táxi, sobre os tokens do style.css */

/* Desliga a auto-inflação de fonte do WebKit/Safari (iOS inclusive). Sem risco na tela — o app
   tem viewport fixo (maximum-scale=1) — e é o que garante que a impressão da Ficha (folha de
   186mm, mais larga que o viewport do iPhone) não tenha texto inflado só no iOS, o que mudaria
   a paginação. Ver também o bloco @media print, mais abaixo. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.view-title { font-size: 18px; margin-bottom: 12px; }

/* ---------- Resultado de pesquisa ---------- */
.result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.result-item:last-child { border-bottom: none; }
.result-item__status { font-size: 20px; line-height: 1; flex-shrink: 0; }
.result-item__main { flex: 1; min-width: 0; }
.result-item__plate { font-family: var(--font-data); font-weight: 700; font-size: 14px; }
.result-item__name { font-size: 13px; color: var(--text); }
.result-item__meta { font-size: 11px; color: var(--text-muted); }
.result-item__warning {
  font-size: 11px; font-weight: 700; color: var(--danger); margin-top: 2px;
}
/* Prompt 8 (24/08/2026) — "Autorização INVENTÁRIO": classificação administrativa, não uma
   irregularidade (ao contrário de CASSADA, acima) — tom âmbar "soft", já usado em .alert-banner
   --soft/.status-pill--vence_em_breve para "atenção, mas não crítico", nunca a cor de --danger. */
.result-item__notice {
  font-size: 11px; font-weight: 700; margin-top: 2px;
  color: #8a6800;
}
[data-theme="dark"] .result-item__notice { color: #f0c65a; }
.result-item__chevron { color: var(--text-muted); flex-shrink: 0; }

/* ---------- Status badge ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 100px; font-size: 12.5px; font-weight: 700;
  background: var(--gray-100); color: var(--text);
}
.status-pill--vigente { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.status-pill--vence_em_breve { background: color-mix(in srgb, #d8a400 18%, transparent); color: #8a6800; }
[data-theme="dark"] .status-pill--vence_em_breve { color: #f0c65a; }
.status-pill--vencida { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.status-pill--sem_vistoria { background: var(--gray-300); color: var(--navy-900); }
[data-theme="dark"] .status-pill--sem_vistoria { background: #2a3550; color: #eef2f9; }
.status-pill--indefinido { background: var(--gray-100); color: var(--text-muted); }
/* Situações CALCULADAS pela Lei nº 7.748/2025 (veículos de 0 a 4 anos) — ver VistoriaRule.js */
.status-pill--isento_0a4 { background: color-mix(in srgb, var(--blue-500) 16%, transparent); color: var(--blue-600); }
.status-pill--apresentacao_troca_pendente { background: color-mix(in srgb, #d8681f 16%, transparent); color: #d8681f; }
[data-theme="dark"] .status-pill--apresentacao_troca_pendente { color: #f0954a; }
.status-pill--apresentacao_troca_indeterminada { background: var(--gray-100); color: var(--text-muted); }
.status-pill--indeterminado_idade { background: var(--gray-100); color: var(--text-muted); }
.status-pill--divergencia_cadastral { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.status-pill--advertencia { background: color-mix(in srgb, #d8681f 16%, transparent); color: #d8681f; }
[data-theme="dark"] .status-pill--advertencia { color: #f0954a; }
.status-pill--taf { background: color-mix(in srgb, #2e86ff 16%, transparent); color: #2e86ff; }
[data-theme="dark"] .status-pill--taf { color: #6faaff; }
.status-pill--cancelada { background: var(--gray-300); color: var(--navy-900); }
[data-theme="dark"] .status-pill--cancelada { background: #2a3550; color: #b8c2d9; }
/* PAT · Prazos do PAT (P7.2-D) — estado DERIVADO do prazo. Mesmos tokens semânticos acima. */
.status-pill--prazo-aguardando { background: var(--gray-100); color: var(--text-muted); }
.status-pill--prazo-estimado { background: color-mix(in srgb, var(--blue-500) 14%, transparent); color: var(--blue-600); }
[data-theme="dark"] .status-pill--prazo-estimado { color: #6faaff; }
.status-pill--prazo-avencer { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.status-pill--prazo-vencehoje { background: color-mix(in srgb, #d8a400 18%, transparent); color: #8a6800; }
[data-theme="dark"] .status-pill--prazo-vencehoje { color: #f0c65a; }
.status-pill--prazo-vencido { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.status-pill--prazo-cumprido { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.status-pill--prazo-cancelado { background: var(--gray-300); color: var(--navy-900); }
[data-theme="dark"] .status-pill--prazo-cancelado { background: #2a3550; color: #b8c2d9; }
/* Linha de vencimento no card do prazo — OFICIAL x ESTIMATIVA x AGUARDANDO, visualmente distintos. */
.prazo-venc--oficial { color: var(--success); font-weight: 600; }
.prazo-venc--estimado { color: var(--blue-600); }
[data-theme="dark"] .prazo-venc--estimado { color: #6faaff; }
.prazo-venc--aguardando { color: var(--text-muted); font-style: italic; }
/* Níveis de prioridade — 🧠 Inteligência de Auditoria Fiscal (IntelligenceRule.js) — mesmos
   tokens de cor de vigente/vence_em_breve/vencida acima, por consistência semântica. */
.status-pill--baixa { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.status-pill--media { background: color-mix(in srgb, #d8a400 18%, transparent); color: #8a6800; }
[data-theme="dark"] .status-pill--media { color: #f0c65a; }
.status-pill--alta { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
/* Condição especial — autorização não vigente (Cassada/Renunciada/Revertida ao Estado; ADR-23).
   NÃO é uma quarta faixa de pontuação: é uma categoria de interpretação (sem índice 0–100). */
.status-pill--condicao_especial { background: color-mix(in srgb, #d8681f 16%, transparent); color: #d8681f; }
[data-theme="dark"] .status-pill--condicao_especial { color: #f0954a; }

/* ---------- Alertas ---------- */
/* display:block (não flex) de propósito: várias chamadas colocam texto misturado com elementos
   inline no meio (ex.: "...fiscalização <em>in loco</em>. Ver observação...", ou um "<br>" seguido
   de um "<span>" — ver seloLeiBannerHtml/renderTaxiDetail em app.js). Num container flex, cada
   trecho de texto ao redor de um elemento filho vira um "anonymous flex item" SEPARADO — o texto
   antes do <em>, o próprio <em>, e o texto depois viravam 3 itens lado a lado (flex-direction
   padrão é row) em vez de um único parágrafo corrido, fazendo a frase se partir em colunas
   desproporcionais com pedaços "flutuando" isolados. Como nenhum uso atual de .alert-banner
   depende de um layout lado-a-lado (ícone é sempre o primeiro caractere do próprio texto, nunca
   um elemento separado), display:block resolve sem mudar a aparência de nenhum alerta existente.
*/
.alert-banner {
  display: block;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  margin-bottom: 8px;
}
.alert-banner--soft {
  background: color-mix(in srgb, #d8a400 14%, transparent); color: #8a6800;
}
[data-theme="dark"] .alert-banner--soft { color: #f0c65a; }
/* Prompt 8 (24/08/2026) — estado "resolvido/positivo" (ex.: divergência cadastral já CORRIGIDA em
   fiscalização), distinto de --soft (atenção/neutro) e do tom padrão (--danger/pendência) — mesmo
   token --success já usado em .result-alert--ok, nunca reaproveita a cor de --soft/--danger para
   não sugerir pendência onde já não há mais nenhuma. */
.alert-banner--success {
  background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success);
}

/* ---------- Grid de dados (ficha do veículo) ---------- */
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.data-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.data-grid + .data-grid { margin-top: 12px; }
.data-grid__item { }
.data-grid__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.data-grid__value { font-family: var(--font-data); font-size: 14px; font-weight: 600; margin-top: 2px; word-break: break-word; }

/* ---------- Usuários — painel-resumo de cargos (M1.1, 24/09/2026) ----------
   Grade que se ajusta sozinha (auto-fit) — em 375px quebra em 2-3 colunas sem overflow nem fonte
   reduzida; a partir de 560px os 5 cards cabem numa linha só. Mesmo vocabulário de "selecionado"
   já usado em .chip.is-active/.infraction-item.is-selected (--blue-500/--blue-600 + color-mix),
   nunca só cor: o card ativo também tem borda mais grossa. */
.usr-cargo-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 8px; margin: 12px 0; }
.usr-cargo-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px; padding: 8px 4px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent;
}
.usr-cargo-card__valor { font-family: var(--font-data); font-size: 18px; font-weight: 700; line-height: 1; color: var(--text); }
.usr-cargo-card__label { font-size: 10.5px; line-height: 1.2; color: var(--text-muted); }
.usr-cargo-card.is-active { border-width: 2px; border-color: var(--blue-500); background: color-mix(in srgb, var(--blue-500) 8%, var(--surface)); }
.usr-cargo-card.is-active .usr-cargo-card__valor { color: var(--blue-600); }
.usr-cargo-card.is-active .usr-cargo-card__label { color: var(--blue-600); }
@media (min-width: 560px) { .usr-cargo-panel { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Ficha Unificada da Autorização (PROMPT 27 / FASE 3) ----------
   Só aparência — reutiliza .card/.section-block/.kv-row/.data-grid/.status-pill/.dc-source.
   Nada aqui afeta outras telas. */
#view-taxi-detail { max-width: 720px; }
@media (min-width: 1024px) { #view-taxi-detail { max-width: 960px; } }
@media (min-width: 1440px) { #view-taxi-detail { max-width: 1040px; } }
/* Autorizatário + Veículo lado a lado quando há espaço; 1 coluna no celular/tablet retrato. */
.ficha-cols { display: contents; }
@media (min-width: 900px) {
  .ficha-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
}
/* Seção de dados pessoais restritos — sempre visualmente destacada como "área protegida". */
.ficha-restrito { border-left: 3px solid color-mix(in srgb, var(--danger) 42%, transparent); }

/* ---------- Checklist ---------- */
.checklist-group {
  margin-bottom: 14px; padding: 4px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--gray-50);
}
.checklist-group:last-child { margin-bottom: 0; }
[data-theme="dark"] .checklist-group { background: var(--gray-100); }
.checklist-group__title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--blue-600); padding: 10px 0 8px; border-bottom: 1.5px solid var(--border);
}
.checklist-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.checklist-row:last-child { border-bottom: none; }
.checklist-row__label { font-size: 13.5px; flex: 1; min-width: 0; }
.checklist-toggle { display: flex; gap: 4px; flex-shrink: 0; }
.checklist-toggle button {
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted);
  font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  min-width: 42px;
}
.checklist-toggle button.is-ok { background: color-mix(in srgb, var(--success) 16%, transparent); border-color: var(--success); color: var(--success); }
.checklist-toggle button.is-fail { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); color: var(--danger); }
.checklist-toggle button.is-na { background: color-mix(in srgb, var(--text-muted) 16%, transparent); border-color: var(--text-muted); color: var(--text-muted); }

/* Contador "X de Y itens verificados" + barra, no topo do card Checklist da Fiscalização. */
.checklist-progress__bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 6px; }
.checklist-progress__fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .2s; }

/* Leve destaque para o card do Autorizatário (pedido de 15/08/2026) — mesma estrutura de .card,
   só com uma borda de acento à esquerda para se diferenciar visualmente na rolagem da ficha. */
.card--accent { border-left: 3px solid var(--accent); border-right: 3px solid var(--accent); }

/* Ícone "?" ao lado de um rótulo — mostra um exemplo/dica num toast ao ser tocado (ver
   helpIconHtml em app.js). */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; padding: 0;
  border: 1.5px solid var(--text-muted); background: transparent; color: var(--text-muted);
  font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle;
}

/* ---------- Achados / Irregularidades ---------- */
.achado-card {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--gray-50);
  padding: 12px 14px; margin-bottom: 10px;
}
[data-theme="dark"] .achado-card { background: var(--gray-100); }
.achado-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.achado-card__title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.achado-card__meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.achado-card__body { margin-top: 10px; }
.achado-card__body .field { margin-bottom: 10px; }

/* ---------- Seletor de infrações ---------- */
.infraction-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: pointer;
}
.infraction-item.is-selected { border-color: var(--blue-500); background: color-mix(in srgb, var(--blue-500) 6%, transparent); }
.infraction-item__code { font-family: var(--font-data); font-weight: 700; font-size: 13px; flex-shrink: 0; width: 42px; }
.infraction-item__body { flex: 1; min-width: 0; }
.infraction-item__desc { font-size: 13.5px; }
.infraction-item__group { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
.group-tag { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; }
.group-tag--A { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.group-tag--B { background: color-mix(in srgb, #d8a400 16%, transparent); color: #8a6800; }
[data-theme="dark"] .group-tag--B { color: #f0c65a; }
.group-tag--C { background: color-mix(in srgb, #d8681f 16%, transparent); color: #b1520f; }
[data-theme="dark"] .group-tag--C { color: #f3a869; }
.group-tag--D { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }

.selected-infractions-bar {
  position: sticky; bottom: calc(var(--tab-h) + var(--safe-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 10px 14px; display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 700;
}

/* ---------- Fotos ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.photo-slot-wrap { display: flex; flex-direction: column; gap: 3px; }
.photo-slot-label {
  font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-slot {
  aspect-ratio: 1; border-radius: var(--radius-sm); border: 1.5px dashed var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-muted); position: relative; overflow: hidden; cursor: pointer;
  background: var(--gray-50);
  transition: border-color .15s ease, background-color .15s ease;
}
[data-theme="dark"] .photo-slot { background: var(--gray-100); }
/* Combinador de filho direto (10/08/2026, corrigindo bug real: a marca d'água em foto do slot
   Taxímetro — .photo-slot__watermark-img, um NETO de .photo-slot — estava sendo pega por engano
   por este seletor genérico de qualquer <img> descendente, e como esta regra tem mais
   especificidade e usa position:absolute+width/height:100%+object-fit:cover, ela vencia e
   deixava a marca d'água esticada cobrindo o quadro inteiro, cortada e por cima do texto, em vez
   de pequena e centralizada. O <img> de uma foto DE VERDADE já anexada é sempre filho direto de
   .photo-slot (ver drawPhotos() em app.js) — o filho direto (>) restringe a regra só a esse
   caso, sem afetar a marca d'água. */
.photo-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Marca d'água decorativa dentro dos quadros ainda vazios (guia o que anexar em cada um — ver
   PHOTO_SLOT_WATERMARK em app.js). pointer-events:none garante que o clique de upload continue
   funcionando em toda a área do quadro, não só fora do ícone/texto. */
.photo-slot__watermark {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding: 6px; text-align: center;
  opacity: .38; pointer-events: none; transition: opacity .15s ease;
}
.photo-slot__watermark-icon { font-size: 24px; line-height: 1; }
/* Variante com foto própria em vez de emoji (ex.: slot Taxímetro, ver PHOTO_SLOT_WATERMARK em
   app.js) — mesmo tratamento esmaecido do container pai, só limitando o tamanho pra caber no
   quadro junto com o texto abaixo. */
.photo-slot__watermark-img { max-width: 60%; max-height: 55%; object-fit: contain; }
.photo-slot__watermark-text {
  font-size: 8.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); line-height: 1.15;
}
.photo-slot:hover {
  border-color: var(--blue-500); background: color-mix(in srgb, var(--blue-500) 8%, var(--bg));
}
.photo-slot:hover .photo-slot__watermark { opacity: .6; }
.photo-slot__remove {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none; font-size: 12px; line-height: 1; cursor: pointer;
}
.photo-slot__pdf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 4px; text-align: center; font-size: 20px;
}
.photo-slot__pdf span {
  font-size: 9px; color: var(--text-muted); word-break: break-all; line-height: 1.2; max-height: 2.4em; overflow: hidden;
}

/* ---------- Visualizador de foto/PDF em tela cheia (toque num slot já preenchido) ----------
   Desde 09/08/2026, galeria navegável (swipe/setas) entre todos os anexos da ficha — ver
   openPhotoViewer() em app.js. */
/* touch-action:none no overlay inteiro (10/08/2026 — corrige bug real relatado em campo: um
   pinça/duplo-toque durante o swipe disparava o ZOOM NATIVO do navegador na página inteira, que
   ficava preso ampliado sem voltar ao tamanho normal, e o próprio swipe não navegava — o
   navegador estava "roubando" o gesto para pan/zoom nativo antes do JS conseguir tratá-lo. A
   suposição anterior de que maximum-scale=1 no <meta viewport> bastava para travar o pinch-zoom
   era falsa: vários navegadores móveis (inclusive Chrome/Android) ignoram isso por acessibilidade
   — touch-action:none é a forma que realmente funciona, e entrega o toque inteiro para o JS. */
.photo-viewer-overlay { background: rgba(4, 8, 18, .92); padding: 14px; z-index: 1500; touch-action: none; }
.photo-viewer { width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; gap: 12px; }
.photo-viewer__topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.photo-viewer__counter {
  color: #dbe6ff; font-size: 12.5px; font-weight: 600; padding: 4px 2px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-viewer__close {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); color: #fff; font-size: 16px; cursor: pointer;
}
.photo-viewer__body {
  position: relative; flex: 1; min-height: 0; display: flex;
  background: rgba(255,255,255,.04); border-radius: var(--radius-lg); overflow: hidden;
}
/* .photo-viewer__viewport é a área que capta o gesto de swipe. touch-action:none (corrigido em
   10/08/2026 — era pan-y antes, o que permitia o navegador tratar o arrasto como rolagem/pinça
   nativa e "roubar" o gesto do JS, ver comentário em .photo-viewer-overlay acima): não há rolagem
   vertical de verdade dentro do visualizador (a foto usa object-fit:contain, sem overflow), então
   entregar 100% do toque para o JS não perde nada — as setas ‹ › ficam FORA dela, sobrepostas via
   position:absolute, propositalmente numa área separada do gesto de arrastar (pedido explícito:
   controles não podem ficar na mesma área usada para o swipe). */
.photo-viewer__viewport { flex: 1; min-width: 0; overflow: hidden; touch-action: none; }
.photo-viewer__track { display: flex; width: 300%; height: 100%; }
.photo-viewer__slide {
  flex: 0 0 33.3334%; min-width: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 0 10px;
}
/* pointer-events:none na própria <img>: sem isso, o navegador tenta iniciar o "arrastar imagem"
   nativo (ghost/drag-and-drop de imagem) a partir do toque na foto, brigando com o gesto de
   swipe — com isto, o toque atravessa direto para .photo-viewer__viewport (onde o swipe é
   tratado), que é o comportamento desejado. */
.photo-viewer__slide img { max-width: 100%; max-height: 78vh; object-fit: contain; pointer-events: none; }
.photo-viewer__pdf-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #eaf1ff; font-size: 52px; padding: 40px 16px; text-align: center;
}
.photo-viewer__pdf-placeholder span { font-size: 13px; color: #a9b6cf; word-break: break-all; }
.photo-viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.4); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.photo-viewer__nav--prev { left: 6px; }
.photo-viewer__nav--next { right: 6px; }

/* Botões "Abrir PDF"/"Compartilhar" do visualizador: .btn--outline (style.css) é
   background:transparent, ilegível sobre o overlay escuro (rgba(4,8,18,.92)) — bug real
   reportado 16/08/2026. Fundo sólido suave + texto claro só aqui, dentro do visualizador. */
.photo-viewer .btn--outline {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #eaf1ff;
}
.photo-viewer .btn--outline:active { background: rgba(255,255,255,.22); }

/* ---------- Barra de progresso (importação) ---------- */
.progress-track { height: 8px; background: var(--gray-100); border-radius: 100px; overflow: hidden; margin: 10px 0; }
.progress-fill { height: 100%; background: var(--accent-grad); transition: width .2s ease; border-radius: 100px; }

/* ---------- Checklist doc chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
  padding: 6px 12px; border-radius: 100px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.chip.is-active { border-color: var(--blue-500); color: var(--blue-600); background: color-mix(in srgb, var(--blue-500) 8%, transparent); }

/* ---------- Prioridade fiscal ---------- */
.priority-meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.priority-meter__bar { flex: 1; height: 10px; border-radius: 100px; background: var(--gray-100); overflow: hidden; }
.priority-meter__fill { height: 100%; border-radius: 100px; }
.priority-meter__fill.baixa { background: var(--success); }
.priority-meter__fill.media { background: #d8a400; }
.priority-meter__fill.alta { background: var(--danger); }

textarea.field-textarea {
  width: 100%; min-height: 110px; padding: 12px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 14px; resize: vertical;
  /* -webkit-text-fill-color + opacity:1 — ver comentário equivalente em dataFieldInputStyle
     (app.js): sem isso o Safari desenha o texto com opacidade própria reduzida, ignorando o
     "color" do CSS, deixando o conteúdo digitado parecendo cinza-claro/apagado. */
  -webkit-text-fill-color: var(--text); opacity: 1;
}

.section-block { margin-bottom: 22px; }

.kv-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.kv-row:last-child { border-bottom: none; }
.kv-row__label { color: var(--text-muted); }
.kv-row__value { font-weight: 600; text-align: right; }

/* Variante do .kv-row usada só no card "Meu perfil" (Ajustes) — pedido do responsável do
   projeto, 09/08/2026: o "justify-content: space-between" do .kv-row padrão (usado em todo o
   resto do app, não mexer) empurra o rótulo pro extremo esquerdo e o valor pro extremo direito do
   card, deixando um vão enorme no meio quando o valor é curto (ex.: "Turno" / "—"). Aqui o rótulo
   fica com largura fixa e o valor começa logo em seguida, alinhado à esquerda — visual de lista de
   formulário, sem vão exagerado, independente do quanto o valor for curto ou comprido. */
.kv-row--compact { justify-content: flex-start; gap: 10px; }
.kv-row--compact .kv-row__label { flex: 0 0 108px; }
.kv-row--compact .kv-row__value { flex: 1; min-width: 0; text-align: left; }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- Switch (toggle) ---------- */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; }
.switch::before {
  content: ''; position: absolute; inset: 0; background: var(--gray-300);
  border-radius: 100px; transition: background .15s ease; pointer-events: none;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: var(--shadow-1); pointer-events: none;
}
.switch:has(input:checked)::before { background: var(--blue-500); }
.switch:has(input:checked)::after { transform: translateX(18px); }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }

/* ---------- Banner "Táxi" do cabeçalho ----------
   Duas colunas (logo | táxi), cada uma com uma legenda pequena embaixo (Fiscalização /
   SEMOB-SUFISA). A logo usa um ícone recortado (só o símbolo, assets/img/logo-icon.png) + o
   texto "AFAU Digital" real (não é mais a imagem inteira da marca esticada/achatada em 26px de
   altura — texto real nunca fica borrado ao encolher). `overflow:hidden` + `min-width:0` no
   badge é a proteção contra o bug de sobreposição no Topbar em telas estreitas (ver .topbar
   abaixo): se não houver espaço suficiente, o conteúdo é cortado dentro do próprio badge, nunca
   invade os ícones ao lado. */
.taxi-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 4px 10px 4px 7px;
  box-shadow: var(--shadow-1);
  min-width: 0; overflow: hidden;
}
.taxi-badge__col { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; overflow: hidden; }
.taxi-badge__logo-row, .taxi-badge__taxi-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.taxi-badge__logo-icon { height: 20px; width: 20px; object-fit: contain; display: block; flex-shrink: 0; }
/* Bloco só do TEXTO da logo (sem o ícone) — a linha e "SEMOB/SUFISA" ficam do tamanho de "AFAU
   Digital" (o mais largo dos dois) e alinhados com ele, nunca com o ícone ao lado. */
.taxi-badge__logo-text { display: flex; flex-direction: column; min-width: 0; }
.taxi-badge__wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.1;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.taxi-badge__wordmark b { color: var(--blue-500); font-weight: 700; }
/* Linha "laser" entre "AFAU Digital" e "SEMOB/SUFISA" — mesmo azul de "Digital" (var(--blue-500)),
   com um leve brilho (box-shadow) pra lembrar um feixe de luz, no mesmo espírito do
   .circuit-divider já usado em outras telas do app. width:100% do .taxi-badge__logo-text (não do
   ícone) — começa exatamente no "A" de AFAU, nunca antes dele. */
.taxi-badge__logo-rule {
  display: block; width: 100%; height: 1.5px; margin: 2px 0 1px;
  background: var(--blue-500);
  box-shadow: 0 0 3px 0 color-mix(in srgb, var(--blue-500) 65%, transparent);
  border-radius: 1px;
}
.taxi-badge__caption {
  font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "SEMOB/SUFISA" (única legenda que sobrou, embaixo de "AFAU Digital") em preto/texto principal
   (não mais cinza) e centralizada em relação à largura de "AFAU Digital" — a pedido do usuário. */
.taxi-badge__caption--dark { color: var(--text); text-align: center; }
.taxi-badge__divider { width: 1.5px; height: 24px; background: var(--border); flex-shrink: 0; }
.taxi-badge__icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-grad); color: #fff; flex-shrink: 0;
}
.taxi-badge__icon svg { width: 13px; height: 13px; }
.taxi-badge__text {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; color: var(--text); white-space: nowrap;
}
/* Telas bem estreitas (ver .sync-indicator em style.css para o mesmo raciocínio aplicado ao
   indicador de sincronização): a coluna Táxi some primeiro (o essencial — "AFAU Digital" — nunca
   some), reaproveitando o espaço para os ícones de ação, que precisam continuar 100% clicáveis. */
@media (max-width: 420px) {
  .taxi-badge__col--taxi, .taxi-badge__divider { display: none; }
  .taxi-badge { padding: 3px 8px 3px 5px; }
  .taxi-badge__logo-icon { width: 17px; height: 17px; }
  .taxi-badge__wordmark { font-size: 12px; }
}
@media (max-width: 480px) {
  .taxi-badge__caption { display: none; }
}

/* ---------- Telas de autenticação ---------- */
.auth-view { display: none; padding: 0; }
.auth-view.is-active { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 18px; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 28px 22px;
}
.auth-card__logo { height: 52px; display: block; margin: 0 auto 16px; }
.auth-card__title { font-size: 19px; text-align: center; margin-bottom: 6px; }
.auth-card__subtitle { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 18px; line-height: 1.5; }
.text-accent { color: var(--blue-500); }
.auth-card__link {
  display: block; width: 100%; text-align: center; background: none; border: none;
  color: var(--blue-600); font-size: 12.5px; font-weight: 600; margin-top: 14px;
  cursor: pointer; padding: 4px;
}

body:not(.is-authenticated) .topbar,
body:not(.is-authenticated) .tabbar { display: none; }
body.is-authenticated .auth-view.is-active { display: none; }

/* ---------- Lista/ficha de usuários ---------- */
.user-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.user-item:last-child { border-bottom: none; }
.user-item__avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent-grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
  overflow: hidden; /* clipa a <img> da foto de perfil (Meu Perfil) às bordas arredondadas */
}
.user-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-item__main { flex: 1; min-width: 0; }
.user-item__line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.user-item__name { font-size: 14px; font-weight: 600; }
.user-item__status { font-size: 11px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.user-item__status--inactive { color: var(--danger); }
.user-item__meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.user-item.is-inactive { opacity: .55; }

/* ---------- Campo de senha com mostrar/ocultar ---------- */
.password-field { position: relative; }
.password-field input { padding-right: 42px; width: 100%; box-sizing: border-box; }
.password-field__toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; background: transparent; cursor: pointer;
  font-size: 16px; color: var(--text-muted); display: flex; align-items: center; justify-content: center;
}

/* ---------- Checklist de regras de senha ---------- */
.password-rules { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.password-rules li { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.password-rules li.is-ok { color: var(--success); }
.password-rules li .rule-icon { font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; }

/* ---------- Medidor de força de senha ---------- */
.password-strength { margin-top: 10px; }
.password-strength__track { display: flex; gap: 3px; margin-bottom: 4px; }
.password-strength__seg { flex: 1; height: 6px; border-radius: 4px; background: var(--gray-100); }
.password-strength__seg.is-fraca { background: var(--danger); }
.password-strength__seg.is-media { background: #d8a400; }
.password-strength__seg.is-forte { background: var(--success); }
.password-strength__label { font-size: 11.5px; font-weight: 700; }
.password-strength__label.is-fraca { color: var(--danger); }
.password-strength__label.is-media { color: #8a6800; }
[data-theme="dark"] .password-strength__label.is-media { color: #f0c65a; }
.password-strength__label.is-forte { color: var(--success); }

/* ---------- Indicador "senhas coincidem" ---------- */
.password-match { font-size: 12px; font-weight: 600; margin-top: 6px; min-height: 15px; }
.password-match.is-ok { color: var(--success); }
.password-match.is-fail { color: var(--danger); }

/* ---------- Modal overlay genérico ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(6, 12, 26, .62);
  display: flex; align-items: center; justify-content: center; z-index: 999; padding: 18px;
}
.modal-card {
  width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); padding: 20px;
}
.modal-card__title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

/* ---------- Folha inferior (bottom sheet) — seção 7.2 do refinamento de Apurações, 19/08/2026:
   "+ Adicionar envolvido"/"+ Adicionar documento"/"+ Registrar diligência" passam do modal
   centralizado genérico (.modal-overlay/.modal-card, acima) pra uma folha que desliza do fundo da
   tela — mesmo padrão do mockup de referência do módulo. Variante NOVA e sozinha, não uma
   alteração de .modal-overlay/.modal-card (que continuam do jeito que sempre foram, usados em
   todo o resto do app) — só os 3 pontos de chamada acima trocam de classe. */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(6, 12, 26, .62);
  display: flex; align-items: flex-end; justify-content: center; z-index: 999;
}
.sheet-card {
  width: 100%; max-width: 430px; max-height: 85vh; overflow-y: auto;
  background: var(--surface); border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 50px -10px rgba(16, 24, 51, .3);
  padding: 20px 18px 24px;
}
.sheet-card__title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--text); }

/* ---------- Bloqueio de sessão por inatividade (sempre por cima de qualquer outro modal) ---------- */
.modal-overlay--lock { z-index: 2000; background: rgba(6, 12, 26, .86); }
.lock-card { width: 100%; max-width: 380px; }

/* ---------- Aviso: veículo já fiscalizado por outro auditor ---------- */
.warn-card {
  width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto;
  background: #10192f; border: 1.5px solid var(--danger); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); padding: 20px; color: #eaf1ff;
}
.warn-card__title { color: #ff6b6b; font-weight: 700; font-size: 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.warn-item {
  background: #0c1424; border: 1px solid #253156; border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
}
.warn-item__id { font-family: var(--font-data); color: #9fb0d0; font-size: 12.5px; margin-bottom: 4px; }
.warn-item__desc { font-size: 13.5px; color: #eaf1ff; }
.warn-item__link { font-size: 12px; color: #6ea8ff; font-weight: 600; margin-top: 6px; }

/* ---------- Popover de perfil/contexto (Topbar, #btn-whoami) ----------
   Substitui o antigo modal-overlay/warn-card centralizado em tela cheia (12/08/2026) por um
   popover ancorado no ícone que o abriu — posição/tamanho calculados em JS (ver
   openContextSwitcher em app.js) porque o botão não tem posição fixa (Topbar responsiva, ícones
   podem reordenar em telas estreitas — ver @media 420px acima). */
.popover-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
  z-index: 998; opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.popover-overlay.is-visible { opacity: 1; pointer-events: auto; }

.profile-popover {
  position: fixed; width: 290px; max-width: calc(100vw - 20px);
  background: var(--surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2), 0 12px 32px rgba(16, 30, 54, .18);
  z-index: 999; opacity: 0; transform: translateY(-8px) scale(.97);
  pointer-events: none; transition: opacity .16s ease, transform .16s ease;
  transform-origin: top right;
}
.profile-popover.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.profile-popover__arrow {
  position: absolute; top: -8px; width: 16px; height: 16px;
  background: var(--surface); transform: rotate(45deg); border-radius: 3px;
}
.profile-popover__close {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border-radius: 50%; border: none; background: transparent; color: var(--text-muted);
  font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, color .15s ease;
}
.profile-popover__close:hover { background: var(--gray-100); color: var(--text); }

.profile-popover__header { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px; }
.profile-popover__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-grad); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; overflow: hidden;
}
.profile-popover__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-popover__identity { min-width: 0; }
.profile-popover__name {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-popover__meta {
  font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.profile-popover__divider { height: 1px; background: var(--border); margin: 0 16px; }

.profile-popover__list { padding: 8px; }
.profile-popover__msg { padding: 14px 16px 18px; font-size: 12.5px; color: var(--text-muted); }

.profile-row {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border-radius: var(--radius-sm); cursor: pointer; transition: background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.profile-row:hover { background: var(--gray-100); }

.profile-row__radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gray-300);
  flex-shrink: 0; display: grid; place-items: center; transition: border-color .15s ease;
}
.profile-row.is-selected .profile-row__radio { border-color: var(--accent); }
.profile-row__radio-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: scale(0);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.profile-row.is-selected .profile-row__radio-dot { transform: scale(1); }

.profile-row__text { min-width: 0; flex: 1; }
.profile-row__role { font-size: 13.5px; font-weight: 600; color: var(--text); }
.profile-row__sub {
  font-size: 11px; color: var(--text-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.profile-row__pill {
  font-size: 9.5px; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 2px 7px; border-radius: 20px; flex-shrink: 0;
}

.profile-popover__footer { padding: 6px 12px 12px; }
.profile-popover__footer .btn { font-size: 13px; padding: 11px; }

/* Fica escondido na tela normal sempre — só aparece dentro de @media print, e mesmo assim só
   quando o body tem a classe .print-draft-only (ver bug corrigido: antes esta regra só existia
   dentro de @media print, então o texto do rascunho ficava visível/flutuando por cima do app
   depois de qualquer exportação/impressão). */
#print-draft-area { display: none; }

/* Folha A4 do relatório oficial da Ficha de Fiscalização (ADR-26, 01/09/2026). LARGURA FÍSICA
   fixa (186mm = A4 210mm − 2×12mm de margem de @page) — é o que torna a quebra de linha e a
   paginação DETERMINÍSTICAS entre Chrome/macOS e Safari/iOS: sem uma largura em unidade física,
   cada motor mede a quebra contra o próprio viewport (o iOS ainda reescala o documento inteiro
   ~1,18×), então as mesmas linhas quebravam em pontos diferentes e a Ficha paginava diferente
   em cada aparelho. Definida fora de @media print também (o #print-draft-area é display:none na
   tela, então nunca aparece ali de qualquer forma; manter a regra única evita divergência). */
.ficha-print-sheet { width: 186mm; margin: 0 auto; box-sizing: border-box; }

/* ---------- Módulo Apurações / Oitiva (Reestruturação visual, 19/08/2026) ----------
   Escopo próprio por cima dos tokens/componentes genéricos já existentes (.card, .status-pill,
   .data-grid, .btn, .sheet-overlay) — ver mockups de referência do pedido. Nenhuma classe abaixo
   é usada fora das telas #apuracoes-root / #apuracao-form-root / #apuracao-oitiva-root; topbar e
   tabbar continuam vindo de fora, sem nenhuma regra aqui. */

/* Cabeçalho interno das telas de Apuração/Oitiva (seção 6 do pedido: eyebrow + título + linha de
   código/situação) — .view-title continua sendo o mesmo heading usado pelo resto do app, só ganha
   um eyebrow acima e uma meta-line abaixo específicos destas duas telas. */
.apu-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; }
.apu-meta-line { font-size: 12.5px; color: var(--text-muted); font-family: var(--font-data); margin: 2px 0 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Badges de situação (FASE B) — 3 status (em_andamento / concluida / cancelada) via
   apuracaoStatusBadgeClass() em app.js. */
.status-pill--apu-andamento { background: color-mix(in srgb, var(--blue-500) 16%, transparent); color: var(--blue-600); }
[data-theme="dark"] .status-pill--apu-andamento { color: #6faaff; }
.status-pill--apu-concluida { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.status-pill--apu-cancelada { background: var(--gray-300); color: var(--navy-900); }
[data-theme="dark"] .status-pill--apu-cancelada { background: #2a3550; color: #b8c2d9; }

/* Lista de Apurações — linha de card dentro de .card, mesmo espírito de .result-item mas com a
   hierarquia do mockup (data pequena/mono, código em destaque, assunto abaixo, badge à direita). */
.apu-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 2px; border-bottom: 1px solid var(--border); cursor: pointer; }
.apu-row:last-child { border-bottom: none; }
.apu-row__date { font-size: 11px; color: var(--text-muted); font-family: var(--font-data); }
.apu-row__id { font-size: 14px; font-weight: 800; color: var(--text); margin: 2px 0; }
.apu-row__subj { font-size: 12.5px; color: var(--text-muted); }
.apu-row__badge { flex-shrink: 0; white-space: nowrap; }

/* Botão flutuante "Nova apuração" — sempre navega para a busca de veículo primeiro (uma apuração
   nasce vinculada a uma autorização, ver ApuracaoRepository.createDraft(taxi,...) — nunca cria um
   registro "solto"), mesmo posicionamento do .toast acima da tabbar. */
.apu-fab {
  position: fixed; right: 18px; bottom: calc(var(--tab-h) + var(--safe-bottom) + 16px);
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--accent-grad); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-2); cursor: pointer; z-index: 15;
}
.apu-fab:active { transform: scale(.96); }

/* Abas horizontais da Apuração/Oitiva — pill scroller com fade nas bordas (já existia via
   mask-image inline em tabsStripHtml); aqui só o essencial de espaçamento/tamanho de toque. */
.apu-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.apu-tabs::-webkit-scrollbar { display: none; }
.apu-tab-btn {
  flex: none; border: 1.5px solid var(--border); background: var(--surface); color: var(--navy-900);
  font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: .15s;
}
[data-theme="dark"] .apu-tab-btn { color: var(--text); }
.apu-tab-btn.is-active { background: var(--accent-grad); border-color: transparent; color: var(--white); box-shadow: 0 6px 14px -6px rgba(21,101,216,.55); }

/* Cartão "Condutor e veículo (via Autorização)" — leve realce azul, mesmo espírito de .card--accent
   já usado na Ficha do Veículo, mas com fundo em degradê suave como no mockup da aba Demanda. */
.apu-card-highlight {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)) 0%, var(--surface) 65%);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}
.apu-card-highlight__badge {
  font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--blue-600); padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
[data-theme="dark"] .apu-card-highlight__badge { color: #8fb8ff; }

/* Identificação do ouvido (Oitiva) — accordion recolhível, reaproveitando <details>/<summary>. */
.apu-accordion { padding: 0; overflow: hidden; }
.apu-accordion > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; font-weight: 700; color: var(--text); font-size: 14px;
  cursor: pointer; list-style: none;
}
.apu-accordion > summary::-webkit-details-marker { display: none; }
.apu-accordion > summary .apu-accordion__chev { color: var(--text-muted); transition: transform .15s; flex-shrink: 0; }
.apu-accordion[open] > summary .apu-accordion__chev { transform: rotate(90deg); }
.apu-accordion__body { padding: 0 16px 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

/* Registro de áudio — barra sticky com waveform animada (seção 18 do pedido: reflete o estado
   REAL do MediaRecorder, nunca decorativa — a animação só roda quando .is-recording está presente,
   controlada em JS a partir do estado real de mediaRecorder.state). */
.apu-rec-card { position: sticky; top: 6px; z-index: 5; }
.apu-rec-row { display: flex; align-items: center; gap: 10px; }
.apu-rec-btn {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--accent);
  color: var(--blue-600); background: var(--surface); font-weight: 700; font-size: 13px;
  padding: 11px 14px; border-radius: 12px; cursor: pointer; transition: .15s; flex-shrink: 0;
}
[data-theme="dark"] .apu-rec-btn { color: #8fb8ff; }
.apu-rec-btn.is-recording { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); color: var(--danger); }
.apu-rec-meta { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; font-family: var(--font-data); }
.apu-waveform { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.apu-waveform span { width: 3px; background: var(--gray-300); border-radius: 2px; height: 5px; display: block; }
.apu-rec-row.is-recording .apu-waveform span { background: var(--danger); animation: apu-wave 1.1s ease-in-out infinite; }
.apu-rec-row.is-paused .apu-waveform span { background: color-mix(in srgb, var(--danger) 45%, var(--gray-300)); animation: none; height: 10px; }
.apu-waveform span:nth-child(1) { animation-delay: 0s; } .apu-waveform span:nth-child(2) { animation-delay: .1s; }
.apu-waveform span:nth-child(3) { animation-delay: .2s; } .apu-waveform span:nth-child(4) { animation-delay: .3s; }
.apu-waveform span:nth-child(5) { animation-delay: .4s; } .apu-waveform span:nth-child(6) { animation-delay: .5s; }
.apu-waveform span:nth-child(7) { animation-delay: .6s; }
@keyframes apu-wave { 0%, 100% { height: 5px; } 50% { height: 17px; } }
@media (prefers-reduced-motion: reduce) { .apu-waveform span { animation: none !important; height: 10px !important; } }

/* Declarações — segmentado Narrativo / Perguntas e respostas + editor + blocos de pergunta. */
.apu-segmented { display: flex; background: var(--gray-100); border-radius: 12px; padding: 3px; gap: 3px; margin-bottom: 10px; }
.apu-segmented button {
  flex: 1; border: none; background: transparent; padding: 9px 8px; border-radius: 9px;
  font-weight: 700; font-size: 13px; color: var(--text); cursor: pointer; transition: .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.apu-segmented button.is-active { background: var(--accent-grad); color: var(--white); box-shadow: 0 4px 10px -4px rgba(21,101,216,.6); }

.apu-toolbar {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  background: var(--gray-50); border: 1px solid var(--border); border-radius: 11px;
  padding: 5px; margin-bottom: 8px;
}
[data-theme="dark"] .apu-toolbar { background: var(--gray-100); }
/* .apu-toolbar-icon (bug real corrigido, 20/08/2026 — 2ª rodada): a regra dos botões QUADRADOS de
   formatação (Negrito/Itálico/Alinhar/Lista/Desfazer/Refazer) passou a exigir esta classe própria
   em vez de casar com QUALQUER `button` dentro de `.apu-toolbar` — era exatamente esse alcance
   largo demais a causa real de dois bugs seguidos nesta mesma tela: primeiro vazou pros itens do
   menu de perguntas padrão (`.apu-qbank-menu button`, corrigido antes só com height:auto — e por
   pura coincidência de especificidade igual + ordem no arquivo, aquele fix funcionou), depois
   vazou pros botões "Inserir pergunta padrão"/"Pergunta em branco" (`.apu-toolbar-pill`, que tem
   especificidade MENOR que ".apu-toolbar button" e por isso nunca conseguia vencer, não importa
   quantas propriedades declarasse). Uma tentativa de corrigir com `:not(.apu-toolbar-pill)`
   resolveu esse segundo caso mas quebrou o PRIMEIRO de novo (aumentou a especificidade da regra
   genérica pra além da de `.apu-qbank-menu button`). Só usar uma classe própria, que NUNCA
   colide com nenhum botão que não seja de fato um ícone quadrado de formatação, resolve os dois
   ao mesmo tempo e não tem como voltar a vazar pra um terceiro tipo de botão no futuro. */
.apu-toolbar-icon {
  width: 30px; height: 30px; border: none; background: transparent; border-radius: 7px;
  color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.apu-toolbar-icon:hover { background: var(--border); }
.apu-toolbar-icon.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--blue-600); }
.apu-toolbar .apu-toolbar__sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; flex-shrink: 0; }
.apu-toolbar .apu-toolbar__spacer { flex: 1; }
/* Agrupa Desfazer+Refazer num único item flex do toolbar pai — como os dois ficam DENTRO do
   mesmo container flex-shrink:0, ou os dois cabem juntos na linha, ou os dois quebram juntos
   pra próxima linha: nunca mais um fica separado do outro (bug relatado 20/08/2026). */
.apu-toolbar-group { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.apu-toolbar-pill {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; padding: 0 9px;
  width: auto; height: 32px; border-radius: 8px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.apu-toolbar-pill:hover { border-color: var(--accent); color: var(--blue-600); }
[data-theme="dark"] .apu-toolbar-pill:hover { color: #8fb8ff; }
.apu-toolbar-pill:disabled { opacity: .45; cursor: default; }
.apu-toolbar-pill:disabled:hover { border-color: var(--border); color: var(--text); }

.apu-editor-shell { border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.apu-editor {
  min-height: 260px; max-height: 60vh; overflow-y: auto; padding: 16px; font-size: 14.5px;
  line-height: 1.65; color: var(--text); outline: none;
}
.apu-editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.apu-editor p { margin: 0 0 10px; }
.apu-editor p:last-child { margin-bottom: 0; }
.apu-editor b, .apu-editor strong { color: var(--text); }

/* Bloco pergunta/resposta dentro do editor — borda lateral azul, pergunta em destaque (seção 31). */
.apu-qa-block { margin: 14px 0; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; }
.apu-qa-block:first-child { margin-top: 0; }
.apu-qa-block:last-child { margin-bottom: 0; }
.apu-qa-block__q { font-weight: 800; color: var(--text); margin-bottom: 4px; outline: none; }
.apu-qa-block__a { color: var(--text); outline: none; }
.apu-qa-block__a:empty::before { content: attr(data-placeholder); color: var(--text-muted); }

/* Banco de perguntas padrão — menu dropdown. */
.apu-qbank { position: relative; }
.apu-qbank-menu {
  position: absolute; top: 38px; left: 0; z-index: 30; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-2); width: min(300px, 88vw);
  padding: 6px; display: none; max-height: 280px; overflow-y: auto;
}
.apu-qbank-menu.is-open { display: block; }
/* Bug real corrigido (20/08/2026): .apu-qbank-menu vive dentro de #oit-toolbar-perguntas, que tem
   classe .apu-toolbar — a regra genérica ".apu-toolbar button" (pensada pros botões QUADRADOS de
   formatação, ver acima) também batia nestes botões de texto longo, forçando height:32px nelas
   (herdada por especificidade igual + ordem de declaração, mesmo com display/width já corretos
   aqui). O texto de cada pergunta, maior que 32px de altura quando quebra em várias linhas,
   vazava visualmente por cima do próximo botão — parecia "embaralhado", mas na verdade cada botão
   já estava na posição vertical certa (position:static, empilhados), só com a caixa baixa demais
   pro próprio conteúdo. height:auto (não min-height) sobrepõe a regra genérica e deixa cada
   botão crescer conforme o texto. */
.apu-qbank-menu button {
  display: block; width: 100%; height: auto; text-align: left; background: transparent; border: none;
  padding: 9px 10px; border-radius: 8px; font-size: 12.8px; color: var(--text); cursor: pointer; line-height: 1.4;
}
.apu-qbank-menu button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--blue-600); }
[data-theme="dark"] .apu-qbank-menu button:hover { color: #8fb8ff; }

.apu-hint-banner {
  display: flex; gap: 8px; align-items: flex-start; background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 10px; padding: 9px 11px;
  margin-top: 8px; font-size: 11.5px; color: var(--blue-600); line-height: 1.55;
}
[data-theme="dark"] .apu-hint-banner { color: #a9c8ff; }
.apu-hint-banner svg { flex: none; margin-top: 1px; }

.apu-boiler-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--gray-50); border: 1px dashed var(--border); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 8px; font-size: 12px; color: var(--text-muted);
}
[data-theme="dark"] .apu-boiler-toggle { background: var(--gray-100); }

/* Gravações desta oitiva — lista de trechos individualizados. */
.apu-rec-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.apu-rec-item:last-child { border-bottom: none; }
.apu-rec-item__tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); flex-shrink: 0; }

.apu-saved-note { text-align: center; color: var(--text-muted); font-size: 12px; margin: 14px 0 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.apu-saved-note svg { color: var(--success); flex-shrink: 0; }

/* ---------- Modo Foco da Oitiva (correções pontuais, 20/08/2026) ----------
   #oit-focus-wrap embrulha SEMPRE (foco ligado ou não) o cartão de Registro de Áudio + o cartão
   Declarações — sem esta classe .apu-focus-active, é só um <div> comum, sem nenhum efeito (layout
   idêntico ao de antes desta correção). Deliberadamente NÃO usa a Fullscreen API do navegador
   (pedido explícito: precisa funcionar bem em iPhone/PWA) — é um overlay position:fixed comum,
   controlado só por esta classe CSS + o estado `apuracaoOitivaFocusMode` em app.js. Nunca move
   nenhum nó do DOM (#oit-audio-bar continua exatamente onde sempre esteve na árvore, só o
   CONTAINER ao redor muda de posição/tamanho) — por isso a gravação em andamento (MediaRecorder,
   que não depende de posição no DOM) nunca é interrompida ao maximizar/minimizar, e topbar/
   tabbar nunca são tocadas (ficam só visualmente cobertas pelo overlay, que fica acima delas). */
#oit-focus-wrap.apu-focus-active {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  display: flex; flex-direction: column; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* Trava o scroll da página por trás do overlay — sem isto, o "rubber-band" do Safari/iOS deixa o
   conteúdo de fundo arrastar visivelmente por trás do modo foco. */
body.apu-oitiva-focus { overflow: hidden; }
#oit-focus-wrap.apu-focus-active .apu-rec-card { position: sticky; top: 0; margin: 0; flex-shrink: 0; }
#oit-focus-wrap.apu-focus-active #oit-declaracoes-card {
  flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0;
}
#oit-focus-wrap.apu-focus-active .apu-editor-shell { flex: 1; min-height: 120px; display: flex; }
#oit-focus-wrap.apu-focus-active .apu-editor { flex: 1; max-height: none; min-height: 0; }
/* Banner de dica ("Narrativo e perguntas/respostas compõem o mesmo documento...") só é ocultado
   VISUALMENTE no modo foco — o dado/lógica por trás dele continua intacto, ele volta a aparecer
   normalmente assim que o modo foco é desligado. O espaço que ele ocupava é devolvido ao editor,
   que já usa flex:1 acima. */
#oit-focus-wrap.apu-focus-active .apu-hint-banner { display: none; }
/* Linha "Texto de abertura padrão" + botão "Inserir" — mesmo tratamento do hint-banner acima:
   ocultada só VISUALMENTE no modo foco (o botão #oit-insert-boiler e sua lógica de inserção
   continuam intactos no DOM/JS, só escondidos por CSS), espaço devolvido ao editor. Volta a
   aparecer normalmente assim que o modo foco é desligado. */
#oit-focus-wrap.apu-focus-active .apu-boiler-toggle { display: none; }
#oit-focus-wrap.apu-focus-active #oit-audio-bar { padding: 10px; }
#oit-focus-wrap.apu-focus-active .apu-rec-row { gap: 8px; }
#oit-focus-wrap.apu-focus-active .apu-rec-btn { padding: 10px 12px; font-size: 12.5px; }
.apu-focus-toggle { flex-shrink: 0; }

/* Compactação da tela de Oitiva (refinamento visual, 20/08/2026) — escopada estritamente a
   #apuracao-oitiva-root (raiz exclusiva desta tela, não usada em nenhuma outra view) para nunca
   afetar `.card`/`.section-block` em qualquer outro módulo do app. */
#apuracao-oitiva-root .card { padding: 14px; }
#apuracao-oitiva-root .section-block { margin-bottom: 14px; }

/* ---------- Oitiva em APURAÇÕES — TELA INTEIRA (APU-OITIVAS-PARIDADE-01, 19/09/2026) ----------
   PORTE MECÂNICO das regras do Modo Foco/compactação da Oitiva do PAT (acima) para os ids da view nova
   (`#oit-nat-*`, `#oitiva-apu-root`) — mesmo visual, ids distintos para nunca colidir com o DOM do PAT. */
#oit-nat-focus-wrap.apu-focus-active {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  display: flex; flex-direction: column; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#oit-nat-focus-wrap.apu-focus-active .apu-rec-card { position: sticky; top: 0; margin: 0; flex-shrink: 0; }
#oit-nat-focus-wrap.apu-focus-active #oit-nat-declaracoes-card {
  flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0;
}
#oit-nat-focus-wrap.apu-focus-active .apu-editor-shell { flex: 1; min-height: 120px; display: flex; }
#oit-nat-focus-wrap.apu-focus-active .apu-editor { flex: 1; max-height: none; min-height: 0; }
#oit-nat-focus-wrap.apu-focus-active .apu-hint-banner { display: none; }
#oit-nat-focus-wrap.apu-focus-active .apu-boiler-toggle { display: none; }
#oit-nat-focus-wrap.apu-focus-active #oit-nat-audio-bar { padding: 10px; }
#oit-nat-focus-wrap.apu-focus-active .apu-rec-row { gap: 8px; }
#oit-nat-focus-wrap.apu-focus-active .apu-rec-btn { padding: 10px 12px; font-size: 12.5px; }
#oitiva-apu-root .card { padding: 14px; }

/* ---------- Referências da apuração — PAF/OSAF/Denúncia na Oitiva (OITIVA M3, 27/09/2026) ----------
   Mesma linguagem visual de .chip/.chip-row, mas cada item ABRE em janela própria (nunca navega para
   fora da Oitiva) — por isso o ícone "↗" no rótulo. Vazio quando não há referência nenhuma (o próprio
   JS não desenha o contêiner nesse caso — nada aqui precisa esconder "card vazio"). */
.apu-ref-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.apu-ref-chip {
  padding: 5px 11px; border-radius: 100px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.apu-ref-chip:hover { border-color: var(--blue-500); color: var(--blue-600); }
/* A cópia compacta só existe para o Modo Foco (fora dele, a referência já aparece no bloco de
   cima) — sem este display:none ela ficava visível 2x na tela normal, ver GATE FINAL 27/09/2026. */
.apu-ref-bar--compacta { display: none; margin: 0 0 8px; flex-shrink: 0; }
.apu-ref-bar--compacta .apu-ref-chip { padding: 4px 9px; font-size: 11.5px; }
#oit-nat-focus-wrap.apu-focus-active .apu-ref-bar--compacta { display: flex; }
#oitiva-apu-root .section-block { margin-bottom: 14px; }


/* Tamanho de papel A4 para qualquer conteúdo impresso via printDraftOnly() — rascunho, BAFis ou
   o relatório completo da ficha (ver buildFichaPrintHtml em app.js). @page já só se aplica
   durante paginação/impressão por definição — não precisa (e não deve) ficar aninhado dentro de
   @media print: nesse formato aninhado ele funcionava no Chrome/Safari desktop e no iOS, mas
   quebrava a impressão inteira (tela cheia do app em vez de só o conteúdo isolado) em navegadores
   baseados em Chromium mais antigos comuns em Android, como o Samsung Internet — o parser deles
   não lidava bem com a regra `@page` aninhada e descartava o bloco `@media print` inteiro junto,
   inclusive as regras que escondem a interface do app. Bug real corrigido de verdade colocando
   `@page` como regra de topo, forma padrão e universalmente suportada. `portrait` explícito
   (01/09/2026) — nunca deixar a orientação a cargo do padrão do navegador. */
@page { size: A4 portrait; margin: 12mm; }

@media print {
  .topbar, .tabbar, .toast, .btn, #btn-back { display: none !important; }
  /* `html` PRECISA entrar aqui junto com `body` (01/09/2026 — artefato cinza real reportado):
     `html, body { background: var(--bg) }` (style.css) pinta o fundo #f4f6f9 do tema claro. Se
     o reset de impressão zera só `body`, o `html` continua #f4f6f9 e o Chrome/macOS (com
     "gráficos de segundo plano" ligado, padrão do "Salvar como PDF") pinta esse cinza em TODA a
     folha; como o #print-draft-area branco só cobre a própria altura do conteúdo, o cinza do
     `html` vaza embaixo, até o rodapé, na última página. O Safari/iOS nunca imprime fundo, por
     isso o mesmo PDF saía limpo no iPhone e cinza no Mac. */
  html, body { padding-bottom: 0; background: #fff !important; color: #000 !important; }
  /* Impede a "auto-inflação de fonte" do Safari/iOS (text autosizing): na impressão a folha
     (186mm) é MAIS LARGA que o viewport do iPhone — condição que dispara o autosizing e faz o
     iOS aumentar certos parágrafos, mudando alturas e, portanto, a paginação em relação ao
     Chrome. `100%` = sem ajuste. (Também fixado globalmente logo no topo deste arquivo.) */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* `body { min-height: 100vh }` (style.css) forçaria o body a ≥1 página na impressão — inócuo
     (fundo já é #fff), mas zerado aqui para não deixar nenhuma ambiguidade de altura. */
  body { min-height: 0 !important; }
  /* Bug real corrigido (14/08/2026) — evidência em tela_app_Mac.pdf (PDF de 11 páginas com
     Login, escolha de contexto, Home e Fiscalizações todos juntos). Causa: esta regra escondia
     .topbar/.tabbar mas forçava TODAS as <section class="view"> a aparecer ao mesmo tempo,
     porque não tinha o mesmo escopo .is-active da regra normal de tela (style.css:
     ".view.is-active { display: block }"). Isso só não aparecia quando a impressão saía pelos
     próprios botões do AFAU (Exportar/Imprimir, Compartilhar), porque aí a regra
     body.print-draft-only abaixo escondia tudo antes que esta chegasse a importar — mas qualquer
     impressão disparada por fora do app (Cmd+P, menu do navegador, AirPrint direto na tela
     aberta) caía só nesta regra e mostrava a SPA inteira, tela sobre tela. Corrigido escopando
     para a view realmente ativa, igual a regra de tela normal. */
  .view.is-active { display: block !important; padding: 0; }

  body.print-draft-only > *:not(#print-draft-area) { display: none !important; }
  body.print-draft-only #print-draft-area {
    /* padding-bottom reduzido de 24px pra 4px (20/08/2026) — causa real de uma página extra quase
       em branco no fim de documentos longos como o Termo de Oitiva (ver .termo-oitiva-print,
       acima): eram 24px de espaço morto DEPOIS do último conteúdo (sem nenhum elemento visível
       ali), e quando o conteúdo real já preenchia quase 100% de uma página, esses 24px sozinhos
       bastavam pra empurrar uma página inteira nova pro documento, mostrando só o rodapé que o
       próprio navegador desenha. @page (abaixo) já reserva 12mm de margem física de segurança na
       borda de verdade da folha — este padding é só espaço dentro dessa margem, então reduzir só
       o de baixo não risca aproximar texto da borda física em nenhum documento. */
    display: block !important; padding: 24px 24px 4px; font-family: var(--font-data), monospace;
    background: #fff !important; color: #000 !important;
  }
  /* Modo "folha A4" (printDraftOnly(..., { sheet:true }) — só o relatório oficial da Ficha, ver
     ADR-26). O conteúdo já traz a própria `.ficha-print-sheet` de 186mm; zerar o padding lateral
     aqui evita 186mm + 48px > área imprimível (que faria o Chrome reescalar a folha inteira pra
     caber, quebrando a determinística). O respiro de topo/base fica pequeno, dentro da margem
     de 12mm que o @page já reserva. Rascunho/Ato Admin./BAFis/Termo de Oitiva (sem a classe)
     continuam com o padding 24px de sempre. */
  body.print-draft-only #print-draft-area.is-sheet { padding: 6px 0 4px !important; }
  /* Pilha de fontes DETERMINÍSTICA para o relatório da Ficha (só impressão). Se a Inter não
     carregar (1ª visita offline, ou fonts.googleapis bloqueado por política de rede), a Ficha
     cairia em `system-ui`/`-apple-system` — que resolvem para SF Pro, com métricas diferentes da
     Inter E ligeiramente diferentes entre macOS e iOS → quebra de linha diferente. Helvetica/
     Arial têm métricas praticamente idênticas nos dois sistemas. O `!important` em `*` vence os
     `font-family:var(--font-body,...)` inline de cada elemento do documento (regra !important de
     folha de estilo > estilo inline sem !important). Não toca em font-size/weight/color. */
  body.print-draft-only #print-draft-area.is-sheet .ficha-print-sheet,
  body.print-draft-only #print-draft-area.is-sheet .ficha-print-sheet * {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  }
  /* Cada grupo do checklist é envolvido por um <div break-inside:avoid> além do `break-inside`
     na própria <table> — o Safari respeita a regra em contêiner de bloco de forma bem mais
     confiável do que em <table>, garantindo que "Documentação" e "Itens do Veículo" nunca sejam
     cortados no meio (mesma decisão de paginação no Chrome e no Safari). */
  body.print-draft-only #print-draft-area.is-sheet .chk-group { break-inside: avoid; page-break-inside: avoid; }
  body.print-draft-only #print-draft-area pre {
    white-space: pre-wrap; word-wrap: break-word; font-size: 12px; line-height: 1.5;
  }
  body.print-draft-only #print-draft-area .draft-observacoes {
    font-family: var(--font-body); font-size: 12px; line-height: 1.6; white-space: normal;
  }
  body.print-draft-only #print-draft-area .draft-observacoes ul { margin: 4px 0; padding-left: 18px; }
}

/* ============================================================================================
   🧠 Inteligência de Auditoria Fiscal — refinamento visual (16/08/2026)
   Só aparência (cores/espaçamento/tipografia/ícones) — nenhuma classe abaixo é lida por
   JavaScript nem substitui a marcação já usada em outras telas (.card, .status-pill,
   .priority-meter, .kv-row, .alert-banner continuam exatamente como eram, intocadas). O
   expandir/recolher das 6 seções continua sendo o <details>/<summary> nativo do navegador —
   aqui só se esconde o marcador padrão do <summary> e se estiliza um chevron próprio (girado via
   o seletor real [open], sem nenhum JS novo). Ver intelligenceCardHtml() em src/app.js.
   ============================================================================================ */

/* Logo "IAFis-AFAU" — imagem real fornecida pelo responsável do projeto (assets/iaf/, fundo
   branco removido para PNG transparente — ver ADR-16 em DECISIONS.md). No tema escuro, o texto
   navy original ficaria ilegível sobre o fundo escuro do card — daí o filtro
   brightness(0)+invert(1), que produz uma silhueta branca (técnica comum para logo de fundo
   claro usado sobre fundo escuro).
   Cabeçalho em DUAS LINHAS — logo em cima (centralizada), ícone+título+subtítulo embaixo
   (23/08/2026, terceira rodada de ajuste de legibilidade — a segunda ainda quebrava "FISCAL"
   numa 2ª linha em celulares reais). Fonte do título reduzida (15px→13px, letter-spacing mais
   apertado) e ícone reduzido (40px→34px, para não ultrapassar a altura somada de título+
   subtítulo) — medido/confirmado num preview isolado em larguras de até 340px, nos dois temas,
   antes de aplicar: título e subtítulo cabem cada um numa única linha, e o ícone fica contido
   dentro da faixa vertical dos dois textos, sem "estourar" acima/abaixo deles. */
.intel-header { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 14px; }
.intel-logo { flex-shrink: 0; line-height: 0; align-self: center; }
.intel-logo img { display: block; height: 46px; width: auto; }
[data-theme="dark"] .intel-logo img { filter: brightness(0) invert(1) opacity(.92); }

.intel-header__title-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.intel-header__icon { display: inline-flex; flex-shrink: 0; }
.intel-header__icon img { display: block; width: auto; height: 34px; }
.intel-header__text { min-width: 0; }
.intel-header__title {
  font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.3;
  text-transform: uppercase; letter-spacing: .01em;
}
.intel-header__subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* Bloco de CONDIÇÃO ESPECIAL (ADR-23) — substitui o índice/medidores quando a autorização não é
   vigente. Mesmos tokens de cor de .status-pill--apresentacao_troca_pendente (laranja de
   "atenção, exige verificação", nunca o vermelho de --danger). */
.intel-condicao-especial {
  border: 1px solid color-mix(in srgb, #d8681f 40%, transparent);
  background: color-mix(in srgb, #d8681f 8%, transparent);
  border-radius: 10px; padding: 14px; margin-top: 6px;
}
.intel-condicao-especial__flag { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #b8551a; }
[data-theme="dark"] .intel-condicao-especial__flag { color: #f0954a; }
.intel-condicao-especial__titulo { font-size: 17px; font-weight: 800; color: var(--text); margin-top: 4px; text-transform: uppercase; line-height: 1.25; }
.intel-condicao-especial__texto { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.intel-condicao-especial__list { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }

.intel-score { display: flex; align-items: center; gap: 16px; margin-top: 2px; }
.intel-score__block { text-align: center; min-width: 68px; }
.intel-score__index-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 3px; }
.intel-score__value { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.intel-score__number { font-size: 32px; font-weight: 800; line-height: 1; color: var(--text); }
.intel-score__denominator { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.intel-score__side { flex: 1; min-width: 0; }
.intel-confiabilidade { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }

.intel-info-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 13px; height: 13px; border-radius: 50%; border: 1.2px solid currentColor;
  font-size: 8.5px; font-style: italic; font-weight: 700; opacity: .5; cursor: default;
}

/* Mais escuro que o .data-grid__label padrão (var(--text-muted)) de propósito — reforço de
   legibilidade pedido só para os rótulos dos dois eixos deste card. */
.intel-eixo-block + .intel-eixo-block { margin-top: 10px; }
.intel-eixos { margin-top: 14px; }
.intel-eixo__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin-bottom: 6px; }
[data-theme="dark"] .intel-eixo__label { color: #c3ccdf; }

.intel-accordion { margin-top: 16px; border-top: 1px solid var(--border); }
/* Identidade cromática lateral (refinamento 16/08/2026) — só uma borda esquerda sutil de 3px,
   nunca mais que isso (nada de círculo/badge colorido atrás do ícone, pedido explícito do
   responsável do projeto: "muito sutil, apenas uma linha"). */
.intel-accordion-item {
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  padding-left: 11px; margin-left: -14px;
}
.intel-accordion-item--porque    { border-left-color: var(--blue-500); }
.intel-accordion-item--alertas   { border-left-color: #d8a400; }
.intel-accordion-item--foco      { border-left-color: var(--danger); }
.intel-accordion-item--historico { border-left-color: var(--success); }
.intel-accordion-item--taf       { border-left-color: #7c5cff; }
.intel-accordion-item--resumo    { border-left-color: var(--blue-500); }
.intel-accordion-item > summary {
  display: flex; align-items: center; gap: 12px; padding: 13px 2px; cursor: pointer;
  font-weight: 700; font-size: 13.5px; color: var(--text); list-style: none;
}
.intel-accordion-item > summary::-webkit-details-marker { display: none; }
.intel-accordion-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; font-size: 16px;
}
.intel-accordion-title { flex: 1; min-width: 0; }
/* Chevron em SVG (não mais o caractere "▾", que rendia quase invisível em alguns navegadores/
   fontes) — cor com mais contraste, girado via o seletor real [open], sem nenhum JS novo. */
.intel-accordion-chevron { display: inline-flex; color: var(--gray-500); transition: transform .15s ease; flex-shrink: 0; }
[data-theme="dark"] .intel-accordion-chevron { color: #c3ccdf; }
.intel-accordion-item[open] > summary .intel-accordion-chevron { transform: rotate(180deg); }
.intel-accordion-body { padding: 0 2px 16px 45px; }

.intel-footer { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.intel-footer .intel-info-icon { margin-top: 2px; }
.intel-footer p { font-size: 10px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ============================================================================================
   Créditos institucionais — Ajustes › Sobre (refinamento visual, Prompt 12, 25/08/2026)
   Só aparência. Continua dentro do .card/.section-block/.section-title já existentes (nenhuma
   classe abaixo é lida por JS, nenhuma rota/view nova). As duas logomarcas são os elementos
   principais de identificação; a autoria fica logo abaixo, com "Eduardo Andrade" em destaque
   (peso 700, corpo maior) mas nunca maior que a marca. Divisor central discreto entre as duas
   seções — sem segunda caixa, sem borda pesada. Tudo centrado, larguras em ch + margin:auto,
   nenhum white-space:nowrap: a assinatura final e as descrições quebram naturalmente já a
   partir de 320px. Ver credits block em renderSettings() (src/app.js).
   ============================================================================================ */
.credits { text-align: center; padding-top: 2px; }

.credits__block { display: flex; flex-direction: column; align-items: center; }

.credits__logo { display: block; max-width: 100%; height: auto; }

/* Logo AFAU Digital – Táxi: ícone-tile do app (fundo navy é parte da marca, por isso "carrega"
   o próprio fundo nos dois temas). PNG derivado com cantos já transparentes (assets/img/
   logo-app-icon.png). No claro, sombra suave só de profundidade; no escuro, um fio de 1px para
   a borda do tile não sumir no card — nunca um retângulo/placa atrás da marca. */
.credits__logo--app {
  width: clamp(76px, 21vw, 96px);
  border-radius: 22%;
  box-shadow: 0 2px 12px rgba(10, 27, 61, 0.14);
}
[data-theme="dark"] .credits__logo--app {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent),
              0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Logo IAFis – AFAU: PNG já transparente (mesma imagem do card 🧠 Inteligência). No tema
   escuro o texto navy da marca ficaria ilegível sobre o card escuro — mesmo tratamento já
   adotado e documentado para .intel-logo: silhueta branca via brightness(0)+invert(1). */
.credits__logo--iafis {
  width: clamp(150px, 46vw, 216px);
  margin-top: 2px;
}
[data-theme="dark"] .credits__logo--iafis { filter: brightness(0) invert(1) opacity(0.9); }

.credits__descriptor {
  font-size: 12px; line-height: 1.5; letter-spacing: .01em;
  max-width: 30ch; margin: 12px auto 0;
}

.credits__name {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: .005em;
  color: var(--text); margin: 5px auto 0;
}

.credits__position {
  font-size: 11.5px; line-height: 1.45;
  max-width: 34ch; margin: 3px auto 0;
}

.credits__divider {
  border: 0; height: 1px; width: 120px; margin: 22px auto;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.credits__subtitle {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted); margin: 10px auto 0;
}

.credits__desc {
  font-size: 12px; line-height: 1.55;
  max-width: 34ch; margin: 8px auto 0;
}

.credits__attrib {
  font-size: 12px; line-height: 1.5;
  margin: 8px auto 0;
}

.credits__signature {
  font-size: 10.5px; font-style: italic; line-height: 1.6; letter-spacing: .01em;
  color: var(--text-muted); opacity: .9;
  max-width: 40ch; margin: 20px auto 0;
}

/* ── Central de Dados (PROMPT 19 Fase B) ────────────────────────────────────
   Layout institucional por SEÇÃO/FONTE. Só aparência — reutiliza .card, .stat-card,
   .btn, .progress-track já existentes; nada aqui afeta outros módulos. */
.dc-section { margin-bottom: 22px; }
.dc-section__head {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
  padding: 0 2px 8px; border-bottom: 2px solid var(--border); margin-bottom: 12px;
}
.dc-notice {
  font-size: 12px; line-height: 1.5; color: var(--text);
  background: var(--gray-100); border-radius: var(--radius-md);
  padding: 10px 12px; margin: 0 0 12px;
}
.dc-source {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px;
}
.dc-source__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dc-source__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; word-break: break-word; }
.dc-source__flag { font-size: 11.5px; font-weight: 600; margin-top: 6px; }
.dc-source__flag--yes { color: var(--success); }
.dc-source__flag--no { color: var(--text-muted); }
.dc-source__status { font-size: 12px; line-height: 1.5; margin-top: 8px; }
.dc-maintenance { border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); }
.dc-tag {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 100px; white-space: nowrap;
}
.dc-tag--fundamental { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.dc-tag--complementar,
.dc-tag--complementar_historico { background: color-mix(in srgb, var(--blue-500) 16%, transparent); color: var(--blue-600); }
.dc-tag--conferencia { background: color-mix(in srgb, #d8a400 18%, transparent); color: #8a6800; }
[data-theme="dark"] .dc-tag--conferencia { color: #f0c65a; }
.dc-tag--documental { background: var(--gray-100); color: var(--text-muted); }
.dc-tag--redundante,
.dc-tag--duplicado { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* ── Central de Dados — abas / matriz / qualidade (PROMPT 26 Fase 2) ────────
   Só aparência. Reutiliza .card/.section-block/.stats-grid/.stat-card/.kv-row/.dc-source.
   Nada aqui afeta outros módulos. */
#view-data-center { max-width: 1140px; }
@media (min-width: 1280px) { #view-data-center { max-width: 1320px; } }
@media (min-width: 1680px) { #view-data-center { max-width: 1480px; } }

.dc-tabs {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border); scrollbar-width: none;
}
.dc-tabs::-webkit-scrollbar { display: none; }
.dc-tab {
  flex: none; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-muted);
  padding: 9px 13px; border-radius: 9px 9px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
.dc-tab:hover { color: var(--text); }
.dc-tab.is-active { color: var(--blue-600); border-bottom-color: var(--blue-500); background: color-mix(in srgb, var(--blue-500) 6%, transparent); }
.dc-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }

.dc-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
.dc-matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.dc-matrix th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--border); white-space: nowrap;
}
.dc-matrix td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.dc-matrix tr:last-child td { border-bottom: none; }

.dc-metric-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
.dc-metric {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 11px 12px;
}
.dc-metric--warn { border-color: color-mix(in srgb, #d8a400 45%, var(--border)); background: color-mix(in srgb, #d8a400 8%, transparent); }
.dc-metric__value { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.1; }
.dc-metric__label { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.dc-metric__sub { font-size: 10.5px; color: var(--text-muted); opacity: .85; margin-top: 2px; }

.dc-score { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--success); }
.dc-score__pct { font-size: 22px; opacity: .7; margin-left: 2px; }

.dc-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.dc-diff > div {
  background: var(--gray-100); border-radius: var(--radius-sm); padding: 7px 9px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.dc-diff__k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.dc-diff__v { font-size: 13px; font-weight: 600; word-break: break-word; }

.dc-resumo-block { margin-top: 12px; }
.dc-resumo-block h4 {
  font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); margin: 0 0 4px;
}
.dc-resumo-block--restrito h4 { color: var(--danger); }
.dc-resumo-block--restrito { border-left: 2px solid color-mix(in srgb, var(--danger) 40%, transparent); padding-left: 10px; }

@media (max-width: 520px) {
  .dc-diff { grid-template-columns: 1fr; }
  .dc-metric-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* =========================================================
   DASHBOARD — VISÃO GERAL (Prompt 22)
   Camada visual sobre dados existentes. Só aparência — reutiliza .card/.stat-card/.stats-grid/
   .alert-banner. Tudo theme-aware pelos tokens do style.css; adaptativo por dispositivo e
   orientação; Modo Foco cobre topbar/tabbar sem tocar no DOM delas.
   ========================================================= */

/* ---- Card de entrada na Home ---- */
.dashboard-cta {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 4px 0 14px; padding: 14px 14px 14px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  cursor: pointer; text-align: left;
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease;
}
.dashboard-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.dashboard-cta:active { transform: scale(.99); }
.dashboard-cta__icon {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.dashboard-cta__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dashboard-cta__title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.dashboard-cta__desc { font-size: 11.5px; color: var(--text-muted); }
.dashboard-cta__chev { flex: none; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--accent); }

/* ---- Container da view — mais largo que o padrão .view (720px), escala com o desktop ---- */
#view-visao-geral { max-width: 1140px; }
@media (min-width: 1280px) { #view-visao-geral { max-width: 1320px; } }
@media (min-width: 1680px) { #view-visao-geral { max-width: 1480px; } }

.dash-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.dash-section__title {
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.dash-focus-btn { flex: none; border: 1px solid var(--border); background: var(--surface); }
.dash-focus-btn:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

.dash-section { margin-bottom: 18px; }
.dash-section__title,
.dash-card__title {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
  margin: 0 0 10px;
}
.dash-card__title { margin-bottom: 2px; }
.dash-card__head { margin-bottom: 10px; }
.dash-card__sub { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 0; }

.dash-kpis .dash-kpi__sub,
.dash-kpi__sub { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.35; }

/* ---- Card: coluna flex, corpo pode centrar ou esticar ---- */
.dash-card {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.dash-card__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
/* Cards mais baixos que os vizinhos da linha (perfil/sexo/vistoria): corpo centrado —
   o respiro fica simétrico, com cara de intencional em vez de "buraco embaixo" (§7/§8). */
.dash-card--vcenter .dash-card__body { justify-content: center; }
/* Elevação sutil (§18) — sem "pular", sem sugerir que o card inteiro é clicável. */
.dash-card:hover { box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 20%, var(--border)); }

/* ---- Grade: 1 coluna, ordem do DOM (celular retrato, §3) ---- */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }

/* ---- Gráficos: altura RESPONSIVA por breakpoint (§12), nunca vazam ---- */
.dash-chart { position: relative; width: 100%; height: 166px; margin: 4px 0 12px; }
.dash-chart--tall { height: 190px; }
.dash-chart > canvas { max-width: 100%; }

/* ---- Linhas de dados (legenda + resumo acessível + drill-down, §14) ---- */
.dash-datarows { list-style: none; margin: 2px 0 0; padding: 0; }
/* Variante grade (§13/§14): listas longas (anos da frota) em várias colunas — leitura
   esquerda→direita, depois abaixo; ordem previsível, sem masonry (§11). */
.dash-datarows--grid { display: grid; grid-template-columns: 1fr; column-gap: 18px; }
.dash-datarow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.dash-datarow:last-child { border-bottom: none; }
.dash-datarows--grid .dash-datarow { padding-inline: 4px; font-size: 12px; gap: 6px; min-width: 0; }
.dash-datarow__key { display: flex; align-items: center; gap: 8px; color: var(--text); min-width: 0; }
.dash-datarow__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Linha predominante (faixa etária, ano da frota) — destaque discreto, sem repetir texto. */
.dash-datarow--strong .dash-datarow__label { font-weight: 700; }
.dash-datarow--strong .dash-datarow__dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.dash-datarow__dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.dash-datarow__val { font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.dash-datarow__pct { color: var(--text-muted); font-weight: 600; font-size: 11.5px; }
.dash-datarow__chev { color: var(--accent); font-family: var(--font-display); font-weight: 700; }
.dash-datarow--link { cursor: pointer; border-radius: 8px; transition: background .12s ease; }
.dash-datarow--link:hover,
.dash-datarow--link:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); outline: none; }
.dash-datarow--link:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }

.dash-kpi.stat-card--link { cursor: pointer; }
.dash-kpi.stat-card--link:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }

.dash-highlight {
  font-size: 12.5px; margin: 0 0 8px; padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 8px; color: var(--text);
}
.dash-note { font-size: 11px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.45; }
.dash-vist-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }

/* ---- Insights: bloco editorial / conclusão analítica (§10) ---- */
.dash-card--insights .dash-card__body { justify-content: center; }
.dash-insights__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; justify-content: center;
}
.dash-insights__list li {
  font-size: 13px; line-height: 1.55; color: var(--text);
  padding: 11px 0 11px 18px; position: relative;
  border-bottom: 1px solid var(--border);
}
.dash-insights__list li:last-child { border-bottom: none; }
.dash-insights__list li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.dash-insights__check {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--success);
}
.dash-check { font-size: 11px; color: var(--text-muted); margin: 14px 0 4px; text-align: center; }
.dash-check--ok { color: var(--success); }

/* ---- Modo Foco (§16) ---- */
body.dash-focus .topbar,
body.dash-focus .tabbar { display: none !important; }
body.dash-focus #main-root { padding-bottom: 24px; }
body.dash-focus #view-visao-geral {
  max-width: 1600px; padding: 18px clamp(14px, 4vw, 44px) 32px;
  min-height: 100vh;
}
@media (min-width: 1680px) { body.dash-focus #view-visao-geral { max-width: 1840px; } }
body.dash-focus .dash-header { padding-right: 52px; }
body.dash-focus .dash-focus-btn {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 16px; z-index: 60;
  background: var(--surface); box-shadow: var(--shadow-2);
}

/* =========================================================
   COMPOSIÇÃO POR BREAKPOINT (Prompt 24) — grid-template-areas por faixa de largura.
   É UM ÚNICO Dashboard: mesmos cards, mesma ordem de leitura (DOM), composição adaptativa.
   Abaixo de 600px NÃO se usa grid-area (empilhamento simples na ordem do DOM).
   ========================================================= */

/* --- Celular paisagem / tablet retrato: 2 colunas, só os pares equilibrados lado a lado (§4) --- */
@media (min-width: 600px) {
  .dash-card--perfil   { grid-area: perfil; }
  .dash-card--sexo     { grid-area: sexo; }
  .dash-card--faixa    { grid-area: faixa; }
  .dash-card--frota    { grid-area: frota; }
  .dash-card--vistoria { grid-area: vistoria; }
  .dash-card--situacao { grid-area: situacao; }
  .dash-card--insights { grid-area: insights; }

  .dash-grid {
    grid-template-columns: 1fr 1fr; gap: 14px;
    grid-template-areas:
      "perfil   sexo"
      "faixa    faixa"
      "frota    frota"
      "vistoria vistoria"
      "situacao situacao"
      "insights insights";
  }
  .dash-kpis { grid-template-columns: repeat(3, 1fr); }
  .dash-chart { height: 180px; }
  .dash-chart--tall { height: 198px; }
  .dash-card--faixa .dash-datarows--grid,
  .dash-card--frota .dash-datarows--grid,
  .dash-card--situacao .dash-datarows--grid { grid-template-columns: 1fr 1fr; }
  .dash-card--vistoria .dash-vist-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Tablet paisagem / notebook: 3 colunas, comportamento de painel analítico (§5/§6) --- */
@media (min-width: 960px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr 1fr; gap: 16px;
    grid-template-areas:
      "perfil   sexo     faixa"
      "frota    frota    frota"
      "vistoria situacao insights";
  }
  .dash-kpis { grid-template-columns: repeat(3, 1fr); }
  .dash-chart { height: 174px; }
  .dash-chart--tall { height: 220px; }

  /* Perfil/Sexo: a rosca cresce (peso 2) e as linhas de dados também (peso 1, espalhadas) —
     juntas preenchem toda a altura que o vizinho mais alto da linha impõe, sem sobrar vazio.
     Chart.js (maintainAspectRatio:false) acompanha o container. */
  .dash-card--perfil .dash-chart,
  .dash-card--sexo .dash-chart {
    flex: 2 1 0; height: auto; min-height: 170px; max-height: 300px;
  }
  .dash-card--perfil .dash-datarows,
  .dash-card--sexo .dash-datarows {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around;
  }
  .dash-card--situacao .dash-chart {
    flex: 1 1 auto; height: auto; min-height: 150px; max-height: 240px;
  }
  /* faixa: 5 barras horizontais compactas → card fica mais perto da altura dos cards de rosca
     ao lado (§7). Linhas em 1 coluna aqui (card estreito); frota — largura total — usa 3. */
  .dash-card--faixa .dash-chart { height: 150px; }
  .dash-card--faixa .dash-datarows--grid { grid-template-columns: 1fr; }
  .dash-card--situacao .dash-datarows--grid { grid-template-columns: 1fr; }
  .dash-card--frota .dash-datarows--grid { grid-template-columns: repeat(3, 1fr); }

  /* Vistoria não tem gráfico: os 4 mini-KPIs preenchem o corpo do card (2×2), cada um
     centrado no seu quadrante — o card acompanha a altura da linha sem sobrar vazio (§8). */
  .dash-card--vistoria .dash-card__body { justify-content: stretch; }
  .dash-card--vistoria .dash-vist-grid {
    grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; flex: 1 1 auto;
  }
  .dash-card--vistoria .dash-vist-grid .dash-kpi {
    display: flex; flex-direction: column; justify-content: center; padding: 16px 14px;
  }
}

/* --- Desktop amplo: mesma composição, mais densidade e respiro (§6) --- */
@media (min-width: 1280px) {
  .dash-grid { gap: 18px; }
  .dash-chart { height: 190px; }
  .dash-chart--tall { height: 236px; }
  .dash-card--faixa .dash-chart { height: 168px; }
  .dash-card--perfil .dash-chart,
  .dash-card--sexo .dash-chart { max-height: 340px; }
  .dash-card--situacao .dash-chart { max-height: 300px; }
  .dash-card--faixa .dash-datarows--grid { grid-template-columns: 1fr 1fr; }
  .dash-card--frota .dash-datarows--grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Paisagem com pouca altura (celular deitado): gráficos mais baixos (§20) --- */
@media (orientation: landscape) and (max-height: 560px) {
  .dash-chart { height: 150px; }
  .dash-chart--tall { height: 166px; }
}

/* --- Celular estreito --- */
@media (max-width: 400px) {
  .dash-grid { gap: 12px; }
  .dash-chart { height: 154px; }
  .dash-chart--tall { height: 174px; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-cta, .dash-datarow--link, .dash-card { transition: none; }
}

/* ============================================================================================
   CALENDÁRIO ADMINISTRATIVO — BLOCO 3 (05/09/2026). Infra de dias úteis do PAT.
   Só componentes de layout; nenhuma regra de dia útil vive aqui (isso é o motor).
   ============================================================================================ */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-monthnav { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.cal-monthnav__label { display: flex; gap: 6px; }
.cal-monthnav__label select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; }
.cal-monthnav .btn { padding: 6px 12px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid + .cal-grid { margin-top: 4px; }
.cal-grid--head { margin-bottom: 4px; }
.cal-wd { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; padding: 2px 0; }

.cal-day { position: relative; min-height: 62px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 4px 4px 2px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; color: var(--text); transition: border-color .12s, box-shadow .12s; }
.cal-day:hover { border-color: var(--blue-500); box-shadow: var(--shadow-1); }
.cal-day--fora { opacity: .42; }
.cal-day--nao-util { background: color-mix(in srgb, var(--gray-100) 60%, var(--surface)); }
.cal-day.is-hoje { border-color: var(--blue-600); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue-500) 30%, transparent); }
.cal-day__num { font-size: 12px; font-weight: 700; align-self: flex-end; }
/* P7.2-F — a DESCRIÇÃO cadastrada pelo administrador é a identificação primária do dia; o tipo
   entra abaixo como classificação. Trunca em 2 linhas para não deformar a célula (texto completo
   no title/tooltip e no detalhe do dia). */
.cal-day__desc { font-size: 9.5px; line-height: 1.15; font-weight: 600; color: var(--text); align-self: stretch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-day--nao-util .cal-day__desc { color: var(--text-muted); }
.cal-day__badge { font-size: 8.5px; line-height: 1.15; font-weight: 700; color: var(--white); padding: 1px 4px; border-radius: 3px; align-self: stretch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.cal-legend__item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.cal-legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.cal-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--white); background: var(--cal-badge-cor, var(--gray-500)); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }

.cal-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cal-filtros .field { margin: 0; }

.cal-list-wrap { overflow-x: auto; }
.cal-list { width: 100%; border-collapse: collapse; font-size: 12px; }
.cal-list th { text-align: left; padding: 7px 8px; border-bottom: 2px solid var(--border); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; }
.cal-list td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cal-list__inativo { opacity: .5; }

.cal-tag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--gray-100); color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.cal-tag--ativo { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.cal-tag--pendente { background: color-mix(in srgb, #b45309 16%, transparent); color: #b45309; }
.cal-tag--conflito, .cal-tag--erro { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

@media (max-width: 480px) {
  .cal-day { min-height: 52px; }
  .cal-day__badge { font-size: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PAT 3.0 — F2-B: nova Ficha orientada por procedimento (painel persistente + 7 momentos +
   "próxima ação"). Reusa .card/.status-pill/.btn; só acrescenta o prefixo pat-. Tablet-first:
   alvos de toque >= 44px, sem dependência de hover, faixas rolam no próprio contêiner.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.pat-ficha-header { padding: 14px 16px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.pat-ficha-header__row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pat-ficha-header__id { font-family: var(--font-data); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.pat-ficha-header__k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-right: 6px; }
.pat-ficha-header__momento { font-size: 15px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pat-ficha-header__momento strong { font-family: var(--font-display); }
.pat-ficha-header__sit { font-size: 12px; }
.pat-ficha-header__pendencias,
.pat-ficha-header__prazo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12.5px; }
.pat-ficha-header__resp { font-size: 11.5px; }

/* progresso — 7 segmentos, estado real do procedimento (não "abas visitadas") */
.pat-progresso { display: flex; flex-direction: column; gap: 4px; }
.pat-progresso__track { display: flex; gap: 3px; }
.pat-progresso__seg { flex: 1; height: 6px; border-radius: 999px; background: var(--gray-100); transition: background .2s; }
[data-theme="dark"] .pat-progresso__seg { background: #24304c; }
.pat-progresso__seg.is-concluido { background: var(--success); }
.pat-progresso__seg.is-atual { background: var(--accent); }
.pat-progresso__caption { font-size: 10.5px; color: var(--text-muted); }

/* próxima ação — o elemento mais importante da nova experiência */
.pat-proxima-acao {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)) 0%, var(--surface) 70%);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.pat-proxima-acao--card { margin: 0; }
.pat-proxima-acao__eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
[data-theme="dark"] .pat-proxima-acao__eyebrow { color: #6faaff; }
.pat-proxima-acao__text { font-size: 14px; font-weight: 600; line-height: 1.35; }
.pat-proxima-acao__cta { align-self: flex-start; min-height: 40px; }

/* chips de pendências */
.pat-chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.pat-chip {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger);
}

/* prazo — cores por nível */
.pat-prazo--ok { color: var(--success); }
.pat-prazo--atencao { color: #b7791f; }
[data-theme="dark"] .pat-prazo--atencao { color: #e0b060; }
.pat-prazo--vencido { color: var(--danger); font-weight: 700; }
.pat-prazo--sem_data { color: var(--text-muted); }

/* navegação pelos 7 momentos — primária */
/* UX3 (ADR-38) — macronavegação: 4 MACROFASES + Histórico. Mesma pílula-stepper com scroll
   horizontal mascarado do `.pat-momentos` que substitui (menos botões → menos scroll). */
.pat-macros, .pat-momentos { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pat-macros::-webkit-scrollbar, .pat-momentos::-webkit-scrollbar { display: none; }
.pat-macros__sep, .pat-momentos__sep { flex: none; width: 1px; align-self: stretch; background: var(--border); margin: 4px 2px; }
.pat-macro-btn, .pat-momento-btn {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--navy-900);
  font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: .15s;
}
[data-theme="dark"] .pat-macro-btn, [data-theme="dark"] .pat-momento-btn { color: var(--text); }
.pat-macro-btn__n, .pat-momento-btn__n {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 999px; background: var(--gray-100); color: var(--text-muted); font-size: 10.5px; font-weight: 800;
}
[data-theme="dark"] .pat-macro-btn__n, [data-theme="dark"] .pat-momento-btn__n { background: #24304c; }
.pat-macro-btn.is-concluido .pat-macro-btn__n, .pat-momento-btn.is-concluido .pat-momento-btn__n { background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); }
.pat-macro-btn.is-atual, .pat-momento-btn.is-atual { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pat-macro-btn.is-active, .pat-momento-btn.is-active { background: var(--accent-grad); border-color: transparent; color: var(--white); box-shadow: 0 6px 14px -6px rgba(21,101,216,.55); }
.pat-macro-btn.is-active .pat-macro-btn__n, .pat-momento-btn.is-active .pat-momento-btn__n { background: rgba(255,255,255,.28); color: var(--white); }
.pat-macro-btn--ref, .pat-momento-btn--ref { font-weight: 600; color: var(--text-muted); }

/* sub-faixa de abas do momento — mesma pílula das abas legadas, um degrau menor */
.apu-tabs--sub { padding-top: 0; }
.apu-tabs--sub .apu-tab-btn { font-size: 12px; padding: 7px 12px; }

/* verificação inicial — checklist orientativo (não é formulário) */
.pat-badge-count { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 8px; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); vertical-align: middle; }
.pat-badge-count.is-ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pat-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pat-checklist__item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pat-checklist__item:last-child { border-bottom: 0; }
.pat-checklist__mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; font-size: 12px; font-weight: 800; flex: none; }
.pat-checklist__item.is-ok .pat-checklist__mark { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.pat-checklist__item.is-pendente .pat-checklist__mark { background: var(--gray-100); color: var(--text-muted); }
[data-theme="dark"] .pat-checklist__item.is-pendente .pat-checklist__mark { background: #24304c; }
.pat-checklist__status { margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.pat-checklist__item.is-ok .pat-checklist__status { color: var(--success); }

@media (max-width: 480px) {
  .pat-ficha-header { padding: 12px 13px; }
  .pat-proxima-acao__text { font-size: 13px; }
}

/* PAT 3.0 — F2-D-B1.1 · layout dos cards da Demanda ──────────────────────────────────────────
   Campos textuais longos (Assunto/Objeto/Local/Origem) ocupam LARGURA TOTAL; só os pares
   data/hora usam .pat-2col (colapsa no mobile). O objeto em leitura é justificado. */
.pat-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
@media (max-width: 560px) { .pat-2col { grid-template-columns: 1fr; } }
.pat-read { margin-bottom: 12px; }
.pat-read__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.pat-read__value { font-family: var(--font-data); font-size: 14px; font-weight: 600; margin-top: 2px; word-break: break-word; }
/* HOTFIX S1 §11 — a "Descrição do objeto" herda EXATAMENTE a tipografia dos demais valores do card
   (font-family/size/weight/letter-spacing/cor de `.pat-read__value`, aplicada em conjunto no HTML:
   class="pat-read__value pat-read__value--obj"). Este modificador só carrega as diferenças
   necessárias de PARÁGRAFO — nunca mexe no tamanho/peso/família da fonte. F2-D-A2e §7: justificado,
   SEM hifenização automática, preserva parágrafos/quebras, quebra natural só em palavras longas. */
.pat-read__value--obj {
  text-align: justify; text-justify: inter-word; line-height: 1.5;
  hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; word-break: normal;
  white-space: pre-wrap;
}
.pat-origem-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 2px; }
.pat-origem-item + .pat-origem-item { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.pat-hist { border-left: 3px solid var(--border); padding-left: 10px; margin-top: 12px; }
/* F2-D-A2e / A2e.3 — cada Demanda é um bloco (borda + tint + espaçamento) dentro do card "Demanda".
   SEM numeração "Demanda 1/2": a própria borda separa os blocos; cada um começa pela Origem. O
   `__titulo` sobrou só para o marcador do registro LEGADO ainda não estruturado. */
.pat-demanda-bloco { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 10px; background: color-mix(in srgb, var(--border) 8%, transparent); }
.pat-demanda-bloco:first-child { margin-top: 0; }
.pat-demanda-bloco__titulo { font-weight: 700; font-size: 12px; letter-spacing: .02em; margin-bottom: 8px; color: var(--text-muted); text-transform: uppercase; }
/* APU-DEMANDAS-01 — cartão da Demanda em APURAÇÕES: com o detalhe aberto, o resumo (relato truncado + meta) some para não repetir o conteúdo. */
.pat-demanda-bloco details[open] > summary .pat-demanda-resumo { display: none; }
/* F3-B — MOMENTO 3 "PLANO DE APURAÇÃO": bloco compacto de Demandas recebidas, lista de Pontos e
   editor mínimo inline. Sem numeração de Demanda (mesma disciplina da A2e.3). */
.pat-plano-demandas { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 4px 0 12px; background: color-mix(in srgb, var(--border) 6%, transparent); }
.pat-plano-demanda { font-size: 12.5px; }
.pat-plano-demanda--sep { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.pat-plano-demanda__head { font-weight: 600; }
.pat-plano-demanda__assunto { color: var(--text); margin-top: 2px; }
.pat-plano-demanda__mais > summary { cursor: pointer; color: var(--text-muted); font-size: 11.5px; margin-top: 3px; }
.pat-plano-demanda__obj { margin-top: 4px; white-space: pre-wrap; color: var(--text-muted); font-size: 12px; }
.pat-plano-status { font-size: 11.5px; color: var(--text-muted); margin: 0 0 8px; }
.pat-plano-status--ok { color: var(--ok, #1a7f37); font-weight: 600; }
.pat-plano-lista { display: flex; flex-direction: column; gap: 8px; }
.pat-plano-item { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; }
.pat-plano-item--editando { border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, var(--border)); background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent); }
.pat-plano-item--cancelado { opacity: .6; }
.pat-plano-item__num { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.pat-plano-item__q { margin-top: 2px; white-space: pre-wrap; }
.pat-plano-item__pergunta { margin-top: 3px; font-size: 12px; font-style: italic; color: var(--text-muted); }
.pat-plano-item__decorre { margin-top: 3px; font-size: 11px; }
.pat-plano-editor { display: flex; flex-direction: column; gap: 2px; }
.pat-plano-demanda-check { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.pat-check { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.35; }
.pat-check input { margin-top: 2px; flex: 0 0 auto; }
/* F4-B1 — seletor reutilizável "Questões relacionadas" (patQuestaoVinculoView.js). Integrado pelos
   atos de instrução a partir de F4-B2; mesma pílula-checkbox do vínculo Ponto→Demanda do Plano. */
.pat-questao-vinculo { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pat-questao-vinculo .pat-check span { color: var(--text); }
.pat-questao-vinculo .pat-check strong { color: var(--accent); font-variant-numeric: tabular-nums; }

/* F4-B2 — Diligências "Geração 2": chips de Questão vinculada, situação, resultado, e a projeção
   "Atos de instrução relacionados" dentro do card de uma Questão. Reusa `.pat-plano-*`. */
.pat-dilig-qas { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pat-dilig-qa { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
  color: var(--accent, #2563eb); }
.pat-dilig-geral { font-size: 11px; color: var(--text-muted); }
.pat-dilig-resultado { margin-top: 3px; font-size: 11.5px; white-space: pre-wrap; }
.pat-dilig-sit { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--gray-100, #eef1f5); color: var(--text-muted); }
[data-theme="dark"] .pat-dilig-sit { background: #24304c; }
.pat-dilig-sit--concluida { background: color-mix(in srgb, var(--success, #1a7f37) 16%, transparent); color: var(--success, #1a7f37); }
.pat-dilig-sit--em_andamento { background: color-mix(in srgb, var(--warning, #b7791f) 16%, transparent); color: var(--warning, #b7791f); }
.pat-dilig-sit--cancelada { text-decoration: line-through; }

/* S3-C1-B (13/09/2026) — redesenho do card de Diligência: objetivo em destaque, Constatação com
   maior hierarquia visual dentro do formulário de Ação, seção "Fotos e Documentos" separada dos
   demais campos. Reusa .pat-dilig-resultado/.pat-plano-lista/.pat-plano-item/.pat-analise-cons__*
   já existentes para tudo o mais — só o que não tinha equivalente ganha regra nova aqui. */
.pat-dilig-card__objetivo { font-size: 15px; font-weight: 600; margin-top: 2px; white-space: pre-wrap; }
.pat-dilig-campo-destaque label { font-size: 13px; color: var(--text); }
.pat-dilig-campo-destaque textarea { min-height: 88px; }
.pat-dilig-anexos { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 8px; }
/* S3-C1-B — fieldset/legend do formulário de Diligência/Ação passam a viver numa folha inferior
   (.sheet-overlay, fora de .s3-diligencias) — precisam de estilo próprio em vez do que só existia
   escopado à raiz antiga. */
.s3-editor fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.s3-editor legend { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; padding: 0 4px; }
.pat-qa-atos { margin-top: 8px; font-size: 12px; border-top: 1px dashed var(--border); padding-top: 6px; }
.pat-qa-atos > summary { cursor: pointer; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.pat-qa-atos[open] > summary { margin-bottom: 6px; }
.pat-qa-atos__lista { display: flex; flex-direction: column; gap: 3px; }
.pat-qa-atos__item { font-size: 12px; }
.pat-qa-atos__grupo { margin-top: 6px; }
.pat-qa-atos__grupo-tit { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }

/* F4-B7 — ANÁLISE POR QUESTÃO: bloco progressivo dentro do card da Questão (aba Plano) + visão
   consolidada (aba Análise). O texto exibido segue a mesma disciplina tipográfica da Demanda. */
.pat-qa-analise { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
.pat-qa-analise > summary { cursor: pointer; color: var(--text-muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pat-qa-analise[open] > summary { margin-bottom: 6px; }
.pat-qa-analise--editando { border-top: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, var(--border)); padding-top: 8px; }
.pat-qa-analise__result { display: inline-block; font-size: 10px; text-transform: none; letter-spacing: 0;
  padding: 1px 7px; border-radius: 999px; font-weight: 700;
  background: color-mix(in srgb, var(--success, #1a7f37) 16%, transparent); color: var(--success, #1a7f37); }
.pat-qa-analise__result--pendente { background: color-mix(in srgb, var(--warning, #b7791f) 16%, transparent); color: var(--warning, #b7791f); }
.pat-qa-analise__ctx { font-size: 11px; margin-bottom: 4px; }
.pat-qa-analise__preview, .pat-qa-analise__just, .pat-qa-analise__fund {
  font-size: 12px; margin-top: 4px; white-space: pre-wrap; text-align: justify; hyphens: none; }
.pat-qa-analise__fund span, .pat-qa-analise__fund strong { color: var(--warning, #b7791f); }

.pat-analise-cons__prog { font-size: 12px; font-weight: 600; margin-bottom: 8px;
  color: var(--accent, #2563eb); }
.pat-analise-cons__lista { display: flex; flex-direction: column; gap: 10px; }
.pat-analise-cons__item { border-left: 2px solid var(--border); padding-left: 10px; }
.pat-analise-cons__item--cancelada { border-left-color: transparent; font-size: 12px; color: var(--text-muted);
  text-decoration: line-through; }
.pat-analise-cons__head { display: flex; align-items: center; gap: 8px; }
.pat-analise-cons__cod { font-weight: 700; font-size: 12px; }
.pat-analise-cons__estado { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px; background: var(--surface-2, #eef2f7); }
.pat-analise-cons__estado--ok { background: color-mix(in srgb, var(--success, #1a7f37) 16%, transparent); color: var(--success, #1a7f37); }
.pat-analise-cons__estado--parcial { background: color-mix(in srgb, var(--warning, #b7791f) 16%, transparent); color: var(--warning, #b7791f); }
.pat-analise-cons__estado--pendente { color: var(--text-muted); }
.pat-analise-cons__q { font-size: 13px; margin-top: 2px; white-space: pre-wrap; }
.pat-analise-cons__preview, .pat-analise-cons__just { font-size: 11.5px; margin-top: 3px;
  white-space: pre-wrap; text-align: justify; hyphens: none; }
[data-theme="dark"] .pat-analise-cons__estado { background: #24304c; }

/* F4-B3 — vínculo Oitiva ↔ Questões: linha compacta de chips + botão, na lista de Oitivas. */
.pat-oit-vinculo-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--border); }
.pat-oit-vinculo-linha .btn { flex: 0 0 auto; }
.pat-oit-vinculo { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.pat-oit-vinculo--editando { border-top: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, var(--border)); padding-top: 8px; }
/* F4-B4 — Documentos e Evidências da Instrução: editor de vínculo (rótulo + Questões) e a
   projeção compacta "Evidências (N)" dentro do card de uma Diligência. */
.pat-evid-vinculo { display: flex; flex-direction: column; gap: 6px; }
.pat-evid-vinculo--editando { border-left: 2px solid color-mix(in srgb, var(--accent, #2563eb) 40%, var(--border)); padding-left: 8px; }
.pat-dilig-evid { margin-top: 3px; font-size: 11.5px; }
.pat-dilig-evid [data-evid-ver] { color: var(--accent, #2563eb); }

/* F4-B5 — Intimações/Notificações: seções progressivas do editor (Expedição / Ciência /
   Cumprimento) que só aparecem depois de o ato existir. Reusa .pat-plano-editor / .field. */
.pat-int-sec { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.pat-int-sec__tit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }

.pat-plano-cancelados { margin-top: 12px; font-size: 12.5px; }
.pat-plano-cancelados > summary { cursor: pointer; color: var(--text-muted); font-size: 11.5px; }
.pat-plano-cancelados[open] > summary { margin-bottom: 8px; }
.pat-plano-cancelados .pat-plano-item { margin-top: 6px; }

/* F2-D-A2c — linha de estado documental (documento da OSAF/PAF/Demanda, e "outros documentos iniciais"). */
.pat-doc-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 12.5px; }
.pat-doc-linha__nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pat-doc-linha__acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.pat-doc-linha .btn--sm { padding: 3px 8px; font-size: 11.5px; }