/* Página pública (ao vivo e arquivo). Tokens em base.css. */
html { font-size: 17px; }
body { background: var(--bg); }
:root { --cond: "Archivo", "Arial Narrow", sans-serif; }

/* Faixa de placar: escura nos dois temas, fixa no topo, como a tarja de uma transmissão */
.bar {
  --b-bg: #0c0e11; --b-bg2: #161a1f; --b-ink: #f3f4f5; --b-ink2: #9aa1aa; --b-rule: #2a2f36;
  --v-true: #4bb896; --v-mixed: #e2ab3f; --v-false: #e5534b; --v-unsup: #ecebe6; --v-nv: #a3a9b1;
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--b-bg); color: var(--b-ink);
  box-shadow: 0 2px 0 var(--b-rule), 0 6px 18px rgb(0 0 0 / 0.18);
}
.bar-top { display: flex; align-items: center; gap: 0.7rem; max-width: 72rem; margin: 0 auto; padding: 0.45rem 1rem 0; }
.live { display: inline-flex; align-items: center; gap: 0.4rem; font: 800 0.72rem/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--b-ink); }
.live-dot { background: var(--b-ink2); }
.bar h1 { margin: 0; flex: 1; min-width: 0; font: 700 0.85rem/1.2 var(--cond); font-variation-settings: "wdth" 80; color: var(--b-ink2); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools { display: flex; align-items: center; gap: 0.45rem; }
.bar .theme-btn { width: 1.9rem; height: 1.9rem; background: transparent; border-color: var(--b-rule); color: var(--b-ink); }
.bar .theme-btn:hover { border-color: var(--b-ink); }
.pip-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--b-ink); border-radius: 3px; background: transparent; color: var(--b-ink); cursor: pointer;
  font: 800 0.75rem/1.2 var(--cond); letter-spacing: 0.08em; text-transform: uppercase;
}
.pip-btn:hover { background: var(--b-ink); color: var(--b-bg); }
.pip-btn svg { width: 1.05em; height: 1.05em; }

/* Placar espelhado: mesmo desenho para os dois, cada um virado para o centro */
.score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 72rem; margin: 0 auto; padding: 0.35rem 1rem 0.55rem; }
.side { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.1rem 0.8rem; min-width: 0; }
.side .name { font: 900 1.45rem/1.05 var(--cond); font-variation-settings: "wdth" 72; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .num small { font-size: 0.5em; margin-left: 0.05em; }
.side .num[data-band="high"] { background: var(--v-true); }
.side .num[data-band="mid"] { background: var(--v-mixed); }
.side .num[data-band="low"] { background: var(--v-false); }
.side .num[data-band="high"], .side .num[data-band="mid"], .side .num[data-band="low"] { color: var(--b-bg); border-color: transparent; }
.side .num.few { opacity: 0.55; }
.side .num { grid-row: span 2; font: 900 2.3rem/1 var(--cond); font-variation-settings: "wdth" 70; font-variant-numeric: tabular-nums; background: var(--b-bg2); border: 1px solid var(--b-rule); border-radius: 4px; padding: 0.2rem 0.55rem; min-width: 2.8rem; text-align: center; }
.side .string { display: flex; flex-wrap: wrap; gap: 0.1rem; font-size: 0.82rem; min-height: 1.2rem; max-width: 30rem; }
.side.left .string { margin-left: auto; }
.side .empty { font-size: 0.75rem; color: var(--b-ink2); }
.side .name small { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem; font: 600 0.72rem/1.2 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--b-ink2); }
.side.left .name small { justify-content: flex-end; }
.side .name small i { font-style: normal; }
.pick { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 3px; }
.pick:hover { background: rgb(255 255 255 / 0.16); }
.pick:focus-visible { outline: 2px solid #8fb0ff; }
.card.picked { animation: picked 2s ease-out; }
@keyframes picked { 0%, 40% { box-shadow: 0 0 0 4px var(--focus); } 100% { box-shadow: 0 0 0 0 transparent; } }
.side.left { text-align: right; }
.side.left .name, .side.left .string { grid-column: 1; justify-content: flex-end; }
.side.left .num { grid-column: 2; grid-row: 1 / span 2; }
.side.right { grid-template-columns: auto 1fr; }
.side.right .num { grid-column: 1; grid-row: 1 / span 2; }
.side.right .name, .side.right .string { grid-column: 2; }
.bar-note { margin: 0; padding: 0 1rem 0.45rem; text-align: center; font: 500 0.72rem/1.3 var(--font-ui); color: var(--b-ink2); }
.mid { padding: 0 0.9rem; text-align: center; font: 800 0.62rem/1.15 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-ink2); }
.mid small { display: block; letter-spacing: 0.1em; }


