:root {
    /* O site é claro: avisa o navegador. Sem isto, widgets nativos (a lista que abre
       no <select>, barras de rolagem, autofill) são desenhados com as cores do outro
       tema e destoam. */
    color-scheme: light;

    /* PAPEL — claro quente, nunca branco puro no fundo: branco puro ofusca no celular
       ao sol, e quem tem de ser a coisa mais clara da tela é a FOTO do imóvel. O card
       é branco para a foto assentar nele. */
    --bg-dark: #f7f5f2;              /* fundo da página (o nome é herança do tema escuro) */
    --bg-mid: #f0ece6;               /* faixa/elevação sobre o papel */
    --sidebar-bg: #f0ece6;
    --card-bg: #ffffff;
    --card-bg-hover: #fbfaf8;
    --card-border: #e4e0d9;
    --card-border-hover: #d6d1c8;

    /* ACENTOS — um para cada papel, e só. Ação é âmbar escuro (passa 4,6:1 com texto
       branco; o âmbar claro do tema anterior não passaria). Verde é SÓ ganho, vermelho
       é SÓ risco, e o dourado virou cor de aviso, não um segundo botão primário.
       Os nomes `--accent-blue`/`--accent-gold` ficam por serem lidos em ~5.500 linhas:
       o que mudou foi o valor, não o papel de cada um. */
    --accent-blue: #b4600a;          /* AÇÃO — fundo de botão, borda, ícone */
    --accent-blue-glow: rgba(180, 96, 10, 0.14);
    /* AÇÃO como TEXTO (link, valor em destaque). O âmbar do botão passa 4,6:1 sobre o
       card branco, mas cai para 3,7–4,1 sobre o papel e sobre os fundos tingidos -- e a
       auditoria da ficha em produção (20/10/2026) achou sete textos assim. Este passa
       6,2:1 no branco e 5,2:1 no papel elevado. */
    --acao-texto: #94500a;
    --accent-green: #0f7a4a;         /* GANHO */
    --accent-green-glow: rgba(15, 122, 74, 0.12);
    --accent-red: #c0372f;           /* RISCO */
    --accent-red-glow: rgba(192, 55, 47, 0.12);
    --accent-gold: #8a5a00;          /* AVISO */
    --accent-gold-glow: rgba(138, 90, 0, 0.14);
    --accent-purple: #b4600a;        /* era decoração; não existe mais cor decorativa */
    --pino-otimo: #1f7a5a;           /* rampa do mapa: quanto melhor o negócio, mais escuro */
    --pino-bom: #4fb286;
    --pino-sem-analise: #8a94a3;     /* falta de informação é cinza, não alarme */
    /* VÉU sobre FOTO. Tudo que fica em cima da foto (tipo, favoritar, fita do preço da
       praça) é escuro com texto branco nos DOIS temas: a foto é imprevisível -- céu claro
       num card, grama escura no outro -- e o fundo tem de vir junto com o texto. Medido no
       pior caso, sobre foto branca: branco sobre este véu dá 7,5:1. */
    --veu-foto: rgba(17, 19, 23, 0.72);
    --veu-foto-borda: rgba(255, 255, 255, 0.4);

    /* TINTA — contraste medido sobre o card branco, mínimo 4,5:1 para texto pequeno:
       main 16,9:1 · sub 10,4:1 · dim 6,2:1 · muted 5,8:1 — e muted 4,9:1 sobre o
       papel elevado, que é onde a auditoria da ficha o pegou abaixo do mínimo. */
    --text-main: #1a1d21;
    --text-sub: #3a4049;
    --text-dim: #5a6270;
    --text-muted: #5f6674;

    --header-height: 66px;
    --sidebar-width: 300px;
    --largura-pagina: 1440px;        /* coluna central da página, cabeçalho incluído */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--bg-dark);
    /* Sem as duas manchas radiais do tema escuro: no papel elas viram sujeira, e o
       fundo chapado deixa a foto do imóvel ser a única coisa colorida da tela. */
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3 {
    font-family: 'Outfit', sans-serif;
}

/* Header Styles */
header {
    height: var(--header-height);
    background: rgba(247, 245, 242, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
    box-shadow: 0 1px 0 rgba(26, 29, 33, 0.012), 0 4px 24px rgba(26, 29, 33, 0.12);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: var(--largura-pagina);
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo h1 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    background: linear-gradient(135deg, var(--text-main) 0%, var(--text-sub) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* A marca ao lado do nome, no lugar do 🏛️ (que é o selo de leiloeiro nos cards). Ela é imagem,
   fora do degradê do texto, e acompanha o tamanho da letra do h1, que encolhe no celular. */
.logo h1 { display: inline-flex; align-items: center; gap: 0.35em; }
.logo-marca { width: 1.25em; height: 1.25em; flex: none; border-radius: 0.28em; }

.logo h1 span {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Layout */
/* Conteúdo numa coluna centralizada, como nos portais (pedido do dono, 20/10/2026). Em
   tela larga a lista esticava de uma borda à outra e a linha de leitura passava de 1.500px;
   o cabeçalho usa a mesma largura, para o logo alinhar com os filtros. */
.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    width: 100%;
    max-width: var(--largura-pagina);
    margin: 0 auto;
}
@media (min-width: 1480px) {
    /* Com sobra dos dois lados, a barra de filtros ganha a borda da esquerda também: sem
       ela parece cortada, encostada no nada. */
    .sidebar { border-left: 1px solid var(--card-border); }
}

.sidebar {
    width: var(--sidebar-width);
    max-width: 85vw; /* Impede a barra lateral engolir o celular todo */
    background: var(--sidebar-bg);
    border-right: 1px solid var(--card-border);
    box-shadow: 4px 0 24px rgba(26, 29, 33, 0.075);
    padding: 22px 20px;
    overflow-y: auto;
    overscroll-behavior: contain; /* Impede que a rolagem do menu mova o fundo */
    position: relative;
}

.content {
    flex: 1;
    overflow-y: auto;
    padding: 0 40px 30px;
}

/* Filters */
.filter-group {
    margin-bottom: 25px;
}

.filter-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.7rem;
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.passo { border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 12px 4px; margin-bottom: 14px; }
.passo-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 0 0 10px; font-size: 0.86rem; font-weight: 700; color: var(--text-main); text-transform: none; letter-spacing: 0; }
.passo-titulo small { flex-basis: 100%; font-size: 0.68rem; font-weight: 400; line-height: 1.45; color: var(--text-dim); }
.passo .filter-group { margin-bottom: 14px; }
.mais-filtros { margin-bottom: 14px; } .mais-filtros summary { cursor: pointer; font-size: 0.74rem; font-weight: 700; color: var(--text-dim); padding: 8px 0; list-style: none; } .mais-filtros summary::-webkit-details-marker { display: none; } .mais-filtros[open] summary { margin-bottom: 8px; }
.mais-filtros summary::before { content: '▸'; margin-right: 6px; }
.mais-filtros[open] summary::before { content: '▾'; }

.multi-select {
    display: flex;
    flex-direction: column; /* Força um item por linha */
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    background: rgba(26, 29, 33, 0.02);
    border-radius: 10px;
    border: 1px solid var(--card-border);
}

.city-toggle {
    background: rgba(26, 29, 33, 0.04);
    border: 1px solid rgba(26, 29, 33, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Era --text-dim: 4,0:1 contra a sidebar, abaixo do mínimo de 4,5:1 para texto
       pequeno. --text-sub dá 12,7:1 e o nome da cidade volta a ser lido de relance. */
    color: var(--text-sub);
    /* Caixa alta em todos os filtros: a Caixa manda "CURITIBA" e os leiloeiros
       "Curitiba", e a mistura na mesma lista parecia erro. Só a exibição: a chave que
       vai para o servidor continua a mesma. */
    text-transform: uppercase;
}

.city-toggle:hover {
    background: rgba(180, 96, 10, 0.085);
    border-color: rgba(180, 96, 10, 0.36);
    color: var(--text-main);
}

.city-toggle.active {
    background: rgba(180, 96, 10, 0.128);
    border-color: var(--accent-blue);
    color: var(--acao-texto);
    font-weight: 700;
}
/* O ✓ diz que é marcação (várias ao mesmo tempo), não uma escolha única como um rádio. */
.city-toggle.active::before { content: '✓ '; }

/* Dica curta abaixo do rótulo de um filtro. */
.filtro-dica {
    display: block;
    margin: -6px 0 8px;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-dim);
}

/* Dica do primeiro acesso, no topo da gaveta. */
.filtros-dica {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(180, 96, 10, 0.102);
    border: 1px solid rgba(180, 96, 10, 0.42);
    color: var(--text-main);
    font-size: 0.78rem;
    line-height: 1.45;
}
.filtros-dica[hidden] { display: none; }
.filtros-dica-fechar {
    flex: none;
    min-height: 32px;
    margin: -6px -6px 0 0;
    padding: 0 8px;
    background: none;
    border: none;
    color: var(--acao-texto);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

/* Topo da gaveta: título e ✕. Só existe quando a lateral vira gaveta (até 1024px, abaixo).
   Preso no alto da rolagem da gaveta, para o ✕ estar à mão em qualquer ponto dos filtros. */
.gaveta-topo { display: none; }
.gaveta-fundo { display: none; }

/* ── "Onde?": um campo só para estado e cidade, sugestões, fichas, resumo e bairros ──
   As sugestões ficam no fluxo da gaveta, logo abaixo do campo: empurram as fichas para
   baixo em vez de cobrir o campo (spec do filtro novo, seções 4 e 13). */
.lugar-campo { position: relative; margin-bottom: 8px; }
.lugar-campo-icone {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    pointer-events: none;
}
.lugar-campo input.lugar-entrada { padding-left: 34px; }
.lugar-campo input.lugar-entrada::placeholder { color: var(--text-muted); }

.lugar-sugestoes {
    list-style: none;
    margin: -2px 0 10px;
    padding: 4px;
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-mid);
    border: 1px solid rgba(180, 96, 10, 0.42);
    border-radius: 10px;
}
.lugar-sugestoes[hidden] { display: none; }
.lugar-sugestao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 0.78rem;
    color: var(--text-sub);
    cursor: pointer;
}
.lugar-sugestao small { color: var(--text-dim); font-size: 0.7rem; }
.lugar-sugestao:hover,
.lugar-sugestao.ativa { background: rgba(180, 96, 10, 0.128); color: var(--text-main); }
/* Linha de escolha múltipla: ícone, nome com a segunda linha ("Cidade · PR · 536 imóveis") e a
   caixinha à direita. Tocar marca ou desmarca, e a lista fica aberta para marcar outros. */
.lugar-sugestao-icone { flex: none; width: 18px; text-align: center; font-size: 0.85rem; }
.lugar-sugestao-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lugar-sugestao-texto .lugar-sugestao-rotulo {
    font-weight: 600; color: var(--text-main);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lugar-sugestao-detalhe { font-size: 0.68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.lugar-sugestao-caixa {
    flex: none;
    width: 20px; height: 20px;
    border: 2px solid var(--text-dim);
    border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.lugar-sugestao.marcada .lugar-sugestao-caixa { background: var(--accent-blue); border-color: var(--accent-blue); }
.lugar-sugestao.marcada .lugar-sugestao-caixa::after { content: '✓'; color: #1a1d21; font-size: 0.75rem; font-weight: 800; line-height: 1; }
.lugar-sugestao-total { flex: none; font-size: 0.72rem; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* Lugar com zero imóvel com os outros filtros: aparece (dá para escolher), mas apagado. */
.lugar-sugestao--vazia .lugar-sugestao-rotulo,
.lugar-sugestao--vazia .lugar-sugestao-detalhe,
.lugar-sugestao--vazia .lugar-sugestao-total { opacity: 0.55; }
.lugar-sugestao-nada { padding: 8px 10px; font-size: 0.74rem; color: var(--text-dim); }
/* Título de grupo nas sugestões ("Cidades do Paraná", "Estados"): não é opção, não se escolhe. */
.lugar-sugestao-grupo {
    padding: 8px 10px 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.lugar-fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lugar-fichas:empty { display: none; }
/* Cidade em azul; estado inteiro em verde (`ficha-lugar--estado`), para ver de relance o que é estado todo. */
.ficha-lugar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--acao-texto);
    background: rgba(180, 96, 10, 0.102);
    border: 1px solid rgba(180, 96, 10, 0.54);
}
.ficha-lugar--estado {
    color: var(--accent-green);
    background: rgba(15, 122, 74, 0.102);
    border-color: rgba(15, 122, 74, 0.54);
}
.ficha-lugar-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-lugar-tirar {
    flex: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(26, 29, 33, 0.06);
    color: inherit;
    font-size: 0.7rem;
    cursor: pointer;
}
.ficha-lugar-tirar:hover { background: rgba(26, 29, 33, 0.06); }

.lugar-resumo { margin: 0 0 10px; font-size: 0.74rem; line-height: 1.45; color: var(--text-sub); }
.lugar-resumo[hidden] { display: none; }
.lugar-resumo-total { color: var(--text-main); white-space: nowrap; }

.lugar-bairros { margin-bottom: 12px; }
.lugar-bairros[hidden] { display: none; }
.lugar-bairros-titulo {
    margin: 4px 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.lugar-bairro {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    font-size: 0.76rem;
    color: var(--text-sub);
    cursor: pointer;
}
.lugar-bairro input[type="checkbox"] { flex: none; margin: 0; accent-color: var(--accent-blue); }
.lugar-bairro-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lugar-bairro-cidade { flex: none; font-size: 0.7rem; color: var(--text-dim); }
.lugar-bairro-total { flex: none; font-size: 0.72rem; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.lugar-bairro-total--zero { opacity: 0.55; }
.lugar-bairros-mais {
    margin-top: 4px;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--acao-texto);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}
.lugar-bairros-mais:hover { text-decoration: underline; }

/* ── Chaves da gaveta: "Só os que entraram hoje" (topo) e "Só os financiáveis" (fim do "Quanto?").
   O mesmo desenho nas duas: título, explicação curta e o interruptor à direita; o rótulo inteiro
   é a área de toque (spec do filtro novo, seções 2 e 6). */
.chave-filtro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: rgba(26, 29, 33, 0.02);
    cursor: pointer;
}
.passo .chave-filtro { margin-bottom: 10px; }
.chave-filtro:has(input:checked) { border-color: rgba(15, 122, 74, 0.22); background: rgba(15, 122, 74, 0.068); }
.chave-filtro-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chave-filtro-texto strong { font-size: 0.8rem; font-weight: 700; color: var(--text-main); }
.chave-filtro-texto small { font-size: 0.68rem; line-height: 1.4; color: var(--text-dim); }
.toggle-switch input:focus-visible + .slider { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* "Ver todos os tipos", "Ver os outros N leiloeiros". */
.gaveta-ver-mais {
    display: block;
    margin: 2px 0 8px;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--acao-texto);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}
.gaveta-ver-mais[hidden] { display: none; }
.gaveta-ver-mais:hover { text-decoration: underline; }

/* ── "Que tipo?": blocos com ícone, nome e contagem, três por linha (cabem nos 320px da gaveta).
   Contagem zero apagada; marcado em azul. */
.blocos-tipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.bloco-tipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1px solid rgba(26, 29, 33, 0.1);
    background: rgba(26, 29, 33, 0.03);
    color: var(--text-sub);
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.bloco-tipo:hover:not(:disabled) { border-color: rgba(180, 96, 10, 0.22); background: rgba(180, 96, 10, 0.068); }
.bloco-tipo[aria-pressed="true"] { border-color: var(--accent-blue); background: rgba(180, 96, 10, 0.128); color: var(--acao-texto); }
.bloco-tipo--vazio { opacity: 0.45; }
.bloco-tipo:disabled { cursor: default; }
.bloco-tipo-icone { font-size: 1.15rem; line-height: 1; }
/* A palavra nunca é cortada no meio ("Apartame / nto"): nome com palavra comprida ganha a letra
   um pouco menor (`--longo`, posto pelo script) e o que tem duas palavras quebra no espaço. */
.bloco-tipo-nome { font-size: 0.72rem; font-weight: 600; line-height: 1.2; overflow-wrap: normal; word-break: normal; }
.bloco-tipo-nome--longo { font-size: 0.64rem; letter-spacing: -0.01em; }
.bloco-tipo-total { min-height: 1em; font-size: 0.66rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.bloco-tipo:focus-visible,
.pilula:focus-visible,
.gaveta-ver-mais:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ── "Quanto?": gráfico dos lances e a régua de duas pegas por cima da mesma escala. As barras
   ocupam o mesmo trecho que o centro da pega percorre (meia pega de folga em cada ponta), e cada
   pega para numa borda entre duas barras. `--de` e `--ate` (0 a 1) vêm do script. */
#passo-quanto { --pega: 22px; --pega-borda: 0px; }
.grafico-preco {
    display: flex;
    align-items: flex-end;
    height: 56px;
    margin-top: 4px;
    padding: 0 calc(var(--pega) / 2);
}
.grafico-preco-barra {
    flex: 1 1 0;
    min-height: 2px;
    margin: 0 1px;
    border-radius: 2px 2px 0 0;
    background: var(--accent-blue);
    opacity: 0.85;
    transition: opacity 0.15s;
}
.grafico-preco-barra--fora { opacity: 0.2; }
.regua-preco { position: relative; height: var(--pega); }
.regua-preco::before,
.regua-faixa {
    content: '';
    position: absolute;
    top: 50%;
    height: 4px;
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
}
.regua-preco::before { left: calc(var(--pega) / 2); right: calc(var(--pega) / 2); background: rgba(26, 29, 33, 0.06); }
.regua-faixa {
    left: calc(var(--pega) / 2 + (100% - var(--pega)) * var(--de, 0));
    right: calc(var(--pega) / 2 + (100% - var(--pega)) * (1 - var(--ate, 1)));
    background: var(--accent-blue);
}
/* Duas réguas nativas sobrepostas: só a pega recebe o toque, o trilho deixa passar para a outra. */
.regua-pega {
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--pega);
    margin: 0;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.regua-pega::-webkit-slider-runnable-track { height: var(--pega); background: none; border: none; }
.regua-pega::-moz-range-track { height: var(--pega); background: none; border: none; }
/* A borda transparente (`--pega-borda`, no celular) aumenta a área de toque sem aumentar o desenho. */
.regua-pega::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    box-sizing: border-box;
    width: var(--pega);
    height: var(--pega);
    border: var(--pega-borda) solid transparent;
    border-radius: 50%;
    background: #ffffff;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 3px var(--accent-blue);
    cursor: grab;
}
.regua-pega::-moz-range-thumb {
    pointer-events: auto;
    box-sizing: border-box;
    width: var(--pega);
    height: var(--pega);
    border: var(--pega-borda) solid transparent;
    border-radius: 50%;
    background: #ffffff;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 3px var(--accent-blue);
    cursor: grab;
}
.regua-pega:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 3px var(--accent-blue), inset 0 0 0 7px rgba(180, 96, 10, 0.22); }
.regua-pega:focus-visible::-moz-range-thumb { box-shadow: inset 0 0 0 3px var(--accent-blue), inset 0 0 0 7px rgba(180, 96, 10, 0.22); }
.regua-pontas { display: flex; justify-content: space-between; margin: 0 0 10px; }
.regua-ponta { font-size: 0.66rem; color: var(--text-dim); }

/* Mínimo e Máximo (preço), Mínima e Máxima (tamanho), lado a lado. */
.faixa-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.faixa-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.faixa-campo-rotulo { font-size: 0.68rem; font-weight: 700; color: var(--text-dim); }
.faixa-campo input { min-width: 0; }
.frase-preco { margin: 0 0 10px; font-size: 0.74rem; line-height: 1.45; color: var(--text-sub); }
.frase-preco[hidden] { display: none; }

/* ── Pílulas: atalhos de tamanho e "Desconto sobre a avaliação". Marcada em azul. */
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pilula {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(26, 29, 33, 0.14);
    background: rgba(26, 29, 33, 0.04);
    color: var(--text-sub);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}
.pilula:hover { border-color: rgba(180, 96, 10, 0.22); }
.pilula[aria-pressed="true"] { border-color: var(--accent-blue); background: rgba(180, 96, 10, 0.128); color: var(--acao-texto); }

/* ── "Quem vende": a Caixa, o subtítulo "Leiloeiros" e uma linha por leiloeiro, como os bairros. */
.lista-vendedores { margin-bottom: 8px; }
.vendedores-titulo {
    margin: 8px 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.vendedor {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    font-size: 0.76rem;
    color: var(--text-sub);
    cursor: pointer;
}
.vendedor input[type="checkbox"] { flex: none; margin: 0; accent-color: var(--accent-blue); }
.vendedor-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vendedor-total { flex: none; font-size: 0.72rem; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.vendedor--vazio { opacity: 0.5; cursor: default; }

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.slider {
    position: absolute;
    inset: 0;
    background: rgba(26, 29, 33, 0.06);
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid rgba(26, 29, 33, 0.14);
}

.slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-switch input:checked + .slider {
    background: var(--accent-green);
    border-color: var(--accent-green);
}

.toggle-switch input:checked + .slider::before {
    transform: translateX(20px);
}

/* Active Filters UI */
.active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 36px;
    padding: 4px 0;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(180, 96, 10, 0.068);
    border: 1px solid rgba(180, 96, 10, 0.24);
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 0.72rem;
    color: var(--text-sub);
    transition: all 0.2s;
}

.filter-chip:hover {
    background: rgba(26, 29, 33, 0.06);
    border-color: var(--text-dim);
}

.filter-chip .remove-filter {
    cursor: pointer;
    background: rgba(26, 29, 33, 0.06);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    transition: all 0.2s;
}

.filter-chip .remove-filter:hover {
    background: var(--accent-red);
    color: white;
}

/* Sortable Headers */
th.sortable {
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    position: relative;
}

th.sortable:hover {
    background: rgba(26, 29, 33, 0.05) !important;
    color: var(--text-main) !important;
}

th.sortable.active-sort {
    color: var(--acao-texto) !important;
    border-bottom: 2px solid var(--accent-blue) !important;
}

/* Barra de Ações da Tabela */
.table-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
}
/* `hidden` sozinho não esconde: o `display: flex` acima ganha do [hidden] do navegador. */
.table-actions-bar[hidden] { display: none; }

/* O lugar das abas no cabeçalho. Vazio (celular), sai do fluxo: num `space-between` um
   filho de largura zero ainda abriria um vão a mais e empurraria a busca. */
.abas-no-cabecalho:empty { display: none; }
.abas-no-cabecalho .view-toggle-group { margin: 0; }

/* Filtros ativos + abas fixos no topo do conteúdo (todas as telas), para
   continuarem visíveis ao rolar — inclusive nas vistas de Mapa e Calendário
   no desktop, onde o conteúdo é alto e a barra saía da tela. */
/* O topo da lista rola com a página (não fica preso): o cabeçalho do site já fica, e o bloco
   preso ocupava um terço da tela. `relative` + `z-index` deixam o menu Ordenar por cima dos cards. */
.content-topbar {
    position: relative;
    z-index: 1100;
    background: var(--bg-dark);
    padding: 22px 5px 12px;
    margin-bottom: 4px;
}
.content-topbar .table-actions-bar {
    margin-bottom: 0;
}
/* Colapsa a barra de filtros quando não há nenhum filtro ativo */
.active-filters-bar:empty {
    display: none;
}

/* GEM Badge */
.gem-badge {
    background: linear-gradient(135deg, #8a5a00, #8a5a00);
    color: #ffffff;
    font-weight: 900;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 5px;
    box-shadow: 0 2px 8px rgba(138, 90, 0, 0.12);
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.spread-val {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-green);
    display: block;
}

.auction-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    align-self: flex-start;
}
.badge-urg-red    { background: rgba(192, 55, 47, 0.102);  color: var(--accent-red);   border: 1px solid rgba(192, 55, 47, 0.48);  animation: pulse-red 2s infinite; }
.badge-urg-yellow { background: rgba(138, 90, 0, 0.102); color: var(--accent-gold);  border: 1px solid rgba(138, 90, 0, 0.48); }
.badge-urg-green  { background: rgba(15, 122, 74, 0.102); color: var(--accent-green); border: 1px solid rgba(15, 122, 74, 0.48); }
.badge-urg-blue   { background: rgba(180, 96, 10, 0.085); color: var(--acao-texto);  border: 1px solid rgba(180, 96, 10, 0.36); }
.badge-urg-dim    { background: rgba(107, 115, 130, 0.085); color: var(--text-dim);   border: 1px solid rgba(107, 115, 130, 0.3); }
.badge-encerrado  { background: rgba(107, 115, 130, 0.153); color: var(--text-dim);   border: 1px dashed rgba(107, 115, 130, 0.55); }

/* Badge de fonte do imóvel (Caixa vs. leiloeiro parceiro, ex.: Zuk) */
.badge-fonte {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    align-self: flex-start;
}
/* De quem é o imóvel NÃO é ação: vestir a cor do botão primário fazia o selo competir
   com ele dentro do mesmo card. Neutro -- quem diz a fonte é o nome escrito ali. */
.badge-caixa { background: var(--card-bg-hover); color: var(--text-sub); border: 1px solid var(--card-border); }
/* Leiloeiro: a matiz vem do script (--fonte-h), uma por leiloeiro. */
/* Tinha uma matiz por leiloeiro (roxo, laranja, verde, rosa...). Saíram: eram oito cores
   que não significavam nada, no mesmo card que usa cor para dizer risco, urgência e
   desconto. Quem diz de quem é o lote é o NOME escrito aqui dentro. */
.badge-leiloeiro {
    background: var(--card-bg-hover);
    color: var(--text-sub);
    border: 1px solid var(--card-border);
}
/* Sobra da época em que a Zuk era a única fonte além da Caixa: hoje ela cai na regra
   geral do `.badge-leiloeiro`. Fica só para o HTML antigo que ainda peça a classe, e
   com o mesmo neutro da Caixa. */
.badge-zuk   { background: var(--card-bg-hover); color: var(--text-sub); border: 1px solid var(--card-border); }

.link-leiloeiro,
.link-caixa {
    text-decoration: none;
}

.price-drop-badge {
    background: rgba(192, 55, 47, 0.085);
    color: var(--accent-red);
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid rgba(192, 55, 47, 0.36);
    display: inline-block;
    margin-bottom: 2px;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { border-color: rgba(192, 55, 47, 0.36); }
    50% { border-color: rgba(192, 55, 47, 0.55); }
    100% { border-color: rgba(192, 55, 47, 0.36); }
}

/* Update Button */
.btn-reanalyze {
    background: transparent;
    border: none;
    color: var(--accent-gold);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.2s;
    opacity: 0.6;
}

.btn-reanalyze:hover {
    opacity: 1;
    background: rgba(26, 29, 33, 0.05);
}

.btn-mini {
    padding: 0;
    font-size: 1.1rem;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    min-width: unset;
    justify-content: center;
    gap: 0;
}

/* "Limpar Tudo", no fim das fichas dos filtros ativos. Era estilo em linha no script.js, com
   0,65rem (10,4px): abaixo do piso de 11px do rótulo. */
.btn-mini.limpar-filtros {
    width: auto;
    height: auto;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
}

/* Table View Styling (Ultra High Density) */
.table-container {
    background: transparent;
    border: 0;
    border-radius: var(--radius-lg);
    overflow-x: visible;
    box-shadow:
        0 20px 60px rgba(26, 29, 33, 0.12),
        0 0 0 1px rgba(26, 29, 33, 0.009) inset;
    margin-top: 15px;
    backdrop-filter: blur(4px);
}

.property-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-main);
    font-size: 0.7rem; /* Redução Global */
}

.property-table th, .property-table td {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
    vertical-align: middle;
    transition: background 0.15s ease;
}

/* Coluna de Endereço (Quebra de Linha) */
.property-table td:nth-child(2) {
    max-width: 130px;
    white-space: normal; /* Permite múltiplas linhas */
    line-height: 1.2;
    word-break: break-word;
}

/* Colunas de Preço e Dados */
.table-price, .table-id {
    font-size: 0.7rem;
    white-space: nowrap;
}

.table-id-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.prop-thumbnail {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(26, 29, 33, 0.1);
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.table-id-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
    min-height: 96px;
    padding-top: 2px;
}

.table-id-row {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: space-between;
    width: 100%;
}

/* Coluna de Ações (Fixa e Centralizada) */
.property-table td:last-child {
    width: 130px;
    min-width: 130px;
    text-align: center;
}

.property-table th {
    background: rgba(26, 29, 33, 0.22);
    text-align: center;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.58rem;
    font-weight: 800;
    position: sticky;
    top: 0;
    z-index: 1;
    backdrop-filter: blur(8px);
}

/* Zebra striping sutil */
.property-table tbody tr:nth-child(even):not(.row-hot):not(.row-removed) {
    background: rgba(26, 29, 33, 0.015);
}

/* Hover na linha */
.property-table tbody tr:hover:not(.row-hot):not(.row-removed) {
    background: rgba(180, 96, 10, 0.051) !important;
}

/* Alinhamento Específico por Coluna */
.property-table td:nth-child(1), /* ID */
.property-table td:nth-child(3), /* Área */
.property-table td:nth-child(4), /* Lance */
.property-table td:nth-child(5), /* Avaliação */
.property-table td:nth-child(6), /* R$/m2 */
.property-table td:nth-child(7), /* Desconto */
.property-table td:nth-child(8)  /* Financiável */
{
    text-align: center;
}

.property-table td:nth-child(2) { /* Endereço mantém à esquerda */
    text-align: left;
    max-width: 150px;
}

.market-analysis-compact {
    position: relative;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centralização Horizontal */
    text-align: center;    /* Centralização de Texto */
}

.market-analysis-compact .btn-reanalyze {
    background: rgba(180, 96, 10, 0.085);
    border: 1px solid rgba(180, 96, 10, 0.48);
    color: var(--acao-texto);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
}

.market-analysis-compact .btn-reanalyze:hover {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(180, 96, 10, 0.12);
    transform: translateY(-2px);
}

.market-analysis-compact .btn-reanalyze:active {
    transform: translateY(0);
}

.btn-analyze {
    background: transparent;
    border: 1px solid var(--accent-blue);
    color: var(--acao-texto);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.btn-analyze:hover {
    background: var(--accent-blue);
    color: white;
}

.btn-analyze.loading {
    opacity: 0.6;
    cursor: wait;
    border-style: dashed;
}

/* UI Components */
.btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    border: none;
    font-size: 0.85rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-blue), #b4600a);
    color: white;
    box-shadow: 0 4px 15px var(--accent-blue-glow);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-blue-glow);
    filter: brightness(1.1);
}

