/* Atlas Condominial Brasileiro. Porte do artifact interativo para o Agora:
   mesma logica e mesmas classes, com as cores e fontes do site. O Agora nao
   tem tema escuro, entao os tokens sao so os claros. */
.atlas{
  --ink:#262622; --ink-2:#3d3d38; --muted:#8a8478; --faint:#cfc7b6;
  --paper:#F7F4EE; --surface:#fffdf8; --sunken:#EFEBE1;
  --line:#DAD4C4; --line-soft:#E8E3D6;
  --accent:#C9772E; --accent-soft:#f5e6d3; --blue:#1F6F5C;
  --water:#EFEBE1; --land:#DDD6C6; --land-hi:#CEC5B1; --line-map:#F7F4EE;
  --serif:'Fraunces',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  max-width:1320px; margin:0 auto; padding:0 32px;
}
.atlas [hidden]{display:none !important}   /* .slot usa display:flex e venceria o padrao do navegador */
.atlas :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
@media (max-width:600px){ .atlas{padding:0 16px} }

/* ---------------- controles ---------------- */
.controls{
  display:flex; flex-wrap:wrap; gap:16px 26px; align-items:flex-end;
  padding-block:18px; border-bottom:1px solid var(--line)
}
.group{display:flex; flex-direction:column; gap:7px; min-width:0}
.glabel{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted)
}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  font:inherit; font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:5px 11px; cursor:pointer; transition:background .12s,border-color .12s,color .12s
}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip.reset[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.atlas select{
  font:inherit; font-size:13.5px; font-family:var(--sans); color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:6px 9px; min-width:176px
}
.seg{display:flex; border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--surface)}
.seg button{
  font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); background:transparent;
  border:0; border-right:1px solid var(--line); padding:6px 13px; cursor:pointer;
  transition:background .12s,color .12s
}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--sunken)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}

/* ---------------- palco ---------------- */
.stage{display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:20px; padding-block:20px}
.mapcol{display:flex; flex-direction:column; gap:12px; min-width:0}
.panel{display:flex; flex-direction:column; gap:16px; min-width:0}

.mapwrap{position:relative; border:1px solid var(--line); background:var(--water)}
#map{height:clamp(360px,58vh,600px); background:var(--water)}
.leaflet-container{font-family:var(--sans); background:var(--water)}
.dens-layer{pointer-events:none}
.uf-path{
  fill:var(--land); fill-opacity:1; stroke:var(--line-map); stroke-width:.9;
  stroke-opacity:1; cursor:pointer; transition:fill .14s,fill-opacity .14s
}
.uf-path:hover{fill:var(--land-hi)}
.uf-path.dim{fill-opacity:.4; stroke-opacity:.45}
.leaflet-control-zoom a{
  background:var(--surface); color:var(--ink); border-color:var(--line); font-family:var(--sans)
}
.leaflet-control-zoom a:hover{background:var(--sunken); color:var(--ink)}
.leaflet-tooltip{
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  box-shadow:none; border-radius:2px; font-size:12.5px; line-height:1.45; padding:6px 9px
}
.leaflet-tooltip strong{font-weight:700}
.leaflet-tooltip-top:before{border-top-color:var(--line)}
.leaflet-control-attribution{display:none}

.mapnote{
  position:absolute; left:10px; bottom:10px; z-index:500; max-width:min(320px,74%);
  background:var(--surface); border:1px solid var(--line); padding:9px 11px
}
.mapnote .ttl{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px
}
.ramp{display:flex; height:9px}
.ramp span{flex:1}
.rampends{
  display:flex; justify-content:space-between; margin-top:4px; font-family:var(--mono);
  font-size:10.5px; color:var(--ink-2); font-variant-numeric:tabular-nums
}
.mapnote .fine{font-size:11px; color:var(--muted); line-height:1.4; margin-top:7px}

.readout{
  position:absolute; right:10px; top:10px; z-index:500;
  background:var(--surface); border:1px solid var(--line); padding:7px 11px; text-align:right;
  font-family:var(--mono); font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums; pointer-events:none
}
.readout b{display:block; font-size:19px; color:var(--ink); font-weight:600; letter-spacing:-.01em}

/* ---------------- tempo ---------------- */
.timebar{border:1px solid var(--line); background:var(--surface); padding:14px 16px 12px}
.timehead{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; justify-content:space-between}
.spark-read{font-family:var(--mono); font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
svg.spark{display:block; width:100%; height:94px; margin-block:6px 2px; cursor:crosshair}
.sp-bar{fill:var(--faint)}
.sp-bar.in{fill:var(--accent)}
.sp-win{fill:var(--accent-soft)}
.sp-axis{stroke:var(--line); stroke-width:1; fill:none}
.sp-tick,.sp-max{fill:var(--muted); font-family:var(--mono); font-size:10px}
.sliders{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; margin-top:8px}
.slot{display:flex; align-items:center; gap:9px; flex:1 1 220px; min-width:0}
.slot label{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap
}
.slot output{
  font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; min-width:5.6ch; text-align:right
}
.atlas input[type=range]{flex:1; min-width:88px; accent-color:var(--accent); height:22px}
.play{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--paper); background:var(--ink);
  border:1px solid var(--ink); border-radius:2px; padding:7px 13px; cursor:pointer; white-space:nowrap
}
.play:hover{background:var(--ink-2); border-color:var(--ink-2)}

/* ---------------- painel lateral ---------------- */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
.tile{background:var(--surface); padding:11px 12px 12px}
.tile .k{
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px
}
.tile .v{
  font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1.05;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:block
}
.tile .u{font-size:11.5px; color:var(--muted); display:block; margin-top:2px; line-height:1.3}

.rank{border:1px solid var(--line); background:var(--surface)}
.rank h2{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0; padding:11px 13px 9px;
  border-bottom:1px solid var(--line)
}
.rank .scroll{overflow-x:auto}
.atlas table{border-collapse:collapse; width:100%; font-size:13px}
.atlas th,.atlas td{text-align:right; padding:5px 9px; border-bottom:1px solid var(--line-soft); white-space:nowrap}
.atlas th{
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); padding-block:7px
}
.atlas th:first-child,.atlas td:first-child{text-align:left; white-space:normal}
.atlas tbody tr{cursor:pointer}
.atlas tbody tr:hover{background:var(--sunken)}
.atlas tbody tr:last-child td{border-bottom:0}
.atlas td.n{font-family:var(--mono); font-variant-numeric:tabular-nums}
.atlas td .uf{color:var(--muted); font-family:var(--mono); font-size:11px; margin-left:5px}
.rank .foot{font-size:11.5px; color:var(--muted); padding:8px 13px 10px; line-height:1.4}

.loading{
  display:flex; align-items:center; justify-content:center; height:100%;
  padding:40px 22px; text-align:center; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)
}
.loading.err{color:var(--accent); text-transform:none; letter-spacing:0; font-size:13.5px; line-height:1.5}

@media (max-width:980px){
  .stage{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:620px){
  .tiles{grid-template-columns:1fr 1fr}
  #map{height:clamp(320px,52vh,440px)}
  .mapnote{max-width:calc(100% - 20px)}
  .readout{font-size:10px; padding:6px 9px}
  .readout b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}