/* Módulo Imóveis — ver plan/16 §9. Só tokens (claro e escuro).
 *
 * Tela 4 — cadastro manual em 4 passos (`web/novo.js`, `#/novo`). Medidas,
 * raios, sombras e pesos tirados do Stitch (docs/referencia/stitch-imoveis/
 * t4.html): cartão 12px, campo 8px, CTA 48px, trilho 6px em 4 segmentos.
 *
 * Toda cor mora nos dois blocos abaixo (claro e escuro) — nenhum hex nem rgba
 * fora deles (test_cadastro_passos.py confere). O que já existe em app.css
 * (--bg, --bg2, --bg3, --fg, --acao) é reusado; o resto nasce aqui com --ca-.
 */
:root {
  --ca-trilho: #eceef0;        /* surface-container: trilho, pílula da IA, Voltar */
  --ca-sec: #5c5f61;           /* secondary: dicas, rótulos */
  --ca-terc: #434d61;          /* tertiary: texto da pílula da IA, busca do CEP */
  --ca-icone: #5b403e;         /* on-surface-variant: ícone do cartão, nota do CEP */
  --ca-marca: #9f0019;         /* primary: rótulo ativo, kicker, check, preço */
  --ca-sel: #ffdad7;           /* primary-fixed: cartão escolhido */
  --ca-sel-fg: #410005;        /* on-primary-fixed: nome no cartão escolhido */
  --ca-nota-s: #e0e3e5;        /* surface-container-highest: aviso do CEP geral */
  --ca-busca-s: #d9e3fb;       /* tertiary-fixed: selo "Buscando…" */
  --ca-erro-s: #ffdad6;        /* error-container */
  --ca-erro-fg: #ba1a1a;       /* error */
  --ca-erro-ico: #93000a;      /* on-error-container */
  --ca-check-fg: #ffffff;      /* o ✓ sobre o selo carmesim */
  --ca-sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --ca-sombra-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --ca-veu: rgba(247, 249, 251, 0);   /* --bg transparente: o degradê do rodapé */
}

:root[data-tema="escuro"] {
  --ca-trilho: #262e38;
  --ca-sec: #9aa3ad;
  --ca-terc: #b8c3d9;
  --ca-icone: #d9c3c0;
  --ca-marca: #ff8a92;
  --ca-sel: #4a1a1f;
  --ca-sel-fg: #ffdad7;
  --ca-nota-s: #2a323d;
  --ca-busca-s: #1f2a40;
  --ca-erro-s: #45161b;
  --ca-erro-fg: #fda4ab;
  --ca-erro-ico: #fda4ab;
  --ca-check-fg: #2b0a0d;
  --ca-sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, .5);
  --ca-sombra-md: 0 4px 6px -1px rgba(0, 0, 0, .55), 0 2px 4px -2px rgba(0, 0, 0, .5);
  --ca-veu: rgba(14, 17, 22, 0);
}

/* ── coluna ─────────────────────────────────────────────────────────────── */
.ca-tela {
  max-width: 540px; margin: 0 auto; display: flex; flex-direction: column;
  color: var(--fg);
}
.ca-tela h1, .ca-tela h2, .ca-tela h3, .ca-tipo-nome, .ca-sub-nome, .ca-continuar,
.ca-voltar-btn, .ca-cep-campo input, .ca-fato strong, .ca-nota-anel strong {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Os botões do app nascem carmesim (app.css); aqui cada um tem a sua cara. */
.ca-tela button {
  background: none; color: inherit; border: 0; border-radius: 0; padding: 0;
  min-height: 0; font: inherit; cursor: pointer; text-align: inherit;
}
.ca-tela button:hover { background: none; }
.ca-tela button:focus-visible, .ca-tela input:focus-visible, .ca-tela select:focus-visible {
  outline: 2px solid var(--acao); outline-offset: 2px;
}
.ca-ico { width: 24px; height: 24px; flex: none; }

/* ── topo: ← Novo cadastro ──────────────────────────────────────────────── */
.ca-topo { display: flex; align-items: center; gap: 4px; min-height: 56px; margin: -12px 0 4px; }
.ca-tela .ca-voltar {
  width: 44px; height: 44px; margin-left: -4px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; color: var(--fg);
}
.ca-tela .ca-voltar:hover { background: var(--ca-trilho); }
.ca-titulo-tela { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; }

/* ── stepper ────────────────────────────────────────────────────────────── */
.ca-stepper {
  background: var(--bg2); border-radius: 12px; box-shadow: var(--ca-sombra-sm);
  padding: 16px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px;
}
.ca-stepper-l1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ca-stepper-atual { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px;
  font-weight: 600; letter-spacing: .01em; }
.ca-ponto { width: 8px; height: 8px; border-radius: 999px; background: var(--acao); flex: none; }
.ca-stepper .ca-ponto { animation: ca-pulso 2s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes ca-pulso { 50% { opacity: .5; } }
.ca-stepper-pct { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em;
  color: var(--ca-sec); white-space: nowrap; }
.ca-trilho { height: 6px; display: flex; gap: 4px; background: var(--ca-trilho);
  border-radius: 999px; overflow: hidden; }
.ca-trilho span { flex: 1; height: 100%; border-radius: 999px; background: var(--ca-trilho);
  transition: background .3s; }
.ca-trilho span.on { background: var(--acao); }
.ca-etapas { list-style: none; margin: 0; padding: 4px 0 0; display: flex; justify-content: space-between;
  gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ca-sec); }
.ca-etapas li { white-space: nowrap; }
.ca-etapas li.on { color: var(--ca-marca); font-weight: 700; }
.ca-etapas li.pulado { opacity: .5; text-decoration: line-through; }
/* Alvo de toque ≥ 44px (KI-238) sem mudar a linha do stepper: a caixa cresce
   14px para cima e para baixo e a margem negativa devolve o espaço. */
.ca-tela .ca-etapas button { color: var(--ca-sec); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 14px 0; margin: -14px 0; }
.ca-tela .ca-etapas button:hover { color: var(--fg); }

/* ── cabeçalho de cada passo ────────────────────────────────────────────── */
.ca-cab { margin-bottom: 16px; }
.ca-kicker { display: block; font-size: 12px; line-height: 16px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ca-marca); }
.ca-kicker-ponto { display: flex; align-items: center; gap: 4px; margin-bottom: 4px;
  text-transform: none; letter-spacing: .02em; }