.btn-refresh {
    background: rgba(26, 29, 33, 0.04);
    color: var(--text-sub);
    border: 1px solid rgba(26, 29, 33, 0.1);
    backdrop-filter: blur(4px);
}

.btn-refresh:hover {
    background: rgba(26, 29, 33, 0.06);
    border-color: rgba(26, 29, 33, 0.14);
    color: var(--text-main);
}

/* ── Botões de ação (card, ficha): um sistema só ──
   Eram quatro classes misturadas (btn-primary, btn-refresh, btn-caixa e uma de ferramenta),
   cada botão com uma altura e um peso. Três papéis bastam: a ação principal
   (preenchida, azul), as secundárias (contornadas) e a que sai do site (laranja). */
.acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    /* Sem caixa alta (revisão do dono, 20/10/2026, revendo a de 17/10): "VER NO LEILOEIRO"
       soava como grito, e os portais escrevem "Ver detalhes". Volta a 0.8rem. */
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-main);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, filter 0.15s;
}
.acao:hover  { transform: translateY(-1px); }
.acao:active { transform: none; }
.acao-ico { font-size: 1rem; line-height: 1; }
/* O botão CHEIO (decisão do dono, 20/10/2026): no card é "Ver detalhes" (`.acao-primaria`),
   porque a ficha vem antes de sair para o site do vendedor; na ficha é "Ver na Caixa / no
   leiloeiro" (`.acao-externa`), porque é lá que o lance acontece. */
.acao-primaria,
.acao-externa {
    background: var(--accent-blue);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px var(--accent-blue-glow);
}
.acao-primaria:hover,
.acao-externa:hover { filter: brightness(1.08); box-shadow: 0 6px 18px var(--accent-blue-glow); }
.acao-secundaria {
    background: rgba(26, 29, 33, 0.05);
    border-color: rgba(26, 29, 33, 0.14);
}
.acao-secundaria:hover { background: rgba(26, 29, 33, 0.06); border-color: rgba(26, 29, 33, 0.14); }
.acao-compacta { min-height: 34px; padding: 0 10px; font-size: 0.7rem; }

/* Rodapé da ficha: os botões em grade, todos do mesmo tamanho. */
.modal-footer { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-footer .acao { flex: 1 1 calc(50% - 4px); }

/* No pé da gaveta de filtros: uma linha miúda, sem disputar lugar com nada. */
.last-updated-info {
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--card-border);
    font-size: 0.72rem;
    color: var(--text-dim);
    text-align: center;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 29, 33, 0.22);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #ffffff;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    padding: 20px 30px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 30px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Ficha no desktop: usar a tela que o navegador dá. Com 900 px de largura e 85vh de altura,
   num monitor de 1366×768 o conteúdo rolava numa faixa de 429 px -- cabeçalho (86) e os
   cinco botões em três linhas (136) comiam o resto, e sobravam 466 px de lado. Agora:
   até 1200 px de largura, a altura da janela menos 32 px, e os botões numa linha só
   quando cabem (dois por linha só em janela estreita). Medido no mesmo 1366×768: 620 px
   de conteúdo. O celular (até 768 px) segue em tela cheia, regra mais abaixo. */
@media (min-width: 769px) {
    #details-modal .modal-content {
        width: calc(100% - 48px);
        max-width: 1200px;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
    }
    #details-modal .modal-header { padding: 14px 24px; }
    #details-modal .modal-body { padding: 24px; }
    #details-modal .modal-footer .acao { flex: 1 1 160px; }
}

.detail-item {
    background: rgba(26, 29, 33, 0.03);
    padding: 15px;
    border-radius: 12px;
}

.detail-item label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.detail-item span {
    font-size: 0.95rem;
    font-weight: 500;
}

.analysis-result-box {
    grid-column: span 2;
    background: #f0ece6;
    border: 1px solid rgba(26, 29, 33, 0.14);
    padding: 0;
    border-radius: 15px;
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(26, 29, 33, 0.09);
}

.analysis-result-box h3 {
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
}

.analysis-result-box .analysis-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
}

/* Upgrade do Modal: Foto da Caixa */
.property-image-container {
    width: 100%;
    height: 300px;
    background: #1a1d21;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--accent-blue);
}

