/* =====================================================================
   VOTOS DE BALANCE (js/ui-votos.js). Prefijo vt.
   .vt      bloque "¿Cómo quedó este héroe?" de la ficha del héroe (.vtc es su tarjeta)
   .vtb     los tres botones (.vto); el elegido lleva aria-pressed="true"
   .vtm     qué votaste y cómo quitarlo        .vtres  resultado: .vtbar (barra de tres tramos) y .vtr (total)
   .vtrec   recordatorio de la tarjeta del duelo
   .vtg     lista "Lo que dice el grupo" de la Guía
   Un color por respuesta, con las tintas de texto de base.css (llegan a 4,5:1 en claro y en oscuro):
   muy fuerte = --bad-ink, parejo = --good-ink, injugable = --link.
   ===================================================================== */
.vt .fuerte,.vtg .fuerte{--k:var(--bad-ink)}
.vt .parejo,.vtg .parejo{--k:var(--good-ink)}
.vt .injugable,.vtg .injugable{--k:var(--link)}

/* ---------- ficha del héroe ---------- */
.vtc{display:flex;flex-direction:column;gap:10px}
.vtc .link{align-self:flex-start}
.vtl,.vtm{font-size:14px;line-height:19px;color:var(--fg2)}
.vtm.err{color:var(--bad-ink)}
.vtb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vto{
  display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;
  border:0;border-radius:10px;background:var(--fill);color:var(--fg);cursor:pointer;
  font-size:14px;line-height:17px;font-weight:600;padding:5px 4px;text-align:center;
}
.vto i,.vtk i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--k)}
.vto:active{opacity:.7}
.vto[aria-pressed="true"]{background:var(--accent-fill);color:#fff}
.vto[aria-pressed="true"] i{box-shadow:0 0 0 2px #fff}
.vtres{display:flex;flex-direction:column;gap:6px}
.vtbar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;background:var(--fill)}
.vtbar i{flex:1 1 0;min-width:4px;background:var(--k)}
.vtr{font-size:14px;line-height:20px;color:var(--fg)}
.vtr b{font-weight:600}
.vtk{white-space:nowrap}
.vtk i{display:inline-block;margin-right:4px}

/* ---------- tarjeta del duelo: recordatorio ---------- */
.vtrec{margin:10px 4px 0;font-size:13px;line-height:18px;color:var(--fg2)}
.vtrec p{margin:0}
.vtrl{display:flex;flex-wrap:wrap;gap:0 20px}

/* ---------- Guía: "Lo que dice el grupo" ---------- */
.vtg{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--card);font-size:15px;line-height:20px}
.vtgh{margin:0;font-size:15px;line-height:20px;font-weight:700}
.vtgs,.vtge{margin:4px 0 0;font-size:13px;line-height:18px;color:var(--fg2)}
.vtge{margin-top:8px}
.vtgl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.vtgl li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.vtgn{font-size:13px;line-height:18px;color:var(--fg2);font-variant-numeric:tabular-nums}

@media (min-width:700px){
  .vto{font-size:15px;padding-inline:8px}
}
@media (hover:hover){
  .vto:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
  .vto[aria-pressed="true"]:hover{box-shadow:none;filter:brightness(.92)}
}