/* Observatório — o cromo da página. Os gráficos estão em viz.css. */
[hidden]{display:none !important}
.pular{position:absolute; left:-999px} .pular:focus{left:1rem; top:1rem; z-index:99; background:var(--acento); color:#fff; padding:.5rem .8rem}

.topo{position:sticky; top:0; z-index:40; background:var(--papel); border-bottom:1px solid var(--fio)}
.topo-in{width:min(1320px,100% - 2rem); margin:0 auto; display:flex; justify-content:space-between; align-items:center; height:58px; gap:1rem}
.marca{display:inline-flex; align-items:center; gap:.7rem; font:600 .95rem var(--font-display); color:var(--tinta); text-decoration:none; letter-spacing:-.01em}
.marca-cin{font:800 1.25rem/1 var(--font-display); color:var(--acento); letter-spacing:-.04em}
.marca-sep{width:1px; height:20px; background:var(--fio)}
.marca-sub{color:var(--tinta-3); font-weight:500}
.topo-dir{display:flex; align-items:center; gap:.6rem}
.tarja{font:500 .68rem var(--font-mono); letter-spacing:.08em; color:var(--acento); border:1.5px solid var(--acento); padding:.3rem .55rem; border-radius:3px; white-space:nowrap}
.botao-lk{font:500 .8rem var(--font-text); color:var(--tinta); background:transparent; border:1px solid var(--fio); border-radius:6px; padding:.45rem .7rem; cursor:pointer}
.botao-lk:hover{border-color:var(--tinta-3)}
.botao{font:600 .9rem var(--font-display); color:#fff; background:var(--acento); border:0; border-radius:6px; padding:.7rem 1.1rem; cursor:pointer}
.botao:hover{background:var(--acento-forte)}

/* entrada */
.entrada{min-height:calc(100svh - 58px); display:grid; align-items:center; position:relative; z-index:1}
.entrada-in{max-width:760px; padding:3rem 0}
.f-chave{margin-top:2rem; max-width:480px} .f-chave label{display:block; font:500 .78rem var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-2); margin-bottom:.5rem}
.f-linha{display:flex; gap:.5rem} .f-linha input{flex:1; font:500 1rem var(--font-mono); padding:.7rem .9rem; border:1.5px solid var(--fio); border-radius:6px; background:var(--papel); color:var(--tinta)} .f-linha input:focus{outline:2px solid var(--acento); outline-offset:1px; border-color:var(--acento)}
.f-erro{margin:.7rem 0 0; font:400 .85rem var(--font-text); color:var(--acento)}

/* filtros */
.filtros{position:sticky; top:58px; z-index:30; background:var(--papel); border-bottom:1px solid var(--fio)}
.filtros-in{width:min(1320px,100% - 2rem); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 2rem; padding:.7rem 0}
.f-grupo{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.f-rot{font:500 .7rem var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-3)}
.trilha{display:flex; align-items:center; gap:.35rem; font:400 .85rem var(--font-text); flex-wrap:wrap}
.trilha button{background:none; border:0; color:var(--tinta-2); cursor:pointer; padding:.2rem .3rem; font:inherit; border-radius:4px} .trilha button:hover{color:var(--tinta); background:var(--papel-2)}
.trilha b{font-weight:600; color:var(--tinta); padding:.2rem .3rem} .trilha i{color:var(--tinta-4); font-style:normal}
#sel-org{font:400 .85rem var(--font-text); padding:.4rem .6rem; border:1px solid var(--fio); border-radius:6px; background:var(--papel); color:var(--tinta); max-width:320px}
.seg{display:inline-flex; border:1px solid var(--fio); border-radius:7px; overflow:hidden}
.seg button{font:500 .82rem var(--font-text); padding:.45rem .8rem; background:transparent; border:0; border-right:1px solid var(--fio); color:var(--tinta-2); cursor:pointer}
.seg button:last-child{border-right:0} .seg button[aria-selected="true"]{background:var(--tinta); color:var(--papel)}
.f-n{margin-left:auto; font:400 .78rem var(--font-mono); color:var(--tinta-3)}

/* corpo */
.corpo{width:min(1320px,100% - 2rem); margin:0 auto; display:grid; grid-template-columns:200px 1fr; gap:3rem; position:relative; z-index:1}
.corpo.refazendo .cenas{opacity:.45; transition:opacity .2s}
.cenas{min-width:0}
.cenas .cena .in{width:100%}
.lateral{position:sticky; top:132px; align-self:start; padding-top:3.5rem; height:calc(100svh - 132px); overflow:auto}
.lateral ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--fio)}
.lateral li a{display:block; padding:.45rem 0 .45rem 1rem; font:400 .85rem/1.3 var(--font-text); color:var(--tinta-3); text-decoration:none; border-left:2px solid transparent; margin-left:-1px}
.lateral li a[aria-current="true"]{color:var(--acento); border-left-color:var(--acento); font-weight:600}
.lateral li a small{display:block; font:400 .68rem var(--font-mono); color:var(--tinta-4)}
.lateral-pe{margin:1.6rem 0 0; padding-left:1rem; font:400 .8rem var(--font-text)} .lateral-pe a{color:var(--tinta-2)}