.property-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #1a1d21;
}

.modality-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 8px 20px;
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
    background: var(--accent-blue);
    border-radius: 15px 0 0 0;
    box-shadow: -5px -5px 15px rgba(26, 29, 33, 0.09);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modality-badge.venda-online { background: #0f7a4a; }
.modality-badge.leilao { background: #8a5a00; }
.modality-badge.venda-direta { background: #b4600a; }

/* Price History */
.price-de-por {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
}

.price-old {
    text-decoration: line-through;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.price-new-badge {
    background: rgba(15, 122, 74, 0.17);
    color: #0f7a4a;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 10px;
    display: inline-block;
}

.sniper-info-footer {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    color: var(--text-dim);
    margin: 10px 20px 0 20px;
    padding-top: 5px;
}

.sniper-info-footer strong {
    color: var(--acao-texto);
}

/* CRM Investimento: Favoritos e Notas */
/* Favorito: pílula com texto ("☆ Favoritar" / "★ Favoritado"), não uma estrela solta. */
.btn-star {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(26, 29, 33, 0.04);
    border: 1px solid rgba(26, 29, 33, 0.14);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-sub);
    transition: all 0.2s ease;
    padding: 3px 9px;
    line-height: 1.1;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-star:hover {
    color: var(--accent-gold);
    border-color: rgba(138, 90, 0, 0.55);
}

.btn-star.active {
    color: var(--accent-gold);
    background: rgba(138, 90, 0, 0.102);
    border-color: rgba(138, 90, 0, 0.55);
    text-shadow: 0 0 10px rgba(138, 90, 0, 0.12);
}

/* Favorito no modal de detalhes — tamanho maior que nos cards */
.modal-fav-btn {
    font-size: 0.82rem;
    padding: 6px 12px;
    color: rgba(26, 29, 33, 0.7);
    transition: color 0.15s, transform 0.1s;
}
.modal-fav-btn:hover {
    color: var(--accent-gold);
    transform: scale(1.15);
}
.modal-fav-btn.active {
    color: var(--accent-gold);
}

.notes-section {
    margin-top: 25px;
    padding: 20px;
    background: rgba(26, 29, 33, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(26, 29, 33, 0.1);
}

.notes-section h3 {
    font-size: 0.9rem;
    color: var(--acao-texto);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notes-textarea {
    width: 100%;
    min-height: 120px;
    background: rgba(26, 29, 33, 0.22);
    border: 1px solid rgba(26, 29, 33, 0.14);
    border-radius: 8px;
    color: var(--text-main);
    padding: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.notes-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Visual Pro: Heat Rating & UX */
.property-table tbody tr {
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* ROI Alto (>40%) - Verde esmeralda refinado */
.property-table tbody tr.row-hot {
    background: rgba(15, 122, 74, 0.051) !important;
    border-left: 3px solid var(--accent-green);
    box-shadow: inset 3px 0 12px rgba(15, 122, 74, 0.024);
}

/* ROI Baixo (<15%) - Despriorizado visualmente */
.property-table tbody tr.row-cold {
    opacity: 0.45;
    filter: grayscale(0.5);
}

.property-table tbody tr.row-cold:hover {
    opacity: 0.8;
}

/* Removido da Caixa - Visualmente rebaixado com borda vermelha */
.property-table tbody tr.row-removed {
    background: rgba(192, 55, 47, 0.034) !important;
    border-left: 3px solid rgba(192, 55, 47, 0.55);
    opacity: 0.7;
}

.property-table tbody tr.row-removed:hover {
    opacity: 0.9;
    background: rgba(192, 55, 47, 0.068) !important;
}

/* Hover Preview Popover */
.photo-preview-popover {
    position: fixed;
    z-index: 9999;
    width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--accent-blue);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(26, 29, 33, 0.12);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(10px);
}

.photo-preview-popover.visible {
    opacity: 1;
    transform: translateY(0);
}

.photo-preview-popover img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}


.photo-preview-info .preview-loc {
    font-size: 0.65rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Market Comparison List inside Modal */
.comparative-section {
    grid-column: span 2;
    margin-top: 15px;
}

.comparative-section h3 {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.comparative-card {
    background: rgba(26, 29, 33, 0.03);
    border: 1px solid var(--card-border);
    padding: 12px 18px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.comparative-card:hover {
    background: rgba(26, 29, 33, 0.06);
    border-color: var(--accent-blue);
}

.comp-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comp-bairro-badge {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--accent-green);
    background: rgba(15, 122, 74, 0.085);
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
}

.comp-address {
    font-size: 0.68rem;
    color: #1a1d21;
    font-weight: 500;
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.comp-metrics {
    display: flex;
    gap: 15px;
    align-items: center;
}

.comp-price {
    font-weight: 700;
    color: #1a1d21;
    font-size: 0.9rem;
}

.comp-m2 {
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-gold);
    font-size: 0.85rem;
    font-weight: 700;
}

.comp-area {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.badge-source {
    font-size: 0.6rem;
    background: rgba(180, 96, 10, 0.17);
    color: var(--acao-texto);
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 700;
}

/* Unlocking animation for action buttons */
@keyframes unlock-fade {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

[id^="actions-"] button, [id^="actions-"] a {
    animation: unlock-fade 0.4s ease forwards;
}

/* --- MOBILE RESPONSIVENESS (Ultra Optimization) --- */

@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        left: -340px;
        top: 0; /* Começa do topo absoluto para evitar conflito com header variável */
        bottom: 0;
        z-index: 4000; /* Acima até dos alertas */
        width: 320px;
        max-width: 85vw;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 15px 0 30px rgba(26, 29, 33, 0.12);
    }

    .sidebar.open {
        left: 0;
    }

    .gaveta-fundo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 3999;              /* logo abaixo da gaveta (4000) */
        background: rgba(17, 19, 23, 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }
    .sidebar.open ~ .gaveta-fundo { opacity: 1; visibility: visible; }

    .gaveta-topo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: -22px;                 /* o padding de cima da gaveta: gruda na borda de verdade */
        z-index: 5;
        margin: -22px -20px 14px;   /* encosta nas bordas da gaveta, por cima do padding */
        padding: 6px 8px 6px 20px;
        background: var(--sidebar-bg);
        border-bottom: 1px solid var(--card-border);
    }
    .gaveta-titulo {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-main);
    }
    .gaveta-fechar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: none;
        color: var(--text-main);
        font-size: 1.2rem;
        cursor: pointer;
    }
    .gaveta-fechar:hover { background: rgba(26, 29, 33, 0.06); }
    .gaveta-fechar:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

    .header-container {
        padding: 0 15px;
    }

    .content {
        padding: 0 15px 15px;
    }

    .table-actions-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

}

@media (max-width: 768px) {
    :root {
        --header-height: auto; /* Permite expansão vertical no mobile */
    }

    .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        background: rgba(180, 96, 10, 0.128);
        border: 1px solid rgba(180, 96, 10, 0.54);
        color: #1a1d21;
        font-size: 0.85rem;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 20px;
        cursor: pointer;
        margin-right: 12px;
        line-height: 1;
    }

    .mobile-menu-btn .mm-icon { font-size: 1.1rem; }
    .mobile-menu-btn .mm-label { display: inline; }

    .logo h1 {
        font-size: 1.1rem;
    }

    .global-search {
        position: relative;
        bottom: 0;
        width: 100%;
        padding: 0; /* Tiramos padding interno pois o container já tem gap */
        background: transparent;
        display: flex; 
        order: 3; /* Garante que a busca fique por último no wrap */
    }

    /* Ajuste fino no input de busca para não ficar colado */
    #search-input {
        margin-top: 5px;
    }

    /* O logo e menu ficam em uma linha, a busca abaixo */
    .header-container {
        flex-wrap: wrap;
        height: auto;
        min-height: 60px;
        padding: 10px 15px;
        gap: 10px;
    }
    
    .header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .logo {
        display: flex;
        align-items: center;
    }

    /* Floating Action Button para Busca ou Filtros se preferir */
    .header-actions {
        gap: 8px;
    }

    .property-table .btn-map {
        font-size: 1rem !important; /* Salva o emoji de mapa (📍) que não usa <span> */
        padding: 6px 14px;
        background: rgba(26, 29, 33, 0.06); /* Fica mais distinguível do fundo escuro */
        border-radius: 8px;
    }
    .property-table .btn-primary {
        padding: 6px 14px !important; /* Ficha técnica não precisa ser gigantona */
        border-radius: 8px;
    }

    /* --- Tabela Mobile em Formato "Cards" --- */
    .table-container {
        border-radius: 0;
        border: none;
        background: transparent;
        padding: 0;
    }

    .property-table, 
    .property-table thead, 
    .property-table tbody, 
    .property-table th, 
    .property-table td, 
    .property-table tr {
        display: block;
    }

    .property-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .property-table tr {
        background: rgba(26, 29, 33, 0.05); /* Um pouco mais claro no mobile */
        border: 1px solid rgba(26, 29, 33, 0.1);
        border-radius: 12px;
        margin-bottom: 15px;
        position: relative;
        padding: 8px 0;
    }

    .property-table td {
        border: none;
        border-bottom: 1px dashed rgba(26, 29, 33, 0.1);
        position: relative;
        padding: 12px 16px;
        min-height: auto;
        text-align: left !important;
        display: flex;
        flex-direction: column; /* Rótulo em cima, Valor embaixo */
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
        word-break: normal;
        overflow-wrap: break-word;
        opacity: 1 !important; /* Alto Contraste Forçado no Mobile */
    }

    .property-table td:last-child {
        border-bottom: 0;
    }

    .property-table td::before {
        content: attr(data-label);
        position: static; /* Sai do position absolute */
        transform: none;
        width: 100%;
        padding-right: 0;
        white-space: normal;
        font-weight: 800;
        color: var(--acao-texto); /* Destaque pro cabeçalho de cada item */
        text-align: left;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.2;
        opacity: 0.7; /* Rótulo leve, Dado brilhante */
    }

    /* Ajustes internos para cards */
    .table-id {
        display: flex;
        flex-direction: row !important;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        background: rgba(26, 29, 33, 0.17);
        margin: -12px -16px 10px -16px;
        padding: 12px 16px;
        border-radius: 12px 12px 0 0;
        width: calc(100% + 32px);
    }
    
    .table-id::before { display: none; } /* Remove texto "IDENTIFICAÇÃO" */
    
    .property-table td:last-child div {
        justify-content: flex-start !important; /* Move os icones de ação pra esquerda de baixo do título */
        width: 100%;
    }

    /* Modal Mobile */
    .modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-body {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .analysis-result-box .analysis-grid {
        grid-template-columns: 1fr;
    }

    .comp-metrics {
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }

    .comp-address {
        max-width: 180px;
    }

    /* Ajuste de Contraste para Alertas no Mobile */
    .alert-panel {
        background: #f7f5f2; /* Fundo mais denso */
    }
    
    .alert-card {
        background: rgba(26, 29, 33, 0.06); /* Mais visível */
        border-color: rgba(26, 29, 33, 0.14);
    }
    
    .alert-panel-header {
        background: rgba(138, 90, 0, 0.085); /* Header mais nítido */
    }

    /* Fix para Painel de Alertas em Tela Cheia no Mobile */
    .alert-panel-overlay {
        top: 0 !important;
        height: 100% !important;
        z-index: 3000; /* Acima de tudo */
    }

    .alert-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-left: none;
    }

    /* Bloco fixo no topo: filtros ativos + abas (Lista/Mapa/Calendário).
       No mobile o mapa captura o toque e as abas rolavam para fora sem como
       voltar; além disso os filtros ativos sumiam e o usuário não sabia que
       estava filtrando. Fixar os dois juntos resolve ambos. z-index acima dos
       controles do Leaflet (~1000). */
    .content {
        padding-top: 0;
    }
    .content-topbar {
        background: var(--bg-dark);
        margin-bottom: 12px;
        padding: 10px 5px 0;
    }
    .table-actions-bar {
        gap: 10px;
        margin-bottom: 0;
        padding: 8px 0 8px;
    }
    /* Filtros ativos compactos; colapsam quando não há nenhum filtro.
       No mobile ficam em UMA linha rolável (não empilham) — com muitos
       filtros a barra não cresce em altura; o usuário desliza para o lado. */
    .active-filters-bar {
        min-height: 0;
        margin-bottom: 0;
        padding: 2px 0 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .active-filters-bar::-webkit-scrollbar { display: none; }
    .active-filters-bar .filter-chip { flex-shrink: 0; }
    /* "Limpar tudo" fixo à esquerda, sempre acessível mesmo rolando */
    .active-filters-bar > .btn {
        order: -1;
        position: sticky;
        left: 0;
        flex-shrink: 0;
        background: var(--bg-dark);
        box-shadow: 10px 0 8px -6px var(--bg-dark);
    }
    .active-filters-bar:empty {
        display: none;
    }
}

/* Helper para o botão que estava invisível */
.mobile-menu-btn {
    display: none;
}

/* Label "Filtros" só aparece no mobile (via media query); no desktop o botão nem existe */
.mm-label { display: none; }

/* Badge com a contagem de filtros ativos */
.mm-badge {
    display: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    background: var(--accent-blue, #b4600a);
    color: #ffffff;
    border-radius: 9px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}
.mm-badge.show { display: inline-block; }

/* ============================================
   SCROLLBAR CUSTOMIZADA - DARK REFINADO
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(26, 29, 33, 0.02);
}
::-webkit-scrollbar-thumb {
    background: rgba(26, 29, 33, 0.06);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 96, 10, 0.22);
}

/* ============================================
   REFINAMENTOS FINAIS DE BADGES E TIPOGRAFIA
   ============================================ */

/* Badge de desconto com gradiente */
.table-discount {
    background: linear-gradient(135deg, rgba(138, 90, 0, 0.128), rgba(138, 90, 0, 0.068));
    border: 1px solid rgba(138, 90, 0, 0.3);
    color: var(--accent-gold);
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
}

.table-discount-over {
    background: linear-gradient(135deg, rgba(192, 55, 47, 0.128), rgba(192, 55, 47, 0.043));
    border: 1px solid rgba(192, 55, 47, 0.36);
    color: var(--accent-red);
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.65rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Inputs e selects com estilo unificado */
input[type="text"],
input[type="number"],
select {
    background: rgba(26, 29, 33, 0.04);
    border: 1px solid rgba(26, 29, 33, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    transition: all 0.2s ease;
    width: 100%;
    appearance: none;
}

/* A lista que o <select> abre é desenhada pelo sistema e NÃO compõe transparência:
   com o fundo translúcido do campo, o texto saía cinza sobre cinza. Cor opaca aqui. */
select option {
    background-color: var(--bg-mid);
    color: var(--text-main);
}

select option:checked,
select option:hover {
    background-color: var(--accent-blue);
    color: #ffffff;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: rgba(180, 96, 10, 0.55);
    box-shadow: 0 0 0 3px rgba(180, 96, 10, 0.03);
    background: rgba(180, 96, 10, 0.034);
}

input[type="range"] {
    width: 100%;
    accent-color: var(--accent-blue);
}

/* Link da tabela */
.table-id a {
    color: var(--text-sub);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: color 0.2s;
}
.table-id a:hover {
    color: var(--acao-texto);
}

/* ══════════════════════════════════════════════
   SISTEMA DE ALERTAS DE LEILÃO
══════════════════════════════════════════════ */

/* Botão sininho */
/* Neutro, como a inicial da conta: no cabeçalho o âmbar é só do "Entrar". Com o sino, a
   inicial e o botão de ação todos em âmbar, o olho não sabia para onde ir. Quem chama
   atenção é o número vermelho de alertas. */
.btn-alert-bell {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--card-border);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.btn-alert-bell:hover {
    background: var(--bg-mid);
    border-color: var(--card-border-hover);
    transform: translateY(-1px);
}

.btn-alert-bell.has-alerts {
    animation: bell-shake 2.5s ease infinite;
}

@keyframes bell-shake {
    0%, 85%, 100% { transform: rotate(0deg); }
    88% { transform: rotate(-12deg); }
    92% { transform: rotate(12deg); }
    96% { transform: rotate(-8deg); }
    99% { transform: rotate(4deg); }
}

/* Badge do número de alertas */
.alert-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent-red);
    color: white;
    font-size: 0.6rem;
    font-weight: 900;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 8px rgba(192, 55, 47, 0.12);
    border: 1.5px solid var(--bg-dark);
    animation: badge-pulse 2s ease infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(192, 55, 47, 0.12); }
    50% { box-shadow: 0 2px 16px rgba(192, 55, 47, 0.12); }
}

/* Overlay do painel */
.alert-panel-overlay {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    z-index: 1500;
    pointer-events: none;
}

.alert-panel-overlay.open {
    pointer-events: all;
    background: rgba(26, 29, 33, 0.22); /* Escurece o fundo para destacar o painel */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Painel lateral */
.alert-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 95vw;
    height: 100%;
    background: #f7f5f2;
    border-left: 1px solid rgba(138, 90, 0, 0.24);
    box-shadow: -8px 0 40px rgba(26, 29, 33, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(110%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.alert-panel-overlay.open .alert-panel {
    transform: translateX(0);
}

/* Header do painel */
.alert-panel-header {
    padding: 20px 22px;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(138, 90, 0, 0.034);
    flex-shrink: 0;
}

.alert-panel-header h2 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent-gold);
}

.alert-panel-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-panel-controls select {
    background: rgba(26, 29, 33, 0.05);
    border: 1px solid rgba(26, 29, 33, 0.14);
    color: var(--text-sub);
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 0.72rem;
    cursor: pointer;
}

/* Body scrollável */
.alert-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-loading {
    text-align: center;
    color: var(--text-dim);
    padding: 40px 20px;
    font-size: 0.85rem;
}

.alert-empty {
    text-align: center;
    padding: 60px 20px;
}

.alert-empty .empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; }
.alert-empty p { color: var(--text-dim); font-size: 0.85rem; }
.alert-empty small { color: var(--text-muted); font-size: 0.75rem; }

/* Card de alerta individual */
.alert-card {
    background: rgba(26, 29, 33, 0.03);
    border: 1px solid rgba(26, 29, 33, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.2s ease;
    cursor: default;
    animation: alert-fade-in 0.3s ease forwards;
}

@keyframes alert-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.alert-card:hover {
    background: rgba(26, 29, 33, 0.055);
    border-color: rgba(26, 29, 33, 0.14);
}

/* Variantes de urgência */
.alert-card.urgency-red {
    border-left: 3px solid var(--accent-red);
    background: rgba(192, 55, 47, 0.043);
}
.alert-card.urgency-red:hover {
    background: rgba(192, 55, 47, 0.076);
}

.alert-card.urgency-yellow {
    border-left: 3px solid var(--accent-gold);
    background: rgba(138, 90, 0, 0.043);
}
.alert-card.urgency-yellow:hover {
    background: rgba(138, 90, 0, 0.076);
}

.alert-card.urgency-green {
    border-left: 3px solid var(--accent-green);
    background: rgba(15, 122, 74, 0.034);
}
.alert-card.urgency-green:hover {
    background: rgba(15, 122, 74, 0.068);
}

/* Topo do card: leilão + countdown */
.alert-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.alert-leilao-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(138, 90, 0, 0.128);
    color: var(--accent-gold);
}

/* Badge de countdown */
.alert-countdown {
    font-size: 0.7rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.urgency-red .alert-countdown {
    background: rgba(192, 55, 47, 0.17);
    color: #c0372f;
    border: 1px solid rgba(192, 55, 47, 0.48);
}

.urgency-yellow .alert-countdown {
    background: rgba(138, 90, 0, 0.17);
    color: #8a5a00;
    border: 1px solid rgba(138, 90, 0, 0.48);
}

.urgency-green .alert-countdown {
    background: rgba(15, 122, 74, 0.17);
    color: #0f7a4a;
    border: 1px solid rgba(15, 122, 74, 0.48);
}

/* Info do imóvel */
.alert-card-address {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-card-meta {
    font-size: 0.68rem;
    color: var(--text-dim);
    margin-bottom: 8px;
}

/* Data/hora e valor */
.alert-card-datetime {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 10px;
}

.alert-card-datetime .date-icon { font-size: 0.85rem; }

/* Footer: preço e botão */
.alert-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(26, 29, 33, 0.1);
}

.alert-price {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent-green);
}

.alert-price small {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-dim);
}

.btn-alert-open {
    font-size: 0.65rem;
    padding: 5px 12px;
    background: rgba(180, 96, 10, 0.085);
    border: 1px solid rgba(180, 96, 10, 0.36);
    color: var(--acao-texto);
    border-radius: 7px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-alert-open:hover {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(180, 96, 10, 0.105);
}

.btn-alert-details {
    font-size: 0.65rem;
    padding: 5px 12px;
    background: rgba(15, 122, 74, 0.068);
    border: 1px solid rgba(15, 122, 74, 0.3);
    color: var(--accent-green);
    border-radius: 7px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-alert-details:hover {
    background: var(--accent-green);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 122, 74, 0.09);
}

.alert-card-desc {
    font-size: 0.67rem;
    color: var(--text-dim);
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.alert-discount-pill {
    display: inline-block;
    background: rgba(138, 90, 0, 0.102);
    color: var(--accent-gold);
    border: 1px solid rgba(138, 90, 0, 0.3);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Separador de data no painel */
.alert-date-separator {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 0;
    position: relative;
}

.alert-date-separator::before,
.alert-date-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%;
    height: 1px;
    background: rgba(26, 29, 33, 0.06);
}

.alert-date-separator::before { left: 0; }
.alert-date-separator::after { right: 0; }

/* ============================================
   PROPERTY RISK BADGES (TABLE COLUMN)
   ============================================ */
.prop-risk-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-right: 2px;
    margin-top: 1px;
}
.badge-ocupado  { background: rgba(192, 55, 47, 0.102);  color: var(--accent-red);   border: 1px solid rgba(192, 55, 47, 0.42); }
.badge-avista   { background: rgba(138, 90, 0, 0.085); color: var(--accent-gold);  border: 1px solid rgba(138, 90, 0, 0.36); }
.badge-leilao-neg { background: rgba(138, 90, 0, 0.085); color: #8a5a00; border: 1px solid rgba(138, 90, 0, 0.36); }
.badge-fgts     { background: rgba(15, 122, 74, 0.085); color: var(--accent-green); border: 1px solid rgba(15, 122, 74, 0.36); }
/* Dado da fonte em contradicao: cinza-azulado, para nao competir com o risco do imovel */
.badge-uf-divergente { background: rgba(90, 98, 112, 0.102); color: #5a6270; border: 1px solid rgba(90, 98, 112, 0.42); }
.badge-sem-pino      { background: rgba(90, 98, 112, 0.102); color: #5a6270; border: 1px solid rgba(90, 98, 112, 0.42); }

/* Links de busca de mercado, na ficha do imovel sem analise */
.market-links-nota { font-size: 0.78rem; color: var(--text-dim); line-height: 1.5; margin: 2px 0 10px; }
.market-links-row  { display: flex; flex-wrap: wrap; gap: 8px; }
.market-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; text-decoration: none;
    font-size: 0.8rem; font-weight: 700;
    background: rgba(180, 96, 10, 0.085); color: var(--acao-texto);
    border: 1px solid rgba(180, 96, 10, 0.42);
}
.market-link:hover { background: rgba(180, 96, 10, 0.153); }

/* ============================================
   PROPERTY CARD LIST
   ============================================ */

.property-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

.prop-card {
    /* O card é o contêiner: a grade de dentro escolhe entre lado a lado e empilhado pela
       largura DELE (o mesmo card vive com e sem a barra de filtros, no calendário e nos
       favoritos). Ver a consulta `@container card` logo abaixo da grade. */
    container: card / inline-size;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.prop-card:hover {
    border-color: var(--card-border-hover);
    box-shadow: 0 4px 20px rgba(26, 29, 33, 0.075);
}

.prop-card.row-hot {
    border-left: 3px solid var(--accent-gold);
    box-shadow: 0 0 14px rgba(138, 90, 0, 0.024);
}

/* Estreito (celular, coluna apertada): foto no topo, corpo, faixa — uma coluna só. */
.prop-card-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foto" "corpo" "faixa";
}
/* Largo: foto em 3:2 à esquerda, o corpo ao lado e a faixa embaixo, de ponta a ponta.
   A foto tem a altura mínima de 3:2 e estica se o corpo for mais alto (corta pouco).
   860px e não menos: com o card mais estreito o corpo fica alto (selos e números quebram
   linha) e a foto ao lado voltava a ser uma tira em pé — medido a 602px: foto 260×444. */
@container card (min-width: 860px) {
    .prop-card-grade {
        grid-template-columns: clamp(260px, 40cqi, 400px) minmax(0, 1fr);
        grid-template-areas: "foto corpo" "faixa faixa";
    }
    /* Altura mínima de 3:2 calculada pela largura da coluna, e não `aspect-ratio`: com a
       proporção fixa, quando o corpo é mais alto e a foto estica, o navegador alarga a foto
       junto (altura × 1,5) e ela invade o corpo. Assim ela só ganha altura. */
    .prop-card-grade > .prop-card-photo-wrap {
        aspect-ratio: auto;
        max-height: none;
        min-height: calc(clamp(260px, 40cqi, 400px) / 1.5);
    }
}

.prop-card-photo-wrap {
    grid-area: foto;
    /* No estreito: faixa 16:9 com teto (no celular dá ~210px, perto dos 190px de antes). */
    aspect-ratio: 16 / 9;
    max-height: 300px;
    /* Largura fixa na coluna: sem isto o teto de altura encolhe a largura junto (proporção). */
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: rgba(26, 29, 33, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scrim: escurece a base da foto para os overlays ficarem legíveis */
.prop-card-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(26, 29, 33, 0.22));
    pointer-events: none;
    z-index: 1;
}

.prop-card-photo-fallback {
    font-size: 2.4rem;
    opacity: 0.12;
    user-select: none;
    pointer-events: none;
}

.prop-card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Selo de desconto no canto superior esquerdo da foto */
/* Favorito mora sobre a foto, no canto oposto da fita de desconto: entre os selos do
   título ele parecia mais um selo. Fundo escuro translúcido para ler sobre qualquer foto. */
.prop-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    min-height: 32px;
    padding: 4px 10px;
    /* Sobre a foto: véu escuro e texto branco (ver --veu-foto). A 22% de tinta ele virava
       um borrão cinza no céu. */
    background: var(--veu-foto);
    border-color: var(--veu-foto-borda);
    color: #ffffff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.prop-fav:hover { background: rgba(17, 19, 23, 0.85); color: #ffffff; }
/* Favoritado: pastilha BRANCA com a estrela e o texto em dourado (5,6:1). Cheio em
   dourado ele competia com a fita de desconto e com o botão de ação; branco ele ainda
   se lê sobre qualquer foto e diz o estado sem gritar. */
.prop-fav.active {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--accent-gold);
    box-shadow: 0 1px 4px rgba(26, 29, 33, 0.3);
}
.prop-fav.active:hover { background: #fbf6ec; border-color: #fbf6ec; color: #6f4800; }

.prop-photo-ribbon {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 2;
    background: var(--accent-green);
    color: #ffffff;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 3px 11px 3px 9px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(26, 29, 33, 0.12);
    pointer-events: none;
}

/* Chip de tipo + área na base da foto */
.prop-photo-type {
    position: absolute;
    left: 10px;
    bottom: 8px;
    z-index: 2;
    /* Era texto branco com sombra forte no tema escuro; a conversão da paleta o fez
       tinta com sombra fraca, e ele sumia em foto escura. Agora leva o próprio fundo. */
    color: #ffffff;
    background: var(--veu-foto);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.74rem;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    max-width: calc(100% - 20px);
}

.prop-photo-type small {
    font-weight: 600;
    font-size: 0.62rem;
    opacity: 0.9;
    white-space: nowrap;
}

.prop-card-body {
    grid-area: corpo;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.prop-card-header {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* O título abre o card, como nos portais: "Casa em Pinhais". Antes o card abria pelo código
   do anúncio e quatro selos, e o tipo vinha pequeno embaixo deles. */
.prop-card-titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-main);
}
.prop-novo { font-size: 0.8rem; }

/* Data e prazo na mesma linha: o "1º leilão é amanhã" diz respeito à data, e no topo
   competia com o título. O selo vem dentro de um span (trocado ao vivo pelo id). */
.prop-datas-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.prop-datas-linha .prop-datas { margin: 0; }
.prop-datas-linha .prop-badge-slot { display: inline-flex; align-items: center; }

/* O que pede atenção, numa linha (linhaDeAlertas): o rótulo em vermelho, o resto em tinta. */
.prop-alertas {
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text-sub);
}
.prop-alertas b { color: var(--accent-red); font-weight: 700; }

/* Quem vende, o que é bom (FGTS) e o código: discretos, no pé do bloco. */
.prop-card-selos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.prop-card-selos .prop-risk-badge { margin: 0; }

/* O código do anúncio é referência, não chamada: o botão "Ver na Caixa / no leiloeiro"
   já leva ao anúncio. Cinza, sublinhado só no hover. */
.prop-id-link {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 500;
}
.prop-id-link code { font-family: monospace; font-size: 0.7rem; }

.prop-id-link:hover {
    color: var(--text-sub);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prop-card-location {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.prop-card-location span {
    font-size: 0.68rem;
    color: var(--text-dim);
}

.prop-location-address {
    font-size: 0.74rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prop-location-meta {
    font-size: 0.76rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    align-items: center;
}

.prop-location-bairro {
    color: var(--acao-texto);
    font-weight: 700;
}

.prop-location-cidade {
    color: var(--text-sub);
    font-weight: 600;
}

.prop-location-sep {
    color: var(--text-muted);
}

/* Bloco de preço — Lance como número-herói, avaliação sem riscar + pill */
.prop-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px 12px;
    flex-wrap: wrap;
    padding: 7px 0 2px;
    border-top: 1px solid var(--card-border);
}
.prop-price-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.prop-price-label {
    font-size: 0.54rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    font-weight: 700;
}
.prop-price-lance {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.05;
    letter-spacing: -0.5px;
}
.prop-price-aval {
    font-size: 0.72rem;
    color: var(--text-dim);
}
/* Lote anunciado antes do valor (web/lance.js): no lugar do "R$ 0", o aviso e o link. */
.lance-a-publicar {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent-gold);
    line-height: 1.2;
}
.lance-a-publicar-aviso {
    display: block;
    font-size: 0.72rem;
    color: var(--text-sub);
    line-height: 1.35;
}
.lance-a-publicar-aviso a {
    color: var(--acao-texto);
    font-weight: 700;
    white-space: nowrap;
}
.prop-price-aval b {
    color: var(--text-sub);
    font-weight: 700;
}
.prop-price-disc {
    align-self: center;
    background: var(--accent-green);
    color: #ffffff;
    font-weight: 900;
    font-size: 0.75rem;
    padding: 3px 9px;
    border-radius: 8px;
}
.prop-price-disc.over {
    background: rgba(192, 55, 47, 0.128);
    color: var(--accent-red);
}

.prop-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    align-items: flex-start;
    padding: 6px 0;
    border-top: 1px solid var(--card-border);
}

.prop-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 52px;
}

.prop-stat-label {
    font-size: 0.6rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.prop-stat-value {
    font-size: 0.9rem;
    color: var(--text-main);
    font-weight: 700;
}

.prop-stat-value.dimmed {
    color: var(--text-dim);
    font-weight: 400;
}
.prop-stat-sim {
    grid-column: 1 / -1;
    width: 100%;
    border-top: 1px solid rgba(26, 29, 33, 0.1);
    padding-top: 4px;
    margin-top: 2px;
}
.prop-stat-sim-val {
    font-weight: 800;
    font-size: 0.78rem;
}
/* A frase que explica o retorno: de onde vem o preço, o que "sobra" quer dizer. */
.prop-stat-nota {
    display: block;
    margin-top: 3px;
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-dim);
    white-space: normal;
}

/* Faixa de baixo: as três explicações para o leigo lado a lado (resumo, referência de
   preço, retorno). Deitadas aqui, em vez de empilhadas numa coluna, elas não esticam o
   card; num card estreito ficam uma embaixo da outra. */
.prop-card-faixa {
    grid-area: faixa;
    border-top: 1px solid var(--card-border);
    min-width: 0;
}
/* Recolhida por padrão (decisão do dono, 20/10/2026). A linha que abre tem 44px de alvo
   de toque, como todo controle do card no celular, e diz o que tem dentro. */
.prop-faixa-abrir {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    /* Uma FAIXA, e não só uma linha de texto: o fundo de papel sobre o card branco é o que
       diz "isto é um controle" (pedido do dono, 20/10/2026 -- só a setinha no canto não
       dizia que abria). */
    background: var(--bg-dark);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-sub);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s;
}
.prop-faixa-abrir::-webkit-details-marker { display: none; }
.prop-faixa-rotulo { min-width: 0; }
/* O verbo no canto, na cor de ação: "Ver mais" fechada, "Ver menos" aberta. Leitor de tela
   não precisa dele -- o próprio <summary> anuncia aberto/fechado. */
.prop-faixa-acao {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    color: var(--acao-texto);
    font-weight: 700;
    white-space: nowrap;
}
.prop-faixa-acao::after {
    content: "\25BE";      /* ▾ — escrito como escape, à prova de codificação */
    font-size: 1rem;
    line-height: 1;
    transition: transform .15s;
}
.prop-card-faixa[open] .prop-faixa-acao::after { transform: rotate(180deg); }
.prop-card-faixa[open] .quando-fechada,
.prop-card-faixa:not([open]) .quando-aberta { display: none; }
.prop-faixa-abrir:hover { background: var(--bg-mid); color: var(--text-main); }
.prop-faixa-abrir:hover .prop-faixa-acao { text-decoration: underline; }
.prop-faixa-abrir:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.prop-faixa-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 20px;
    padding: 2px 14px 12px;
    min-width: 0;
}
/* Três colunas só quando cabem as três; entre uma e três, duas deixavam uma sobrando. */
@container card (min-width: 720px) {
    .prop-faixa-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.prop-faixa-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prop-faixa-titulo {
    font-size: 0.6rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.prop-card-faixa .prop-resumo { margin: 0; }
.prop-card-analysis { min-width: 0; }
/* O retorno mora sozinho na sua coluna: sem o filete que o separava dos números. */
.prop-card-retorno .prop-stat-sim { border-top: none; padding-top: 0; margin-top: 0; }

/* Bloco de referência de preço do card. align-self:stretch faz os elementos
   preencherem a largura, sem afetar os demais estados do card. */
.ref-bloco { align-self: stretch; text-align: left; font-size: 0.72rem; line-height: 1.45; }
.ref-intro { color: var(--text-dim); }
.ref-faixa { font-size: 0.95rem; font-weight: 800; color: var(--accent-gold); margin: 2px 0; }
.ref-sub { color: var(--text-sub); margin-top: 3px; }
.ref-abaixo { color: var(--accent-green); }
.ref-origem { display: inline-block; margin-top: 6px; padding: 1px 7px; border: 1px solid var(--card-border); border-radius: 5px; font-size: 0.62rem; color: var(--text-dim); }
.ref-conferir { display: inline-block; margin-top: 7px; padding: 3px 9px; border: 1px solid var(--card-border); border-radius: 5px; background: none; color: var(--text-main); font: inherit; font-size: 0.66rem; font-weight: 700; cursor: pointer; }
/* A nota de referencia: diz em quantos anuncios a estimativa se apoia, e que ela e
   referencia e nao avaliacao. Discreta de proposito -- e ressalva, nao manchete -- mas
   legivel: medido em 16/10/2026, 14% das estimativas saem de UM anuncio so, e dentro do
   mesmo bairro o anuncio mais caro custa 38% a mais por m2 que o mais barato. */
.prop-mkt-ref {
    align-self: stretch;
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--card-border);
    font-size: 0.58rem;
    line-height: 1.45;
    color: var(--text-dim);
    text-align: left;
}
.prop-mkt-ref strong { color: var(--text-main); font-weight: 700; }
.prop-mkt-ref span { display: block; margin-top: 2px; }

/* Ações do card: no estreito, 2×2 do mesmo tamanho; no largo, uma fila só (ver a consulta
   `@container card`). */
.prop-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--card-border);
}
.prop-card-actions .acao { justify-content: center; padding: 0 10px; }

/* Lance à esquerda e os números (área, R$/m², financiável) à direita, na mesma linha: um
   embaixo do outro, o corpo ficava mais alto que a foto e ela voltava a ser cortada. */
.prop-card-numeros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 20px;
    padding-top: 7px;
    border-top: 1px solid var(--card-border);
}
.prop-card-numeros .prop-card-price,
.prop-card-numeros .prop-card-stats { border-top: none; padding: 0; }

