:root{
  --bg:#FFFFFF; --panel:#FBFAF8; --line:#E4E0D8; --line-soft:#EFECE6;
  --ink:#1A1A1A; --ink-dim:#6E6A61;
  /* Cores saturadas de propósito: o corretor lê o quadro de longe, e o que se enxerga
     a distância é o PREENCHIMENTO da célula, não o texto. Texto escuro por cima garante
     que de perto continue legível. */
  --disp:#0F6B3F; --disp-bg:#C7E8D5; --disp-bd:#6FBE93;
  --res:#78530A;  --res-bg:#FBE1A6;  --res-bd:#DDAA3C;
  --vend:#93200F; --vend-bg:#F5BBB0; --vend-bd:#D47766;
}
*{margin:0;padding:0;box-sizing:border-box}
/* o atributo hidden sempre vence regras de display do autor */
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  display:flex; flex-direction:column;
  padding:1.3vh 1.5vw;
}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1vh; border-bottom:1px solid var(--line); margin-bottom:1.2vh;
}
.logo{height:10vh; mix-blend-mode:multiply}
.title-block{display:flex; align-items:center; gap:1.5vw}
.divider{width:1px; height:7.5vh; background:var(--line)}
.subtitle{font-family:'Fraunces',serif; font-weight:300; font-size:2.5vh; letter-spacing:.08em}
.subtitle small{display:block; font-family:'Archivo'; font-size:1.25vh; font-weight:600;
  letter-spacing:.35em; text-transform:uppercase; color:var(--ink-dim); margin-top:.4vh}
.stats{display:flex; gap:2.2vw}
.stat{text-align:right}
.stat .num{font-family:'Fraunces',serif; font-size:4vh; font-weight:400; line-height:1}
.stat .lbl{font-size:1.25vh; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); margin-top:.4vh}
.stat.disp .num{color:var(--disp)}
.stat.res  .num{color:var(--res)}
.stat.vend .num{color:var(--vend)}

main{flex:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1.2vh 1.3vw; min-height:0}
.bloco{background:var(--panel); border:1px solid var(--line-soft); border-radius:1vh; padding:1vh 1vw .9vh; display:flex; flex-direction:column; min-height:0}
.bloco h2{
  font-size:1.4vh; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:.7vh;
  display:flex; justify-content:space-between; align-items:baseline;
}
.bloco h2 b{color:var(--ink); font-size:1.8vh; letter-spacing:.14em}
.bloco h2 span{font-weight:500; letter-spacing:.08em; text-transform:none; color:var(--disp); font-size:1.4vh}
.grid{flex:1; display:grid; grid-template-columns:auto repeat(8,1fr); gap:.4vh .28vw; min-height:0}
.floor-lbl{
  display:flex; align-items:center; justify-content:flex-end;
  font-size:1.3vh; font-weight:500; color:var(--ink-dim); padding-right:.45vw;
}
.unit{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:.5vh; border:1px solid; line-height:1.15; gap:.15vh;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.unit b{font-weight:700; font-size:1.6vh}
.unit small{font-weight:500; font-size:1vh; letter-spacing:.03em; opacity:.8}
.unit.neutro{background:#FFFFFF; color:var(--ink); border-color:var(--line)}
.unit.neutro small{color:var(--ink-dim)}
.unit.disp{background:var(--disp-bg); color:var(--disp); border-color:var(--disp-bd)}
.unit.res {background:var(--res-bg);  color:var(--res);  border-color:var(--res-bd)}
.unit.vend{background:var(--vend-bg); color:var(--vend); border-color:var(--vend-bd)}
.unit.vend b{text-decoration:line-through; text-decoration-thickness:1px}
/* Permuta do terreno (dação): não é oferta — vaga fica vazia no quadro público */
/* (As unidades de Dação voltaram a aparecer na TV como vendidas — não há mais
   unidade escondida no quadro público.) */

/* flash discreto quando uma unidade muda de status ao vivo */
@keyframes flash-mudou{0%{box-shadow:0 0 0 .35vh rgba(26,26,26,.55)}100%{box-shadow:0 0 0 0 rgba(26,26,26,0)}}
.unit.mudou{animation:flash-mudou 1s ease-out}

.gsep{grid-column:1/-1; border-top:1px dashed var(--line); position:relative; margin:.5vh 0 .15vh}
.gsep span{position:absolute; top:-1vh; left:3.2vw; background:var(--panel); padding:0 .5vw;
  font-size:1vh; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-dim)}

footer{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:.9vh; margin-top:1.1vh; border-top:1px solid var(--line);
  font-size:1.35vh; font-weight:500; letter-spacing:.12em; color:var(--ink-dim);
}
.legend{display:flex; gap:1.7vw}
.legend span{display:flex; align-items:center; gap:.45vw; text-transform:uppercase; letter-spacing:.2em; font-size:1.2vh}
.dot{width:1.4vh; height:1.4vh; border-radius:.35vh; display:inline-block; border:1px solid}
.dot.disp{background:var(--disp-bg); border-color:var(--disp)}
.dot.res{background:var(--res-bg); border-color:var(--res)}
.dot.vend{background:var(--vend-bg); border-color:var(--vend)}

.rodape-dir{display:flex; align-items:center; gap:.8vw; letter-spacing:.1em}
.conexao{width:1.1vh; height:1.1vh; border-radius:50%; background:var(--disp);
  box-shadow:0 0 0 .3vh var(--disp-bg); transition:background .3s, box-shadow .3s}
body.offline .conexao{background:#C0392B; box-shadow:0 0 0 .3vh #F6E2DE}
body.offline #rodape-info{color:#C0392B}

/* Faixa de alerta: aparece só quando o quadro pode estar desatualizado.
   Vale mais um aviso gritante do que a TV mentir em silêncio. */
.aviso{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:#C0392B; color:#fff; padding:1.1vh 2vw; text-align:center;
  font-weight:700; font-size:1.9vh; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 .4vh 1.4vh rgba(0,0,0,.28);
}