/* Conteúdo */
.page { max-width: 52rem; margin: 0 auto; padding: 1rem 1rem max(5rem, 55vh); }
.intro { padding: 0.4rem 0 0.8rem; color: var(--ink-2); font-size: 0.88rem; line-height: 1.45; }
.intro p { margin: 0.35rem 0 0; }
.test-banner { padding: 0.35rem 0.6rem; border: 2px dashed var(--v-mixed); font-weight: 600; color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.78rem; }
.legend li { display: inline-flex; align-items: center; gap: 0.3rem; }

.filters { display: flex; gap: 0.4rem; margin: 0.4rem 0 0.8rem; flex-wrap: wrap; }
.filters button { border: 1px solid var(--rule); background: var(--surface); border-radius: 3px; padding: 0.3rem 0.75rem; cursor: pointer; font: 700 0.8rem/1.3 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Card no formato da decisão do VAR: faixa com hora e veredito em bloco cheio, depois a ficha */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; scroll-margin-top: calc(var(--bar-h, 9rem) + 0.8rem); }
.card.fresh { animation: arrive 1.6s ease-out; }
@keyframes arrive { from { box-shadow: 0 0 0 3px var(--ink); } }
.call { display: flex; align-items: stretch; background: var(--ink); color: var(--surface); }
.call .verdict { --c: var(--v-nv); display: inline-flex; align-items: center; gap: 0.45rem; background: var(--c); color: var(--surface); padding: 0.35rem 0.8rem; font: 900 1.15rem/1 var(--cond); font-variation-settings: "wdth" 80; letter-spacing: 0.04em; text-transform: uppercase; }
.call .verdict[data-f="true"] { --c: var(--v-true); } .call .verdict[data-f="mixed"] { --c: var(--v-mixed); }
.call .verdict[data-f="false"] { --c: var(--v-false); } .call .verdict[data-f="unsup"] { --c: var(--v-unsup); }
.call .verdict .bead { --c: currentColor; --bead-fg: var(--vc); }
.call .verdict { --vc: var(--c); }
.call .verdict, .call time { white-space: nowrap; flex: none; }
.call .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; align-self: center; padding: 0 0.8rem; font: 800 0.95rem/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; }
.call time { margin-left: auto; display: flex; align-items: center; padding: 0 0.8rem; font: 600 0.8rem var(--font-mono); opacity: 0.8; }
.card-body { padding: 0.8rem 1rem 1rem; }
.quote { margin: 0 0 0.8rem; font: 500 1.22rem/1.4 var(--font-quote); color: var(--ink); }
.note { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--ink-2); }
.card.retracted .quote, .card.retracted .sheet dd:first-of-type { text-decoration: line-through; color: var(--ink-3); }
.card.retracted .call .verdict { --c: var(--ink-3); }