/* Botões numa fila só quando cabem: os quatro com rótulo inteiro pedem uns 700px de corpo,
   o que só acontece com o card a partir de ~1150px (tela grande). Abaixo disso ficam 2×2,
   em vez de três numa linha e um sozinho na outra. Fica DEPOIS da regra base de propósito. */
/* Card largo: os botões no tamanho do texto e juntos no canto direito, como nos portais
   (pedido do dono, 20/10/2026). Antes eram quatro colunas iguais de ponta a ponta, e um
   botão de 270px chama mais atenção que o preço. No estreito eles continuam em grade de
   duas colunas, que é o que dá 44px de alvo de toque a cada um. */
@container card (min-width: 720px) {
    .prop-card-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }
    .prop-card-actions .acao { flex: 0 0 auto; padding: 0 16px; }
    /* Quatro botões com rótulo não cabem juntos no canto: o corpo do card largo tem ~620px
       úteis e os quatro somam 655 com "Ver na Caixa" e ~675 com "Ver no leiloeiro" (medido
       em produção, 20/10/2026) -- o último caía sozinho na linha de baixo. O exemplo dos
       portais resolve assim: o botão que importa com texto, os outros só com ícone.
       O rótulo some só da VISTA (continua para leitor de tela e no `title`), e só aqui:
       no card estreito os quatro voltam a ter texto, em grade de duas colunas. */
    .prop-card-actions .acao-icone-no-largo { padding: 0; width: 40px; }
    .prop-card-actions .acao-icone-no-largo .acao-lbl {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
}

