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

    /* Base - profundo mas não totalmente preto */
    --bg-dark: #080b12;
    --bg-mid: #0e1420;
    --sidebar-bg: #0c1119;
    --card-bg: rgba(255, 255, 255, 0.035);
    --card-bg-hover: rgba(255, 255, 255, 0.06);
    --card-border: rgba(255, 255, 255, 0.07);
    --card-border-hover: rgba(255, 255, 255, 0.15);

    /* Acentos - mais frios e sofisticados */
    --accent-blue: #3b82f6;
    --accent-blue-glow: rgba(59, 130, 246, 0.3);
    --accent-green: #10b981;
    --accent-green-glow: rgba(16, 185, 129, 0.25);
    --accent-red: #f43f5e;
    --accent-red-glow: rgba(244, 63, 94, 0.25);
    --accent-gold: #f59e0b;
    --accent-gold-glow: rgba(245, 158, 11, 0.3);
    --accent-purple: #8b5cf6;

    /* Tipografia - hierarquia clara */
    --text-main: #e2e8f0;
    --text-sub: #cbd5e1;
    /* Escala de contraste medida sobre o fundo do card (#12161f), mínimo 4,5:1 para
       texto pequeno: main 15,3:1 · sub 12,7:1 · dim 7,1:1 · muted 5,2:1.
       Antes dim era #64748b (3,8:1) e muted #334155 (1,7:1) — o `muted` aparecia em
       rótulo de 10px e no estado das pílulas de pagamento, praticamente invisível. */
    --text-dim: #94a3b8;
    --text-muted: #7c8ba1;

    --header-height: 66px;
    --sidebar-width: 300px;
    --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);
    background-image:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(59,130,246,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(139,92,246,0.04) 0%, transparent 60%);
    background-attachment: fixed;
    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(8, 11, 18, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.4);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    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;
}

.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 */
.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.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(0,0,0,0.25);
    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-num { width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; font-size: 0.66rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.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(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid var(--card-border);
}

.city-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255,255,255,0.07);
    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);
}

.city-toggle:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--text-main);
}

.city-toggle.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    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(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--text-main);
    font-size: 0.78rem;
    line-height: 1.45;
}
.filtros-dica[hidden] { display: none; }
.filtros-dica-fechar {
    flex: none;
    min-width: 32px;
    min-height: 32px;
    margin: -6px -6px 0 0;
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 0.9rem;
    cursor: pointer;
}

.bairro-filter-search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 6px 10px;
    font-size: 0.72rem;
    color: var(--text-sub);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    outline: none;
}

.bairro-filter-search:focus {
    border-color: var(--accent-blue);
}

.filter-divider {
    height: 1px;
    background: var(--card-border);
    margin: 20px 0;
}

.radar-box-main {
    background: linear-gradient(to right, rgba(52, 152, 219, 0.1), transparent);
    border-left: 4px solid var(--accent-blue);
    padding: 15px 12px !important;
    border-radius: 4px 10px 10px 4px;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}


.radar-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-blue);
    padding: 4px 0;
    user-select: none;
}

.radar-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-blue);
    cursor: pointer;
    flex-shrink: 0;
}

.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(255,255,255,0.1);
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid rgba(255,255,255,0.15);
}

.slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: #fff;
    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(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 0.72rem;
    color: var(--text-sub);
    transition: all 0.2s;
}

.filter-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-dim);
}

.filter-chip .remove-filter {
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    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(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
}

th.sortable.active-sort {
    color: var(--accent-blue) !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;
}

/* 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. */
.content-topbar {
    position: sticky;
    top: 0;
    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;
}

.results-info h2 {
    font-size: 1.1rem;
    color: var(--text-main);
    font-weight: 700;
}

.results-info h2 span {
    color: var(--accent-blue);
}

.batch-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* "Simular" e os demais botões de ação secundária nunca tiveram regra própria: usavam
   o botão padrão do navegador — cinza-claro antes, e cinza-médio com borda branca
   depois que o tema ganhou `color-scheme: dark`. Mesmo tratamento do "Mapa". */
.btn-mining {
    background: rgba(255,255,255,0.04);
    color: var(--text-sub);
    border: 1px solid rgba(255,255,255,0.08);
}

.btn-mining:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: var(--text-main);
}

.btn-mining:active {
    transform: translateY(0);
}

