:root {
  --fundo: #f5f5f2;
  --painel: #ffffff;
  --texto: #1d1f1c;
  --suave: #62665f;
  --linha: #dedfd9;
  --acento: #0a8a3e;
  --acento-texto: #ffffff;
  --marca-fundo: #0c1410;
  --marca-texto: #e8f5ec;
  --marca-verde: #12e05a;
  --abaixo: #16794a;
  --abaixo-fundo: #e2f3e9;
  --acima: #b2412c;
  --acima-fundo: #f9e6e1;
  --media: #5d6168;
  --media-fundo: #ececec;
  --aviso: #8a5a00;
  --aviso-fundo: #fff3d6;
  --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
  --raio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #161816; --painel: #20231f; --texto: #e9eae6; --suave: #a3a79f; --linha: #353932;
    --acento: #3ddc7a; --acento-texto: #06210f;
    --abaixo: #6fd39f; --abaixo-fundo: #173526; --acima: #f19a87; --acima-fundo: #3d211b;
    --media: #c5c8cc; --media-fundo: #2f3234; --aviso: #f3c76a; --aviso-fundo: #3a2f12;
    --sombra: none; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--acento); }
button, input, select { font: inherit; color: inherit; }

.topo { background: var(--marca-fundo); color: var(--marca-texto); position: sticky; top: 0; z-index: 20;
  border-bottom: 2px solid var(--marca-verde); }
