/* Modo Quadro completo: todos os que têm as 9 notas, com barra divergente de −9 a +9 (zero no centro). */
.quadro { flex: 1; padding: var(--esp-4) clamp(16px, 3vw, 48px) 0; display: grid; gap: var(--esp-3); align-content: start; }
.quadro-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-2) var(--esp-5); }
.quadro-titulo { font-size: var(--tam-4); color: var(--texto-forte); }

.q-escala, .q-linha {
  display: grid;
  grid-template-columns: 3.2rem minmax(120px, 1.1fr) minmax(160px, 2.2fr) 3.4rem minmax(5.5rem, 8rem);
  align-items: center; gap: var(--esp-3);
}
.q-escala { font-size: var(--tam-1); color: var(--texto-suave); padding: 0 var(--esp-3); }
.q-escala-barra { display: flex; justify-content: space-between; }
.q-escala-total { text-align: right; }

.q-lista { display: grid; gap: 6px; }
.q-linha {
  padding: 6px var(--esp-3);
  min-height: 44px;
  background: var(--superficie);
  border-radius: var(--raio-1);
}
.q-pos { font-size: 1.25rem; font-weight: 700; color: var(--texto-forte); text-align: center; }
.q-nome { font-weight: 600; color: var(--texto-forte); overflow-wrap: anywhere; }

/* barra divergente: o zero fica no centro; a barra negativa vai para a esquerda, a positiva para a direita */
.q-barra { position: relative; height: 16px; border-radius: 8px; background: var(--barra-trilho); }
.q-barra::before {
  content: ""; position: absolute; left: calc(50% - 1px); top: -3px; bottom: -3px; width: 2px; border-radius: 2px;
  background: var(--neutro-200);
}
.q-neg, .q-pos-barra { position: absolute; top: 0; bottom: 0; }
.q-neg { right: 50%; width: calc(var(--v) * 50%); border-radius: 8px 0 0 8px; background: var(--barra-negativa); transform-origin: 100% 50%; }
.q-pos-barra { left: 50%; width: calc(var(--v) * 50%); border-radius: 0 8px 8px 0; background: var(--barra-positiva); transform-origin: 0 50%; }

.q-total { text-align: right; font-size: 1.35rem; font-weight: 700; color: var(--texto-forte); }
.q-total[data-sinal="neg"] { color: var(--negativo-tinta); }

.q-var { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 700; color: var(--texto-suave); white-space: nowrap; }
.q-var svg { width: 0.85em; height: 0.85em; flex: none; }
.q-var[data-dir="sobe"] { color: var(--verde-300); }
.q-var[data-dir="desce"] { color: var(--coral-200); }
.q-var small { font-weight: 400; font-size: var(--tam-1); }

.q-pendentes { margin-top: var(--esp-4); padding: var(--esp-4); border: 1px dashed var(--linha); border-radius: var(--raio-2); color: var(--texto-suave); }
.q-pendentes h3 { font-size: var(--tam-2); color: var(--texto-forte); margin-bottom: var(--esp-2); }
.q-pendentes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); }

/* ---------- Celular: cada linha vira um cartão compacto ---------- */
@media (max-width: 700px) {
  .q-escala { display: none; }
  .q-linha {
    grid-template-columns: 2.6rem minmax(0, 1fr) auto auto;
    grid-template-areas: "pos nome total var" "pos barra barra barra";
    gap: 4px var(--esp-2);
  }
  .q-pos { grid-area: pos; }
  .q-nome { grid-area: nome; }
  .q-total { grid-area: total; }
  .q-var { grid-area: var; min-width: 3.4rem; }
  .q-barra { grid-area: barra; }
}