/* Novo layout para botões no Sidebar */
.sidebar-batch {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
    width: 100%;
}

.sidebar-batch .btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    font-size: 0.75rem !important; /* Força texto visível */
}

.sidebar-batch .btn span {
    font-size: 1.1rem;
    margin-right: 8px;
}

/* Ajustes na Progress Bar HUD */
.progress-bar-container {
    background: rgba(255,255,255,0.05);
    padding: 6px 15px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar {
    height: 4px;
    width: 60px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; height: 100%;
    width: var(--progress, 0%);
    background: var(--accent-gold);
    transition: width 0.3s ease;
}

#analysis-progress-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-gold);
}

/* GEM Badge */
.gem-badge {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #000;
    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(241, 196, 15, 0.4);
    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.52rem;
    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(244,63,94,0.12);  color: var(--accent-red);   border: 1px solid rgba(244,63,94,0.4);  animation: pulse-red 2s infinite; }
.badge-urg-yellow { background: rgba(245,158,11,0.12); color: var(--accent-gold);  border: 1px solid rgba(245,158,11,0.4); }
.badge-urg-green  { background: rgba(16,185,129,0.12); color: var(--accent-green); border: 1px solid rgba(16,185,129,0.4); }
.badge-urg-blue   { background: rgba(59,130,246,0.10); color: var(--accent-blue);  border: 1px solid rgba(59,130,246,0.3); }
.badge-urg-dim    { background: rgba(100,116,139,0.10); color: var(--text-dim);   border: 1px solid rgba(100,116,139,0.25); }
.badge-encerrado  { background: rgba(100,116,139,0.18); color: var(--text-dim);   border: 1px dashed rgba(100,116,139,0.55); }

/* Badge de fonte do imóvel (Caixa vs. leiloeiro parceiro, ex.: Zuk) */
.badge-fonte {
    display: inline-block;
    font-size: 0.52rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    align-self: flex-start;
}
.badge-caixa { background: rgba(59,130,246,0.10);  color: var(--accent-blue);   border: 1px solid rgba(59,130,246,0.3); }
/* Leiloeiro: a matiz vem do script (--fonte-h), uma por leiloeiro. */
.badge-leiloeiro {
    background: hsl(var(--fonte-h, 270) 60% 55% / 0.14);
    color: hsl(var(--fonte-h, 270) 75% 74%);
    border: 1px solid hsl(var(--fonte-h, 270) 60% 55% / 0.45);
}
.badge-zuk   { background: rgba(139,92,246,0.12);  color: var(--accent-purple); border: 1px solid rgba(139,92,246,0.4); }

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

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

@keyframes pulse-red {
    0% { border-color: rgba(255, 71, 87, 0.3); }
    50% { border-color: rgba(255, 71, 87, 1); }
    100% { border-color: rgba(255, 71, 87, 0.3); }
}

/* 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(255,255,255,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;
}

/* Table View Styling (Ultra High Density) */
.table-container {
    background: rgba(14, 20, 32, 0.6);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    overflow-x: visible;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.03) 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(255,255,255,0.04);
    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(255,255,255,0.08);
    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(0, 0, 0, 0.4);
    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(255, 255, 255, 0.015);
}

/* Hover na linha */
.property-table tbody tr:hover:not(.row-hot):not(.row-removed) {
    background: rgba(59, 130, 246, 0.06) !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(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.4);
    color: var(--accent-blue);
    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(52, 152, 219, 0.4);
    transform: translateY(-2px);
}

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

.btn-analyze {
    background: transparent;
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    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), #2563eb);
    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(255,255,255,0.04);
    color: var(--text-sub);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
}

.btn-refresh:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: var(--text-main);
}

