/* ═══════════════════════════════════════════════════════════════════════
   O TÓPICO IMÓVEIS — 16/09/2026 (proposta aprovada: lista + passo a passo)
   Desenho em `docs/sistema-visual-2026/imoveis-16-09/`.

   ⚠️ **Prefixo `imv-` em tudo.** Na prova, `.barra` colidiu com a barra
   superior do Hub e a barra de progresso virou um bloco gigante — nome
   genérico colide em silêncio.
   ⚠️ **Só tokens.** Cor de situação: livre usa `--faixa-alta`, onerado
   `--faixa-media`, e o resto é tinta. A cor do nível chega em `--imv-nivel`.
   ═══════════════════════════════════════════════════════════════════════ */

.imv {
  --imv-livre: var(--faixa-alta);
  --imv-onerado: var(--faixa-media);
  --imv-transmitido: var(--tinta-media);
  --imv-encerrada: var(--tinta-fraca);
  --imv-terceiro: var(--purpura-claro);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e4);
  color: var(--tinta);
}
.imv .mono,
.imv-mono {
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
}
.imv-ic {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.imv-rot {
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.imv-rot.ouro {
  color: var(--ouro);
}
.imv-esp {
  flex: 1;
}

/* ── Resumo ─────────────────────────────────────────────────────────── */
.imv-resumo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e3);
}
.imv-kpi {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--papel);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.imv-kpi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--k, var(--purpura));
}
.imv-kpi strong {
  font-family: var(--fonte-dado);
  font-size: var(--t-medio);
  font-weight: 500;
  color: var(--tinta-titulo);
  font-variant-numeric: tabular-nums;
}
.imv-kpi small {
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}
.imv-kpi.k-livre {
  --k: var(--imv-livre);
}
.imv-kpi.k-onus {
  --k: var(--imv-onerado);
}
.imv-kpi.k-fora {
  --k: var(--tinta-fraca);
}
.imv-kpi.k-sem {
  --k: var(--ouro);
}

/* ── Partes ─────────────────────────────────────────────────────────── */
.imv-pessoas {
  display: flex;
  gap: var(--e2);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--linha);
  background: var(--purpura-suave);
  overflow-x: auto;
}
.imv-pessoas button {
  flex: 1 1 0;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tinta-media);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.imv-pessoas button:hover {
  background: color-mix(in srgb, var(--papel) 55%, transparent);
}
.imv-pessoas button.ativo {
  background: var(--papel);
  box-shadow: var(--elev-2);
}
.imv-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--purpura-borda);
  background: var(--papel);
  color: var(--purpura);
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
}
.imv-pessoas .ativo .imv-av {
  border-color: transparent;
  background: var(--purpura-noturno);
  color: var(--ouro);
}
.imv-txt {
  min-width: 0;
}
.imv-txt b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: 0.02em;
}
.imv-txt small {
  display: block;
  font-size: var(--t-rotulo);
  color: var(--tinta-media);
  white-space: nowrap;
}
.imv-conta {
  flex: none;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--purpura-medio);
  color: var(--purpura);
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
}
.imv-conta.zero {
  background: transparent;
  color: var(--tinta-fraca);
  border: 1px dashed var(--linha-forte);
}

/* ── Botões ─────────────────────────────────────────────────────────── */
.imv-acoes {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
}
.imv-bt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--elev-1);
  font: inherit;
  font-size: var(--t-pequeno);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.imv-bt:hover:not(:disabled) {
  border-color: var(--purpura-borda);
  background: var(--purpura-suave);
}
.imv-bt:disabled {
  opacity: 0.55;
  cursor: default;
}
.imv-bt.primario {
  border-color: transparent;
  background: var(--purpura);
  color: var(--tinta-sobre-marca);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(19, 7, 40, 0.25);
}
.imv-bt.primario:hover:not(:disabled) {
  background: color-mix(in srgb, var(--purpura) 88%, var(--purpura-noturno));
}
.imv-bt.fantasma {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--tinta-media);
}
.imv-bt.fantasma:hover:not(:disabled) {
  background: var(--purpura-suave);
  color: var(--purpura);
}
.imv-bt.aberto {
  border-color: var(--purpura-borda);
  background: var(--purpura-suave);
  color: var(--purpura);
}
.imv-bt.p {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: var(--t-minusculo);
}
.imv-bt.perigo:hover:not(:disabled) {
  background: var(--atrasado-fundo);
  color: var(--atrasado);
}
.imv-bt[aria-pressed='true'] {
  border-color: var(--purpura);
  color: var(--purpura);
}

