:root{
  /* Paleta: azul como cor de marca, cinzas para estrutura.
     Tons mais saturados que a versao anterior, para dar destaque sem
     poluir -- o azul carrega a hierarquia e os cinzas sustentam o resto. */
  --fundo:#eef2f7; --superficie:#ffffff; --superficie-2:#e6ecf4;
  --borda:#d2dbe6; --borda-forte:#aebbcc;
  --texto:#0d1626; --texto-fraco:#465569; --texto-tenue:#78879b;

  --marca:#0d5bc4;            /* azul escuro: acoes e destaques */
  --marca-forte:#08428f;      /* azul mais escuro: hover */
  --marca-clara:#dce9fb;      /* azul claro: fundos de etiqueta */
  --azul-vivo:#2a8ff0;        /* azul claro vivo: acentos */

  --topo-fundo:#0b2a52;       /* barra superior em azul profundo */
  --topo-texto:#eaf2fd;
  --topo-tenue:#9dbbe0;

  --alerta:#8a5200; --alerta-fundo:#fdf0dc;
  --perigo:#a51f1f; --perigo-fundo:#fbe6e6;

  --excepcional:#0a7f57; --forte:#0d5bc4; --moderada:#8a6a00; --baixa:#697585;

  --sombra:0 1px 2px rgba(13,22,38,.07), 0 2px 6px rgba(13,22,38,.08);
  --raio:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --fundo:#0a1220; --superficie:#121d30; --superficie-2:#1a2740;
    --borda:#25344f; --borda-forte:#3a4c6c;
    --texto:#e9f0fa; --texto-fraco:#a0b0c7; --texto-tenue:#7688a3;

    --marca:#57a8ff; --marca-forte:#8cc4ff; --marca-clara:#13253f;
    --azul-vivo:#57a8ff;

    --topo-fundo:#0a1830; --topo-texto:#e9f0fa; --topo-tenue:#8fadd4;

    --alerta:#f0b45c; --alerta-fundo:#2c2312;
    --perigo:#f28b8b; --perigo-fundo:#2c1717;

    --excepcional:#3fcb96; --forte:#57a8ff; --moderada:#d9bb54; --baixa:#8b98ab;
    --sombra:0 1px 3px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.01em}
a{color:inherit}

/* ---------- topo ---------- */
.topo{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:14px 22px; background:var(--topo-fundo); color:var(--topo-texto);
  border-bottom:1px solid var(--topo-fundo); position:sticky; top:0; z-index:30;
}
.topo-marca h1{font-size:18px}
.topo-sub{font-size:12.5px; color:var(--topo-tenue)}
.topo-metricas{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap}
.metrica{text-align:right}
.metrica b{display:block; font-size:19px; font-variant-numeric:tabular-nums; line-height:1.2}
.metrica span{font-size:11.5px; color:var(--topo-tenue); text-transform:uppercase; letter-spacing:.04em}
.topo-acoes{display:flex; gap:8px}