/* ── Botões de ação (card, ficha, Top Oportunidades): um sistema só ──
   Eram quatro classes misturadas (btn-primary, btn-mining, btn-refresh, btn-caixa),
   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;
    font-size: 0.78rem;
    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; }
.acao-primaria {
    background: linear-gradient(135deg, var(--accent-blue), #2563eb);
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-blue-glow);
}
.acao-primaria:hover { filter: brightness(1.08); box-shadow: 0 6px 18px var(--accent-blue-glow); }
.acao-secundaria {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.16);
}
.acao-secundaria:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.26); }
.acao-externa {
    background: linear-gradient(135deg, #FF9F00, #FF6F00);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 159, 0, 0.3);
}
.acao-externa:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(255, 159, 0, 0.45); }
.acao-compacta { min-height: 34px; padding: 0 10px; font-size: 0.72rem; }

/* 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); }

.last-updated-info {
    font-size: 0.72rem;
    color: var(--text-sub);
    white-space: nowrap;
    opacity: 0.7;
    align-self: center;
}

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

.modal-content {
    background: #161a21;
    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;
}

.detail-item {
    background: rgba(255,255,255,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: #1e242e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    border-radius: 15px;
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.analysis-result-box h3 {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.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: #000;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--accent-blue);
}

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

.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(0,0,0,0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modality-badge.venda-online { background: #27ae60; }
.modality-badge.leilao { background: #f39c12; }
.modality-badge.venda-direta { background: #2980b9; }

/* 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(46, 204, 113, 0.2);
    color: #2ecc71;
    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(--accent-blue);
}

/* 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(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.16);
    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(241, 196, 15, 0.5);
}

.btn-star.active {
    color: var(--accent-gold);
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.55);
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.4);
}

/* Favorito no modal de detalhes — tamanho maior que nos cards */
.modal-fav-btn {
    font-size: 0.82rem;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.4);
    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(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

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

.notes-textarea {
    width: 100%;
    min-height: 120px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    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(16, 185, 129, 0.06) !important;
    border-left: 3px solid var(--accent-green);
    box-shadow: inset 3px 0 12px rgba(16, 185, 129, 0.08);
}

/* 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(255, 71, 87, 0.04) !important;
    border-left: 3px solid rgba(255, 71, 87, 0.5);
    opacity: 0.7;
}

.property-table tbody tr.row-removed:hover {
    opacity: 0.9;
    background: rgba(255, 71, 87, 0.08) !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(0, 0, 0, 0.6);
    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;
}

/* Heatmap Legend */
.heatmap-legend {
    display: flex;
    gap: 15px;
    margin-top: 5px;
}

.legend-item {
    font-size: 0.65rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 5px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot.hot {
    background: #2ecc71;
    box-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
}

.dot.cold {
    background: rgba(255, 255, 255, 0.3);
}

/* ROI Opportunity Badge inside Table */
.roi-badge {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #000;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 2px 5px;
    border-radius: 4px;
    margin-top: 5px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-gem 2s infinite;
}

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

.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(255, 255, 255, 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(255, 255, 255, 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(46, 204, 113, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
}

.comp-address {
    font-size: 0.68rem;
    color: #fff;
    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: #fff;
    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(0, 132, 255, 0.2);
    color: var(--accent-blue);
    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(0,0,0,0.5);
    }

    .sidebar.open {
        left: 0;
    }

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

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

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

    .batch-controls {
        width: 100%;
        justify-content: space-between;
    }
}

@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(59, 130, 246, 0.15);
        border: 1px solid rgba(59, 130, 246, 0.45);
        color: #fff;
        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(255, 255, 255, 0.08); /* 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(255, 255, 255, 0.05); /* Um pouco mais claro no mobile */
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        margin-bottom: 15px;
        position: relative;
        padding: 8px 0;
    }

    .property-table td {
        border: none;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
        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(--accent-blue); /* 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(0, 0, 0, 0.2);
        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: #080b12; /* Fundo mais denso */
    }
    
    .alert-card {
        background: rgba(255, 255, 255, 0.07); /* Mais visível */
        border-color: rgba(255, 255, 255, 0.12);
    }
    
    .alert-panel-header {
        background: rgba(245, 158, 11, 0.1); /* 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;
    }

    /* Força texto visível nos botões de ferramentas dentro do sidebar mobile */
    .sidebar-batch .btn {
        font-size: 0.75rem !important;
    }

    /* 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). */
    /* Sem padding no topo do content: o bloco fixo cola sob o header, sem
       um vão onde o conteúdo rolado apareceria. */
    .content {
        padding-top: 0;
    }
    .content-topbar {
        position: sticky;
        top: 0;
        z-index: 1100;
        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, #3b82f6);
    color: #fff;
    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(255,255,255,0.02);
}
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.4);
}

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

/* Badge de desconto com gradiente */
.table-discount {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.25);
    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(244, 63, 94, 0.15), rgba(244, 63, 94, 0.05));
    border: 1px solid rgba(244, 63, 94, 0.3);
    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(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    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: #fff;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: rgba(59, 130, 246, 0.04);
}

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(--accent-blue);
}

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