/* ── Pesquisas ──────────────────────────────────────────────────────── */
.imv-fontes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--linha-forte);
  border-radius: 10px;
}
.imv-fonte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel);
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}
.imv-fonte i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tinta-fraca);
}
.imv-fonte.ok i {
  background: var(--imv-livre);
}
.imv-fonte.falta i {
  background: transparent;
  border: 1.5px solid var(--ouro-escuro);
}
.imv-painel {
  padding: var(--e4);
  border: 1px solid var(--purpura-borda);
  border-radius: 12px;
  background: color-mix(in srgb, var(--purpura-suave) 50%, var(--papel));
}
.imv-painel-titulo {
  margin: 0 0 var(--e1);
  font-weight: 600;
  color: var(--tinta-titulo);
}
.imv-registros {
  display: grid;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  padding: 0;
  list-style: none;
}
.imv-registros li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  padding: var(--e2) var(--e3);
  border-radius: 10px;
  background: var(--papel);
  border: 1px solid var(--linha);
}
.imv-registro-nome {
  font-weight: 600;
  font-size: var(--t-pequeno);
}
.imv-registro-situacao {
  font-size: var(--t-minusculo);
  color: var(--tinta-fraca);
}
.imv-registro-situacao.feito {
  color: var(--imv-livre);
}
.imv-registro-acoes {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ── Lista ──────────────────────────────────────────────────────────── */
.imv-lista {
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--papel);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.imv-grade {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) 168px 136px 28px;
  gap: 14px;
  align-items: center;
}
.imv-cab {
  padding: 10px 16px;
  border-bottom: 1px solid var(--linha);
  background: var(--realce-fraco);
}
.imv-cab .dir {
  text-align: right;
}
.imv-vazio {
  margin: 0;
  padding: 18px 16px;
  font-size: var(--t-pequeno);
  color: var(--tinta-fraca);
}
.imv-linha {
  border-bottom: 1px solid var(--linha);
}
.imv-linha:last-child {
  border-bottom: 0;
}
.imv-linha.aberta {
  background: color-mix(in srgb, var(--purpura-suave) 60%, var(--papel));
}
.imv-linha-topo {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.imv-linha-topo:hover .imv-chev {
  border-color: var(--purpura-borda);
  color: var(--purpura);
}
.imv-sit-coluna {
  display: grid;
  justify-items: start;
  gap: 6px;
}
.imv-sit {
  --c: var(--tinta-media);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  background: color-mix(in srgb, var(--c) 9%, var(--papel));
  color: var(--c);
  font-size: var(--t-minusculo);
  font-weight: 600;
  white-space: nowrap;
}
.imv-sit i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}
.imv-sit.livre,
.imv-op.livre,
.imv-def.livre {
  --c: var(--imv-livre);
}
.imv-sit.onerado,
.imv-op.onerado,
.imv-def.onerado {
  --c: var(--imv-onerado);
}
.imv-sit.transmitido,
.imv-op.transmitido,
.imv-def.transmitido {
  --c: var(--imv-transmitido);
}
.imv-sit.encerrada,
.imv-op.encerrada,
.imv-def.encerrada {
  --c: var(--imv-encerrada);
}
.imv-sit.terceiro,
.imv-op.terceiro,
.imv-def.terceiro {
  --c: var(--imv-terceiro);
}
.imv-tag {
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--imv-onerado);
}
.imv-tag.cinza {
  color: var(--tinta-fraca);
}
.imv-bem b,
.imv-ato b,
.imv-valor b {
  display: block;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--tinta-titulo);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.imv-bem .imv-mono {
  display: block;
  margin-top: 2px;
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}
.imv-bem small,
.imv-ato small,
.imv-valor small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}
.imv-valor {
  text-align: right;
}
.imv-valor b {
  font-family: var(--fonte-dado);
  font-weight: 500;
}
.imv-valor b.na {
  color: var(--tinta-fraca);
}
.imv-chev {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta-media);
}

