/* Visual baseado no layout de referência aprovado (CLAUDE.md, seção 7.1). */
:root {
  --fundo: #f4f2ed;
  --superficie: #ffffff;
  --borda: #e6e2d9;
  --texto: #1d2a24;
  --texto-suave: #6b736e;
  --verde: #23413a;
  --verde-escuro: #1a3029;
  --verde-claro: #e8efe9;
  --positivo: #1f7a4d;
  --negativo: #b3432f;
  --dourado: #9a7b3c;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(20, 30, 25, .06), 0 4px 14px rgba(20, 30, 25, .04);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--texto);
  background: var(--fundo);
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
/* Identidade Flip Hub (decisão do dono, 2026-09-14): Bitter para os títulos, IBM Plex Sans no
   resto — a slab serif "com os pés no chão" só nos poucos momentos de destaque de cada página. */
h1, h2, .marca span { font-family: "Bitter", "Segoe UI", system-ui, serif; }
h1 { font-weight: 700; }
h2 { font-weight: 600; }
.marca span { font-weight: 700; }

.icone { width: 18px; height: 18px; flex-shrink: 0; }
.icone-medio { width: 28px; height: 28px; }
.icone-grande { width: 44px; height: 44px; }

/* ---------- estrutura ---------- */
.layout { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.menu {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px 16px; background: #f8f7f3; border-right: 1px solid var(--borda);
}
.menu-topo { display: flex; align-items: center; gap: 4px; }
.marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 20px; font-weight: 700; padding: 0 8px; color: var(--verde); overflow: hidden; }
/* "fliphub" minúsculo, nos dois verdes do logo escuro (não são as variáveis --verde/--verde-escuro
   da interface — são a tinta própria do logo, ver docs/design.md, seção 1) */
.marca-flip { color: #3b4a3c; }
.marca-hub { color: #002409; }
.marca-icone { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; border-radius: 6px; }
/* Botão flutuante na borda do menu (só o próprio .menu é posicionado — sticky —, então ele
   flutua sobre a borda real da barra lateral, não sobre o padding de .menu-topo). Recolhido,
   fica sempre visível (a barra já é só ícones); expandido, só aparece ao passar o mouse na barra. */
.botao-recolher-menu {
  position: absolute; top: 26px; right: -13px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1px solid var(--borda); border-radius: 50%; background: var(--superficie); color: var(--texto-suave);
  box-shadow: var(--sombra); cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .15s, background .15s, color .15s;
}
.menu:hover .botao-recolher-menu, .botao-recolher-menu:focus-visible { opacity: 1; pointer-events: auto; }
.botao-recolher-menu:hover { background: var(--verde-claro); color: var(--verde); }
.botao-recolher-menu .icone { width: 15px; height: 15px; }
html.menu-recolhido .botao-recolher-menu { opacity: 1; pointer-events: auto; }
/* O menu cabe na altura da tela: com todos os grupos abertos a lista de links rola por dentro e o
   rodapé (planos e Minha conta) continua sempre visível (pedido do dono, 2026-09-21) */
.menu-topo, .menu-rodape { flex-shrink: 0; }
.menu-links { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #d8d4c9 transparent; }
.menu-links a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: #3b4540; }
.menu-links a:hover { background: #efece5; }
.menu-links a.ativo { background: #e6e9e3; color: var(--verde); font-weight: 600; }
/* Seções do menu: "Prospecte" (só divisor) e "Gerencie" (details/summary, clicável) */
.menu-secao { margin: 14px 12px 2px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #97a19c; }
.menu-dropdown summary { list-style: none; cursor: pointer; }
.menu-dropdown summary::-webkit-details-marker { display: none; }
.menu-secao-clicavel { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 2px; padding: 8px 12px; border-radius: 10px; }
.menu-secao-clicavel:hover { background: #efece5; }
.chevron-menu { width: 13px; height: 13px; transition: transform .15s; }
.menu-dropdown[open] .chevron-menu { transform: rotate(180deg); }
.menu-dropdown a { padding-left: 34px; }
.menu-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.cartao-mini {
  display: flex; gap: 10px; padding: 14px; font-size: 12px; line-height: 1.5;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
}
.status { display: flex; align-items: center; gap: 6px; color: var(--texto-suave); margin-top: 4px; }
.bolinha { width: 7px; height: 7px; border-radius: 50%; background: var(--positivo); }
.link-planos { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 600; color: var(--verde); }
.link-planos .icone { width: 13px; height: 13px; }
.aviso-modo { font-size: 12px; color: var(--negativo); text-align: center; }
.menu-usuario {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--borda);
}
.usuario { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; font-weight: 600; color: #3b4540; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%; background: var(--verde); color: #fff;
}
.avatar .icone { width: 18px; height: 18px; }
.usuario-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ícone do sino à mesma distância da borda direita que o avatar da borda esquerda (padding do menu) */
.menu-usuario .sino { display: inline-flex; margin: -8px; padding: 8px; border-radius: 50%; color: #3b4540; }
.menu-usuario .sino:hover { background: #efece5; }

.conteudo { padding: 20px 28px 40px; min-width: 0; }
.topo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.busca {
  flex: 0 1 440px; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; color: var(--texto-suave);
}
.busca input { border: 0; outline: 0; background: transparent; width: 100%; font: inherit; color: var(--texto); }
.sino { margin-left: auto; color: #3b4540; padding: 8px; }

.coluna-principal { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.coluna-lateral { display: flex; flex-direction: column; gap: 16px; }
/* Início (print de referência do dono, 2026-09-14): Seus projetos + Regiões em alta; Novas
   oportunidades na largura toda; Anúncios analisados + coluna de ferramentas */
.inicio { display: flex; flex-direction: column; gap: 30px; }
.linha-inicio { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: stretch; }
.secao-inicio { display: flex; flex-direction: column; min-width: 0; }
.coluna-lateral-distribuida { justify-content: space-between; }
.painel-regioes-alta { display: flex; flex-direction: column; }
.painel-regioes-alta .lista-bairros { flex: 1; }
.ultima-atualizacao { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--texto-suave); }
.ultima-atualizacao .icone { width: 14px; height: 14px; }
.projetos-em-breve { flex: 1; display: flex; align-items: center; gap: 22px; padding: 28px; color: var(--verde); background: linear-gradient(120deg, #fbfaf7, var(--verde-claro)); }
.projetos-em-breve h3 { margin: 10px 0 6px; font-size: 18px; color: var(--texto); }
.projetos-em-breve p { max-width: 460px; line-height: 1.5; }
/* Novas oportunidades: título e cards dentro de um único quadro, como #quedas em Análises — os
   cards trocam a sombra pela borda fina (decisão do dono, 2026-09-14) */
.cards-novas { margin-top: 22px; }
.cards-novas .card { box-shadow: none; }

/* "Novas oportunidades" preenche a largura disponível (decisão do dono, 2026-09-16): o servidor
   manda 8 anúncios e aqui aparecem só os que cabem numa linha só, sem sobrar espaço em branco nem
   criar uma segunda fileira. A conta de cada faixa é a mesma do grid (.cards): cada card tem no
   mínimo 312px e o vão é 16px, então N cards precisam de N*312 + (N-1)*16 de largura.
   A medida é do próprio quadro (@container), não da janela — assim continua certo quando o menu
   lateral é recolhido, que alarga o quadro sem mudar o tamanho da tela. */
.painel-novas { container-type: inline-size; }
.cards-novas .card:nth-child(n+4) { display: none; }
@container (min-width: 1296px) { .cards-novas .card:nth-child(4) { display: flex; } }
@container (min-width: 1624px) { .cards-novas .card:nth-child(5) { display: flex; } }
@container (min-width: 1952px) { .cards-novas .card:nth-child(6) { display: flex; } }
@container (min-width: 2280px) { .cards-novas .card:nth-child(7) { display: flex; } }
@container (min-width: 2608px) { .cards-novas .card:nth-child(8) { display: flex; } }
/* Anúncios analisados: números da cidade + gráfico de novos anúncios, uma barra por dia */
.painel-analisados { display: flex; flex-direction: column; gap: 4px; }
.titulo-painel-analisados { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.titulo-painel-analisados h2 { font-size: 18px; color: var(--verde-escuro); }
.titulo-painel-analisados .icone { color: var(--verde); }
/* O card acompanha a altura da coluna de ferramentas ao lado (sem espaço em branco embaixo) */
.analisados-corpo { flex: 1; display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.analisados-numeros, .grafico-novos { margin: 0; padding: 18px; border: 1px solid var(--borda); border-radius: 12px; background: #fbfaf7; }
.analisados-numeros { display: flex; flex-direction: column; gap: 4px; }
.numero-grande { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 32px; font-weight: 700; color: var(--verde-escuro); }
.analisados-medias { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
.analisados-medias div { display: flex; flex-direction: column; gap: 2px; }
.analisados-medias strong { font-size: 15px; }
.analisados-medias span { font-size: 11px; line-height: 1.35; color: var(--texto-suave); }
.analisados-numeros .botao-compacto { width: auto; align-self: flex-start; margin-top: auto; padding: 9px 16px; }
.grafico-novos { display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.grafico-novos figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.grafico-novos figcaption .suave { font-size: 12px; }
.barras {
  flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; min-height: 160px;
  padding-bottom: 22px; background: repeating-linear-gradient(to top, #ece9e1 0 1px, transparent 1px 25%) 0 0 / 100% calc(100% - 22px) no-repeat;
}
.barra-dia { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; }
/* Barra fina, ponta de cima arredondada e presa na base; dia sem anúncio fica com um traço mínimo */
.barra { width: min(28px, 70%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--verde); transition: background .15s; }
.barra-dia:hover .barra, .barra-dia:focus-visible .barra { background: var(--verde-escuro); }
.barra-rotulo { position: absolute; bottom: -22px; font-size: 11px; color: var(--texto-suave); white-space: nowrap; }
.barra-dica {
  position: absolute; bottom: calc(100% + 6px); z-index: 5; padding: 5px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--verde-escuro); color: #fff; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.barra-dia:hover .barra-dica, .barra-dia:focus-visible .barra-dica { opacity: 1; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- blocos ---------- */
.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); }
.painel h3 { font-size: 16px; margin-bottom: 8px; }
.painel-titulo { display: flex; justify-content: space-between; align-items: baseline; }
.painel-titulo a { font-size: 12px; text-decoration: underline; color: var(--texto-suave); }
.painel-escuro { background: var(--verde-escuro); color: #f1f4f1; border: 0; }
.painel-escuro p { color: #c9d4cd; margin: 6px 0 10px; }
.painel-escuro h3 { margin-top: 10px; }
/* Ícone ao lado do título (em vez de acima), pra ocupar menos altura (pedido do dono, 2026-09-14) */
.cabecalho-painel-escuro { display: flex; align-items: center; gap: 10px; }
.cabecalho-painel-escuro h3 { margin: 0; }
.lista-recursos-alerta { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 12px; }
.painel-escuro .botao { margin-top: 8px; }
.lista-recursos-alerta li { display: flex; align-items: center; gap: 8px; color: #e3e9e4; }
.lista-recursos-alerta .icone { width: 16px; height: 16px; flex-shrink: 0; color: var(--dourado); }
.com-icone { display: flex; align-items: center; gap: 8px; }
.suave { color: var(--texto-suave); }
.nota { font-size: 11px; color: var(--texto-suave); margin-top: 12px; line-height: 1.5; }
.vazio { color: var(--texto-suave); padding: 16px 0; }
.positivo { color: var(--positivo); font-weight: 600; }
.negativo { color: var(--negativo); font-weight: 600; }

.botao {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 100%;
  margin-top: 12px; padding: 11px 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--verde); color: #fff; font: inherit; font-weight: 600;
}
.botao:hover { background: var(--verde-escuro); }
.botao-claro { background: #fff; color: var(--verde); }
.botao-claro:hover { background: #eef1ee; }

.destaque {
  position: relative; overflow: hidden; padding: 30px 28px 24px; border-radius: 18px; color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(214, 196, 150, .22), transparent 45%),
    linear-gradient(120deg, #182c26 0%, #23413a 55%, #3b5a4f 100%);
  display: flex; flex-direction: column; justify-content: center;
}
/* Foto do dono (Ponte Estaiada) com um degradê verde por cima, sólido à esquerda (onde fica o
   texto, sem nenhum traço da foto) e sumindo pra a direita, com a ponte em destaque no espaço
   vazio do card — decisão do dono, 2026-09-14, com base num print de referência (revisado no
   mesmo dia: imagem em resolução maior, um pouco menor/mais pra direita, degradê 100% opaco;
   saiu e voltou no mesmo dia, a pedido do dono). */
.destaque-skyline {
  background:
    linear-gradient(to right,
      #0f1c18 0%, #0f1c18 42%,
      rgba(15, 28, 24, .85) 55%, rgba(15, 28, 24, .6) 66%, rgba(15, 28, 24, .35) 78%, rgba(15, 28, 24, .15) 90%, rgba(15, 28, 24, 0) 100%),
    url('/static/img/skyline-ponte-estaiada.jpg') -28% 29% / 113% auto no-repeat;
}
.sobretitulo { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c9d4cd; }
.destaque h1 { font-size: 34px; line-height: 1.15; margin: 10px 0 12px; font-weight: 600; }
.subtitulo { color: #d7dfda; max-width: 460px; line-height: 1.5; }
.numeros { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 28px; }
.numeros > div { display: flex; flex-direction: column; gap: 4px; padding-right: 28px; border-right: 1px solid rgba(255, 255, 255, .15); }
.numeros > div:last-of-type { border-right: 0; }
.numeros strong { font-size: 20px; font-weight: 600; }
.numeros span { font-size: 12px; color: #c9d4cd; }
.pilula {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 14px;
  background: rgba(255, 255, 255, .92); color: var(--texto); border-radius: 999px; font-size: 12px; font-weight: 600;
}

.titulo-secao { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.titulo-secao h2 { font-size: 20px; }
.titulo-secao p { color: var(--texto-suave); margin-top: 4px; }
.titulo-secao > a { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-suave); white-space: nowrap; }
.titulo-pagina { font-size: 24px; margin-bottom: 4px; }

/* ---------- cards ---------- */
/* Largura mínima calculada pra "Potencial de lucro" caber 7 dígitos (até R$ -9.999.999) numa linha
   só dentro do quadro, sem quebrar (CLAUDE.md: card não é a causa de anúncio suspeito, é só layout) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(312px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
/* O card não corta o conteúdo (os textos do "?" podem passar da borda); só a foto é recortada */
.card .card-imagem { overflow: hidden; border-radius: var(--raio) var(--raio) 0 0; }
.card-imagem { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #e7ebe5, #d7ded6); }
.card-imagem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-imagem-vazia { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9aa79f; }
.selos { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.selo { padding: 4px 9px; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 600; box-shadow: var(--sombra); }
.selo-leilao { background: var(--verde); color: #fff; }
.selo-pequeno { padding: 2px 6px; font-size: 10px; box-shadow: none; }
.credito { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }

.card-corpo { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.preco { font-size: 18px; font-weight: 700; }
.preco-m2 { color: var(--texto-suave); font-size: 15px; }
.linha { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4b5550; }
.linha .icone { width: 15px; height: 15px; }
.caracteristicas { gap: 10px; flex-wrap: nowrap; overflow: hidden; }
.caracteristicas span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
.indicadores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.indicador { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 10px; background: var(--verde-claro); font-size: 11px; color: #4b5550; min-width: 0; }
.indicador strong { font-size: 17px; overflow-wrap: break-word; }
.indicador small { font-size: 10px; color: var(--texto-suave); }
.indicador-config { background: #f3f1ea; border: 1px dashed #d4cdbd; justify-content: center; }
.indicador-config small { color: var(--dourado); font-weight: 600; }
.card-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--borda); font-size: 11px; color: var(--texto-suave); }
.card-rodape a { display: inline-flex; align-items: center; gap: 4px; }
.card-rodape .icone { width: 14px; height: 14px; }
.data-favorito { display: inline-flex; align-items: center; gap: 5px; }

/* Coração: salvar nos favoritos */
.card { position: relative; transition: opacity .2s, transform .2s; }
.card.saindo { opacity: 0; transform: scale(.97); }
.form-favorito { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; }
.botao-favorito {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--verde); cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 30, 25, .2); transition: transform .15s, background .15s;
}
.botao-favorito .icone { width: 17px; height: 17px; }
.botao-favorito:hover { background: #fff; transform: scale(1.08); }
.botao-favorito.ativo { background: var(--verde); color: #fff; }
.botao-favorito.ativo .icone { fill: currentColor; }
.botao-favorito:focus-visible { outline: 2px solid #b9cbbf; outline-offset: 2px; }
.selo-fora { background: #4b5550; color: #fff; }
.selo-novo { background: var(--dourado); color: #fff; box-shadow: none; }
.card-fora-do-ar .card-imagem img { filter: grayscale(1); opacity: .55; }
.card-fora-do-ar .preco { color: var(--texto-suave); }

/* ---------- tabela ---------- */
.tabela-rolagem { padding: 4px 8px; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-weight: 500; font-size: 12px; color: var(--texto-suave); padding: 12px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid #f0ede6; white-space: nowrap; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .numero { font-variant-numeric: tabular-nums; }
.miniatura { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 38px; border-radius: 6px; overflow: hidden; background: #e3e8e2; color: #9aa79f; }
.miniatura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abrir { color: var(--texto-suave); }

/* ---------- formulários ---------- */
/* Compacto (2026-09-15): "Filtros rápidos" é o maior item da coluna ao lado de "Novas oportunidades"
   — encurtar aqui reduz o espaço em branco que sobrava dentro daquele quadro ao esticar pra
   acompanhar a coluna (.coluna-lateral-distribuida) */
.formulario { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.formulario .botao { margin-top: 4px; }
.formulario label, .filtros label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #4b5550; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
select, input {
  width: 100%; padding: 9px 10px; font: inherit; color: var(--texto);
  background: #fff; border: 1px solid var(--borda); border-radius: 8px;
}
select:focus, input:focus { outline: 2px solid #b9cbbf; border-color: #b9cbbf; }
/* Filtros em pílula (Pesquisar imóveis e Favoritos) */
.filtros-pilulas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding: 14px; }
.filtro-pilula {
  position: relative; flex: 1 1 170px; display: flex; flex-direction: column; justify-content: flex-start; gap: 1px;
  min-height: 50px; padding: 8px 34px 8px 44px; background: #f5f6f3; border: 1px solid #e8ebe5; border-radius: 16px;
  font-size: 11px; color: var(--texto-suave); cursor: pointer; transition: border-color .15s, background .15s;
}
.filtro-pilula:hover { border-color: #d3dbd4; }
.filtro-pilula:focus-within { background: #fff; border-color: #b9cbbf; box-shadow: 0 0 0 3px rgba(185, 203, 191, .35); }
/* O campo cobre a pílula inteira: clicar em qualquer ponto (inclusive na setinha) abre a lista */
.filtro-pilula > span { position: relative; z-index: 1; pointer-events: none; }
.filtro-pilula > select, .filtro-pilula > input {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 22px 34px 7px 44px;
  border: 0; border-radius: 16px; background: transparent; outline: 0;
  font-size: 13px; font-weight: 600; color: var(--verde-escuro); -webkit-appearance: none; appearance: none;
  cursor: pointer; text-overflow: ellipsis;
}
.filtro-pilula > input { cursor: text; }
.filtro-pilula > input::placeholder { color: #4f6259; opacity: 1; }
.filtro-pilula > input::-webkit-calendar-picker-indicator { display: none !important; }
.filtro-pilula > select:focus, .filtro-pilula > input:focus { outline: 0; }
/* Valor, Condomínio e Área: janelinha de mínimo e máximo abaixo do campo */
.faixa-botao {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px;
  width: 100%; padding: 8px 34px 7px 44px; border: 0; border-radius: 16px; background: transparent;
  font: inherit; font-size: 11px; color: var(--texto-suave); text-align: left; cursor: pointer;
}
.faixa-botao strong { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 600; color: var(--verde-escuro); }
.faixa-botao[aria-expanded="true"] + .pilula-chevron { transform: translateY(-50%) rotate(180deg); }
.faixa-janela {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; display: flex; align-items: flex-end; gap: 8px;
  width: 300px; padding: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 30, 25, .14); cursor: default;
}
.faixa-janela[hidden] { display: none; }
.faixa-janela label { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; color: #4b5550; }
.faixa-janela input { font-weight: 600; }
.faixa-traco { padding-bottom: 10px; color: var(--texto-suave); }
.pilula-chevron { position: absolute; right: 13px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; }
/* Ícone de cada filtro, à esquerda; não pega o clique (o campo por baixo cobre a pílula inteira) */
.pilula-icone { position: absolute; left: 15px; top: 50%; z-index: 1; width: 19px; height: 19px; transform: translateY(-50%); color: var(--verde); pointer-events: none; }
.filtros-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; padding: 0 4px; }
.botao-filtrar { width: auto; min-height: 50px; margin: 0; padding: 0 26px; border-radius: 16px; }
.filtros-acoes a { color: var(--texto-suave); font-size: 13px; }
.filtros-acoes a:hover { color: var(--verde); text-decoration: underline; }

.lista-bairros { list-style: none; padding: 0; margin: 10px 0 0; }
.lista-bairros li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0ede6; }
.lista-bairros li:last-child { border-bottom: 0; }
.lista-bairros a:hover { text-decoration: underline; }
.posicao-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.posicao { flex-shrink: 0; width: 20px; font-size: 11px; font-weight: 600; color: var(--texto-suave); }

/* ---------- pesquisa com mapa ---------- */
/* Cabeçalho fixo: fica no topo ao rolar e encolhe para só o título (+ botão, quando houver).
   Reaproveitado em Alertas (.cabecalho-alertas) — mesmo desenho, sem o botão de mapa. */
.cabecalho-pesquisa, .cabecalho-alertas {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: flex-end; gap: 20px; overflow: hidden;
  margin: -20px -28px 16px; padding: 24px 28px 14px; background: var(--fundo); border-bottom: 1px solid transparent;
  transition: box-shadow .2s, border-color .2s;
}
.cabecalho-textos { flex: 1; min-width: 0; }
/* Paisagem de SP ao fundo do cabeçalho: discreta, some da esquerda pra direita, atrás do texto */
.paisagem-sp {
  position: absolute; right: 0; bottom: 0; z-index: 0; width: min(64%, 920px); height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%);
  transition: opacity .2s;
}
.cabecalho-pesquisa .cabecalho-textos, .cabecalho-pesquisa .botao-mapa,
.cabecalho-alertas .cabecalho-textos, .cabecalho-alertas .cabecalho-acao { position: relative; z-index: 1; }
.cabecalho-pesquisa.compacto .paisagem-sp, .cabecalho-alertas.compacto .paisagem-sp { opacity: 0; }
.cabecalho-pesquisa h1, .cabecalho-alertas h1 { font-size: 28px; margin: 8px 0 6px; color: var(--verde-escuro); }
.cabecalho-descricao { max-width: 560px; line-height: 1.5; color: #4b5550; }
.ilustracao-cidade { flex: 0 1 280px; min-width: 160px; height: 112px; }
.botao-mapa {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--verde);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--sombra);
}
.botao-mapa:hover { background: var(--verde-claro); }
.botao-mapa[aria-pressed="false"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.botao-mapa .icone { width: 16px; height: 16px; }
.cabecalho-acao { flex-shrink: 0; width: auto; margin: 0; }
.cabecalho-pesquisa.compacto, .cabecalho-alertas.compacto { padding-top: 12px; padding-bottom: 10px; border-bottom-color: var(--borda); box-shadow: 0 4px 14px rgba(20, 30, 25, .06); }
.cabecalho-pesquisa.compacto .sobretitulo-favoritos, .cabecalho-alertas.compacto .sobretitulo-favoritos,
.cabecalho-pesquisa.compacto .cabecalho-descricao, .cabecalho-alertas.compacto .cabecalho-descricao,
.cabecalho-pesquisa.compacto .ilustracao-cidade { display: none; }
.cabecalho-pesquisa.compacto h1, .cabecalho-alertas.compacto h1 { font-size: 20px; margin: 0; }
/* Mapa oculto: a lista ocupa a largura toda (a barrinha some junto, filha de .coluna-mapa) */
.pesquisa-com-mapa.sem-mapa { grid-template-columns: minmax(0, 1fr); }
.pesquisa-com-mapa.sem-mapa .coluna-mapa { display: none; }
/* Largura do mapa ajustável arrastando a barrinha (--largura-mapa, guardada neste navegador); 36% é o padrão original */
.pesquisa-com-mapa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, var(--largura-mapa, 36%)); gap: 18px; align-items: start; }
.coluna-resultados { min-width: 0; }
.coluna-resultados .filtros-pilulas { margin-bottom: 16px; }
/* Mapa fixo e inteiro na tela, logo abaixo do cabeçalho fixo; fica parado enquanto a lista rola */
.coluna-mapa {
  position: sticky; top: calc(var(--altura-cabecalho, 150px) + 8px); display: flex; flex-direction: column;
  height: calc(100vh - var(--altura-cabecalho, 150px) - 28px); min-height: 360px;
  padding: 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
/* Barrinha entre a lista e o mapa: fica dentro de .coluna-mapa (fixa) para acompanhar o mapa ao rolar, saindo um pouco para a esquerda, no vão entre as colunas */
.redimensionar-mapa {
  position: absolute; top: 0; bottom: 0; left: -14px; width: 12px; z-index: 5;
  display: flex; justify-content: center; cursor: col-resize; touch-action: none;
}
.redimensionar-mapa::after {
  content: ""; width: 3px; height: 100%; border-radius: 3px;
  background: var(--borda); transition: background .15s, width .15s;
}
.redimensionar-mapa:hover::after,
.redimensionar-mapa:focus-visible::after,
.redimensionar-mapa.arrastando::after { width: 5px; background: var(--verde); }
.redimensionar-mapa:focus-visible { outline: none; }
.mapa { flex: 1; min-height: 0; border-radius: 10px; z-index: 0; }
.mapa-rodape {
  position: absolute; left: 22px; right: 22px; bottom: 38px; z-index: 500;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--superficie); border-radius: 12px; box-shadow: 0 4px 18px rgba(20, 30, 25, .16); font-size: 12px;
}
.mapa-rodape > .icone { color: var(--verde); }
.mapa-rodape div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mapa-rodape strong { font-size: 13px; }
.mapa-rodape span { color: var(--texto-suave); }
.mapa-rodape a { display: inline-flex; align-items: center; gap: 4px; color: var(--verde); font-weight: 600; white-space: nowrap; }
.mapa-rodape a .icone { width: 14px; height: 14px; }
/* Só aparece quando a pessoa mexe no mapa; ocupa o lugar do rodapé informativo enquanto pendente */
.botao-filtrar-mapa {
  position: absolute; left: 22px; right: 22px; bottom: 38px; z-index: 500;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px;
  border: 0; border-radius: 12px; background: var(--verde); color: #fff; font: inherit; font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 18px rgba(20, 30, 25, .28); cursor: pointer;
}
.botao-filtrar-mapa:hover { background: var(--verde-escuro); }
.botao-filtrar-mapa:disabled { opacity: .7; cursor: wait; }
.botao-filtrar-mapa .icone { width: 16px; height: 16px; }
/* O atributo "hidden" sozinho não vence "display: flex" acima (regra do autor bate o padrão do navegador) */
.mapa-rodape[hidden], .botao-filtrar-mapa[hidden] { display: none; }

.painel-resultados { padding: 16px; }
.resultados-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
#contagem strong { font-size: 16px; color: var(--verde-escuro); }
.resultados-controles { display: flex; align-items: center; gap: 12px; }
.ordenar-topo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
.ordenar-topo select { width: auto; padding: 7px 10px; font-size: 12px; font-weight: 600; background: #f5f6f3; border-color: #e8ebe5; }
.alternar-visao { display: flex; gap: 4px; }
.alternar-visao button {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--texto-suave); cursor: pointer;
}
.alternar-visao button:hover { background: #f1f3ef; }
.alternar-visao button.ativo { background: var(--verde-claro); color: var(--verde); }
.painel-resultados .cards { grid-template-columns: repeat(auto-fill, minmax(322px, 1fr)); }
.painel-resultados .card { box-shadow: none; }
.painel-resultados .card-imagem { aspect-ratio: 16 / 10; }
/* Visão em lista: foto à esquerda, dados à direita */
.modo-lista .cards { grid-template-columns: 1fr; }
.modo-lista .card { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.modo-lista .card .card-imagem { grid-row: 1 / 3; aspect-ratio: auto; min-height: 170px; border-radius: var(--raio) 0 0 var(--raio); }
.modo-lista .form-favorito { right: auto; left: 198px; }
.modo-lista .indicadores { max-width: 420px; }

/* Grupos de anúncios no mapa (zoom afastado) */
.grupo-ancora { background: none; border: 0; }
.grupo-mapa {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 50%; background: var(--verde); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 5px rgba(35, 65, 58, .22), 0 2px 6px rgba(20, 30, 25, .3); cursor: pointer;
}
.grupo-ancora:hover .grupo-mapa { background: var(--verde-escuro); }
.pino-ancora { background: none; border: 0; }
.pino {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 6px));
  padding: 3px 7px; border-radius: 6px; background: #fff; color: var(--texto); border: 1px solid #cfd6d0;
  font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 4px rgba(20, 30, 25, .25); cursor: pointer;
}
.pino::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; }
.pino-abaixo { background: var(--positivo); border-color: var(--positivo); color: #fff; }
.pino-abaixo::after { border-top-color: var(--positivo); }
.leaflet-marker-icon:hover .pino { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.leaflet-marker-icon:hover .pino::after { border-top-color: var(--verde-escuro); }
.resumo-mapa { display: flex; flex-direction: column; gap: 3px; font: 12px/1.4 "Inter", "Segoe UI", system-ui, sans-serif; color: var(--texto); }
.resumo-preco { font-size: 15px; }
.resumo-mapa .link { margin-top: 4px; color: var(--verde); }

.paginacao { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 24px; color: var(--texto-suave); }
.paginacao a { color: var(--verde); font-weight: 600; }

/* ---------- favoritos ---------- */
.grade-favoritos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.cabecalho-favoritos { margin: 4px 0 18px; }
.sobretitulo-favoritos { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.cabecalho-favoritos h1 { font-size: 28px; margin: 8px 0 6px; color: var(--verde-escuro); }
.cabecalho-favoritos p:last-child { max-width: 560px; line-height: 1.5; color: #4b5550; }
.contagem-favoritos { margin-bottom: 12px; color: var(--texto-suave); }
.favoritos-vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px; text-align: center; color: var(--verde); }
.favoritos-vazio h2 { font-size: 18px; color: var(--texto); }
.favoritos-vazio p { max-width: 420px; color: var(--texto-suave); line-height: 1.5; }
.favoritos-vazio .botao { width: auto; }
.resumo-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.resumo-quadro { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--borda); border-radius: 12px; background: #fbfaf7; font-size: 11px; line-height: 1.35; color: var(--texto-suave); }
.resumo-quadro .icone { margin-bottom: 6px; color: var(--verde); }
.resumo-quadro strong { font-size: 17px; color: var(--texto); }
.resumo-quadro strong.positivo { color: var(--positivo); }
.resumo-quadro strong.negativo { color: var(--negativo); }
.painel-alertas .icone-medio { color: var(--verde); }
.painel-alertas h3 { margin: 10px 0 6px; }
.painel-alertas p { line-height: 1.5; }
.painel-alertas .botao .icone { width: 16px; height: 16px; }

.em-construcao { max-width: 520px; margin: 40px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--verde); }
.em-construcao p { color: var(--texto); }
.em-construcao .botao { width: auto; }

/* ---------- premissas ---------- */
.link { color: var(--verde); text-decoration: underline; }
.indicador-lucro { background: #eef3ea; }
/* "?" no canto superior direito dos quadros do card; o texto abre acima, alinhado à direita */
.ajuda.ajuda-canto { position: absolute; right: 8px; top: 9px; background: rgba(255, 255, 255, .6); }
/* Rótulos dos quadros ("Média da região", "Potencial de lucro") sempre em uma linha */
.indicador > span:first-child { padding-right: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 250px) { .indicador > span:first-child { font-size: 10px; } }
/* O texto do "?" ocupa a largura dos dois quadros (100cqw = largura de .indicadores), sem sair do card */
.indicadores { container-type: inline-size; }
.ajuda-canto .ajuda-texto { left: auto; right: -8px; width: 100cqw; transform: none; }
.ajuda-canto .ajuda-texto::after { left: auto; right: 10px; transform: none; }
/* Quadro da esquerda: o "?" fica no meio do card, então o texto começa na borda esquerda dos quadros */
.indicador:first-child .ajuda-canto .ajuda-texto { left: calc(23px - (100cqw - 8px) / 2); right: auto; }
.indicador:first-child .ajuda-canto .ajuda-texto::after { left: calc((100cqw - 8px) / 2 - 22px); right: auto; }
/* O card com o "?" aberto fica por cima dos vizinhos */
.card:hover, .card:focus-within { z-index: 5; }
.alerta {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 14px;
  border-radius: 10px; background: rgba(255, 255, 255, .85); border: 1px solid #e3ddcf; font-size: 13px; color: #4b5550;
}
.alerta .icone { width: 17px; height: 17px; color: var(--texto-suave); }
.alerta-ok { background: #f2f7f2; border-color: #cfdcd2; color: var(--verde); }
.alerta-erro { background: #fbefec; border-color: #ecc9c0; color: var(--negativo); }
.alerta-ok .icone, .alerta-erro .icone { color: currentColor; }

.grade-premissas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.cabecalho-premissas {
  position: relative; overflow: hidden; margin-bottom: 16px; padding: 22px 24px 20px;
  border-radius: 16px; border: 1px solid var(--borda);
  background: radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .7), transparent 40%), linear-gradient(120deg, #eef2ec, #e2e8e1);
}
.ilustracao-casa { position: absolute; right: 70px; top: 10px; width: 120px; height: 120px; color: #c4cfc7; stroke-width: 1; }
.etiqueta-sobre {
  display: inline-block; padding: 3px 8px; border-radius: 6px; background: #dce6dd;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--verde);
}
.cabecalho-premissas h1 { position: relative; font-size: 28px; margin: 8px 0 6px; color: var(--verde-escuro); }
.subtitulo-claro { position: relative; color: #4b5550; }

.secao-premissas { margin-bottom: 12px; padding: 14px 18px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.secao-premissas summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.secao-premissas summary::-webkit-details-marker { display: none; }
.secao-premissas summary h2 { font-size: 16px; }
.secao-premissas[open] summary { margin-bottom: 14px; }
.numero-secao { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 13px; font-weight: 700; }
.icone-secao { width: 22px; height: 22px; color: var(--verde); }
.chevron { margin-left: auto; color: var(--texto-suave); transition: transform .2s; }
.secao-premissas:not([open]) .chevron { transform: rotate(180deg); }

.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo[hidden] { display: none; }
.seletor-exemplo { width: 150px; padding: 7px 10px; font-weight: 600; }
.rotulo-linha { display: flex; align-items: center; gap: 6px; }
.rotulo-linha label { font-size: 12px; font-weight: 600; color: #3b4540; }
.ajuda {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid #aeb8b1;
  font-size: 9px; font-weight: 700; color: var(--texto-suave); cursor: help;
}
.ajuda-texto {
  position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 20; width: 230px; padding: 8px 10px;
  transform: translateX(-50%); border-radius: 8px; background: var(--verde-escuro); color: #fff;
  font-size: 11px; font-weight: 400; line-height: 1.45; text-align: left;
  box-shadow: 0 6px 18px rgba(20, 30, 25, .18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s;
}
.ajuda-texto::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--verde-escuro); }
.ajuda:hover .ajuda-texto, .ajuda:focus .ajuda-texto { opacity: 1; visibility: visible; }
.ajuda:focus { outline: 2px solid #b9cbbf; outline-offset: 2px; }

/* Aviso "!" vermelho ao lado de "Maior retorno" em "Ordenar por" (Pesquisar/Favoritos): essa
   ordenação precisa calcular o potencial de lucro de todo o resultado antes de ordenar, então demora
   mais para carregar. Clicar abre um popup explicando (não é dica de passar o mouse). */
.aviso-ordenar-lento {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 4px;
  width: 16px; height: 16px; border-radius: 50%; border: none; padding: 0;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
}
.aviso-ordenar-lento[hidden] { display: none; }

.campo-unidade { position: relative; display: flex; align-items: center; gap: 8px; }
.campo-unidade input { padding-right: 34px; }
.campo-unidade em { position: absolute; right: 12px; font-style: normal; font-size: 12px; color: var(--texto-suave); pointer-events: none; }
.campo-unidade.unidade-fora input { padding-right: 10px; }
.campo-unidade.unidade-fora em { position: static; }
.com-erro input, .com-erro select { border-color: var(--negativo); }
small.erro, .nota.erro { color: var(--negativo); font-size: 11px; }
.acoes-formulario { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 16px; }

.dialogo {
  width: min(440px, calc(100vw - 32px)); padding: 22px 24px; border: 0; border-radius: 14px;
  color: var(--texto); box-shadow: 0 20px 60px rgba(20, 30, 25, .3);
}
.dialogo::backdrop { background: rgba(20, 30, 25, .45); }
.dialogo h2 { font-size: 18px; margin-bottom: 8px; }
.dialogo p { color: #4b5550; line-height: 1.5; }
.dialogo p + p { margin-top: 12px; }  /* avisos com mais de um parágrafo não ficam grudados */
.dialogo-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.dialogo-acoes .botao { width: auto; margin: 0; }
.botao-cancelar { background: #fff; color: var(--texto); border: 1px solid var(--borda); }
.botao-cancelar:hover { background: #f3f1ea; }
.botao-perigo { background: var(--negativo); }
.botao-perigo:hover { background: #963626; }
.botao-salvar { justify-self: end; width: auto; margin: 0; padding: 12px 22px; }

/* ---------- simulador de flip ---------- */
.pagina-simulador [hidden] { display: none !important; }
.cabecalho-simulador { margin: 4px 0 18px; }
.cabecalho-simulador h1 { font-size: 28px; margin: 8px 0 6px; color: var(--verde-escuro); }
.cabecalho-simulador p:last-child { max-width: 640px; line-height: 1.5; color: #4b5550; }
.pagina-simulador > .alerta { margin: 0 0 16px; }
.grade-simulador { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.coluna-simulador { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.grade-simulador .coluna-lateral { position: sticky; top: 20px; }
.titulo-painel-sim { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.titulo-painel-sim h3 { margin: 0; }
.botao-contorno {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--borda); border-radius: 999px;
  background: #fff; color: var(--verde); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.botao-contorno:hover { background: var(--verde-claro); }
.botao-contorno .icone { width: 15px; height: 15px; }
.imovel-sim { display: flex; gap: 18px; align-items: center; }
.imovel-foto { position: relative; flex: 0 0 190px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #e7ebe5, #d7ded6); }
.imovel-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imovel-dados { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.imovel-dados .preco { font-size: 22px; }
.detalhe { font-size: 11px; font-weight: 400; color: var(--texto-suave); }
.tipo-compra { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.rotulo-sim { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.tipos-compra { display: flex; flex-wrap: wrap; gap: 10px; }
.botao-tipo {
  position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-width: 150px;
  padding: 11px 18px; border-radius: 999px; background: #f1f3ef; color: #3b4540; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.botao-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.botao-tipo:hover { background: #e6ebe5; }
.botao-tipo:has(input:checked) { background: var(--verde); color: #fff; }
.botao-tipo:has(input:focus-visible) { outline: 2px solid #b9cbbf; outline-offset: 2px; }
.botao-tipo.desativado { opacity: .5; cursor: not-allowed; }
.linhas-sim { display: flex; flex-direction: column; margin-top: 6px; }
.linha-sim {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px 160px; align-items: center; gap: 4px 12px;
  min-height: 46px; padding: 6px 8px; border-bottom: 1px solid #f0ede6; font-size: 13px; color: #3b4540;
}
.linha-sim > .rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.linha-sim > .valor { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto); }
.linha-sim .erro { grid-column: 1 / -1; text-align: right; }
.linha-sim .erro:empty { display: none; }
.linha-sim.com-erro input { border-color: var(--negativo); }
/* Aba Viabilidade: aviso de ligação com o Orçamento, na linha da Reforma (2026-09-22) */
.linha-sim .nota-estouro { grid-column: 1 / -1; margin-top: 2px; text-align: right; font-size: 11.5px; color: var(--texto-suave); }
.linha-sim .nota-estouro.negativo { color: var(--negativo); font-weight: 600; }
.linha-destacada { border-radius: 10px; background: #f7f8f5; border-bottom-color: transparent; }
.linha-total { margin-top: 8px; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--verde-claro); font-size: 14px; font-weight: 700; color: var(--verde-escuro); }
.linha-total > .valor { font-size: 17px; }
.linha-total .icone, .linha-retorno .icone { color: var(--verde); }
.linha-retorno { border-bottom: 0; padding: 12px 14px; font-weight: 600; }
.campo-sim input { padding: 7px 34px 7px 10px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.campo-sim.campo-reais input { padding: 7px 10px 7px 30px; }
.campo-sim.unidade-longa input { padding-right: 58px; }
.campo-sim .prefixo { left: 10px; right: auto; }
.seletor-sim { width: auto; padding: 4px 8px; background: #f5f6f3; font-size: 12px; font-weight: 600; color: var(--verde); }
.investimento-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--verde-claro); }
.investimento-topo > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--verde-escuro); }
.investimento-topo strong { font-size: 24px; color: var(--verde-escuro); }
.nota-venda { grid-column: 1 / -1; font-size: 11px; color: var(--texto-suave); }
.resumo-sim h3 { display: flex; align-items: center; gap: 8px; }
.resumo-sim h3 .icone { color: var(--verde); }
.lucro-destaque { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 8px; padding: 16px; border-radius: 12px; background: var(--verde-claro); font-size: 12px; color: #4b5550; }
.lucro-destaque strong { font-size: 26px; color: var(--verde-escuro); }
.lucro-destaque strong.positivo { color: var(--positivo); }
.lucro-destaque strong.negativo { color: var(--negativo); }
.lucro-destaque .rotulo-retorno { margin-top: 10px; padding-top: 10px; border-top: 1px solid #d5e0d7; }
.lucro-destaque .retorno-destaque { font-size: 20px; }
.resumo-linhas { margin: 0; }
.resumo-linhas div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0ede6; font-size: 13px; }
.resumo-linhas dt { color: #4b5550; }
.resumo-linhas dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.alerta-nota { align-items: flex-start; font-size: 11px; line-height: 1.5; }
.selecionar-imovel { margin-bottom: 16px; }
.simulacoes-salvas { margin-top: 22px; }
.acoes-tabela { display: flex; align-items: center; gap: 14px; }
.linha-atual td { background: #f5f8f4; }
.dialogo-largo { width: min(560px, calc(100vw - 32px)); }
.lista-escolha { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; margin: 14px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.escolha { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; }
.escolha:hover { border-color: #b9cbbf; background: #f7f9f6; }
.escolha.atual { border-color: var(--verde); }
.escolha-texto { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--texto-suave); }
.escolha-texto strong { font-size: 14px; color: var(--texto); }
.campo-dialogo { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 12px; font-weight: 600; color: #3b4540; }
.dialogo-acoes a.botao { width: auto; margin: 0; }

.apagar-premissas { text-align: center; }
.link-perigo { border: 0; background: none; color: var(--negativo); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
/* "Relatório completo" nas simulações salvas: botão com cara de link, entre Abrir e Excluir */
.form-relatorio-linha { display: inline; margin: 0; }
.form-relatorio-linha button.link { border: 0; padding: 0; background: none; font: inherit; cursor: pointer; }
.form-relatorio-linha button.link:disabled { opacity: .6; cursor: progress; text-decoration: none; }
.link-desativado { color: var(--texto-suave); opacity: .6; cursor: not-allowed; }

/* ---------- ficha do imóvel ---------- */
.pagina-ficha { display: flex; flex-direction: column; gap: 14px; }
.voltar-lista {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--texto-suave); cursor: pointer;
}
.voltar-lista:hover { color: var(--verde); }
.seta-voltar { font-size: 16px; line-height: 1; }
.grade-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.grade-ficha .coluna-lateral { position: sticky; top: 20px; }
.coluna-ficha { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* "Na base há X dias · Fonte" some para o rodapé da página, discreto e fora dos cartões */
.rodape-ficha { margin: -6px 4px 0; font-size: 11px; }
.painel-titulo-ficha { padding: 0; }  /* sem overflow: hidden, para o texto do "?" da média da região poder abrir por cima da foto */
.painel-titulo-ficha h1 { font-size: 26px; margin: 10px 0 6px; color: var(--verde-escuro); }
.corpo-titulo-ficha { display: flex; align-items: stretch; }
/* Faixa da modalidade (Venda/Leilão), na lateral esquerda do cartão, com o texto na vertical */
.faixa-modalidade {
  flex-shrink: 0; width: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--raio) 0 0 var(--raio);
  background: var(--verde-claro); color: var(--verde-escuro);
}
.faixa-modalidade.faixa-leilao { background: var(--verde); color: #fff; }
.faixa-modalidade span {
  display: inline-block; transform: rotate(-90deg); white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.conteudo-titulo-ficha { flex: 1; min-width: 0; padding: 18px; }
.linha-titulo-ficha-principal { display: flex; justify-content: flex-start; align-items: stretch; gap: 24px; flex-wrap: wrap; }
/* +11px: iguala a distância até a faixa da modalidade com a distância até o topo do cartão */
.info-titulo-ficha { flex: 0 1 auto; min-width: 0; margin-left: 11px; }
/* Empurra o bloco de preço (e a média, que vem logo depois) para mais perto da borda direita */
.preco-titulo-ficha { margin-left: auto; }
.acoes-ficha { display: flex; gap: 10px; flex-shrink: 0; }
/* .form-favorito é posicionado no canto da foto nos cards; aqui ele entra na fileira normal do grupo */
.acoes-ficha .form-favorito { position: static; margin: 0; }
/* Favorito e Acessar link sobrepostos no canto superior direito da foto (pedido do dono) */
.acoes-ficha-sobre-foto { position: absolute; top: 14px; right: 14px; z-index: 2; }
.botao-acao-ficha {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--borda);
  border-radius: 999px; background: #fff; color: var(--verde); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: var(--sombra);
}
.botao-acao-ficha:hover { background: var(--verde-claro); }
.botao-acao-ficha.ativo { background: var(--verde); color: #fff; }
.preco-titulo-ficha { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; flex-shrink: 0; text-align: right; }
.preco-titulo-ficha .preco { font-size: 30px; }
.preco-titulo-ficha .preco-m2 { font-size: 17px; color: var(--texto-suave); }
.media-titulo-ficha { display: flex; flex-shrink: 0; }
.indicador-ficha { min-width: 168px; padding: 10px; justify-content: center; text-align: left; font-size: 14px; }
.indicador-ficha strong { font-size: 28px; }
.caracteristicas-ficha {
  gap: 20px; font-size: 13px; margin-top: 10px; padding: 10px 14px;
  background: #f5f6f3; border-radius: 10px; width: fit-content;
}
.caracteristicas-ficha .icone { width: 17px; height: 17px; color: var(--verde); }
.foto-ficha {
  position: relative; height: 360px; border-radius: var(--raio); overflow: hidden;
  background: linear-gradient(135deg, #e7ebe5, #d7ded6); box-shadow: var(--sombra);
}
.foto-ficha-full { height: 400px; }
.foto-ficha img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-ficha .card-imagem-vazia { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9aa79f; }
.foto-ficha .credito { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.grade-localizacao { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.painel-localizacao, .painel-poi { display: flex; flex-direction: column; }
.mapa-mini-ficha { flex: 1; min-height: 200px; margin-top: 10px; border-radius: 10px; border: 1px solid var(--borda); z-index: 0; cursor: default; }
.mapa-mini-ficha-vazio { display: flex; align-items: center; justify-content: center; background: #fbfaf7; color: #9aa79f; }
.rodape-localizacao { justify-content: space-between; margin-top: 10px; font-size: 12px; }
.rodape-localizacao > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rodape-localizacao > span span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rodape-localizacao .link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.painel-poi .vazio { flex: 1; margin-top: 10px; padding: 16px; border-radius: 10px; background: #fbfaf7; }
.lista-poi { display: flex; flex-direction: column; margin: 10px 0 0; padding: 0; list-style: none; }
.lista-poi li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.lista-poi li:last-child { border-bottom: 0; }
.lista-poi .icone { flex-shrink: 0; width: 16px; height: 16px; color: var(--verde); }
.lista-poi li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lista-poi li > div span { font-size: 12px; color: var(--texto-suave); }
.lista-poi strong { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.distancia-poi { flex-shrink: 0; font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.rodape-localizacao .icone { width: 14px; height: 14px; }
.painel-flip .detalhe-flip { margin: 2px 0 14px; color: var(--texto-suave); line-height: 1.5; }
.painel-flip .aviso-flip { margin: 0 0 6px; }
.painel-flip .tipo-compra { margin-top: 4px; }
/* Barra estreita da ficha: os botões dividem a largura toda, sem sobrar espaço vazio ao lado */
.painel-flip .botao-tipo { flex: 1; min-width: 0; }
/* Botão claro sobre painel branco precisa de borda própria, senão fica invisível */
.painel-flip .botao-claro { border: 1px solid var(--borda); }
/* Relatório completo: abaixo do resumo, com o saldo da cota logo embaixo do botão */
.painel-flip .form-relatorio { margin: 14px 0 12px; }
.painel-flip .form-relatorio .botao { width: 100%; }
.painel-flip .form-relatorio .detalhe { margin: 6px 0 0; text-align: center; line-height: 1.5; }
.resumo-linhas .linha-oferta { margin: 0 -6px 4px; padding: 8px 6px; border-radius: 8px; background: #faf7ee; border-bottom: 0; }
.resumo-linhas .linha-oferta dd { color: var(--dourado); }
[data-tipo-flip][hidden] { display: none; }
.painel-historico dt { color: #4b5550; }

/* ---------- queda de preço (cards) ---------- */
.selo-queda { background: var(--positivo); color: #fff; }
/* Mesmo imóvel em mais de um anúncio (analise/deduplicacao.py): um card só, com o de menor preço */
.selo-repetido { background: #e3eaf8; color: #3b5a9a; cursor: help; }
.selos { flex-wrap: wrap; right: 48px; }
.repetidos-ficha { margin-top: 14px; }
.repetidos-ficha ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.repetidos-ficha li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.repetidos-ficha .icone { width: 14px; height: 14px; }
.preco-anterior { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--texto-suave); }

/* ---------- análises ---------- */
.cabecalho-analises { display: flex; align-items: flex-end; gap: 20px; margin: 4px 0 18px; }
/* Desenho de fundo, atrás do texto: ao estreitar a janela o texto passa por cima dele (não é espremido) */
.cabecalho-arte { position: relative; flex: 1; min-width: 0; }
.cabecalho-arte .cabecalho-textos { position: relative; z-index: 1; }
.cabecalho-arte .ilustracao-cidade { position: absolute; right: 0; bottom: -4px; width: 280px; z-index: 0; pointer-events: none; }
.cabecalho-analises h1 { font-size: 28px; margin: 8px 0 6px; color: var(--verde-escuro); }
.controles-analises { display: flex; flex-shrink: 0; gap: 10px; }
.controle {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; box-shadow: var(--sombra); color: var(--verde);
}
.controle .icone { width: 16px; height: 16px; }
.controle select { width: auto; padding: 9px 4px; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--verde-escuro); cursor: pointer; }
.controle select:focus { outline: 0; }
.controle:focus-within { border-color: #b9cbbf; box-shadow: 0 0 0 3px rgba(185, 203, 191, .35); }
/* Visão geral e quedas na largura toda; no meio, quadro mapa + ranking e, à direita, a evolução */
.grade-analises {
  /* A coluna da direita (Evolução de preços) e o recuo do painel (borda 1px + padding 18px) viram
     medidas nomeadas porque os quadros de "Visão geral" se alinham com elas — ver .quadros-analise. */
  --coluna-evolucao: 340px;
  --recuo-painel: 19px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start;
}
.grade-analises > .largura-total { grid-column: 1 / -1; }
.grade-analises > .painel-regioes { grid-column: span 2; }
.grade-analises > .painel-evolucao { align-self: stretch; }
/* Os "?" dos quadros ficam no fim da linha, alguns colados na borda da página: a explicação abre
   para a esquerda para não sair da tela (os "?" dos cards têm regra própria) */
.grade-analises .titulo-painel .ajuda-texto, .grade-analises .quadro-topo .ajuda-texto { left: auto; right: -8px; transform: none; }
.grade-analises .titulo-painel .ajuda-texto::after, .grade-analises .quadro-topo .ajuda-texto::after { left: auto; right: 9px; transform: none; }
.painel-evolucao.carregando { opacity: .55; transition: opacity .15s; }
.voltar-evolucao { margin: 2px 0 4px; }
.titulo-painel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titulo-painel h2 { font-size: 18px; }
/* Três quadros, mas o terceiro não é um terço: ele tem a largura da coluna de "Evolução de preços"
   (descontado o recuo do painel que os contém), e o vão entre o 2º e o 3º é o mesmo vão de 20px da
   grade. Com isso o 3º quadro começa exatamente onde começa o painel de evolução logo abaixo, e o 2º
   termina onde termina o painel de regiões (pedido do dono, 2026-09-16). */
.quadros-analise {
  display: grid; gap: 20px; margin-top: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) calc((100% - 2px) / 3 - var(--recuo-painel));
}
.quadro-analise { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 12px; background: #fbfaf7; }
.quadro-topo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-suave); }
.quadro-topo > .icone { width: 20px; height: 20px; color: var(--verde); }
.quadro-topo .ajuda { margin-left: auto; }
.valor-quadro { font-size: 24px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.linha-variacao { font-size: 11px; }
.variacao { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; white-space: nowrap; }
.variacao .icone { width: 13px; height: 13px; }
.abas-regioes { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.aba-regiao {
  padding: 8px 14px; border: 1px solid transparent; border-radius: 999px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 600; color: #4b5550; cursor: pointer;
}
.aba-regiao:hover { background: #f1f3ef; }
.aba-regiao[aria-selected="true"] { background: var(--verde); color: #fff; }
.aba-regiao:focus-visible { outline: 2px solid #b9cbbf; outline-offset: 2px; }
.regioes-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
.mapa-analises { height: 400px; border-radius: 12px; border: 1px solid var(--borda); z-index: 0; }
/* Com a evolução ao lado, abaixo desta largura o mapa ficaria estreito demais: o ranking desce para baixo dele */
@media (max-width: 1360px) {
  .regioes-corpo { grid-template-columns: 1fr; }
}
.ranking h3 { font-size: 14px; margin: 2px 0 10px; }
.ranking-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ranking-lista li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #f0ede6; cursor: pointer; }
.ranking-lista li:last-child { border-bottom: 0; }
.ranking-lista li:hover { background: #f7f9f6; }
.ranking-lista li.selecionada { background: var(--verde-claro); }
.ranking-lista li.vazio { cursor: default; font-size: 12px; }
.ranking-lista li > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ranking-lista strong { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ranking-lista li > div span { font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.ranking-lista .variacao { font-size: 12px; }
.posicao { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 12px; font-weight: 700; }
.link-botao { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--verde); cursor: pointer; }
.link-botao .icone { width: 14px; height: 14px; }
.todas-regioes { margin-top: 14px; max-height: 420px; overflow: auto; }
.tabela th[data-ordem] { cursor: pointer; }
.tabela th[data-ordem]:hover { color: var(--verde); }
.etiqueta-ancora { background: none; border: 0; }
.etiqueta-regiao {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 8px));
  display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; background: #fff;
  font: 11px/1.3 "Inter", "Segoe UI", system-ui, sans-serif; color: var(--texto); white-space: nowrap;
  box-shadow: 0 2px 10px rgba(20, 30, 25, .22);
}
.etiqueta-regiao::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }
.etiqueta-regiao strong { font-size: 12px; }
.etiqueta-ancora { cursor: pointer; }
.etiqueta-regiao.selecionada { background: var(--verde-escuro); color: #fff; }
.etiqueta-regiao.selecionada::after { border-top-color: var(--verde-escuro); }
.etiqueta-regiao .positivo, .etiqueta-regiao .negativo { font-size: 11px; }
.painel-evolucao h3 { display: flex; align-items: center; gap: 8px; }
/* O quadro estica até a altura do quadro do mapa; o gráfico ocupa o que sobrar (mínimo 200 px) */
.painel-evolucao { display: flex; flex-direction: column; }
.grafico-evolucao {
  flex: 1 1 auto; min-height: 200px; margin-top: 8px; padding: 42px 8px 0 0;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 20px; column-gap: 8px;
}
.grafico-eixo-y { position: relative; grid-area: 1 / 1; }
.grafico-eixo-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: 10px; color: var(--texto-suave); white-space: nowrap; }
.grafico-area { position: relative; grid-area: 1 / 2; }
.grafico-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.grafico-linhas .grade-grafico { stroke: #eeebe4; stroke-width: 1; }
.grafico-linhas .area-grafico { fill: rgba(35, 65, 58, .08); }
.grafico-linhas .linha-grafico { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linejoin: round; }
.ponto-grafico {
  position: absolute; width: 7px; height: 7px; box-sizing: border-box; transform: translate(-50%, -50%);
  border: 1.5px solid var(--verde); border-radius: 50%; background: #fff;
}
.destaque-grafico {
  position: absolute; width: 110px; box-sizing: border-box; transform: translateY(calc(-100% - 10px));
  display: flex; flex-direction: column; gap: 1px; padding: 5px 9px; border-radius: 7px;
  background: var(--verde-escuro); color: #fff; font-size: 10px; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.grafico-eixo-x { position: relative; grid-area: 2 / 2; }
.grafico-eixo-x span { position: absolute; top: 5px; transform: translateX(-50%); font-size: 10px; color: var(--texto-suave); white-space: nowrap; }
/* Resumo da região clicada, embaixo do gráfico */
.resumo-regiao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.resumo-regiao > div { padding: 9px 11px; border: 1px solid var(--borda); border-radius: 10px; background: #fbfaf7; }
.resumo-regiao dt { font-size: 11px; color: var(--texto-suave); }
.resumo-regiao dd { margin: 3px 0 0; font-size: 15px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.resumo-regiao .variacao { font-size: 15px; }
.resumo-regiao small { display: block; margin-top: 2px; font-size: 10px; color: var(--texto-suave); }
/* Anúncios com queda de preço dentro de uma janela branca: os cards trocam a sombra pela borda fina */
#quedas .cards { margin-top: 14px; }
#quedas .card { box-shadow: none; }
.ver-todos { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); white-space: nowrap; }
.ver-todos:hover { color: var(--verde); }
.sem-dados-analises { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px; text-align: center; color: var(--verde); }
.sem-dados-analises p { max-width: 520px; line-height: 1.5; color: var(--texto-suave); }
.sem-dados-analises code { padding: 2px 6px; border-radius: 6px; background: #f1f3ef; color: var(--texto); }

/* ---------- leilões (menu Análise) ---------- */
/* Desenho de 2026-09-17 (prints do dono): faixa com os quatro números do período, mapa com o card
   de ranking ao lado e, embaixo, os dois gráficos lado a lado. */
.grade-leiloes {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start;
}
.grade-leiloes > .largura-total { grid-column: 1 / -1; }
.graficos-leiloes {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; align-items: stretch;
}
/* Os dois gráficos têm a mesma altura: o painel estica e a área do gráfico ocupa o que sobrar */
.graficos-leiloes .painel-grafico-leiloes { display: flex; flex-direction: column; }
.graficos-leiloes .grafico-barras { flex: 1 1 auto; min-height: 300px; }
.graficos-leiloes .barras-eixo-y { height: calc(100% - 22px); }
.graficos-leiloes .barras-area { display: flex; flex-direction: column; }
.graficos-leiloes .barras-leiloes { flex: 1 1 auto; min-height: 278px; }
.graficos-leiloes .grafico-duplo { flex: 1 1 auto; min-height: 300px; }
/* Os "?" da coluna da direita abrem para a esquerda, para não saírem da tela */
.grade-leiloes .titulo-painel .ajuda-texto, .grade-leiloes .quadro-topo .ajuda-texto { left: auto; right: -8px; transform: none; }
.grade-leiloes .titulo-painel .ajuda-texto::after, .grade-leiloes .quadro-topo .ajuda-texto::after { left: auto; right: 9px; transform: none; }

/* Faixa com os quatro números do período, sobre o verde claro do site */
.faixa-indicadores {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  padding: 14px; border: 1px solid #dfe7e0; border-radius: var(--raio); background: var(--verde-claro);
}
.quadro-leilao {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie);
}
.quadro-leilao .quadro-topo { justify-content: space-between; }
.quadro-leilao .valor-quadro { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 27px; color: var(--verde-escuro); }
.rotulo-quadro { font-size: 12px; color: var(--texto-suave); line-height: 1.35; }
/* Ícone redondo, o mesmo dos títulos dos quadros */
.selo-icone {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%; background: var(--verde-claro); color: var(--verde);
}
.selo-icone .icone { width: 17px; height: 17px; }
/* Selo "↑ +12,4% vs. período anterior" */
.selo-variacao {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 8px;
  padding: 4px 10px; border-radius: 999px; background: #f2f5f1; font-size: 11px; font-weight: 600;
  color: var(--texto-suave); white-space: nowrap;
}
.selo-variacao .icone { width: 12px; height: 12px; }
.selo-variacao > span { font-weight: 400; }
.selo-variacao.positivo { color: var(--positivo); }
.selo-variacao.negativo { color: var(--negativo); }
.selo-variacao.selo-neutro { font-weight: 400; white-space: normal; }

/* Título com o ícone redondo à esquerda e, à direita, o número ou o seletor */
.titulo-com-selo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.titulo-com-selo h2 { font-size: 18px; }
.titulo-com-selo p { margin-top: 2px; font-size: 12px; }
.titulo-numeros { display: flex; align-items: center; gap: 14px; }
.destaque-titulo { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; }
.destaque-titulo strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 20px; color: var(--verde-escuro); font-variant-numeric: tabular-nums; }
.destaque-titulo .selo-variacao { margin-top: 0; }
/* Deságio médio ao lado do título do gráfico de linhas */
.destaque-desagio { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-radius: 12px; background: var(--verde-claro); }
.destaque-desagio > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.destaque-desagio .icone { width: 14px; height: 14px; color: var(--verde); }
.destaque-desagio strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 20px; color: var(--verde-escuro); font-variant-numeric: tabular-nums; }

/* Seletor em pílula (meses do gráfico, ordem das revendas) */
.pilula-selecao {
  position: relative; display: inline-flex; align-items: center; padding: 8px 34px 8px 14px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie);
  font-size: 12px; font-weight: 600; color: #4b5550; cursor: pointer;
}
.pilula-selecao:hover { border-color: #cfd6cd; }
.pilula-selecao[hidden] { display: none; }  /* o hidden precisa vencer o display da pílula */
.pilula-selecao select { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pilula-selecao select:focus-visible { outline: 2px solid #b9cbbf; outline-offset: 4px; }
.pilula-selecao .pilula-chevron { right: 12px; }

.mapa-leiloes { height: 520px; border-radius: 12px; border: 1px solid var(--borda); z-index: 0; }
.legenda-calor { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--texto-suave); }

/* Card ao lado do mapa: ranking das regiões ou das revendas, conforme a aba escolhida */
.painel-ranking-leiloes { display: flex; flex-direction: column; }
.painel-ranking-leiloes .titulo-painel { align-items: center; gap: 8px; }
.painel-ranking-leiloes h2 { font-size: 17px; }
.ranking-leiloes { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.ranking-leiloes li { display: flex; align-items: flex-start; gap: 10px; }
.ranking-leiloes li.vazio { font-size: 12px; color: var(--texto-suave); padding: 0; }
.ranking-leiloes .posicao { background: var(--verde-claro); color: var(--verde-escuro); margin-top: 1px; }
.ranking-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ranking-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ranking-linha strong { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ranking-valor { font-size: 13px; font-weight: 700; color: var(--verde-escuro); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A região fica abaixo do endereço, em cinza médio discreto (pedido do dono, 2026-09-17) */
.ranking-detalhe { font-size: 11px; color: #8a918c; }
.ranking-barra { display: block; height: 5px; border-radius: 999px; background: #eeefeb; overflow: hidden; }
.ranking-barra > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--verde-escuro), #4e8a6f); }
.dica-ranking {
  display: flex; gap: 8px; margin-top: auto; padding: 12px 13px; border-radius: 10px;
  background: #fbfaf7; font-size: 11px; line-height: 1.5; color: var(--texto-suave);
}
.dica-ranking .icone { width: 15px; height: 15px; flex-shrink: 0; color: var(--verde); }

/* Balão do pino (mapa de leilões e de revendas): ícone + endereço em verde e os valores embaixo */
/* Margem igual nos quatro lados: o balão do Google já dá 12 px à esquerda e 12 px embaixo, então
   aqui só se completa o que falta (o lado direito reserva o espaço do "x", regra mais abaixo). */
.balao-mapa { display: flex; flex-direction: column; gap: 6px; padding: 16px 26px 4px 4px; font-size: 12px; color: var(--texto); }
.balao-titulo { display: flex; align-items: center; gap: 7px; color: var(--verde-escuro); }
.balao-titulo .icone { width: 17px; height: 17px; flex-shrink: 0; color: var(--verde); }
.balao-titulo strong { font-size: 14px; line-height: 1.25; }
.balao-linha { display: flex; align-items: baseline; gap: 6px; }
.balao-linha strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.balao-rotulo { color: var(--texto-suave); }
.balao-linha .variacao { margin-left: 2px; font-size: 12px; }
.seta-variacao { font-size: 13px; line-height: 1; }
/* O balão do Google reserva uma faixa no topo só para o botão de fechar, o que deixava um vão
   grande acima do endereço. A faixa vira altura zero e o "x" vai para o canto de baixo à direita,
   na linha do último valor e 30% menor (pedido do dono, 2026-09-17). */
#mapa-leiloes .gm-style-iw-chr { height: 0; min-height: 0; }
#mapa-leiloes .gm-style-iw-chr .gm-style-iw-ch { padding: 0; }
#mapa-leiloes .gm-ui-hover-effect {
  position: absolute !important; right: 0; bottom: 0; width: 34px !important; height: 34px !important;
}
#mapa-leiloes .gm-ui-hover-effect > span { width: 17px !important; height: 17px !important; margin: 8px !important; }

/* Arrematações por mês: barras com eixo vertical e a média móvel de 3 meses por cima */
.grafico-barras { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 8px; margin-top: 10px; }
.barras-eixo-y { position: relative; grid-area: 1 / 1; height: calc(100% - 22px); }
.barras-eixo-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: 10px; color: var(--texto-suave); white-space: nowrap; }
.barras-area { position: relative; grid-area: 1 / 2; }
/* As duas camadas cobrem só a área das barras: os 22 px de baixo são dos nomes dos meses */
.barras-grade, .barras-media { position: absolute; left: 0; right: 0; top: 0; bottom: 22px; }
.barras-grade { z-index: 0; width: 100%; }
.barras-media { z-index: 2; pointer-events: none; }
.barras-media svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.barras-leiloes {
  position: relative; z-index: 1; background: none; min-height: 230px;
  grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); gap: 6px;
}
.barras-leiloes .barra { width: min(30px, 74%); background: var(--verde-escuro); }
.barras-leiloes .barra-dia:hover .barra, .barras-leiloes .barra-dia:focus-visible .barra { background: #4e8a6f; }
/* As regras de .linha-grafico/.grade-grafico moram dentro de .grafico-linhas: aqui o traço da
   média e as linhas da grade precisam do próprio estilo (sem fill: none o caminho vira mancha) */
.barras-grade .grade-grafico { stroke: #eeebe4; stroke-width: 1; }
.linha-media-movel { fill: none; stroke: #4e8a6f; stroke-width: 1.5; stroke-linejoin: round; }
.ponto-grafico.ponto-media { width: 6px; height: 6px; border-color: #4e8a6f; }

/* Venda x arremate: duas linhas na mesma escala, com a faixa do deságio entre elas */
.grafico-duplo { min-height: 300px; padding-top: 14px; }
.linha-grafico.linha-arremate { stroke: #4e8a6f; }
.ponto-grafico.ponto-arremate { border-color: #4e8a6f; }
.faixa-desagio { fill: rgba(78, 138, 111, .15); }
/* Legenda dos dois gráficos: bolinha, traço e faixa, na mesma linguagem do desenho */
.legenda-linhas { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--texto-suave); }
.marca-linha { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 2px; border-radius: 2px; background: var(--verde-escuro); margin-left: 12px; }
.marca-linha.marca-arremate, .marca-linha.marca-media { background: #4e8a6f; }
.marca-faixa { display: inline-block; width: 20px; height: 11px; border-radius: 3px; background: rgba(78, 138, 111, .18); margin-left: 12px; }
.marca-ponto { display: inline-block; width: 7px; height: 7px; box-sizing: border-box; border: 1.5px solid var(--verde-escuro); border-radius: 50%; background: var(--superficie); }
.marca-ponto.marca-cheia { background: var(--verde-escuro); }
.marca-ponto.ponto-arremate, .marca-ponto.ponto-media { border-color: #4e8a6f; }
.legenda-linhas > :first-child { margin-left: 0; }

@media (max-width: 1360px) {
  .grade-leiloes, .graficos-leiloes { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .grade-analises { grid-template-columns: 1fr; }
  .grade-analises > .painel-regioes { grid-column: auto; }
  /* Sem a coluna lateral, não há mais com o que alinhar: os três quadros voltam a ser iguais. */
  .quadros-analise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .regioes-corpo { grid-template-columns: 1fr; }
  .cabecalho-analises { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .quadros-analise, .faixa-indicadores { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .linha-inicio, .analisados-corpo, .grade-premissas, .pesquisa-com-mapa, .grade-favoritos, .grade-simulador, .grade-ficha { grid-template-columns: 1fr; }
  .grade-simulador .coluna-lateral, .grade-ficha .coluna-lateral { position: static; }
  .coluna-mapa { position: relative; top: 0; order: -1; height: 440px; }
  .redimensionar-mapa { display: none; } /* empilhado em telas estreitas: redimensionar não faz sentido */
  .ilustracao-cidade { display: none; }
}
@media (max-width: 760px) {
  .modo-lista .card { grid-template-columns: 1fr; }
  .modo-lista .card .card-imagem { grid-row: auto; aspect-ratio: 16 / 10; border-radius: var(--raio) var(--raio) 0 0; }
  .modo-lista .form-favorito { left: auto; right: 10px; }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .menu { position: static; height: auto; }
  .menu-rodape { display: none; }
  .linha-sim { grid-template-columns: 1fr 1fr; }
  .linha-sim > .rotulo { grid-column: 1 / -1; }
  .imovel-sim { flex-direction: column; align-items: stretch; }
  .linha-titulo-ficha-principal { flex-direction: column; align-items: flex-start; }
  .preco-titulo-ficha, .media-titulo-ficha { align-items: flex-start; text-align: left; width: 100%; }
  .grade-localizacao { grid-template-columns: 1fr; }
  .foto-ficha, .foto-ficha-full { height: 260px; }
  .mapa-mini-ficha { min-height: 220px; }
}

/* ---------- revendas rápidas (menu Análise) ---------- */
/* Faixa do topo: coluna com revendas+prazo, depois os grupos "lucro bruto" e "lucro presumido",
   cada um com um rótulo e uma linha de 3 quadrinhos (protótipo do dono, 2026-09-19) */
.faixa-indicadores-revendas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: stretch; }
.coluna-revendas-periodo { display: flex; flex-direction: column; gap: 14px; width: 230px; flex-shrink: 0; }
.coluna-revendas-periodo .quadro-leilao { flex: 1; }
.grupo-indicador {
  flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: #f6f7f4;
}
.grupo-indicador.grupo-presumido { background: var(--verde-claro); border-color: #dfe7e0; }
.rotulo-grupo-indicador { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-suave); }
.linha-grupo-indicador { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.linha-grupo-indicador .quadro-leilao { background: var(--superficie); gap: 6px; }
.linha-grupo-indicador .quadro-leilao .ajuda { align-self: flex-end; }
.grupo-indicador .vazio { margin: 0; font-size: 13px; color: var(--texto-suave); }

/* Mapa alinhado com ranking + pizza empilhados ao lado (pedido do dono, 2026-09-19): os dois lados
   são itens da mesma linha do grid (align-items padrão = stretch), então o card do mapa cresce até a
   altura do card do ranking + o da pizza juntos, e o mapa (flex:1 dentro do card) preenche o resto. */
.grade-revendas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: stretch; }
.grade-revendas > .largura-total { grid-column: 1 / -1; }
.painel-mapa-revendas { display: flex; flex-direction: column; }
#mapa-revendas { flex: 1 1 auto; min-height: 420px; margin-top: 12px; border-radius: 12px; border: 1px solid var(--borda); z-index: 0; }
.coluna-ranking-prazo { display: flex; flex-direction: column; gap: 20px; }
.painel-prazo-revendas { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.painel-prazo-revendas .titulo-painel { width: 100%; text-align: left; }
.painel-prazo-revendas .rosca-grafico { width: 160px; height: 160px; }
.lista-fatias-prazo { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lista-fatias-prazo li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.lista-fatias-prazo .nome-fatia { flex: 1; color: var(--texto); text-align: left; }
.lista-fatias-prazo .valor-fatia { font-weight: 700; color: var(--verde-escuro); font-variant-numeric: tabular-nums; }
.lista-fatias-prazo small { width: 42px; text-align: right; color: var(--texto-suave); }

.graficos-revendas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
/* Revendas por mês: barras empilhadas (compra normal + compra em leilão) com a rentabilidade bruta
   mediana do mês numa linha por cima, na própria escala (não dá para comparar quantidade e % no
   mesmo eixo — a linha só mostra a tendência, os valores exatos ficam na dica de cada ponto). */
/* Empilhada de cima para baixo: compra normal (maior, no topo) e compra em leilão (base) */
.barra-empilhada { position: relative; display: flex; flex-direction: column; width: min(30px, 74%); }
.barra-empilhada .segmento-normal { background: var(--verde-escuro); border-radius: 3px 3px 0 0; }
.barra-empilhada .segmento-leilao { background: var(--dourado); border-radius: 0 0 3px 3px; }
.barras-revendas .barra-dia:hover .segmento-normal, .barras-revendas .barra-dia:focus-visible .segmento-normal { background: #4e8a6f; }
.linha-rentabilidade { fill: none; stroke: var(--dourado); stroke-width: 1.5; stroke-linejoin: round; }
.ponto-grafico.ponto-rentabilidade { width: 6px; height: 6px; border-color: var(--dourado); background: var(--dourado); }
.marca-linha.marca-rentabilidade { background: var(--dourado); }
.marca-ponto.ponto-rentabilidade { border-color: var(--dourado); }

/* Resultado presumido: duas barras (lucro x prejuízo presumidos), ao lado de Revendas por mês */
.painel-resultado-presumido { display: flex; flex-direction: column; }
.barras-resultado-presumido { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 40px; min-height: 200px; margin-top: 14px; padding-top: 20px; }
.coluna-resultado { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 90px; }
.coluna-resultado .valor-coluna { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 20px; font-weight: 700; color: var(--verde-escuro); }
.coluna-resultado .valor-coluna.negativo { color: var(--negativo); }
.barra-resultado { width: 56px; border-radius: 6px 6px 0 0; background: var(--positivo); min-height: 4px; }
.barra-resultado.prejuizo { background: var(--negativo); }
.legenda-resultado { text-align: center; font-size: 12px; }
.legenda-resultado strong { display: block; color: var(--texto); }
.legenda-resultado span { color: var(--texto-suave); }

@media (max-width: 1360px) {
  .grade-revendas, .graficos-revendas, .faixa-indicadores-revendas { grid-template-columns: 1fr; }
  .painel-mapa-revendas { order: -1; }
}

/* ---------- alertas ---------- */
.menu-usuario .sino { position: relative; }
.contagem-sino {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  /* Vermelho de notificação (mais vivo que --negativo, que é o vermelho terroso dos valores
     negativos — pedido do dono, 2026-09-14: precisa "ficar vermelho" no sininho). */
  background: #e5484d; color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
}
.pilha-secoes { display: flex; flex-direction: column; gap: 20px; }
/* Card "Meus grupos" (print de referência do dono, 2026-09-14) */
.painel-grupos .titulo-painel { align-items: center; margin-bottom: 6px; }
.painel-grupos .titulo-painel h2 { font-size: 20px; color: var(--verde-escuro); }
.botao-ver-todos { border: 0; background: none; font: inherit; font-size: 13px; color: var(--verde); cursor: pointer; }
.botao-ver-todos .icone { width: 14px; height: 14px; }
.botao-ver-todos[hidden] { display: none; }
.tabela-grupos th { padding: 12px 12px 10px; }
.tabela-grupos td { padding: 13px 12px; vertical-align: middle; }
.tabela-grupos td strong { color: var(--texto); }
.tabela-grupos .selo-novo { margin-left: 6px; }
.filtros-grupo { color: var(--texto-suave); }
.status-grupo {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.status-grupo.ativo { background: var(--verde-claro); color: var(--positivo); }
.status-grupo.pausado { background: #eef0ed; color: var(--texto-suave); }
.status-ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Coluna Ações com só a largura dos botões, no fim da tabela — sem espaço em branco sobrando depois
   dela (pedido do dono, 2026-09-14); título e botões continuam alinhados pela esquerda da coluna */
.tabela-grupos th:last-child, .tabela-grupos td:last-child { width: 1%; }
.acoes-grupo { display: flex; align-items: center; gap: 8px; }
.acoes-grupo form { margin: 0; }
.acao-grupo {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #e3e7e1; border-radius: 8px;
  background: #f6f7f4; color: #3b4540; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.acao-grupo:hover { background: var(--verde-claro); border-color: #cfdcd2; color: var(--verde); }
.acao-grupo .icone { width: 14px; height: 14px; }
.acao-grupo-perigo { background: #fbefec; border-color: #f0d3cc; color: var(--negativo); }
.acao-grupo-perigo:hover { background: #f7e1dc; border-color: #ecc9c0; color: var(--negativo); }
.botao-texto { border: 0; background: none; color: var(--verde); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.dialogo-alerta { width: min(720px, calc(100vw - 32px)); }
.filtros-pilulas-dialogo { margin: 16px 0 0; padding: 0; }
.cartao-notificacao { display: flex; flex-direction: column; gap: 6px; }
.notificacao-cabecalho { display: flex; align-items: center; gap: 8px; font-size: 12px; }
/* Mapa de "Novidades": um pino por imóvel notificado, colorido pelo grupo que bateu */
.mapa-novidades-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 16px; text-align: center; color: var(--texto-suave); }
.legenda-mapa { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: #4b5550; }
.legenda-mapa li { display: flex; align-items: center; gap: 6px; }
.legenda-cor { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
/* Seletor de cor do grupo (formulário de criar/editar): bolinhas da paleta */
.seletor-cor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; padding: 0; border: 0; }
.seletor-cor legend { width: 100%; margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 600; color: #3b4540; }
.opcao-cor { position: relative; cursor: pointer; }
.opcao-cor input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao-cor span { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px transparent; transition: box-shadow .15s; }
.opcao-cor:hover span { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--borda); }
.opcao-cor input:checked + span { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--verde-escuro); }
.opcao-cor input:focus-visible + span { outline: 2px solid #b9cbbf; outline-offset: 4px; }

/* ---------- meus projetos (print de referência do dono, 2026-09-15) ---------- */
.pagina-projetos { display: flex; flex-direction: column; gap: 26px; }
.resumo-projetos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.quadro-projeto { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.quadro-icone { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); }
.quadro-projeto > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quadro-projeto span { font-size: 12px; color: var(--texto-suave); }
.quadro-projeto strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 22px; color: var(--verde-escuro); }
.quadro-projeto strong.positivo { color: var(--positivo); }
.quadro-projeto strong.negativo { color: var(--negativo); }
.quadro-projeto small { font-size: 11px; color: var(--texto-suave); }
.cards-projetos .card-imagem { aspect-ratio: 16 / 9; }
.faixa-caracteristicas-projeto {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; width: fit-content;
  display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(20, 30, 25, .18);
  font-size: 12px; font-weight: 600; color: var(--texto);
}
.faixa-caracteristicas-projeto span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.faixa-caracteristicas-projeto .icone { width: 14px; height: 14px; color: var(--verde); }
.status-projeto { font-weight: 600; box-shadow: none; }
.status-planejamento { background: #e3ecf8; color: #2f5a93; }
.status-em_andamento { background: var(--verde-claro); color: var(--verde); }
.status-concluido { background: var(--verde); color: #fff; }
.nome-projeto { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 16px; color: var(--texto); padding-right: 18px; }
.numeros-projeto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.numeros-projeto dt { font-size: 11px; color: var(--texto-suave); }
.numeros-projeto dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.numeros-projeto small { font-size: 10px; }
/* Menu ⋮ do card: Alterar status (submenu à direita, com setinha ao passar o mouse), Editar, Arquivar */
.menu-projeto { position: absolute; top: 10px; right: 10px; z-index: 3; }
.menu-projeto[open] { z-index: 30; }
.menu-projeto summary {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--texto); font-size: 18px; font-weight: 700; line-height: 1;
  list-style: none; cursor: pointer; box-shadow: 0 1px 4px rgba(20, 30, 25, .2);
}
.menu-projeto summary::-webkit-details-marker { display: none; }
.menu-projeto-opcoes {
  position: absolute; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; min-width: 170px; padding: 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 30, 25, .14);
}
.menu-projeto-opcoes > a, .menu-projeto-opcoes > button, .opcao-submenu, .submenu-status a, .submenu-status button, .opcao-atual {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 6px; background: none; color: var(--texto); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.menu-projeto-opcoes > a:hover, .menu-projeto-opcoes > button:hover, .opcao-submenu:hover, .opcao-submenu:focus-within,
.submenu-status a:hover, .submenu-status button:hover { background: #f1f3ef; }
.opcao-submenu { position: relative; }
.seta-submenu .icone { width: 13px; height: 13px; opacity: 0; transition: opacity .15s; }
.opcao-submenu:hover .seta-submenu .icone, .opcao-submenu:focus-within .seta-submenu .icone { opacity: 1; }
.submenu-status {
  position: absolute; top: -6px; left: calc(100% + 4px); display: none; flex-direction: column; min-width: 150px; padding: 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 30, 25, .14);
}
.opcao-submenu:hover .submenu-status, .opcao-submenu:focus-within .submenu-status { display: flex; }
.submenu-status form { margin: 0; }
.opcao-atual { color: var(--texto-suave); cursor: default; font-weight: 600; }
.opcao-atual::after { content: "atual"; font-size: 10px; font-weight: 500; }
/* Janela "Novo projeto": as duas formas de começar */
.dialogo-novo-projeto { width: min(720px, calc(100vw - 32px)); }
.opcoes-novo-projeto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.opcao-novo-projeto { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--borda); border-radius: 12px; color: var(--verde); }
.opcao-novo-projeto:hover { border-color: #b9cbbf; background: #f7f9f6; }
.opcao-novo-projeto strong { color: var(--texto); font-size: 14px; }
.opcao-novo-projeto span { color: var(--texto-suave); font-size: 12px; line-height: 1.4; }
.origem-anuncio { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: #f3f6f2; font-size: 12px; }
.origem-anuncio .icone { color: var(--verde); flex: none; }
.origem-anuncio span { flex: 1; min-width: 0; }
.origem-anuncio a { color: var(--verde); font-weight: 600; white-space: nowrap; }
&
.lista-simulacoes input { accent-color: var(--verde); }
.lista-simulacoes.com-erro .escolha { border-color: var(--negativo); }
@media (max-width: 1100px) {
  .resumo-projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .resumo-projetos, .opcoes-novo-projeto { grid-template-columns: 1fr; }
  .submenu-status { left: auto; right: 0; top: 100%; }
}
.projetos-em-breve .botao-compacto-inicio { width: auto; margin-top: 12px; padding: 9px 16px; }

/* ---------- página de cada projeto (Visão geral, CLAUDE.md seção 7.8) ---------- */
.pagina-projeto { display: flex; flex-direction: column; gap: 16px; }
.topo-projeto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.topo-projeto-textos { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.voltar-projetos { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12px; color: var(--texto-suave); }
.voltar-projetos:hover { color: var(--verde); }
.voltar-projetos .icone { width: 15px; height: 15px; }
.linha-status-projeto { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.linha-status-projeto .selo { box-shadow: none; }
.link-editar-projeto { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--texto-suave); }
.link-editar-projeto .icone { width: 14px; height: 14px; }
.link-editar-projeto:hover { color: var(--verde); }
.titulo-projeto { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 34px; line-height: 1.15; color: var(--verde-escuro); overflow-wrap: anywhere; }
.endereco-projeto { color: var(--texto-suave); font-size: 13px; }
.numeros-topo-projeto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: auto; padding-top: 8px; }
.quadro-topo-projeto { display: flex; flex-direction: column; gap: 4px; padding: 14px; min-width: 0; }
.quadro-topo-projeto span { font-size: 12px; color: var(--texto-suave); }
.quadro-topo-projeto strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 19px; color: var(--verde-escuro); white-space: nowrap; }
.quadro-topo-projeto strong.positivo, .quadro-topo-projeto small.positivo { color: var(--positivo); }
.quadro-topo-projeto strong.negativo, .quadro-topo-projeto small.negativo { color: var(--negativo); }
.quadro-topo-projeto small { font-size: 12px; font-weight: 600; }
.capa-projeto {
  position: relative; min-height: 240px; border-radius: var(--raio); overflow: hidden;
  background: linear-gradient(135deg, #e7ebe5, #d7ded6); box-shadow: var(--sombra);
}
.capa-projeto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capa-projeto .credito { bottom: 14px; left: 14px; right: auto; }
.botao-fotos-capa {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px; background: rgba(20, 30, 25, .72); color: #fff; font-size: 12px; font-weight: 600;
}
.botao-fotos-capa:hover { background: rgba(20, 30, 25, .88); }
.botao-fotos-capa .icone { width: 15px; height: 15px; }

.abas-projeto { display: flex; gap: 26px; border-bottom: 1px solid var(--borda); overflow-x: auto; }
.abas-projeto a { padding: 10px 2px; font-size: 13px; color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas-projeto a:hover { color: var(--verde); }
.abas-projeto a.ativa { color: var(--verde-escuro); font-weight: 600; border-bottom-color: var(--verde); }
.em-construcao-projeto { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 18px; text-align: center; color: var(--texto-suave); }
.em-construcao-projeto .icone-grande { color: #9aa79f; }
.em-construcao-projeto h2 { color: var(--verde-escuro); font-size: 20px; }
.em-construcao-projeto .botao { width: auto; }

.grade-projeto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); gap: 16px; align-items: start; }
.coluna-principal-projeto, .coluna-lateral-projeto { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card-projeto-pagina { display: flex; flex-direction: column; gap: 14px; }
.cabecalho-card-projeto { display: flex; align-items: flex-start; gap: 12px; }
.cabecalho-card-projeto > div { flex: 1; min-width: 0; }
.cabecalho-card-projeto h2 { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 16px; color: var(--verde-escuro); }
.cabecalho-card-projeto p { margin-top: 2px; font-size: 12px; color: var(--texto-suave); }
.icone-card-projeto { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); }
.icone-card-projeto .icone { width: 17px; height: 17px; }
.botao.botao-pequeno { width: auto; margin: 0; padding: 7px 12px; font-size: 12px; border-radius: 8px; white-space: nowrap; }
.botao.botao-pequeno .icone { width: 14px; height: 14px; }
.botao.botao-claro-projeto { background: #fff; color: var(--verde); border: 1px solid var(--borda); }
.botao.botao-claro-projeto:hover { background: #f3f6f2; }
.botao.botao-contorno-projeto { margin-top: 0; background: #fff; color: var(--verde); border: 1px solid #c9d6cd; }
.botao.botao-contorno-projeto:hover { background: #f3f6f2; }
.botao-contorno-projeto .icone { width: 15px; height: 15px; }
.link-card-projeto {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--verde); cursor: pointer; white-space: nowrap;
}
.link-card-projeto .icone { width: 14px; height: 14px; }
.link-card-projeto:hover { text-decoration: underline; }
.vazio-card-projeto { padding: 16px; border-radius: 10px; background: #fbfaf7; font-size: 13px; color: var(--texto-suave); }

/* Documentos (seção 7.8, 2026-09-22) */
.lista-documentos-projeto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-documentos-projeto li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.lista-documentos-projeto .icone-documento { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--verde-claro); color: var(--verde-escuro); }
.lista-documentos-projeto .icone-documento .icone { width: 17px; height: 17px; }
.lista-documentos-projeto .dados-documento { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lista-documentos-projeto .dados-documento a { font-size: 13.5px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-documentos-projeto .dados-documento a:hover { color: var(--verde); text-decoration: underline; }
.lista-documentos-projeto .dados-documento .suave { font-size: 11.5px; }
.tag-documento { display: flex; align-items: center; gap: 4px; margin: 0; flex: none; }
.tag-documento input { width: 130px; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 999px; font: inherit; font-size: 12px; background: #faf9f6; }
.lista-documentos-projeto form { margin: 0; }
@media (max-width: 640px) {
  .lista-documentos-projeto li { flex-wrap: wrap; }
  .tag-documento input { width: 100%; }
}

/* Fotos */
.miniaturas-projeto { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
/* Versão dentro de .subcard-projeto (ao lado do mapa, em "Resumo do projeto"): metade da largura de
   antes, então 3 colunas em vez de 5 — 5 ficava com miniaturas minúsculas (2026-09-22). */
.miniaturas-projeto-compacta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.miniaturas-projeto-compacta .etiqueta-foto { left: 4px; bottom: 4px; padding: 1px 5px; font-size: 9px; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miniaturas-projeto-compacta .miniatura-mais strong { font-size: 15px; }
.miniatura-projeto { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #e7ebe5, #d7ded6); }
.miniatura-projeto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.miniatura-projeto:hover img { transform: scale(1.04); }
.etiqueta-foto { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; background: rgba(255, 255, 255, .92); color: var(--texto); }
.foto-dialogo .etiqueta-foto { position: static; }
.etiqueta-anuncio { background: #f3ead6; color: #6e5520; }
.etiqueta-existente { background: #e3ecf8; color: #2f5a93; }
.etiqueta-obras { background: #fbe7d5; color: #8a4b17; }
.etiqueta-reformado { background: var(--verde-claro); color: var(--verde); }
.miniatura-mais, .miniatura-enviar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; }
.miniatura-mais { background: var(--verde-escuro); color: #fff; }
.miniatura-mais strong { font-size: 18px; }
.miniatura-enviar { border: 1px dashed #c9d6cd; background: #fbfaf7; color: var(--verde); }
.dialogo-fotos { width: min(820px, calc(100vw - 32px)); }
.cabecalho-dialogo-fotos { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grade-fotos-dialogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; max-height: 62vh; overflow-y: auto; }
.foto-dialogo { margin: 0; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.foto-dialogo a { display: block; aspect-ratio: 4 / 3; background: #eef1ee; }
.foto-dialogo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-dialogo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; }
.foto-dialogo figcaption form:first-child { flex: 1; }
.foto-dialogo select { width: 100%; padding: 5px 8px; font-size: 12px; }
.etiquetas-envio { border: 0; padding: 0; margin-inline: 0; }
.etiquetas-envio legend { padding: 0; margin-bottom: 6px; }
.etiquetas-envio label { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-weight: 500; }
.etiquetas-envio label input { margin: 0; }
.campo-dialogo input[type="file"] { padding: 7px; font-size: 12px; }

/* Cronograma resumido */
.linha-tempo-projeto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linha-tempo-projeto li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.linha-tempo-projeto li:last-child { padding-bottom: 0; }
.linha-tempo-projeto li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: var(--borda); }
.marcador-fase { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #b9c6bd; background: #fff; }
.marcador-fase .icone { width: 13px; height: 13px; stroke-width: 3; }
.fase-concluida .marcador-fase { border-color: var(--verde); background: var(--verde); color: #fff; }
.fase-em_andamento .marcador-fase { border-color: var(--verde); box-shadow: inset 0 0 0 4px #fff; background: var(--verde); }
.texto-fase { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.texto-fase > strong { font-size: 14px; }
.datas-fase { font-size: 12px; color: var(--texto-suave); }
.situacao-fase { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.fase-concluida .situacao-fase, .fase-em_andamento .situacao-fase { color: var(--positivo); }
.progresso-reforma { height: 6px; margin-top: 6px; max-width: 360px; border-radius: 999px; background: #e9ede9; overflow: hidden; }
.progresso-reforma span { display: block; height: 100%; border-radius: inherit; background: var(--verde); }
.proxima-etapa { margin-top: 4px; font-size: 12px; color: var(--texto-suave); }
.proxima-etapa strong { color: var(--texto); }

/* Resumo do imóvel e localização */
.resumo-imovel-projeto { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.resumo-imovel-projeto > div { flex: 1 1 auto; min-width: 78px; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; }
.resumo-imovel-projeto dt { font-size: 11px; color: var(--texto-suave); }
.resumo-imovel-projeto dd { margin: 4px 0 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.duas-colunas-projeto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subcard-projeto { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--borda); border-radius: 12px; min-width: 0; }
.subcard-projeto h3 { font-size: 13px; }
.subcard-projeto h3 .icone { width: 16px; height: 16px; color: var(--verde); }
.mapa-projeto { flex: none; height: 300px; min-height: 300px; margin-top: 0; }
.texto-localizacao { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.texto-localizacao small { font-size: 11px; }
.acoes-localizacao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.subcard-em-breve { background: #fbfaf7; font-size: 12px; color: var(--texto-suave); }
.subcard-em-breve .selo { width: fit-content; box-shadow: none; border: 1px solid var(--borda); }
.opcao-localizacao { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; }
.opcao-localizacao input, .etiquetas-envio input { width: auto; flex: none; margin: 3px 0 0; padding: 0; accent-color: var(--verde); }
.opcao-localizacao span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.opcao-localizacao small { font-size: 11px; color: var(--texto-suave); }

/* Orçamento resumido */
.totais-orcamento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.totais-orcamento > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.totais-orcamento span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--texto-suave); }
.totais-orcamento strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 18px; color: var(--verde-escuro); white-space: nowrap; }
.totais-orcamento small { font-size: 10px; }
.editar-previsto { display: inline-flex; color: var(--texto-suave); }
.editar-previsto .icone { width: 12px; height: 12px; }
.editar-previsto:hover { color: var(--verde); }
.barra-orcamento { height: 9px; border-radius: 999px; background: #e9ede9; overflow: hidden; }
.barra-orcamento span { display: block; height: 100%; border-radius: inherit; background: var(--verde); }
.barra-orcamento.estourado span { background: var(--negativo); }
.percentual-orcamento { margin-top: -8px; font-size: 11px; color: var(--texto-suave); text-align: right; }
.percentual-orcamento.negativo { color: var(--negativo); font-weight: 600; }

/* Contatos */
.lista-contatos-projeto { list-style: none; margin: 0; padding: 0; }
.lista-contatos-projeto li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--borda); }
.lista-contatos-projeto li:first-child { border-top: 0; padding-top: 0; }
.lista-contatos-projeto li[hidden] { display: none; }
.avatar-contato { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); font-size: 13px; font-weight: 700; }
.dados-contato { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 12px; }
.dados-contato strong { font-size: 13px; }
.dados-contato a { color: var(--texto-suave); overflow-wrap: anywhere; }
.dados-contato a:hover { color: var(--verde); }
.acoes-contato { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.botao-whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #e3f4ea; color: #1f7a4d; }
.botao-whatsapp:hover { background: #cdebd9; }
.botao-whatsapp .icone { width: 19px; height: 19px; }
.botao-editar-contato { display: inline-flex; padding: 4px; color: var(--texto-suave); }
.botao-editar-contato .icone { width: 14px; height: 14px; }
.botao-editar-contato:hover { color: var(--verde); }
.dialogo-acoes .acao-esquerda { margin-right: auto; }
.card-status-projeto { display: flex; flex-direction: column; gap: 8px; background: #e7efe9; border-color: #d6e2d9; }
.card-status-projeto > .icone { color: var(--verde); }
.card-status-projeto h3 { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 17px; margin: 0; color: var(--verde-escuro); }
.card-status-projeto p { font-size: 13px; line-height: 1.5; color: #4b5550; }
.card-status-projeto .botao { width: fit-content; margin-top: 4px; }

/* Anotações */
.form-anotacao { display: flex; gap: 10px; align-items: stretch; }
.form-anotacao textarea {
  flex: 1; min-height: 44px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
  font: inherit; font-size: 13px; resize: vertical; background: #fff;
}
.form-anotacao textarea:focus { outline: 2px solid #b9cbbf; border-color: #b9cbbf; }
.form-anotacao textarea.com-erro { border-color: var(--negativo); }
.form-anotacao .botao { width: auto; margin: 0; padding-inline: 20px; }
.lista-anotacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-anotacoes li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda); }
.lista-anotacoes p { margin-top: 2px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.data-anotacao { font-size: 11px; color: var(--texto-suave); }
.botao-apagar-anotacao { display: inline-flex; padding: 4px; border: 0; background: none; color: var(--texto-suave); cursor: pointer; }
.botao-apagar-anotacao .icone { width: 15px; height: 15px; }
.botao-apagar-anotacao:hover { color: var(--negativo); }
.nome-projeto a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .topo-projeto, .grade-projeto { grid-template-columns: 1fr; }
  .capa-projeto { min-height: 220px; }
}
@media (max-width: 760px) {
  .numeros-topo-projeto, .duas-colunas-projeto { grid-template-columns: 1fr; }
  .miniaturas-projeto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .titulo-projeto { font-size: 26px; }
  .cabecalho-card-projeto { flex-wrap: wrap; }
  .form-anotacao { flex-direction: column; }
}

/* ---------- aba Orçamento do projeto (CLAUDE.md, seção 7.8) ---------- */
.grade-orcamento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); gap: 16px; align-items: start; }
.coluna-principal-orcamento, .coluna-lateral-orcamento { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card-resumo-orcamento { gap: 18px; }
.totais-orcamento-completo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.totais-orcamento-completo > div {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 96px; padding: 18px;
  border: 1px solid var(--borda); border-radius: 12px; background: #fcfbf8; min-width: 0;
}
.totais-orcamento-completo span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--texto-suave); }
.totais-orcamento-completo strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 23px; font-weight: 700; line-height: 1.1; color: var(--verde-escuro); white-space: nowrap; }
.totais-orcamento-completo strong.negativo { color: var(--negativo); }
.linha-barra-orcamento { display: flex; align-items: center; gap: 10px; }
.linha-barra-orcamento .barra-orcamento { flex: 1; height: 10px; }
.linha-barra-orcamento small { font-size: 11px; color: var(--texto-suave); white-space: nowrap; }
.linha-barra-orcamento small.negativo { color: var(--negativo); font-weight: 600; }
.secao-categorias-orcamento { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; border-top: 1px solid var(--borda); }
.secao-categorias-orcamento h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 16px; color: var(--verde-escuro); }
.secao-categorias-orcamento h3 small { font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; font-size: 11px; font-weight: 400; color: var(--texto-suave); }
.aviso-sem-categoria { display: block; padding: 9px 10px; border: 1px dashed #c9d6cd; border-radius: 8px; font-size: 12px; font-weight: 400; color: var(--texto-suave); }
.aviso-sem-categoria a { color: var(--verde); font-weight: 600; }
.status-despesa-opcoes.tipos-compra { margin-top: 0; }
.status-despesa-opcoes .botao-tipo { min-width: 0; flex: 1; padding: 9px 14px; }
.opcao-remover-comprovante { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--texto-suave); }
.opcao-remover-comprovante input { accent-color: var(--verde); }
.opcao-remover-comprovante a { color: var(--verde); }

/* Ícone da categoria (seletor no formulário) */
.seletor-icone { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; border: 0; }
.seletor-icone legend { width: 100%; margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 600; color: #3b4540; }
.opcao-icone { position: relative; cursor: pointer; }
.opcao-icone input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao-icone span {
  display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 9px;
  background: #f1f3ef; color: #3b4540; transition: background .15s, color .15s;
}
.opcao-icone span .icone { width: 18px; height: 18px; }
.opcao-icone:hover span { background: #e6ebe5; }
.opcao-icone input:checked + span { background: var(--verde); color: #fff; }
.opcao-icone input:focus-visible + span { outline: 2px solid #b9cbbf; outline-offset: 2px; }
.com-erro.seletor-icone span, .com-erro.seletor-cor { outline: 1px solid var(--negativo); border-radius: 10px; }

/* Despesas por categoria (gráfico de rosca) */
.grafico-categorias { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; padding: 0 6px 6px; }
.rosca-grafico { position: relative; width: 200px; height: 200px; }
.rosca-grafico svg { width: 100%; height: 100%; }
.rosca-grafico circle { transition: stroke-dasharray .2s; }
.total-rosca { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.total-rosca strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 19px; font-weight: 700; color: var(--verde-escuro); }
.total-rosca span { font-size: 12px; color: var(--texto-suave); }
.lista-fatias-categoria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.lista-fatias-categoria li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 52px; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid #f0ede6; font-size: 13px;
}
.lista-fatias-categoria li:last-child { border-bottom: 0; }
.ponto-categoria { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.nome-fatia { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.valor-fatia { white-space: nowrap; color: var(--texto); }
.lista-fatias-categoria small { text-align: right; color: var(--texto-suave); font-size: 12px; }

/* Tabela de despesas */
.ferramentas-despesas { display: flex; align-items: center; gap: 10px; }
.pilula-busca-despesas {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--borda); border-radius: 999px;
  background: #fff; color: var(--texto-suave);
}
.pilula-busca-despesas .icone { width: 15px; height: 15px; flex: none; }
.pilula-busca-despesas input { width: 170px; padding: 0; border: 0; background: none; font-size: 12px; color: var(--texto); }
.pilula-busca-despesas input:focus { outline: none; }
.tabela-despesas-wrap { overflow-x: auto; }
.tabela-despesas { display: flex; flex-direction: column; gap: 2px; min-width: 640px; }
.linha-despesa { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 6px; font-size: 13px; border-bottom: 1px solid #f0ede6; }
.linha-despesa[hidden] { display: none; }
.linha-despesa > [role="cell"], .linha-despesa > [role="columnheader"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho-despesas { font-size: 11px; font-weight: 600; color: var(--texto-suave); border-bottom: 1px solid var(--borda); padding-bottom: 8px; }
.linha-despesa[data-col] { overflow: visible; }
.celula-categoria { display: flex; align-items: center; gap: 6px; }
.celula-categoria .icone { width: 14px; height: 14px; flex: none; color: var(--texto-suave); }
.linha-pendente { background: #fdf9f1; }
.selo-status-despesa { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-despesa-pago { background: var(--verde-claro); color: var(--verde); }
.status-despesa-pendente { background: #fbe7d5; color: #8a4b17; }
[data-col="acoes"] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; overflow: visible !important; }
[data-col="acoes"] a { display: inline-flex; color: var(--texto-suave); }
[data-col="acoes"] a:hover { color: var(--verde); }
[data-col="acoes"] .icone { width: 15px; height: 15px; }
.menu-linha-despesa { position: relative; }
.menu-linha-despesa summary { cursor: pointer; padding: 2px 6px; border-radius: 6px; color: var(--texto-suave); list-style: none; }
.menu-linha-despesa summary::-webkit-details-marker { display: none; }
.menu-linha-despesa[open] summary, .menu-linha-despesa summary:hover { background: #f1f3ef; color: var(--texto); }
.menu-linha-despesa-opcoes {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 4; display: flex; flex-direction: column; min-width: 130px; padding: 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 30, 25, .14);
}
.menu-linha-despesa-opcoes a, .menu-linha-despesa-opcoes button {
  display: block; width: 100%; padding: 7px 9px; border: 0; border-radius: 6px; background: none; color: var(--texto);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.menu-linha-despesa-opcoes a:hover, .menu-linha-despesa-opcoes button:hover { background: #f1f3ef; }
.menu-linha-despesa-opcoes form { margin: 0; }
.menu-linha-despesa-opcoes form button { color: var(--negativo); }

/* Categorias (grade) */
.grade-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.tile-categoria { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border: 1px solid var(--borda); border-radius: 12px; text-align: center; }
.tile-categoria:hover { border-color: #b9cbbf; background: #fbfaf7; }
.icone-tile-categoria { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; }
.icone-tile-categoria .icone { width: 18px; height: 18px; }
.nome-tile-categoria { font-size: 12px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.total-tile-categoria { font-size: 12px; color: var(--texto-suave); }

/* Diálogo de colunas */
.dialogo-colunas { width: min(380px, calc(100vw - 32px)); }
.lista-colunas { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.lista-colunas li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; }
.lista-colunas label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--texto); }
.lista-colunas input[type="checkbox"] { accent-color: var(--verde); }
.botoes-mover { display: flex; gap: 2px; }
.botoes-mover button { display: inline-flex; padding: 4px; border: 0; background: none; color: var(--texto-suave); cursor: pointer; }
.botoes-mover button:hover { color: var(--verde); }
.botoes-mover .icone { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .grade-orcamento { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .totais-orcamento-completo { grid-template-columns: 1fr; }
  .grafico-categorias { grid-template-columns: 1fr; gap: 18px; }
  .rosca-grafico { justify-self: center; width: 180px; height: 180px; }
}
.campo-dialogo textarea { width: 100%; padding: 9px 10px; font: inherit; font-size: 13px; font-weight: 400; color: var(--texto); background: #fff; border: 1px solid var(--borda); border-radius: 8px; resize: vertical; }
.campo-dialogo textarea:focus { outline: 2px solid #b9cbbf; border-color: #b9cbbf; }
@media (max-width: 760px) {
  .ferramentas-despesas { width: 100%; }
  .pilula-busca-despesas { flex: 1; min-width: 0; }
  .pilula-busca-despesas input { width: 100%; min-width: 0; }
}

/* ---------- aba Cronograma do projeto (CLAUDE.md, seção 7.10) ---------- */
.grade-cronograma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 310px); gap: 16px; align-items: start; }
.coluna-principal-cronograma, .coluna-lateral-cronograma { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Tipos de evento: cor do selo, do ponto e do título */
.tipo-visita { --cor-evento: #1f7a4d; --fundo-evento: #e3f2e9; }
.tipo-reuniao { --cor-evento: #9a6a12; --fundo-evento: #fbf0d6; }
.tipo-obra { --cor-evento: #1a7f8f; --fundo-evento: #dff1f3; }
.tipo-entrega { --cor-evento: #3b5a9a; --fundo-evento: #e3eaf8; }
.tipo-pagamento { --cor-evento: #6b3fa0; --fundo-evento: #efe6fa; }
.tipo-outro { --cor-evento: #6b736e; --fundo-evento: #eeefec; }

/* Gantt — a coluna "Etapas" nunca rola (não é mais "position: sticky" fingindo ficar parada): só
   .gantt-trilha (de cada linha, inclusive a do cabeçalho) e .gantt-barra-rolagem têm rolagem de
   verdade, e ficam sincronizadas pelo JS em projeto.html (rolar uma rola todas, pelo mesmo
   scrollLeft) — a barra de rolagem de cada uma fica escondida, só a debaixo do gráfico aparece.
   Isso troca a tentativa anterior (coluna "fixa" por sticky, que o Chrome às vezes pintava por baixo
   da barra ao rolar de lado, e cuja linha ligando os marcadores de atividade nem fazia parte da
   coluna sticky — rolava sozinha, sem querer) por uma coluna que realmente nunca se move (2026-09-22,
   pedido do dono depois de ver os dois problemas). */
.gantt-rolagem { margin: 0 -4px; padding: 0 4px; }
.gantt {
  --col-rotulo: 240px; --largura-dia: 6px;  /* mês de ~180 px: dá pra ler e arrastar dia a dia */
  position: relative; font-size: 12px;
}
.gantt-linha { display: grid; grid-template-columns: var(--col-rotulo) minmax(0, 1fr); align-items: stretch; }
.gantt-rotulo { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px 10px 0; min-width: 0; background: var(--superficie); }
/* Linha única do topo ao fim de .gantt (não de cada .gantt-rotulo — ver comentário no template):
   sempre inteira, nunca rola. */
.gantt-divisoria { position: absolute; top: 0; bottom: 0; left: var(--col-rotulo); width: 1px; background: var(--borda); pointer-events: none; }
/* overflow-x: auto é a rolagem de verdade da linha; o conteúdo (barra, "sem datas" etc.) fica dentro
   de .gantt-trilha-interna, do tamanho do período inteiro — scrollbar-width/::-webkit-scrollbar
   escondem a barra de rolagem nativa de cada linha (só a debaixo do gráfico, .gantt-barra-rolagem,
   fica visível). */
.gantt-trilha { position: relative; min-height: 44px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.gantt-trilha::-webkit-scrollbar { display: none; }
.gantt-trilha-interna { position: relative; height: 100%; width: calc(var(--dias) * var(--largura-dia)); }
.gantt-cabecalho { border-bottom: 1px solid var(--borda); }
.gantt-cabecalho .gantt-rotulo { font-weight: 700; color: var(--texto); padding-block: 8px; }
.gantt-cabecalho .gantt-trilha { min-height: 44px; }
.gantt-cabecalho .gantt-mes { bottom: auto; height: 24px; align-items: center; justify-content: flex-start; padding-left: 8px; font-weight: 600; color: var(--texto); border-left: 1px solid var(--borda); }
.gantt-dia-semana { position: absolute; top: 26px; transform: translateX(-50%); font-size: 10px; color: #9aa39e; }
.gantt-mes { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; }
.gantt-corpo { position: relative; }
/* Fica atrás de tudo (mesmo z-index de sempre, auto) e escondida do mouse: as linhas do calendário e
   a de "hoje" seguem a mesma rolagem das trilhas por baixo de .gantt-grade-interna (JS). */
.gantt-grade { position: absolute; top: 0; bottom: 0; left: var(--col-rotulo); right: 0; overflow: hidden; pointer-events: none; }
.gantt-grade-interna { position: relative; height: 100%; width: calc(var(--dias) * var(--largura-dia)); }
.gantt-divisa { position: absolute; top: 0; bottom: 0; border-left: 1px solid #e6e2d9; }
.gantt-divisa-semana { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #f0ede6; }
.gantt-hoje { position: absolute; top: 0; bottom: 0; border-left: 2px solid rgba(179, 67, 47, .45); z-index: 1; }
.gantt-hoje em { position: absolute; top: 2px; left: 4px; font-size: 10px; font-style: normal; font-weight: 600; color: #b3432f; }
.gantt-grupo { position: relative; border-bottom: 1px solid #f0ede6; padding-bottom: 6px; }
.gantt-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gantt-textos strong, .gantt-textos a { font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-textos a:hover { color: var(--verde); text-decoration: underline; }
.gantt-datas { font-size: 11px; color: var(--texto-suave); }
.gantt-situacao { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--texto-suave); }
.gantt-situacao .icone { width: 13px; height: 13px; padding: 2px; border-radius: 50%; background: var(--positivo); color: #fff; stroke-width: 3; }
.situacao-concluida .gantt-situacao, .situacao-em_andamento .gantt-situacao { color: var(--positivo); }
.gantt-marcador-categoria { flex: none; width: 12px; height: 12px; margin-top: 2px; border-radius: 50%; border: 3px solid var(--verde-escuro); background: #fff; position: relative; z-index: 1; }
.gantt-linha-categoria .gantt-trilha { min-height: 64px; }
/* O fio que liga os pontos das atividades é um "::before" (não margin-left + border-left no próprio
   elemento): margin-left empurrava a linha INTEIRA de cada atividade (texto e gráfico) 5px pra
   direita, desalinhando o início do gráfico dessas linhas com a linha divisória de .gantt-divisoria,
   que fica numa posição fixa para todas as linhas (2026-09-22). */
.gantt-atividades { position: relative; }
.gantt-atividades::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: #d9e3dc; }
.gantt-linha-atividade .gantt-rotulo { padding-left: 14px; cursor: grab; user-select: none; touch-action: none; }
.gantt-linha-atividade .gantt-rotulo:active { cursor: grabbing; }
.gantt-alca-ordem { position: absolute; margin-left: -30px; margin-top: 1px; font-size: 10px; letter-spacing: -2px; color: #b9c6bd; opacity: 0; transition: opacity .15s; }
.gantt-linha-atividade:hover .gantt-alca-ordem { opacity: 1; }
/* -11.5px (era -18px) centraliza o ponto no fio de .gantt-atividades::before — a conta mudou quando
   o fio deixou de vir do margin-left do container (2026-09-22, correção anterior) e passou a ser
   desenhado por cima, sem empurrar o rótulo: o ponto ficou sobrando à esquerda do fio. */
.gantt-marcador-atividade { flex: none; width: 7px; height: 7px; margin: 4px 0 0 -11.5px; border-radius: 50%; background: var(--verde-escuro); }
.situacao-pendente .gantt-marcador-atividade { background: #b9c6bd; }
.gantt-linha-atividade.movendo { opacity: .45; background: var(--verde-claro); }
.gantt-barra { position: absolute; top: 50%; transform: translateY(-50%); height: 14px; min-width: 6px; border-radius: 999px; }
.gantt-barra-categoria { height: 18px; background: linear-gradient(90deg, #1f5a45, #8cc3aa); }
.gantt-barra-atividade { background: #7fb79d; box-shadow: 0 1px 2px rgba(20, 30, 25, .12); }
.situacao-concluida .gantt-barra-atividade { background: #2f6b53; }
.situacao-em_andamento .gantt-barra-atividade { background: linear-gradient(90deg, #2f6b53, #7fb79d); }
.situacao-pendente .gantt-barra-atividade { background: #b7d6c7; }
.gantt-alca { position: absolute; top: -4px; bottom: -4px; width: 12px; cursor: ew-resize; touch-action: none; z-index: 2; }
.gantt-alca::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 12px; border-radius: 2px; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 0 1px rgba(20, 30, 25, .25); opacity: 0; transition: opacity .15s; }
.gantt-alca-inicio { left: -6px; }
.gantt-alca-fim { right: -6px; }
.gantt-barra:hover .gantt-alca::after, .gantt-barra.arrastando .gantt-alca::after { opacity: 1; }
.gantt-barra.arrastando { box-shadow: 0 0 0 2px rgba(35, 65, 58, .35); }
.gantt-dica { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 3px 7px; border-radius: 6px; background: var(--verde-escuro); color: #fff; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; }
.gantt-barra.arrastando .gantt-dica { opacity: 1; }
.gantt-sem-datas { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); font-size: 12px; color: var(--texto-suave); }
/* "position: sticky" aqui gruda no scroll da própria .gantt-trilha (a mãe rolável mais próxima —
   pequena, só esta linha), não no da página inteira: sempre visível em vez de rolar junto com a
   linha do tempo. Diferente do rótulo (seção acima), aqui não tem bug de pintura por cima de nada,
   porque uma trilha vazia nunca tem barra ao lado pra disputar espaço. */
.gantt-definir-datas { position: sticky; top: 50%; left: 8px; display: inline-block; transform: translateY(-50%); font-size: 11px; color: #a4aca7; pointer-events: none; }
.gantt-trilha-vazia { cursor: copy; }
.gantt-trilha-vazia:hover { background: rgba(35, 65, 58, .04); }
.gantt-trilha-vazia:hover .gantt-definir-datas { color: var(--verde); }
.gantt-nova-atividade { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin: 4px 0; padding: 2px 10px 2px 22px; background: var(--superficie); font-size: 11px; font-weight: 600; color: var(--verde); }
.gantt-nova-atividade .icone { width: 12px; height: 12px; }
.gantt-nova-atividade:hover { text-decoration: underline; }
/* Barra de rolagem única e sempre visível, alinhada só com a coluna do gráfico (margin-left pula a
   coluna "Etapas"); é a única das rolagens que mostra a barra nativa — as outras (uma por linha,
   .gantt-trilha) ficam escondidas e só seguem esta (ou qualquer uma delas) pelo JS. */
.gantt-barra-rolagem { margin-left: var(--col-rotulo); height: 14px; overflow-x: auto; overflow-y: hidden; }
.gantt-barra-rolagem-interna { width: calc(var(--dias) * var(--largura-dia)); height: 1px; }

/* Calendário */
.seletor-vista { display: inline-flex; padding: 3px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.seletor-vista a { padding: 6px 16px; border-radius: 8px; font-size: 12px; color: var(--texto-suave); }
.seletor-vista a.ativa { background: var(--verde-escuro); color: #fff; font-weight: 600; }
.navegacao-calendario { display: flex; align-items: center; gap: 12px; }
.navegacao-calendario h3 { margin: 0; font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 18px; color: var(--verde-escuro); }
.botao-seta-calendario { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--borda); border-radius: 50%; background: #fff; color: var(--texto); }
.botao-seta-calendario:hover { border-color: #b9cbbf; color: var(--verde); }
.botao-seta-calendario .icone { width: 14px; height: 14px; }
.link-hoje-calendario { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--verde); }
.calendario-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.calendario-cabecalho { padding: 10px 6px; text-align: center; font-size: 11px; color: var(--texto-suave); background: #fcfbf8; border-bottom: 1px solid var(--borda); }
.calendario-dia { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 92px; padding: 8px 6px; border-right: 1px solid #f0ede6; border-bottom: 1px solid #f0ede6; min-width: 0; }
.calendario-dia:nth-child(7n + 7) { border-right: 0; }
.calendario-dia.fora-do-mes { background: #fcfbf8; }
.calendario-dia.fora-do-mes .numero-dia { color: #b9bfbb; }
.numero-dia { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 11px; color: var(--texto-suave); }
.dia-hoje .numero-dia { border-radius: 50%; background: var(--verde-escuro); color: #fff; font-weight: 700; }
.novo-evento-dia { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 14px; color: var(--verde); opacity: 0; transition: opacity .15s; }
.calendario-dia:hover .novo-evento-dia, .novo-evento-dia:focus { opacity: 1; background: var(--verde-claro); }
.chip-evento { display: block; width: fit-content; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: var(--fundo-evento); color: var(--cor-evento); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-evento:hover { filter: brightness(.96); }
.mais-eventos { font-size: 10px; color: var(--texto-suave); padding-left: 4px; }
.calendario-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.coluna-semana { display: flex; flex-direction: column; gap: 6px; min-height: 260px; padding: 8px 6px; border-right: 1px solid #f0ede6; min-width: 0; }
.coluna-semana:last-child { border-right: 0; }
.cabecalho-semana { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid #f0ede6; color: var(--texto-suave); font-size: 11px; }
.cabecalho-semana strong { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 14px; color: var(--texto); }
.dia-hoje .cabecalho-semana strong { border-radius: 50%; background: var(--verde-escuro); color: #fff; }
.chip-evento-semana { border-radius: 8px; white-space: normal; line-height: 1.3; padding: 5px 7px; }
.chip-evento-semana small { display: block; font-weight: 600; }
.novo-evento-semana { margin-top: auto; text-align: center; font-size: 16px; color: #b9c6bd; border-radius: 8px; }
.novo-evento-semana:hover { color: var(--verde); background: var(--verde-claro); }
.calendario-dia-lista { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.calendario-dia-lista > .botao { align-self: flex-start; }
.evento-do-dia { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; }
.evento-do-dia:hover { border-color: #b9cbbf; background: #fcfbf8; }
.hora-evento { width: 62px; flex: none; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.texto-evento-dia { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.texto-evento-dia small { color: var(--texto-suave); font-size: 12px; }

/* Eventos (coluna direita) */
.card-adicionar-evento .botao { width: fit-content; margin-top: 0; padding-inline: 28px; }
.ponto-evento { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--cor-evento); box-shadow: 0 0 0 3px var(--fundo-evento); }
.linha-eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linha-eventos li { position: relative; display: flex; gap: 12px; padding: 0 0 16px; }
.linha-eventos li:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 0; width: 2px; background: #e6ebe7; }
.linha-eventos li:not(:last-child) a { padding-bottom: 14px; border-bottom: 1px solid #f0ede6; }
.linha-eventos a { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: 12px; color: var(--texto-suave); }
.linha-eventos small { font-size: 11px; }
.titulo-evento { font-size: 13px; color: var(--texto); }
.titulo-evento.tipo-pagamento, .titulo-evento.tipo-entrega { color: var(--cor-evento); }
.linha-eventos a:hover .titulo-evento { text-decoration: underline; }
.linha-eventos-todos { max-height: 60vh; overflow-y: auto; margin-top: 12px; }
.tipos-evento { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; }
.tipos-evento legend { width: 100%; margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 600; color: #3b4540; }
.opcao-tipo-evento { position: relative; cursor: pointer; }
.opcao-tipo-evento input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao-tipo-evento span { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid transparent; background: var(--fundo-evento); color: var(--cor-evento); font-size: 12px; font-weight: 600; }
.opcao-tipo-evento input:checked + span { border-color: var(--cor-evento); box-shadow: 0 0 0 1px var(--cor-evento); }
.opcao-tipo-evento input:focus-visible + span { outline: 2px solid #b9cbbf; outline-offset: 2px; }

@media (max-width: 1100px) {
  .grade-cronograma { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .calendario-mes, .calendario-semana { overflow-x: auto; display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); }
  .seletor-vista { width: 100%; }
  .seletor-vista a { flex: 1; text-align: center; padding-inline: 6px; }
}

/* ---------- Meus resultados (CLAUDE.md, seção 7.11) ---------- */
.ultima-atualizacao-topo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
.ultima-atualizacao-topo .icone { width: 14px; height: 14px; }
.seletor-periodo-resultados select { min-width: 150px; padding: 9px 10px; font-size: 13px; }

.cabecalho-resultados { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.cabecalho-resultados h1 { font-size: 30px; }

.kpis-resultados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi-resultado { display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.kpi-resultado > span:first-child { font-size: 12px; color: var(--texto-suave); }
.kpi-resultado strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 26px; color: var(--verde-escuro); }
.variacao-kpi { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; }
.variacao-kpi .icone { width: 12px; height: 12px; }
.variacao-kpi.positiva { color: var(--positivo); }
.variacao-kpi.negativa { color: var(--negativo); }
.kpi-resultado .suave { font-size: 11px; margin-left: 2px; }

.grade-resultados { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.grade-resultados .card-projeto-pagina { display: flex; flex-direction: column; }
.coluna-lateral-resultados { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card-estatistica-resultado { flex: 1; display: flex; gap: 12px; }
.corpo-estatistica-resultado { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.corpo-estatistica-resultado h3 { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 14px; color: var(--verde-escuro); }
.corpo-estatistica-resultado dl { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.corpo-estatistica-resultado dl > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 9px; background: #fbfaf7; }
.corpo-estatistica-resultado .linha-media { background: var(--verde-claro); }
.corpo-estatistica-resultado dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-suave); }
.corpo-estatistica-resultado dt .icone { width: 13px; height: 13px; }
.corpo-estatistica-resultado dd { font-size: 13px; font-weight: 700; color: var(--texto); white-space: nowrap; }

/* Gráfico de barras (herda .barras/.barra-dia/.barra/.barra-rotulo/.barra-dica já usados em "Novos anúncios por dia") */
.barras-resultados { display: flex; min-height: 260px; align-items: flex-end; gap: 14px; }
.barras-resultados > * { flex: 1; min-width: 0; }
.barras-resultados .barra-rotulo { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.valor-sobre-barra { font-size: 11px; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; white-space: nowrap; }
.barra-negativa { background: var(--negativo); }
.barra-dia:hover .barra-negativa, .barra-dia:focus-visible .barra-negativa { background: #963626; }

.legenda-resultados { display: flex; gap: 18px; list-style: none; margin: -4px 0 4px; padding: 0; font-size: 12px; color: var(--texto-suave); }
.legenda-resultados li { display: flex; align-items: center; gap: 6px; }
.ponto-legenda { width: 9px; height: 9px; border-radius: 50%; }
.ponto-compra { background: var(--verde-escuro); }
.ponto-venda { background: #8cc3aa; }
.ponto-lucro { background: #3b5a9a; }
.ponto-gastos { background: #c9a34e; }
.ponto-legenda.ponto-compra, .segmento-composicao.ponto-compra, .barra-trio.ponto-compra .barra { background: var(--verde-escuro); }
.ponto-legenda.ponto-venda, .barra-trio.ponto-venda .barra { background: #8cc3aa; }
.ponto-legenda.ponto-lucro, .segmento-composicao.ponto-lucro, .barra-trio.ponto-lucro .barra { background: #3b5a9a; }
.segmento-composicao.ponto-gastos { background: #c9a34e; }

.barras-triplas { gap: 20px; }
.grupo-barras-triplas { position: relative; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap: 3px; }
.barra-trio { position: relative; display: inline-flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; outline: none; }
.barra-trio .barra { width: 14px; min-height: 2px; height: var(--altura); border-radius: 4px 4px 0 0; transition: filter .15s; }
.barra-trio:hover .barra, .barra-trio:focus-visible .barra { filter: brightness(.88); }
.barra-trio .barra-dica { bottom: calc(100% + 6px); }
.grupo-barras-triplas .barra-rotulo { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); }

.composicao-venda { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.linha-composicao-venda { display: grid; grid-template-columns: 130px minmax(0, 1fr) 100px; align-items: center; gap: 12px; }
.nome-composicao { font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-composicao-venda { display: flex; align-items: stretch; height: 24px; border-radius: 6px; background: #f0ede6; overflow: hidden; }
.segmento-composicao { height: 100%; min-width: 0; }
.total-composicao { font-size: 13px; font-weight: 700; color: var(--verde-escuro); text-align: right; white-space: nowrap; }

@media (max-width: 1100px) {
  .kpis-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-resultados { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kpis-resultados { grid-template-columns: 1fr; }
  .topo { flex-wrap: wrap; }
  .ultima-atualizacao-topo { display: none; }
  .linha-composicao-venda { grid-template-columns: 90px minmax(0, 1fr) 80px; gap: 8px; }
}

/* ---------- telas de entrada: entrar, criar conta, senha (CLAUDE.md, seção 7.12) ----------
   Duas colunas: a foto com a frase de impacto à esquerda, o cartão do formulário à direita. */
.pagina-entrada { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.entrada-foto {
  position: relative; display: flex; padding: 44px 48px; overflow: hidden;
  background: var(--verde-escuro) url("img/login-sala.jpg") center/cover no-repeat;
}
/* Véu verde por cima da foto: o texto branco precisa de contraste, e a foto sozinha é clara demais
   na metade de baixo. Mais fechado à esquerda, quase transparente à direita. */
.entrada-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(10, 30, 20, .92) 0%, rgba(14, 38, 26, .72) 45%, rgba(20, 48, 34, .45) 100%),
    linear-gradient(to top, rgba(8, 24, 16, .85), transparent 45%);
}
.entrada-foto-conteudo {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; color: #fff;
}

.marca-entrada { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-entrada img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.marca-entrada > span { font-family: "Bitter", serif; font-size: 30px; font-weight: 700; }
/* Sobre a foto escura, as duas cores do logo (verde-oliva e verde bem escuro) sumiriam: aqui o
   nome vai em creme e branco, as mesmas cores das letras do logo na versão clara dele. */
.marca-entrada .marca-flip { color: #e9e2d2; }
.marca-entrada .marca-hub { color: #fff; }

.entrada-chamada { max-width: 560px; }
.entrada-etiqueta {
  margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.entrada-etiqueta i { margin: 0 8px; font-style: normal; color: rgba(255, 255, 255, .5); }
.entrada-chamada h2 {
  font-family: "Bitter", serif; font-size: 52px; font-weight: 700; line-height: 1.08; color: #fff;
}
.entrada-chamada p { margin-top: 20px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .8); }

.entrada-recursos {
  display: flex; gap: 0; padding-top: 22px; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.entrada-recursos li {
  display: flex; align-items: center; gap: 12px; flex: 1; padding: 0 22px;
  font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .85);
}
.entrada-recursos li:first-child { padding-left: 0; }
.entrada-recursos li + li { border-left: 1px solid rgba(255, 255, 255, .18); }
.entrada-recursos .icone { width: 22px; height: 22px; flex-shrink: 0; color: rgba(255, 255, 255, .75); }

.entrada-painel {
  display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #f7f7f3;
}
.cartao-entrada {
  width: min(430px, 100%); padding: 38px 36px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra);
}
.marca-cartao { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-family: "Bitter", serif; font-size: 30px; font-weight: 700; }
.marca-cartao img { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.cartao-entrada h1 { font-size: 26px; color: var(--verde); }
.subtitulo-entrada { margin-top: 8px; color: var(--texto-suave); line-height: 1.5; }
.subtitulo-entrada:empty { display: none; }

.formulario-entrada { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.formulario-entrada label { font-size: 12px; font-weight: 600; color: #3b4540; }
.campo-icone { position: relative; display: flex; align-items: center; }
.campo-icone > .icone {
  position: absolute; left: 13px; width: 17px; height: 17px; color: #9aa39c; pointer-events: none;
}
.campo-icone input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 10px; }
.campo-icone input::placeholder { color: #a8afa9; }
.ver-senha {
  position: absolute; right: 8px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none;
  color: #9aa39c; cursor: pointer;
}
.ver-senha:hover { background: #f1f0ea; color: var(--texto); }
.ver-senha .icone { width: 17px; height: 17px; }
.ver-senha .icone:last-child, .ver-senha.mostrando .icone:first-child { display: none; }
.ver-senha.mostrando .icone:last-child { display: block; }

.linha-lembrar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.lembrar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.lembrar input { width: 16px; height: 16px; accent-color: var(--verde); cursor: pointer; }
.lembrar span { font-weight: 500; color: #3b4540; }
.linha-lembrar a { color: var(--verde); font-weight: 600; text-decoration: none; }
.linha-lembrar a:hover { text-decoration: underline; }

.botao-entrar { margin-top: 6px; padding: 13px 14px; font-size: 15px; border-radius: 12px; }
.botao-entrar .icone { width: 17px; height: 17px; }

.separador-ou { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--texto-suave); font-size: 12px; }
.separador-ou::before, .separador-ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

.botao-google { gap: 10px; margin-top: 0; padding: 12px 14px; border-radius: 12px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); }
.botao-google:hover { background: #f3f1ea; }
.botao-google .icone { width: 18px; height: 18px; }

.nota-entrada { line-height: 1.6; }
.nota-entrada code { font-size: 10px; background: #f3f1ea; padding: 1px 4px; border-radius: 4px; }
.rodape-cartao { margin-top: 20px; text-align: center; font-size: 12px; color: var(--texto-suave); }
.rodape-cartao a { color: var(--verde); font-weight: 600; text-decoration: none; }
.rodape-cartao a:hover { text-decoration: underline; }
.cartao-entrada .alerta { margin-top: 16px; }

/* Celular e tablet: uma coluna só, com a foto virando uma faixa curta no topo. */
@media (max-width: 900px) {
  .pagina-entrada { grid-template-columns: 1fr; }
  .entrada-foto { padding: 26px 24px 30px; min-height: 260px; }
  .entrada-chamada { margin-top: 26px; }
  .entrada-chamada h2 { font-size: 34px; }
  .entrada-chamada p { font-size: 14px; }
  .entrada-chamada p br, .entrada-recursos { display: none; }
  .entrada-painel { padding: 28px 18px 44px; }
  .cartao-entrada { padding: 30px 22px; }
}

.pagina-conta { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.painel-conta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-conta { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-conta-iniciais { display: flex; align-items: center; justify-content: center; background: var(--verde-claro); color: var(--verde); font-family: "Bitter", serif; font-size: 22px; font-weight: 700; }
.dados-conta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dados-conta h2 { font-size: 19px; }
.botao-sair { width: auto; margin: 0; }
.titulo-conta { font-size: 17px; margin-bottom: 12px; }
.numeros-conta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.numero-conta { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 12px; background: #fbfaf7; border: 1px solid var(--borda); }
.numero-conta:hover { background: var(--verde-claro); }
.numero-conta strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 22px; color: var(--verde-escuro); }
.numero-conta span { font-size: 12px; color: var(--texto-suave); }
.avatar-foto { object-fit: cover; }

/* ---------- menu lateral recolhido (só ícones, decisão do dono, 2026-09-15) ---------- */
html.menu-recolhido .layout { grid-template-columns: 72px 1fr; }
html.menu-recolhido .menu { padding: 24px 10px; }
html.menu-recolhido .marca span { display: none; }
html.menu-recolhido .marca { justify-content: center; padding: 0; }
html.menu-recolhido .botao-recolher-menu { transform: rotate(180deg); }
html.menu-recolhido .menu-links a { justify-content: center; padding: 11px 8px; }
html.menu-recolhido .menu-links a span { display: none; }
html.menu-recolhido .menu-dropdown > summary { display: none; }
html.menu-recolhido .menu-dropdown > a { display: flex !important; }
html.menu-recolhido .cartao-mini { display: none; }
html.menu-recolhido .menu-usuario { flex-direction: column; gap: 10px; justify-content: center; padding-top: 16px; }
html.menu-recolhido .usuario { justify-content: center; }
html.menu-recolhido .usuario-nome { display: none; }
html.menu-recolhido .menu-usuario .sino { margin: 0; }

/* Simulações salvas: a linha inteira abre a simulação para editar (decisão do dono, 2026-09-16),
   com destaque ao passar o mouse para deixar claro que ela é clicável. */
.linha-abrivel { cursor: pointer; transition: background .15s; }
.linha-abrivel:hover td { background: #f7f9f6; }
.linha-abrivel.linha-atual:hover td { background: var(--verde-claro); }

/* ------------------------------------------------------------------ Exportar dados (seção 7.14) */
/* Protótipo aprovado pelo dono em 2026-09-18: 4 passos à esquerda, prévia fixa à direita,
   histórico embaixo. Classes com o prefixo exp- para não esbarrar nas do resto do site. */
.exp-suave { color: var(--texto-suave); }
.exp-cota { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px; min-width: 250px; flex-shrink: 0; }
.exp-cota-linha { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; color: var(--texto-suave); }
.exp-cota strong { font: 600 20px "Bitter", serif; color: var(--verde-escuro); }
.exp-cota-barra { height: 6px; background: var(--verde-claro); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.exp-cota-barra span { display: block; height: 100%; background: var(--verde); border-radius: 3px; }
.exp-grade { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.exp-cartao { margin-bottom: 16px; padding: 18px 20px; }
.exp-titulo { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--verde-escuro); margin-bottom: 14px; }
.exp-passo { width: 24px; height: 24px; border-radius: 50%; background: var(--verde-escuro); color: #fff; font: 600 12px "IBM Plex Sans", sans-serif; display: grid; place-items: center; flex: none; }
/* 1. tipo de relatório */
.exp-tipos, .exp-formatos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exp-tipo { position: relative; border: 1.5px solid var(--borda); border-radius: 12px; padding: 14px; cursor: pointer; display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; }
.exp-tipo input, .exp-formato input { position: absolute; opacity: 0; pointer-events: none; }
.exp-tipo-icone { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; background: var(--verde-claro); color: var(--verde); display: grid; place-items: center; }
.exp-tipo-icone .icone { width: 18px; height: 18px; }
.exp-tipo strong { font-size: 14.5px; }
.exp-tipo > span:last-child { color: var(--texto-suave); font-size: 12.5px; }
.exp-tipo:has(input:checked), .exp-formato:has(input:checked) { border-color: var(--verde); background: #f6faf7; box-shadow: 0 0 0 3px rgba(35, 65, 58, .08); }
.exp-tipo:has(input:checked) .exp-tipo-icone { background: var(--verde); color: #fff; }
.exp-tipo:has(input:focus-visible), .exp-formato:has(input:focus-visible) { outline: 2px solid #b9cbbf; outline-offset: 2px; }
/* 2. onde */
.exp-abas { display: inline-flex; flex-wrap: wrap; background: var(--fundo); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.exp-abas button { border: 0; background: none; padding: 7px 16px; border-radius: 999px; cursor: pointer; display: flex; gap: 6px; align-items: center; color: var(--texto-suave); font: inherit; font-size: 13px; }
.exp-abas button .icone { width: 16px; height: 16px; }
.exp-abas button.ativo { background: #fff; color: var(--verde-escuro); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.exp-busca { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: 999px; padding: 8px 14px; background: #fff; min-width: 0; }
.exp-busca .icone { width: 16px; height: 16px; color: var(--texto-suave); flex: none; }
.exp-busca input { border: 0; outline: 0; flex: 1; min-width: 0; width: 100%; background: none; font: inherit; }
.exp-busca:focus-within { border-color: #b9cbbf; box-shadow: 0 0 0 3px rgba(185, 203, 191, .35); }
.exp-sugestoes { border: 1px solid var(--borda); border-radius: 12px; margin-top: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); background: #fff; }
.exp-sugestao { width: 100%; border: 0; background: none; padding: 8px 14px; display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.exp-sugestao:hover, .exp-sugestao:focus-visible { background: var(--fundo); outline: 0; }
.exp-sugestao small { color: var(--texto-suave); white-space: nowrap; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.exp-chips:empty { display: none; }
.exp-chip { background: var(--verde-claro); color: var(--verde-escuro); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.exp-chip button { border: 0; background: rgba(35, 65, 58, .12); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 12px; color: inherit; }
.exp-nota { color: var(--texto-suave); font-size: 12px; margin-top: 8px; }
.exp-endereco { display: flex; gap: 8px; align-items: center; }
.exp-busca-endereco { flex: 1; }
.exp-numero { width: 96px; border: 1px solid var(--borda); border-radius: 999px; padding: 8px 12px; font: inherit; }
.exp-aviso-local { margin-top: 8px; font-size: 12.5px; color: #7a5f25; background: #fbf6ea; border: 1px solid #ecdfbf; border-radius: 8px; padding: 6px 10px; }
.exp-aviso-local[hidden] { display: none; }
.exp-mapa-ponto { position: relative; margin-top: 10px; height: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--borda); background: #eee; }
.exp-dica-mapa { position: absolute; left: 10px; top: 10px; z-index: 2; background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); pointer-events: none; }
.exp-sem-mapa { padding: 40px 20px; text-align: center; color: var(--texto-suave); }
.exp-raio { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.exp-raio input { flex: 1; accent-color: var(--verde); }
.exp-raio strong { min-width: 60px; text-align: right; font: 600 15px "Bitter", serif; color: var(--verde-escuro); }
/* 3. filtros */
.exp-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.exp-filtro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exp-rotulo { font-size: 12px; color: var(--texto-suave); font-weight: 500; }
.exp-etiqueta { font-size: 10px; background: #fbf0d6; color: #7a5f25; border-radius: 4px; padding: 1px 6px; margin-left: 6px; font-weight: 600; }
.exp-so-revenda { display: none; }
.exp-revendas .exp-so-revenda { display: flex; }
.exp-pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-pilulas label { position: relative; cursor: pointer; }
.exp-pilulas input { position: absolute; opacity: 0; pointer-events: none; }
.exp-pilulas span { display: inline-block; border: 1px solid var(--borda); background: #fff; border-radius: 999px; padding: 6px 13px; font-size: 13px; }
.exp-pilulas input:checked + span { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.exp-pilulas input:focus-visible + span { outline: 2px solid #b9cbbf; outline-offset: 2px; }
.exp-select { width: 100%; border: 1px solid var(--borda); border-radius: 999px; padding: 8px 12px; background: #fff; font: inherit; }
.exp-duplo { display: flex; align-items: center; gap: 6px; }
.exp-duplo .exp-busca { flex: 1; padding: 7px 12px; }
.exp-duplo > .exp-suave { font-size: 12px; }
/* 4. formato */
.exp-formato { position: relative; border: 1.5px solid var(--borda); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: flex; gap: 12px; align-items: center; }
.exp-formato strong { display: block; }
.exp-formato .exp-suave { display: block; font-size: 12px; }
.exp-formato-icone { width: 34px; height: 40px; border-radius: 5px; display: grid; place-items: center; font: 700 10px "IBM Plex Sans", sans-serif; color: #fff; flex: none; }
.exp-pdf { background: var(--negativo); }
.exp-xlsx { background: var(--positivo); }
/* prévia */
.exp-previa { position: sticky; top: 20px; }
.exp-cartao-previa { padding: 0; overflow: hidden; }
.exp-previa-topo { padding: 16px 18px 12px; }
.exp-previa-topo .exp-titulo { margin-bottom: 6px; }
.exp-contagem strong { font: 700 34px "Bitter", serif; color: var(--verde-escuro); line-height: 1.1; }
.exp-descricao { font-size: 12.5px; }
.exp-alerta { margin: 0 18px 10px; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; display: flex; gap: 8px; }
.exp-alerta[hidden] { display: none; }
.exp-alerta .icone { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.exp-alerta a { color: inherit; font-weight: 600; text-decoration: underline; }
.exp-alerta-amarelo { background: #fbf6ea; border: 1px solid #ecdfbf; color: #6d5522; }
.exp-alerta-vermelho { background: #fbecea; border: 1px solid #efcac4; color: #8a3325; }
.exp-mapa-previa { aspect-ratio: 1 / 1; width: 100%; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: #eee; }
.exp-mapa-previa[hidden] { display: none; }
.exp-legenda-calor { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 8px 18px 0; font-size: 11.5px; }
.exp-legenda-calor[hidden] { display: none; }
.exp-legenda-titulo { width: 100%; font-weight: 600; color: var(--texto); }
.exp-legenda-item { display: inline-flex; align-items: center; gap: 4px; }
.exp-legenda-item i { width: 11px; height: 11px; border-radius: 2px; }
.exp-amostra { width: calc(100% - 24px); margin: 6px 12px 0; border-collapse: collapse; font-size: 12px; }
.exp-amostra[hidden] { display: none; }
.exp-amostra th { text-align: left; color: var(--texto-suave); font-weight: 500; padding: 8px 6px 4px; border-bottom: 1px solid var(--borda); }
.exp-amostra th.r { text-align: right; }
.exp-amostra td { padding: 6px; border-bottom: 1px solid #f0ede6; white-space: nowrap; }
.exp-amostra td.exp-end { white-space: normal; }
.exp-amostra td.exp-end small { display: block; color: var(--texto-suave); font-size: 11px; }
.exp-amostra .r { text-align: right; }
.exp-amostra .positivo { color: var(--positivo); }
.exp-amostra .negativo { color: var(--negativo); }
.exp-contem { padding: 10px 18px; font-size: 12.5px; }
.exp-contem strong { color: var(--texto); }
.exp-acao { padding: 14px 18px 18px; border-top: 1px solid var(--borda); background: #fcfbf8; }
.exp-botao-gerar { width: 100%; justify-content: center; border-radius: 999px; padding: 12px; }
.exp-acao p { margin-top: 8px; text-align: center; font-size: 12px; }
/* histórico */
.exp-titulo-historico { justify-content: space-between; flex-wrap: wrap; }
.exp-titulo-historico > span:first-child { display: flex; gap: 8px; align-items: center; }
.exp-titulo-historico .exp-suave { font: 400 12.5px "IBM Plex Sans", sans-serif; }
.exp-vazio { color: var(--texto-suave); padding: 6px 0 4px; }
@media (max-width: 1100px) {
  .exp-grade { grid-template-columns: 1fr; }
  .exp-previa { position: static; }
}
@media (max-width: 640px) {
  .exp-tipos, .exp-formatos, .exp-filtros { grid-template-columns: 1fr; }
  .cabecalho-analises { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Plano grátis: análise trancada (CLAUDE.md, seção 7.16, redesenho de 2026-09-21)
   O card e a ficha aparecem normais; só os valores de Média da região e Potencial de lucro ficam
   borrados, com o botão de revelar por cima. Os números são falsos: os de verdade nem saem do servidor
   (app/templates/_indicadores_trancados.html).
   --------------------------------------------------------------------------- */
.indicadores-trancados { position: relative; }
.indicadores-trancados .borrado { filter: blur(6px); user-select: none; }
.trava-indicadores {
  position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 12px; padding: 4px 10px; text-align: center; border-radius: 10px;
  background: rgba(255, 255, 255, .5); backdrop-filter: blur(1px);
}
.trava-indicadores form { margin: 0; }
.trava-indicadores .botao { padding: 6px 14px; font-size: 12.5px; width: auto; }
.trava-nota { flex-basis: 100%; font-size: 10.5px; color: var(--texto-suave); line-height: 1.2; }
.trava-texto { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--verde-escuro); }
.trava-texto .icone { width: 14px; height: 14px; }
.botao-favorito.desativado { opacity: .55; cursor: not-allowed; }
.botao-favorito.desativado:hover { transform: none; background: inherit; }
.media-titulo-ficha .indicadores-trancados { min-width: 210px; }

.painel-trancado .nota-revelacoes { color: var(--texto-suave); font-size: 13px; }
.resumo-mapa-trancado { display: flex; flex-direction: column; gap: 6px; }
.resumo-mapa-trancado .botao { padding: 7px 12px; font-size: 13px; }

/* Aviso de relatório pronto ao lado do item do menu */
.contagem-menu { position: static; margin-left: auto; }

/* ---------- lista de relatórios e exportações ---------- */
.tabela-relatorios td { vertical-align: top; }
.tabela-relatorios .detalhe { display: block; margin-top: 2px; }
.rel-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.rel-status .icone { width: 13px; height: 13px; }
.rel-pronto { background: #e3f2e9; color: var(--positivo, #1f7a4d); }
.rel-gerando { background: #fbf0d6; color: #8a6a1e; }
.rel-erro { background: #fbe9e6; color: var(--negativo, #b3432f); }
.rel-expirado { background: #eeefec; color: var(--texto-suave, #6b736e); }
.linha-nova td { background: #f5f8f4; }
.selo-novo { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--dourado, #9a7b3c); color: #fff; font-size: 10px; font-weight: 600; }
.exp-erro-texto { color: var(--negativo, #b3432f) !important; font-weight: 600; }

/* Plano grátis: páginas pagas visíveis no menu, com cadeado (decisão do dono, 2026-09-21) */
.menu-links a.menu-bloqueado { opacity: .6; }
.menu-links a.menu-bloqueado:hover { opacity: .85; }
.icone-cadeado-menu { margin-left: auto; width: 13px; height: 13px; flex: none; }
.sino-bloqueado { position: relative; opacity: .7; }
.icone-cadeado-sino { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; background: #fff; color: var(--verde-escuro); border-radius: 50%; padding: 1px; }
.botao-acao-ficha.desativado { opacity: .55; cursor: not-allowed; }

/* Balão do mapa: a média da região trancada, com o botão de revelar no lugar dela */
.resumo-mapa-trava { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 2px; }
.resumo-mapa-trava .botao { padding: 5px 12px; font-size: 12.5px; width: auto; }
.trava-indicadores .botao[disabled], .resumo-mapa-trava .botao[disabled] { opacity: .7; cursor: progress; }

/* Comparador de favoritos (seção 7.17) */
.marcar-comparar-rotulo { position: absolute; top: 10px; right: 52px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 5px 9px; background: #fff; border-radius: 6px; box-shadow: var(--sombra); font-size: 12px; font-weight: 600; cursor: pointer; }
.marcar-comparar-rotulo input { margin: 0; accent-color: var(--verde); }
.barra-comparar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.barra-comparar button { border: 0; border-radius: 8px; padding: 8px 16px; background: var(--verde); color: #fff; font-weight: 600; cursor: pointer; }
.barra-comparar button:disabled { background: #c9d1cb; cursor: not-allowed; }
.comparador-rolagem { overflow-x: auto; margin-top: 16px; }
.tabela-comparar { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela-comparar th, .tabela-comparar td { padding: 9px 12px; border-bottom: 1px solid var(--borda); text-align: left; font-size: 14px; vertical-align: top; }
.tabela-comparar tbody th[scope=row] { width: 170px; font-weight: 600; color: #5b6a62; }
.tabela-comparar td { font-weight: 600; }
.tabela-comparar .secao th { background: #f3f1ea; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dourado); }
.tabela-comparar td.melhor { background: #e6f2e9; color: #1f6b3a; }
.tabela-comparar td.positivo:not(.melhor) { color: #1f6b3a; }
.tabela-comparar td.negativo { color: #b3432f; }
.coluna-imovel { min-width: 150px; }
.coluna-imovel .miniatura { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #e7ebe5, #d7ded6); }
.coluna-imovel .miniatura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coluna-imovel .nome-imovel { display: block; font-weight: 700; margin-bottom: 4px; }
.coluna-imovel .pequeno { font-size: 12px; font-weight: 500; }
.melhor-exemplo { background: #e6f2e9; color: #1f6b3a; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

/* Resultado presumido em pizza (Revendas rápidas) */
.pizza-resultado-presumido { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.painel-resultado-presumido .rosca-grafico { width: 170px; height: 170px; }
.lista-fatias-resultado { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lista-fatias-resultado li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; }
.lista-fatias-resultado li div { display: flex; flex-direction: column; gap: 2px; }
.lista-fatias-resultado li span:not(.ponto-categoria) { color: var(--texto-suave); }
.lista-fatias-resultado .ponto-categoria { margin-top: 4px; flex: none; }

/* Quadros do topo de Revendas rápidas: o mesmo desenho do relatório de viabilidade (rótulo, valor grande,
   linha de apoio; a fileira do lucro presumido em verde). Termina alinhado com a coluna da direita. */
.indicadores-revendas { display: grid; grid-template-columns: 210px 1px repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 12px; min-width: 0; }
.indicadores-revendas .coluna-revendas-periodo, .grade-indicadores { display: contents; }
.coluna-revendas-periodo > :nth-child(1) { grid-column: 1; grid-row: 1; }
.coluna-revendas-periodo > :nth-child(2) { grid-column: 1; grid-row: 2; }
.divisor-indicadores { grid-column: 2; grid-row: 1 / 3; background: var(--borda); margin: 0 -1px; }
.quadro-indicador { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.quadro-indicador.presumido { background: var(--verde-claro); border-color: #cfe0d3; }
.quadro-indicador .ajuda { position: absolute; top: 10px; right: 10px; }
.rotulo-indicador { font-size: 12.5px; line-height: 1.3; color: var(--texto-suave); padding-right: 22px; min-height: 32px; }
.valor-indicador { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 27px; line-height: 1.15; color: var(--verde-escuro); margin-top: 4px; }
.sub-indicador { font-size: 12px; line-height: 1.35; color: var(--texto-suave); }
.quadro-indicador .selo-variacao { margin-top: 6px; padding: 3px 8px; font-size: 10.5px; white-space: normal; }
.quadro-indicador.sem-premissas { grid-column: 3 / -1; justify-content: center; }
.quadro-indicador .vazio { margin: 0; font-size: 13px; color: var(--texto-suave); }
@media (max-width: 900px) {
  .indicadores-revendas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .coluna-revendas-periodo > :nth-child(1), .coluna-revendas-periodo > :nth-child(2) { grid-column: auto; grid-row: auto; }
  .divisor-indicadores { display: none; }
  .quadro-indicador.sem-premissas { grid-column: 1 / -1; }
}

/* Avaliação de 1 a 5 estrelas dos contatos do projeto */
.estrelas-contato { display: flex; gap: 0; margin: 2px 0 0; }
.estrelas-contato button { border: 0; background: none; padding: 0 1px; font-size: 16px; line-height: 1; color: #d3d7d1; cursor: pointer; }
.estrelas-contato button.cheia { color: #d9a21b; }
.estrelas-contato:hover button { color: #d9a21b; }
.estrelas-contato button:hover ~ button { color: #d3d7d1; }
.avaliacao-contato { border: 0; margin: 4px 0 0; padding: 0; }
.avaliacao-contato legend { padding: 0; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.estrelas-escolha { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 2px; }
.estrelas-escolha input { position: absolute; opacity: 0; width: 0; height: 0; }
.estrelas-escolha label { font-size: 26px; line-height: 1; color: #d3d7d1; cursor: pointer; }
.estrelas-escolha label.sem-nota { font-size: 12px; color: var(--texto-suave); margin-right: 12px; }
.estrelas-escolha input:checked ~ label:not(.sem-nota), .estrelas-escolha label:not(.sem-nota):hover, .estrelas-escolha label:not(.sem-nota):hover ~ label:not(.sem-nota) { color: #d9a21b; }
.estrelas-escolha input#nota-contato-0:checked + label { color: var(--verde-escuro); font-weight: 700; }

/* Chamada para exportar dados, abaixo de "Prazo até a revenda" (Revendas rápidas) */
.chamada-exportar { align-self: start; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--raio); background: var(--verde-escuro); color: #fff; text-decoration: none; box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; }
.chamada-exportar:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26, 48, 41, .28); }
.chamada-exportar .chamada-icone { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #e8c777; }
.chamada-exportar .chamada-icone .icone { width: 19px; height: 19px; }
.chamada-exportar strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 20px; line-height: 1.2; }
.chamada-exportar .chamada-texto { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.chamada-exportar .chamada-botao { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 9px 16px; border-radius: 10px; background: #e8c777; color: var(--verde-escuro); font-size: 13.5px; font-weight: 700; }
.chamada-exportar .chamada-botao .icone { width: 15px; height: 15px; }

/* Pizza interativa: dica com a porcentagem ao passar o mouse */
.rosca-interativa { position: relative; }
.rosca-interativa .fatia-interativa { cursor: pointer; transition: stroke-width .12s, opacity .12s; outline: none; }
.rosca-interativa .fatia-interativa.realce { stroke-width: 26; }
.rosca-interativa:has(.fatia-interativa.realce) .fatia-interativa:not(.realce) { opacity: .55; }
.rosca-dica { position: absolute; z-index: 5; transform: translate(-50%, -100%); padding: 5px 10px; border-radius: 8px; background: var(--verde-escuro); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(26, 48, 41, .3); }
.rosca-dica[hidden] { display: none; }
.rosca-interativa .total-rosca { pointer-events: none; }  /* o número do centro não pode tapar as fatias */

/* Valor de venda x arremate interativo: linha guia, pontos em destaque e dica com os valores do mês */
.grafico-interativo { cursor: crosshair; }
.grafico-interativo .guia-grafico { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #9db3a6; transform: translateX(-.5px); pointer-events: none; z-index: 1; }
.grafico-interativo .ponto-grafico { z-index: 2; transition: width .1s, height .1s, opacity .1s; }
.grafico-interativo .ponto-grafico.realce { width: 12px; height: 12px; border-width: 2.5px; }
.grafico-interativo .ponto-grafico.apagado { opacity: .35; }
.dica-grafico { position: absolute; z-index: 4; transform: translate(12px, -110%); display: flex; flex-direction: column; gap: 2px; padding: 7px 11px; border-radius: 8px; background: var(--verde-escuro); color: #fff; font-size: 11.5px; line-height: 1.35; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(26, 48, 41, .3); }
.dica-grafico.a-esquerda { transform: translate(calc(-100% - 12px), -110%); }
.dica-grafico[hidden], .guia-grafico[hidden] { display: none; }
.dica-grafico .dica-arremate { color: #a9d6bf; }

/* ---------- página de planos (desenho do dono, 2026-09-21; só visual) ---------- */
.pagina-planos { display: flex; flex-direction: column; gap: 26px; }
.cabecalho-planos { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cabecalho-planos h1 { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 30px; color: var(--verde-escuro); margin: 0; }
.alternador-planos { display: inline-flex; gap: 4px; margin-top: 10px; padding: 5px; border-radius: 999px; background: var(--superficie); box-shadow: var(--sombra); }
.alternador-planos button { border: 0; border-radius: 999px; padding: 10px 24px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--texto-suave); cursor: pointer; }
.alternador-planos button.ativo { background: var(--verde); color: #fff; }
.cartoes-planos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: center; max-width: 1360px; width: 100%; margin: 0 auto; padding-top: 16px; }
.cartao-plano { position: relative; display: flex; flex-direction: column; align-self: stretch; padding: 32px 24px 28px; border-radius: 28px; background: var(--superficie); }
.cartao-plano.cartao-destaque { align-self: center; padding-top: 40px; padding-bottom: 36px; box-shadow: 0 16px 40px rgba(26, 48, 41, .16); }
.selo-mais-escolhido { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 7px 18px; border-radius: 999px; background: var(--dourado); color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cartao-plano h2 { margin: 0; font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 23px; font-weight: 600; color: var(--verde-escuro); }
.preco-plano { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 0; }
.preco-plano strong { font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 40px; line-height: 1; color: var(--verde-escuro); }
.preco-plano span { font-size: 14px; color: var(--texto-suave); }
.cobranca-anual { margin: 6px 0 0; min-height: 18px; font-size: 12px; line-height: 18px; color: var(--texto-suave); }  /* sempre ocupa a linha: mensal e anual ficam com a mesma altura */
.descricao-plano { min-height: 66px; margin: 24px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--texto-suave); }
.itens-plano { flex: 1; list-style: none; margin: 26px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.itens-plano li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.4; color: var(--texto); }
.itens-plano li .icone { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--positivo); }
.itens-plano li.item-destaque span { font-weight: 700; }
.itens-plano li.sem { color: #9aa29d; }
.itens-plano li.sem .icone { color: #c3c8c4; }
.itens-plano li.sem span { text-decoration: line-through; text-decoration-color: #c9cec9; }
.botao-plano { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px 20px; border: 0; border-radius: 14px; background: #f4f2ed; color: var(--verde-escuro); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .15s, transform .15s; }
.botao-plano:hover { filter: brightness(.96); }
.botao-plano-principal { background: var(--verde); color: #fff; box-shadow: 0 6px 16px rgba(35, 65, 58, .3); }
.botao-plano-atual { background: transparent; border: 1.5px dashed var(--borda); color: var(--texto-suave); cursor: default; }
.botao-plano-atual:hover { filter: none; }
.cartao-atual { outline: 2px solid #cfe0d3; }
.aviso-em-breve { align-self: center; max-width: 620px; margin: 0; padding: 12px 18px; border-radius: 12px; background: #fbf6ea; border: 1px solid #ecdfbf; font-size: 13.5px; text-align: center; color: #6b5420; }
.aviso-em-breve[hidden] { display: none; }
.cobranca-anual[hidden] { display: block; visibility: hidden; }
@media (max-width: 1240px) {
  .cartoes-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  .cartao-plano.cartao-destaque { align-self: stretch; }
}
@media (max-width: 980px) {
  .cartoes-planos { grid-template-columns: 1fr; max-width: 440px; }
  .cartao-plano.cartao-destaque { order: -1; }
}

/* Minha marca (página Minha conta): sempre visível; trancada fora do plano Empresas */
.painel-marca { position: relative; display: flex; flex-direction: column; gap: 14px; }
.painel-marca .titulo-marca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.painel-marca h2 { margin: 0; }
.selo-plano { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--verde-escuro); color: #e8c777; font-size: 11.5px; font-weight: 700; }
.selo-plano .icone { width: 13px; height: 13px; }
.campos-marca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; opacity: .55; pointer-events: none; user-select: none; }
.campos-marca .campo-falso { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.campos-marca .campo-falso span { display: block; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 10px; background: #faf9f6; font-weight: 400; color: #a8aea9; }
.campos-marca .campo-largo { grid-column: 1 / -1; }
.lista-marca { margin: 0; padding-left: 18px; color: var(--texto-suave); font-size: 13.5px; line-height: 1.6; }

/* Tabela "Compare os planos" (página de planos) */
.comparativo-planos { max-width: 1360px; width: 100%; margin: 12px auto 0; }
.comparativo-planos h2 { margin: 0 0 14px; font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 24px; text-align: center; color: var(--verde-escuro); }
.comparativo-rolagem { overflow-x: auto; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra); }
.comparativo-planos table { width: 100%; min-width: 780px; border-collapse: collapse; }
.comparativo-planos thead th { padding: 16px 12px; background: var(--verde-escuro); font-size: 13.5px; font-weight: 700; color: #fff; text-align: center; }
.comparativo-planos thead th:first-child { text-align: left; padding-left: 26px; width: 34%; }
.comparativo-planos .secao-comparativo th { padding: 12px 26px; background: #f4f2ed; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dourado); text-align: left; }
.comparativo-planos tbody tr:not(.secao-comparativo) th, .comparativo-planos tbody td { padding: 14px 12px; border-top: 1px solid #f0eee8; font-size: 13.5px; }
.comparativo-planos tbody tr:not(.secao-comparativo) th { padding-left: 26px; text-align: left; font-weight: 500; color: var(--texto); }
.comparativo-planos tbody th small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--texto-suave); }
.comparativo-planos td { text-align: center; }
.comparativo-planos td strong { font-size: 13px; color: var(--verde-escuro); }
.comparativo-planos td .sim .icone { width: 17px; height: 17px; color: var(--positivo); }
.comparativo-planos td .nao { color: #b9bfba; }
.comparativo-planos .col-destaque { background: #fbf6ea; }
.comparativo-planos thead th.col-destaque { background: var(--dourado); color: #fff; }

/* Minha marca: formulário e prévia da capa (plano Empresas) */
.form-marca { display: flex; flex-direction: column; gap: 14px; }
.campos-marca-real { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.campo-marca { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--texto); }
.campo-marca input:not([type=color]):not([type=checkbox]):not([type=file]) { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; font: inherit; font-weight: 400; background: #fff; }
.campo-marca input[type=file] { font-weight: 400; font-size: 13px; }
.campo-marca small { font-size: 11.5px; font-weight: 400; color: var(--texto-suave); }
.campo-marca .erro-marca, .campo-marca.com-erro small { color: var(--negativo); }
.campo-marca.com-erro input:not([type=color]) { border-color: var(--negativo); }
.campo-cor { display: flex; gap: 8px; align-items: center; }
.campo-cor input[type=color] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; cursor: pointer; }
.campo-cor input:not([type=color]) { flex: 1; text-transform: uppercase; }
.logo-atual { display: flex; align-items: center; gap: 12px; font-weight: 400; }
.logo-atual img { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--borda); border-radius: 8px; background: #fff; padding: 3px; }
.check-remover { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12.5px; }
.previa-capa-titulo { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.previa-capa { width: 300px; max-width: 100%; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--sombra); }
.previa-faixa { position: relative; padding: 18px 18px 22px; background: var(--p); color: #fff; }
.previa-marca { display: flex; align-items: center; gap: 8px; font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 14px; font-weight: 600; }
.previa-marca img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px; }
.previa-contatos { min-height: 12px; margin-top: 4px; font-size: 9.5px; opacity: .85; }
.previa-rotulo { margin-top: 26px; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--d) 55%, white); }
.previa-titulo { margin-top: 6px; font-family: "Bitter", "Segoe UI", system-ui, serif; font-size: 17px; line-height: 1.25; }
.previa-linha { position: absolute; left: 18px; bottom: 0; width: 44px; height: 4px; background: var(--d); }
.previa-corpo { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font-size: 12px; color: var(--texto-suave); }
.previa-corpo b { color: var(--p); }
.declaracao-logo { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--texto-suave); }
.acoes-marca { display: flex; gap: 10px; flex-wrap: wrap; }
.aviso-marca-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 10px; background: #e6f2e9; color: #1f6b3a; font-size: 13px; font-weight: 600; }
.aviso-marca-ok .icone { width: 16px; height: 16px; }
@media (max-width: 760px) { .campos-marca-real { grid-template-columns: 1fr; } }
.declaracao-logo input, .check-remover input { width: auto; flex: none; margin: 2px 0 0; }
.declaracao-logo { align-items: center; }
.logo-atual { flex-wrap: wrap; }

/* ---------- Visitas (seção 7.19) ---------- */
.pagina-visitas .painel { display: flex; flex-direction: column; gap: 14px; }
.topo-lista-visitas { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.topo-lista-visitas h2 { margin: 0; }
.form-visita-nova { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: #faf9f6; border: 1px solid var(--borda); }
.form-visita-nova[hidden] { display: none; }
.form-visita-nova .campos-marca-real { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-visita-nova .campo-largo { grid-column: 1 / -1; }
.campo-marca select, .campo-marca textarea { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; font: inherit; font-weight: 400; background: #fff; }
.acoes-visita { display: flex; gap: 10px; flex-wrap: wrap; }
.lista-visitas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cartao-visita { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .15s; }
.cartao-visita:hover { box-shadow: var(--sombra); }
.cartao-visita-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cartao-visita-numeros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.cartao-visita-numeros .icone { width: 14px; height: 14px; vertical-align: -2px; }
.barra-visita { display: inline-block; width: 90px; height: 7px; border-radius: 999px; background: #ece9e1; overflow: hidden; }
.barra-visita > span { display: block; height: 100%; background: var(--verde); border-radius: 999px; transition: width .25s; }
.barra-visita-grande { display: block; width: 100%; height: 9px; }
.selo-status { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.selo-status.s-problema { background: #f8e3df; color: #9c2f1f; }
.selo-status.s-atencao { background: #fbf0d6; color: #7a5a10; }
.vazio-visitas { margin: 4px 0 0; }
.categoria-visita { margin: 10px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dourado); }
.itens-visita { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item-visita { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 40px 12px 14px; border: 1px solid var(--borda); border-left: 4px solid #d9d6cd; border-radius: 12px; background: #fff; }
.item-visita.s-ok { border-left-color: var(--positivo); }
.item-visita.s-atencao { border-left-color: #d9a21b; }
.item-visita.s-problema { border-left-color: var(--negativo); }
.item-visita.erro-salvar { outline: 2px solid var(--negativo); }
.item-visita-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.item-visita-texto { font-size: 14px; font-weight: 500; }
.botoes-status { display: inline-flex; gap: 6px; }
.botao-status { padding: 7px 14px; border: 1.5px solid var(--borda); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--texto-suave); cursor: pointer; }
.botao-status.b-ok.ativo { background: var(--positivo); border-color: var(--positivo); color: #fff; }
.botao-status.b-atencao.ativo { background: #d9a21b; border-color: #d9a21b; color: #fff; }
.botao-status.b-problema.ativo { background: var(--negativo); border-color: var(--negativo); color: #fff; }
.obs-item { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: 13px; background: #faf9f6; }
.tirar-item { position: absolute; top: 8px; right: 8px; margin: 0; }
.tirar-item button, .botao-mini { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-suave); cursor: pointer; }
.tirar-item button:hover, .botao-mini:hover { background: #f4f2ed; color: var(--negativo); }
.tirar-item .icone, .botao-mini .icone { width: 15px; height: 15px; }
.novo-item-visita { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.novo-item-visita input { flex: 1 1 200px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; font: inherit; }
.novo-item-visita input[name=categoria] { flex: 0 1 200px; }
.fotos-visita { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fotos-visita figure { position: relative; margin: 0; }
.fotos-visita img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.fotos-visita figure form { position: absolute; top: 6px; right: 6px; margin: 0; }
.fotos-visita .botao-mini { background: rgba(255, 255, 255, .92); }
.form-fotos-visita { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.itens-modelo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.itens-modelo li { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.itens-modelo form { margin: 0; display: flex; gap: 4px; align-items: center; }
.itens-modelo .modelo-editar { flex: 1; }
.itens-modelo input { flex: 1; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: 13.5px; }
@media (max-width: 640px) { .form-visita-nova .campos-marca-real { grid-template-columns: 1fr; } .barra-visita { width: 60px; } }
.pagina-visitas .botao, .painel-conta-checklist .botao { width: auto; align-self: flex-start; }
#checklist-visitas .botao { width: auto; align-self: flex-start; }

/* ---------- Seletor de cidade e Avise-me (seção 7.20) ---------- */
.seletor-cidade { position: relative; margin: 6px 0 10px; }
.seletor-cidade-botao { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--verde-escuro); cursor: pointer; }
.seletor-cidade-botao > span { flex: 1; text-align: left; }
.seletor-cidade-botao .icone { width: 16px; height: 16px; }
.seletor-cidade-lista { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; min-width: 230px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--borda); box-shadow: 0 12px 30px rgba(26, 48, 41, .18); display: flex; flex-direction: column; gap: 4px; }
.seletor-cidade-lista[hidden] { display: none; }
.cidade-opcao { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; }
.cidade-opcao.ativa { background: #eef4ef; font-weight: 600; color: var(--verde-escuro); }
.cidade-opcao.ativa .icone { width: 15px; height: 15px; color: var(--positivo); }
.cidade-opcao.em-breve { color: #a3a9a4; cursor: not-allowed; }
.cidade-opcao.em-breve span { flex: 1; }
.cidade-opcao.em-breve em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #eeeeea; color: #8b918c; }
.cidade-opcao.em-breve::after { content: attr(data-dica); position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); padding: 4px 10px; border-radius: 7px; background: var(--verde-escuro); color: #fff; font-size: 11.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.cidade-opcao.em-breve:hover::after { opacity: 1; }
.avise-me { display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 8px; }
.avise-me-botao { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 7px 14px; border: 1.5px solid var(--dourado); border-radius: 999px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--dourado); cursor: pointer; }
.avise-me-botao .icone { width: 14px; height: 14px; }
.avise-me-form { display: flex; flex-direction: column; gap: 8px; }
.avise-me-form[hidden] { display: none; }
.avise-me-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.avise-me-form input { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: 13px; }
.avise-me-form .botao { width: 100%; padding: 9px 12px; font-size: 12.5px; }
.avise-me-ok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--positivo); }
.avise-me-ok .icone { width: 14px; height: 14px; }
.avise-me-link { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--texto-suave); text-decoration: underline; cursor: pointer; }
.avise-me-msg { margin: 0; font-size: 12px; color: var(--positivo); }
.avise-me-msg.erro { color: var(--negativo); }
.avise-me-msg:empty { display: none; }
.menu-recolhido .seletor-cidade { display: none; }
.avise-me-botao[hidden], .avise-me-link[hidden] { display: none; }
/* Início: coluna principal com Novas oportunidades e Seus projetos (2026-09-21) */
.coluna-principal-inicio { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.painel-projetos .titulo-painel { margin-bottom: 14px; }
.painel-projetos .projetos-em-breve { border-radius: 14px; }
/* Visão geral: Anúncios com queda de preço na largura das duas primeiras colunas e a chamada na terceira,
   alinhada com Evolução de preços (2026-09-21) */
.grade-analises > .painel-quedas { grid-column: span 2; }
.grade-analises > .chamada-exportar { grid-column: 3; align-self: start; }
/* Leilões: ranking e chamada empilhados na coluna da direita, ao lado do mapa */
.coluna-leiloes-direita { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 1100px) {
  .grade-analises > .painel-quedas, .grade-analises > .chamada-exportar { grid-column: auto; }
}
/* Favoritos: filtros à esquerda e a janela de comparar à direita, na largura do Resumo (2026-09-21) */
.topo-favoritos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: stretch; margin-bottom: 16px; }
.topo-favoritos .filtros-pilulas { margin-bottom: 0; }
.janela-comparar { display: flex; flex-direction: column; }
.janela-comparar .barra-comparar { position: static; flex: 1; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; margin: 0; padding: 18px; }
.janela-comparar .comparar-titulo { display: flex; align-items: center; gap: 8px; color: var(--verde-escuro); }
.janela-comparar .comparar-titulo .icone { width: 18px; height: 18px; }
.janela-comparar .barra-comparar .botao, .janela-comparar .barra-comparar button { width: 100%; text-align: center; justify-content: center; }
@media (max-width: 1100px) { .topo-favoritos { grid-template-columns: 1fr; } }
/* Minha conta: Meu checklist (resumo) e popup de edição (2026-09-21) */
.titulo-checklist { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.titulo-checklist h2 { margin: 0; }
.chips-checklist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-checklist li { padding: 5px 12px; border-radius: 999px; background: #eef4ef; font-size: 12.5px; font-weight: 600; color: var(--verde-escuro); }
.chips-checklist li span { margin-left: 4px; color: var(--texto-suave); font-weight: 500; }
.dialogo-checklist { max-height: 86vh; overflow-y: auto; }
.dialogo-checklist > * + * { margin-top: 10px; }
/* Popup do checklist: categorias em dropdown, lápis e lixeira ao lado de cada nome (2026-09-21) */
.dialogo-checklist .cat-drop { border: 1px solid var(--borda); border-radius: 12px; background: #fff; }
.dialogo-checklist .cat-drop + .cat-drop { margin-top: 8px; }
.dialogo-checklist .cat-drop > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.dialogo-checklist .cat-drop > summary::-webkit-details-marker { display: none; }
.dialogo-checklist .cat-drop > summary::after { content: ""; order: 3; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave); transform: rotate(45deg); transition: transform .15s; }
.dialogo-checklist .cat-drop[open] > summary::after { transform: rotate(-135deg); }
.dialogo-checklist .cat-nome { flex: 1; font-weight: 700; font-size: 13.5px; color: var(--verde-escuro); }
.dialogo-checklist .cat-nome em { margin-left: 4px; font-style: normal; font-weight: 500; color: var(--texto-suave); }
.dialogo-checklist .cat-botoes, .dialogo-checklist .item-botoes { display: inline-flex; align-items: center; gap: 2px; }
.dialogo-checklist .cat-botoes form, .dialogo-checklist .item-botoes form { margin: 0; }
.dialogo-checklist .cat-corpo { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; border-top: 1px solid var(--borda); }
.dialogo-checklist .itens-modelo li { justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f0eee8; }
.dialogo-checklist .item-texto { flex: 1; }
.dialogo-checklist .linha-editar { display: flex; align-items: center; gap: 6px; flex: 1; margin: 0; }
.dialogo-checklist .linha-editar[hidden], .dialogo-checklist [hidden] { display: none; }
.dialogo-checklist .linha-editar input { flex: 1; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: 13px; }
.dialogo-checklist .nova-categoria { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.dialogo-checklist .nova-categoria strong { flex: 1 1 100%; font-size: 12.5px; }
.dialogo-checklist .nova-categoria input { flex: 1 1 160px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: 13px; }
.dialogo-checklist .dialogo-acoes { align-items: center; }
.dialogo-checklist .dialogo-acoes form { margin: 0; margin-right: auto; }
/* Minha conta: Google Agenda (2026-09-22) */
.painel-agenda { display: flex; flex-direction: column; gap: 12px; }
.painel-agenda .botao { width: auto; align-self: flex-start; }
.opcoes-agenda { display: flex; flex-direction: column; gap: 10px; }
.opcoes-agenda label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.opcoes-agenda input[type=checkbox] { width: 17px; height: 17px; flex: none; }
.acoes-agenda { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes-agenda form { margin: 0; }
.aviso-agenda { margin: 0; padding: 10px 14px; border-radius: 10px; background: #eef4ef; color: var(--verde-escuro); font-size: 13.5px; }
.aviso-agenda.erro { background: #f8e3df; color: #9c2f1f; }
/* Ficha do imóvel: o "?" da Média da região abre por cima da foto, com largura fixa e alinhado à direita do quadro */
.painel-titulo-ficha .indicador:first-child .ajuda-canto .ajuda-texto { left: auto; right: -8px; width: 230px; }
.painel-titulo-ficha .indicador:first-child .ajuda-canto .ajuda-texto::after { left: auto; right: 10px; }
/* Dica ao passar o mouse num filtro em pílula (ex.: Desconto): abre acima, some quando a janelinha está aberta */
.filtro-pilula[data-dica] { position: relative; }
.filtro-pilula[data-dica]::after { content: attr(data-dica); position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; padding: 7px 11px; border-radius: 8px; background: var(--verde-escuro); color: #fff; font-size: 11.5px; font-weight: 400; line-height: 1.4; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; }
.filtro-pilula[data-dica]:hover::after { opacity: 1; visibility: visible; }
.filtro-pilula[data-dica]:focus-within::after { opacity: 0; visibility: hidden; }
/* Minha conta: Armazenamento (roadmap Fase 6, 2026-09-22) */
.barra-armazenamento { height: 9px; border-radius: 999px; background: #e9ede9; overflow: hidden; margin: 4px 0; }
.barra-armazenamento span { display: block; height: 100%; border-radius: inherit; background: var(--verde); }