/* Botão sininho */
.btn-alert-bell {
    position: relative;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--accent-gold);
    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: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}

.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(244, 63, 94, 0.6);
    border: 1.5px solid var(--bg-dark);
    animation: badge-pulse 2s ease infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(244, 63, 94, 0.6); }
    50% { box-shadow: 0 2px 16px rgba(244, 63, 94, 0.9); }
}

/* 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(0, 0, 0, 0.7); /* 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: #0d1117;
    border-left: 1px solid rgba(245, 158, 11, 0.2);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6);
    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(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(245, 158, 11, 0.04);
    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(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    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(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    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(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.13);
}

/* Variantes de urgência */
.alert-card.urgency-red {
    border-left: 3px solid var(--accent-red);
    background: rgba(244, 63, 94, 0.05);
}
.alert-card.urgency-red:hover {
    background: rgba(244, 63, 94, 0.09);
}

.alert-card.urgency-yellow {
    border-left: 3px solid var(--accent-gold);
    background: rgba(245, 158, 11, 0.05);
}
.alert-card.urgency-yellow:hover {
    background: rgba(245, 158, 11, 0.09);
}

.alert-card.urgency-green {
    border-left: 3px solid var(--accent-green);
    background: rgba(16, 185, 129, 0.04);
}
.alert-card.urgency-green:hover {
    background: rgba(16, 185, 129, 0.08);
}

/* 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(245, 158, 11, 0.15);
    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(244, 63, 94, 0.2);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.4);
}

.urgency-yellow .alert-countdown {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.urgency-green .alert-countdown {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

/* 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(255, 255, 255, 0.05);
}

.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(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-blue);
    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(59, 130, 246, 0.35);
}

.btn-alert-details {
    font-size: 0.65rem;
    padding: 5px 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    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: #000;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.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(245, 158, 11, 0.12);
    color: var(--accent-gold);
    border: 1px solid rgba(245, 158, 11, 0.25);
    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(255, 255, 255, 0.07);
}

.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.48rem;
    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(244,63,94,0.12);  color: var(--accent-red);   border: 1px solid rgba(244,63,94,0.35); }
.badge-avista   { background: rgba(245,158,11,0.10); color: var(--accent-gold);  border: 1px solid rgba(245,158,11,0.30); }
.badge-leilao-neg { background: rgba(251,146,60,0.10); color: #fb923c; border: 1px solid rgba(251,146,60,0.30); }
.badge-fgts     { background: rgba(16,185,129,0.10); color: var(--accent-green); border: 1px solid rgba(16,185,129,0.30); }
/* Dado da fonte em contradicao: cinza-azulado, para nao competir com o risco do imovel */
.badge-uf-divergente { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.35); }
.badge-sem-pino      { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.35); }