/* ── Detalhe ────────────────────────────────────────────────────────── */
.imv-detalhe {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.9fr;
  gap: 18px;
  margin: 0 16px;
  padding: 14px 0 16px;
  border-top: 1px dashed var(--linha-forte);
}
.imv-detalhe h5 {
  margin: 0 0 8px;
}
.imv-mini {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.imv-mini li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}
.imv-mini li b {
  font-family: var(--fonte-dado);
  font-weight: 500;
  color: var(--tinta);
  white-space: nowrap;
}
.imv-mini li.conta b {
  color: var(--purpura);
}
.imv-mini li em {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--purpura-suave);
  color: var(--purpura);
  font-style: normal;
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  white-space: nowrap;
}
.imv-mini li em.sit {
  background: color-mix(in srgb, var(--imv-onerado) 10%, var(--papel));
  color: var(--imv-onerado);
  text-transform: uppercase;
}
.imv-mini li em.sit.na {
  background: var(--realce);
  color: var(--tinta-fraca);
}
.imv-nada {
  margin: 4px 0 0;
  font-size: var(--t-minusculo);
  color: var(--tinta-fraca);
}
.imv-travas,
.imv-interpretacao,
.imv-detalhe-acoes {
  grid-column: 1 / -1;
}
.imv-travas {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-left: 3px solid var(--ouro);
  border-radius: 8px;
  background: var(--ouro-suave);
  font-size: var(--t-minusculo);
}
.imv-travas p {
  margin: 0;
}
.imv-interpretacao {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--realce-fraco);
  border: 1px dashed var(--linha-forte);
  font-size: var(--t-minusculo);
}
.imv-interpretacao.aceita {
  border-style: solid;
  border-color: color-mix(in srgb, var(--imv-livre) 40%, transparent);
}
.imv-interpretacao p {
  margin: 0 0 4px;
}
.imv-detalhe-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.imv-legenda {
  padding-left: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-left: 2px;
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}
.imv-legenda > span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.imv-info {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  color: var(--tinta-media);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-style: italic;
  font-size: 11px;
  line-height: 1;
}

/* ═══ A ficha passo a passo ══════════════════════════════════════════ */
.imv-ficha {
  overflow: hidden;
  border: 1px solid var(--purpura-borda);
  border-radius: 16px;
  background: var(--papel);
  box-shadow: var(--elev-2), 0 0 0 4px var(--purpura-suave);
}
.imv-ficha-topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--linha);
  background:
    linear-gradient(var(--linha) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--linha) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--papel);
}
.imv-ficha-topo h3 {
  margin: 6px 0 2px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--t-secao);
  line-height: 1.1;
  color: var(--tinta-titulo);
}
.imv-ficha-topo p {
  margin: 0;
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}
.imv-fechar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 1px solid var(--linha);
  border-radius: 9px;
  background: var(--papel);
  color: var(--tinta-media);
  cursor: pointer;
}
.imv-fechar:hover {
  color: var(--purpura);
  border-color: var(--purpura-borda);
}
.imv-lido-legenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta-media);
}
.imv-lido-legenda i {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--imv-livre);
}