.ca-cab h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.ca-cab h2:focus { outline: none; }
.ca-cab p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--ca-sec); }

/* ── passo 1: cartões de tipo ───────────────────────────────────────────── */
.ca-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
.ca-tela .ca-tipo {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 104px; padding: 16px; border-radius: 12px; background: var(--bg2);
  box-shadow: var(--ca-sombra-sm); text-align: center; transition: box-shadow .2s, background .2s;
}
.ca-tela .ca-tipo:hover { background: var(--bg2); box-shadow: var(--ca-sombra-md); }
.ca-tipo-ico { width: 40px; height: 40px; border-radius: 999px; background: var(--bg3);
  color: var(--ca-icone); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.ca-tipo-nome { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--fg); }
.ca-tipo-dica { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ca-sec); }
.ca-tela .ca-tipo.on, .ca-tela .ca-tipo.on:hover { background: var(--ca-sel); box-shadow: var(--ca-sombra-md); }
.ca-tipo.on .ca-tipo-ico { background: var(--acao); color: var(--acao-fg); }
.ca-tipo.on .ca-tipo-nome { color: var(--ca-sel-fg); }
.ca-tipo.on .ca-tipo-dica { color: var(--ca-marca); }
.ca-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 999px;
  background: var(--ca-marca); color: var(--ca-check-fg); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ca-sombra-sm); }
.ca-check .ca-ico { width: 14px; height: 14px; stroke-width: 2.6; }

.ca-ia { display: flex; justify-content: center; margin-bottom: 16px; }
.ca-tela .ca-ia-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 999px;
  background: var(--ca-trilho); color: var(--ca-terc); font-size: 13px; line-height: 18px;
  font-weight: 600; letter-spacing: .01em; min-height: 44px;
}
.ca-tela .ca-ia-link:hover { background: var(--ca-nota-s); }
.ca-ia-link .ca-ico { width: 18px; height: 18px; color: var(--ca-marca); }

/* ── passo 2: lista de subtipos ─────────────────────────────────────────── */
.ca-subs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.ca-tela .ca-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 16px; border-radius: 12px; background: var(--bg2); box-shadow: var(--ca-sombra-sm);
  text-align: left; transition: box-shadow .2s;
}
.ca-tela .ca-sub:hover, .ca-tela .ca-sub.on { background: var(--bg2); box-shadow: var(--ca-sombra-md); }
.ca-sub-ico { width: 40px; height: 40px; border-radius: 8px; background: var(--ca-trilho); color: var(--ca-sec);
  display: flex; align-items: center; justify-content: center; flex: none; }
.ca-sub-ico .ca-ico { width: 22px; height: 22px; }
.ca-sub-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 4px; }
.ca-sub-nome { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--fg); }
.ca-sub-dica { font-size: 14px; line-height: 20px; color: var(--ca-sec); }
.ca-sub-check { width: 24px; height: 24px; border-radius: 999px; background: var(--ca-trilho); color: transparent;
  display: flex; align-items: center; justify-content: center; flex: none; }
