/* MusicBook — SOLO móvil: sin tarjetas de colores en Amigos y Grupos; "Crear grupo" pasa a ser un botón redondo con "+" */
@media (max-width: 767px) {
  /* Amigos: se quita la tarjeta de color completa */
  div[class*="from-cyan-500/10"][class*="via-blue-500/10"]:has(> h1) { display: none !important; }
  div[class*="from-cyan-500/10"][class*="via-blue-500/10"]:has(> h1) + * { margin-top: 0 !important; }

  /* Grupos: la tarjeta pierde fondo, borde y título; queda solo el botón */
  div[class*="from-violet-500/10"][class*="via-fuchsia-500/10"]:has(h1) {
    background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  }
  div[class*="from-violet-500/10"][class*="via-fuchsia-500/10"]:has(h1) div:has(> h1) { display: none !important; }
  div[class*="from-violet-500/10"][class*="via-fuchsia-500/10"]:has(h1) > div { justify-content: flex-start !important; flex-wrap: nowrap !important; margin: 0 !important; padding: 0 0 0 12px !important; }
  /* Botón "Crear grupo" -> círculo con + (igual a los del encabezado) */
  div[class*="from-violet-500/10"][class*="via-fuchsia-500/10"]:has(h1) button {
    font-size: 0 !important; width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important;
    border-radius: 9999px !important; border: 0 !important;
    background-image: none !important; background-color: rgba(127,127,127,.16) !important; box-shadow: none !important;
    color: var(--foreground, #111) !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 0 !important;
  }
  div[class*="from-violet-500/10"][class*="via-fuchsia-500/10"]:has(h1) button svg {
    width: 20px !important; height: 20px !important; margin: 0 !important; flex: none !important;
  }

  /* Tarjetas de SoundCloud y Spotify: sin esquinas redondas en móvil (en escritorio quedan redondeadas) */
  .rounded-xl.overflow-hidden:has(> div > iframe[data-mbsc]),
  .rounded-xl.overflow-hidden:has(> div > iframe[data-mbsp]),
  div:has(> iframe[data-mbsc]), div:has(> iframe[data-mbsp]),
  button[aria-label^="Reproducir en S"] { border-radius: 0 !important; }
}