/* ══════════════════════════════════════════════════════
   SELECTOR DE INTERCAMBIO — modal propio con cartas de
   jugador (mismos datos que la carta real, en escala
   compacta — mismo criterio que #capitanSelectorLista /
   #sobreResultado en 01-base.css), agrupadas por misma
   posición / misma línea / fuera de posición. Reemplaza al
   viejo listado angosto dentro de mostrarAviso(). Reusa
   .dt-selector-overlay como base (mismo lenguaje visual que
   selector de DT/capitán) y .carta-jugador / .carta-estado /
   .carta-stats tal cual están definidas en 01-base.css —
   acá se escalan a un tamaño chico y se agregan las piezas
   nuevas: encabezados de sección y la fila de condición
   (flecha + stamina) debajo de cada carta.

   En mobile la lista sigue en una sola columna (bottom
   sheet angosto). En desktop el modal se ensancha y la
   lista pasa a grid de 2-3 columnas para aprovechar el
   ancho — mismo espíritu que .dt-selector-lista con las
   cartas de DT, pero acá con cartas de jugador (más chicas,
   ver el bloque compacto más abajo).
   ══════════════════════════════════════════════════════ */

.swap-modal {
  max-width: 480px;
}

#swapSelectorLista {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 62vh !important;
  gap: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 10px !important;
}
#swapSelectorLista .carta-jugador {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 8px !important;
}

/* ── Escala compacta de la carta dentro de este modal — mismo criterio
   que #capitanSelectorLista/#sobreResultado en 01-base.css, un poco más
   chico todavía porque acá puede haber bastantes más candidatos. ── */
#swapSelectorLista .carta-jugador { padding: 9px 11px; }
#swapSelectorLista .carta-pos { font-size: 0.58em; padding: 2px 6px; margin-bottom: 3px; }
#swapSelectorLista .carta-nombre {
  font-size: 0.88em;
  height: 2.2em;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#swapSelectorLista .carta-meta { margin-top: 3px; gap: 4px; }
#swapSelectorLista .carta-anio,
#swapSelectorLista .carta-equipo { font-size: 0.58em; padding: 1px 5px; }
#swapSelectorLista .carta-estado { font-size: 0.56em; margin-top: 5px; padding: 2px 6px; }
#swapSelectorLista .carta-ovr-box { padding: 3px 8px 4px; }
#swapSelectorLista .carta-ovr-box .carta-ovr { font-size: 1.35em; }
#swapSelectorLista .carta-ovr-box .carta-ovr-label { font-size: 0.48em; padding: 1px 5px; margin-top: 1px; }
#swapSelectorLista .carta-stats { margin-top: 7px; padding-top: 7px; gap: 5px; }
#swapSelectorLista .carta-stat { padding: 4px 3px; }
#swapSelectorLista .carta-stat .label { font-size: 0.52em; margin-bottom: 1px; }
#swapSelectorLista .carta-stat .valor { font-size: 1em; }

/* ── Encabezado de sección (Misma posición / Misma línea / etc.) ── */
.swap-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 2px 6px;
}
.swap-sec:first-child { margin-top: 2px; }
.swap-sec .swap-sec-txt {
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.62em;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--acento);
  white-space: nowrap;
}
.swap-sec.emergencia .swap-sec-txt { color: var(--acento2); }
.swap-sec .swap-sec-ln {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ── Fila de condición: flecha + barra de stamina, debajo de los stats ── */
.swap-cond {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 1;
}
.swap-cond-flecha {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.swap-cond-flecha svg { width: 15px; height: 15px; }
.swap-cond-lbl {
  font-size: 0.56em;
  color: var(--texto2);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.swap-stam { flex: 1; min-width: 0; }
.swap-stam-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.56em;
  color: var(--texto2);
  margin-bottom: 3px;
}
.swap-stam-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.swap-stam-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
}

.swap-vacio {
  text-align: center;
  color: var(--texto2);
  padding: 28px 16px;
  font-size: 0.86em;
}

/* ═══ RESPONSIVE — DESKTOP (≥768px) ═══
   Acá es donde de verdad se aprovecha el ancho: el modal pasa de 480px
   (bottom sheet mobile) a un panel bien ancho, y la lista deja de ser
   una columna angosta para pasar a grid — 2 o 3 cartas por fila según
   entren, cada encabezado de sección ocupa el ancho completo (grid-column
   1/-1) para separar los grupos con claridad. */
@media (min-width: 768px) {
  .swap-modal {
    max-width: 860px;
    width: 100%;
  }

  #swapSelectorLista {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    justify-content: center !important;
    gap: 12px !important;
    max-height: 74vh !important;
    padding: 14px 18px 16px !important;
  }
  #swapSelectorLista .carta-jugador {
    flex: 0 0 260px !important;
    max-width: 260px !important;
    margin: 0 !important;
    width: auto !important;
  }
  .swap-sec {
    flex: 1 0 100%;
    width: 100%;
    margin: 10px 0 6px;
  }
  .swap-sec:first-child { margin-top: 0; }

  /* Con más aire disponible, un pelo más de tamaño que en mobile —
     sigue siendo compacta, no vuelve a la escala de carta real. */
  #swapSelectorLista .carta-nombre { font-size: 0.94em; }
  #swapSelectorLista .carta-ovr-box .carta-ovr { font-size: 1.5em; }
  #swapSelectorLista .carta-stat .valor { font-size: 1.1em; }
  .swap-sec .swap-sec-txt { font-size: 0.68em; }
  .swap-cond-lbl { font-size: 0.6em; }
  .swap-stam-row { font-size: 0.6em; }
}