.imv-passos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 14px 20px 16px;
  list-style: none;
  border-bottom: 1px solid var(--linha);
}
.imv-passos li {
  position: relative;
}
.imv-passos li::before {
  content: '';
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--linha);
}
.imv-passos li:first-child::before {
  display: none;
}
.imv-passos li.feito::before,
.imv-passos li.at::before {
  background: var(--purpura);
}
.imv-passos button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--tinta-fraca);
  font: inherit;
  font-size: var(--t-rotulo);
  text-align: center;
  cursor: pointer;
}
.imv-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--purpura-borda);
  background: var(--papel);
  color: var(--purpura);
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
}
.imv-passos li.feito .imv-n {
  border-color: transparent;
  background: var(--purpura);
  color: var(--tinta-sobre-marca);
}
.imv-passos li.at .imv-n {
  border: 2px solid var(--purpura);
  box-shadow: 0 0 0 4px var(--purpura-medio);
}
.imv-passos li.at button,
.imv-passos li.feito button,
.imv-passos li.visto button {
  color: var(--tinta);
  font-weight: 500;
}

.imv-ressalvas {
  margin: 14px 20px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--ouro);
  border-radius: 8px;
  background: var(--ouro-suave);
  font-size: var(--t-minusculo);
}
.imv-ressalvas ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.imv-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 20px;
  padding: 18px 20px 20px;
}
.imv-corpo:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.imv-passo-titulo {
  margin: 0 0 4px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--t-secao);
  color: var(--tinta-titulo);
}
.imv-passo-sub {
  margin: 0 0 14px;
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}

.imv-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.imv-op {
  --c: var(--purpura);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta-media);
  font: inherit;
  font-size: var(--t-pequeno);
  cursor: pointer;
}
.imv-op i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  opacity: 0.55;
}
.imv-op.on {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 8%, var(--papel));
  color: var(--c);
  font-weight: 600;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 12%, transparent);
}
.imv-op.on i {
  opacity: 1;
}
.imv-op.neutro {
  justify-self: start;
}
.imv-def {
  --c: var(--purpura);
  margin: 10px 0 16px;
  padding: 8px 12px;
  border-left: 3px solid var(--c);
  border-radius: 8px;
  background: var(--realce-fraco);
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}

.imv-grade-campos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.imv-campo {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.imv-campo.c1 {
  grid-column: span 1;
}
.imv-campo.c2 {
  grid-column: span 2;
}
.imv-campo.c3 {
  grid-column: span 3;
}
.imv-campo.c4 {
  grid-column: span 4;
}
.imv-campo.c6 {
  grid-column: span 6;
}
.imv-campo small {
  font-size: var(--t-rotulo);
  line-height: 1.35;
  color: var(--tinta-fraca);
}
.imv-rotulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-minusculo);
  font-weight: 500;
  color: var(--tinta-media);
  white-space: nowrap;
}
.imv-req {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purpura);
}
.imv-in {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  background: var(--papel);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.imv-in:focus-within {
  border-color: var(--purpura);
  box-shadow: 0 0 0 4px var(--purpura-medio);
}
.imv-in.lido {
  background: color-mix(in srgb, var(--imv-livre) 5%, var(--papel));
  box-shadow: inset 3px 0 0 var(--imv-livre);
}
.imv-in.lido:focus-within {
  box-shadow: inset 3px 0 0 var(--imv-livre), 0 0 0 4px var(--purpura-medio);
}
.imv-in input,
.imv-in select,
.imv-in textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-pequeno);
  outline: none;
}
.imv-in textarea {
  padding: 9px 0;
  resize: vertical;
  line-height: 1.45;
}
.imv-in.mono input {
  font-family: var(--fonte-dado);
}
.imv-pre,
.imv-suf {
  flex: none;
  font-style: normal;
  font-family: var(--fonte-dado);
  font-size: var(--t-minusculo);
  color: var(--tinta-fraca);
}
.imv-pre {
  margin-right: 8px;
}
.imv-suf {
  margin-left: 8px;
}
.imv-nota {
  margin: 10px 0 0;
  font-size: var(--t-rotulo);
  line-height: 1.45;
  color: var(--tinta-fraca);
}

