/*
 * Imóveis — a esteira do lote.
 *
 * O desenho daqui copia de propósito o que o cliente já fazia no Drive: uma
 * coluna por estado, e o imóvel andando da esquerda para a direita. O que ele
 * fazia arrastando pasta, aqui acontece sozinho.
 *
 * A regra visual é a mesma do Arquivo: a situação é a cor da peça, não uma
 * coluna de tabela. Num checklist, o que se procura é o que falta — e falta
 * não se acha lendo linha por linha.
 */

/* ── A esteira ────────────────────────────────────────────────────────────── */

.imv-esteira {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  align-items: flex-start;
}

.imv-coluna {
  flex: 0 0 272px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.imv-coluna > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 6px;
  border-bottom: 1px solid var(--linha);
}

.imv-coluna > header .nome {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -.01em;
}

.imv-coluna > header .conta {
  font-size: var(--t-sm);
  color: var(--texto-2);
  background: var(--cinza-suave);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}

/*
 * A matrícula desmembrada fica visível, e mais apagada: ela não anda mais, é
 * o histórico que os lotes herdam. Escondê-la deixaria os onze filhos sem
 * origem na tela.
 */
.imv-coluna[data-fase='desmembrado'] { opacity: .72; }

/* ── O cartão do imóvel ───────────────────────────────────────────────────── */

.imv-cartao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
  border-radius: var(--r-sm);
  padding: 10px 11px;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.imv-cartao:hover {
  border-color: var(--navy-texto);
  box-shadow: var(--sombra-sm);
  transform: translateY(-1px);
}

.imv-cartao[data-alerta='vencido'] { border-left-color: var(--tijolo); }
.imv-cartao[data-alerta='pedido'] { border-left-color: var(--ambar); }

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

.imv-topo .mono { font-size: var(--t-xs); color: var(--texto-3); }

.imv-matricula {
  font-size: var(--t-xs);
  color: var(--texto-2);
  white-space: nowrap;
}
/* Matrícula em branco não é descuido — é o lote esperando o cartório averbar. */
.imv-matricula[data-falta] { color: var(--texto-3); font-style: italic; }

.imv-cartao .imv-nome {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.imv-cartao .sub { font-size: var(--t-sm); color: var(--texto-2); margin-top: 2px; }

.imv-andamento { margin-top: 9px; }

.imv-andamento .linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

/*
 * A fração é o número que se lê em voz alta — "7 de 12". A barra abaixo dela
 * é só para o olho correr: se as duas competissem, a barra venceria, e barra
 * é justamente o que não se pode prometer numa papelada.
 */
.imv-andamento .fracao {
  font-size: var(--t-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.imv-andamento .de-que { font-size: var(--t-xs); color: var(--texto-3); }

.imv-aviso {
  margin-top: 8px;
  font-size: var(--t-sm);
  padding: 4px 7px;
  border-radius: var(--r-sm);
}
.imv-aviso[data-tom='tijolo'] { background: var(--tijolo-suave); color: var(--tijolo); }
.imv-aviso[data-tom='ambar'] { background: var(--ambar-suave); color: var(--ambar); }

/* ── O checklist ──────────────────────────────────────────────────────────── */

.imv-checklist { display: flex; flex-direction: column; gap: 12px; }

.imv-etapa {
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  overflow: hidden;
}
.imv-etapa[data-completa='1'] { border-color: rgba(122, 154, 94, .4); }

.imv-etapa > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--cartao-2);
  border-bottom: 1px solid var(--linha);
}

.imv-etapa > header .nome { font-size: var(--t-md); font-weight: 600; }
.imv-etapa > header .fase {
  font-size: var(--t-xs);
  color: var(--texto-3);
  margin-left: 7px;
}

.imv-etapa > header .conta {
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto-2);
}
.imv-etapa > header .conta[data-completa='1'] { color: var(--verde-escuro); }

.imv-itens { list-style: none; margin: 0; padding: 0; }

.imv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linha);
  transition: background var(--transicao);
}
.imv-item:last-child { border-bottom: 0; }
.imv-item:hover { background: var(--cinza-suave); }
/* Item opcional não pesa na contagem, e a tela diz isso antes de ser lido. */
.imv-item[data-opcional='1'] .nome { color: var(--texto-2); }

/*
 * A marca não é uma caixinha, e isso é o ponto do módulo: ela mostra o estado
 * do documento guardado, e o documento é que responde. Clicar leva ao arquivo,
 * onde se resolve — não marca nada aqui.
 */
