/* ============================================================
   MODAL DE FORMULÁRIO — sistema compartilhado (prefixo .fm-)
   ------------------------------------------------------------
   Um desenho só para todo formulário que abre pelo openModal de
   js/utils/ui.js: veículo (criar/editar), rastreador (criar/editar)
   e checklist de instalação. Quem abre marca o #modal-wrap com a
   classe `fm-modal`, porque o openModal não aceita classe própria.

   O card vira coluna flex de propósito: cabeçalho fixo, corpo
   rolável e rodapé colado embaixo. Sem isso, formulário longo
   estoura a viewport, porque .modal-wrap do vehicles-extra.css
   centraliza sem rolagem e .modal-card não tem max-height — em
   celular o botão de salvar ficava fora da tela, inalcançável.
   ============================================================ */
#modal-wrap.fm-modal {
  padding: 16px;
  overflow: hidden;
  /* Acima da barra inferior flutuante da PWA (app.css:439, z-index 2001), que
     na versão mobile cobria justamente o rodapé com Cancelar e Salvar.
     Continua ABAIXO de .ss-content (10001) e de .swal2-container (100000):
     a lista de busca dos selects e as confirmações do SweetAlert precisam
     seguir aparecendo por cima deste modal, não atrás dele. Por isso aqui
     não cabe o <dialog>/top layer usado na câmera — ele engoliria os dois. */
  z-index: 5000;
  /* Tokens do SlimSelect 2.x: o <select> real fica escondido, então
     estilizar .fm-field select não alcança o controle visível. */
  --ss-primary-color: #2563eb;
  --ss-bg-color: #ffffff;
  --ss-font-color: #0f172a;
  --ss-font-placeholder-color: #94a3b8;
  --ss-border-color: #e2e8f0;
  --ss-border-radius: 10px;
  --ss-main-height: 44px;
}

#modal-wrap.fm-modal .modal-card {
  /* max-width vem do app.css fixado em 560px; sem sobrescrever, a grade de
     duas colunas fica espremida e o `width` abaixo não tem efeito nenhum. */
  width: min(780px, 96vw);
  max-width: min(780px, 96vw);
  max-height: min(92vh, 940px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

#modal-wrap.fm-modal .modal-header {
  flex-shrink: 0;
  padding: 18px 22px;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
}

#modal-wrap.fm-modal .modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

#modal-wrap.fm-modal .modal-header .btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 1.3rem;
  line-height: 1;
  transition: all 0.15s ease;
}

#modal-wrap.fm-modal .modal-header .btn:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}

#modal-wrap.fm-modal .modal-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  display: flex;
  padding: 0;
  overflow: hidden;
}

.fm-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  gap: 0;
}

.fm-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 24px;
  background: #f8fafc;
}

/* --- Seções --- */
.fm-section + .fm-section { margin-top: 20px; }

.fm-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #64748b;
}

.fm-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #e2e8f0, rgba(226, 232, 240, 0));
}

.fm-card {
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 14px;
  padding: 16px;
}

/* --- Campos --- */
.fm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.fm-col-2 { grid-column: 1 / -1; }

.fm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fm-field > label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}

.fm-hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: #94a3b8;
}

.fm-field input,
.fm-field select {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 13px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #0f172a;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fm-field input::placeholder { color: #cbd5e1; }

.fm-field input:focus,
.fm-field select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.fm-field input:disabled,
.fm-field select:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

/* --- Bloco do plano (destaque âmbar: campo obrigatório) --- */
.fm-highlight {
  background: linear-gradient(180deg, #fffdf6, #fffbeb);
  border: 1.5px solid #fbbf24;
  border-radius: 14px;
  padding: 16px;
}

.fm-highlight .fm-field > label { color: #b45309; }

.fm-highlight select {
  font-weight: 700;
  border-color: #fbbf24;
}

.fm-highlight select:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.fm-req {
  padding: 3px 8px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Aviso (gate de 1ª ativação) --- */
.fm-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  color: #1e40af;
  font-size: 0.87rem;
  line-height: 1.5;
}

.fm-note svg { flex-shrink: 0; margin-top: 2px; color: #2563eb; }
.fm-note strong { color: #1d4ed8; }

/* --- Linha de status --- */
.fm-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 14px;
}

.fm-status-text strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: #0f172a;
}

.fm-status-text span {
  font-size: 0.78rem;
  color: #94a3b8;
}

/* --- Rodapé --- */
.fm-actions {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 22px;
  background: #fff;
  border-top: 1px solid #eef2f7;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.05);
}

.fm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1.5px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fm-btn-ghost {
  background: #fff;
  border-color: #e2e8f0;
  color: #475569;
}

.fm-btn-ghost:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.fm-btn-primary {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}

.fm-btn-primary:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.34);
}

.fm-btn-primary:active { transform: translateY(1px); }

/* --- SlimSelect dentro do modal ---
   A lista é renderizada em document.body (contentPosition: fixed) para não
   ser cortada pela área de rolagem do formulário; por estar fora do
   #modal-wrap, precisa passar por cima do overlay (z-index 1000). */
.ss-content { z-index: 10001; }

#modal-wrap.fm-modal .ss-main {
  min-height: 44px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font-size: 0.95rem;
  color: #0f172a;
}