.cena-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:2rem 3rem; align-items:start}
.cena-grid.inv{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.cena-grid.cheia{grid-template-columns:1fr}
.fig{min-width:0}
.destaques{display:grid; gap:.9rem; margin-top:1.2rem}
.destaque{border-top:1px solid var(--fio); padding-top:.8rem}
.destaque b{display:block; font:700 clamp(1.4rem,1.2rem + .8vw,1.9rem)/1 var(--font-display); letter-spacing:-.03em}
.destaque b em{color:var(--acento); font-style:normal}
.destaque span{display:block; font:400 .88rem/1.4 var(--font-text); color:var(--tinta-2); margin-top:.3rem}
.destaque small{display:block; font:400 .7rem var(--font-mono); color:var(--tinta-3); margin-top:.2rem}

/* lista de respostas */
.lista-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.lista{width:100%; min-width:560px; border-collapse:collapse; font:400 .85rem var(--font-text)}
.lista th,.lista td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--fio); font-variant-numeric:tabular-nums}
.lista th{font:500 .7rem var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-3)}
.lista tr[tabindex]{cursor:pointer} .lista tr[tabindex]:hover,.lista tr[tabindex]:focus{background:var(--papel-2)}
.lista .ok{color:var(--acento); font-weight:600} .lista .nao{color:var(--tinta-3)}
.pag{display:flex; gap:.5rem; align-items:center; margin-top:1rem; font:400 .8rem var(--font-mono); color:var(--tinta-3)}

/* diálogo */
.dlg{border:0; padding:0; background:transparent; max-width:min(860px,100vw - 2rem); width:100%}
.dlg::backdrop{background:rgba(20,17,16,.55)}
.dlg-in{background:var(--papel); color:var(--tinta); border-radius:10px; padding:1.6rem; max-height:88vh; overflow:auto; position:relative; border:1px solid var(--fio)}
.dlg-x{position:absolute; top:1rem; right:1rem}
.dlg-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2rem; margin-top:1rem}
.dlg h3{font:600 1rem var(--font-display); margin:0 0 .6rem}
.kv{font:400 .85rem/1.6 var(--font-text)} .kv b{font-weight:600} .kv dt{font:500 .68rem var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-3); margin-top:.6rem} .kv dd{margin:0}

.carga{position:fixed; bottom:1rem; right:1rem; z-index:60; background:var(--tinta); color:var(--papel); padding:.5rem .8rem; border-radius:6px; font:400 .78rem var(--font-mono); display:flex; gap:.5rem; align-items:center}
.carga span{width:8px; height:8px; border-radius:50%; background:var(--acento); animation:pulsa 1.2s infinite}
@keyframes pulsa{50%{opacity:.3}}

@media (max-width: 960px){
  .corpo{grid-template-columns:1fr; gap:0} .lateral{display:none}
  .cena-grid,.cena-grid.inv{grid-template-columns:1fr}
  .dlg-grid{grid-template-columns:1fr}
  .filtros{top:58px} .f-n{margin-left:0; width:100%}
}
@media (max-width: 720px){
  .topo-in{height:52px; gap:.5rem} .marca-sub{display:none} .filtros{top:52px}
  .marca{font-size:.85rem; gap:.45rem} .topo-dir{gap:.35rem} .botao-lk{padding:.35rem .5rem; font-size:.72rem} .tarja{font-size:.58rem; padding:.2rem .35rem; letter-spacing:.05em}
  .entrada-in{padding:1.5rem 0} .f-linha{flex-direction:column} .trilha{font-size:.8rem} #sel-org{max-width:100%; width:100%}
  .seg{flex-wrap:wrap} .seg button{border-bottom:1px solid var(--fio)}
}