/* 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(59,130,246,0.10); color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.35);
}
.market-link:hover { background: rgba(59,130,246,0.18); }

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

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

.prop-card {
    display: grid;
    grid-template-columns: 240px 1fr 186px;
    min-height: 150px;
    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(0,0,0,0.25);
}

.prop-card.row-hot {
    border-left: 3px solid var(--accent-gold);
    box-shadow: 0 0 14px rgba(245,158,11,0.08);
}

.prop-card-photo-wrap {
    width: 240px;
    min-height: 150px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,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(0,0,0,0.72));
    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;
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    backdrop-filter: blur(2px);
}
.prop-fav:hover { background: rgba(0, 0, 0, 0.7); color: var(--accent-gold); }
.prop-fav.active {
    background: rgba(241, 196, 15, 0.22);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

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

/* Chip de tipo + área na base da foto */
.prop-photo-type {
    position: absolute;
    left: 10px;
    bottom: 8px;
    z-index: 2;
    color: #fff;
    font-weight: 800;
    font-size: 0.74rem;
    display: flex;
    align-items: center;
    gap: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
    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 {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

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

.prop-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Selos do título na mesma linha. O selo de leilão vem dentro de um span (trocado
   ao vivo pelo id): sem flex, ele cai na linha de base do texto e fica ~6px abaixo
   do selo da fonte, que tinha align-self: flex-start. */
.prop-card-title .prop-badge-slot { display: inline-flex; align-items: center; }
.prop-card-title .auction-badge,
.prop-card-title .badge-fonte { align-self: center; }
.prop-card-title .prop-risk-badge { margin-top: 0; }

/* É link e precisa parecer link: sublinhado e com verbo ("Ver anúncio"), não só o número. */
.prop-id-link {
    font-size: 0.75rem;
    color: var(--accent-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}
.prop-id-link code { font-family: monospace; font-size: 0.72rem; }

.prop-id-link:hover {
    text-decoration: underline;
}

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

.prop-card-location strong {
    font-size: 0.8rem;
    color: var(--text-main);
    font-weight: 700;
}

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

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

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

.prop-location-bairro {
    color: var(--accent-blue);
    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);
}
.prop-price-aval b {
    color: var(--text-sub);
    font-weight: 700;
}
.prop-price-disc {
    align-self: center;
    background: var(--accent-green);
    color: #04231a;
    font-weight: 900;
    font-size: 0.75rem;
    padding: 3px 9px;
    border-radius: 8px;
}
.prop-price-disc.over {
    background: rgba(244, 63, 94, 0.15);
    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.54rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.prop-stat-value {
    font-size: 0.82rem;
    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(255,255,255,0.06);
    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.7rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-dim);
    white-space: normal;
}

.prop-card-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid var(--card-border);
    min-width: 0;
}

.prop-card-analysis {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 10px 6px;
    gap: 4px;
    text-align: center;
}

/* 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 desktop a coluna lateral tem 185px, e "Simular valores" não cabe
   em duas colunas -- os botões empilham, um por linha, com o rótulo à esquerda. */
.prop-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 6px 10px 8px;
    border-top: 1px solid var(--card-border);
}
.prop-card-actions .acao { width: 100%; justify-content: flex-start; padding: 0 10px; }

/* ============================================
   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; }

    /* Card em coluna única: foto (banner) no topo, corpo, depois painel.
       As fotos da Caixa são horizontais — no topo elas aparecem bem melhor. */
    .prop-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        min-height: unset;
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
    }

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

    /* Foto full-width no topo (banner) */
    .prop-card-photo-wrap {
        width: 100%;
        height: 190px;
        min-height: 0;
        grid-column: 1;
        grid-row: 1;
    }

    /* 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;
    }

    /* Corpo na linha 2 (abaixo da foto) */
    .prop-card-body {
        grid-column: 1;
        grid-row: 2;
        padding: 10px 12px;
        gap: 5px;
    }

    /* Painel de análise full-width na linha 3 */
    .prop-card-side {
        grid-column: 1 / -1;
        grid-row: 3;
        border-left: none;
        border-top: 1px solid var(--card-border);
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 6px 10px;
        gap: 8px;
    }

    .prop-card-analysis {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;
        gap: 4px 10px;
        justify-content: flex-start;
        text-align: left;
        align-items: center;
        flex: 1 1 100%;
    }

    /* O bloco de referência é texto corrido: ocupa a largura toda do painel, com a fila
       de botões embaixo (lado a lado, a coluna de texto ficava com ~66px). */
    .prop-card-analysis .ref-bloco { flex: 1 1 100%; min-width: 0; }

    /* No celular o painel tem a largura toda: 2×2, todos do mesmo tamanho, 44px de toque. */
    .prop-card-actions {
        border-top: none;
        padding: 0;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .prop-card-actions .acao { min-height: 44px; justify-content: center; padding: 0 8px; }
    .modal-footer .acao { min-height: 44px; }

    /* Stats em 2 colunas no mobile */
    .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;
    }
}
/* ============================================
   CARD SORT HEADER BAR
   ============================================ */

/* "Ordenar por": um controle só, com rótulo. Antes era uma fileira que imitava colunas
   ("Foto", "Aval.", "Desc%", "Spread") -- não ordenava o que dizia e falava em código. */
.ordenar-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 8px;
}
.ordenar-rotulo {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-sub);
}
.ordenar-pilulas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ordenar-pilula {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.04);
    color: var(--text-sub);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ordenar-pilula:hover { background: rgba(255,255,255,0.09); color: var(--text-main); }