/* ============================================
   CARD LIST — MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 580px) {

    /* Mais respiro e borda/sombra mais fortes para separar os cards
       claramente (onde começa e termina cada um) no mobile. */
    .property-list { gap: 14px; }

    /* A disposição em coluna única vem da consulta `@container card` (estreito); aqui só
       a borda e a sombra mais fortes para separar um card do outro. */
    .prop-card {
        border-color: rgba(26, 29, 33, 0.14);
        box-shadow: 0 3px 12px rgba(26, 29, 33, 0.09);
    }

    .prop-card.row-hot {
        border-left-width: 3px;
    }

    /* Overlays compactos no mobile */
    .prop-photo-ribbon {
        top: 8px;
        font-size: 0.72rem;
        padding: 2px 8px 2px 6px;
    }

    .prop-photo-type {
        left: 9px;
        bottom: 8px;
        font-size: 0.72rem;
    }

    .prop-card-body {
        padding: 10px 12px;
        gap: 5px;
    }
    .prop-faixa-grade { padding: 2px 12px 10px; }

    /* 44px de toque nos botões do card e do rodapé da ficha. */
    .prop-card-actions .acao { min-height: 44px; padding: 0 8px; }
    .modal-footer .acao { min-height: 44px; }

    /* Stats em 2 colunas no mobile, na linha inteira embaixo do lance */
    .prop-card-numeros .prop-card-stats { flex-basis: 100%; }
    .prop-card-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 10px;
    }

    /* Bloco de preço compacto no mobile */
    .prop-price-lance { font-size: 1.2rem; }
    .prop-card-price { padding: 6px 0 0; gap: 6px 10px; }

    /* Endereço não trunca no mobile — permite wrap */
    .prop-location-address {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .btn-reanalyze {
        font-size: 0.6rem;
        padding: 3px 6px;
    }
}
/* ============================================
   IMPROVED MODAL SECTIONS
   ============================================ */

/* Image always full-width in modal grid */
.property-image-container { grid-column: span 2; }

/* Notes always full-width */
.notes-section { grid-column: span 2; }

/* Section container */
.modal-section {
    grid-column: span 2;
    background: rgba(26, 29, 33, 0.02);
    border: 1px solid rgba(26, 29, 33, 0.1);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-risk-section {
    border-color: rgba(192, 55, 47, 0.18);
    background: rgba(192, 55, 47, 0.021);
}
.modal-section-title {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-dim);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
}

/* Address block */
.overview-address { display: flex; flex-direction: column; gap: 3px; }
.overview-address strong { font-size: 1rem; font-weight: 700; color: var(--text-main); }
.overview-address span   { font-size: 0.72rem; color: var(--text-dim); }

/* Overview metrics grid */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.overview-item {
    background: rgba(26, 29, 33, 0.03);
    border: 1px solid rgba(26, 29, 33, 0.1);
    border-radius: 8px;
    padding: 9px 12px;
}
.overview-item label {
    display: block;
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.overview-item span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    display: block;
}

/* Risk section badges */
.risk-badges-row { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.modal-risk-badge.badge-ocupado   { background: rgba(192, 55, 47, 0.128);   color: var(--accent-red);   border: 1px solid rgba(192, 55, 47, 0.48); }
.modal-risk-badge.badge-leilao-neg{ background: rgba(138, 90, 0, 0.102);  color: #8a5a00; border: 1px solid rgba(138, 90, 0, 0.42); }

/* Legal observations panel */
.legal-panel {
    background: rgba(138, 90, 0, 0.034);
    border: 1px solid rgba(138, 90, 0, 0.216);
    border-left: 3px solid var(--accent-gold);
    border-radius: 4px 10px 10px 4px;
    padding: 12px 16px;
}
.legal-panel-label {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent-gold);
    margin-bottom: 6px;
}
.legal-panel-text {
    font-size: 0.78rem;
    color: var(--text-sub);
    line-height: 1.65;
    white-space: pre-line;  /* observações da Zuk chegam com quebras entre itens */
}

/* Documentos do leiloeiro na ficha: link público (edital) ou 🔒 quando exige login */
.doc-bloco { margin-top: 12px; }
.doc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.doc-nota {
    margin-top: 6px;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-dim);
}
.doc-link {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(180, 96, 10, 0.36);
    background: rgba(180, 96, 10, 0.051);
    color: var(--acao-texto);
    text-decoration: none;
}
a.doc-link:hover { background: rgba(180, 96, 10, 0.119); }
.doc-link.doc-locked {
    color: var(--text-dim);
    background: transparent;
    border: 1px dashed rgba(107, 115, 130, 0.48);
    cursor: default;
}

/* Payment methods */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.payment-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 10px;
    border: 1px solid;
    text-align: center;
}
.payment-pill.yes { background: rgba(15, 122, 74, 0.06); border-color: rgba(15, 122, 74, 0.336); }
.payment-pill.no  { background: rgba(107, 115, 130, 0.034); border-color: rgba(107, 115, 130, 0.144); opacity: 0.45; }
.pill-icon   { font-size: 1.1rem; }
.pill-label  { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.payment-pill.yes .pill-label { color: var(--accent-green); }
.pill-status { font-size: 0.7rem; font-weight: 900; color: var(--text-muted); }
.payment-pill.yes .pill-status { color: var(--accent-green); }

/* Responsive */
@media (max-width: 768px) {
    .overview-grid        { grid-template-columns: repeat(2, 1fr); }
    .payment-methods-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   SIMULADOR DE CUSTOS — Modal
   ========================================================= */
.modal-content-simulator {
    max-width: 960px;
    width: 97%;
    max-height: 90vh;
}

/* Layout 2 colunas sem containers: Valores(row1)+Análise(row2) | Custos(full height) */
#simulator-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 14px;
    padding: 12px 16px;
    align-items: start;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.sim-section {
    /* Sem background nem border: seções separadas pelo título e divisor de coluna */
    padding: 0;
}

/* Posicionamento grid e gutter — devem vir APÓS .sim-section para vencer na cascata */
.sim-section-valores { grid-column: 1; grid-row: 1; padding-right: 16px; }
.sim-section-custos  { grid-column: 2; grid-row: 1 / span 2;
                        padding-left: 16px;
                        border-left: 1px solid rgba(26, 29, 33, 0.1); }
.sim-section-analise { grid-column: 1; grid-row: 2; padding-right: 16px; }

.sim-section-title {
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--acao-texto);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
}

/* Campo "Valor de Compra" editável — dourado para distinguir do valor de venda */
.sim-input-compra {
    background: rgba(138, 90, 0, 0.102);
    border: 1.5px solid rgba(138, 90, 0, 0.55);
    border-radius: 6px;
    color: var(--accent-gold);
    font-size: 0.95rem;
    font-weight: 800;
    padding: 5px 10px;
    width: 170px;
    text-align: right;
}
.sim-input-compra:focus { outline: none; border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(138, 90, 0, 0.075); }

.sim-editable-hint {
    font-size: 0.65rem;
    /* O lápis diz "este valor é editável": a 22% de opacidade (1,35:1) ninguém via. */
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 4px;
    background: rgba(138, 90, 0, 0.102);
    border-radius: 3px;
    padding: 1px 4px;
}

/* --- Valores --- */
.sim-values-grid { display: flex; flex-direction: column; gap: 5px; }

.sim-val-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    padding: 2px 0;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
}

.sim-val-row label { color: var(--text-dim); }

/* Linhas Entrada/Financiamento: 3 partes com flex (NÃO grid — JS usa display:'flex') */
.sim-val-row-pct {
    display: flex;
    gap: 8px;
    align-items: center;
}
.sim-val-row-pct label {
    flex: 1;
    color: var(--text-dim);
}
.sim-pct-field {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-dim);
    font-size: 0.75rem;
}

.sim-display { font-weight: 600; color: var(--text-main); }
.sim-display-primary { color: var(--accent-gold); font-weight: 800; font-size: 0.95rem; }

.sim-val-highlight {
    background: rgba(180, 96, 10, 0.068);
    border: 1px solid rgba(180, 96, 10, 0.3);
    border-radius: 7px;
    padding: 8px 10px !important;
    margin-top: 4px;
}
.sim-val-highlight label { color: var(--text-main); font-weight: 600; }

.sim-input-main {
    background: rgba(180, 96, 10, 0.085);
    border: 1.5px solid rgba(180, 96, 10, 0.55);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 6px 12px;
    width: 160px;
    text-align: right;
}
.sim-input-main:focus { outline: none; border-color: #b4600a; box-shadow: 0 0 0 3px rgba(180, 96, 10, 0.06); }

.sim-pct-inline {
    background: rgba(26, 29, 33, 0.06);
    border: 1px solid rgba(26, 29, 33, 0.14);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 0.78rem;
    padding: 2px 5px;
    width: 42px;
    text-align: center;
    margin: 0 3px;
}

/* --- Custos --- */
/* Aviso: reforça que o usuário precisa incluir os demais custos */
.sim-costs-note {
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--text-sub);
    background: rgba(138, 90, 0, 0.068);
    border: 1px solid rgba(138, 90, 0, 0.3);
    border-radius: 6px;
    padding: 7px 10px;
    margin: 4px 0 12px;
}
.sim-costs-note b { color: var(--accent-gold); font-weight: 800; }

.sim-costs-table { font-size: 0.78rem; }

.sim-cost-header {
    display: grid;
    grid-template-columns: 1fr 80px 140px;
    color: var(--text-dim);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0 4px 8px;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
    margin-bottom: 4px;
}

.sim-cost-row {
    display: grid;
    grid-template-columns: 1fr 80px 140px;
    align-items: center;
    padding: 5px 4px;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
    color: #3a4049;
    font-size: 0.82rem;
}
.sim-cost-row:hover { background: rgba(26, 29, 33, 0.03); }
.sim-cost-row-fixed { color: var(--text-dim); }

/* Aviso explicativo abaixo de um item de custo (IPTU, Condomínio) */
.sim-cost-hint {
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--text-dim);
    padding: 3px 4px 7px 6px;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
}
.sim-cost-hint b { color: var(--accent-gold); font-weight: 700; }

.sim-pct-input {
    background: rgba(26, 29, 33, 0.05);
    border: 1px solid rgba(26, 29, 33, 0.14);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 0.8rem;
    padding: 4px 8px;
    width: 64px;
    text-align: center;
}
.sim-pct-input:focus { outline: none; border-color: var(--accent-blue); }

.sim-fixed-input {
    background: rgba(26, 29, 33, 0.04);
    border: 1px solid rgba(26, 29, 33, 0.1);
    border-radius: 4px;
    color: #5a6270;
    font-size: 0.8rem;
    padding: 4px 8px;
    width: 130px;
    text-align: right;
}
.sim-fixed-input:focus { outline: none; border-color: rgba(26, 29, 33, 0.14); color: var(--text-main); }

.sim-dash { color: var(--text-dim); text-align: center; }

.sim-cost-val { text-align: right; font-weight: 600; color: #c0372f; }

.sim-cost-total {
    display: grid;
    grid-template-columns: 1fr 140px;
    align-items: center;
    padding: 8px 4px 4px;
    margin-top: 6px;
    border-top: 2px solid var(--accent-red);
    font-weight: 800;
    color: var(--text-main);
    font-size: 0.88rem;
}
.sim-cost-total span:last-child {
    text-align: right;
    color: var(--accent-red);
    font-size: 0.92rem;
}

/* --- Análise --- */
.sim-analysis-table { font-size: 0.8rem; }

.sim-ana-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
    color: #3a4049;
}
.sim-ana-row span:last-child { font-weight: 700; }

.sim-ana-green { background: rgba(15, 122, 74, 0.068); border-radius: 5px; }
.sim-ana-green span:last-child { color: var(--accent-green); }

.sim-ana-red { background: rgba(192, 55, 47, 0.06); border-radius: 5px; }
.sim-ana-red span:last-child { color: var(--accent-red); }

.sim-ana-gold { background: rgba(138, 90, 0, 0.068); border-radius: 5px; }
.sim-ana-gold span:last-child { color: var(--accent-gold); }

.sim-ana-big { font-size: 0.9rem; padding: 8px 6px; }
.sim-ana-big span:first-child { font-weight: 700; color: var(--text-main); }
.sim-ana-big span:last-child { font-size: 1rem; }

/* Financing rows — hidden by default, shown for financeable props */
.sim-financing-row { display: none; }

