/* ══════════════════════════════════════════════════════
   SELECTOR DE SPONSOR — último paso del onboarding de
   arranque de equipo (DT → formación → capitán → fichajes →
   pelota parada → SPONSOR). Reusa .dt-selector-overlay /
   .dt-selector-modal como el resto de selectores modales de
   la app.

   LAYOUT "fila ancha": en vez de apilar logo → pasivo →
   premio en 3 bloques verticales (que obligaba a scrollear
   para leer los 4 sponsors), cada carta es una fila con una
   franja de identidad (logo + nombre + check) arriba y, debajo,
   una grilla de 2 columnas con el texto COMPLETO de pasivo y
   premio uno al lado del otro. En mobile la grilla cae a 1
   columna (pasivo arriba, premio abajo) y la franja de
   identidad se mantiene como fila propia arriba de todo. En
   desktop (≥768px) la franja de identidad pasa a ser una
   columna angosta a la izquierda y la grilla de 2 columnas
   queda al lado, en la misma fila — así se aprovecha el ancho
   en vez de apilar todo en alto.
   ══════════════════════════════════════════════════════ */

.spo-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.spo-card {
  position: relative;
  border-radius: 10px;
  padding: 11px 14px 11px 17px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  border: 2px solid rgba(245,208,0,0.3);
  background: linear-gradient(145deg, #14141f 0%, #0c0c14 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spo-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 5px;
  border-radius: 10px 0 0 10px;
  background: var(--acento);
}
.spo-card.sel {
  border-color: var(--acento);
  box-shadow: 0 0 15px rgba(245,208,0,0.18), 0 4px 20px rgba(0,0,0,0.7);
}

/* Franja de identidad: logo + nombre + check de seleccionado.
   padding-right reserva el hueco para el check, que ahora es absolute
   dentro de esta franja — así nunca compite por ancho con el nombre
   ni lo pisa, sea cual sea el largo de la marca. */
.spo-identidad {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 30px;
}

/* Placa clara de fondo para que cualquier logo (texto de color, blanco
   sobre azul, etc.) se lea bien sobre la carta oscura. */
.spo-logo-box {
  flex-shrink: 0;
  width: 76px;
  height: 34px;
  border-radius: 6px;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px 6px;
}
.spo-logo-box svg { width: 100%; height: 100%; }

.spo-nombre {
  flex: 1;
  min-width: 0;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; color: var(--texto);
  text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Check de seleccionado: absolute dentro de .spo-identidad, pegado al
   borde derecho de su hueco reservado (padding-right de arriba). Al
   sacarlo del flujo del flex nunca le come ancho al nombre ni queda
   pisándolo, sea cual sea el largo de la marca. */
.spo-check {
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold;
  color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.spo-card.sel .spo-check {
  background: var(--verde);
  border-color: var(--verde);
  color: #06280f;
}

/* Grilla de pasivo/premio: 1 columna en mobile (apilados), 2 columnas
   en desktop (lado a lado). El texto es SIEMPRE el completo — nada de
   click-to-reveal ni de resúmenes truncados. */
.spo-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.spo-block-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--acento);
}
.spo-block.premio .spo-block-lbl { color: var(--verde); }

.spo-block-desc {
  font-size: 11.5px; color: var(--texto2); margin-top: 3px; line-height: 1.4;
}

/* ═══ RESPONSIVE — DESKTOP (≥768px) ═══
   La franja de identidad pasa a columna angosta a la izquierda y la
   grilla de pasivo/premio queda al lado en la misma fila. */
@media (min-width: 768px) {
  .spo-lista { gap: 12px; }
  .spo-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 13px 18px 13px 19px;
  }
  .spo-identidad {
    width: 224px;
    flex-shrink: 0;
  }
  .spo-logo-box { width: 80px; height: 36px; }
  .spo-nombre { font-size: 14px; }
  .spo-info-grid {
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .spo-block-desc { font-size: 12.5px; }
}