.ordenar-pilula.active {
    background: rgba(59,130,246,0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}
/* No celular as pílulas quebram em duas linhas; 44px é o mínimo para o dedo. Fica
   DEPOIS do bloco base de propósito: no bloco mobile lá de cima perdia na ordem. */
@media (max-width: 580px) {
    .ordenar-pilula { min-height: 44px; }
}
/* ============================================
   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(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-risk-section {
    border-color: rgba(244,63,94,0.15);
    background: rgba(244,63,94,0.025);
}
.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(255,255,255,0.05);
}

/* 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(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    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(244,63,94,0.15);   color: var(--accent-red);   border: 1px solid rgba(244,63,94,0.4); }
.modal-risk-badge.badge-leilao-neg{ background: rgba(251,146,60,0.12);  color: #fb923c; border: 1px solid rgba(251,146,60,0.35); }

/* Legal observations panel */
.legal-panel {
    background: rgba(245,158,11,0.04);
    border: 1px solid rgba(245,158,11,0.18);
    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(59,130,246,0.3);
    background: rgba(59,130,246,0.06);
    color: var(--accent-blue);
    text-decoration: none;
}
a.doc-link:hover { background: rgba(59,130,246,0.14); }
.doc-link.doc-locked {
    color: var(--text-dim);
    background: transparent;
    border: 1px dashed rgba(100,116,139,0.4);
    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(16,185,129,0.07); border-color: rgba(16,185,129,0.28); }
.payment-pill.no  { background: rgba(100,116,139,0.04); border-color: rgba(100,116,139,0.12); 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(255,255,255,0.08); }
.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(--accent-blue);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Campo "Valor de Compra" editável — dourado para distinguir do valor de venda */
.sim-input-compra {
    background: rgba(245,158,11,0.12);
    border: 1.5px solid rgba(245,158,11,0.7);
    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(245,158,11,0.25); }

.sim-editable-hint {
    font-size: 0.65rem;
    color: rgba(245,158,11,0.8);
    font-weight: 600;
    margin-left: 4px;
    background: rgba(245,158,11,0.12);
    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(255,255,255,0.04);
}

.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: white; }
.sim-display-primary { color: var(--accent-gold); font-weight: 800; font-size: 0.95rem; }

.sim-val-highlight {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 7px;
    padding: 8px 10px !important;
    margin-top: 4px;
}
.sim-val-highlight label { color: white; font-weight: 600; }

.sim-input-main {
    background: rgba(59,130,246,0.1);
    border: 1.5px solid rgba(59,130,246,0.7);
    border-radius: 6px;
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 6px 12px;
    width: 160px;
    text-align: right;
}
.sim-input-main:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }

.sim-pct-inline {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: white;
    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(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    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(255,255,255,0.08);
    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(255,255,255,0.03);
    color: #cbd5e1;
    font-size: 0.82rem;
}
.sim-cost-row:hover { background: rgba(255,255,255,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(255,255,255,0.03);
}
.sim-cost-hint b { color: var(--accent-gold); font-weight: 700; }

.sim-pct-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: white;
    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(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 4px 8px;
    width: 130px;
    text-align: right;
}
.sim-fixed-input:focus { outline: none; border-color: rgba(255,255,255,0.2); color: white; }

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

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

.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: white;
    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(255,255,255,0.04);
    color: #cbd5e1;
}
.sim-ana-row span:last-child { font-weight: 700; }

.sim-ana-green { background: rgba(16,185,129,0.08); border-radius: 5px; }
.sim-ana-green span:last-child { color: var(--accent-green); }

.sim-ana-red { background: rgba(244,63,94,0.07); border-radius: 5px; }
.sim-ana-red span:last-child { color: var(--accent-red); }

.sim-ana-gold { background: rgba(245,158,11,0.08); 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: white; }
.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(251,146,60,0.1); border-radius: 5px; }
.sim-ana-orange span:last-child { color: #fb923c; font-weight: 700; }

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

/* Entrada row highlight when financing active */
.sim-entrada-active {
    background: rgba(16,185,129,0.06);
    border-radius: 6px;
    padding: 4px 6px !important;
    border: 1px solid rgba(16,185,129,0.2);
}

@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(255,255,255,0.08);
                            padding-top: 14px; }
    .sim-section-analise { grid-column: 1; grid-row: 3; padding-right: 0; order: 3;
                            border-top: 1px solid rgba(255,255,255,0.08);
                            padding-top: 14px; }

    .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%;
    height: calc(100vh - 140px);
    min-height: 500px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    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(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.view-toggle-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    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(255, 255, 255, 0.12);
    color: #fff;
}