/* Fluxo rows — orange accent for own capital vs bank */
.sim-ana-orange { background: rgba(138, 90, 0, 0.085); border-radius: 5px; }
.sim-ana-orange span:last-child { color: #8a5a00; font-weight: 700; }

/* Visual separator before Lucro Bruto in financing mode */
.sim-ana-separator { border-top: 1px solid rgba(26, 29, 33, 0.14); margin: 4px 0; }

/* Entrada row highlight when financing active */
.sim-entrada-active {
    background: rgba(15, 122, 74, 0.051);
    border-radius: 6px;
    padding: 4px 6px !important;
    border: 1px solid rgba(15, 122, 74, 0.24);
}

/* "Voltar aos valores iniciais": entre o cabeçalho e o corpo do simulador (o corpo é uma
   grade com linhas fixas; dentro dele a faixa brigaria com as seções). Em 375 px quebra em
   duas linhas, com o botão inteiro embaixo. */
.sim-ajustes {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin: 8px 16px 0;
    padding: 6px 6px 6px 12px;
    border: 1px solid rgba(180, 96, 10, 0.36);
    border-radius: 10px;
    background: rgba(180, 96, 10, 0.085);
    font-size: 0.85rem;
    color: var(--text-main);
}
.sim-ajustes[hidden] { display: none; }
.sim-ajustes-botao {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(180, 96, 10, 0.54);
    border-radius: 8px;
    background: none;
    color: var(--acao-texto);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
@media (max-width: 680px) {
    .modal-content-simulator { max-height: 100dvh; border-radius: 0; width: 100%; }
    #simulator-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 10px 12px;
        row-gap: 14px;
        column-gap: 0;
    }
    /* Ordem mobile: Valores → Custos → Análise (custos antes do resultado) */
    .sim-section-valores { grid-column: 1; grid-row: 1; padding-right: 0; order: 1; }
    .sim-section-custos  { grid-column: 1; grid-row: 2; padding-left: 0; order: 2;
                            border-left: none; border-top: 1px solid rgba(26, 29, 33, 0.1);
                            padding-top: 14px; }
    .sim-section-analise { grid-column: 1; grid-row: 3; padding-right: 0; order: 3;
                            border-top: 1px solid rgba(26, 29, 33, 0.1);
                            padding-top: 14px; }

    .sim-ajustes { margin: 8px 12px 0; }
    .sim-cost-header,
    .sim-cost-row { grid-template-columns: 1fr 55px 90px; font-size: 0.68rem; }
    .sim-fixed-input { width: 85px; }
    .sim-pct-input   { width: 45px; }
    .sim-cost-total  { grid-template-columns: 1fr 90px; }
    .sim-input-main,
    .sim-input-compra { width: 135px; }
    .sim-val-row { font-size: 0.74rem; padding: 2px 0; }
    .sim-ana-row { font-size: 0.74rem; padding: 3px 5px; }
    .sim-ana-big { font-size: 0.82rem; padding: 6px 5px; }
    .sim-costs-table { font-size: 0.72rem; }
}

/* ===== MAP VIEW ===== */
#map-container {
    width: 100%;
    /* A altura que sobra na tela embaixo da parte presa do topo (`--altura-do-mapa`, medida em
       `_medirTopoDaLista`); antes de medir, a conta antiga. O topo cresceu com a trilha, o título
       e os atalhos, e com a altura fixa o rodapé do mapa caía fora da tela. */
    height: var(--altura-do-mapa, calc(100vh - 140px));
    min-height: 320px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(26, 29, 33, 0.1);
    position: relative;
    /* Confina os z-index internos do Leaflet (tiles/panes/controles vão até
       1000, o mesmo do header). Sem isto, os controles do mapa competem no
       contexto raiz e vazam por cima do header/abas ao rolar no mobile. */
    isolation: isolate;
}

.view-toggle-group {
    display: flex;
    gap: 4px;
    background: rgba(26, 29, 33, 0.05);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid rgba(26, 29, 33, 0.1);
}