.imv-bloco {
  margin: 18px 0;
}
.imv-bloco h5 {
  margin: 0 0 8px;
}
.imv-tabela {
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
}
.imv-tl {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-minusculo);
}
.imv-tl:last-child {
  border-bottom: 0;
}
.imv-tl-cab {
  background: var(--realce-fraco);
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.imv-tl.on {
  background: color-mix(in srgb, var(--purpura-suave) 70%, var(--papel));
}
.imv-tl input,
.imv-tl select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--linha);
  border-radius: 7px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-minusculo);
}
.imv-tl input[type='radio'] {
  width: 16px;
  height: 16px;
  accent-color: var(--purpura);
}
.imv-tl input.mono {
  font-family: var(--fonte-dado);
}
.imv-tabela > .imv-nada {
  padding: 8px 10px;
  margin: 0;
}
.imv-av-grade {
  grid-template-columns: 52px 1.3fr 1fr 1.4fr 0.95fr 26px;
}
.imv-gr-grade {
  grid-template-columns: 1.2fr 1.2fr 0.9fr 0.95fr 0.95fr 26px;
}
.imv-x {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tinta-fraca);
  cursor: pointer;
}
.imv-x:hover {
  background: var(--atrasado-fundo);
  color: var(--atrasado);
}
.imv-mais {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--purpura);
  font: inherit;
  font-size: var(--t-minusculo);
  font-weight: 500;
  cursor: pointer;
}
.imv-mini-sit {
  justify-self: start;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--imv-onerado) 10%, var(--papel));
  color: var(--imv-onerado);
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
}
.imv-mini-sit.na {
  background: var(--realce);
  color: var(--tinta-fraca);
}

.imv-ajuda {
  align-self: start;
  padding: 14px;
  border-radius: 12px;
  background: var(--purpura-noturno);
  color: var(--tinta-sobre-marca-forte);
  font-size: var(--t-minusculo);
  line-height: 1.5;
}
.imv-ajuda p {
  margin: 8px 0 0;
}
.imv-ajuda b {
  color: var(--tinta-sobre-marca);
}

.imv-pendencias {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--ouro);
  border-radius: 8px;
  background: var(--ouro-suave);
  font-size: var(--t-minusculo);
}
.imv-erro {
  margin: 0 20px 12px;
}

.imv-ficha-pe {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--linha);
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(6px);
}
.imv-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-minusculo);
  color: var(--tinta-media);
}
.imv-prog-barra {
  display: block;
  width: 120px;
  height: 6px;
  border-radius: 6px;
  background: var(--linha);
  overflow: hidden;
}
.imv-prog-barra i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--purpura), var(--purpura-claro));
}

/* ── A prévia da ficha do relatório ─────────────────────────────────── */
.imv-previa {
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--papel);
  overflow: hidden;
}
.imv-previa-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linha);
  background: var(--realce-fraco);
}
.imv-previa-topo .led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--imv-livre);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--imv-livre) 18%, transparent);
}
.imv-previa-topo small {
  margin-left: auto;
  font-size: var(--t-rotulo);
  color: var(--tinta-fraca);
}
/* ⚠️ **A prévia é a FOLHA IMPRESSA: papel branco e tinta escura nos dois
   temas.** Por isso usa `--papel-de-desenho` e tintas derivadas do
   `--purpura-noturno`, que não clareiam no escuro — `--tinta` clarearia e
   sumiria no branco. */