#modal-wrap.fm-modal .ss-main:focus-within,
#modal-wrap.fm-modal .ss-main.ss-open-below,
#modal-wrap.fm-modal .ss-main.ss-open-above {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* --- Mobile: vira folha inteira, senão o rodapé some da tela --- */
@media (max-width: 640px) {
  /* dvh acompanha a barra do navegador entrando e saindo. Com o `inset:0`
     sozinho, o rodapé do formulário ficava atrás dela na PWA. */
  #modal-wrap.fm-modal { padding: 0; height: 100dvh; }

  #modal-wrap.fm-modal .modal-card {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    /* app.css:1977 dá `margin:10px` ao .modal-card abaixo de 480px. Somado a
       100vw, o card estourava a largura da tela e cortava a lateral direita. */
    margin: 0;
  }

  #modal-wrap.fm-modal .modal-header { padding: 14px 16px; }
  #modal-wrap.fm-modal .modal-header h3 { font-size: 1.05rem; }

  .fm-grid { grid-template-columns: 1fr; }
  .fm-scroll { padding: 16px 16px 20px; }
  .fm-card, .fm-highlight { padding: 14px; }

  .fm-actions {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* "Salvar alterações" quebrava em duas linhas e estourava a altura fixa do
     botão quando os dois dividiam a largura meio a meio. O primário fica com
     a sobra; o Cancelar só precisa do próprio texto. */
  .fm-actions .fm-btn { padding: 0 16px; }
  .fm-actions .fm-btn-ghost { flex: 0 0 auto; }
  .fm-actions .fm-btn-primary { flex: 1; }
}

.fm-btn { white-space: nowrap; }

/* ============================================================
   CHECKLIST FOTOGRÁFICO — modal de instalação
   ------------------------------------------------------------
   Linha = miniatura + título + estado. A miniatura é o próprio
   gatilho do <input type=file capture=environment>, que no
   celular abre a câmera traseira direto: a foto tem que nascer
   no ato da instalação para valer como registro do estado.
   ============================================================ */
.fm-lead {
  margin: 0 0 12px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: #64748b;
}

.fm-ck-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fm-ck-vazio {
  padding: 22px 16px;
  text-align: center;
  font-size: 0.86rem;
  color: #94a3b8;
  background: #fff;
  border: 1.5px dashed #e2e8f0;
  border-radius: 14px;
}

.fm-ck-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 14px;
}