.empty-feed { color: var(--ink-2); padding: 1.5rem 0; }
.new-pill { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: var(--ink); color: var(--surface); border: 0; border-radius: 3px; padding: 0.55rem 1rem; font: 800 0.85rem var(--cond); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); }
.about { margin-top: 1.5rem; color: var(--ink-2); font-size: 0.88rem; }
.about summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.about dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.8rem; }
.about dt { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--ink); }
.about dd { margin: 0; }
.weights { border-collapse: collapse; margin: 0.4rem 0 0.8rem; font-size: 0.85rem; }
.weights td { padding: 0.2rem 1.2rem 0.2rem 0; border-bottom: 1px solid var(--rule); }
.weights td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.offline { color: var(--v-mixed); }

@media (min-width: 64rem) {
  html { font-size: 19px; }
  .side .name { font-size: 1.7rem; }
  .side .num { font-size: 2.6rem; }
  .quote { font-size: 1.38rem; }
  .card .sheet { font-size: 1rem; grid-template-columns: 5.6rem 1fr; }
  .card-body { padding: 1rem 1.3rem 1.2rem; }
}
@media (max-width: 34rem) {
  .bar-top { padding-top: 0.35rem; }
  .pip-btn span { display: none; }
  /* Celular: uma linha por candidato, número à esquerda, nome inteiro, barra e formas roláveis */
  .score { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.3rem 0.75rem 0.5rem; }
  .mid { order: -1; padding: 0; text-align: left; display: flex; gap: 0.35em; }
  .mid small { display: inline; }
  .side, .side.left, .side.right { grid-template-columns: auto 1fr; text-align: left; }
  .side.left .num, .side.right .num { grid-column: 1; grid-row: 1 / span 2; }
  .side.left .name, .side.left .string,
  .side.right .name, .side.right .string { grid-column: 2; justify-content: flex-start; justify-self: stretch; max-width: none; }
  .side .name > span { display: block; white-space: normal; }
  .side .string { max-width: none; margin-left: 0; }
  .side .name { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
  .side .name small { margin-top: 0; }

  .side .name small { font-size: 0.62rem; }
  .side { gap: 0.1rem 0.45rem; }
  .side .name { font-size: 1.05rem; }
  .side .num { font-size: 1.6rem; min-width: 2.1rem; padding: 0.15rem 0.35rem; }
  .side .string { font-size: 0.7rem; gap: 0.05rem; }
  .call .verdict { font-size: 1rem; padding: 0.3rem 0.6rem; }
  .call { flex-wrap: wrap; }
  .call .who { order: 3; flex-basis: 100%; white-space: normal; font-size: 0.85rem; padding: 0.35rem 0.6rem; border-top: 1px solid rgb(255 255 255 / 0.12); }
}

/* Compartilhar: na faixa (escura) e no pé de cada ficha */
.bar .share-page { border-color: var(--b-rule); color: var(--b-ink); padding: 0.3rem 0.7rem; font: 800 0.75rem/1.2 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 3px; }
.bar .share-page:hover { border-color: var(--b-ink); }
.card-foot { display: flex; justify-content: flex-end; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
.call .deep { align-self: center; padding: 0 0.6rem; font: 600 0.72rem/1.1 var(--font-ui); opacity: 0.8; white-space: nowrap; }
@media (max-width: 34rem) {
  .bar .share-page .share-lbl { display: none; }
  .bar .share-page { padding: 0.3rem 0.45rem; }
  .call .deep { order: 4; flex-basis: 100%; padding: 0 0.6rem 0.35rem; }
}

/* Arquivo de um debate já checado */
.archive-note { margin: 0.5rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--ink-3); background: var(--surface); color: var(--ink); font-size: 0.9rem; }
.archive-note p { margin: 0.25rem 0; }
.card-foot { align-items: center; gap: 0.8rem; }
.video-link { margin-right: auto; font-size: 0.85rem; color: var(--ink-2); }
.video-link::after { content: " ↗"; color: var(--ink-3); }
.pip-btn[hidden] { display: none; }

/* Chave de debates na faixa; arquivo com faixa em outro tom neutro, para não confundir com o ao vivo */
.bar-top { flex-wrap: wrap; row-gap: 0.4rem; }
.bar[data-arquivo] { --b-bg: #1d2531; --b-bg2: #26303d; --b-rule: #364152; }
.bar .live { margin-left: auto; }
@media (max-width: 34rem) {
  .bar .dswitch { order: 9; flex-basis: 100%; }
}
.card.rechecking .call .verdict { --c: var(--ink-3); }
.card.rechecking .quote { color: var(--ink-2); }

/* Legenda dos símbolos dentro da faixa, no lugar da frase de aviso (que fica no Como checamos) */
.bar-legend { justify-content: center; margin: 0; padding: 0 1rem 0.5rem; color: var(--b-ink2); font-size: 0.74rem; gap: 0.2rem 0.9rem; }
.bar-legend .bead { --bead-fg: var(--b-bg); }
.bar-legend .bead[data-f="false"] { --bead-fg: #fff; }
@media (max-width: 34rem) { .bar-legend { font-size: 0.68rem; gap: 0.15rem 0.7rem; padding: 0 0.75rem 0.45rem; } }

/* Debate passado: papel frio e faixa azul-ardósia, para não se confundir com o ao vivo (papel quente, faixa preta) */
:root[data-arquivo] { --bg: #e7eaee; --surface: #f3f5f7; --rule: #cfd5dc; --ink-2: #545c66; }
@media (prefers-color-scheme: dark) {
  :root[data-arquivo]:not([data-theme="light"]) { --bg: #0f1318; --surface: #171c23; --rule: #29313b; --ink-2: #a3abb5; }
}
:root[data-arquivo][data-theme="dark"] { --bg: #0f1318; --surface: #171c23; --rule: #29313b; --ink-2: #a3abb5; }
.bar[data-arquivo] { --b-bg: #233041; --b-bg2: #2c3a4d; --b-rule: #3b4a5e; --b-ink2: #aab6c4; }
.archive-note { border-left-color: #5b6b80; }
.archive-kicker { margin: 0 0 0.35rem !important; font: 800 0.95rem/1.15 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

/* Antes do debate: contagem grande e o que vai acontecer */
.pre { padding-top: 0.6rem; }
.countdown { text-align: center; padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--rule); }
.cd-when { margin: 0; font: 800 0.85rem/1.2 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.cd-nums { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.2rem clamp(0.9rem, 3.5vw, 2rem); margin: 0.7rem 0 0.5rem; color: var(--cd); }
.cd-nums span { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.cd-nums b { font: 900 clamp(3.2rem, 12vw, 6rem)/0.95 var(--cond); font-variation-settings: "wdth" 70; font-variant-numeric: tabular-nums; }
.cd-nums i { font: 800 clamp(0.9rem, 3vw, 1.3rem)/1 var(--cond); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; }
.countdown { --cd: #e0544b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .countdown { --cd: #ff8077; } }
:root[data-theme="dark"] .countdown { --cd: #ff8077; }
.cd-sub { margin: 0.6rem auto 0; max-width: 30rem; color: var(--ink-2); font-size: 0.9rem; }
.pre-h { margin: 2rem 0 0.7rem; font: 800 0.85rem/1.2 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.2rem 0.6rem; counter-increment: s; }
.steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1.5px solid var(--ink); border-radius: 50%; font: 800 0.85rem/1 var(--cond); }
.steps b { font-weight: 700; }
.steps span { color: var(--ink-2); font-size: 0.95rem; }
.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.rules li { padding-left: 1.1rem; position: relative; }
.rules li::before { content: ""; position: absolute; left: 0.1rem; top: 0.55em; width: 0.45rem; height: 0.45rem; background: var(--ink-3); border-radius: 1px; }
.cta { display: block; margin-top: 2rem; padding: 1rem 1.1rem; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--surface); text-decoration: none; }
.cta:hover { background: var(--ink); color: var(--surface); }
.cta:hover .cta-sub { color: inherit; }
.cta-t { display: block; font: 800 1.1rem/1.15 var(--cond); text-transform: uppercase; letter-spacing: 0.02em; }
.cta-t::after { content: " →"; }
.cta-sub { display: block; margin-top: 0.3rem; font-size: 0.9rem; color: var(--ink-2); }

/* Placar sem checagens (antes do debate): mesma caixa do índice que com número, nada empurrado para a direita */
.side .num { min-width: 4.4rem; }
@media (max-width: 34rem) {
  .side .num { min-width: 3.5rem; }
  .side.left .string { margin-left: 0; }
}

/* Mesma altura de faixa na Globo e na Band: a área das contas reserva 5 linhas desde o começo,
   para o placar não crescer aos saltos durante o debate. */
.side .string { min-height: calc(5 * 1.35em + 4 * 0.1rem); align-content: flex-start; }
.side .empty { align-self: flex-start; }
@media (max-width: 34rem) { .side .string { min-height: calc(5 * 1.35em + 4 * 0.05rem); } }

@media (min-width: 34.01rem) { .bar-top { flex-wrap: nowrap; } }
@media (max-width: 34rem) {
  .cd-nums { flex-wrap: nowrap; gap: 0 0.55rem; }
  .cd-nums b { font-size: 2.6rem; }
  .cd-nums i { font-size: 0.8rem; }
  .cd-nums span { gap: 0.12rem; }
}

/* Sem piscar ao trocar de página: o que depende do JS já vem certo do <head>, a faixa tem altura
   reservada e a página fica invisível até o primeiro desenho completo (ver data-carregando). */
:root { background: var(--bg); }
:root[data-carregando] .bar > *, :root[data-carregando] main { visibility: hidden; }
body { padding-top: 17rem; }
@media (max-width: 34rem) { body { padding-top: 23rem; } }
:root[data-pre] #pre[hidden] { display: block; }
:root[data-pre] .intro, :root[data-pre] #filters, :root[data-pre] #feed { display: none; }

/* O que aparece em cada debate segue as marcas na raiz (postas no <head> e na troca) */
:root[data-arquivo] #archive-note[hidden] { display: block; }
:root[data-arquivo] #method-line, :root[data-arquivo] #pre { display: none; }
:root:not([data-pre]) #pre { display: none; }
:root[data-arquivo] .intro { padding-top: 0; }
.archive-note { margin-top: 0.5rem; }
.bar .live, .pip-btn, .bar .share-page { white-space: nowrap; flex: none; }

/* Botão do placar sobre o vídeo: o principal da faixa no computador */
.bar .pip-btn {
  background: #f3f4f5; color: #0c0e11; border-color: #f3f4f5; border-radius: 6px;
  padding: 0.5rem 0.95rem; font-size: 0.85rem; gap: 0.5rem;
  box-shadow: 0 0 0 3px rgb(242 85 75 / 0.55);
}
.bar .pip-btn:hover { background: #fff; box-shadow: 0 0 0 3px #f2554b; }
.bar .pip-btn svg { width: 1.25em; height: 1.25em; }
.pip-btn[hidden] { display: none; }

/* Aviso preso ao botão, com seta para cima */
.pip-tip {
  position: fixed; z-index: 30; max-width: 19rem; display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.65rem 0.7rem 0.65rem 0.8rem; border-radius: 8px;
  background: #fff4f2; color: #3a0d09; border: 1.5px solid #f2554b; box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
  font: 600 0.9rem/1.35 var(--font-ui);
}
.pip-tip[hidden] { display: none; }
.pip-tip { flex-wrap: wrap; justify-content: center; text-align: center; padding-top: 0.4rem; }
.pip-tip::before {
  content: ""; position: absolute; top: -9px; left: calc(var(--arrow-x, 50%) - 8px);
  border: 8px solid transparent; border-top: 0; border-bottom: 9px solid #f2554b;
}
/* A seta do texto fica exatamente embaixo do centro do botão */
.pip-tip-arrow { position: absolute; top: 0.25rem; left: var(--arrow-x, 50%); transform: translateX(-50%); font: 900 1.4rem/1 var(--cond); color: #d2362c; }
.pip-tip > span:not(.pip-tip-arrow) { padding-top: 1.45rem; }
.pip-tip button { position: absolute; top: 0.3rem; right: 0.35rem; }
.pip-tip button { margin-left: 0.2rem; border: 0; background: none; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
.pip-tip > span:not(.pip-tip-arrow) { text-wrap: balance; }

/* Agenda e histórico de sessões (servidor do João: snapshot.programada / snapshot.historico); só no ao vivo */
.session-lists { margin: 0.6rem 0 1rem; display: grid; gap: 0.75rem; }
.session-lists[hidden] { display: none; }
:root[data-pre] .session-lists, :root[data-arquivo] .session-lists { display: none; }
.session-lists h2 { margin: 0 0 0.35rem; font: 800 0.78rem/1.2 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.session-lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.session-lists li { font-size: 0.88rem; color: var(--ink); }
.session-lists li time { font: 600 0.8rem/1.3 var(--font-mono); color: var(--ink-2); margin-right: 0.45rem; }
@media (max-width: 34rem) { .pip-tip { display: none !important; } }

/* Faixa resumida no celular (classe "compacta", posta ao rolar): só estado, botões, nomes, índice e contagem */
@media (max-width: 34rem) {
  .bar.compacta .bar-legend, .bar.compacta .side .string, .bar.compacta .mid { display: none; }
  /* Do par de botões fica só o do debate na tela, numa linha, para não perder de vista onde se está */
  .bar.compacta .dswitch { display: block; width: auto; }
  .bar.compacta .dswitch-opt:not([aria-current]) { display: none; }
  .bar.compacta .dswitch-opt[aria-current] { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.25rem 0.55rem; }
  .bar.compacta .dswitch-opt[aria-current] span { display: inline; }
  .bar.compacta .bar-top { padding-top: 0.25rem; padding-bottom: 0.1rem; }
  .bar.compacta .score { grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.15rem 0.75rem 0.35rem; }
  .bar.compacta .side, .bar.compacta .side.left, .bar.compacta .side.right { grid-template-columns: auto 1fr; gap: 0 0.4rem; }
  .bar.compacta .side .num { grid-row: 1; font-size: 1.55rem; min-width: 3.1rem; padding: 0.15rem 0.35rem; }
  .bar.compacta .side .name { font-size: 0.95rem; display: grid; gap: 0.1rem; }
  .bar.compacta .side .name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bar.compacta .side .name small { font-size: 0.62rem; }
  .bar.compacta .side .name small i { white-space: nowrap; }
  .bar.compacta .side .string, .bar.compacta .side .empty { min-height: 0; }
}
@media (max-width: 34rem) {
  .bar.compacta .dswitch-opt[aria-current] { white-space: nowrap; overflow: hidden; }
  .bar.compacta .dswitch-opt[aria-current] small, .bar.compacta .dswitch-opt[aria-current] b { flex: none; white-space: nowrap; }
  .bar.compacta .dswitch-opt[aria-current] small::before { vertical-align: 0.05em; }
  .bar.compacta .dswitch-opt[aria-current] b { font-size: 0.85rem; }
  .bar.compacta .dswitch-opt[aria-current] span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar.compacta .side .name { font-size: 0.82rem; }
}
@media (max-width: 34rem) {
  .bar.compacta .side .name > span { font-variation-settings: "wdth" 62; letter-spacing: 0; }
  .bar.compacta .side .num { min-width: 2.8rem; }
  .bar.compacta .score { gap: 0.35rem; }
}