.topo-in { max-width: 1400px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.marca-logo { display: block; height: 56px; width: auto; }
.topo h1 { margin: 0; line-height: 0; }
.sub { margin: 4px 0 0; color: #a9bdb0; font-size: .82rem; }
.topo .btn { background: transparent; color: var(--marca-texto); border-color: #3a4a40; }

.layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding: 16px; }
main { min-width: 0; }

.filtros { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; align-self: start;
  position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
.campo { display: block; margin: 0 0 12px; font-size: .85rem; color: var(--suave); border: 0; padding: 0; min-width: 0; }
.campo legend { padding: 0; margin-bottom: 4px; }
.campo input, .campo select { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--linha);
  border-radius: 7px; background: var(--fundo); color: var(--texto); }
.campo input[type="checkbox"] { display: inline-block; width: auto; margin: 0; padding: 0; flex: none; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.checks { display: flex; flex-direction: column; gap: 4px; color: var(--texto); font-size: .9rem; }
.checks label { display: flex; gap: 6px; align-items: baseline; cursor: pointer; }
.checks .n { color: var(--suave); font-size: .8rem; margin-left: auto; }

.seg { display: flex; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 8px 10px; cursor: pointer; }
.seg button.on { background: var(--acento); color: var(--acento-texto); font-weight: 600; }
.seg.peq { margin: 0; }
.seg.peq button { padding: 6px 10px; }

.btn { border: 1px solid var(--linha); background: var(--painel); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.btn:hover { border-color: var(--acento); }
.btn.fraco { width: 100%; color: var(--suave); }

.barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.barra-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contagem { color: var(--suave); }
.ordem { font-size: .85rem; color: var(--suave); display: flex; gap: 6px; align-items: center; }
.ordem select { padding: 6px; border: 1px solid var(--linha); border-radius: 7px; background: var(--painel); }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra); display: flex; flex-direction: column; }
.cartao.saiu { opacity: .8; }
.foto { position: relative; aspect-ratio: 16 / 10; background: var(--media-fundo); display: block; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .sem { position: absolute; inset: 0; display: grid; place-items: center; color: var(--suave); font-size: .85rem; }
.selo { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.selo.abaixo { background: var(--abaixo-fundo); color: var(--abaixo); }
.selo.acima { background: var(--acima-fundo); color: var(--acima); }
.selo.media { background: var(--media-fundo); color: var(--media); }
.etiqueta { position: absolute; right: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: var(--aviso-fundo); color: var(--aviso); }
.corpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.local { font-size: .8rem; color: var(--suave); text-transform: uppercase; letter-spacing: .02em; }
.titulo { font-weight: 600; font-size: .95rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.preco { font-size: 1.25rem; font-weight: 700; }
.preco .de { font-size: .85rem; font-weight: 400; color: var(--suave); text-decoration: line-through; margin-right: 6px; }
.preco .m2 { font-size: .85rem; font-weight: 400; color: var(--suave); margin-left: 6px; }
.specs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .85rem; }
.ref { font-size: .78rem; color: var(--suave); }
.ref.fraca::after { content: " · referência fraca"; color: var(--aviso); }
.hist { font-size: .8rem; color: var(--suave); }
.hist .caiu { color: var(--abaixo); font-weight: 600; }
.hist .subiu { color: var(--acima); font-weight: 600; }
.edificio { font-size: .8rem; font-weight: 600; color: var(--acento); }
.ref .criterio { color: var(--suave); font-size: .75rem; }
.consulte { font-size: 1rem; font-weight: 400; color: var(--suave); }
.anunciantes { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 4px; font-size: .84rem; }
.anunciantes.multi { background: var(--abaixo-fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.tambem { font-size: .78rem; font-weight: 700; color: var(--abaixo); text-transform: uppercase; letter-spacing: .02em; }
.tambem .prov { font-weight: 400; text-transform: none; color: var(--suave); }
.anunc { display: flex; align-items: baseline; gap: 8px; }
.anunc .imob { font-weight: 700; }
.anunc .anunc-preco { margin-left: auto; font-variant-numeric: tabular-nums; }
.anunc a { white-space: nowrap; }
.anunc:not(:has(.anunc-preco)) a { margin-left: auto; }
.obs { font-size: .78rem; color: var(--aviso); }

.mais { text-align: center; margin: 18px 0; }

.nota { color: var(--suave); font-size: .88rem; margin-top: 0; }
.tabela-rolagem { overflow-x: auto; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { cursor: pointer; user-select: none; color: var(--suave); font-weight: 600; position: sticky; top: 0; background: var(--painel); }
tr.grupo td { background: var(--fundo); font-weight: 700; text-align: left; }
.poucos { color: var(--suave); }

.rodape { margin-top: 28px; color: var(--suave); font-size: .8rem; border-top: 1px solid var(--linha); padding-top: 12px; }
#status-coletas { margin-top: 6px; }
.vazio { color: var(--suave); padding: 40px 0; text-align: center; grid-column: 1 / -1; }

/* ---------- acesso (login / cadastro) */
.acesso { min-height: calc(100vh - 110px); display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(ellipse at top, #12301e 0%, var(--marca-fundo) 60%); color: var(--marca-texto); }
.acesso-caixa { width: 100%; max-width: 400px; text-align: center; }
.acesso-logo { width: 220px; max-width: 70%; height: auto; margin: 0 auto 8px; display: block; }
.acesso-lema { color: #a9bdb0; margin: 0 0 20px; font-size: .95rem; }
.acesso-form { background: var(--painel); color: var(--texto); border-radius: 14px; padding: 20px; text-align: left;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.acesso-form h2 { margin: 0 0 4px; font-size: 1.2rem; }
.acesso-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--suave); }
.acesso-form input:not([type=checkbox]) { padding: 10px; border: 1px solid var(--linha); border-radius: 8px;
  background: var(--fundo); color: var(--texto); font-size: 1rem; }
.campo-senha { position: relative; display: flex; }
.campo-senha input { flex: 1; padding-right: 76px !important; }
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none;
  color: var(--acento); font-size: .85rem; font-weight: 600; cursor: pointer; padding: 6px 8px; }
.acesso-form label.aceite { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--texto); }
.acesso-form .nota { margin: 0; }
.btn.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); font-weight: 700;
  padding: 10px 14px; text-align: center; text-decoration: none; }
.acesso-links { margin: 0; font-size: .88rem; text-align: center; }
.acesso-msg { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(18, 224, 90, .12);
  color: var(--marca-texto); font-size: .9rem; }
.acesso-msg.erro { background: rgba(240, 90, 70, .18); }
/* ---------- rodapé da empresa (login e busca) */
.empresa { background: #000409; color: #b9c6d6; border-top: 2px solid #0a7cff; padding: 10px 16px 8px; font-size: .8rem; }
.empresa-in { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 24px; }
.empresa-marca img { display: block; width: 130px; max-width: 100%; height: auto; }
.empresa-marca p { margin: 3px 0 0; color: #8fd3ff; font-size: .74rem; }
.empresa-contato { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.empresa a { color: #e6f1ff; text-decoration: none; }
.empresa a:hover { text-decoration: underline; }
.empresa-cr { max-width: 1400px; margin: 8px auto 0; padding-top: 6px; border-top: 1px solid #13202f;
  color: #6f8196; font-size: .78rem; }
.empresa-cr a { color: #9fb1c6; }
.topo-acoes { display: flex; gap: 8px; align-items: center; }
.topo-acoes .btn { text-decoration: none; }

.so-celular { display: none; }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; padding: 12px 16px; }
  .so-celular { display: initial; }
  .filtros-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; position: sticky; top: -14px;
    background: var(--painel); padding: 4px 0; z-index: 1; }
  .filtros { position: fixed; inset: 0; z-index: 40; max-height: none; border-radius: 0; transform: translateX(-100%);
    transition: transform .2s ease; top: 0; }
  .filtros.aberto { transform: none; }
  .grade { grid-template-columns: 1fr; }
  .sub .regiao { display: none; }
  .marca-logo { height: 42px; }
}

/* ---------- índices de mercado */
.mercado { display: flex; flex-direction: column; gap: 14px; }
.mi-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; background: var(--painel);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
.mi-controles .campo { margin: 0; min-width: 180px; }
.mi-cobertura { color: var(--suave); font-size: .82rem; margin-left: auto; }
.mi-nota { margin: 0; color: var(--suave); font-size: .82rem; }
.mi-aviso { background: var(--aviso-fundo); color: var(--aviso); border-radius: var(--raio); padding: 10px 14px; font-size: .88rem; }
.mi-aviso .btn { margin: 4px 4px 0 0; padding: 4px 10px; font-size: .82rem; }
.mi-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mi-kpi { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
.mi-kpi-t { color: var(--suave); font-size: .8rem; }
.mi-kpi-v { font-size: 1.45rem; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }
.mi-kpi-d { color: var(--suave); font-size: .76rem; line-height: 1.35; }
.mi-kpi.estimativa { border-style: dashed; }
.mi-pouco { color: var(--aviso); }
.mi-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.mi-fig { margin: 0; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; min-width: 0; }
.mi-fig figcaption { font-weight: 600; font-size: .92rem; margin-bottom: 8px; }
.mi-fig figcaption span { font-weight: 400; color: var(--suave); font-size: .8rem; }
.mi-canvas { position: relative; height: 240px; }
.mi-canvas.alto { height: 320px; }
.mi-h { margin: 10px 0 0; font-size: 1.05rem; }
.mi-comp { align-self: flex-start; }
.mi-tabela { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.mi-tabela th, .mi-tabela td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.mi-tabela th:first-child, .mi-tabela td:first-child { text-align: left; }
.mi-tabela th { color: var(--suave); font-weight: 600; background: var(--fundo); position: sticky; top: 0; }
.mi-tabela td small { color: var(--suave); }
.mi-opps { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.mi-op { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
.mi-op h4 { margin: 0 0 8px; font-size: .92rem; }
.mi-op ul { list-style: none; margin: 0; padding: 0; }
.mi-op li { display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px solid var(--linha); font-size: .84rem; }
.mi-op li:last-child { border-bottom: 0; }
.mi-op li small { width: 100%; color: var(--suave); }
.mi-op-v { font-variant-numeric: tabular-nums; }
.mi-op-v s { color: var(--suave); }
.mi-vazio { color: var(--suave); font-size: .84rem; margin: 0; }
@media (max-width: 600px) {
  .mi-graficos, .mi-opps { grid-template-columns: 1fr; }
  .mi-cobertura { margin-left: 0; }
  .mi-kpis { grid-template-columns: 1fr 1fr; }
  .mi-kpi-v { font-size: 1.2rem; }
}
.mi-aviso .btn { display: inline-block; width: auto; }
.mi-mais { align-self: flex-start; }

/* abas Anúncios / Índices de Mercado: dois botões separados, texto em uma linha */
.abas { display: flex; gap: 8px; }
.aba { border: 1px solid var(--linha); background: var(--painel); color: var(--texto); border-radius: 8px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap; font-weight: 600; }
.aba:hover { border-color: var(--acento); }
.aba.on { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.mi-aviso .mi-cidade { display: inline-block; width: auto; }