.botao{
  border:1px solid var(--borda-forte); background:var(--superficie);
  color:var(--texto); padding:8px 14px; border-radius:8px; font-size:13.5px;
  font-weight:550; cursor:pointer; text-decoration:none; display:inline-block;
  transition:background .12s, border-color .12s;
}
.botao:hover{background:var(--superficie-2); border-color:var(--texto-tenue)}
.botao-primario{background:var(--marca); border-color:var(--marca); color:#fff}
@media (prefers-color-scheme: dark){ .botao-primario{color:#04203f} }
.botao-primario:hover{background:var(--marca-forte); border-color:var(--marca-forte)}
.botao[disabled]{opacity:.55; cursor:progress}
.botao-largo{width:100%; margin-top:4px}
/* na barra azul, o botao secundario vira contorno claro sobre o escuro */
.topo .botao{background:transparent; color:var(--topo-texto);
  border-color:rgba(255,255,255,.35)}
.topo .botao:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6)}
.topo .botao-primario{background:var(--azul-vivo); border-color:var(--azul-vivo); color:#04203f}
.topo .botao-primario:hover{background:#4da5ff; border-color:#4da5ff}

/* ---------- aviso ---------- */
.aviso{
  margin:0; padding:10px 22px; background:var(--alerta-fundo); color:var(--alerta);
  font-size:13.5px; border-bottom:1px solid var(--borda);
}
.aviso b{font-weight:650}

/* ---------- abas ---------- */
.abas{
  display:flex; gap:2px; padding:0 22px; background:var(--superficie);
  border-bottom:1px solid var(--borda); position:sticky; top:60px; z-index:25;
  overflow-x:auto;
}
.aba{
  border:0; background:none; color:var(--texto-fraco); cursor:pointer;
  padding:11px 14px; font-size:13.5px; font-weight:550; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.aba small{font-weight:400; color:var(--texto-tenue)}
.aba:hover{color:var(--texto)}
.aba.ativa{color:var(--marca); border-bottom-color:var(--marca); border-bottom-width:3px}

/* ---------- layout ---------- */
.corpo{display:grid; grid-template-columns:264px minmax(0,1fr); gap:20px; padding:20px 22px 40px; align-items:start}

/* botao de filtros: só existe em tela pequena */
.abre-filtros{display:none}
.so-celular{display:none}

@media (max-width:900px){
  .corpo{grid-template-columns:1fr; padding:12px 14px 40px}
  .topo{padding:10px 14px; gap:12px}
  .topo-metricas .metrica b{color:var(--topo-texto)}
  .topo-metricas{gap:14px; margin-left:0; width:100%; order:3}
  .topo-acoes{order:2; margin-left:auto}
  .metrica{text-align:left}
  .metrica b{font-size:17px}
  .abas{padding:0 14px; top:auto; position:static}
  .aviso{padding:9px 14px}

  .abre-filtros{
    display:flex; align-items:center; gap:8px; justify-content:center;
    position:sticky; top:0; z-index:28; width:100%;
    padding:11px 14px; border:0; border-bottom:1px solid var(--borda);
    background:var(--superficie); color:var(--marca);
    font-size:14px; font-weight:650; cursor:pointer;
  }
  .contador-filtros{
    background:var(--marca); color:#fff; border-radius:20px;
    padding:1px 8px; font-size:12px;
  }
  .so-celular{display:block}

  /* painel de filtros vira gaveta: fechado por padrão, para a lista de
     imóveis aparecer assim que a página abre */
  .filtros{
    position:fixed !important; inset:0; z-index:70; max-height:none;
    border-radius:0; overflow-y:auto; padding:16px 16px 40px;
    display:none;
  }
  .filtros.aberta{display:block}
}

.filtros{
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  padding:14px; position:sticky; top:112px; max-height:calc(100vh - 132px);
  overflow-y:auto; box-shadow:var(--sombra);
}
.filtro-grupo{margin-bottom:15px}
.filtro-grupo > label{display:block; font-size:12px; font-weight:600; color:var(--texto-fraco);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px}
.filtro-grupo input[type=search],.filtro-grupo input[type=number],
.filtro-grupo input[type=text],.filtro-grupo select,.filtro-grupo input:not([type]){
  width:100%; padding:7px 9px; border:1px solid var(--borda-forte); border-radius:7px;
  background:var(--superficie); color:var(--texto); font-size:13.5px;
}
.filtro-grupo input[type=range]{width:100%; accent-color:var(--marca)}
.par{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.caixas{display:flex; flex-direction:column; gap:3px; max-height:170px; overflow-y:auto}
.linha-caixa{display:flex; align-items:center; gap:7px; font-size:13.5px; cursor:pointer;
  color:var(--texto); padding:1px 0}
.linha-caixa input{accent-color:var(--marca); margin:0}
.linha-caixa .cont{margin-left:auto; font-size:11.5px; color:var(--texto-tenue);
  font-variant-numeric:tabular-nums}
.dica{margin:5px 0 0; font-size:11.5px; color:var(--texto-tenue); line-height:1.4}

/* ---------- resultados ---------- */
.barra-resultados{display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap}
.contagem{font-size:13.5px; color:var(--texto-fraco)}
.contagem b{color:var(--texto)}
.ordenar{margin-left:auto; font-size:12.5px; color:var(--texto-fraco); display:flex;
  align-items:center; gap:7px}
.ordenar select{padding:6px 9px; border:1px solid var(--borda-forte); border-radius:7px;
  background:var(--superficie); color:var(--texto); font-size:13px}

.lista{display:grid; gap:9px}
.dia-cabecalho{
  font-size:12px; font-weight:700; color:var(--marca); text-transform:uppercase;
  letter-spacing:.05em; padding:12px 0 6px 10px; margin-bottom:2px;
  border-left:3px solid var(--marca); border-bottom:1px solid var(--borda);
}
.dia-cabecalho .relativo{color:var(--texto-tenue); font-weight:500; text-transform:none;
  letter-spacing:0; margin-left:8px}

.cartao{
  display:grid; grid-template-columns:78px 92px minmax(0,1fr) auto;
  gap:14px; align-items:center;
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  padding:11px 13px; cursor:pointer; box-shadow:var(--sombra);
  transition:border-color .12s, transform .06s;
}
.cartao:hover{border-color:var(--marca); box-shadow:0 2px 10px rgba(13,91,196,.16); transform:translateY(-1px)}
@media (max-width:760px){
  .cartao{grid-template-columns:66px minmax(0,1fr); }
  .cartao .foto{display:none}
}

.data-bloco{text-align:center; border-right:1px solid var(--borda); padding-right:10px}
.data-dia{font-size:21px; font-weight:680; line-height:1; font-variant-numeric:tabular-nums}
.data-mes{font-size:11px; text-transform:uppercase; color:var(--texto-fraco); letter-spacing:.05em}
.data-hora{font-size:11.5px; color:var(--texto-tenue); margin-top:3px; font-variant-numeric:tabular-nums}
.data-vazia{font-size:11.5px; color:var(--texto-tenue); line-height:1.3}

.foto{width:92px; height:68px; object-fit:cover; border-radius:7px; background:var(--superficie-2);
  border:1px solid var(--borda)}

.cartao-info{min-width:0}
.cartao-titulo{font-size:14px; font-weight:600; margin:0 0 3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cartao-local{font-size:12.5px; color:var(--texto-fraco)}
.etiquetas{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px}
.etiqueta{font-size:11px; padding:2px 7px; border-radius:20px; background:var(--superficie-2);
  color:var(--texto-fraco); border:1px solid var(--borda); white-space:nowrap}
.etiqueta.destaque{background:var(--marca-clara); color:var(--marca); border-color:transparent; font-weight:600}
.etiqueta.risco{background:var(--perigo-fundo); color:var(--perigo); border-color:transparent}

.cartao-valores{text-align:right; white-space:nowrap}
.valor{font-size:16.5px; font-weight:660; font-variant-numeric:tabular-nums}
/* rotulo textual no lugar do preco ("Aberto para proposta") nao deve competir
   visualmente com os valores reais */
.valor .ausente{font-size:12.5px; font-weight:500}
.valor-rotulo{font-size:11px; color:var(--texto-tenue); text-transform:uppercase; letter-spacing:.04em}
.referencia{font-size:11.5px; color:var(--texto-tenue); text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.desconto{font-size:12.5px; font-weight:700; color:var(--excepcional)}

.selo{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  padding:3px 10px; border-radius:20px; margin-top:5px}
.selo::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.selo-excepcional{color:var(--excepcional); background:var(--marca-clara)}
.selo-forte{color:var(--forte); background:var(--marca-clara)}
.selo-moderada{color:var(--moderada); background:var(--alerta-fundo)}
.selo-baixa{color:var(--baixa); background:var(--superficie-2)}
.selo-sem{color:var(--texto-tenue); background:var(--superficie-2)}

.paginacao{display:flex; gap:6px; justify-content:center; align-items:center; margin-top:20px; flex-wrap:wrap}
.paginacao button{border:1px solid var(--borda-forte); background:var(--superficie); color:var(--texto);
  padding:6px 12px; border-radius:7px; cursor:pointer; font-size:13px}
.paginacao button[disabled]{opacity:.4; cursor:default}
.paginacao .atual{font-size:13px; color:var(--texto-fraco); padding:0 8px}

.vazio{padding:44px 20px; text-align:center; color:var(--texto-fraco);
  background:var(--superficie); border:1px dashed var(--borda-forte); border-radius:var(--raio)}
.vazio b{display:block; margin-bottom:6px; color:var(--texto); font-size:15px}

/* ---------- fontes ---------- */
.painel-fontes{grid-column:1/-1}
.tabela-fontes{width:100%; border-collapse:collapse; background:var(--superficie);
  border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; font-size:13.5px}
.tabela-fontes th,.tabela-fontes td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--borda);
  vertical-align:top}
.tabela-fontes th{background:var(--superficie-2); font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--texto-fraco); font-weight:600}
.tabela-fontes tr:last-child td{border-bottom:0}
.estado{font-weight:650; font-size:12.5px}
.estado-ok{color:var(--excepcional)} .estado-parcial{color:var(--alerta)}
.estado-bloqueada,.estado-falha{color:var(--perigo)}
.estado-suspeita{color:var(--alerta)}
.nota{font-size:12px; color:var(--texto-fraco); line-height:1.45; max-width:60ch}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(8,12,16,.55); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:60}
/* `display:flex` acima venceria o atributo hidden, deixando um modal vazio
   aberto ao carregar a pagina. Esta regra devolve a palavra final ao hidden. */
.modal[hidden]{display:none}
.modal-caixa{background:var(--superficie); border-radius:14px; max-width:660px; width:100%;
  max-height:86vh; overflow-y:auto; padding:24px; position:relative;
  border:1px solid var(--borda); box-shadow:0 18px 48px rgba(0,0,0,.28)}
.modal-fechar{position:absolute; top:12px; right:14px; border:0; background:none;
  font-size:26px; line-height:1; color:var(--texto-tenue); cursor:pointer}
.modal h2{font-size:17px; margin-bottom:4px; padding-right:28px}
.ficha{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:16px 0; font-size:13.5px}
.ficha dt{color:var(--texto-fraco)}
.ficha dd{margin:0; font-variant-numeric:tabular-nums}
.ausente{color:var(--texto-tenue); font-style:italic}
.explicacao{background:var(--superficie-2); border-radius:9px; padding:11px 13px;
  font-size:13px; color:var(--texto-fraco); margin:14px 0}
.explicacao b{color:var(--texto)}

.rodape{padding:20px 22px 34px; font-size:12.5px; color:var(--texto-tenue);
  border-top:1px solid var(--borda); max-width:96ch; line-height:1.55}

/* ---------- tela de entrada ---------- */
.entrada{
  position:fixed; inset:0; z-index:100; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg, var(--topo-fundo) 0%, #071a33 100%);
}
.entrada[hidden]{display:none}
.entrada-caixa{
  background:var(--superficie); border-radius:14px; padding:28px 26px;
  width:100%; max-width:380px; box-shadow:0 18px 48px rgba(0,0,0,.35);
}
.entrada-marca{font-size:20px; font-weight:680; letter-spacing:-.01em}
.entrada-sub{font-size:13px; color:var(--texto-fraco); margin:4px 0 20px}
.entrada-campo{margin-bottom:12px}
.entrada-campo label{display:block; font-size:12px; font-weight:600;
  color:var(--texto-fraco); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px}
.entrada-campo input{
  width:100%; padding:10px 11px; border:1px solid var(--borda-forte);
  border-radius:8px; background:var(--superficie); color:var(--texto); font-size:14px;
}
.entrada-campo input:focus{outline:2px solid var(--marca); outline-offset:-1px; border-color:var(--marca)}
.entrada-erro{
  background:var(--perigo-fundo); color:var(--perigo); font-size:13px;
  padding:9px 11px; border-radius:8px; margin-bottom:12px; line-height:1.4;
}
.entrada-erro[hidden]{display:none}
.entrada-nota{font-size:11.5px; color:var(--texto-tenue); margin-top:16px; line-height:1.5}

.usuario{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--topo-tenue)}
.usuario b{color:var(--topo-texto); font-weight:600}