.fm-ck-foto {
  position: relative;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.fm-ck-foto:hover { border-color: #2563eb; color: #2563eb; }

.fm-ck-foto.tem-foto {
  border-style: solid;
  border-color: #bbf7d0;
  padding: 0;
}

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

.fm-ck-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fm-ck-titulo {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 0.92rem;
  color: #0f172a;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fm-ck-titulo::placeholder { color: #cbd5e1; }

.fm-ck-titulo:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.fm-ck-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
}

.fm-ck-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.fm-ck-status.ok { color: #059669; }
.fm-ck-status.falta { color: #d97706; }

.fm-ck-remover {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fm-ck-remover:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.fm-add {
  width: 100%;
  margin-top: 10px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1.5px dashed #bfdbfe;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fm-add:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  border-style: solid;
}

.fm-erro {
  margin: 12px 0 0;
  padding: 11px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
}

.fm-btn:disabled { opacity: 0.65; cursor: progress; }

@media (max-width: 640px) {
  .fm-ck-foto { width: 60px; height: 60px; }
  .fm-ck-item { padding: 9px; gap: 10px; }
}

/* --- Campos monoespaçados (IMEI, ICCID, chaves) --- */
.fm-field input.fm-mono {
  font-family: 'Courier New', ui-monospace, monospace;
  letter-spacing: 0.5px;
}

.fm-field input[readonly] {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

.fm-field input[readonly]:focus {
  border-color: #e2e8f0;
  box-shadow: none;
}

/* --- Caixa de marcação embutida no rótulo (ex.: "É TAG") --- */
.fm-inline-check {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
}

.fm-inline-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2563eb;
  cursor: pointer;
}

@media (max-width: 640px) {
  .fm-inline-check { margin-left: 0; }
}

/* ============================================================
   CÂMERA EMBUTIDA (js/utils/camera-capture.js)
   ------------------------------------------------------------
   É um <dialog> aberto com showModal(), então vive na TOP LAYER
   e não disputa z-index com nada. Isso é necessário, e não
   preciosismo: a página já usa 99999 (cortina de auth, alertas,
   modal de renovação), 100000 (.swal2-container) e 9999999
   (histórico do veículo). Na PWA a câmera aparecia atrás deles.

   O z-index abaixo só vale no caminho de contingência, quando
   showModal não existe e o elemento fica sendo um bloco comum.

   Altura em dvh porque na PWA e no Chrome mobile a barra do
   navegador entra e sai: com 100vh o rodapé com o obturador
   ficava embaixo da barra, fora de alcance.
   ============================================================ */
.cam-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #f8fafc;
}

.cam-overlay::backdrop { background: #000; }

/* <dialog> nasce com display:none até abrir; o flex acima só vale aberto. */
.cam-overlay:not([open]) { display: none; }

.cam-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px));
  background: rgba(0, 0, 0, 0.86);
}

.cam-titulo {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-fechar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cam-fechar:hover { background: rgba(255, 255, 255, 0.22); }

.cam-palco {
  flex: 1;
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cam-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.cam-erro {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: min(420px, 90%);
  margin: 0;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: rgba(220, 38, 38, 0.92);
  border-radius: 10px;
}

.cam-bottom {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 24px calc(22px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.86);
}

.cam-trocar {
  justify-self: start;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cam-trocar:hover { background: rgba(255, 255, 255, 0.22); }

.cam-disparo {
  justify-self: center;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.cam-disparo span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  transition: background 0.15s ease;
}

.cam-disparo:hover span { background: #e2e8f0; }
.cam-disparo:active { transform: scale(0.94); }

.cam-espaco { justify-self: end; }

/* Botão secundário do item: escolher arquivo em vez de fotografar. */
.fm-ck-arquivo {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fm-ck-arquivo:hover { color: #2563eb; border-color: #bfdbfe; }

.cam-aviso {
  position: absolute;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(248, 250, 252, 0.75);
}

.cam-disparo:disabled {
  cursor: progress;
  border-color: rgba(255, 255, 255, 0.35);
}

.cam-disparo:disabled span { background: rgba(255, 255, 255, 0.35); }
.cam-disparo:disabled:active { transform: none; }

/* --- Área de texto --- */
.fm-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 92px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #0f172a;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fm-field textarea::placeholder { color: #cbd5e1; }

.fm-field textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* --- Cartão do sujeito: quem está sendo editado/agendado --- */
.fm-subject {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 14px;
}

.fm-subject-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fm-subject-info { min-width: 0; }

.fm-subject-nome {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-subject-meta {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Autocomplete simples (busca de cliente) --- */
.fm-ac-wrap { position: relative; }

.fm-ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.fm-ac-item {
  padding: 10px 13px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}

.fm-ac-item:last-child { border-bottom: none; }
.fm-ac-item:hover { background: #f8fafc; }

.fm-ac-nome { font-size: 0.9rem; font-weight: 700; color: #0f172a; }
.fm-ac-meta { margin-top: 2px; font-size: 0.76rem; color: #94a3b8; }

/* --- Visualizador de foto (js/utils/photo-viewer.js) --- */
.pv-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.pv-bottom {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.86);
}

.pv-acao {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
  border: none;
  border-radius: 23px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pv-acao:hover { background: #e2e8f0; }

/* Dica de que a miniatura com foto abre a visualização. */
.fm-ck-foto.tem-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 10s3-6 9-6 9 6 9 6-3 6-9 6-9-6-9-6z' transform='translate(0,0)'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/svg%3E") center / 20px no-repeat;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.fm-ck-foto.tem-foto:hover::after,
.fm-ck-foto.tem-foto:focus-visible::after { opacity: 1; }

/* --- Leitura de vistoria (js/utils/vistoria-viewer.js) --- */
.vst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.vst-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
}

.vst-item img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.vst-item:hover img { border-color: #2563eb; transform: translateY(-2px); }

.vst-item figcaption {
  font-size: 0.76rem;
  line-height: 1.3;
  font-weight: 600;
  color: #475569;
}

.vst-lista { display: flex; flex-direction: column; gap: 8px; }

.vst-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vst-linha:hover { border-color: #2563eb; background: #f8fafc; }
.vst-linha svg { margin-left: auto; color: #cbd5e1; flex-shrink: 0; }

.vst-placa {
  flex-shrink: 0;
  padding: 4px 10px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
}

.vst-info { display: flex; flex-direction: column; min-width: 0; }
.vst-info strong { font-size: 0.85rem; color: #0f172a; }
.vst-info span { font-size: 0.74rem; color: #94a3b8; }

.vst-n {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border-radius: 999px;
  padding: 3px 9px;
}

@media (max-width: 640px) {
  .vst-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .vst-item img { height: 88px; }
  .vst-n { display: none; }
}

/* --- Fiação registrada no detalhe do agendamento --- */
.apt-fio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.87rem;
  border-top: 1px dashed #f1f5f9;
}

.apt-fio:first-child { border-top: none; }
.apt-fio span { color: #64748b; }
.apt-fio strong { color: #0f172a; }

.apt-fio-data {
  margin-top: 8px;
  font-size: 0.72rem;
  color: #94a3b8;
}