/* Duelos Troll MLBB - vetos antes del sorteo (js/ui-vetos.js): el botón "Sortear con vetos", la ficha
   de los tres pasos y la línea "Vetados: ..." del duelo. Todo lo propio lleva el prefijo vt.
   La rejilla, el buscador, los roles y el pie pegado abajo son los del selector de duelo (.pkgrid,
   .pkt, .pkfoot... en css/components.css): aquí solo va lo que cambia. Colores: tokens de base.css. */

/* La entrada (el botón "Sortear con vetos") vive dentro de "Opciones del sorteo": su reparto está en
   css/sorteo-opciones.css (.sopcacc). Aquí ya no hay reglas sobre .actions (las dos que quedan, en css/layout.css). */

/* ---------- cabecera de cada paso y cuántos vetos ---------- */
.vtpaso{margin:2px 0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.vtn{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.vtnl{font-size:15px;line-height:20px}
.seg.vtseg{flex:none;grid-template-columns:repeat(4,44px);max-width:none}
.vtinfo{margin:12px 0 0;font-size:15px;line-height:21px}
.vtnota{margin:10px 0 0;font-size:14px;line-height:19px;color:var(--fg2)}
.vtnota:empty{display:none}

/* ---------- héroes vetados: chips con el retrato, el nombre tachado y quién lo vetó ---------- */
.vtsel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:44px;margin-top:10px}
.vtvacio{margin:0;font-size:14px;line-height:19px;color:var(--fg2)}
.vtc{
  position:relative;display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:36px;
  padding:4px 12px 4px 5px;border:0;border-radius:18px;background:var(--sheet-card);color:var(--fg);
  font-size:14px;line-height:17px;text-align:left;
}
.scard .vtc{background:var(--fill)}
button.vtc{cursor:pointer}
button.vtc::after{content:"";position:absolute;inset:-4px 0}   /* zona táctil de 44 px */
button.vtc:active{opacity:.7}
.vtc .av{filter:grayscale(1)}
.vtcn{display:flex;flex-direction:column;min-width:0}
.vtcn s{font-weight:600;overflow-wrap:anywhere}
.vtcq{font-size:12px;line-height:15px;color:var(--fg2)}
.vtx{flex:none;font-size:18px;line-height:1;color:var(--fg2)}

/* ---------- rejilla: casillas vetadas ----------
   Vetado: retrato en gris y apagado, nombre tachado y una marca con quién lo vetó (J1 o J2).
   Los de quien está vetando llevan además un aro rojo y se quitan con otro toque. */
.vtt.is-vet .av{filter:grayscale(1);opacity:.45}
.vtt.is-vet .pkn{color:var(--fg2);text-decoration:line-through}
.vtt.is-mio{box-shadow:inset 0 0 0 2px var(--bad-ink)}
.vtm{width:auto;min-width:24px;padding:0 5px;border-radius:10px;background:var(--fg);color:var(--sheet-card);font-size:11px}

/* ---------- pie: lo que lleva el jugador y los dos botones ---------- */
.vtbtns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.vtbtns .btn{padding-inline:6px}

/* ---------- paso 3: resumen y sorteo ---------- */
.vtres{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
.vtj{display:flex;flex-direction:column;gap:8px}
.vtj .vtsel{margin:0;min-height:0}
.vtpool{margin:14px 4px 0;font-size:15px;line-height:21px;color:var(--fg2)}
.vtpool.bad{margin-inline:0;padding:10px 14px;border-radius:12px;background:var(--bad-bg);color:var(--bad-ink)}
.vtpie{margin:10px 4px 0;font-size:13px;line-height:18px;color:var(--fg2);text-align:center}

/* ---------- duelo: línea de vetados ---------- */
.vtlin{margin:12px 4px 0;font-size:13px;line-height:18px;color:var(--fg2)}
.vtlin b{font-weight:600;color:var(--fg)}

@media (min-width:700px) and (max-width:1099.98px){
  .vtres{grid-template-columns:1fr 1fr}   /* ventana centrada: los dos jugadores lado a lado */
}
@media (hover:hover){
  button.vtc:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
  .vtt.is-mio:hover{box-shadow:inset 0 0 0 2px var(--bad-ink)}
  .vtt[aria-disabled="true"]:hover{box-shadow:none}
}