.ca-sub-check .ca-ico { width: 16px; height: 16px; stroke-width: 2.6; }
.ca-sub.on .ca-sub-ico { background: var(--ca-sel); color: var(--ca-marca); }
.ca-sub.on .ca-sub-check { background: var(--acao); color: var(--acao-fg); box-shadow: var(--ca-sombra-sm); }

/* ── cartões e campos (passos 3 e 4) ────────────────────────────────────── */
.ca-cartao { background: var(--bg2); border-radius: 12px; box-shadow: var(--ca-sombra-sm); padding: 16px; }
.ca-grade { display: grid; gap: 8px; }
.ca-grade-2 { grid-template-columns: 1fr 1fr; }
.ca-grade-uf { grid-template-columns: 1fr 72px; }
.ca-tela label { margin: 0; color: inherit; font-size: inherit; }

.ca-cep { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ca-cep-l1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.ca-cep-l1 label, .ca-campo > span, .ca-auto > span, .ca-rotulo {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ca-sec);
}
.ca-cep-estado { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ca-terc);
  background: var(--ca-busca-s); }
.ca-cep-estado.achou { background: var(--ca-sel); color: var(--ca-marca); }
.ca-cep-estado.nada { background: var(--ca-trilho); color: var(--ca-sec); }
.ca-girar { width: 12px; height: 12px; stroke-width: 3; animation: ca-gira 1s linear infinite; }
@keyframes ca-gira { to { transform: rotate(360deg); } }
.ca-cep-campo { position: relative; display: flex; align-items: center; }
.ca-tela .ca-cep-campo input {
  height: 48px; padding: 0 44px 0 12px; border: 0; border-radius: 8px; background: var(--bg3);
  color: var(--fg); font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em;
}
.ca-cep-ok { position: absolute; right: 12px; display: flex; color: var(--ca-marca); pointer-events: none; }
.ca-cep-ok .ca-ico { width: 20px; height: 20px; }

.ca-nota { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 12px;
  background: var(--ca-nota-s); margin-bottom: 16px; }
.ca-nota .ca-ico { width: 20px; height: 20px; color: var(--ca-terc); margin-top: 1px; }
.ca-nota p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ca-icone); }

.ca-endereco { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ca-endereco-l1 { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px;
  font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .01em; }
.ca-tela .ca-editar { display: inline-flex; align-items: center; gap: 2px; color: var(--ca-marca);
  font-size: 12px; line-height: 16px; font-weight: 600; min-height: 44px; min-width: 44px;
  margin: -6px 0; }            /* 44px de alvo (KI-238); a margem mantém a linha de 32px */
.ca-editar .ca-ico { width: 16px; height: 16px; }
/* O que o CEP trouxe: caixa cinza, texto firme, e continua sendo input. */
.ca-auto { display: flex; flex-direction: column; padding: 8px; border-radius: 8px; background: var(--bg3);
  cursor: text; }
.ca-tela .ca-auto input {
  padding: 0; border: 0; background: transparent; color: var(--fg); border-radius: 4px;
  font-size: 15px; line-height: 22px; font-weight: 600; min-height: 22px; width: 100%;
}
.ca-tela .ca-auto input:focus, .ca-tela .ca-auto input:focus-visible { outline: none; }
.ca-auto:focus-within { box-shadow: 0 0 0 2px var(--acao); }
/* Marca discreta do que veio do CEP: um ponto carmesim ao lado do rótulo. */
.ca-auto.preenchido > span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-radius: 999px; background: var(--acao); vertical-align: middle; }

.ca-legenda-auto { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px;
  font-weight: 600; letter-spacing: .02em; color: var(--ca-sec); }
.ca-legenda-auto::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--acao); flex: none; }
.ca-legenda-auto[hidden] { display: none; }
.ca-campo { display: flex; flex-direction: column; gap: 4px; }
.ca-campo-in { position: relative; display: flex; align-items: center; }
.ca-tela .ca-campo input, .ca-tela .ca-campo select {
  height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--bg2);
  box-shadow: var(--ca-sombra-sm); color: var(--fg); font-size: 15px; line-height: 22px; width: 100%;
}
.ca-tela .ca-dinheiro input { padding-left: 38px; font-variant-numeric: tabular-nums; }
.ca-prefixo { position: absolute; left: 12px; font-size: 13px; font-weight: 600; color: var(--ca-sec);
  pointer-events: none; }
.ca-tela[data-passo="3"] .ca-passo > .ca-grade-2 { margin-bottom: 32px; }