.view-toggle-btn {
    background: transparent;
    border: none;
    color: rgba(26, 29, 33, 0.8);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggle-btn.active {
    background: rgba(26, 29, 33, 0.06);
    color: #1a1d21;
}

.view-toggle-btn:hover:not(.active) {
    color: rgba(26, 29, 33, 1);
}

/* ── Topo da lista (spec do filtro novo, seção 9): trilha, título com o total, "Ver no mapa" e
   "Salvar esta busca", e embaixo das abas a fila de atalhos com o Ordenar no fim. Antes da lista
   de pisos do celular de propósito: no empate de especificidade, o piso vem depois e vence. */
.topo-lista { margin-bottom: 12px; padding: 0 5px; }
.trilha-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    color: var(--text-dim);
}
.trilha-item { display: inline-flex; align-items: center; min-width: 0; }
.trilha-item + .trilha-item::before { content: '›'; margin: 0 6px; color: var(--text-muted); }
.trilha-nivel {
    padding: 2px 0;
    border: none;
    background: none;
    color: var(--acao-texto);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.trilha-nivel:hover { color: var(--text-main); }
.trilha-atual { color: var(--text-sub); font-weight: 600; overflow-wrap: anywhere; }
.topo-lista-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}
.titulo-lista {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main);
    overflow-wrap: anywhere;
}
.titulo-lista:focus { outline: none; }
.topo-lista-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.topo-botao {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(26, 29, 33, 0.14);
    background: rgba(26, 29, 33, 0.04);
    color: var(--text-sub);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.topo-botao:hover { border-color: rgba(180, 96, 10, 0.22); color: var(--text-main); }
.topo-botao[hidden] { display: none; }
.trilha-nivel:focus-visible,
.topo-botao:focus-visible,
.ordenar-botao:focus-visible,
.ordenar-opcao:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.atalhos-linha { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0 5px; }
.atalhos-linha[hidden] { display: none; }
.atalhos-lista { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.atalhos-lista .pilula { white-space: nowrap; }
.ordenar { position: relative; flex: 0 0 auto; margin-left: auto; }
.ordenar-botao {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(26, 29, 33, 0.14);
    background: rgba(26, 29, 33, 0.04);
    color: var(--text-sub);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.ordenar-botao:hover,
.ordenar-botao[aria-expanded="true"] { border-color: var(--accent-blue); color: var(--text-main); }
.ordenar-prefixo { flex-shrink: 0; color: var(--text-dim); font-weight: 600; }
.ordenar-botao .ordenar-seta { flex-shrink: 0; }
.ordenar-atual { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ordenar-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 250px;
    margin: 0;
    padding: 4px;
    list-style: none;
    border-radius: 10px;
    border: 1px solid rgba(26, 29, 33, 0.14);
    background: var(--bg-mid);
    box-shadow: 0 12px 28px rgba(26, 29, 33, 0.12);
}
.ordenar-menu[hidden] { display: none; }
.ordenar-opcao {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-sub);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.ordenar-opcao:hover { background: rgba(26, 29, 33, 0.06); color: var(--text-main); }
.ordenar-opcao[aria-checked="true"] { background: rgba(180, 96, 10, 0.128); color: var(--acao-texto); }
/* As fichas dos filtros ativos fecham o bloco, embaixo dos atalhos. */
.content-topbar .active-filters-bar { margin: 10px 0 0; }

/* Celular: a fila de atalhos numa linha só, com rolagem lateral dentro dela (não empurra a lista
   para baixo nem rola a página para o lado); o Ordenar fica fora da rolagem, sempre à mão, e a
   opção longa ("Menor preço por metro quadrado") encurta com reticências no botão. Alvos de 44px. */
@media (max-width: 580px) {
    .topo-lista { margin-bottom: 8px; padding: 0; }
    .titulo-lista { font-size: 1rem; }
    .atalhos-linha { padding: 0; margin-top: 8px; }
    .atalhos-lista {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* A rolagem lateral corta o que passa da caixa: o contorno de foco da pílula (2px a 2px
           de distância) precisa de 4px de folga em volta, que a margem negativa devolve. */
        padding: 4px;
        margin: -4px;
    }
    .atalhos-lista::-webkit-scrollbar { display: none; }
    .atalhos-lista .pilula { flex-shrink: 0; }
    .ordenar { max-width: 50%; }
    .trilha-nivel,
    .topo-botao,
    .ordenar-botao,
    .ordenar-opcao { min-height: 44px; }
    .trilha-nivel { display: inline-flex; align-items: center; }
    .ordenar-menu { min-width: min(280px, calc(100vw - 32px)); }
    /* Fora da aba Lista (mapa, calendário, guia) a trilha, o título e os dois botões somem: o mapa
       pega o toque, e com eles em cima o rodapé do mapa caía fora da tela no topo da página. */
    .content-topbar.fora-da-lista .topo-lista { display: none; }

    /* Topo da lista no celular (pedido do dono, 20/10/2026: "muito bagunçado, o ordenar está
       por cima de tudo"). O Ordenar ficava no fim da fila, por cima dos atalhos que rolavam
       por baixo dele: a pílula aparecia cortada contra o botão. Agora:
       - o Ordenar abre a fila, compacto ("⇅ Maior desconto"; o "Ordenar:" continua para o
         leitor de tela), e os atalhos rolam DEPOIS dele, até a borda, com um esmaecido no fim
         que diz "tem mais para o lado";
       - "Ver no mapa" sai do topo: a aba Mapa está logo abaixo e faz o mesmo;
       - pílulas, Ordenar e fichas ficam MENORES À VISTA (32px, as fichas 30px), mas o alvo
         de toque continua com 44px: o desenho da pílula é uma camada por trás do botão, e o
         ✕ da ficha ganha uma área invisível em volta (antes ele tinha 16px de alvo). */
    #btn-topo-mapa { display: none; }
    .atalhos-linha { margin-top: 4px; gap: 0; }
    .ordenar { order: -1; margin-left: 0; max-width: 55%; padding-right: 8px; margin-right: 4px;
               border-right: 1px solid rgba(26, 29, 33, 0.14); }
    .ordenar-menu { right: auto; left: 0; }
    .ordenar-prefixo {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .ordenar-atual::before { content: '⇅ '; }
    .atalhos-lista {
        padding-right: 28px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .atalhos-linha .pilula,
    .ordenar-botao {
        position: relative;
        isolation: isolate;
        border: 0;
        background: none;
        padding: 0 12px;
    }
    .atalhos-linha .pilula::before,
    .ordenar-botao::before {
        content: '';
        position: absolute;
        inset: 6px 0;
        z-index: -1;
        border-radius: 999px;
        border: 1px solid rgba(26, 29, 33, 0.14);
        background: rgba(26, 29, 33, 0.04);
    }
    .atalhos-linha .pilula[aria-pressed="true"]::before { border-color: var(--accent-blue); background: rgba(180, 96, 10, 0.128); }
    .ordenar-botao[aria-expanded="true"]::before { border-color: var(--accent-blue); }
    .content-topbar .active-filters-bar { margin-top: 0; padding-block: 7px; gap: 6px; }
    .filter-chip { padding: 2px 6px 2px 10px; }
    .filter-chip .remove-filter { position: relative; }
    .filter-chip .remove-filter::after { content: ''; position: absolute; inset: -14px; }
    .limpar-filtros { position: relative; }
    .limpar-filtros::after { content: ''; position: absolute; inset: -7px 0; }
}

/* Map pin icon */
.map-pin {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 9px 3px;
    border-radius: 10px;
    /* As quatro cores do estado vêm do map.js (_PINO), cheias e com a mesma tinta escura.
       Opaco sempre: sobre um mapa cheio de cor, transparência é o que fazia o pino
       derreter. O anel branco e a sombra descolam o pino da tile. */
    background: var(--pin-bg, #ffa502);
    color: var(--pin-fg, #0a0f1e);
    border: 2px solid #ffffff;
    white-space: nowrap;
    box-shadow: 0 1px 5px rgba(26, 29, 33, 0.45);
    cursor: pointer;
    position: relative;
    gap: 1px;
    min-width: 44px;
    text-align: center;
}

.map-pin-type {
    font-size: 0.9rem;
    line-height: 1;
}

.map-pin-price {
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}

.map-pin::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--pin-bg, #ffa502);
}

/* Cluster icon */
.map-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* O azul cheio de antes da paleta clara, de volta (pedido do dono), com o número na
       mesma tinta dos pinos. Opaco: o verde a 22% da tentativa anterior era da cor do
       parque e da rua no OpenStreetMap, e sumia. Contraste da tinta: 10,6. */
    background: #00d2ff;
    color: #0a0f1e;
    font-weight: 800;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 5px rgba(26, 29, 33, 0.45);
}

.map-cluster--sm { width: 26px;  height: 26px;  font-size: 0.7rem; }
.map-cluster--md { width: 30px;  height: 30px;  font-size: 0.78rem; }
.map-cluster--lg { width: 36px;  height: 36px;  font-size: 0.85rem; }

/* Popup — fundo escuro para combinar com o tema do app */
.leaflet-popup-content-wrapper {
    background: #f0ece6 !important;  /* !important: evita que leaflet.css sobrescreva com #fff */
    color: #1a1d21 !important;       /* !important: garante texto claro mesmo se Leaflet sobrescrever */
    border: 1px solid rgba(26, 29, 33, 0.14);
    box-shadow: 0 4px 24px rgba(26, 29, 33, 0.12);
    border-radius: 10px;
    overflow: hidden;
    --popup-padding: 12px;
    padding: var(--popup-padding);
}

.leaflet-popup-tip {
    background: #f0ece6;
    box-shadow: none;
}

.leaflet-popup-close-button {
    /* !important needed: Leaflet sets color via inline style on this element */
    color: rgba(26, 29, 33, 0.75) !important;
}
.leaflet-popup-close-button:hover {
    color: #1a1d21 !important;
    background: transparent !important;
}

.leaflet-popup-content {
    /* Zero out Leaflet's own inner padding — our wrapper padding handles spacing */
    padding: 0;
    margin: 0;
}

.map-popup {
    font-family: 'Inter', sans-serif;
    min-width: 190px;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Linha preço + spread badge */
.map-popup-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.map-popup-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f7a4a;
    flex: 1;
    white-space: nowrap;
}

/* Spread badge inline */
.mpsb {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.mpsb--great   { background: rgba(31, 122, 90, 0.128);   color: #1f7a5a; border: 1px solid rgba(31, 122, 90, 0.36); }
.mpsb--ok      { background: rgba(15, 122, 74, 0.128); color: #0f7a4a; border: 1px solid rgba(15, 122, 74, 0.36); }
.mpsb--warn    { background: rgba(138, 90, 0, 0.128);  color: #8a5a00; border: 1px solid rgba(138, 90, 0, 0.36); }
.mpsb--bad     { background: rgba(192, 55, 47, 0.128);   color: #c0372f; border: 1px solid rgba(192, 55, 47, 0.36); }
.mpsb--unknown { background: rgba(26, 29, 33, 0.06); color: rgba(26, 29, 33, 0.7); border: 1px solid rgba(26, 29, 33, 0.14); }

.map-popup-city {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(26, 29, 33, 1);
    margin-bottom: 4px;
}
/* Pino no centro da cidade (o anúncio não diz a rua): contorno TRACEJADO em tinta, e não
   transparência -- com 60% de opacidade ele derretia na tile e parecia defeito, não
   aviso. Continua legível e diz "aproximado" pelo traço; o popup explica. */
.map-pin--aproximado { border: 2px dashed #0a0f1e; }
.map-popup-aproximado {
    margin: 2px 0 6px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(26, 29, 33, 1);
}

/* Meta: tipo + área + quartos + modalidade */
.map-popup-meta {
    font-size: 0.76rem;
    color: rgba(26, 29, 33, 0.95);
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
}

/* Badges de pagamento/ocupação */
.map-popup-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0;
}

.mpb {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}
.mpb--green { background: rgba(15, 122, 74, 0.153); color: #0f7a4a; border: 1px solid rgba(15, 122, 74, 0.36); }
.mpb--blue  { background: rgba(31, 122, 90, 0.128);   color: #1f7a5a; border: 1px solid rgba(31, 122, 90, 0.36); }
.mpb--red   { background: rgba(192, 55, 47, 0.128);   color: #c0372f; border: 1px solid rgba(192, 55, 47, 0.36); }

/* Data do leilão */
.map-popup-date {
    font-size: 0.76rem;
    color: #8a5a00;
    font-weight: 700;
    margin-bottom: 2px;
}

/* Foto (full-bleed no topo) */
.map-popup-photo {
    display: block;
    width: calc(100% + 2 * var(--popup-padding));
    height: 120px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    margin: calc(-1 * var(--popup-padding)) calc(-1 * var(--popup-padding)) 8px calc(-1 * var(--popup-padding));
}

/* Botão */
.map-popup-btn {
    margin-top: 8px;
    width: 100%;
    padding: 6px;
    background: #e4e0d9;
    color: #1a1d21;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.82rem;
}

.map-popup-btn:hover {
    background: #e4e0d9;
}

/* Linha de ações do popup: favoritar + ver detalhes lado a lado */
.map-popup-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}
.map-popup-actions .map-popup-btn {
    margin-top: 0;
    flex: 1;
}
.map-popup-fav {
    font-size: 1.1rem;
    background: rgba(26, 29, 33, 0.06);
    border: 1px solid rgba(26, 29, 33, 0.14);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    color: rgba(26, 29, 33, 0.7);
    flex-shrink: 0;
    transition: color 0.15s, transform 0.1s;
}
.map-popup-fav:hover {
    color: var(--accent-gold);
    transform: scale(1.15);
}
.map-popup-fav.active {
    color: var(--accent-gold);
    text-shadow: 0 0 8px rgba(138, 90, 0, 0.12);
}

/* Geocoding progress indicator */
#geocoding-progress {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(247, 245, 242, 0.92);
    color: #1a1d21;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(26, 29, 33, 0.14);
    pointer-events: none;
    white-space: nowrap;
}

/* =========================================================
   VISÃO CALENDÁRIO
   ========================================================= */
#calendar-container {
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
}

.cal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 12px;
    max-width: 760px;
}

.cal-month-title {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: capitalize;
    min-width: 180px;
    text-align: center;
}

.cal-nav {
    background: rgba(26, 29, 33, 0.06);
    border: 1px solid rgba(26, 29, 33, 0.14);
    border-radius: 8px;
    color: var(--text-main, #1a1d21);
    font-size: 1.2rem;
    width: 34px;
    height: 34px;
    cursor: pointer;
    line-height: 1;
}

.cal-nav:hover {
    background: rgba(26, 29, 33, 0.06);
}

.cal-direct-btn {
    margin-left: auto;
    background: rgba(15, 122, 74, 0.085);
    border: 1px solid rgba(15, 122, 74, 0.36);
    border-radius: 8px;
    color: #0f7a4a;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.cal-direct-btn:hover {
    background: rgba(15, 122, 74, 0.17);
}

.cal-direct-btn.active {
    background: rgba(15, 122, 74, 0.22);
    border-color: rgba(15, 122, 74, 0.55);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    /* Limita a largura no desktop para o calendário não ficar gigante
       (mantém células num tamanho confortável, centralizado). */
    max-width: 760px;
    margin: 0 auto;
}

.cal-dow {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    padding: 4px 0;
}

.cal-cell {
    min-height: 58px;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid transparent;
}

.cal-cell-empty {
    visibility: hidden;
}

.cal-cell-quiet {
    background: rgba(26, 29, 33, 0.02);
    color: var(--text-dim);
}

.cal-cell-has-events {
    background: rgba(180, 96, 10, 0.068);
    border-color: rgba(180, 96, 10, 0.3);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.cal-cell-has-events:hover {
    background: rgba(180, 96, 10, 0.153);
    transform: translateY(-1px);
}

.cal-cell-past {
    opacity: 0.45;
}

.cal-cell-today {
    border-color: var(--accent-gold);
}

.cal-cell-today .cal-daynum {
    color: var(--accent-gold);
    font-weight: 800;
}

.cal-cell-selected {
    background: rgba(180, 96, 10, 0.22);
    border-color: rgba(180, 96, 10, 0.55);
}

.cal-daynum {
    font-size: 0.8rem;
    font-weight: 600;
}

.cal-count {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(180, 96, 10, 0.212);
    border-radius: 10px;
    padding: 2px 7px;
    align-self: flex-start;
    white-space: nowrap;
}

/* Painel do dia — lista de mini-cards */
.cal-panel-title {
    margin-top: 16px;
    font-size: 0.9rem;
    font-weight: 800;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
}

/* Dica de interação no topo do calendário (enquanto nada está selecionado) */
.cal-click-hint {
    margin: 0 auto 12px;
    max-width: 760px;
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-sub);
    background: rgba(180, 96, 10, 0.068);
    border: 1px solid rgba(180, 96, 10, 0.24);
    border-radius: 8px;
    padding: 8px 14px;
    line-height: 1.4;
}

.cal-mini-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.cal-mini-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(26, 29, 33, 0.03);
    border: 1px solid rgba(26, 29, 33, 0.1);
    border-radius: 10px;
    padding: 10px;
    transition: border-color 0.15s, background 0.15s;
}

.cal-mini-card:hover {
    background: rgba(26, 29, 33, 0.05);
    border-color: rgba(180, 96, 10, 0.42);
}

.cal-mini-foto {
    width: 110px;
    height: 82px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.cal-mini-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cal-mini-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.cal-mini-price {
    font-weight: 800;
    font-size: 1.05rem;
}

.cal-mini-desc {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent-gold);
    background: rgba(138, 90, 0, 0.102);
    border-radius: 8px;
    padding: 1px 7px;
}

.cal-mini-est {
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 1px 7px;
}

.cal-est--great { color: var(--acao-texto); background: rgba(180, 96, 10, 0.128); }
.cal-est--ok    { color: var(--accent-green); background: rgba(15, 122, 74, 0.102); }
.cal-est--warn  { color: var(--accent-gold); background: rgba(138, 90, 0, 0.102); }
.cal-est--bad   { color: var(--accent-red); background: rgba(192, 55, 47, 0.102); }

.cal-mini-subprice {
    font-size: 0.7rem;
    color: var(--text-dim);
}

.cal-mini-local {
    font-size: 0.78rem;
    color: rgba(26, 29, 33, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-mini-meta {
    font-size: 0.72rem;
    color: var(--text-dim);
}

.cal-mini-event {
    font-size: 0.74rem;
    color: #8a5a00;
    font-weight: 600;
}

.cal-mini-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

@media (max-width: 680px) {
    #calendar-container { padding: 10px; }
    .cal-grid { gap: 3px; }
    .cal-cell { min-height: 52px; padding: 4px; }
    .cal-count { font-size: 0.62rem; padding: 1px 5px; }
    .cal-count-emoji { display: none; }
    .cal-mini-list { grid-template-columns: 1fr; }
    .cal-mini-foto { width: 84px; height: 64px; }
    .cal-header { flex-wrap: wrap; }
    .cal-direct-btn { margin-left: 0; width: 100%; }
}

/* =========================================================
   SIMULADOR — Custo do Financiamento
   ========================================================= */
.sim-fin-block {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: rgba(15, 122, 74, 0.043);
    border: 1px solid rgba(15, 122, 74, 0.18);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 4px;
}

.sim-fin-block-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-green);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sim-fin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.sim-fin-grid label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.62rem;
    color: var(--text-dim);
}

.sim-fin-input {
    background: rgba(26, 29, 33, 0.05);
    border: 1px solid rgba(26, 29, 33, 0.14);
    border-radius: 6px;
    color: #1a1d21;
    font-size: 0.75rem;
    padding: 4px 6px;
    width: 100%;
}

.sim-fin-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.sim-fin-note {
    font-size: 0.58rem;
    color: var(--text-dim);
    font-style: italic;
}

/* Tabela de parcelas do financiamento (expansível) */
.sim-parcelas {
    margin-top: 8px;
}
.sim-parcelas > summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--acao-texto);
    padding: 5px 0;
    user-select: none;
}
.sim-parcelas > summary::-webkit-details-marker { display: none; }
.sim-parcelas > summary::before { content: '▸ '; }
.sim-parcelas[open] > summary::before { content: '▾ '; }
.sim-parcelas-body {
    overflow-x: auto;
}
.sim-parcelas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}
.sim-parcelas-table th,
.sim-parcelas-table td {
    padding: 3px 6px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid rgba(26, 29, 33, 0.1);
}
.sim-parcelas-table th {
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.54rem;
    letter-spacing: 0.2px;
}
.sim-parcelas-table th:first-child,
.sim-parcelas-table td:first-child {
    text-align: center;
    color: var(--text-dim);
}
.sim-parcelas-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.62rem;
    color: var(--text-dim);
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(26, 29, 33, 0.1);
}
.sim-parcelas-foot b { color: var(--accent-gold); font-weight: 800; }
.sim-parcelas-legenda { color: var(--text-sub); }
.sim-parcelas-legenda b { color: var(--accent-gold); }

/* Coluna de Custo em destaque (o dado mais importante da tabela) */
.sim-parcelas-table th.sim-parcelas-custo { color: var(--accent-gold); }
.sim-parcelas-table td.sim-parcelas-custo {
    color: var(--accent-gold);
    font-weight: 800;
    background: rgba(138, 90, 0, 0.06);
}

/* Campo-chave do financiamento: "Meses até revenda" em destaque (largura
   total na grade, acento dourado) — é o dado que mais muda o resultado. */
.sim-fin-key {
    grid-column: 1 / -1;
    background: rgba(138, 90, 0, 0.076);
    border: 1px solid rgba(138, 90, 0, 0.42);
    border-radius: 6px;
    padding: 6px 8px;
    gap: 3px !important;
}
.sim-fin-label-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    color: var(--text-sub);
    font-weight: 700;
    font-size: 0.66rem;
}
.sim-fin-tag {
    font-size: 0.52rem;
    font-weight: 800;
    color: var(--accent-gold);
    background: rgba(138, 90, 0, 0.128);
    border-radius: 10px;
    padding: 1px 7px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.sim-fin-key .sim-fin-input {
    max-width: 130px;
    border-color: rgba(138, 90, 0, 0.55);
}
.sim-fin-hint {
    font-size: 0.56rem;
    color: var(--text-dim);
    line-height: 1.4;
}

/* Fim da lista paginada (o botão "Carregar mais" fica junto da sentinela, mais abaixo).
   Antes da lista de pisos do celular de propósito: no empate de especificidade, a regra
   que vem depois vence, e o piso de 12,5px precisa vencer. */
.lista-fim {
    margin: 16px 0 4px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELULAR — legibilidade e alvos de toque
   Medido em 375x812 com PR (422 imóveis) em 29/09/2026: 7.696 trechos de texto
   abaixo de 12px (3.510 em 9px, 1.657 em 8px) e 118 dos 120 controles do painel
   de filtros abaixo de 44px (cidade 22px, checkbox 16px).
   Dois pisos, para não inflar a altura do card — que foi decidido manter como está:
   12,5px no texto que se lê e 11px em selos curtos, quase todos em caixa alta.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 580px) {
    .alert-card-desc,
    .alert-card-meta,
    .alert-countdown,
    .alert-date-separator,
    .alert-leilao-label,
    .alert-panel-controls select,
    .btn-alert-details,
    .btn-alert-open,
    .btn-analyze,
    .cal-count,
    .cal-dow,
    .cal-mini-desc,
    .cal-mini-est,
    .cal-mini-event,
    .cal-mini-meta,
    .cal-mini-subprice,
    .city-toggle,
    .comp-address,
    .detail-item label,
    .doc-link,
    .doc-nota,
    .filter-chip,
    .filter-group label,
    .last-updated-info,
    .lista-fim,
    .lugar-bairro,
    .lugar-bairros-mais,
    .lugar-resumo,
    .lugar-sugestao,
    .lugar-sugestao-nada,
    .ficha-lugar,
    .bloco-tipo-nome,
    .chave-filtro-texto strong,
    .faixa-campo-rotulo,
    .frase-preco,
    .gaveta-ver-mais,
    .pilula,
    .vendedor,
    .trilha-lista,
    .topo-botao,
    .ordenar-botao,
    .ordenar-opcao,
    .map-cluster--sm,
    .map-pin-price,
    .mm-badge,
    .modal-risk-badge,
    .modality-badge,
    .mpb,
    .mpsb,
    .overview-address span,
    .photo-preview-info .preview-loc,
    .pill-status,
    .prop-card-location span,
    .prop-location-address,
    .prop-location-meta,
    .prop-photo-ribbon,
    .prop-photo-type,
    .prop-photo-type small,
    .prop-datas,
    .prop-alertas,
    .prop-docs,
    .prop-price-aval,
    .property-table,
    .ref-bloco,
    .filtro-dica,
    .filtros-dica,
    .prop-stat-nota,
    .ref-intro,
    .ref-sub,
    .property-table td::before,
    .sim-ana-row,
    .sim-cost-header,
    .sim-cost-header, .sim-cost-row,
    .sim-cost-hint,
    .sim-costs-note,
    .sim-costs-table,
    .sim-editable-hint,
    .sim-fin-block-title,
    .sim-fin-grid label,
    .sim-fin-label-row,
    .sim-parcelas > summary,
    .sim-parcelas-foot,
    .sim-section-title,
    .sim-val-row,
    .sniper-info-footer,
    .table-discount,
    .table-discount-over,
    .table-id a,
    .table-price, .table-id {
        font-size: 0.78rem;
    }

    .alert-badge,
    .alert-discount-pill,
    .alert-price small,
    .auction-badge,
    .badge-fonte,
    .badge-source,
    .btn-reanalyze,
    .comp-bairro-badge,
    .gem-badge,
    .legal-panel-label,
    .lugar-bairro-cidade,
    .lugar-bairro-total,
    .lugar-bairros-titulo,
    .lugar-sugestao small,
    .lugar-sugestao-detalhe,
    .lugar-sugestao-total,
    .lugar-sugestao-grupo,
    .bloco-tipo-total,
    .bloco-tipo-nome--longo,
    .chave-filtro-texto small,
    .regua-ponta,
    .vendedor-total,
    .vendedores-titulo,
    .market-analysis-compact .btn-reanalyze,
    .modal-section-title,
    .overview-item label,
    .passo-titulo small,
    .pill-label,
    .price-drop-badge,
    .price-new-badge,
    .prop-price-label,
    .prop-risk-badge,
    .prop-stat-label,
    .prop-faixa-titulo,
    .property-table th,
    .ref-conferir,
    .ref-origem,
    .sim-fin-hint,
    .sim-fin-note,
    .sim-fin-tag,
    .sim-parcelas-table,
    .sim-parcelas-table th {
        font-size: 0.69rem;
    }

    /* Alvos de toque: 44px é o mínimo confortável para o dedo */
    .city-toggle {
        min-height: 44px;
    }
    .mais-filtros summary {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
    .ref-conferir {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-inline: 14px;
    }
    /* A ficha do filtro ativo é só rótulo: quem recebe o toque é o ✕, e o alvo de 44px dele
       vem da área invisível em volta (ver "Topo da lista no celular"). A ficha pode ser baixa. */
    .filter-chip {
        min-height: 30px;
    }
    .mobile-menu-btn {
        min-height: 44px;
        padding-inline: 14px;
    }
    #search-input,
    .sidebar select {
        min-height: 44px;
    }
    /* "Onde?": cada sugestão, o ✕ de cada ficha, cada linha de bairro e "Ver todos" com 44px.
       O campo já ganha os 44px pela regra dos campos de texto da gaveta, logo abaixo. */
    .lugar-sugestao,
    .lugar-bairro,
    .lugar-bairros-mais {
        min-height: 44px;
    }
    .ficha-lugar { padding-block: 0; }
    /* Gaveta: pílulas, "Ver todos", linhas de vendedor e as pegas da régua de preço com 44px. Os
       blocos de tipo já têm 64px; as chaves ganham os 44px pela regra dos rótulos com caixinha. */
    .pilula,
    .gaveta-ver-mais,
    .vendedor {
        min-height: 44px;
    }
    #passo-quanto { --pega: 44px; --pega-borda: 11px; }
    .ficha-lugar-tirar {
        width: 44px;
        height: 44px;
        margin-right: -4px;
        background: none;
    }
    /* :not(.toggle-switch input) — o interruptor tem um checkbox escondido dentro do
       label; redimensioná-lo desmonta o desenho da chave. */
    .sidebar input[type="checkbox"]:not(.toggle-switch input) {
        width: 22px;
        height: 22px;
    }
    /* Régua de preço (e todo range da gaveta): a trilha continua fina, mas a área de toque vai a 44px */
    .sidebar input[type="range"] {
        height: 44px;
    }
    .sidebar input[type="number"],
    .sidebar input[type="text"] {
        min-height: 44px;
    }
    /* O rótulo inteiro vira área de toque do checkbox */
    .sidebar label:has(input[type="checkbox"]):not(.toggle-switch) {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    /* Zoom do mapa: o padrão do Leaflet é 30px. O leaflet.css carrega DEPOIS do
       style.css, então empate de especificidade perde — daí a classe no <a>. */
    .leaflet-touch .leaflet-control-zoom a.leaflet-control-zoom-in,
    .leaflet-touch .leaflet-control-zoom a.leaflet-control-zoom-out,
    .leaflet-control-zoom a.leaflet-control-zoom-in,
    .leaflet-control-zoom a.leaflet-control-zoom-out {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 1.3rem;
    }
}

/* Dica de filtro por área, sobre o mapa. Fica embaixo para não cobrir os pins nem os
   controles de zoom, e vira botão: clicar leva para a lista já filtrada. */
.map-dica-area {
    /* `fixed`, não `absolute`: o mapa pode ser mais alto que a área visível (o piso de
       min-height numa tela baixa), e preso ao rodapé do CONTÊINER a faixa caía fora da tela.
       Fica escondida junto com o mapa, porque é filha de um contêiner display:none. */
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    /* 1000 como o aviso de geocodificação: os panes do Leaflet sobem até ~800 e
       engoliam a faixa quando ela ficava abaixo disso. */
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--card-border-hover);
    background: #ffffff;
    color: var(--text-sub);
    font-size: 0.82rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(26, 29, 33, 0.12);
    backdrop-filter: blur(6px);
}

.map-dica-area strong { color: var(--text-main); }

.map-dica-area .map-dica-acao {
    color: var(--acao-texto);
    font-weight: 600;
}

.map-dica-area:hover {
    border-color: var(--accent-blue);
    background: rgba(240, 236, 230, 0.96);
}

@media (max-width: 580px) {
    .map-dica-area {
        font-size: 0.76rem;
        padding: 9px 14px;
        gap: 8px;
        white-space: normal;
        text-align: center;
        /* deixa a faixa longe do botão de voltar ao topo, que também é fixo à direita */
        max-width: calc(100% - 96px);
        left: calc(50% - 30px);
    }
}

/* Voltar ao topo: some até o usuário rolar, e no celular fica acima da área segura */
#btn-topo {
    position: fixed;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--card-border-hover);
    background: var(--bg-mid);
    color: var(--text-main);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    box-shadow: 0 6px 20px rgba(26, 29, 33, 0.12);
    z-index: 900;
}

#btn-topo.visivel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#btn-topo:hover {
    border-color: var(--accent-blue);
    color: var(--acao-texto);
}

/* Resumo em linguagem natural (card e ficha) */
.prop-resumo {
    margin: 2px 0 0;
    padding-left: 8px;
    border-left: 2px solid var(--card-border);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-sub);
}
/* Linha das praças no card: a próxima em destaque, a que já passou apagada */
/* Campo de datas: rótulo do evento (Leilão, Licitação, Venda online) e as datas por
   extenso. A próxima em destaque, a passada apagada. */
.prop-datas { font-size: 0.78rem; margin: 2px 0 0; color: var(--text-sub); line-height: 1.45; }
.prop-datas-rotulo { font-weight: 700; color: var(--text-main); margin-right: 2px; }
.prop-datas .praca-passada { opacity: .5; }
.prop-datas .praca-prox { color: var(--text-main); }

/* Linha de documentos: os anexos do lote (edital, avaliação, matrícula) como links. */
/* Documentos no card: uma linha só, que abre a ficha na lista de PDFs. Os links um a um
   ficavam bagunçados, ainda mais no celular. */
.prop-docs { font-size: 0.76rem; margin: 2px 0 0; line-height: 1.45; }
.doc-ver {
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    white-space: normal;
    color: var(--acao-texto);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
/* O piso do celular (lista lá em cima) vem ANTES da regra base acima e perderia no empate. */
@media (max-width: 580px) { .prop-datas, .prop-docs { font-size: 0.78rem; } .doc-ver { min-height: 32px; } }
.modal-resumo .resumo-texto {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-sub);
}
.modal-resumo .resumo-texto strong {
    color: var(--text-main);
}

/* "Como participar": o passo seguinte depois de entender o imóvel */
.resumo-participar {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(180, 96, 10, 0.3);
    background: rgba(180, 96, 10, 0.051);
    border-radius: 10px;
}
.resumo-participar-titulo {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--acao-texto);
    margin-bottom: 6px;
}
.resumo-participar-texto {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-sub);
}
.resumo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 10px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--accent-blue);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}
.resumo-cta:hover { filter: brightness(1.08); }


