/* ══════════════════════════════════════════════════════
   PAUSA DE PARTIDO + CAMBIO VOLUNTARIO
   Botón ⏸ pegado al toggle de velocidad (▶ ▶▶ ▶▶▶) del header del
   partido. Al apretarlo, frena la narración (ver siguienteEvento() en el
   JS) y abre .pausaModal preguntando si querés hacer un cambio. Reutiliza
   el mismo lenguaje visual que el resto de los selectores de jugador
   (.sobre-modal / .sobre-contenido / .carta-jugador — ver lesionModal,
   cambioModal, dt-selector) para no introducir un patrón nuevo: solo hace
   falta CSS propio para el botón de pausa y para los dos pasos de texto
   simple (pausa / elegir quién sale-entra).
   ══════════════════════════════════════════════════════ */

/* Igual que #lesionModal: la base .sobre-modal tiene z-index:200, por
   DEBAJO de #resultado (250, la pantalla del partido en vivo). Sin este
   empuje, estos dos modales se abrirían tapados detrás del partido en vez
   de encima — invisibles pero técnicamente "abiertos". */
#pausaModal.activo,
#cambioVolModal.activo { z-index: 260; }

/* Botón de pausa: mismo grupo visual que ▶/▶▶/▶▶▶ pero con un tinte propio
   para distinguirlo — no es "una velocidad más", es una acción distinta
   (parar el partido), así que no puede confundirse con las otras tres
   opciones del mismo toggle. El separador entre botones ya lo pone
   .vel-modal-btn (border-right, salvo en el último) — como la pausa ahora
   va PRIMERA en la fila (antes de ▶), no hace falta un border-left propio
   acá: quedaría pegado al borde exterior del contenedor, no separando nada. */
.btn-pausa-partido {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.75em !important;
  padding: 5px 10px !important;
}
.btn-pausa-partido:hover {
  background: rgba(255,255,255,0.08);
  color: #fff !important;
}
.btn-pausa-partido:active { opacity: 0.7; }

/* ── Modal de pausa — reusa el esqueleto de .formacion-modal (header con
   ícono + cerrar redondo) en vez del .sobre-contenido genérico. Acá solo
   hace falta angostarlo (el de formación es de 640px, pensado para un
   grid de tarjetas) y darle padding al cuerpo con los botones. El número
   de cambios restantes va en <b> dentro de #pausaSubtitulo (lo arma
   abrirPausaPartido() en el JS) para que se lea de un vistazo, mismo
   criterio que el resto de los textos con dato variable. ── */
.pausa-formacion-modal {
  max-width: 380px;
}
.pausa-formacion-body {
  padding: 16px 16px 16px;
}
/* El número de cambios restantes destaca sobre el resto del subtítulo
   (que hereda el gris apagado de .formacion-modal-subtitulo) — mismo
   contraste que usás en otros textos con un dato variable en <b>. */
.pausa-formacion-modal .formacion-modal-subtitulo b {
  color: var(--texto);
  font-weight: 700;
}
.pausa-botones {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* "Continuar" es la opción secundaria (transparente): la acción primaria
   dorada de .btn-full queda reservada para "Hacer un cambio", que es la
   opción que de verdad requiere una decisión. */
.pausa-btn-continuar {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  border-bottom: 1.5px solid rgba(255,255,255,0.14) !important;
  color: var(--texto2) !important;
  box-shadow: none !important;
}
.pausa-btn-continuar:hover {
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
}

/* ── Modal de cambio voluntario (elegir quién sale / quién entra) ──
   La lista puede tener hasta 11 jugadores; con el .sobre-contenido
   genérico (que scrollea TODO junto: título + hint + lista + footer)
   había que bajar hasta el final de la lista para llegar a "Cancelar".
   Acá el modal pasa a columna: título y hint quedan fijos arriba, la
   lista (#cambioVolOpciones) es la única parte que scrollea, y el
   footer con Volver/Cancelar queda siempre pegado abajo, visible sin
   scrollear. */
#cambioVolModal .sobre-contenido {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#cambioVolModal .sobre-titulo,
#cambioVolModal .sobre-hint {
  flex-shrink: 0;
}
#cambioVolOpciones.sobre-resultado.activo {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 62vh !important;
  gap: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}
/* La pieza que faltaba: sin esto, cada .carta-jugador hereda flex-shrink:1
   por defecto y se achica junto con las demás para entrar en la altura
   (ambigua) del contenedor, en vez de mantener su tamaño real y dejar que
   sea el overflow-y:auto de arriba el que maneje el sobrante con scroll. */
#cambioVolOpciones .carta-jugador {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

.cambio-vol-footer {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-shrink: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cambio-vol-footer .btn-full { flex: 1; }
.cambio-vol-volver,
.cambio-vol-cancelar {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  border-bottom: 1.5px solid rgba(255,255,255,0.12) !important;
  color: var(--texto2) !important;
  box-shadow: none !important;
  font-size: 0.78em !important;
}
.cambio-vol-volver:hover,
.cambio-vol-cancelar:hover {
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
}

/* ═══ RESPONSIVE — DESKTOP (≥768px) ═══ */
@media (min-width: 768px) {
  .pausa-formacion-modal { max-width: 420px; }
  #cambioVolOpciones.sobre-resultado.activo { max-height: 68vh !important; }
}