/* ── passo 4 ────────────────────────────────────────────────────────────── */
.ca-bloco { margin-bottom: 16px; }
.ca-rotulo { display: block; margin-bottom: 4px; }
.ca-secao { margin: 8px 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .01em; }
.ca-segmento { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--ca-trilho); }
.ca-tela .ca-segmento button {
  flex: 1; min-height: 44px; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--ca-sec);
  text-align: center;
}
.ca-tela .ca-segmento button.on, .ca-tela .ca-segmento button.on:hover {
  background: var(--bg2); color: var(--ca-marca); box-shadow: var(--ca-sombra-sm);
}

.ca-resumo { box-shadow: var(--ca-sombra-md); display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.ca-resumo-l1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ca-resumo-id { display: flex; flex-direction: column; min-width: 0; }
.ca-resumo-kicker { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .025em;
  text-transform: uppercase; color: var(--ca-marca); }
.ca-resumo h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; }
.ca-resumo-end { font-size: 14px; line-height: 20px; color: var(--ca-sec); }
.ca-nota-circ { display: flex; flex-direction: column; align-items: center; flex: none; }
.ca-nota-anel { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.ca-nota-anel svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ca-nota-anel path { fill: none; stroke-width: 3.5; }
.ca-nota-anel .trilho { stroke: var(--ca-trilho); }
.ca-nota-anel .valor { stroke: var(--acao); stroke-linecap: round; }
.ca-nota-anel strong { position: relative; font-size: 18px; line-height: 1; font-weight: 700; }
.ca-nota-circ > span { margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .02em; color: var(--ca-sec); white-space: nowrap; }
.ca-preco { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px;
  border-radius: 8px; background: var(--bg3); }
.ca-preco > span { font-size: 14px; line-height: 20px; color: var(--ca-sec); }
.ca-preco strong { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ca-marca); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-preco small { font-size: 14px; font-weight: 400; color: var(--ca-sec); }
.ca-fatos { display: grid; grid-template-columns: repeat(var(--fatos-colunas, 3), 1fr); gap: 4px; padding: 8px;
  border-radius: 8px; background: var(--bg3); text-align: center; }
.ca-fato { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.ca-fato .ca-ico { width: 18px; height: 18px; color: var(--ca-sec); }
.ca-fato strong { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }
.ca-fato span { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ca-sec); }

.ca-pendencias { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.ca-pend-t { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .01em; }
.ca-pend-t small { font-weight: 600; color: var(--ca-sec); }
.ca-pend { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: var(--bg3); }
.ca-pend-ico { width: 32px; height: 32px; border-radius: 999px; background: var(--ca-erro-s); color: var(--ca-erro-ico);
  display: flex; align-items: center; justify-content: center; flex: none; }
.ca-pend-ico .ca-ico { width: 18px; height: 18px; }
.ca-pend-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ca-pend-txt strong { font-size: 15px; line-height: 22px; font-weight: 600; }
.ca-pend-txt span { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ca-sec); }
.ca-selo { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--ca-erro-s); color: var(--ca-erro-fg);
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .02em; }

/* ── rodapé fixo: Continuar / Salvar ────────────────────────────────────── */
.ca-rodape {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)); margin-top: auto;
  background: linear-gradient(to bottom, var(--ca-veu), var(--bg) 16px);
}
@media (max-width: 760px) {
  body.sv-com-nav .ca-rodape { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
.ca-rodape-par { display: flex; gap: 8px; }
.ca-tela .ca-continuar {
  width: 100%; height: 48px; border-radius: 12px; background: var(--acao); color: var(--acao-fg);
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; box-shadow: var(--ca-sombra-md);
}
.ca-tela .ca-continuar:hover { background: var(--acao-hover); }
.ca-tela .ca-continuar:disabled, .ca-tela .ca-continuar:disabled:hover {
  background: var(--acao); color: var(--acao-fg); opacity: .45; box-shadow: none; cursor: not-allowed;
}
.ca-continuar .ca-ico { width: 20px; height: 20px; }
.ca-rodape-par .ca-continuar { flex: 1; width: auto; }
.ca-tela .ca-voltar-btn {
  width: 33.333%; height: 48px; border-radius: 12px; background: var(--ca-trilho); color: var(--fg);
  font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; text-align: center;
}
.ca-tela .ca-voltar-btn:hover { background: var(--ca-nota-s); }
.ca-tela .ca-texto-btn { height: 44px; color: var(--ca-sec); font-size: 13px; font-weight: 600; text-align: center; }
.ca-tela .ca-texto-btn:hover { color: var(--fg); }
.ca-erro { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--ca-erro-s); color: var(--ca-erro-fg);
  font-size: 14px; line-height: 20px; font-weight: 600; }

/* ── caminho por texto: o link de volta aos passos ──────────────────────── */
.ca-volta-passos { margin: 0 0 12px; }
.ca-oferta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
  .ca-stepper .ca-ponto, .ca-girar { animation: none; }
}