.imv-item .marca {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--linha-forte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.imv-item .marca svg { width: 11px; height: 11px; }

.imv-item .marca[data-situacao='ok'] { background: var(--verde); border-color: var(--verde); }
.imv-item .marca[data-situacao='vencendo'] { background: var(--ambar); border-color: var(--ambar); }
.imv-item .marca[data-situacao='vencido'] { background: var(--tijolo); border-color: var(--tijolo); }
.imv-item .marca[data-situacao='pedido'] { border-color: var(--ambar); border-style: dashed; }
.imv-item .marca[data-situacao='falta'] { border-style: dashed; }

.imv-item .texto { flex: 1; min-width: 0; }
.imv-item .texto .nome { display: block; font-size: var(--t-md); }
.imv-item .texto .estado { display: block; font-size: var(--t-sm); color: var(--texto-2); margin-top: 1px; }

.imv-item[data-situacao='vencido'] .texto .estado { color: var(--tijolo); font-weight: 500; }

.imv-item .acoes { display: flex; align-items: center; gap: 4px; flex: none; }

.imv-ja-pedido {
  font-size: var(--t-xs);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ambar);
  background: var(--ambar-suave);
  padding: 2px 7px;
  border-radius: var(--r-pill);
}

.imv-mais-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--t-sm);
  color: var(--texto-3);
  background: none;
  border: 0;
  border-top: 1px dashed var(--linha);
  cursor: pointer;
  transition: color var(--transicao), background var(--transicao);
}
.imv-mais-item:hover { color: var(--navy-texto); background: var(--cinza-suave); }

/* ── Os lotes que nasceram de uma gleba ───────────────────────────────────── */

.imv-lotes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.imv-lote {
  text-align: left;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.imv-lote:hover { border-color: var(--navy-texto); background: var(--cartao); }
.imv-lote .mono { display: block; font-size: var(--t-xs); color: var(--texto-3); }
.imv-lote .nome { display: block; font-size: var(--t-sm); font-weight: 600; }
.imv-lote .sub { display: block; font-size: var(--t-xs); color: var(--texto-2); margin-top: 1px; }

/*
 * A etapa que só existe num imóvel.
 *
 * Mora fora da caixa do checklist, e não dentro dela como o "+ item": item
 * pertence a uma etapa, etapa pertence ao imóvel. Pôr os dois no mesmo lugar
 * faria o gesto raro parecer tão comum quanto o de todo dia.
 */
.imv-mais-etapa {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 12px;
  font-size: var(--t-sm);
  color: var(--texto-3);
  background: none;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao);
}
.imv-mais-etapa:hover { color: var(--navy-texto); border-color: var(--navy-texto); }

/* ── As pastas do imóvel ──────────────────────────────────────────────────── */

/*
 * Reaproveita a grade dos lotes: são a mesma coisa para o olho — caixas que
 * levam a outro lugar. O que muda é a tarja da esquerda, que aqui carrega a
 * situação, como no Arquivo.
 */
.imv-pasta { border-left: 3px solid var(--linha-forte); }
.imv-pasta[data-situacao='ok'] { border-left-color: var(--verde); }
.imv-pasta[data-situacao='vencendo'] { border-left-color: var(--ambar); }
.imv-pasta[data-situacao='pedido'] { border-left-color: var(--ambar); }
.imv-pasta[data-situacao='vencido'] { border-left-color: var(--tijolo); }
.imv-pasta[data-situacao='falta'] { border-left-style: dashed; }

/* ── Os modelos de checklist ──────────────────────────────────────────────── */

.imv-modelos { display: flex; flex-direction: column; gap: 8px; }

.imv-modelo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  background: var(--cartao-2);
}
/* Desativado continua visível: é o modelo que explica o checklist de 2026. */
.imv-modelo[data-inativo='1'] { opacity: .55; }
.imv-modelo .nome { display: block; font-size: var(--t-md); font-weight: 600; }
.imv-modelo .sub { display: block; font-size: var(--t-sm); color: var(--texto-2); margin-top: 1px; }
.imv-modelo .acoes { display: flex; gap: 6px; flex: none; }

.imv-etapas-form { display: flex; flex-direction: column; gap: 10px; }

.imv-etapa-form {
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  padding: 10px;
  background: var(--cartao-2);
}
.imv-etapa-form .topo { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }

/* Fora de `.campo`, então as bordas vêm daqui — as mesmas do resto dos
   formulários, para o editor não parecer outra aplicação. */
.imv-etapa-form input,
.imv-etapa-form textarea {
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: var(--t-md);
  background: var(--cartao);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.imv-etapa-form .topo input { flex: 1; font-weight: 600; }
.imv-etapa-form textarea { line-height: 1.55; resize: vertical; min-height: 110px; }
.imv-etapa-form input:focus,
.imv-etapa-form textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: var(--anel-verde);
}

/* ── O formulário de desmembramento ───────────────────────────────────────── */

.imv-lotes-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.imv-lote-linha {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
}

@media (max-width: 720px) {
  .imv-esteira { display: block; }
  .imv-coluna { width: 100%; margin-bottom: 12px; }
  .imv-lote-linha { grid-template-columns: 1fr 88px; }
}