.imv-pv {
  --pv-tinta: var(--purpura-noturno);
  --pv-media: color-mix(in srgb, var(--purpura-noturno) 68%, var(--papel-de-desenho));
  --pv-fraca: color-mix(in srgb, var(--purpura-noturno) 48%, var(--papel-de-desenho));
  --pv-fio: color-mix(in srgb, var(--purpura-noturno) 12%, var(--papel-de-desenho));
  --pv-falta: color-mix(in srgb, var(--ouro) 62%, var(--purpura-noturno));
}
.imv-pv {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 0.95fr);
  margin: 14px;
  border-top: 2px solid var(--imv-nivel, var(--nivel-forensic));
  background: var(--papel-de-desenho);
  color: var(--pv-tinta);
  font-family: var(--fonte-corpo);
}
.imv-pv-num {
  grid-row: span 2;
  padding-top: 12px;
  text-align: center;
  background: color-mix(in srgb, var(--imv-nivel, var(--nivel-forensic)) 6%, var(--papel-de-desenho));
  color: var(--imv-nivel, var(--nivel-forensic));
}
.imv-pv-num b {
  display: block;
  font-family: var(--fonte-dado);
  font-size: 22px;
  font-weight: 400;
}
.imv-pv-num span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.imv-pv-cab {
  grid-column: span 2;
  padding: 12px 12px 10px 16px;
  border-bottom: 1px solid var(--pv-fio);
}
.imv-pv-objeto {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pv-tinta);
}
.imv-pv-mat {
  margin: 0;
  font-size: 11px;
  color: var(--pv-media);
}
.imv-pv-mat .mono {
  color: var(--pv-tinta);
}
.imv-pv-selo {
  padding: 12px 0 10px 12px;
  border-bottom: 1px solid var(--pv-fio);
}
.imv-pv-selo i,
.imv-pv-bloco i {
  display: block;
  margin: 8px 0 2px;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-fraca);
}
.imv-pv-selo i {
  margin-top: 0;
}
.imv-pv-classe {
  display: block;
  padding: 4px 6px;
  border: 1px solid var(--imv-nivel, var(--nivel-forensic));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--imv-nivel, var(--nivel-forensic));
}
.imv-pv-classe.livre {
  background: var(--imv-nivel, var(--nivel-forensic));
  color: var(--tinta-sobre-marca);
}
.imv-pv-classe.onerado {
  background: color-mix(in srgb, var(--imv-nivel, var(--nivel-forensic)) 8%, var(--papel-de-desenho));
}
.imv-pv-classe.transmitido,
.imv-pv-classe.encerrada {
  border-color: var(--pv-media);
  color: var(--pv-media);
}
.imv-pv-bloco {
  padding: 10px 12px 14px 16px;
}
.imv-pv-bloco + .imv-pv-bloco {
  border-left: 1px solid var(--pv-fio);
}
.imv-pv-bloco h6 {
  margin: 0 0 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--imv-nivel, var(--nivel-forensic));
}
.imv-pv-bloco p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}
.imv-pv-bloco p.mono {
  font-family: var(--fonte-dado);
}
.imv-pv-bloco p.forte {
  font-weight: 700;
}
.imv-pv-bloco p.cor {
  color: var(--imv-nivel, var(--nivel-forensic));
}
.imv-pv-bloco p.falta {
  color: var(--pv-falta);
  font-style: italic;
}

@media (max-width: 900px) {
  .imv-resumo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .imv-grade {
    grid-template-columns: minmax(0, 1fr) 28px;
  }
  .imv-grade > :nth-child(3),
  .imv-grade > :nth-child(4),
  .imv-cab > :nth-child(3),
  .imv-cab > :nth-child(4) {
    display: none;
  }
  .imv-detalhe,
  .imv-corpo {
    grid-template-columns: minmax(0, 1fr);
  }
  .imv-passos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 10px;
  }
}

/* ⚠️ O foco mora na moldura (`.imv-in`); o campo de dentro não desenha o seu. */
.imv-in input:focus,
.imv-in select:focus,
.imv-in textarea:focus,
.imv-in input:focus-visible,
.imv-in select:focus-visible,
.imv-in textarea:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}
.imv-in select {
  text-overflow: ellipsis;
}
.imv-alternar {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.imv-alternar small {
  max-width: 44ch;
}
/* Nos passos com tabela, a explicação vai numa faixa acima, e a tabela
   ganha a largura inteira. */
.imv-ajuda.faixa {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 4px 16px;
  margin-bottom: 16px;
}
.imv-ajuda.faixa p {
  grid-column: 2;
  margin: 0;
}
.imv-ajuda.faixa .imv-rot {
  grid-row: span 2;
  align-self: start;
  padding-top: 2px;
}