/* ── Guia (tutorial) ────────────────────────────────────────────────────── */
.guia {
    max-width: 760px;
    margin: 0 auto;
    padding: 4px 4px 48px;
}
.guia-intro h1 {
    font-size: 1.5rem;
    margin: 0 0 8px;
    color: var(--text-main);
}
.guia-intro p {
    margin: 0 0 8px;
    color: var(--text-sub);
    font-size: 0.92rem;
    line-height: 1.65;
}
.guia-secao {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--card-border);
}
.guia-secao h2 {
    font-size: 1.05rem;
    margin: 0 0 10px;
    color: var(--acao-texto);
}
.guia-secao p,
.guia-secao li {
    color: var(--text-sub);
    font-size: 0.9rem;
    line-height: 1.7;
}
.guia-secao ul,
.guia-secao ol {
    margin: 0 0 10px;
    padding-left: 20px;
}
.guia-secao li { margin-bottom: 7px; }
.guia-secao strong { color: var(--text-main); }
/* Linha de contexto dentro da célula da tabela do guia ("só nos imóveis da Caixa") */
.guia-nota-celula {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-dim);
}

.guia-tabela {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.86rem;
}
.guia-tabela th,
.guia-tabela td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: top;
    color: var(--text-sub);
}
.guia-tabela th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.guia-tabela td:first-child { white-space: nowrap; }
.guia-nota {
    border-left: 3px solid var(--card-border);
    padding-left: 12px;
    font-size: 0.85rem;
}
.guia-alerta {
    border-left: 3px solid var(--accent-gold);
    background: rgba(138, 90, 0, 0.06);
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
}
@media (max-width: 580px) {
    .guia-tabela td:first-child { white-space: normal; }
    .guia-intro h1 { font-size: 1.25rem; }
}

.resumo-guia-link {
    display: block;
    margin-top: 8px;
    background: none;
    border: none;
    padding: 6px 0;
    color: var(--acao-texto);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

/* Aviso de que o imóvel entrou na fila de análise do agente local */
.fila-mercado {
    font-size: 0.7rem;
    color: var(--accent-gold);
    font-weight: 600;
}
.fila-mercado.fila-erro {
    color: var(--accent-red);
}

/* Sentinela da renderização incremental: invisível, só serve de gatilho */
.lista-sentinela {
    height: 1px;
    margin: 0;
    padding: 0;
}

/* Fim da lista paginada: o botão pede a próxima página (para quando a sentinela não
   dispara). O botão tem o visual de .acao-secundaria; .lista-fim fica antes dos pisos do celular. */
.lista-carregar-mais {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin: 12px 0 4px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(26, 29, 33, 0.14);
    background: rgba(26, 29, 33, 0.05);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.lista-carregar-mais:hover { background: rgba(26, 29, 33, 0.06); border-color: rgba(26, 29, 33, 0.14); }
.lista-carregar-mais:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 580px) {
    .lista-carregar-mais { min-height: 44px; }
}

/* Foto do imóvel em tela cheia (toque na foto do card) */
.photo-full {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
    /* O único escuro que fica no tema claro: atrás da foto em tela cheia. Papel aqui
       roubaria o contraste justamente da foto, que é o que a pessoa abriu para ver. */
    background: rgba(26, 29, 33, 0.88);
}
.photo-full.open {
    display: flex;
}
.photo-full img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 10px;
}
.photo-full img.sem-foto {
    display: none;
}
.photo-full-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* O lightbox é escuro nos dois temas (ver .photo-full); com o fechar em tinta, ele
       ficava escuro sobre escuro, e o único jeito de sair era o Esc. */
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
}
.photo-full-close:hover { background: rgba(255, 255, 255, 0.26); }
.photo-full-legenda {
    color: #ffffff;
    font-size: 0.85rem;
    text-align: center;
}
.prop-card-photo {
    cursor: zoom-in;
}

/* Leiloeiro que não publica foto do lote: dizer isso é melhor que uma imagem quebrada
   ou — como era — um placeholder externo escrito "Foto Indisponível (Caixa)" num imóvel
   que não é da Caixa. */
.ficha-sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 140px;
    padding: 1rem;
    text-align: center;
    font-size: .9rem;
    color: var(--text-muted);
    background: rgba(90, 98, 112, 0.068);
    border: 1px dashed rgba(90, 98, 112, 0.3);
    border-radius: 10px;
}
.property-image-container.sem-foto img { display: none; }

/* Desconto vindo da regra do edital (lance mínimo da praça = fração da avaliação
   judicial), não de comparação com o mercado. O número é o mesmo e a ordenação não muda;
   o selo existe para ele não competir calado com o desconto real da Caixa. */
.selo-praca {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: 4px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    background: rgba(90, 98, 112, 0.136);
    cursor: help;
}
/* A fita na foto é o lugar onde o número grita; aqui o aviso tem de caber sem brigar. */
.prop-photo-ribbon--praca {
    /* Era ardósia a 92% no tema escuro; o teto de opacidade da conversão da paleta (feito
       para TINTE) a cortou para 22%, e a fita derretia no céu. Ardósia quase opaca de novo:
       branco sobre ela dá 6,8:1 no pior caso (foto branca atrás). */
    background: rgba(74, 81, 96, 0.94);
}
.prop-photo-ribbon--praca small {
    font-size: .58rem;
    font-weight: 600;
    opacity: .85;
    text-transform: uppercase;
}
.nota-praca {
    display: block;
    margin-top: .25rem;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--text-muted);
}

/* O mesmo desconto aparece duas vezes no card (fita da foto e ao lado do preço). Esta é
   a mais chamativa das duas; marcá-la também evita o número gritar sem explicar. */
.prop-price-disc--praca {
    background: rgba(107, 115, 130, 0.187);
    color: var(--text-dim);
}
.prop-price-disc--praca small {
    font-size: .58rem;
    font-weight: 600;
    opacity: .85;
    text-transform: uppercase;
}

/* Boas-vindas da primeira visita (web/boasvindas.js): folha no pé da tela no celular,
   caixa centralizada no desktop. Tocar no fundo escuro não fecha: é fácil acertar sem querer. */
.bv-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(26, 29, 33, 0.22);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.bv-caixa {
    width: 100%;
    max-width: 440px;
    background: var(--sidebar-bg);
    border-radius: 16px 16px 0 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    /* Teclado aberto ou celular deitado: a caixa rola em vez de empurrar "Pular" para fora. */
    max-height: 90vh;
    overflow-y: auto;
}
.bv-caixa h2 { margin: 0 0 4px; font-size: 1.2rem; }
.bv-caixa select,
.bv-caixa input { width: 100%; margin-bottom: 8px; }
.bv-pergunta { font-weight: 700; margin: 14px 0 6px; }
.bv-acoes { display: flex; gap: 8px; margin-top: 18px; }
#bv-ver { flex: 1; }
#bv-ver:disabled { opacity: .5; cursor: not-allowed; }
#bv-aviso {
    padding: 8px 12px;
    font-size: .78rem;
    background: rgba(138, 90, 0, 0.102);
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
#bv-aviso button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 0 4px;
    min-width: 32px;
    min-height: 32px;
}
@media (min-width: 581px) {
    .bv-overlay { align-items: center; }
    .bv-caixa { border-radius: 16px; }
}

/* Aviso curto no rodapé (favorito que não salvou, por exemplo). Some sozinho. */
.aviso-curto {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 16px);
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--accent-red, #c0372f);
    color: #ffffff;
    font-size: 0.9rem;
    box-shadow: 0 4px 16px rgba(26, 29, 33, 0.105);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 5000; /* acima do modal (3000) e da sidebar no celular (4000) */
}
.aviso-curto.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTA (web/conta.js): botão do topo, folha de login/cadastro e "Minha conta".
   Folha no pé da tela no celular (onde o polegar alcança), caixa centralizada no
   computador. Acima da ficha (3000) e da gaveta de filtros do celular (4000), porque
   a folha abre de dentro delas (estrela da ficha, "Salvar esta busca"); abaixo do
   aviso curto (5000).
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-conta {
    flex: none;
    min-height: 44px; /* alvo de toque do dedo */
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--accent-blue);
    color: #ffffff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-conta[hidden] { display: none; }
.btn-conta-inicial {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    /* Neutra: a inicial é a pessoa, não uma ação (ver .btn-alert-bell). */
    background: #ffffff;
    color: var(--text-main);
    border: 1px solid var(--card-border);
    font-size: 1rem;
    font-weight: 700;
}
.btn-conta-inicial:hover { background: var(--bg-mid); }
.btn-alert-bell { flex: none; }
/* `.btn` e `.btn-star` põem display: inline-flex, que venceria o [hidden] do navegador.
   O sino some para quem não entrou; a estrela, quando o cadastro está fechado. */
.btn-alert-bell[hidden],
.btn-star[hidden] { display: none; }

/* Meus favoritos (script.js): tela cheia acima da lista e abaixo da ficha e do simulador
   (2000), que abrem a partir dos cards dela. */
.favoritos-tela {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
}
.favoritos-tela[hidden] { display: none; }
.favoritos-topo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e4e0d9;
}
.favoritos-topo h2 { margin: 0; font-size: 1.15rem; color: #1a1d21; }
.favoritos-fechar {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    cursor: pointer;
}
.favoritos-corpo {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.favoritos-item { width: 100%; max-width: 1200px; margin: 0 auto; }
/* Simulações salvas: uma linha por imóvel, tocável inteira (o alvo passa de 44 px). */
.simulacoes-lista {
    list-style: none;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}
.simulacao-linha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    min-height: 44px;
    padding: 12px 4px;
    border: 0;
    border-bottom: 1px solid #e4e0d9;
    background: none;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.simulacao-linha-fora { cursor: default; opacity: .75; }
.simulacao-titulo { font-size: 0.95rem; font-weight: 600; color: #1a1d21; overflow-wrap: anywhere; }
.simulacao-lugar { font-size: 0.8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.simulacao-retorno-rotulo { margin-top: 4px; font-size: 0.75rem; color: var(--text-dim); }
.simulacao-retorno { font-size: 1.05rem; font-weight: 800; }
.simulacao-frase { font-size: 0.82rem; line-height: 1.4; color: var(--text-dim); }
.simulacao-abrir { margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--acao-texto); }
.favoritos-aviso {
    margin: 0;
    padding: 40px 8px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dim);
}

.conta-fundo {
    position: fixed;
    inset: 0;
    z-index: 4500;
    background: rgba(26, 29, 33, 0.22);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.conta-fundo[hidden] { display: none; }
.conta-folha {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-top: 1px solid #e4e0d9;
    border-radius: 22px 22px 0 0;
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(26, 29, 33, 0.12);
    color: var(--text-main);
}
.conta-fechar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    cursor: pointer;
}
.conta-titulo {
    margin: 0 44px 6px 0;
    font-size: 1.15rem;
    color: #1a1d21;
}
.conta-texto {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-sub);
    overflow-wrap: anywhere; /* e-mail comprido no "Mandamos um e-mail para..." */
}
.conta-texto b { color: #1a1d21; }
.conta-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin-bottom: 8px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.conta-botao:disabled { opacity: .6; cursor: wait; }
.conta-botao-google { background: #ffffff; border: 1px solid var(--card-border-hover); color: var(--text-main); }
.conta-botao-email { background: #f0ece6; border: 1px solid #e4e0d9; color: var(--text-main); }
.conta-botao-principal { background: var(--accent-blue); color: #ffffff; }
.conta-botao-perigo { background: var(--accent-red); color: #ffffff; }
.conta-botao[hidden] { display: none; }
.conta-ou {
    margin: 6px 0 10px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}
/* 16px no campo: abaixo disso o iPhone dá zoom na página ao tocar. */
.conta-folha input {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #e4e0d9;
    border-radius: 10px;
    background: var(--sidebar-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 16px;
}
.conta-folha input:focus { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.conta-pe {
    margin: 8px 0 0;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-dim);
}
.conta-pe a { color: var(--acao-texto); }
/* Link que é botão (troca o passo da folha): alvo de toque alto, sem cara de botão. */
.conta-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--acao-texto);
    font: inherit;
    cursor: pointer;
}
.conta-msg {
    margin: 2px 0 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.45;
    background: rgba(15, 122, 74, 0.102);
    color: #0f7a4a;
    overflow-wrap: anywhere;
}
.conta-msg-erro { background: rgba(192, 55, 47, 0.102); color: #c0372f; }

/* Minha conta */
.conta-quem {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}
.conta-faixa {
    margin: 12px 0 6px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 122, 74, 0.48);
    border-radius: 10px;
    background: rgba(15, 122, 74, 0.102);
    color: #0f7a4a;
    font-size: 0.85rem;
}
.conta-linhas { list-style: none; margin: 6px 0 0; padding: 0; }
.conta-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 4px;
    border: 0;
    border-bottom: 1px solid #e4e0d9;
    background: none;
    color: var(--text-main);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
div.conta-linha { cursor: default; }
.conta-linha b { font-weight: 600; color: #1a1d21; }
.conta-linha > span { flex: none; color: var(--text-dim); }
.conta-sair {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border: 0;
    background: none;
    color: var(--accent-red);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

@media (min-width: 581px) {
    .conta-fundo { align-items: center; }
    .conta-folha { border-radius: 22px; border: 1px solid #e4e0d9; }
}

/* 375px: com "Entrar" ao lado do sino, a linha do topo não pode empurrar a página para o lado. */
@media (max-width: 580px) {
    .header-actions { min-width: 0; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUSCAS SALVAS (gaveta de filtros): a lista da conta, o botão de salvar e o campo do nome.
   Alvos de toque de 44 px; texto corrido de 0.85rem (piso de 12,5 px no celular).
   ═══════════════════════════════════════════════════════════════════════════ */
.filtros-salvos { margin: 4px 0 18px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.filtros-salvos[hidden] { display: none; }
.filtros-salvos-titulo {
    margin: 0 0 8px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: none;
    letter-spacing: 0;
}
.filtros-salvos-aviso { margin: 0 0 8px; font-size: 0.85rem; line-height: 1.45; color: var(--text-sub); }
.filtros-salvos-aviso[hidden] { display: none; }
.filtros-salvos-link {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--acao-texto);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.filtros-salvos-lista { list-style: none; margin: 0 0 10px; padding: 0; }
.filtros-salvos-lista:empty { display: none; }
.filtro-salvo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
}
.filtro-salvo-nome {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    background: none;
    color: var(--text-main);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.filtro-salvo-nome:hover { color: var(--acao-texto); }
.filtro-salvo-apagar {
    flex: none;
    width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--text-dim);
    font-size: 1rem;
    cursor: pointer;
}
.filtro-salvo-apagar:hover { color: var(--accent-red); }
.filtro-salvo--pergunta { flex-wrap: wrap; padding: 8px 10px; }
.filtro-salvo-pergunta {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-main);
    overflow-wrap: anywhere;
}
.filtro-salvo--pergunta .filtros-salvos-botao { flex: 1 1 0; margin: 0; }
.filtros-salvos-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--card-border-hover);
    border-radius: 10px;
    background: rgba(26, 29, 33, 0.05);
    color: var(--text-main);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.filtros-salvos-botao[hidden] { display: none; }
.filtros-salvos-botao:disabled { opacity: .6; cursor: wait; }
.filtros-salvos-botao--principal { background: var(--accent-blue); border-color: var(--accent-blue); color: #ffffff; }
.filtros-salvos-botao--perigo { background: var(--accent-red); border-color: var(--accent-red); color: #ffffff; }
.filtros-salvos-form[hidden] { display: none; }
.filtros-salvos-form label { display: block; margin-bottom: 6px; font-size: 0.85rem; color: var(--text-sub); }
.filtros-salvos-form input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--card-border-hover);
    border-radius: 10px;
    background: rgba(26, 29, 33, 0.06);
    color: var(--text-main);
    font: inherit;
    font-size: 1rem;   /* 16px: o iOS não dá zoom ao focar */
}
.filtros-salvos-erro {
    margin: 6px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(192, 55, 47, 0.102);
    color: #c0372f;
    font-size: 0.85rem;
    line-height: 1.4;
}
.filtros-salvos-erro[hidden] { display: none; }
.filtros-salvos-acoes { display: flex; gap: 8px; margin-top: 8px; }
.filtros-salvos-acoes .filtros-salvos-botao { flex: 1 1 0; }