.view-toggle-btn:hover:not(.active) {
    color: rgba(255, 255, 255, 0.8);
}

/* Map pin icon */
.map-pin {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 10px 4px;
    border-radius: 10px;
    color: #0a0f1e;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 1.5px rgba(255,255,255,0.25);
    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: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--pin-bg);
}

/* Cluster icon */
.map-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 210, 255, 0.82);
    color: #0a0f1e;
    font-weight: 700;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.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: #1a1f3e !important;  /* !important: evita que leaflet.css sobrescreva com #fff */
    color: #e0e6f0 !important;       /* !important: garante texto claro mesmo se Leaflet sobrescrever */
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.55);
    border-radius: 10px;
    overflow: hidden;
    --popup-padding: 12px;
    padding: var(--popup-padding);
}

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

.leaflet-popup-close-button {
    /* !important needed: Leaflet sets color via inline style on this element */
    color: rgba(255,255,255,0.45) !important;
}
.leaflet-popup-close-button:hover {
    color: #fff !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: #7bed9f;
    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(0,210,255,0.15);   color: #00d2ff; border: 1px solid rgba(0,210,255,0.3); }
.mpsb--ok      { background: rgba(123,237,159,0.15); color: #7bed9f; border: 1px solid rgba(123,237,159,0.3); }
.mpsb--warn    { background: rgba(245,158,11,0.15);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.mpsb--bad     { background: rgba(255,71,87,0.15);   color: #ff4757; border: 1px solid rgba(255,71,87,0.3); }
.mpsb--unknown { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.12); }

.map-popup-city {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 4px;
}

/* Meta: tipo + área + quartos + modalidade */
.map-popup-meta {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.65);
    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(123,237,159,0.18); color: #7bed9f; border: 1px solid rgba(123,237,159,0.3); }
.mpb--blue  { background: rgba(0,210,255,0.15);   color: #00d2ff; border: 1px solid rgba(0,210,255,0.3); }
.mpb--red   { background: rgba(255,71,87,0.15);   color: #ff4757; border: 1px solid rgba(255,71,87,0.3); }

/* Data do leilão */
.map-popup-date {
    font-size: 0.76rem;
    color: #ffa502;
    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: #2d3561;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.82rem;
}

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

/* 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(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    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(241, 196, 15, 0.4);
}

/* Geocoding progress indicator */
#geocoding-progress {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(10, 15, 30, 0.9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    white-space: nowrap;
}

/* =========================================================
   VISÃO CALENDÁRIO
   ========================================================= */
#calendar-container {
    background: #161a21;
    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(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-main, #fff);
    font-size: 1.2rem;
    width: 34px;
    height: 34px;
    cursor: pointer;
    line-height: 1;
}

.cal-nav:hover {
    background: rgba(255, 255, 255, 0.12);
}

.cal-direct-btn {
    margin-left: auto;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 8px;
    color: #2ecc71;
    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(46, 204, 113, 0.2);
}

.cal-direct-btn.active {
    background: rgba(46, 204, 113, 0.28);
    border-color: rgba(46, 204, 113, 0.6);
}

.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(255, 255, 255, 0.02);
    color: var(--text-dim);
}

.cal-cell-has-events {
    background: rgba(52, 152, 219, 0.08);
    border-color: rgba(52, 152, 219, 0.25);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.cal-cell-has-events:hover {
    background: rgba(52, 152, 219, 0.18);
    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(52, 152, 219, 0.28);
    border-color: rgba(52, 152, 219, 0.6);
}

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

.cal-count {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(52, 152, 219, 0.25);
    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(255, 255, 255, 0.08);
}

/* 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(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    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(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px;
    transition: border-color 0.15s, background 0.15s;
}

.cal-mini-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(52, 152, 219, 0.35);
}

.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(245, 158, 11, 0.12);
    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: #3498db; background: rgba(52, 152, 219, 0.15); }
.cal-est--ok    { color: var(--accent-green); background: rgba(16, 185, 129, 0.12); }
.cal-est--warn  { color: var(--accent-gold); background: rgba(245, 158, 11, 0.12); }
.cal-est--bad   { color: var(--accent-red); background: rgba(255, 71, 87, 0.12); }

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

.cal-mini-local {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    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: #ffa502;
    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(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.15);
    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(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #fff;
    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(--accent-blue);
    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(255,255,255,0.04);
}
.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(255,255,255,0.08);
}
.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(245, 158, 11, 0.07);
}

/* 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(245, 158, 11, 0.09);
    border: 1px solid rgba(245, 158, 11, 0.35);
    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(245, 158, 11, 0.15);
    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(245, 158, 11, 0.5);
}
.sim-fin-hint {
    font-size: 0.56rem;
    color: var(--text-dim);
    line-height: 1.4;
}

/* =========================================================
   TOP OPORTUNIDADES
   ========================================================= */
.top-opps-subtitle {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-top: 2px;
}

.top-opps-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.top-opps-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(52, 152, 219, 0.35);
}

.top-opps-rank {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-dim);
    min-width: 34px;
    text-align: center;
    flex-shrink: 0;
}

.top-opps-rank--gold {
    color: var(--accent-gold);
}

.top-opps-foto {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.top-opps-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top-opps-line1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.top-opps-pct {
    font-size: 1rem;
    font-weight: 800;
}

.top-opps-lucro {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.top-opps-line2 {
    font-size: 0.74rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-opps-line3 {
    font-size: 0.7rem;
}

.top-opps-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

@media (max-width: 680px) {
    .top-opps-foto { width: 56px; height: 44px; }
    .top-opps-rank { min-width: 26px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   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) {
    #analysis-progress-text,
    .alert-card-desc,
    .alert-card-meta,
    .alert-countdown,
    .alert-date-separator,
    .alert-leilao-label,
    .alert-panel-controls select,
    .bairro-filter-search,
    .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,
    .legend-item,
    .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-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,
    .top-opps-line2,
    .top-opps-line3,
    .top-opps-subtitle {
        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,
    .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,
    .property-table th,
    .ref-conferir,
    .ref-origem,
    .roi-badge,
    .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;
    }
    .filter-chip {
        min-height: 38px;
    }
    .mobile-menu-btn {
        min-height: 44px;
        padding-inline: 14px;
    }
    #search-input,
    #uf-select,
    .sidebar select,
    .bairro-filter-search {
        min-height: 44px;
    }
    /* :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;
    }
    /* Slider de desconto: 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 é mais alto que a área visível (100vh - 140px com
       min-height 500px), então 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 rgba(59, 130, 246, 0.45);
    background: rgba(14, 20, 32, 0.94);
    color: var(--text-sub);
    font-size: 0.82rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
}

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

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

.map-dica-area:hover {
    border-color: var(--accent-blue);
    background: rgba(20, 28, 44, 0.97);
}

@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(0,0,0,0.45);
    z-index: 900;
}

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

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

/* Estado filtrado, ao lado do contador: a sigla sozinha passava despercebida */
.results-uf .uf-pin { margin-right: 2px; }
.results-uf .uf-nome { margin-left: 6px; font-weight: 500; opacity: 0.85; }

/* 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.78rem;
    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.72rem; 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.72rem; 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(--accent-blue);
    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(59,130,246,0.25);
    background: rgba(59,130,246,0.06);
    border-radius: 10px;
}
.resumo-participar-titulo {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--accent-blue);
    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: #04142e;
    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(--accent-blue);
}
.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(245,158,11,0.07);
    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(--accent-blue);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

/* UF ao lado do contador: com o painel de filtros fechado, é o que diz qual estado está na tela */
.results-uf {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent-blue);
    background: rgba(75,140,247,0.12);
    border: 1px solid rgba(75,140,247,0.35);
    vertical-align: middle;
}

/* 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;
}

/* 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));
    background: rgba(2, 6, 14, 0.94);
}
.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%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}
.photo-full-legenda {
    color: rgba(255, 255, 255, 0.82);
    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(148, 163, 184, .08);
    border: 1px dashed rgba(148, 163, 184, .25);
    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(148, 163, 184, .16);
    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 {
    background: rgba(100, 116, 139, .92);
}
.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(100, 116, 139, .22);
    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(0, 0, 0, .6);
    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(224, 176, 0, .12);
    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; }
}