/* Comparar apurações (26/10/2026). Mesma base do painel (src/styles.css): preto, Geist, linhas de 1px. */
*,*::before,*::after{box-sizing:border-box}html,body{margin:0}[hidden]{display:none!important}
.cmp .back{display:inline-flex;gap:6px;align-items:center;color:var(--dim);text-decoration:none;font-size:12px}
.cmp .back:hover{color:var(--ink)}
.cmp-intro{margin:0;max-width:760px;color:var(--dim);font-size:14px}
.c22{color:var(--g22)} .c13{color:var(--r13)}
.cmp i{font-style:normal}

.cmp-ctrl{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cmp-sel{display:flex;align-items:center;gap:10px;border:1px solid var(--line, #2a2a2a);border-radius:12px;padding:6px 6px 6px 12px;background:#0b0b0c}
.cmp-sel .m{font-size:12px;color:var(--dim)}
.cmp-sel select{font:400 15px var(--sans);color:var(--ink);background:#0b0b0c;border:0;padding:8px 6px;border-radius:8px;cursor:pointer}
.cmp-troca{width:40px;height:40px;border:1px solid var(--line, #2a2a2a);border-radius:12px;font-size:18px;color:var(--dim)}
.cmp-troca:hover{color:var(--ink)}
.cmp-modos{display:flex;gap:4px;padding:4px;border:1px solid var(--line, #2a2a2a);border-radius:12px;margin-left:auto}
.cmp-modos button{padding:8px 14px;border-radius:8px;font-size:14px;color:var(--dim)}
.cmp-modos button[aria-selected="true"]{background:var(--ink);color:#000;font-weight:500}

.cmp-placar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp-pl{border:1px solid var(--hair);border-radius:16px;padding:16px 18px;background:#070708}
.cmp-pl-t{font-size:13px;color:var(--dim)} .cmp-pl-t b{color:var(--ink);margin-right:6px}
.cmp-pl-n{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
.cmp-pl-n>div{display:flex;flex-direction:column} .cmp-pl-n .c13{text-align:right}
.cmp-pl-n span{font-size:13px} .cmp-pl-n strong{font:200 clamp(30px,4.4vw,48px)/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.cmp-pl-n small{font:300 12px var(--mono);color:var(--dim)}
.cmp-pl-f{margin-top:10px;font-size:12px;color:var(--mute)}

.cmp-mapas{position:relative;border:1px solid var(--hair);border-radius:20px;padding:16px;background:#050506}
.cmp-onde{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.cmp-onde h2{margin:0;font:500 22px var(--sans);letter-spacing:-.02em}
.cmp-voltar{border:1px solid var(--line, #2a2a2a);border-radius:999px;padding:6px 14px;font-size:14px;min-height:36px}
.cmp-grade{display:grid;gap:16px}
.cmp-grade.lado{grid-template-columns:1fr 1fr}
.cmp-painel{min-width:0}
.cmp-pt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:13px;color:var(--dim);margin-bottom:6px}
.cmp-pt b{color:var(--ink);font-weight:500} .cmp-pt span{display:flex;gap:10px}
.cmp-sobre-rot{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);margin-bottom:6px}
.cmp-sobre-rot b{color:var(--ink);margin-right:4px}
.cmp-tela{position:relative;aspect-ratio:646/655;max-height:76vh;margin:0 auto}
.cmp-grade.lado .cmp-tela{max-height:62vh}
.cmp-tela canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.cmp-alca{position:absolute;top:0;bottom:0;width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:ew-resize;touch-action:none}
.cmp-alca::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.cmp-alca button{position:relative;width:44px;height:44px;border-radius:50%;background:#fff;color:#000;font-size:18px;box-shadow:0 2px 10px rgba(0,0,0,.6);cursor:ew-resize}
.cmp-alca .m{position:relative;font-size:11px;background:#000;border:1px solid #fff;border-radius:6px;padding:1px 6px;color:#fff}
.cmp-alca .m:first-child{transform:translateX(-24px)} .cmp-alca .m:last-child{transform:translateX(24px)}
.cmp-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:12px;color:var(--dim)}
.cmp-legenda i{display:inline-block;width:22px;height:8px;border-radius:4px;margin-right:6px;vertical-align:middle}
.cmp-dica{position:absolute;z-index:5;min-width:220px;max-width:300px;pointer-events:none;background:rgba(10,10,11,.96);border:1px solid #333;border-radius:12px;padding:10px 12px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.cmp-dt{font-weight:500;margin-bottom:6px}
.cmp-dl{display:flex;flex-direction:column;padding:4px 0;border-top:1px solid #222}
.cmp-dl b{font:300 11px var(--mono);color:var(--dim)} .cmp-dl span{display:flex;gap:10px}
.cmp-dm{margin-top:6px;font-size:12px;color:var(--dim)}
.mute{color:var(--mute)}

.cmp-tabela h2{margin:0 0 4px;font:500 18px var(--sans)}
.cmp-nota{margin:0 0 12px;font-size:12px;color:var(--dim)}
.cmp-tab-wrap{overflow-x:auto}
.cmp-tabela table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.cmp-tabela th,.cmp-tabela td{padding:10px 8px;border-bottom:1px solid var(--hair);text-align:left;white-space:nowrap}
.cmp-tabela thead th{font-size:12px;color:var(--dim);font-weight:400;vertical-align:bottom}
.cmp-tabela thead small{color:var(--mute)}
.cmp-tabela tbody th{font-weight:400}
.cmp-tabela td:last-child,.cmp-tabela th:last-child{text-align:right}
.cmp-tabela tr[data-uf]{cursor:pointer} .cmp-tabela tr[data-uf]:hover{background:#0d0d0e}
.cmp-fontes{font-size:12px;color:var(--dim);max-width:820px} .cmp-fontes b{color:var(--ink);font-weight:400}
.cmp-fontes a{color:inherit}
.cmp-erro{color:var(--r13)}

@media (max-width:760px){
  .cmp-placar{grid-template-columns:1fr}
  .cmp-grade.lado{grid-template-columns:1fr}
  .cmp-modos{margin-left:0;width:100%} .cmp-modos button{flex:1;padding:10px 6px}
  .cmp-sel{flex:1 1 calc(100% - 52px);min-width:0} .cmp-sel select{min-width:0;width:100%}
  .cmp-sel.b{order:2} .cmp-troca{order:1;margin-left:auto} .cmp-modos{order:3}
  /* no celular o mapa vem logo depois da escolha; o placar desce */
  .cmp-intro{order:1} .cmp-ctrl{order:2} .cmp-mapas{order:3} .cmp-placar{order:4} .cmp-tabela{order:5} .cmp-fontes{order:6}
  .cmp-mapas{padding:10px;border-radius:16px}
  .cmp-dica{max-width:calc(100% - 8px)}
}