/* ══════════════════════════════════════════════════════
   PANEL DE SPONSOR — pestaña 📊 Datos (tabPlantel), arriba de
   ESTADÍSTICAS DE TEMPORADA. Muestra el sponsor elegido en el
   onboarding con su pasivo VIGENTE (ya con el nivel aplicado, ver
   obtenerBonusSponsor() en 01-main.js) y el progreso del premio de
   esta temporada. Reusa el esqueleto de fila ancha de .spo-card
   (11-sponsor-selector.css: franja de identidad + grilla de 2
   columnas para pasivo/premio) en una variante de solo lectura —
   sin cursor de selección ni check, más una barra de progreso
   propia de este panel debajo del bloque de premio.
   ══════════════════════════════════════════════════════ */

#sponsorInfoWrap { margin-bottom: 4px; }

.spo-view-card {
  position: relative;
  border-radius: 10px;
  padding: 11px 14px 11px 17px;
  overflow: hidden;
  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-view-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 5px;
  border-radius: 10px 0 0 10px;
  background: var(--acento);
}

/* Esta variante no tiene check de selección, así que no necesita el
   padding-right que .spo-identidad reserva para él en el selector. */
.spo-view-card .spo-identidad { padding-right: 0; }

/* Estado "en el techo": borde verde en vez de amarillo, mismo criterio de
   color que .spo-card.sel pero fijo (no depende de click/selección acá). */
.spo-view-card.spo-view-topeado {
  border-color: rgba(0,200,83,0.35);
}
.spo-view-card.spo-view-topeado::before {
  background: var(--verde);
}

/* Tag de nivel al lado del label del pasivo ("Nv. 1", "Nv. 2 · TOPE") */
.spo-nivel-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 8.5px;
  letter-spacing: 0.5px;
  font-family: 'Archivo Black', sans-serif;
  background: rgba(245,208,0,0.14);
  color: var(--acento);
  vertical-align: middle;
}
.spo-view-topeado .spo-nivel-tag {
  background: rgba(0,200,83,0.14);
  color: var(--verde);
}

/* Barra de progreso del premio de esta temporada, debajo del texto del
   bloque de premio (dentro de .spo-block.premio en la grilla). */
.spo-progreso-wrap {
  margin-top: 6px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.spo-progreso-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--acento), var(--verde));
  transition: width 0.3s ease;
}

@media (min-width: 768px) {
  .spo-view-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 13px 18px 13px 19px;
  }
  .spo-view-card .spo-identidad { width: 224px; flex-shrink: 0; }
  .spo-view-card .spo-nombre { font-size: 14px; }
  .spo-view-card .spo-info-grid { flex: 1; grid-template-columns: 1fr 1fr; gap: 18px; }
  .spo-view-card .spo-block-desc { font-size: 12.5px; }
}